feat/change-user-roles

.github/workflows/pr.yaml

@@ -79,7 +79,6 @@ jobs:
           set -o pipefail
           sudo chmod +x lint.sh && ./lint.sh 2>&1 | tee code_lint_output.txt
 
-
       - name: Unit tests
         id: unit_tests
         run: |
@@ -127,15 +126,15 @@ jobs:
       - name: Scan Docker image with Dockle
         id: dockle
         run: |
-            wget -q https://github.com/goodwithtech/dockle/releases/download/v0.4.14/dockle_0.4.14_Linux-64bit.tar.gz
-            tar zxf dockle_0.4.14_Linux-64bit.tar.gz
-            sudo mv dockle /usr/local/bin
+          wget -q https://github.com/goodwithtech/dockle/releases/download/v0.4.14/dockle_0.4.14_Linux-64bit.tar.gz
+          tar zxf dockle_0.4.14_Linux-64bit.tar.gz
+          sudo mv dockle /usr/local/bin
 
-            dockle --exit-code 1 --exit-level fatal --format json --input '/tmp/image-${{ matrix.name }}-${{ github.sha }}-pr.tar' --output ${{ matrix.workdir }}/dockle_scan_output.json
-            rm -rf '/tmp/image-${{ matrix.name }}-${{ github.sha }}-pr.tar'
-            cat ${{ matrix.workdir }}/dockle_scan_output.json
+          dockle --exit-code 1 --exit-level fatal --format json --input '/tmp/image-${{ matrix.name }}-${{ github.sha }}-pr.tar' --output ${{ matrix.workdir }}/dockle_scan_output.json
+          rm -rf '/tmp/image-${{ matrix.name }}-${{ github.sha }}-pr.tar'
+          cat ${{ matrix.workdir }}/dockle_scan_output.json
 
-            echo "outcome=success" >> $GITHUB_OUTPUT
+          echo "outcome=success" >> $GITHUB_OUTPUT
 
       - name: Create PR comment
         if: always()

frontend/messages/de.json

