Configuration Enhancements and Fixes: Metadata Validation Setup and Build Corrections

govtool/frontend/package.json

@@ -72,7 +72,7 @@
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitest/ui": "^1.1.0",
-    "chromatic": "^10.0.0",
+    "chromatic": "^11.3.0",
     "eslint": "^8.38.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.29.1",

govtool/frontend/src/components/molecules/Field/TextArea.tsx

@@ -56,13 +56,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
       [handleBlur, handleFocus],
     );
 
-    const getCounterBottomSxValue = () => {
-      if (props.isModifiedLayout && errorMessage) return 30;
-      if (props.isModifiedLayout) return 10;
-      if (errorMessage) return 52.5;
-      return 35;
-    };
-
     return (
       <Box
         sx={{
@@ -83,12 +76,31 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
             {label}
           </Typography>
         )}
-        <TextAreaBase
-          errorMessage={errorMessage}
-          maxLength={maxLength}
-          {...props}
-          ref={textAreaRef}
-        />
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            position: "relative",
+          }}
+        >
+          <TextAreaBase
+            errorMessage={errorMessage}
+            maxLength={maxLength}
+            {...props}
+            ref={textAreaRef}
+          />
+          <Typography
+            color="#8E908E"
+            sx={{
+              bottom: 12,
+              position: "absolute",
+              right: 14,
+            }}
+            variant="caption"
+          >
+            {props?.value?.toString()?.length ?? 0}/{maxLength}
+          </Typography>
+        </Box>
         <FormHelpfulText
           helpfulText={helpfulText}
           helpfulTextStyle={helpfulTextStyle}
@@ -97,17 +109,6 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
           errorMessage={errorMessage}
           errorStyles={errorStyles}
         />
-        <Typography
-          color="#8E908E"
-          sx={{
-            bottom: getCounterBottomSxValue(),
-            position: "absolute",
-            right: 15,
-          }}
-          variant="caption"
-        >
-          {props?.value?.toString()?.length ?? 0}/{maxLength}
-        </Typography>
       </Box>
     );
   },

