Merge pull request #5 from bcgov/feature/ES-184-menu

Feature/ES-184-menu: EPIC.compliance Menu

compliance-web/.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.idea
+
+/coverage
+/.nyc_output

compliance-web/.nycrc.json

@@ -0,0 +1,15 @@
+{
+    "all": true,
+    "extends": "@istanbuljs/nyc-config-typescript",
+    "check-coverage": true,
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.tsx"
+      ],
+      "exclude": [
+        "cypress/**/*.*",
+        "**/*.d.ts",
+        "**/*.cy.tsx",
+        "**/*.cy.ts"
+      ]
+  }

compliance-web/Dockerfile

@@ -1,6 +1,6 @@
 # "build-stage", based on Node.js, to build and compile the frontend
 # pull official base image
-FROM node:18-alpine as build-stage
+FROM node:16-alpine as build-stage
 
 # set working directory
 WORKDIR /app

compliance-web/cypress.config.cjs

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable no-undef */
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { defineConfig } = require('cypress');
 
 module.exports = defineConfig({
@@ -18,4 +18,4 @@ module.exports = defineConfig({
       return config
     },
   },
-});
+});

compliance-web/package.json

@@ -17,17 +17,18 @@
     "@mui/icons-material": "^5.15.21",
     "@mui/material": "^5.15.20",
     "@tanstack/react-query": "^5.45.1",
-    "@tanstack/react-router": "^1.45.7",
     "@tanstack/react-query-devtools": "^5.45.1",
+    "@tanstack/react-router": "^1.45.7",
     "@tanstack/router-devtools": "^1.45.7",
     "@tanstack/router-plugin": "^1.45.7",
     "axios": "^1.7.2",
-    "epic.theme": "^1.0.4",
+    "epic.theme": "^1.0.5",
     "keycloak-js": "^25.0.1",
     "oidc-client-ts": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-oidc-context": "^3.1.0"
+    "react-oidc-context": "^3.1.0",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.44",

compliance-web/sample.env

@@ -1,4 +1,9 @@
 VITE_API_URL=
-VITE_KEYCLOAK_URL=
-VITE_KEYCLOAK_CLIENT=
-VITE_KEYCLOAK_REALM=
+VITE_ENV=
+VITE_VERSION=
+
+VITE_APP_TITLE=
+VITE_APP_URL=
+
+VITE_OIDC_AUTHORITY=
+VITE_CLIENT_ID=

compliance-web/src/App.cy.tsx

@@ -3,10 +3,11 @@ import { ThemeProvider } from "@mui/material";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { AuthProvider } from "react-oidc-context";
-import { OidcConfig } from "@/utils/config";
-import { theme } from "@/styles/theme";
+import { OidcConfig } from "./utils/config";
+import { theme } from "./styles/theme";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
-import { routeTree } from "@/routeTree.gen";
+import { routeTree } from "./routeTree.gen";
+import React from "react";
 
 const queryClient = new QueryClient();
 
@@ -41,6 +42,6 @@ describe("<App />", () => {
       // add other necessary mocks here
     };
     mount(<TestApp authentication={mockAuth} />);
-    cy.contains("Users");
+    cy.contains("Version");
   });
-});
+});

compliance-web/src/components/Shared/ComingSoon.tsx

@@ -0,0 +1,37 @@
+import { DesignServices } from "@mui/icons-material";
+import { Box, Typography } from "@mui/material";
+import { BCPalette } from "epic.theme";
+
+export default function ComingSoon() {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        marginBottom: 16,
+      }}
+    >
+      <Box
+        sx={{
+          padding: "1rem",
+          background: BCPalette.components.background.lightGray,
+          marginBottom: "2.5rem",
+        }}
+      >
+        <DesignServices
+          fontSize="large"
+          sx={{ color: BCPalette.components.border.active }}
+        />
+      </Box>
+      <Typography variant="h3" marginBottom={"0.5rem"}>
+        Coming soon!
+      </Typography>
+      <Typography variant="h5" fontWeight="400">
+        Our team is developing this feature and plans to launch it soon
+      </Typography>
+    </Box>
+  );
+}

compliance-web/src/components/Shared/EAOAppBar.tsx

@@ -1,33 +1,67 @@
-import { AppBar, Box, Button, Grid, Typography } from "@mui/material";
-import EAO_Logo from "@/assets/images/EAO_Logo.png";
+import {
+  AppBar as MuiAppBar,
+  AppBarProps as MuiAppBarProps,
+  Box,
+  Button,
+  Grid,
+  styled,
+  Typography,
+  Avatar,
+  useTheme,
+} from "@mui/material";
+import BC_Logo from "@/assets/images/bcgovLogoWhite.svg";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { AppConfig } from "@/utils/config";
 import { useAuth } from "react-oidc-context";
+import EnvironmentBanner from "./EnvironmentBanner";
+import { forwardRef, HTMLProps } from "react";
 
