feat: integrate pdf-ui package into govtool

IntersectMBO · Jun 4, 2024 · 5f74d52 · 5f74d52
1 parent aaced8b
commit 5f74d52
Show file tree

Hide file tree

Showing 17 changed files with 29,580 additions and 26,771 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -60,6 +60,7 @@ changes.
 - Add type check & lint to github actions [Issue 512](https://github.com/IntersectMBO/govtool/issues/512)
 - Add eslint & prettier to frontend package [Issue 166](https://github.com/IntersectMBO/govtool/issues/166)
 - Add DRep list pagination [Issue 740](https://github.com/IntersectMBO/govtool/issues/740)
+- Add PDF pillar [Issue 1090](https://github.com/IntersectMBO/govtool/issues/1090)
 
 ### Fixed
 

diff --git a/govtool/frontend/Dockerfile b/govtool/frontend/Dockerfile
@@ -3,8 +3,15 @@ ARG VITE_BASE_URL
 ARG VITE_GTM_ID
 ARG VITE_NETWORK_FLAG=0
 ARG VITE_SENTRY_DSN
+ARG NPMRC_TOKEN
+
 ENV NODE_OPTIONS=--max_old_space_size=4096
 WORKDIR /src
+
+# Set npm configuration settings using environment variables
+RUN npm config set @intersect.mbo:registry "https://registry.npmjs.org/" --location=global
+RUN npm config set //registry.npmjs.org/:_authToken ${NPMRC_TOKEN} --location=global
+
 COPY package.json package-lock.json ./
 RUN npm install
 COPY . .

diff --git a/govtool/frontend/package-lock.json b/govtool/frontend/package-lock.json
diff --git a/govtool/frontend/package.json b/govtool/frontend/package.json
@@ -27,8 +27,12 @@
     "@emotion/styled": "^11.11.0",
     "@emurgo/cardano-serialization-lib-asmjs": "12.0.0-alpha.29",
     "@hookform/resolvers": "^3.3.1",
+    "@intersect.mbo/intersectmbo.org-icons-set": "^1.0.8",
+    "@intersect.mbo/pdf-ui": "^0.1.2",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.4",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/pluginutils": "^5.1.0",
     "@sentry/react": "^7.77.0",
     "@types/jsonld": "^1.5.13",
     "@types/react": "^18.2.12",
@@ -53,6 +57,7 @@
     "react-router-dom": "^6.13.0",
     "storybook-addon-manual-mocks": "^1.0.3",
     "storybook-addon-module-mock": "^1.1.2",
+    "vite-plugin-babel": "^1.2.0",
     "yup": "^1.3.2"
   },
   "devDependencies": {
@@ -75,7 +80,7 @@
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
     "@vitest/coverage-v8": "^1.5.0",
     "@vitest/ui": "^1.1.0",
     "chromatic": "^11.3.0",
@@ -97,6 +102,9 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-arm64-musl": "4.12.0"
   },
+  "overrides": {
+    "typescript": "^5.0.2"
+  },
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]"
 }
diff --git a/govtool/frontend/src/App.tsx b/govtool/frontend/src/App.tsx
@@ -1,8 +1,7 @@
 import { useCallback, useEffect } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
-
 import { Modal, ScrollToTop } from "@atoms";
-import { PATHS } from "@consts";
+import { PATHS, PDF_PATHS } from "@consts";
 import { useCardano, useModal } from "@context";
 import { useWalletConnectionListener } from "@hooks";
 import {
@@ -37,8 +36,10 @@ import {
   removeItemFromLocalStorage,
 } from "@utils";
 
+import { PDFWrapper } from "./components/organisms/PDFWrapper";
+
 export default () => {
-  const { enable } = useCardano();
+  const { enable, isEnabled } = useCardano();
   const navigate = useNavigate();
   const { modal, openModal, modals } = useModal();
 
@@ -78,12 +79,29 @@ export default () => {
     checkTheWalletIsActive();
   }, [checkTheWalletIsActive]);
 
+  useEffect(() => {
+    if (
+      window.location.pathname.includes(PDF_PATHS.proposalDiscussion) &&
+      !window.location.pathname.includes(PATHS.proposalPillar.replace("/*", ""))
+    ) {
+      navigate(
+        `${(isEnabled
+          ? PATHS.connectedProposalPillar
+          : PATHS.proposalPillar
+        ).replace("/*", "")}${window.location.pathname}`,
+      );
+    }
+  }, [window.location.pathname]);
+
   return (
     <>
       <ScrollToTop />
       <Routes>
         <Route path={PATHS.home} element={<Home />} />
         <Route path={PATHS.governanceActions} element={<GovernanceActions />} />
+        {!isEnabled && (
+          <Route path={PATHS.proposalPillar} element={<PDFWrapper />} />
+        )}
         <Route
           path={PATHS.governanceActionsCategory}
           element={<GovernanceActionsCategory />}
@@ -94,6 +112,10 @@ export default () => {
         />
         <Route element={<Dashboard />}>
           <Route path={PATHS.dashboard} element={<DashboardCards />} />
+          <Route
+            path={PATHS.connectedProposalPillar}
+            element={<PDFWrapper />}
+          />
           <Route
             path={PATHS.dashboardGovernanceActions}
             element={<DashboardGovernanceActions />}

diff --git a/govtool/frontend/src/components/atoms/DrawerLink.tsx b/govtool/frontend/src/components/atoms/DrawerLink.tsx
@@ -3,16 +3,27 @@ import { FC } from "react";
 import { NavLink } from "react-router-dom";
 
 import { theme } from "@/theme";
+import { PATHS, PDF_PATHS } from "@/consts";
 
 type LinkProps = {
   label: string;
   navTo: string;
-  icon?: string;
-  activeIcon?: string;
+  icon?: string | JSX.Element;
+  activeIcon?: string | JSX.Element;
   dataTestId?: string;
   onClick?: () => void;
 };
 
+const isRouteActive = (isActive: boolean, route: string) =>
+  isActive ||
+  (route ===
+    `${PATHS.connectedProposalPillar.replace("/*", "")}${
+      PDF_PATHS.proposalDiscussion
+    }` &&
+    Object.values(PDF_PATHS).some((pdfPath) =>
+      window.location.pathname.includes(pdfPath),
+    ));
+
 export const DrawerLink: FC<LinkProps> = ({ ...props }) => {
   const { dataTestId, label, navTo, icon, activeIcon, onClick } = props;
   const {
@@ -26,34 +37,49 @@ export const DrawerLink: FC<LinkProps> = ({ ...props }) => {
       onClick={() => {
         if (onClick) onClick();
       }}
-      style={({ isActive }) => ({
-        textDecoration: "none",
-        backgroundColor: isActive ? highlightBlue : "transparent",
-        padding: "8px 16px",
-        display: "block",
-        borderRadius: 100,
-      })}
+      style={({ isActive: routeIsActive }) => {
+        // Workaround for the PDF routes not being handled by react-router
+        const isActive = isRouteActive(routeIsActive, navTo);
+        return {
+          textDecoration: "none",
+          backgroundColor: isActive ? highlightBlue : "transparent",
+          padding: "8px 16px",
+          display: "block",
+          borderRadius: 100,
+        };
+      }}
     >
-      {({ isActive }) => (
-        <Box display="flex">
-          {activeIcon && icon && (
-            <img
-              alt="icon"
-              src={isActive ? activeIcon : icon}
-              style={{ marginRight: "12px" }}
-            />
-          )}
-          <Typography
-            fontSize={14}
-            lineHeight="20px"
-            sx={{
-              fontWeight: isActive ? 500 : 400,
-            }}
-          >
-            {label}
-          </Typography>
-        </Box>
-      )}
+      {({ isActive: routeIsActive }) => {
+        // Workaround for the PDF routes not being handled by react-router
+        const isActive = isRouteActive(routeIsActive, navTo);
+        return (
+          <Box display="flex">
+            {activeIcon &&
+            icon &&
+            typeof icon === "string" &&
+            typeof activeIcon === "string" ? (
+              <img
+                alt="icon"
+                src={isActive ? activeIcon : icon}
+                style={{ marginRight: "12px" }}
+              />
+            ) : (
+              <Box marginRight="12px" height="20px" width="20px">
+                {isActive ? activeIcon : icon}
+              </Box>
+            )}
+            <Typography
+              fontSize={14}
+              lineHeight="20px"
+              sx={{
+                fontWeight: isActive ? 500 : 400,
+              }}
+            >
+              {label}
+            </Typography>
+          </Box>
+        );
+      }}
     </NavLink>
   );
 };
diff --git a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
-import { Box, IconButton } from "@mui/material";
+import { Box, Button, IconButton } from "@mui/material";
+import { IconPlusCircle } from "@intersect.mbo/intersectmbo.org-icons-set";
 
 import { VotingPowerChips, Typography } from "@atoms";
-import { ICONS } from "@consts";
-import { useScreenDimension } from "@hooks";
+import { ICONS, PATHS, PDF_PATHS } from "@consts";
+import { useScreenDimension, useTranslation } from "@hooks";
 import { DashboardDrawerMobile } from "@organisms";
 
 type DashboardTopNavProps = {
@@ -17,6 +18,14 @@ export const DashboardTopNav = ({
   title,
   isVotingPowerHidden,
 }: DashboardTopNavProps) => {
+  const { t } = useTranslation();
+  const isProposalDiscussion = Object.values(PDF_PATHS).some(
+    (pdfPath) =>
+      window.location.pathname.includes(pdfPath) &&
+      window.location.pathname.includes(
+        PATHS.connectedProposalPillar.replace("/*", ""),
+      ),
+  );
   const [windowScroll, setWindowScroll] = useState<number>(0);
   const { isMobile } = useScreenDimension();
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
@@ -25,6 +34,12 @@ export const DashboardTopNav = ({
     setIsDrawerOpen(true);
   };
 
+  const goToProposalDiscussionCreateGovernanceAction = () => {
+    window.location.href = `${PATHS.connectedProposalPillar.replace("/*", "")}${
+      PDF_PATHS.proposalDiscussionCreateGovernanceAction
+    }`;
+  };
+
   useEffect(() => {
     const onScroll = () => {
       setWindowScroll(window.scrollY);
@@ -86,6 +101,15 @@ export const DashboardTopNav = ({
               <img alt="drawer" src={ICONS.drawerIcon} />
             </IconButton>
           )}
+          {isProposalDiscussion && (
+            <Button
+              variant="contained"
+              startIcon={<IconPlusCircle fill="white" />}
+              onClick={goToProposalDiscussionCreateGovernanceAction}
+            >
+              {t("proposalDiscussion.proposeAGovernanceAction")}
+            </Button>
+          )}
         </Box>
         {isMobile && (
           <DashboardDrawerMobile

diff --git a/govtool/frontend/src/components/organisms/PDFWrapper.tsx b/govtool/frontend/src/components/organisms/PDFWrapper.tsx
@@ -0,0 +1,22 @@
+import { Box } from "@mui/material";
+import PDF from "@intersect.mbo/pdf-ui/cjs";
+import "@intersect.mbo/pdf-ui/style";
+import { useCardano } from "@/context";
+import { TopNav } from "./TopNav";
+
+export const PDFWrapper = () => {
+  const walletAPI = useCardano();
+  const isWalletConnected = walletAPI.isEnabled;
+
+  return (
+    <Box
+      sx={{
+        px: { xs: 2, sm: 5 },
+        py: 3,
+      }}
+    >
+      {!isWalletConnected && <TopNav />}
+      <PDF walletAPI={{ ...walletAPI }} pathname={window.location.pathname} />
+    </Box>
+  );
+};
diff --git a/govtool/frontend/src/consts/navItems.ts → govtool/frontend/src/consts/navItems.tsx b/govtool/frontend/src/consts/navItems.ts → govtool/frontend/src/consts/navItems.tsx
@@ -1,6 +1,8 @@
+import { IconAcademicCap } from "@intersect.mbo/intersectmbo.org-icons-set";
 import i18n from "@/i18n";
 import { ICONS } from "./icons";
-import { PATHS } from "./paths";
+import { PATHS, PDF_PATHS } from "./paths";
+import { theme } from "@/theme";
 
 export const NAV_ITEMS = [
   {
@@ -58,6 +60,30 @@ export const CONNECTED_NAV_ITEMS = [
     icon: ICONS.governanceActionsIcon,
     newTabLink: null,
   },
+  {
+    dataTestId: "proposal-discussion-link",
+    label: i18n.t("proposalDiscussion.title"),
+    navTo: `${PATHS.connectedProposalPillar.replace("/*", "")}${
+      PDF_PATHS.proposalDiscussion
+    }`,
+    activeIcon: (
+      <IconAcademicCap
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill={theme.palette.accentOrange}
+      />
+    ),
+    icon: (
+      <IconAcademicCap
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill={theme.palette.lightOrange}
+      />
+    ),
+    newTabLink: null,
+  },
   {
     dataTestId: "guides-link",
     label: i18n.t("menu.guides"),

diff --git a/govtool/frontend/src/consts/paths.ts b/govtool/frontend/src/consts/paths.ts
@@ -24,4 +24,12 @@ export const PATHS = {
   retireAsDrep: "/retire_drep",
   retireAsDirectVoter: "/retire_direct_voter",
   stakeKeys: "/stake_keys",
+  proposalPillar: "/proposal_pillar/*",
+  connectedProposalPillar: "/connected/proposal_pillar/*",
+};
+
+export const PDF_PATHS = {
+  proposalDiscussion: "/proposal_discussion",
+  proposalDiscussionProposal: "/proposal_discussion/:id",
+  proposalDiscussionCreateGovernanceAction: "/create-governance-action",
 };