Sync test with recent develop

.github/workflows/build-and-deploy.yml

@@ -51,6 +51,8 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@v3
@@ -82,13 +84,13 @@ jobs:
       - name: Destroy Cardano Node, DB sync and Postgres if required
         if: ${{ inputs.resync_cardano_node_and_db }}
         run: |
-          make destroy-cardano-node-and-dbsync
+          make --debug=b destroy-cardano-node-and-dbsync
 
       - name: Deploy app
         run: |
-          make all
+          make --debug=b all
 
       - name: Reprovision Grafana
         run: |
           sleep 30 # give grafana time to start up
-          make reload-grafana
+          make --debug=b reload-grafana

CHANGELOG.md

@@ -54,6 +54,7 @@ changes.
 - Streamlined the application build and deployment process, thereby accelerating continuous delivery (CD) and reducing the resource burden [Issue 246](https://github.com/IntersectMBO/govtool/issues/246).
 - Applied unified policy on Docker images tagging [Issue 320](https://github.com/IntersectMBO/govtool/issues/320).
 - Reorganised deployment Makefiles in order to better document the process and easier management [Issue 385](https://github.com/IntersectMBO/govtool/issues/385).
+- Added a grafana panel to track all the deploys on the target machines [Issue 361](https://github.com/IntersectMBO/govtool/issues/361).
 
 ### Removed
 -

govtool/frontend/src/components/molecules/LinkWithIcon.tsx

@@ -18,6 +18,7 @@ export const LinkWithIcon = ({
         alignItems: "center",
         cursor: "pointer",
         display: "flex",
+        width: "fit-content",
         ...sx,
       }}
       onClick={onClick}

govtool/frontend/src/components/molecules/Step.tsx

@@ -0,0 +1,58 @@
+import { Box } from "@mui/material";
+
+import { Typography } from "@atoms";
+import { theme } from "@/theme";
+
+import { StepProps } from "./types";
+
+export const Step = ({
+  component,
+  label,
+  layoutStyles,
+  stepNumber,
+}: StepProps) => {
+  const {
+    palette: { boxShadow2 },
+  } = theme;
+
+  return (
+    <Box
+      sx={{
+        flexDirection: "row",
+        display: "flex",
+        width: "100%",
+        ...layoutStyles,
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: "center",
+          borderRadius: "100%",
+          boxShadow: `2px 2px 20px 0px ${boxShadow2}`,
+          display: "flex",
+          height: 54,
+          justifyContent: "center",
+          width: 54,
+        }}
+      >
+        <Typography color="primary" fontWeight={400} variant="title2">
+          {stepNumber}
+        </Typography>
+      </Box>
+
+      <Box
+        sx={{
+          display: "flex",
+          flex: 1,
+          flexDirection: "column",
+          ml: 3,
+        }}
+      >
+        <Typography fontWeight={500} sx={{ mb: 1.5 }} variant="body1">
+          {label}
+        </Typography>
+        {component}
+      </Box>
+    </Box>
+  );
+};

govtool/frontend/src/components/molecules/index.ts

@@ -12,6 +12,7 @@ export * from "./GovernanceActionsSorting";
 export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
+export * from "./Step";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";
 export * from "./WalletInfoCard";

govtool/frontend/src/components/molecules/types.ts

@@ -6,3 +6,10 @@ export type LinkWithIconProps = {
   icon?: JSX.Element;
   sx?: SxProps;
 };
+
+export type StepProps = {
+  component: JSX.Element;
+  label: string;
+  layoutStyles?: SxProps;
+  stepNumber: number | string;
+};

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx

@@ -0,0 +1,120 @@
+import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import { Box } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+
+import { Button, Spacer, Typography } from "@atoms";
+import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
+import { Step } from "@molecules";
+import { BgCard, ControlledField } from "@organisms";
+import { downloadJson, openInNewTab } from "@utils";
+
+export const StorageInformation = ({
+  setStep,
+}: {
+  setStep: Dispatch<SetStateAction<number>>;
+}) => {
+  const { t } = useTranslation();
+  const {
+    control,
+    errors,
+    createGovernanceAction,
+    generateJsonBody,
+    getValues,
+    watch,
+  } = useCreateGovernanceActionForm();
+  const [isJsonDownloaded, setIsJsonDownloaded] = useState<boolean>(false);
+  // TODO: change on correct file name
+  const fileName = getValues("governance_action_type");
+
+  // TODO: Change link to correct
+  const openGuideAboutStoringInformation = useCallback(
+    () => openInNewTab("https://sancho.network/"),
+    []
+  );
+
+  const isActionButtonDisabled = !watch("storingURL") || !isJsonDownloaded;
+
+  const onClickBack = useCallback(() => setStep(5), []);
+
+  const onClickDowloadJson = () => {
+    const data = getValues();
+    const jsonBody = generateJsonBody(data);
+    downloadJson(jsonBody, fileName);
+    setIsJsonDownloaded(true);
+  };
+
+  return (
+    <BgCard
+      actionButtonLabel={t("continue")}
+      backButtonLabel={t("back")}
+      isActionButtonDisabled={isActionButtonDisabled}
+      onClickActionButton={createGovernanceAction}
+      onClickBackButton={onClickBack}
+    >
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.storingInformationTitle")}
+      </Typography>
+      <Typography
+        fontWeight={400}
+        sx={{ mt: 1, textAlign: "center" }}
+        variant="body1"
+      >
+        {t("createGovernanceAction.storingInformationDescription")}
+      </Typography>
+      <Box sx={{ my: 4 }}>
+        <Step
+          // TODO: add onClick action when available
+          component={
+            <Button
+              onClick={onClickDowloadJson}
+              size="extraLarge"
+              sx={{ width: "fit-content" }}
+            >
+              {`${fileName}.jsonld`}
+            </Button>
+          }
+          label={t("createGovernanceAction.storingInformationStep1Label")}
+          stepNumber={1}
+        />
+        <Spacer y={6} />
+        <Step
+          component={
+            <Button
+              endIcon={
+                <OpenInNewIcon
+                  sx={{
+                    color: "primary",
+                    height: 17,
+                    width: 17,
+                  }}
+                />
+              }
+              onClick={openGuideAboutStoringInformation}
+              size="extraLarge"
+              sx={{ width: "fit-content" }}
+              variant="text"
+            >
+              {t("createGovernanceAction.storingInformationStep2Link")}
+            </Button>
+          }
+          label={t("createGovernanceAction.storingInformationStep2Label")}
+          stepNumber={2}
+        />
+        <Spacer y={6} />
+        <Step
+          component={
+            <ControlledField.Input
+              {...{ control, errors }}
+              name="storingURL"
+              placeholder={t(
+                "createGovernanceAction.storingInformationURLPlaceholder"
+              )}
+            />
+          }
+          label={t("createGovernanceAction.storingInformationStep3Label")}
+          stepNumber={3}
+        />
+      </Box>
+    </BgCard>
+  );
+};

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx

@@ -0,0 +1,70 @@
+import { Dispatch, SetStateAction } from "react";
+import { Box, Link } from "@mui/material";
+
+import { Spacer, Typography } from "@atoms";
+import {
+  useCreateGovernanceActionForm,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
+import { BgCard, ControlledField } from "@organisms";
+import { openInNewTab } from "@utils";
+
+export const StoreDataInfo = ({
+  setStep,
+}: {
+  setStep: Dispatch<SetStateAction<number>>;
+}) => {
+  const { t } = useTranslation();
+  const { control, errors, watch } = useCreateGovernanceActionForm();
+  const { isMobile } = useScreenDimension();
+
+  // TODO: change link when available
+  const openLink = () => {
+    openInNewTab("https://docs.sanchogov.tools");
+  };
+
+  const isContinueDisabled = !watch("storeData");
+
+  const onClickContinue = () => {
+    setStep(6);
+  };
+
+  const onClickBack = () => {
+    setStep(4);
+  };
+
+  return (
+    <BgCard
+      actionButtonLabel={t("continue")}
+      isActionButtonDisabled={isContinueDisabled}
+      onClickActionButton={onClickContinue}
+      onClickBackButton={onClickBack}
+    >
+      <Typography sx={{ textAlign: "center" }} variant="headline4">
+        {t("createGovernanceAction.storeDataTitle")}
+      </Typography>
+      <Link
+        onClick={openLink}
+        sx={{
+          cursor: "pointer",
+          fontSize: 16,
+          fontWeight: 500,
+          fontFamily: "Poppins",
+          my: 4,
+          textAlign: "center",
+          textDecoration: "none",
+        }}
+      >
+        {t("createGovernanceAction.storeDataLink")}
+      </Link>
+      <ControlledField.Checkbox
+        {...{ control, errors }}
+        name="storeData"
+        label={t("createGovernanceAction.storeDataCheckboxLabel")}
+      />
+      <Spacer y={isMobile ? 4 : 12.5} />
+      <Box display="flex" flex={1} />
+    </BgCard>
+  );
+};

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/index.ts

@@ -0,0 +1,2 @@
+export * from "./StorageInformation";
+export * from "./StoreDataInfo";

govtool/frontend/src/components/organisms/ReviewCreatedGovernanceAction.tsx

@@ -4,7 +4,11 @@ import DriveFileRenameOutlineOutlinedIcon from "@mui/icons-material/DriveFileRen
 
 import { Button, Spacer, Typography } from "@atoms";
 import { ICONS } from "@consts";
-import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
+import {
+  defaulCreateGovernanceActionValues,
+  useCreateGovernanceActionForm,
+  useTranslation,
+} from "@hooks";
 import { LinkWithIcon } from "@molecules";
 import { openInNewTab } from "@utils";
 
@@ -39,7 +43,11 @@ export const ReviewCreatedGovernanceAction = ({
 
   const renderReviewFields = () => {
     return Object.entries(values)
-      .filter(([key]) => key !== "links")
+      .filter(
+        ([key]) =>
+          !Object.keys(defaulCreateGovernanceActionValues).includes(key) ||
+          key === "governance_action_type"
+      )
       .map(([key, value]) => {
         const label =
           key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " ");

govtool/frontend/src/components/organisms/index.ts

@@ -4,6 +4,7 @@ export * from "./ChooseStakeKeyPanel";
 export * from "./ChooseWalletModal";
 export * from "./ControlledField";
 export * from "./CreateGovernanceActionForm";
+export * from "./CreateGovernanceActionSteps";
 export * from "./DashboardCards";
 export * from "./DashboardCards";
 export * from "./DashboardDrawerMobile";