govtool/frontend/src/components/organisms/Slider.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { generatePath, useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
 import { KeenSliderOptions } from "keen-slider";
@@ -77,6 +77,19 @@ export const Slider = ({
     instanceRef.current?.moveToIdx(0);
   };
 
+  const onClickShowAll = useCallback(() => {
+    navigate(
+      generatePath(
+        onDashboard
+          ? PATHS.dashboardGovernanceActionsCategory
+          : PATHS.governanceActionsCategory,
+        {
+          category: navigateKey,
+        },
+      ),
+    );
+  }, [navigate, onDashboard]);
+
   useEffect(() => {
     if (instanceRef.current) {
       setIsSliderInitialized(true);
@@ -89,7 +102,7 @@ export const Slider = ({
     filters,
     sorting,
     searchPhrase,
-    pendingTransaction.vote?.resourceId,
+    pendingTransaction?.vote?.resourceId,
     data,
   ]);
 
@@ -126,21 +139,7 @@ export const Slider = ({
                 minWidth: 93,
                 "&:hover": { backgroundColor: arcticWhite },
               }}
-              onClick={() => {
-                if (onDashboard) {
-                  navigate(
-                    generatePath(PATHS.dashboardGovernanceActionsCategory, {
-                      category: navigateKey,
-                    }),
-                  );
-                } else {
-                  navigate(
-                    generatePath(PATHS.governanceActionsCategory, {
-                      category: navigateKey,
-                    }),
-                  );
-                }
-              }}
+              onClick={onClickShowAll}
             >
               {t("slider.showAll")}
             </Button>

govtool/frontend/src/components/organisms/StatusModal.tsx

@@ -48,7 +48,7 @@ export const StatusModal = () => {
           textAlign="center"
           sx={{ fontSize: "16px", fontWeight: "400" }}
         >
-          {state?.message}
+          {state?.message}{" "}
           {state?.link && (
             <Link
               onClick={() => openInNewTab(state?.link || "")}

govtool/frontend/src/hooks/queries/useGetVoterInfoQuery.ts

@@ -10,10 +10,12 @@ export const useGetVoterInfo = () => {
   const { data } = useQuery({
     queryKey: [
       QUERY_KEYS.useGetDRepInfoKey,
-      (pendingTransaction.registerAsDrep ||
-        pendingTransaction.registerAsSoleVoter ||
-        pendingTransaction.retireAsDrep ||
-        pendingTransaction.retireAsSoleVoter)?.transactionHash,
+      (
+        pendingTransaction?.registerAsDrep ||
+        pendingTransaction?.registerAsSoleVoter ||
+        pendingTransaction?.retireAsDrep ||
+        pendingTransaction?.retireAsSoleVoter
+      )?.transactionHash,
     ],
     enabled: !!dRepID,
     queryFn: () => getVoterInfo(dRepID),

govtool/frontend/src/pages/DashboardGovernanceActionsCategory.tsx

@@ -57,11 +57,10 @@ export const DashboardGovernanceActionsCategory = () => {
     isProposalsFetching,
   );
 
-  const mappedData = useMemo(() => removeDuplicatedProposals(proposals), [
-    proposals,
-    voter?.isRegisteredAsDRep,
-    isProposalsFetchingNextPage,
-  ]);
+  const mappedData = useMemo(
+    () => removeDuplicatedProposals(proposals),
+    [proposals, voter?.isRegisteredAsDRep, isProposalsFetchingNextPage],
+  );
 
   return (
     <Background>
@@ -146,13 +145,10 @@ export const DashboardGovernanceActionsCategory = () => {
                   <Box pb={4.25} key={item.txHash + item.index}>
                     <GovernanceActionCard
                       {...item}
-                      index={item.index}
                       inProgress={
                         pendingTransaction.vote?.resourceId ===
                         `${item.txHash ?? ""}${item.index ?? ""}`
                       }
-                      // TODO: Add data validation
-                      isDataMissing={false}
                       onClick={() => {
                         saveScrollPosition();
 

govtool/frontend/src/stories/GovernanceAction.stories.ts

@@ -1,61 +1,93 @@
-// Story to be updated when new Gov Actions are finished
-/* eslint-disable storybook/default-exports */
-
-// import type { Meta, StoryObj } from "@storybook/react";
-// import { within, userEvent, waitFor, screen } from "@storybook/testing-library";
-// import { expect, jest } from "@storybook/jest";
-
-// import { formatDisplayDate } from "@utils";
-// import { GovernanceActionCard } from "@/components/molecules";
-
-// const meta = {
-//   title: "Example/GovernanceActionCard",
-//   component: GovernanceActionCard,
-//   parameters: {
-//     layout: "centered",
-//   },
-//   tags: ["autodocs"],
-// } satisfies Meta<typeof GovernanceActionCard>;
-
-// export default meta;
-// type Story = StoryObj<typeof meta>;
-
-// export const GovernanceActionCardComponent: Story = {
-//   args: {
-//     createdDate: "1970-01-01T00:00:00Z",
-//     expiryDate: "1970-02-01T00:00:00Z",
-//     type: "exampleType",
-//     txHash: "sad78afdsf7jasd98d",
-//     index: 2,
-//     onClick: jest.fn(),
-//   },
-//   play: async ({ canvasElement, args }) => {
-//     const canvas = within(canvasElement);
-//     expect(canvas.getByTestId("exampleType-type")).toBeInTheDocument();
-//     expect(canvas.getByTestId("sad78afdsf7jasd98d#2-id")).toBeInTheDocument();
-//     expect(
-//       canvas.getByText(formatDisplayDate("1970-01-01T00:00:00Z")),
-//     ).toBeInTheDocument();
-//     expect(
-//       canvas.getByText(formatDisplayDate("1970-02-01T00:00:00Z")),
-//     ).toBeInTheDocument();
-
-//     const tooltips = canvas.getAllByTestId("InfoOutlinedIcon");
-//     await userEvent.hover(tooltips[0]);
-//     await waitFor(async () => {
-//       expect(screen.getByRole("tooltip")).toBeInTheDocument();
-//       expect(screen.getByRole("tooltip")).toHaveTextContent(/Submission Date/i);
-//       await userEvent.unhover(tooltips[0]);
-//     });
-//     await userEvent.hover(tooltips[1]);
-//     await waitFor(() => {
-//       expect(screen.getByRole("tooltip")).toBeInTheDocument();
-//       expect(screen.getByRole("tooltip")).toHaveTextContent(/Expiry Date/i);
-//     });
-
-//     await userEvent.click(
-//       canvas.getByTestId("govaction-sad78afdsf7jasd98d#2-view-detail"),
-//     );
-//     await expect(args.onClick).toHaveBeenCalled();
-//   },
-// };
+import type { Meta, StoryObj } from "@storybook/react";
+import { within, userEvent, waitFor, screen } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+import { GAMetedataErrors, formatDisplayDate } from "@utils";
+import { GovernanceActionCard } from "@/components/molecules";
+
+const meta = {
+  title: "Example/GovernanceActionCard",
+  component: GovernanceActionCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof GovernanceActionCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const commonArgs = {
+  about: "About this Governance Action",
+  createdDate: "1970-01-01T00:00:00Z",
+  createdEpochNo: 302,
+  expiryDate: "1970-02-01T00:00:00Z",
+  expiryEpochNo: 420,
+  index: 2,
+  inProgress: false,
+  isDataMissing: false,
+  onClick: jest.fn(),
+  title: "Example title",
+  txHash: "sad78afdsf7jasd98d",
+  type: "exampleType",
+};
+
+export const GovernanceActionCardComponent: Story = {
+  args: commonArgs,
+
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByTestId("exampleType-type")).toBeInTheDocument();
+    expect(canvas.getByTestId("sad78afdsf7jasd98d#2-id")).toBeInTheDocument();
+    expect(
+      canvas.getByText(formatDisplayDate("1970-01-01T00:00:00Z")),
+    ).toBeInTheDocument();
+    expect(
+      canvas.getByText(formatDisplayDate("1970-02-01T00:00:00Z")),
+    ).toBeInTheDocument();
+    const tooltips = canvas.getAllByTestId("InfoOutlinedIcon");
+    await userEvent.hover(tooltips[0]);
+    await waitFor(async () => {
+      expect(screen.getByRole("tooltip")).toBeInTheDocument();
+      expect(screen.getByRole("tooltip")).toHaveTextContent(/Submission Date/i);
+      await userEvent.unhover(tooltips[0]);
+    });
+    await userEvent.hover(tooltips[1]);
+    await waitFor(() => {
+      expect(screen.getByRole("tooltip")).toBeInTheDocument();
+      expect(screen.getByRole("tooltip")).toHaveTextContent(/Expiry Date/i);
+    });
+    await userEvent.click(
+      canvas.getByTestId("govaction-sad78afdsf7jasd98d#2-view-detail"),
+    );
+    await expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+export const GovernanceActionCardIsLoading: Story = {
+  args: {
+    ...commonArgs,
+    inProgress: true,
+  },
+};
+
+export const GovernanceActionCardDataMissing: Story = {
+  args: {
+    ...commonArgs,
+    isDataMissing: GAMetedataErrors.DATA_MISSING,
+  },
+};
+
+export const GovernanceActionCardIncorectFormat: Story = {
+  args: {
+    ...commonArgs,
+    isDataMissing: GAMetedataErrors.INCORRECT_FORMAT,
+  },
+};
+
+export const GovernanceActionCardNotVerifiable: Story = {
+  args: {
+    ...commonArgs,
+    isDataMissing: GAMetedataErrors.NOT_VERIFIABLE,
+  },
+};