-export default function EAOAppBar() {
+
+type EAOAppBarProps = HTMLProps<HTMLDivElement>;
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps>(({ theme }) => ({
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+}));
+
+const EAOAppBar = forwardRef<HTMLDivElement, EAOAppBarProps>((_props, ref) => {
+  const theme = useTheme();
   const auth = useAuth();
   return (
     <>
-      <AppBar position="static" color="inherit" elevation={2}>
+      <AppBar ref={ref} position="static" color="primary" open={true}>
         <Grid
           container
-          padding={"0.5rem"}
+          padding={"0.938rem 1.5rem"}
           margin={0}
+          height={72}
           justifyContent="space-between"
         >
           <Grid display="flex" justifyContent="start" alignItems="center">
-            <img src={EAO_Logo} height={72} />
+            <img src={BC_Logo} height={42} />
             <Typography
-              variant="h2"
+              variant="h3"
               color="inherit"
               component="div"
-              paddingLeft={"0.5rem"}
+              paddingLeft={"2.5rem"}
               fontWeight={"bold"}
             >
               {AppConfig.appTitle}
             </Typography>
           </Grid>
-          <Grid display="flex" justifyContent="center" alignItems="center" paddingRight={"0.75rem"}>
+          <Grid
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            paddingRight={"0.75rem"}
+          >
             <AccountCircleIcon
               fontSize="large"
               color="primary"
@@ -38,35 +72,48 @@ export default function EAOAppBar() {
                 <Box
                   display={"flex"}
                   flexDirection={"column"}
-                  marginRight={"0.75rem"}
+                  marginRight={"1rem"}
                 >
-                  <Typography variant="body1" color="inherit">
-                    Hi, <b>{auth.user?.profile.name}</b>
-                  </Typography>
-                  <Typography variant="caption" color="inherit">
-                    {auth.user?.profile.email}
+                  <Typography variant="h6" color="inherit">
+                    Hello, {auth.user?.profile.name}
                   </Typography>
                 </Box>
-                <Button
+                {/* <Button
                   variant="outlined"
-                  color="primary"
+                  color="inherit"
                   onClick={() => auth.signoutRedirect()}
                 >
                   Sign Out
-                </Button>
+                </Button> */}
+                <Avatar
+                  sx={{
+                    bgcolor: theme.palette.background.default,
+                    color: theme.palette.primary.main,
+                    width: "2rem",
+                    height: "2rem",
+                  }}
+                >
+                  <Typography
+                    variant="body1"
+                    fontWeight={700}
+                  >{`${auth.user?.profile?.given_name?.charAt(0)}${auth.user?.profile?.family_name?.charAt(0)}`}</Typography>
+                </Avatar>
               </>
             ) : (
               <Button
                 variant="outlined"
-                color="primary"
+                color="inherit"
                 onClick={() => auth.signinRedirect()}
               >
                 Sign In
               </Button>
             )}
           </Grid>
         </Grid>
+        <EnvironmentBanner></EnvironmentBanner>
       </AppBar>
     </>
   );
-}
+});
+
+export default EAOAppBar;

compliance-web/src/components/Shared/EnvironmentBanner.tsx

@@ -0,0 +1,37 @@
+import { AppConfig } from "@/utils/config";
+import { ErrorOutline } from "@mui/icons-material";
+import { Box, Typography, useTheme } from "@mui/material";
+
+
+export default function EnvironmentBanner() {
+  const env = AppConfig.environment;
+  const isTestEnvironment = ["dev", "test", "demo", "local"].includes(env);
+  const theme = useTheme();
+
+  if (!isTestEnvironment) {
+    return (
+      <Box
+        height={8}
+        bgcolor={{backgroundColor: theme.palette.secondary.main}}
+      ></Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.text.secondary,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "8px",
+        height: 40,
+      }}
+      textAlign="center"
+    >
+      <ErrorOutline />
+      <Typography variant="h6" fontWeight={400}>You are using a {env.toUpperCase()} environment</Typography>
+    </Box>
+  );
+}

compliance-web/src/components/Shared/SideNav/ExpandMenuButton.tsx

@@ -0,0 +1,29 @@
+import { useMenuStore } from "@/store/menuStore";
+import { ChevronLeft, ChevronRight } from "@mui/icons-material";
+import { Button } from "@mui/material";
+
+export default function ExpandMenuButton() {
+  const { expandMenu, toggleExpandMenu } = useMenuStore();
+
+  return (
+    <Button
+      sx={{
+        height: "3rem",
+        width: "2rem",
+        padding: "0.75rem 0.5rem",
+        minWidth: "auto",
+        marginLeft: "2px",
+        marginRight: "14px",
+        borderRadius: "0px 0.25rem 0.25rem 0",
+      }}
+      color="primary"
+      onClick={toggleExpandMenu}
+    >
+      {expandMenu ? (
+        <ChevronLeft fontSize={"large"} />
+      ) : (
+        <ChevronRight fontSize={"large"} />
+      )}
+    </Button>
+  );
+}

compliance-web/src/components/Shared/SideNav/MenuItemIconsList.tsx

@@ -0,0 +1,41 @@
+import { theme } from "@/styles/theme";
+import { ListItem, Box, List } from "@mui/material";
+import { Fragment } from "react/jsx-runtime";
+import RouteItemsList, { RouteMenuItem } from "./RouteItemsList";
+import { useMenuStore } from "@/store/menuStore";
+
+export default function MenuItemIconsList() {
+  const routeMenuItems: RouteMenuItem[] = RouteItemsList();
+
+  const { toggleMenu } = useMenuStore();
+
+  const renderMenuIcons = () => {
+    return routeMenuItems.map((route) => {
+      return (
+        <Fragment key={route.routeName}>
+          <ListItem
+            key={route.routeName}
+            onClick={() => toggleMenu(route.routeName)}
+            disablePadding
+            sx={{ cursor: "pointer" }}
+          >
+            <Box
+              sx={{
+                color: theme.palette.common.white,
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "1rem",
+              }}
+            >
+              {route.icon ?? route.icon}
+            </Box>
+          </ListItem>
+        </Fragment>
+      );
+    });
+  };
+
+  return <List>{renderMenuIcons()}</List>;
+}