fix(Not found): handles errors when no governance action with matching is found

Author: emmanuel-musau

ui/src/Components/Molecules/ActionsEmptyState.tsx

@@ -1,7 +1,14 @@
 import { Card, Typography } from "@mui/material";
 import { useTranslation } from "../../contexts/I18nContext";
 
-export const ActionsEmptyState = () => {
+type ActionsEmptyStateProps = {
+  title: string;
+  description: string;
+};
+export const ActionsEmptyState = ({
+  title,
+  description,
+}: ActionsEmptyStateProps) => {
   const { t } = useTranslation();
   return (
     <Card
@@ -18,11 +25,9 @@ export const ActionsEmptyState = () => {
       }}
     >
       <Typography fontSize={22} fontWeight={500}>
-        {t("outcomesList.noResults.title")}
-      </Typography>
-      <Typography fontWeight={400}>
-        {t("outcomesList.noResults.description")}
+        {title}
       </Typography>
+      <Typography fontWeight={400}>{description}</Typography>
     </Card>
   );
 };

ui/src/Components/Molecules/GovernanceActionsList.tsx

@@ -55,7 +55,10 @@ const GovernanceActionsList = () => {
 
       {!isGovActionsLoading && !displayedActions.length ? (
         <Box sx={{ paddingY: 3 }}>
-          <ActionsEmptyState />
+          <ActionsEmptyState
+            title={t("outcomesList.noResults.title")}
+            description={t("outcomesList.noResults.description")}
+          />
         </Box>
       ) : null}
 
@@ -90,7 +93,9 @@ const GovernanceActionsList = () => {
             {isFetchingNextPage ? (
               <CircularProgress size={20} sx={{ mr: 1 }} />
             ) : null}
-            {isFetchingNextPage ? t("loaders.loading") : t("outcomesList.showMore")}
+            {isFetchingNextPage
+              ? t("loaders.loading")
+              : t("outcomesList.showMore")}
           </Button>
         </Box>
       )}

ui/src/Components/SingleAction/GovernanceVoting.tsx

@@ -15,6 +15,8 @@ type GovernanceVotingProps = {
   action: GovernanceAction;
 };
 const GovernanceVoting = ({ action }: GovernanceVotingProps) => {
+  if (!action) return null;
+
   const {
     yes_votes,
     no_votes,
@@ -29,6 +31,7 @@ const GovernanceVoting = ({ action }: GovernanceVotingProps) => {
     type,
     status,
   } = action;
+
   const {
     networkMetrics,
     epochParams,
@@ -37,7 +40,9 @@ const GovernanceVoting = ({ action }: GovernanceVotingProps) => {
     areSPOVoteTotalsDisplayed,
     areCCVoteTotalsDisplayed,
   } = useNetworkMetrics(action);
+
   const { t } = useTranslation();
+
   const {
     palette: {
       textBlack,

ui/src/Pages/GovernanceAction.tsx

@@ -35,6 +35,7 @@ import { Typography } from "../Components/Atoms/Typography";
 import ProposalCardLoader from "../Components/Loaders/ProposalCardLoader";
 import { useTranslation } from "../contexts/I18nContext";
 import GovernanceActionAuthors from "../Components/Molecules/GovernanceActionAuthors";
+import { ActionsEmptyState } from "../Components/Molecules/ActionsEmptyState";
 
 type GovernanceActionProps = {
   id: string;
@@ -70,7 +71,7 @@ const StyledTab = styled(({ isMobile, ...props }: StyledTabProps) => (
 
 function GovernanceAction({ id }: GovernanceActionProps) {
   const { isMobile } = useScreenDimension();
-  const { governanceAction, isGovernanceActionLoading } =
+  const { governanceAction, isGovernanceActionLoading, governanceActionError } =
     useGetGovernanceActionQuery(id);
   const { metadata, metadataValid, isMetadataLoading } =
     useMetadata(governanceAction);
@@ -268,6 +269,28 @@ function GovernanceAction({ id }: GovernanceActionProps) {
     );
   }
 
+  if (governanceActionError || !governanceAction) {
+    return (
+      <Box display="flex" flex={1} flexDirection="column" width="100%">
+        <Box
+          data-testid={`single-action-page-circular-loader`}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flex: 1,
+            justifyContent: "center",
+            minHeight: "75vh",
+          }}
+        >
+          <ActionsEmptyState
+            title={t("outcome.noResults.title")}
+            description={t("outcome.noResults.description")}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
   const renderAllTabContent = () => {
     return tabDefinitions.map((tab) => (
       <CustomTabPanel

ui/src/i18n/translations/en.json

@@ -118,7 +118,11 @@
       "details": "Details"
     },
     "viewDetails": "View Details",
-    "seeDiscussion": "See discussion"
+    "seeDiscussion": "See discussion",
+    "noResults": {
+      "title": "Governance action not found",
+      "description": "The governance action you're looking for could not be found. The ID might be incorrect, or there could be a temporary issue loading the data."
+    }
   },
   "proposalDiscussion": {
     "title": "Discussion forum",