feat/535-ga-display-display-warning-if-metadata-is-not-in-the-expected-format

CHANGELOG.md

@@ -10,6 +10,7 @@ changes.
 
 ## [Unreleased]
 
+- Check a GA metadata is valid [Issue 535](https://github.com/IntersectMBO/govtool/issues/535)
 - DRep metadata builder [Issue 497](https://github.com/IntersectMBO/govtool/issues/497)
 - Update Cardano Serialization Lib to 12.0.0-alpha.19 [Issue 521](https://github.com/IntersectMBO/govtool/issues/521)
 - Add generate jsonld function [Issue 451](https://github.com/IntersectMBO/govtool/issues/451)

govtool/frontend/src/components/molecules/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import { NavLink, To } from "react-router-dom";
 import { Box } from "@mui/material";
 import Divider from "@mui/material/Divider";
 
-import { useScreenDimension, useTranslation } from "@hooks";
+import { useScreenDimension } from "@hooks";
 import { Typography } from "@atoms";
 
 type BreadcrumbsProps = {
@@ -18,7 +18,6 @@ export const Breadcrumbs = ({
   elementTwo,
   isDataMissing,
 }: BreadcrumbsProps) => {
-  const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
 
   return (
@@ -55,7 +54,7 @@ export const Breadcrumbs = ({
           textOverflow: "ellipsis",
         }}
       >
-        {isDataMissing ? t("govActions.dataMissing") : elementTwo}
+        {isDataMissing || elementTwo}
       </Typography>
     </Box>
   );

govtool/frontend/src/components/molecules/DataMissingInfoBox.tsx

@@ -2,12 +2,42 @@ import { Box, Link } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { useTranslation } from "@hooks";
-import { openInNewTab } from "@utils";
+import { GAMetedataErrors, openInNewTab } from "@utils";
 
-export const DataMissingInfoBox = () => {
+export const DataMissingInfoBox = ({
+  isDataMissing,
+  isInProgress,
+  isSubmitted,
+}: {
+  isDataMissing: boolean | GAMetedataErrors;
+  isInProgress?: boolean;
+  isSubmitted?: boolean;
+}) => {
   const { t } = useTranslation();
 
-  return (
+  const gaMetadataErrorMessage = {
+    [GAMetedataErrors.DATA_MISSING]: t("errors.gAMetadata.message.dataMissing"),
+    [GAMetedataErrors.INCORRECT_FORMAT]: t(
+      "errors.gAMetadata.message.incorrectFormat",
+    ),
+    [GAMetedataErrors.NOT_VERIFIABLE]: t(
+      "errors.gAMetadata.message.notVerifiable",
+    ),
+  }[isDataMissing as GAMetedataErrors];
+
+  const gaMetadataErrorDescription = {
+    [GAMetedataErrors.DATA_MISSING]: t(
+      "errors.gAMetadata.description.dataMissing",
+    ),
+    [GAMetedataErrors.INCORRECT_FORMAT]: t(
+      "errors.gAMetadata.description.incorrectFormat",
+    ),
+    [GAMetedataErrors.NOT_VERIFIABLE]: t(
+      "errors.gAMetadata.description.notVerifiable",
+    ),
+  }[isDataMissing as GAMetedataErrors];
+
+  return isDataMissing && !isSubmitted && !isInProgress ? (
     <Box
       sx={{
         mb: 4,
@@ -22,9 +52,7 @@ export const DataMissingInfoBox = () => {
           mb: 0.5,
         }}
       >
-        {/* TODO: Text to confirm/change */}
-        The data that was originally used when this Governance Action was
-        created has been formatted incorrectly.
+        {gaMetadataErrorMessage}
       </Typography>
       <Typography
         sx={{
@@ -33,17 +61,13 @@ export const DataMissingInfoBox = () => {
           mb: 0.5,
         }}
       >
-        {/* TODO: Text to confirm/change */}
-        GovTool uses external sources for Governance Action data, and these
-        sources are maintained by the proposers of the Actions. This error means
-        that GovTool cannot locate the data on the URL specified when the
-        Governance Action was originally posted.
+        {gaMetadataErrorDescription}
       </Typography>
       <Link
         onClick={() =>
           // TODO: Add the correct link
           openInNewTab(
-            "https://docs.sanchogov.tools/how-to-use-the-govtool/getting-started/get-a-compatible-wallet"
+            "https://docs.sanchogov.tools/how-to-use-the-govtool/getting-started/get-a-compatible-wallet",
           )
         }
         sx={{
@@ -56,5 +80,5 @@ export const DataMissingInfoBox = () => {
         {t("learnMore")}
       </Link>
     </Box>
-  );
+  ) : null;
 };

govtool/frontend/src/components/molecules/GovernanceActionCard.tsx

@@ -17,11 +17,8 @@ import {
   getProposalTypeNoEmptySpaces,
 } from "@utils";
 
-const mockedLongText =
-  "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit, distinctio culpa minus eaque illo quidem voluptates quisquam mollitia consequuntur ex, sequi saepe? Ad ex adipisci molestiae sed.";
-
 type ActionTypeProps = Omit<
-  ActionType,
+  ActionTypeToDsiplay,
   | "yesVotes"
   | "noVotes"
   | "abstainVotes"
@@ -32,7 +29,6 @@ type ActionTypeProps = Omit<
   | "rationale"
   | "motivation"
 > & {
-  isDataMissing: boolean;
   onClick?: () => void;
   inProgress?: boolean;
 };
@@ -87,14 +83,12 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         }}
       >
         <GovernanceActionCardHeader
-          // TODO: Remove "Fund our project" when title is implemented everywhere
-          title={title ?? "Fund our project"}
+          title={title}
           isDataMissing={isDataMissing}
         />
         <GovernanceActionCardElement
           label={t("govActions.abstract")}
-          // TODO: Remove mock when possible
-          text={about ?? mockedLongText}
+          text={about}
           textVariant="twoLines"
           dataTestId="governance-action-abstract"
           isSliderCard

govtool/frontend/src/components/molecules/GovernanceActionCardElement.tsx

@@ -5,7 +5,7 @@ import { Typography, Tooltip, CopyButton, TooltipProps } from "@atoms";
 
 type BaseProps = {
   label: string;
-  text: string;
+  text?: string;
   dataTestId?: string;
   isSliderCard?: boolean;
   tooltipProps?: Omit<TooltipProps, "children">;
@@ -33,104 +33,110 @@ export const GovernanceActionCardElement = ({
   isCopyButton,
   tooltipProps,
   marginBottom,
-}: GovernanceActionCardElementProps) => (
-  <Box
-    data-testid={dataTestId}
-    mb={marginBottom ?? isSliderCard ? "20px" : "32px"}
-  >
+}: GovernanceActionCardElementProps) => {
+  if (!text) {
+    return null;
+  }
+  return (
     <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        mb: "4px",
-      }}
+      data-testid={dataTestId}
+      mb={marginBottom ?? isSliderCard ? "20px" : "32px"}
     >
-      <Typography
+      <Box
         sx={{
-          fontSize: isSliderCard ? 12 : 14,
-          fontWeight: isSliderCard ? 500 : 600,
-          lineHeight: isSliderCard ? "16px" : "20px",
-          color: "neutralGray",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
+          display: "flex",
+          alignItems: "center",
+          mb: "4px",
         }}
       >
-        {label}
-      </Typography>
-      {tooltipProps && (
-        <Tooltip
-          heading={tooltipProps?.heading}
-          paragraphOne={tooltipProps?.paragraphOne}
-          placement="bottom-end"
-          arrow
-          {...tooltipProps}
-        >
-          <InfoOutlinedIcon
-            sx={{ ml: 0.7, mb: 0.1, color: "#ADAEAD", fontSize: "small" }}
-          />
-        </Tooltip>
-      )}
-    </Box>
-    <Box display="flex">
-      {textVariant === "pill" ? (
-        <Box
+        <Typography
           sx={{
-            padding: "6px 18px",
+            fontSize: isSliderCard ? 12 : 14,
+            fontWeight: isSliderCard ? 500 : 600,
+            lineHeight: isSliderCard ? "16px" : "20px",
+            color: "neutralGray",
             overflow: "hidden",
-            bgcolor: "lightBlue",
-            borderRadius: 100,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
           }}
         >
-          <Typography
-            variant="caption"
+          {label}
+        </Typography>
+        {tooltipProps && (
+          <Tooltip
+            heading={tooltipProps?.heading}
+            paragraphOne={tooltipProps?.paragraphOne}
+            placement="bottom-end"
+            arrow
+            {...tooltipProps}
+          >
+            <InfoOutlinedIcon
+              sx={{ ml: 0.7, mb: 0.1, color: "#ADAEAD", fontSize: "small" }}
+            />
+          </Tooltip>
+        )}
+      </Box>
+      <Box display="flex">
+        {textVariant === "pill" ? (
+          <Box
             sx={{
+              padding: "6px 18px",
               overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
+              bgcolor: "lightBlue",
+              borderRadius: 100,
             }}
           >
-            {text}
-          </Typography>
-        </Box>
-      ) : (
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            overflow: "hidden",
-          }}
-        >
-          <Typography
-            sx={{
-              fontSize: isSliderCard ? 14 : 16,
-              fontWeight: 400,
-              lineHeight: isSliderCard ? "20px" : "24px",
-              ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
-              ...((textVariant === "oneLine" || textVariant === "twoLines") && {
+            <Typography
+              variant="caption"
+              sx={{
                 overflow: "hidden",
                 textOverflow: "ellipsis",
-              }),
-              ...(textVariant === "twoLines" && {
-                display: "-webkit-box",
-                WebkitBoxOrient: "vertical",
-                WebkitLineClamp: 2,
-                whiteSpace: "normal",
-              }),
-              ...(isCopyButton && {
-                color: "primaryBlue",
-              }),
+                whiteSpace: "nowrap",
+              }}
+            >
+              {text}
+            </Typography>
+          </Box>
+        ) : (
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              overflow: "hidden",
             }}
           >
-            {text}
-          </Typography>
-          {isCopyButton && (
-            <Box ml={1}>
-              <CopyButton text={text} variant="blueThin" />
-            </Box>
-          )}
-        </Box>
-      )}
+            <Typography
+              sx={{
+                fontSize: isSliderCard ? 14 : 16,
+                fontWeight: 400,
+                lineHeight: isSliderCard ? "20px" : "24px",
+                ...(textVariant === "oneLine" && { whiteSpace: "nowrap" }),
+                ...((textVariant === "oneLine" ||
+                  textVariant === "twoLines") && {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }),
+                ...(textVariant === "twoLines" && {
+                  display: "-webkit-box",
+                  WebkitBoxOrient: "vertical",
+                  WebkitLineClamp: 2,
+                  whiteSpace: "normal",
+                }),
+                ...(isCopyButton && {
+                  color: "primaryBlue",
+                }),
+              }}
+            >
+              {text}
+            </Typography>
+            {isCopyButton && (
+              <Box ml={1}>
+                <CopyButton text={text} variant="blueThin" />
+              </Box>
+            )}
+          </Box>
+        )}
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};

govtool/frontend/src/components/molecules/GovernanceActionCardHeader.tsx

@@ -5,8 +5,8 @@ import { Tooltip, Typography } from "@atoms";
 import { useTranslation } from "@hooks";
 
 type GovernanceActionCardHeaderProps = {
-  title: string;
-  isDataMissing: boolean;
+  title?: string;
+  isDataMissing: string | boolean;
 };
 
 export const GovernanceActionCardHeader = ({
@@ -26,22 +26,17 @@ export const GovernanceActionCardHeader = ({
     >
       <Typography
         sx={{
-          fontSize: 22,
-          fontWeight: 400,
-          lineHeight: "28px",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          display: "-webkit-box",
-          WebkitBoxOrient: "vertical",
-          WebkitLineClamp: 2,
+          fontSize: 18,
+          fontWeight: 600,
+          lineHeight: "24px",
           ...(isDataMissing && { color: "#9E2323" }),
         }}
       >
-        {isDataMissing ? t("govActions.dataMissing") : title}
+        {isDataMissing || title}
       </Typography>
-      {isDataMissing && (
+      {isDataMissing && typeof isDataMissing === "string" && (
         <Tooltip
-          heading={t("govActions.dataMissing")}
+          heading={isDataMissing}
           paragraphOne={t("govActions.dataMissingTooltipExplanation")}
           placement="bottom-end"
           arrow