Merge pull request #1266 from IntersectMBO/develop

Add ellipsize text, interaction tests; Fix proposal issues, metadata, governance action; Update link to docs, protocol params; Remove unused packages
IntersectMBO · Jun 12, 2024 · 7bdcf43 · 7bdcf43
2 parents f24c439 + faf4605
commit 7bdcf43
Show file tree

Hide file tree

Showing 113 changed files with 1,959 additions and 12,050 deletions.
diff --git a/.github/workflows/test_storybook.yml b/.github/workflows/test_storybook.yml
@@ -14,15 +14,16 @@ jobs:
   storybook:
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    env:
-      NODE_OPTIONS: --max_old_space_size=4096
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Install dependencies
-        run: npm install
+        run: |
+          npm config set @intersect.mbo:registry "https://registry.npmjs.org/" --location=global
+          npm config set //registry.npmjs.org/:_authToken ${NPMRC_TOKEN} --location=global  
+          npm install
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Build Storybook
@@ -31,4 +32,8 @@ jobs:
         run: |
           npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
             "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:6006 && npm run test-storybook"
+            "npx wait-on tcp:6006 && npm run test:storybook"
+
+    env:
+      NODE_OPTIONS: --max_old_space_size=4096
+      NPMRC_TOKEN: ${{ secrets.NPMRC_TOKEN }}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -93,6 +93,7 @@ changes.
 - Fix endless spinner on a dashboard [Issue 539](https://github.com/IntersectMBO/govtool/issues/539)
 - Remove wrongly appended `Yourself` filter on DRep Directory [Issue 1028](https://github.com/IntersectMBO/govtool/issues/1028)
 - Fix validation of uris in metadata [Issue 1011](https://github.com/IntersectMBO/govtool/issues/1011)
+- Fix wrong link to the GA Details once it is in progress [Issue 1252](https://github.com/IntersectMBO/govtool/issues/1252)
 
 ### Changed
 
@@ -124,6 +125,7 @@ changes.
 - Change input selection strategy to 3 (random) [Issue 575](https://github.com/IntersectMBO/govtool/issues/575)
 - Changed documents to prepare for open source [Issue 737](https://github.com/IntersectMBO/govtool/issues/737)
 - Changed copy on maintenance page [Issue 753](https://github.com/IntersectMBO/govtool/issues/753)
+- Update link to docs [Issue 1246](https://github.com/IntersectMBO/govtool/issues/1246)
 
 ### Removed
 

diff --git a/docs/GOVERNANCE_ACTION_SUBMISSION.md b/docs/GOVERNANCE_ACTION_SUBMISSION.md
@@ -12,6 +12,51 @@
 
 For creating the Governance Action, you need to consume 2 utility methods provided by `GovernanceActionProvided` (documented later within this document), and 3 exported from `CardanoProvider` wallet actions (2 for the 2 types of supported by GovTool Governance Actions and 1 for Signing and Submitting the transaction)
 
+### Types
+
+```typescript
+import { VotingProposalBuilder } from "@emurgo/cardano-serialization-lib-nodejs";
+
+interface GovernanceAction {
+  title: string;
+  abstract: string;
+  motivation: string;
+  rationale: string;
+  references: [{ label: string; uri: string }];
+}
+
+interface InfoProps {
+  hash: string;
+  url: string;
+}
+
+interface TreasuryProps {
+  amount: string;
+  hash: string;
+  receivingAddress: string;
+  url: string;
+}
+
+const createGovernanceActionJsonLD: (
+  governanceAction: GovernanceAction
+) => NodeObject;
+
+const createHash: (jsonLd: NodeObject) => string;
+
+const buildNewInfoGovernanceAction: (
+  infoProps: InfoProps
+) => Promise<VotingProposalBuilder | undefined>;
+
+const buildTreasuryGovernanceAction: (
+  treasuryProps: TreasuryProps
+) => Promise<VotingProposalBuilder | undefined>;
+
+const buildSignSubmitConwayCertTx: (params: {
+  govActionBuilder: VotingProposalBuilder;
+  type: "createGovAction";
+}) => Promise<void>;
+```
+
 ### Step 1: Create the Governance Action metadata object
 
 Create the Governance Action object with the fields specified by [CIP-108](https://github.com/cardano-foundation/CIPs/tree/master/CIP-0108), which are:

diff --git a/govtool/frontend/.storybook/preview.tsx b/govtool/frontend/.storybook/preview.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import type { Preview } from "@storybook/react";
 import { ThemeProvider } from "@emotion/react";
-import { theme } from "../src/theme";
-import { MemoryRouter, Routes, Route } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "react-query";
+import type { Preview } from "@storybook/react";
+import React from "react";
 import { I18nextProvider } from "react-i18next";
-import i18n from "../src/i18n";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { ModalProvider } from "../src/context/modal";
+import i18n from "../src/i18n";
+import { theme } from "../src/theme";
 
 const queryClient = new QueryClient();
 
@@ -23,9 +23,9 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <ModalProvider>
-          <I18nextProvider i18n={i18n}>
-            <ThemeProvider theme={theme}>
+        <ThemeProvider theme={theme}>
+          <ModalProvider>
+            <I18nextProvider i18n={i18n}>
               <MemoryRouter>
                 <Routes>
                   <Route
@@ -44,9 +44,9 @@ const preview: Preview = {
                   />
                 </Routes>
               </MemoryRouter>
-            </ThemeProvider>
-          </I18nextProvider>
-        </ModalProvider>
+            </I18nextProvider>
+          </ModalProvider>
+        </ThemeProvider>
       </QueryClientProvider>
     ),
   ],

diff --git a/govtool/frontend/.storybook/test-runner-jest.js b/govtool/frontend/.storybook/test-runner-jest.js
@@ -0,0 +1,13 @@
+const { getJestConfig } = require("@storybook/test-runner");
+
+/**
+ * @type {import('@jest/types').Config.InitialOptions}
+ */
+module.exports = {
+  // The default configuration comes from @storybook/test-runner
+  ...getJestConfig(),
+  /** Add your own overrides below
+   * @see https://jestjs.io/docs/configuration
+   */
+  testTimeout: 30000,
+};
diff --git a/govtool/frontend/src/components/molecules/DataMissingHeader.tsx b/govtool/frontend/src/components/molecules/DataMissingHeader.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, SxProps } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { Share } from "@molecules";
@@ -9,12 +9,14 @@ type DataMissingHeaderProps = {
   isDataMissing: MetadataValidationStatus | null;
   shareLink?: string;
   title?: string;
+  titleStyle?: SxProps;
 };
 
 export const DataMissingHeader = ({
   title,
   isDataMissing,
   shareLink,
+  titleStyle,
 }: DataMissingHeaderProps) => (
   <Box
     sx={{
@@ -39,6 +41,7 @@ export const DataMissingHeader = ({
           whiteSpace: "nowrap",
           fontWeight: 600,
           ...(isDataMissing && { color: "errorRed" }),
+          ...titleStyle,
         }}
         variant="title2"
       >

diff --git a/govtool/frontend/src/components/molecules/DelegationAction.tsx b/govtool/frontend/src/components/molecules/DelegationAction.tsx
@@ -3,6 +3,7 @@ import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 
 import { Typography } from "@atoms";
 import { gray } from "@consts";
+import { ellipsizeText } from "@utils";
 
 import { Card } from "./Card";
 import { DirectVoterActionProps } from "./types";
@@ -31,7 +32,7 @@ export const DelegationAction = ({
   >
     <Box sx={{ width: "90%" }}>
       <Typography fontWeight={600} variant="body2">
-        {drepName}
+        {ellipsizeText(drepName, 30)}
       </Typography>
       <Typography
         sx={{

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
@@ -135,7 +135,11 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           }}
           data-testid={`govaction-${govActionId}-view-detail`}
         >
-          {t("govActions.viewDetails")}
+          {t(
+            inProgress
+              ? "govActions.viewDetails"
+              : "govActions.viewDetailsAndVote",
+          )}
         </Button>
       </Box>
     </Box>

diff --git a/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx b/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx
@@ -44,9 +44,6 @@ export const AutomatedVotingOptions = ({
 
   const { networkMetrics } = useGetNetworkMetrics();
 
-  // TODO: Change to certain automated voted option if available
-  const onClickInfo = () => openInNewTab("https://docs.sanchogov.tools/");
-
   const isDelegatedToAbstain =
     currentDelegation ===
     AutomatedVotingOptionCurrentDelegation.drep_always_abstain;
@@ -117,7 +114,11 @@ export const AutomatedVotingOptions = ({
             onClickDelegate={() =>
               delegate(AutomatedVotingOptionDelegationId.abstain)
             }
-            onClickInfo={onClickInfo}
+            onClickInfo={() =>
+              openInNewTab(
+                "https://docs.sanchogov.tools/how-to-use-the-govtool/using-govtool/delegating-overview/abstain-from-every-vote",
+              )
+            }
             title={
               isDelegatedToAbstain
                 ? t("dRepDirectory.delegatedToAbstainTitle", {
@@ -156,7 +157,11 @@ export const AutomatedVotingOptions = ({
             onClickDelegate={() =>
               delegate(AutomatedVotingOptionDelegationId.no_confidence)
             }
-            onClickInfo={onClickInfo}
+            onClickInfo={() =>
+              openInNewTab(
+                "https://docs.sanchogov.tools/how-to-use-the-govtool/using-govtool/delegating-overview/signal-no-confidence-on-every-vote",
+              )
+            }
             title={
               isDelegatedToNoConfidence
                 ? t("dRepDirectory.delegatedToNoConfidenceTitle", {

diff --git a/...ntend/src/components/organisms/CreateGovernanceActionSteps/CreateGovernanceActionForm.tsx b/...ntend/src/components/organisms/CreateGovernanceActionSteps/CreateGovernanceActionForm.tsx
@@ -30,11 +30,11 @@ export const CreateGovernanceActionForm = ({
   const type = getValues("governance_action_type");
   const {
     append,
-    fields: links,
+    fields: references,
     remove,
   } = useFieldArray({
     control,
-    name: "links",
+    name: "references",
   });
 
   const isContinueButtonDisabled =
@@ -83,18 +83,18 @@ export const CreateGovernanceActionForm = ({
       }
     });
 
-  const addLink = useCallback(() => append({ link: "" }), [append]);
+  const addLink = useCallback(() => append({ uri: "" }), [append]);
 
   const removeLink = useCallback((index: number) => remove(index), [remove]);
 
   const renderLinks = useCallback(
     () =>
-      links.map((field, index) => (
+      references.map((field, index) => (
         <ControlledField.Input
-          {...register(`links.${index}.link`)}
+          {...register(`references.${index}.uri`)}
           errors={errors}
           endAdornment={
-            links.length > 1 ? (
+            references.length > 1 ? (
               <DeleteOutlineIcon
                 color="primary"
                 data-testid={`delete-link-${index + 1}-button`}
@@ -107,7 +107,7 @@ export const CreateGovernanceActionForm = ({
           label={`${t("forms.link")} ${index + 1}`}
           layoutStyles={{ mb: 3 }}
           placeholder={Placeholders.LINK}
-          name={`links.${index}.link`}
+          name={`references.${index}.uri`}
           rules={{
             pattern: {
               value: URL_REGEX,
@@ -116,7 +116,7 @@ export const CreateGovernanceActionForm = ({
           }}
         />
       )),
-    [links],
+    [references],
   );
 
   return (
@@ -145,7 +145,7 @@ export const CreateGovernanceActionForm = ({
       </Typography>
       <Spacer y={4.25} />
       {renderLinks()}
-      {links?.length < MAX_NUMBER_OF_LINKS ? (
+      {references?.length < MAX_NUMBER_OF_LINKS ? (
         <Button
           data-testid="add-link-button"
           onClick={addLink}

diff --git a/...nd/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx b/...nd/src/components/organisms/CreateGovernanceActionSteps/ReviewCreatedGovernanceAction.tsx
@@ -71,10 +71,10 @@ export const ReviewCreatedGovernanceAction = ({
       });
 
   const renderLinks = () => {
-    const links = values.links?.map((item) => item.link) ?? [];
-    const areLinks = links.some((item) => item);
+    const references = values.references?.map((item) => item.uri) ?? [];
+    const areReferences = references.some((item) => item);
 
-    return areLinks ? (
+    return areReferences ? (
       <>
         <Typography
           color="neutralGray"
@@ -84,14 +84,14 @@ export const ReviewCreatedGovernanceAction = ({
         >
           {t("createGovernanceAction.supportingLinks")}
         </Typography>
-        {links.map(
-          (link: string, index: number) =>
-            link && (
+        {references.map(
+          (uri: string, index: number) =>
+            uri && (
               <LinkWithIcon
                 dataTestId={`governance-action-link-${index + 1}-content`}
                 icon={<img alt="link" src={ICONS.link} />}
-                label={link}
-                onClick={() => onClickLink(link)}
+                label={uri}
+                onClick={() => onClickLink(uri)}
                 sx={{ mb: 1.75 }}
               />
             ),

diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx
@@ -9,6 +9,7 @@ import { DRepData, DRepStatus } from "@models";
 import { Card } from "@molecules";
 import {
   correctDRepDirectoryFormat,
+  ellipsizeText,
   getMetadataDataMissingStatusTranslation,
 } from "@utils";
 
@@ -103,7 +104,7 @@ export const DRepCard = ({
               >
                 {metadataStatus
                   ? getMetadataDataMissingStatusTranslation(metadataStatus)
-                  : dRepName}
+                  : ellipsizeText(dRepName ?? "", 25)}
               </Typography>
               <ButtonBase
                 data-testid={`${view}-copy-id-button`}