From 6875d928808625a89c1bc42f217ca53da5d64d41 Mon Sep 17 00:00:00 2001
From: Kristina <kristinapejcic1994@gmail.com>
Date: Mon, 19 Aug 2024 14:28:23 +0200
Subject: [PATCH] feature: Add ipfs link on Constitution versions

---
 frontend/public/icons/ExternalLink.svg        |  4 ++
 .../organisms/Constitution/Constitution.tsx   | 17 +++++++--
 .../organisms/Constitution/MDXComponents.tsx  | 38 +++++++++++++++++--
 frontend/src/components/organisms/types.ts    |  1 +
 frontend/src/constants/icons.ts               |  1 +
 5 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 frontend/public/icons/ExternalLink.svg

diff --git a/frontend/public/icons/ExternalLink.svg b/frontend/public/icons/ExternalLink.svg
new file mode 100644
index 00000000..a734f31b
--- /dev/null
+++ b/frontend/public/icons/ExternalLink.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 2.5H17.5V7.5" stroke="#0033AD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2071 3.20711C18.5976 2.81658 18.5976 2.18342 18.2071 1.79289C17.8166 1.40237 17.1834 1.40237 16.7929 1.79289L7.62623 10.9596C7.2357 11.3501 7.2357 11.9832 7.62623 12.3738C8.01675 12.7643 8.64992 12.7643 9.04044 12.3738L18.2071 3.20711ZM3.69526 6.19526C3.82029 6.07024 3.98986 6 4.16667 6H9.16667C9.71895 6 10.1667 5.55228 10.1667 5C10.1667 4.44772 9.71895 4 9.16667 4H4.16667C3.45942 4 2.78115 4.28095 2.28105 4.78105C1.78095 5.28115 1.5 5.95942 1.5 6.66667V15.8333C1.5 16.5406 1.78095 17.2189 2.28105 17.719C2.78115 18.219 3.45942 18.5 4.16667 18.5H13.3333C14.0406 18.5 14.7189 18.219 15.219 17.719C15.719 17.2189 16 16.5406 16 15.8333V10.8333C16 10.281 15.5523 9.83333 15 9.83333C14.4477 9.83333 14 10.281 14 10.8333V15.8333C14 16.0101 13.9298 16.1797 13.8047 16.3047C13.6797 16.4298 13.5101 16.5 13.3333 16.5H4.16667C3.98986 16.5 3.82029 16.4298 3.69526 16.3047C3.57024 16.1797 3.5 16.0101 3.5 15.8333V6.66667C3.5 6.48986 3.57024 6.32029 3.69526 6.19526Z" fill="#0033AD"/>
+</svg>
diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
index 042d50dc..2020c895 100644
--- a/frontend/src/components/organisms/Constitution/Constitution.tsx
+++ b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -16,20 +16,22 @@ import {
 } from "./MDXComponents";
 import { ConstitutionMetadata, ConstitutionProps } from "../types";
 import { useTranslations } from "next-intl";
-import { useModal } from "@/context";
+import { useAppContext, useModal } from "@/context";
 import { Footer } from "../Footer";
 import { CONSTITUTION_SIDEBAR_TABS, customPalette } from "@consts";
 import { ContentWrapper } from "@/components/atoms";
 import { NotFound } from "../NotFound";
 import { PageTitleTabs } from "../PageTitleTabs";
