Merge branch 'main' into 326-cautions-form

ai-cfia · Nov 26, 2024 · e570602 · e570602
2 parents 3e75b4d + 07001b6
commit e570602
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 126 deletions.
diff --git a/.env.template b/.env.template
@@ -2,3 +2,4 @@ NEXT_TELEMETRY_DISABLED=1
 NEXT_PUBLIC_DEBUG=true
 # if link change dont forget to chage the test for sideNav to check if the link is correct
 NEXT_PUBLIC_REPORT_ISSUE_URL="https://forms.office.com/Pages/ResponsePage.aspx?id=7aW1GIYd00GUoLwn2uMqsn9SKTgKSYtCg4t0B9x4uyJURE5HSkFCTkZHUEQyWkxJVElMODdFQ09HUCQlQCN0PWcu&r5a19e9d47d9f4ac497fb974c192da4b3=%22Fertiscan%22"
+NEXT_PUBLIC_ALERT_BANNER_AUTO_DISMISS_TIME=5000
diff --git a/src/app/label-data-validation/page.tsx b/src/app/label-data-validation/page.tsx
@@ -8,6 +8,7 @@ import {
   StepperControls,
   StepStatus,
 } from "@/components/stepper";
+import useAlertStore from "@/stores/alertStore";
 import {
   DEFAULT_LABEL_DATA,
   FormComponentProps,
@@ -35,6 +36,7 @@ function LabelDataValidationPage() {
   const [cautionsStepStatus, setCautionsStepStatus] = useState<StepStatus>(
     StepStatus.Incomplete,
   );
+  const { showAlert } = useAlertStore();
 
   const createStep = (
     title: string,
@@ -106,7 +108,7 @@ function LabelDataValidationPage() {
 
   return (
     <Container
-      className="flex flex-col h-screen max-w-[1920px] max-h-[80vh]"
+      className="flex flex-col max-w-[1920px] bg-gray-100 "
       maxWidth={false}
       data-testid="container"
     >
@@ -122,12 +124,12 @@ function LabelDataValidationPage() {
       )}
 
       <Box
-        className="flex flex-col lg:flex-row gap-4"
+        className="flex flex-col lg:flex-row gap-4 my-4 lg:h-[75vh] lg:min-h-[500px]"
         data-testid="main-content"
       >
         <Box
-          className="flex w-full justify-center min-w-0 h-[720px]"
-          data-testid="swiper-container"
+          className="flex h-[500px] md:h-[720px] lg:size-full justify-center min-w-0 "
+          data-testid="image-viewer-container"
         >
           <ImageViewer imageFiles={imageFiles} />
         </Box>
@@ -144,25 +146,26 @@ function LabelDataValidationPage() {
         )}
 
         <Box
-          className="flex w-full justify-center min-w-0 min-h-[500px] lg:max-h-[80vh] overflow-y-auto"
+          className="flex flex-col size-full min-w-0 p-4 text-center gap-4 content-end bg-white border border-black"
           data-testid="form-container"
         >
-          <Box className="w-full text-center" data-testid="forms">
-            <Typography
-              variant="h6"
-              className="text-lg font-bold"
-              data-testid="form-title"
-            >
-              {steps[activeStep].title}
-            </Typography>
-            <Box className="">{steps[activeStep].render()}</Box>
-            <StepperControls
-              stepTitles={steps.map((step) => step.title)}
-              stepStatuses={steps.map((step) => step.stepStatus)}
-              activeStep={activeStep}
-              setActiveStep={setActiveStep}
-            />
+          <Typography
+            variant="h6"
+            className="text-lg font-bold"
+            data-testid="form-title"
+          >
+            {steps[activeStep].title}
+          </Typography>
+          {/* <Box className="min-h-[500px] lg:max-h-[80vh] overflow-y-auto"> */}
+          <Box className="flex-1 overflow-y-auto sm:px-8">
+            {steps[activeStep].render()}
           </Box>
+          <StepperControls
+            stepTitles={steps.map((step) => step.title)}
+            stepStatuses={steps.map((step) => step.stepStatus)}
+            activeStep={activeStep}
+            setActiveStep={setActiveStep}
+          />
         </Box>
       </Box>
 
@@ -178,6 +181,7 @@ function LabelDataValidationPage() {
           style={{ display: "none" }}
           onChange={handleFileChange}
         />
+        <Button onClick={() => showAlert("Test", "error")}>Show Alert</Button>
       </Box>
     </Container>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,26 +1,27 @@
 "use client";
 import Header from "@/components/Header";
 import SideNav from "@/components/Sidenav";
+import useAlertStore from "@/stores/alertStore";
+import { Box } from "@mui/material";
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
 import { ThemeProvider } from "@mui/material/styles";
+import "dotenv/config";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import "./globals.css";
-import theme from "./theme";
-import "dotenv/config";
 import "./i18n";
-import useAlertStore from "@/stores/alertStore";
-import { useTranslation } from "react-i18next";
+import theme from "./theme";
 
 export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   const [sideNavOpen, setSideNavOpen] = useState(false);
   const { showAlert } = useAlertStore();
   const { t, i18n } = useTranslation(["alertBanner", "translation"]);
-  const debugMode = process.env.NEXT_PUBLIC_DEBUG === 'true';
+  const debugMode = process.env.NEXT_PUBLIC_DEBUG === "true";
 
   if (debugMode) {
-   console.log(t("debugMessage"));
+    console.log(t("debugMessage"));
   }
 
   const handleDrawerClose = () => {
@@ -40,7 +41,7 @@ export default function RootLayout({
           <ThemeProvider theme={theme}>
             <SideNav open={sideNavOpen} onClose={handleDrawerClose} />
             <Header setSideNavOpen={setSideNavOpen} />
-            {children}
+            <Box className="mt-16">{children}</Box>
           </ThemeProvider>
         </AppRouterCacheProvider>
       </body>

diff --git a/src/app/theme.ts b/src/app/theme.ts
@@ -87,7 +87,6 @@ const theme = createTheme({
         root: {
           "&.header": {
             backgroundColor: "#05486C", // Dark Blue background
-            height: "64px", // Height of the AppBar
           },
         },
       },

diff --git a/src/components/AlertBanner.tsx b/src/components/AlertBanner.tsx
@@ -9,7 +9,7 @@ import { useCallback, useEffect, useRef } from "react";
 import useAlertStore from "../stores/alertStore";
 
 const AUTO_DISMISS_TIME =
-  Number(process.env.NEXT_PUBLIC_AUTO_DISMISS_TIME) || 5000;
+  Number(process.env.NEXT_PUBLIC_ALERT_BANNER_AUTO_DISMISS_TIME) || 5000;
 
 const AlertBanner: React.FC = () => {
   const { alert, hideAlert } = useAlertStore();
@@ -36,15 +36,20 @@ const AlertBanner: React.FC = () => {
   }, [alert, hideAlert, startAutoDismissTimer]);
 
   return (
-    <Box className="w-full">
+    <Box className="w-full" data-testid="alert-banner-container">
       <Collapse in={Boolean(alert)}>
         {alert && (
           <Alert
             severity={alert.type}
             onMouseEnter={clearAutoDismissTimer}
             onMouseLeave={startAutoDismissTimer}
+            data-testid="alert-banner"
             action={
-              <IconButton size="small" onClick={hideAlert}>
+              <IconButton
+                size="small"
+                onClick={hideAlert}
+                data-testid="alert-close-button"
+              >
                 <CloseIcon color={alert.type} />
               </IconButton>
             }
@@ -53,6 +58,7 @@ const AlertBanner: React.FC = () => {
               className="overflow-hidden text-ellipsis"
               variant="body2"
               color="inherit"
+              data-testid="alert-message"
               style={{
                 display: "-webkit-box",
                 WebkitLineClamp: 2,

diff --git a/src/components/DummyStepComponent.tsx b/src/components/DummyStepComponent.tsx
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -12,12 +12,12 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
+import i18next from "i18next";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
-import AlertBanner from "./AlertBanner";
-import i18next from "i18next";
 import { useTranslation } from "react-i18next";
+import AlertBanner from "./AlertBanner";
 
 interface HeaderProps {
   setSideNavOpen: (open: boolean | ((prevOpen: boolean) => boolean)) => void;
@@ -60,90 +60,85 @@ const Header: React.FC<HeaderProps> = ({ setSideNavOpen }) => {
   };
 
   return (
-    <>
-      <Box className="grow ">
-        <AppBar
-          className="!static header darkContainer"
-          data-testid="header-appbar"
+    <AppBar className="header" data-testid="header-appbar">
+      <Toolbar
+        className="justify-between h-full darkContainer"
+        data-testid="header-toolbar"
+      >
+        {/* Navigation menu toggle button on the left */}
+        <IconButton
+          aria-label={t("altText.sideMenuToggleAlt")}
+          edge="start"
+          onClick={handleSideNavToggle}
+          data-testid="menu-toggle-button"
         >
-          <Toolbar
-            className="justify-between h-full"
-            data-testid="header-toolbar"
-          >
-            {/* Navigation menu toggle button on the left */}
-            <IconButton
-              aria-label={t("altText.sideMenuToggleAlt")}
-              edge="start"
-              onClick={handleSideNavToggle}
-              data-testid="menu-toggle-button"
-            >
-              <MenuIcon fontSize="large" />
-            </IconButton>
+          <MenuIcon fontSize="large" />
+        </IconButton>
+
+        {/* Logo container in the center */}
+        <Box
+          sx={{
+            ...theme.logoSize,
+          }}
+          data-testid="logo-container"
+        >
+          <Link href="https://inspection.canada.ca">
+            <Image
+              className="cursor-pointer !relative"
+              src="/img/CFIA_FIP_FR_WHITE_1.png"
+              alt={t("altText.logoCFIAAlt")}
+              fill={true}
+              priority
+              data-testid="logo-image"
+            />
+          </Link>
+        </Box>
 
-            {/* Logo container in the center */}
-            <Box
-              sx={{
-                ...theme.logoSize,
-              }}
-              data-testid="logo-container"
+        {/* User interaction components on the right */}
+        <Box className="flex" data-testid="user-interaction-box">
+          {/* Language toggle button */}
+          <Button
+            className="align-center"
+            onClick={() => changeLanguage(language === "en" ? "fr" : "en")}
+            data-testid="language-toggle-button"
+          >
+            <Typography
+              className="normal-case underline"
+              data-testid="language-text"
             >
-              <Link href="https://inspection.canada.ca">
-                <Image
-                  className="cursor-pointer !relative"
-                  src="/img/CFIA_FIP_FR_WHITE_1.png"
-                  alt={t("altText.logoCFIAAlt")}
-                  fill={true}
-                  priority
-                  data-testid="logo-image"
-                />
-              </Link>
-            </Box>
+              {t(
+                isDownXs || isBetweenXsSm || isBetweenSmMd
+                  ? "language.short"
+                  : "language.full",
+                {
+                  lng: language === "en" ? "fr" : "en",
+                },
+              )}
+            </Typography>
+          </Button>
 
-            {/* User interaction components on the right */}
-            <Box className="flex" data-testid="user-interaction-box">
-              {/* Language toggle button */}
-              <Button
-                className="align-center"
-                onClick={() => changeLanguage(language === "en" ? "fr" : "en")}
-                data-testid="language-toggle-button"
-              >
-                <Typography
-                  className="normal-case underline"
-                  data-testid="language-text"
-                >
-                  {t(
-                    isDownXs || isBetweenXsSm || isBetweenSmMd
-                      ? "language.short"
-                      : "language.full",
-                    {
-                      lng: language === "en" ? "fr" : "en",
-                    },
-                  )}
-                </Typography>
-              </Button>
+          {/* User account icon button */}
+          <IconButton
+            aria-label={t("altText.userAccountAlt")}
+            className="self-center"
+            onClick={handleUserMenuToggle}
+            data-testid="user-account-button"
+          >
+            <AccountCircleIcon fontSize="large" />
+          </IconButton>
+        </Box>
+      </Toolbar>
 
-              {/* User account icon button */}
-              <IconButton
-                aria-label={t("altText.userAccountAlt")}
-                className="self-center"
-                onClick={handleUserMenuToggle}
-                data-testid="user-account-button"
-              >
-                <AccountCircleIcon fontSize="large" />
-              </IconButton>
-            </Box>
-          </Toolbar>
-        </AppBar>
+      {/* User menu */}
+      <UserMenu
+        anchorElement={anchorElement}
+        isUserMenuOpen={isUserMenuOpen}
+        setIsUserMenuOpen={setIsUserMenuOpen}
+        setAnchorElement={setAnchorElement}
+      />
 
-        <UserMenu
-          anchorElement={anchorElement}
-          isUserMenuOpen={isUserMenuOpen}
-          setIsUserMenuOpen={setIsUserMenuOpen}
-          setAnchorElement={setAnchorElement}
-        />
-      </Box>
-      <AlertBanner></AlertBanner>
-    </>
+      <AlertBanner />
+    </AppBar>
   );
 };