feat/multiple-UI-improvements (#452)

* feat: added new selectors * feat: Upload button selector ids * feat: Input and Select selector ids * feat: User List table selector ids * fix: MultipleSelect rename selector ids * fix: Rename Upload component selctor ids * feat: Modal action buttons selector ids-Add member and Upload constitution * feat: AdminTopNav Search component selector id * feat: Admin signout & modal selector ids * feat: AdminTopNav buttons selector ids * feat: Navigation links selector ids * Feat: Footer selector ids * feat: Constitution page selector ids * feat: Latest updates and votes selector ids * feat: GA table selector ids * fix dockle scan on ci * fix registry login * debug imgs * scan tar imgs * test * add tar cleanup * test * pr workflow fix * declutter dockle * add comment * add microservice in pr comment * test w/ individual service failing * fix dockerfile * fix: vote table row responsiveness * Refactor/change logic for file upload to S3 (#328) * refactor: changed getFileUrl function in order to display images on website for longer than 7 days * refactor: changed getFileUrl function in order to display images on website for longer than 7 days * feat: dht-queue (#336) Added persistent dht-queue which will be responsible for publishing cid to dht * refactor: image upload to S3 (#337) * fitx/rationale-governance-format Rationale - Removed body.references since it will be empty until CC-portal enables that feature GAP title and abstract is now parsing in compatibility with CIP-0108 (body.title, body.abstract) * chore: change guides btn link * fix: rm-gap-title-abstract-len-constraint Remove len constraints for gap.title and gap.abstract (was 80 and 2500 char length) fixed error if db data is undefined when fetching from db sync * refactor: add redis username Added username env variable within backend/worker-service/ipfs-service * Fix add redis creds (#343) * feat: add redis user * fix: add config to worker-service * fix-add-redis-creds: fixed order within example.env * fix: add docker compose args --------- Co-authored-by: nike-getto <[email protected]> Co-authored-by: BEDev24 <[email protected]> * Fix add redis creds (#344) * feat: add redis user * fix: add config to worker-service * fix-add-redis-creds: fixed order within example.env * fix: add docker compose args * refactor: cache docker-compose --------- Co-authored-by: nike-getto <[email protected]> Co-authored-by: BEDev24 <[email protected]> * fix: typo * fix: typo * refactor: cache service * refactor/redis-auth (#345) * fix: plural grammar corrections * refactor: pruning worker processors (#346) * fix: latest updates content overlaping * refactor: ipfs service path and minor refactoring * fix: usersnap remove other buttons (#323) * fix: Overlapping on tables * fix: don't show top banner on mainnet * fix: show more btn not loading more content, update env example * refactor: renamed migration name for gap len constraint removal * refactor: ipfs volume * add correct vars (#352) Co-authored-by: nike-getto <[email protected]> * fix: ipfs-redis-service (#360) * fix/ipfs-redis-service: tls connection to redis * fix/ipfs-redis-service: tls connection to redis * fix/gov-search-rationale-votes: user votes and rationale are being checked when data is fetched (#359) Co-authored-by: BEDev24 <[email protected]> * fix: usersnap showing all on path change * fix: Remove comments for selector ids * fix: Usersnap query params issue * fix/logging-magic-link: disabled mailing on local (#363) * fix: search not unchecking filters after clicking on clear * fix/add-indexes-to-searchable-columns: added indexes to searcable columns in the database (#394) * feat: resend register invite (#397) * feature/resend-register-invite: added endpoint for resending the register invite * feature/resend-register-invite: minor changes * feature/resend-register-invite: minor changes * feat: resend invitation, inactive/active, hard delete * feature/hard-delete-user: added hard delete user ability (#398) * Feat: hard delete user (#400) * feature/hard-delete-user: added hard delete user ability * feature/hard-delete-user: updated swagger * feat: hard delete user (#401) * feature/hard-delete-user: added hard delete user ability * feature/hard-delete-user: updated swagger * feature/hard-delete-user: try catch for removing profile photo * feat: implement delete user * chore: refactor delete button component * test/remove-users: added unit tests (#406) * fix/sorting-users: sorted users by name in ascending order (#408) * feat: add switch user modal and remove X button from role bar on admin dashboard * fix: allow super admin to change status of cc memeber * fix/sync-votes: sync vote rationale url (#412) * fix: sync votes (#418) * fix/sync-votes: sync vote rationale url * fix/sync-votes: fixed unit tests * feat: constitution page design improvements * refactor/open-port-3002 * added rationale link on latest updates table * refactor/worker-bull-borad * feat: implemented new contents design * fix: contents scroll * fix: navigation side bar visual known issues * fix: tooltip not showing on accordion summary * fix: tooltip not showing on accordion summary * fix/change-user-name-validation: Endabled character | (pipe) in the user name (#443) * fix: highlight selected heading in contents and fix layout issues on small device screens * feat: add loader and registration username validation * feat: merge ga and rationale modals and add links to footer * chore: return deleted modal * fix/bullmq-redis-reconnect: added option reconnect on error (#449) * Update TOCLink.tsx * Update GovActionModal.tsx * Update PreviewReasoningModal.tsx --------- Co-authored-by: nikolajovancevic <[email protected]> Co-authored-by: Kristina <[email protected]> Co-authored-by: Baja-KS <[email protected]> Co-authored-by: Lazar Lukić <[email protected]> Co-authored-by: Vojimirovich <[email protected]> Co-authored-by: Vojimirovich <[email protected]> Co-authored-by: nike-getto <[email protected]> Co-authored-by: BEDev24 <[email protected]> Co-authored-by: kubet <[email protected]> Co-authored-by: Kristina <[email protected]> Co-authored-by: Vojimirovich <[email protected]>
IntersectMBO · Nov 6, 2024 · 553e500 · 553e500
1 parent 5998f35
commit 553e500
Show file tree

Hide file tree

Showing 25 changed files with 479 additions and 488 deletions.
diff --git a/.github/workflows/merge.yaml b/.github/workflows/merge.yaml
@@ -134,7 +134,7 @@ jobs:
             NEXT_PUBLIC_USERSNAP_SPACE_API_KEY=${{ secrets.QA_NEXT_PUBLIC_USERSNAP_SPACE_API_KEY }}
             NEXT_PUBLIC_USERSNAP_PROJECT_API_KEY=${{ secrets.QA_NEXT_PUBLIC_USERSNAP_PROJECT_API_KEY }}
             NEXT_PUBLIC_HIDDEN_USERSNAP_PROJECT_IDS=${{ secrets.QA_NEXT_PUBLIC_HIDDEN_USERSNAP_PROJECT_IDS }}
-            NEXT_PUBLIC_IS_MAINNET=${{ secrets.QA_NEXT_PUBLIC_IS_MAINNET }}
+            NEXT_PUBLIC_IS_MAINNET=${{ secrets.QA_NEXT_PUBLIC_IS_MAINNET }}g
 
       - name: Scan Docker image with Dockle
         id: dockle

diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -117,7 +117,7 @@ jobs:
           cache-from: type=local,src=/tmp/.buildx-cache
           cache-to: type=local,dest=/tmp/.buildx-cache
           outputs: type=docker,dest=/tmp/image-${{ matrix.name }}-${{ github.sha }}-pr.tar
-          build-args: |
+          build-args: |    
             NEXT_PUBLIC_API_URL=${{ secrets.QA_NEXT_PUBLIC_API_URL }}
             NEXT_PUBLIC_USERSNAP_SPACE_API_KEY=${{ secrets.QA_NEXT_PUBLIC_USERSNAP_SPACE_API_KEY }}
             NEXT_PUBLIC_USERSNAP_PROJECT_API_KEY=${{ secrets.QA_NEXT_PUBLIC_USERSNAP_PROJECT_API_KEY }}

diff --git a/backend/src/users/api/request/update-user.request.ts b/backend/src/users/api/request/update-user.request.ts
@@ -15,7 +15,7 @@ export class UpdateUserRequest {
   })
   @MinLength(2, { message: `Minimum character length is 2` })
   @MaxLength(30, { message: `Maximum character length is 30` })
-  @Matches(/^[a-zA-Z0-9_.\s]+$/, {
+  @Matches(/^[a-zA-Z0-9_|.\s]+$/, {
     message: `Name can't contain special characters & symbols`,
   })
   @IsString()

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
@@ -30,6 +30,7 @@
     "govAction": "Governance Action",
     "govActionCategoryShort": "GA Category",
     "voted": "Voted",
+    "time": "Time",
     "rationale": "Rationale",
     "actionTitle": "Show more",
     "notAvailable": "Not Available",
@@ -225,29 +226,15 @@
     "previewRationale": {
       "headline": "Rationale",
       "description": "Please update rationale for your vote on specific governance action.",
-      "noRationaleUrl": "A rationale has not been provided for this vote",
       "rationaleLink": "Rationale link",
+      "rationale": "Rationale",
+      "notAvailable": "Not Available",
+      "governanceActionStatus": "Governance Action Status",
       "governanceActionCategory": "Governance Action Category",
       "governanceActionId": "Governance Action ID",
       "voted": "Voted",
-      "submissionDate": "Submission date",
-      "expiryDate": "Expiry date",
-      "voteSubmissionDate": "Vote submission date",
-      "tooltips": {
-        "expiryDate": {
-          "heading": "Expiry Date",
-          "paragraphOne": "The date when the governance action will expiry if it doesn’t reach ratification thresholds.",
-          "paragraphTwo": "IMPORTANT: If the governance action is ratified before the expiry date it will be considered ratified and it will not be available to vote on afterwards."
-        },
-        "submissionDate": {
-          "heading": "Submission Date",
-          "paragraphOne": "The date when the governance action was submitted on-chain.",
-          "vote": {
-            "heading": "Vote Submission Date",
-            "paragraphOne": "The date when the vote was submitted on-chain."
-          }
-        }
-      },
+      "submissionDate": "GA submitted on:",
+      "expiryDate": "GA expiration date:",
       "alerts": {
         "error": "Error fetching rationale data"
       }

diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -30,6 +30,7 @@
     "govAction": "Governance Action",
     "govActionCategoryShort": "GA Category",
     "voted": "Voted",
+    "time": "Time",
     "rationale": "Rationale",
     "actionTitle": "Show more",
     "notAvailable": "Not Available",
@@ -225,29 +226,15 @@
     "previewRationale": {
       "headline": "Rationale",
       "description": "Please update rationale for your vote on specific governance action.",
-      "noRationaleUrl": "A rationale has not been provided for this vote",
       "rationaleLink": "Rationale link",
+      "rationale": "Rationale",
+      "notAvailable": "Not Available",
+      "governanceActionStatus": "Governance Action Status",
       "governanceActionCategory": "Governance Action Category",
       "governanceActionId": "Governance Action ID",
       "voted": "Voted",
-      "submissionDate": "Submission date",
-      "expiryDate": "Expiry date",
-      "voteSubmissionDate": "Vote submission date",
-      "tooltips": {
-        "expiryDate": {
-          "heading": "Expiry Date",
-          "paragraphOne": "The date when the governance action will expiry if it doesn’t reach ratification thresholds.",
-          "paragraphTwo": "IMPORTANT: If the governance action is ratified before the expiry date it will be considered ratified and it will not be available to vote on afterwards."
-        },
-        "submissionDate": {
-          "heading": "Submission Date",
-          "paragraphOne": "The date when the governance action was submitted on-chain.",
-          "vote": {
-            "heading": "Vote Submission Date",
-            "paragraphOne": "The date when the vote was submitted on-chain."
-          }
-        }
-      },
+      "submissionDate": "GA submitted on:",
+      "expiryDate": "GA expiration date:",
       "alerts": {
         "error": "Error fetching rationale data"
       }

diff --git a/frontend/src/app/[locale]/loading.tsx b/frontend/src/app/[locale]/loading.tsx
@@ -0,0 +1,16 @@
+import { Box, CircularProgress } from "@mui/material";
+
+export default function CenteredLoading() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh"
+      }}
+    >
+      <CircularProgress color="primary" size={50} thickness={2} />
+    </Box>
+  );
+}
diff --git a/frontend/src/components/atoms/modal/ModalWrapper.tsx b/frontend/src/components/atoms/modal/ModalWrapper.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { SxProps, styled } from "@mui/material/styles";
+import { styled, SxProps } from "@mui/material/styles";
 
-import { customPalette, ICONS } from "@consts";
-import { callAll } from "@utils";
 import { useModal } from "@/context";
 import { useScreenDimension } from "@/lib/hooks";
+import { customPalette, ICONS } from "@consts";
+import { callAll } from "@utils";
 
 type ModalVariant = "modal" | "popup" | "wide";
 interface Props {
@@ -27,7 +27,7 @@ export const ModalWrapper = ({
   icon,
   scrollable,
   hideCloseButton = true,
-  onClose,
+  onClose
 }: Props) => {
   const { closeModal } = useModal();
   const { isMobile } = useScreenDimension();
@@ -79,6 +79,7 @@ export const BaseWrapper = styled("div")<{
   transform: translate(-50%, -50%);
   overflow-y: ${({ scrollable }) => scrollable && "scroll"};
   overflow-x: hidden;
+  scrollbar-width: ${({ scrollable }) => (scrollable ? "auto" : "none")};
   @media (max-width: ${700}px) {
     overflow: scroll;
   }

diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -16,6 +16,7 @@ import {
   Heading1,
   Heading2,
   Heading3,
+  Heading5,
   ListItem,
   NavDrawerDesktop,
   Paragraph,
@@ -66,6 +67,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
     h1: Heading1,
     h2: Heading2,
     h3: Heading3,
+    h5: Heading5,
     p: Paragraph,
     li: ListItem,
     code: Code,

diff --git a/frontend/src/components/organisms/Constitution/ConstitutionSidebar.tsx b/frontend/src/components/organisms/Constitution/ConstitutionSidebar.tsx
@@ -28,7 +28,7 @@ export const ConstitutionSidebar = ({ tableOfContents, metadata }) => {
         justifyContent="left"
         padding={2}
         pt={{ xxs: 0, md: 2 }}
-        px={{ xxs: 2, md: 3 }}
+        px={{ xxs: 1, md: 2 }}
         flexWrap="nowrap"
       >
         {/* <Grid item xxs={12} md="auto">
@@ -45,7 +45,7 @@ export const ConstitutionSidebar = ({ tableOfContents, metadata }) => {
         container
         direction="column"
         width={{ xxs: "100%", lg: "340px" }}
-        px={{ xxs: 1, md: 1 }}
+        px={{ xxs: 0, md: 0 }}
       >
         {/* {tab === "revisions" ? (
           <Grid item justifyContent="flex-end" px={{ xxs: 1, md: 0 }}>

diff --git a/frontend/src/components/organisms/Constitution/MDXComponents.tsx b/frontend/src/components/organisms/Constitution/MDXComponents.tsx
@@ -79,6 +79,21 @@ export const Heading3 = ({ children, id }) => (
     <Anchor id={id} />
   </>
 );
+export const Heading5 = ({ children }) => (
+  <Typography
+    variant="headline5"
+    sx={{
+      marginTop: "22px",
+      marginBottom: "22px",
+      fontWeight: 800,
+      fontSize: { xxs: 12, md: 14 },
+      lineHeight: "1em",
+      overflowWrap: "break-word"
+    }}
+  >
+    {children}
+  </Typography>
+);
 
 export const Paragraph = ({ children, id }) => (
   <>
@@ -105,7 +120,8 @@ export const ListItem = ({ children, id }) => (
       display: "flex",
       flexDirection: "column",
       alignItems: "flex-start",
-      justifyContent: "center"
+      justifyContent: "center",
+      wordBreak: "break-all"
     }}
   >
     {children}
@@ -131,6 +147,7 @@ export const Code = ({ children }) => (
 export const TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS = {
   backgroundColor: customPalette.neutralWhite,
   borderRadius: "16px",
+  padding: "12px",
   "& ol.toc-level": {
     margin: 0
   },

diff --git a/frontend/src/components/organisms/Constitution/TOCAccordion.tsx b/frontend/src/components/organisms/Constitution/TOCAccordion.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { customPalette } from "@/constants";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
   Accordion,
@@ -35,7 +34,6 @@ export const TocAccordion = ({ children }) => {
               elevation={0}
               sx={{
                 boxShadow: "none",
-                padding: 0,
                 "&:before": {
                   display: "none"
                 },
@@ -48,12 +46,7 @@ export const TocAccordion = ({ children }) => {
                 sx={{
                   borderRadius: "30px",
                   minHeight: "56px",
-                  "&:hover": {
-                    backgroundColor: customPalette.accordionBg
-                  },
-                  "&.Mui-expanded": {
-                    backgroundColor: customPalette.accordionBg
-                  },
+                  padding: 0,
                   "& a": {
                     "&:active": {
                       pointerEvents: "none" // disables the href activation on click but keep tooltip showing
@@ -100,11 +93,9 @@ export const TocAccordion = ({ children }) => {
                 alignItems: "center",
                 justifyContent: "left",
                 listStyleType: "none",
-                padding: "0 16px",
+                padding: 0,
                 width: "100%",
-                "&:hover": {
-                  backgroundColor: customPalette.accordionBg
-                },
+
                 "& li": {
                   display: "flex",
                   alignItems: "center"
@@ -117,7 +108,7 @@ export const TocAccordion = ({ children }) => {
             <AccordionDetails
               sx={{
                 listStyleType: "none",
-                padding: "0 16px",
+                padding: 0,
                 height: "56px",
                 "& li": {
                   minHeight: "56px"

diff --git a/frontend/src/components/organisms/Constitution/TOCLink.tsx b/frontend/src/components/organisms/Constitution/TOCLink.tsx
@@ -5,7 +5,6 @@ interface Props {
   href: string;
   children: React.ReactNode;
   callback: () => void;
-  disabled: boolean;
 }
 /**
  * TOCLink Component
@@ -19,7 +18,7 @@ interface Props {
  * @param {Function} props.callback - A callback function to be executed after the link is clicked.
  */
 
-const TOCLink = ({ href, children, callback, disabled }: Props) => {
+const TOCLink = ({ href, children, callback }: Props) => {
   const [isActive, setIsActive] = useState(false);
   const [isTruncated, setIsTruncated] = useState(false);
   const linkRef = useRef<HTMLAnchorElement>(null);
@@ -68,19 +67,29 @@ const TOCLink = ({ href, children, callback, disabled }: Props) => {
   }, [children]);
 
   return (
-    <Tooltip title={isTruncated ? children : ""} arrow>
+    <Tooltip
+      title={isTruncated ? children : ""}
+      arrow
+      enterDelay={200}
+      enterNextDelay={200}
+      leaveDelay={0}
+    >
       <a
         ref={linkRef}
         href={href}
         onClick={handleClick}
         style={{
           color: customPalette.textBlack,
           textDecoration: "none",
-          maxWidth: "260px",
+          maxWidth: "292px",
           whiteSpace: "nowrap",
           overflow: "hidden",
           textOverflow: "ellipsis",
-          display: "inline-block"
+          display: "inline-block",
+          backgroundColor: isActive ? customPalette.accordionBg : undefined,
+          borderRadius: "30px",
+          padding: "0 16px",
+          boxSizing: "border-box"
         }}
       >
         {children}

diff --git a/frontend/src/components/organisms/Constitution/TOCNested.tsx b/frontend/src/components/organisms/Constitution/TOCNested.tsx
@@ -1,4 +1,3 @@
-import { customPalette } from "@/constants";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material";
 
@@ -23,12 +22,8 @@ export const TocNested = ({ headings }) => {
           sx={{
             borderRadius: "30px",
             minHeight: "56px",
-            "&:hover": {
-              backgroundColor: customPalette.accordionBg
-            },
-            "&.Mui-expanded": {
-              backgroundColor: customPalette.accordionBg
-            },
+            padding: 0,
+
             "& a": {
               "&:active": {
                 pointerEvents: "none" // disables the href activation on click but keep tooltip showing

diff --git a/frontend/src/components/organisms/Footer/Footer.tsx b/frontend/src/components/organisms/Footer/Footer.tsx
@@ -66,14 +66,29 @@ export const Footer = ({
             variant="caption"
             data-testid="footer-privacy-policy-hyperlink"
           >
-            {t("privacyPolicy")}
+            <a
+              href="https://docs.intersectmbo.org/legal/policies-and-conditions/privacy-policy"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "inherit", textDecoration: "none" }}
+            >
+              {t("privacyPolicy")}
+            </a>
           </Typography>
+
           <Typography
             fontWeight={400}
             variant="caption"
             data-testid="footer-terms-of-service-hyperlink"
           >
-            {t("termsOfService")}
+            <a
+              href="https://docs.intersectmbo.org/legal/policies-and-conditions/terms-of-use"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "inherit", textDecoration: "none" }}
+            >
+              {t("termsOfService")}
+            </a>
           </Typography>
 
           {!userSession && showSignIn && (

diff --git a/frontend/src/components/organisms/LatestUpdates.tsx b/frontend/src/components/organisms/LatestUpdates.tsx
@@ -47,7 +47,9 @@ export const LatestUpdates = ({
           end_time: action.gov_action_proposal_end_time,
           vote: action.value,
           reasoning_title: action.reasoning_title,
-          rationale_url: action.rationale_url
+          rationale_url: action.rationale_url,
+          status: action.gov_action_proposal_status,
+          title: action.gov_action_proposal_title
         }
       }
     });