@@ -15,9 +15,11 @@
     "title": "Cardano-Verfassung",
     "drawer": {
       "compare": "Vergleichen",
-      "latestRevisions": "Latest Revisions",
+      "versionHistory": "Version History",
       "tableOfContents": "Contents",
-      "latest": "Latest"
+      "latest": "Latest",
+      "uploadNewVersion": "Upload new version",
+      "backToContents": "Back to contents"
     }
   },
   "Members": {
@@ -204,10 +206,10 @@
       "description": "Please provide rationale for your vote on specific governance action.",
       "fields": {
         "title": {
-          "label": "Title"
+          "label": "Summary"
         },
         "rationale": {
-          "label": "Rationale"
+          "label": "Rationale Statement"
         }
       },
       "alerts": {

frontend/messages/en.json

@@ -16,7 +16,7 @@
     "drawer": {
       "compare": "Compare",
       "latestRevisions": "Latest Revisions",
-      "tableOfContents": "Contents",
+      "tableOfContents": "Content",
       "latest": "Latest"
     }
   },
@@ -204,10 +204,10 @@
       "description": "Please provide rationale for your vote on specific governance action.",
       "fields": {
         "title": {
-          "label": "Title"
+          "label": "Summary"
         },
         "rationale": {
-          "label": "Rationale"
+          "label": "Rationale Statement"
         }
       },
       "alerts": {

frontend/src/app/[locale]/interim-constitution/layout.tsx

@@ -2,9 +2,13 @@ import { customPalette } from "@/constants";
 import { Box } from "@mui/material";
 
 export default function ConstitutionLayout({
-  children
+  children,
 }: {
   children: React.ReactNode;
 }) {
-  return <Box sx={{ backgroundColor: customPalette.bgWhite }}>{children}</Box>;
+  return (
+    <Box sx={{ backgroundColor: customPalette.bgWhite, minHeight: "100vh" }}>
+      {children}
+    </Box>
+  );
 }

frontend/src/app/[locale]/interim-constitution/version-history/page.tsx

@@ -0,0 +1,34 @@
+import { ContentWrapper } from "@/components/atoms";
+import { VersionHistory } from "@/components/organisms/Constitution/VersionHistory";
+import { getConstitutionMetadata } from "@/lib/api";
+import { Loading } from "@molecules";
+import { Footer, NotFound, TopNav } from "@organisms";
+import { isResponseErrorI } from "@utils";
+import { Suspense } from "react";
+
+export default async function VersionHistoryPage() {
+  const metadata = await getConstitutionMetadata();
+
+  return (
+    <>
+      <TopNav />
+      <Suspense fallback={<Loading />}>
+        {metadata && !isResponseErrorI(metadata) ? (
+          <ContentWrapper>
+            <VersionHistory metadata={metadata.reverse()} />
+          </ContentWrapper>
+        ) : (
+          <>
+            <ContentWrapper>
+              <NotFound
+                title="constitution.title"
+                description="constitution.description"
+              />
+            </ContentWrapper>
+            <Footer />
+          </>
+        )}
+      </Suspense>
+    </>
+  );
+}

frontend/src/app/[locale]/page.tsx

@@ -1,18 +1,16 @@
-import React from "react";
-
-import { Footer, Hero, HeroActions, TopNav } from "@organisms";
-import { unstable_setRequestLocale } from "next-intl/server"; // Import function to set the request-specific locale (unstable API).
+import ClientRedirect from "@/components/molecules/ClientRedirect";
 import { decodeUserToken } from "@/lib/api";
-import { redirect } from "next/navigation";
-import { PATHS } from "@consts";
 import { ContentWrapper } from "@atoms";
+import { PATHS } from "@consts";
+import { Footer, Hero, HeroActions, TopNav } from "@organisms";
+import { unstable_setRequestLocale } from "next-intl/server"; // Import function to set the request-specific locale (unstable API).
 
 export default async function Home({ params: { locale } }) {
   unstable_setRequestLocale(locale); // Sets the locale for the request. Use cautiously due to its unstable nature.
   const user = await decodeUserToken();
 
   if (user) {
-    redirect(`/${locale}/${PATHS.constitution}`);
+    return <ClientRedirect href={`/${locale}/${PATHS.constitution}`} />;
   }
   return (
     <>

frontend/src/components/atoms/TextArea.tsx

@@ -1,9 +1,9 @@
 "use client";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 import { TextareaAutosize, styled } from "@mui/material";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
 
-import { TextAreaProps } from "./types";
 import { poppins } from "@consts";
+import { TextAreaProps } from "./types";
 
 const TextAreaBase = styled(TextareaAutosize)(
   () => `
@@ -20,7 +20,7 @@ const TextAreaBase = styled(TextareaAutosize)(
 );
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ errorMessage, maxLength = 500, onBlur, onFocus, ...props }, ref) => {
+  ({ errorMessage, maxLength, onBlur, onFocus, ...props }, ref) => {
     const textAraeRef = useRef<HTMLTextAreaElement>(null);
 
     const handleFocus = useCallback(
@@ -45,7 +45,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         ({
           focus: handleFocus,
           blur: handleBlur,
-          ...textAraeRef.current,
+          ...textAraeRef.current
         } as unknown as HTMLTextAreaElement),
       [handleBlur, handleFocus]
     );
@@ -61,7 +61,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           outline: "none",
           padding: "12px 14px",
           resize: "none",
-          overflow: "scroll",
+          overflow: "scroll"
         }}
         maxLength={maxLength}
         ref={textAraeRef}

frontend/src/components/molecules/ClientRedirect.tsx

@@ -0,0 +1,31 @@
+"use client";
+import type { Route } from "next";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+/**
+ * For client-side redirects in React Server Components (RSC)
+ *
+ * Trying to redirect in server using `redirect` from `next/navigation`
+ * gives an odd error "Rendered more hooks than during the previous render"
+ * which seems impossible to debug, as we don't have any hooks that are
+ * conditionally rendered or skipped. There's no solution available for this
+ * specific problem; most solutions point to checking for conditional hooks.
+ *
+ * At present, client-based redirection works correctly, therefore we are
+ * creating a client component whose function is purely to redirect. It
+ * doesn't return any JSX.Element. Note that we should return this component
+ * early, otherwise the other components will flash while redirecting.
+ *
+ * @param {Route} href - The route path to which the client will be redirected.
+ * @returns {null} - Returns null as void is not assignable to JSX.Element.
+ */
+export default function ClientRedirect({ href }: { href: Route }): null {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push(href);
+  }, [href, router]);
+
+  return null;
+}

frontend/src/components/molecules/Field/TextArea.tsx

@@ -5,7 +5,7 @@ import {
   FormErrorMessage,
   FormHelpfulText,
   TextArea as TextAreaBase,
-  Typography,
+  Typography
 } from "@atoms";
 
 import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
@@ -21,7 +21,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
       label,
       labelStyles,
       layoutStyles,
-      maxLength = 500,
+      maxLength,
       onBlur,
       onFocus,
       ...props
@@ -52,7 +52,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
         ({
           focus: handleFocus,
           blur: handleBlur,
-          ...textAreaRef.current,
+          ...textAreaRef.current
         } as unknown as HTMLTextAreaElement),
       [handleBlur, handleFocus]
     );
@@ -63,7 +63,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
           flexDirection: "column",
           width: "100%",
           position: "relative",
-          ...layoutStyles,
+          ...layoutStyles
         }}
       >
         {label && (
@@ -95,11 +95,11 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
           sx={{
             bottom: errorMessage ? 35 : 14,
             position: "absolute",
-            right: 15,
+            right: 15
           }}
           variant="caption"
         >
-          {props?.value?.toString()?.length ?? 0}/{maxLength}
+          {maxLength && `${props?.value?.toString()?.length ?? 0}/${maxLength}`}
         </Typography>
       </Box>
     );

frontend/src/components/organisms/Constitution/Constitution.tsx

@@ -6,11 +6,11 @@ import { useScreenDimension } from "@hooks";
 import { Box, Grid, IconButton } from "@mui/material";
 import { useTranslations } from "next-intl";
 import { MDXRemote } from "next-mdx-remote";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Footer } from "../Footer";
 import { DrawerMobile } from "../TopNavigation";
 import { ConstitutionProps } from "../types";
-import { ConstitutionSidebar } from "./ConstitutionSidebar";
+import { ContentsSidebar } from "./ContentsSidebar";
 import {
   Code,
   Heading1,
@@ -20,23 +20,17 @@ import {
   ListItem,
   NavDrawerDesktop,
   Paragraph,
-  TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS
+  TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS,
 } from "./MDXComponents";
 import { TocAccordion } from "./TOCAccordion";
 import TOCLink from "./TOCLink";
 
 export function Constitution({ constitution, metadata }: ConstitutionProps) {
   const { screenWidth } = useScreenDimension();
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
   const isMobile = screenWidth < 1025;
   const t = useTranslations("Constitution");
 
-  useEffect(() => {
-    if (isMobile) {
-      setIsOpen(false);
-    }
-  }, [isMobile]);
-
   const onTOCLinkClick = () => {
     if (isMobile) {
       setIsOpen(false);
@@ -52,11 +46,11 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
           sx={TABLE_OF_CONTENTS_WRAPPER_STYLE_PROPS}
           rowGap={0}
         >
-          <ConstitutionSidebar tableOfContents={children} metadata={metadata} />
+          <ContentsSidebar tableOfContents={children} />
         </DrawerMobile>
       ) : (
         <NavDrawerDesktop top={{ xxs: 0, md: 85 }} left={0}>
-          <ConstitutionSidebar tableOfContents={children} metadata={metadata} />
+          <ContentsSidebar tableOfContents={children} />
         </NavDrawerDesktop>
       ),
     h1: Heading1,
@@ -84,7 +78,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
         );
       }
       return <a {...props} />;
-    }
+    },
   };
 
   return (
@@ -102,9 +96,9 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
         md={isOpen ? 8 : 11}
         ml={{ xxs: 0, lg: "404px" }}
       >
-        <Box display="flex" flexDirection="column" flex={1}>
+        <Box display="flex" flexDirection="column" flex={1} gap={1}>
           <ContentWrapper>
-            <Box px={{ xxs: 3, lg: 5 }}>
+            <Box px={{ xxs: 2, lg: 5 }}>
               <Box
                 display="flex"
                 justifyContent="space-between"
@@ -120,7 +114,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
                   sx={{
                     bgcolor: customPalette.arcticWhite,
                     display: { xxs: "flex", lg: "none" },
-                    justifyContent: "center"
+                    justifyContent: "center",
                   }}
                 >
                   <img src={IMAGES.docSearch} />
@@ -136,4 +130,4 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
       </Grid>
     </Grid>
   );
-}
+}