Merge pull request #2346 from IntersectMBO/feat/2070--governance-action-details---supporting-links-dont-use-cip-100-reference-labels

feat(#2070): add labels to supporting links in governance action details

Author: MSzalowski

CHANGELOG.md

@@ -13,6 +13,7 @@ changes.
 ### Added
 
 - add support for CIP-129 governance identifiers [Issue 2183](https://github.com/IntersectMBO/govtool/issues/2183)
+- Add label to supporting links in Governance Action details [Issue 2305](https://github.com/IntersectMBO/govtool/issues/2305)
 
 ### Fixed
 

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

@@ -9,7 +9,7 @@ import { LinkWithIcon } from "@molecules";
 export const GovernanceActionDetailsCardLinks = ({
   links,
 }: {
-  links?: string[];
+  links?: Reference[];
 }) => {
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
@@ -41,21 +41,31 @@ export const GovernanceActionDetailsCardLinks = ({
             rowGap: 2,
           }}
         >
-          {links.map((link) => (
-            <LinkWithIcon
-              key={link}
-              label={link}
-              onClick={() => {
-                openModal({
-                  type: "externalLink",
-                  state: {
-                    externalLink: link,
-                  },
-                });
-              }}
-              icon={<img alt="link" src={ICONS.link} />}
-              cutWithEllipsis
-            />
+          {links.map(({ uri, label }) => (
+            <Box flexDirection="column">
+              {label && (
+                <Typography
+                  data-testid={`${label}-${uri}-label`}
+                  sx={{ fontWeight: "500" }}
+                >
+                  {label}
+                </Typography>
+              )}
+              <LinkWithIcon
+                key={uri}
+                label={uri}
+                onClick={() => {
+                  openModal({
+                    type: "externalLink",
+                    state: {
+                      externalLink: uri,
+                    },
+                  });
+                }}
+                icon={<img alt="link" src={ICONS.link} />}
+                cutWithEllipsis
+              />
+            </Box>
           ))}
         </Box>
       </>

govtool/frontend/src/models/api.ts

@@ -176,7 +176,7 @@ export type ProposalDataDTO = {
   abstract?: string;
   motivation?: string;
   rationale?: string;
-  references?: string[];
+  references?: Reference[];
   title?: string;
   protocolParams: EpochParams | null;
 } & SubmittedVotesData;

govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts

@@ -52,6 +52,13 @@ const commonArgs = {
     metadataHash: "exampleMetadataHash",
     metadataStatus: null,
     metadataValid: true,
+    references: [
+      {
+        "@type": "Reference",
+        uri: "https://exampleurl.com",
+        label: "Example label",
+      },
+    ],
   } satisfies ProposalData,
 };
 
@@ -110,6 +117,15 @@ export const GovernanceActionDetailsCardComponent: Story = {
 
     await expect(canvas.getByText(args.proposal.title!)).toBeInTheDocument();
 
+    if (args.proposal.references?.[0]) {
+      await expect(
+        canvas.getByText(args.proposal.references[0].label),
+      ).toBeInTheDocument();
+      await expect(
+        canvas.getByText(args.proposal.references[0].uri),
+      ).toBeInTheDocument();
+    }
+
     await assertGovActionDetails(canvas, args);
     const [tooltip1, tooltip2] = canvas.getAllByTestId("InfoOutlinedIcon");
 

govtool/frontend/src/utils/mapDtoToProposal.ts

@@ -22,9 +22,7 @@ export const mapDtoToProposal = async (
       abstract: dto.abstract || validationResponse.metadata?.abstract,
       motivation: dto.motivation || validationResponse.metadata?.motivation,
       rationale: dto.rationale || validationResponse.metadata?.rationale,
-      references: validationResponse.metadata?.references?.map(
-        ({ uri }) => uri,
-      ),
+      references: validationResponse.metadata?.references || [],
       metadataStatus: validationResponse.status || null,
       metadataValid: validationResponse.valid,
     };