+import { isAnyAdminRole } from "@utils";
 
 export function Constitution({ constitution, metadata }: ConstitutionProps) {
+  const { userSession } = useAppContext();
   const [isOpen, setIsOpen] = useState(true);
   const [tab, setTab] = useState("revisions");
   const { openModal } = useModal();
   const t = useTranslations("Constitution");
 
-  const onCompare = (target: Omit<ConstitutionMetadata, "version">) => {
+  const onCompare = (target: Omit<ConstitutionMetadata, "version" | "url">) => {
     openModal({
       type: "compareConstitutionModal",
       state: {
@@ -90,7 +92,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
           {tab === "revisions" ? (
             <Grid item justifyContent="flex-end" px={{ xxs: 1, md: 0 }}>
               {metadata ? (
-                metadata.map(({ title, created_date, cid }) => {
+                metadata.map(({ title, created_date, cid, url }) => {
                   return (
                     <NavCard
                       onClick={() => {
@@ -106,6 +108,15 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
                           ? t("drawer.latest")
                           : t("drawer.compare")
                       }
+                      url={
+                        userSession &&
+                        isAnyAdminRole(userSession?.role) &&
+                        userSession?.permissions.includes(
+                          "add_constitution_version"
+                        )
+                          ? url
+                          : null
+                      }
                       key={cid}
                     />
                   );
diff --git a/frontend/src/components/organisms/Constitution/MDXComponents.tsx b/frontend/src/components/organisms/Constitution/MDXComponents.tsx
index 481308f8..26e500a3 100644
--- a/frontend/src/components/organisms/Constitution/MDXComponents.tsx
+++ b/frontend/src/components/organisms/Constitution/MDXComponents.tsx
@@ -4,6 +4,8 @@ import { getShortenedGovActionId } from "@utils";
 import { Button, CopyButton, Typography } from "@atoms";
 import { Box, Collapse, Grid } from "@mui/material";
 import React, { ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
 
 const Anchor = ({ id, offset = "-20vh " }) => {
   return (
@@ -203,7 +205,14 @@ export const NavDrawer = ({
   );
 };
 
-export const NavCard = ({ onClick, title, description, buttonLabel, hash }) => (
+export const NavCard = ({
+  onClick,
+  title,
+  description,
+  buttonLabel,
+  hash,
+  url,
+}) => (
   <Box mb={2}>
     <Card sx={{ px: 3, py: 2 }}>
       <Grid
@@ -211,11 +220,11 @@ export const NavCard = ({ onClick, title, description, buttonLabel, hash }) => (
         justifyContent="space-between"
         alignItems={{ lg: "center" }}
       >
-        <Grid item xxs={6} lg={"auto"}>
+        <Grid item xxs={6} lg={4}>
           <Typography variant="body1">{title}</Typography>
           <Typography variant="caption">{description}</Typography>
         </Grid>
-        <Grid item xxs={6} lg="auto">
+        <Grid item xxs={6} lg={3}>
           <Box
             display="flex"
             alignItems={{ xxs: "center" }}
@@ -238,7 +247,28 @@ export const NavCard = ({ onClick, title, description, buttonLabel, hash }) => (
             </Box>
           </Box>
         </Grid>
-        <Grid item xxs={12} lg="auto" mt={{ xxs: 2, md: 0 }}>
+        {url && (
+          <Grid
+            item
+            xxs={6}
+            lg={2}
+            sx={{
+              display: "flex",
+              justifyContent: { xxs: "left", lg: "center" },
+            }}
+          >
+            <Link target="_blank" href={url} style={{ cursor: "pointer" }}>
+              <Image
+                alt="ipfs link"
+                src={ICONS.externalLink}
+                width={20}
+                height={20}
+              />
+            </Link>
+          </Grid>
+        )}
+
+        <Grid item xxs={12} lg={3} mt={{ xxs: 2, md: 0 }}>
           <Button
             sx={{ width: "100%" }}
             size="medium"
diff --git a/frontend/src/components/organisms/types.ts b/frontend/src/components/organisms/types.ts
index f9c1524b..81ff6eba 100644
--- a/frontend/src/components/organisms/types.ts
+++ b/frontend/src/components/organisms/types.ts
@@ -14,6 +14,7 @@ export interface ConstitutionMetadata {
   title: string;
   version: string;
   created_date: string;
+  url: string;
 }
 
 export interface ConstitutionByCid {
diff --git a/frontend/src/constants/icons.ts b/frontend/src/constants/icons.ts
index 68aa87df..1736aab2 100644
--- a/frontend/src/constants/icons.ts
+++ b/frontend/src/constants/icons.ts
@@ -21,4 +21,5 @@ export const ICONS = {
   sortActive: "/icons/SortActive.svg",
   sortWhite: "/icons/SortWhite.svg",
   govAction: "/icons/GovAction.svg",
+  externalLink: "/icons/ExternalLink.svg",
 };