Merge pull request #936 from bcgov/BHBC-2140-hotfix

BHBC-2140-hotfix: Splash Dialog
bcgov · Feb 2, 2023 · e2d58e0 · e2d58e0
2 parents 3109ad8 + 60b4c57
commit e2d58e0
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 34 deletions.
diff --git a/api/openshift/api.bc.yaml b/api/openshift/api.bc.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 kind: Template
 metadata:
   creationTimestamp: null
@@ -39,7 +39,7 @@ parameters:
     value: 14-ubi8
 objects:
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: ${SOURCE_IMAGE_NAME}
       creationTimestamp: null
@@ -60,7 +60,7 @@ objects:
           referencePolicy:
             type: Local
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: '${NAME}'
       creationTimestamp: null

diff --git a/api/openshift/api.dc.yaml b/api/openshift/api.dc.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 kind: Template
 metadata:
   resourceVersion: ''

diff --git a/api/openshift/api.is.yaml b/api/openshift/api.is.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 parameters:
   - name: NAME
     value: biohubbc-api-setup

diff --git a/app/openshift/app.bc.yaml b/app/openshift/app.bc.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 kind: Template
 metadata:
   creationTimestamp: null
@@ -39,7 +39,7 @@ parameters:
     value: 14-ubi8
 objects:
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: ${SOURCE_IMAGE_NAME}
       creationTimestamp: null
@@ -60,7 +60,7 @@ objects:
           referencePolicy:
             type: Local
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: '${NAME}'
       creationTimestamp: null

diff --git a/app/openshift/app.dc.yaml b/app/openshift/app.dc.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 kind: Template
 metadata:
   resourceVersion: ''

diff --git a/app/src/components/dialog/SplashDialog.tsx b/app/src/components/dialog/SplashDialog.tsx
@@ -0,0 +1,103 @@
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Typography from '@material-ui/core/Typography';
+import { mdiBellAlertOutline } from '@mdi/js';
+import Icon from '@mdi/react';
+import React, { useEffect, useState } from 'react';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  dialogIconContainer: {
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(2),
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '128px',
+    height: '128px',
+    borderRadius: '64px',
+    background: 'rgba(9,14,211,0.05)'
+  },
+  dialogIcon: {
+    color: '#0972D3'
+  }
+}));
+
+export const SplashDialog = () => {
+  const classes = useStyles();
+  const [open, setOpen] = useState(window.sessionStorage.getItem('sims_splash_screen') !== 'dontshow');
+
+  useEffect(() => {
+    function showSplashScreen() {
+      if (window.sessionStorage.getItem('sims_splash_screen') === 'dontshow') {
+        setOpen(false);
+        return;
+      }
+
+      setOpen(true);
+    }
+
+    function handleStorageEvent(this: Window) {
+      showSplashScreen();
+    }
+
+    showSplashScreen();
+
+    window.addEventListener('storage', handleStorageEvent);
+
+    return () => window.removeEventListener('storage', handleStorageEvent);
+  }, []);
+
+  return (
+    <Dialog
+      fullWidth
+      open={open}
+      onClose={() => window.sessionStorage.setItem('sims_splash_screen', 'dontshow')}
+      data-testid="splash-dialog"
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description">
+      <Box className={classes.dialogIconContainer} display="flex" alignItems="center" justifyContent="center">
+        <Icon className={classes.dialogIcon} path={mdiBellAlertOutline} size={2}></Icon>
+      </Box>
+      <DialogTitle id="alert-dialog-title">Important Notice for Data Submissions</DialogTitle>
+      <DialogContent id="alert-dialog-description">
+        <Typography component="div" color="textSecondary">
+          <Box component="p" mt={0}>
+            This application will be unavailable from February 6th - 13th, 2023 to support an upcoming release.
+          </Box>
+          <p>
+            Moose data formatted using the Moose Aerial Stratified Random Block Composition Survey 2.5 template,{' '}
+            <strong>must be submitted before February 6th, 2023</strong>. This template will not be supported after this
+            date.
+          </p>
+          <p>
+            Future moose data submissions must use one of the new 2.0 templates provided in the resources section of
+            this application. The new templates will be available on February 14th, 2023.
+          </p>
+          <p>
+            Questions or comments? Contact us at <a href="mailto:[email protected]">[email protected]</a>.
+          </p>
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button data-testid="ok-button" onClick={() => CloseSplashDialog()} color="primary" variant="contained">
+          Ok
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export const CloseSplashDialog = () => {
+  window.sessionStorage.setItem('sims_splash_screen', 'dontshow');
+  window.dispatchEvent(new Event('storage'));
+};
+
+export const OpenSplashDialog = () => {
+  window.sessionStorage.setItem('sims_splash_screen', '');
+  window.dispatchEvent(new Event('storage'));
+};
diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx
@@ -1,4 +1,5 @@
 import AppBar from '@material-ui/core/AppBar';
+import Badge from '@material-ui/core/Badge';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
@@ -12,10 +13,11 @@ import { Theme } from '@material-ui/core/styles/createMuiTheme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import { mdiAccountCircle, mdiHelpCircle, mdiLoginVariant } from '@mdi/js';
+import { mdiAccountCircle, mdiBellOutline, mdiHelpCircleOutline, mdiLoginVariant } from '@mdi/js';
 import Icon from '@mdi/react';
 import headerImageLarge from 'assets/images/gov-bc-logo-horiz.png';
 import headerImageSmall from 'assets/images/gov-bc-logo-vert.png';
+import { OpenSplashDialog, SplashDialog } from 'components/dialog/SplashDialog';
 import { AuthGuard, SystemRoleGuard, UnAuthGuard } from 'components/security/Guards';
 import { SYSTEM_ROLE } from 'constants/roles';
 import { AuthStateContext } from 'contexts/authStateContext';
@@ -69,10 +71,10 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   userProfile: {
     color: theme.palette.primary.contrastText,
-    fontSize: '0.9375rem',
+    fontSize: '1rem',
     '& hr': {
-      backgroundColor: '#4b5e7e',
-      height: '1rem'
+      backgroundColor: '#ffffff',
+      height: '1.25rem'
     },
     '& a': {
       color: 'inherit',
@@ -107,6 +109,11 @@ const useStyles = makeStyles((theme: Theme) => ({
     '& p + p': {
       marginTop: theme.spacing(2)
     }
+  },
+  notificationBadge: {
+    '& .MuiBadge-dot': {
+      backgroundColor: '#fcba19'
+    }
   }
 }));
 
@@ -130,20 +137,35 @@ const Header: React.FC = () => {
 
     return (
       <Box display="flex" className={classes.userProfile} my="auto" alignItems="center">
-        <Icon path={mdiAccountCircle} size={1.12} />
-        <Box ml={1}>{loggedInUserDisplayName}</Box>
+        <IconButton
+          className={classes.govHeaderIconButton}
+          onClick={() => OpenSplashDialog()}
+          aria-label="Notifications">
+          <Badge
+            className={classes.notificationBadge}
+            variant="dot"
+            overlap="rectangle"
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right'
+            }}>
+            <Icon path={mdiBellOutline} size={1.12} />
+          </Badge>
+        </IconButton>
+        <IconButton aria-label="need help" className={classes.govHeaderIconButton} onClick={showSupportDialog}>
+          <Icon path={mdiHelpCircleOutline} size={1.12} />
+        </IconButton>
+        <Box className={classes.userProfile} display="flex" alignItems="center" ml={2}>
+          <Icon path={mdiAccountCircle} size={1.12} />
+          <Box ml={1}>{loggedInUserDisplayName}</Box>
+        </Box>
+
         <Box px={2}>
           <Divider orientation="vertical" />
         </Box>
         <Link to="/logout" data-testid="menu_log_out">
           Log Out
         </Link>
-        <Box pl={2}>
-          <Divider orientation="vertical" />
-        </Box>
-        <IconButton aria-label="need help" className={classes.govHeaderIconButton} onClick={showSupportDialog}>
-          <Icon path={mdiHelpCircle} size={1.12} />
-        </IconButton>
       </Box>
     );
   };
@@ -152,6 +174,9 @@ const Header: React.FC = () => {
   const PublicViewUser = () => {
     return (
       <Box display="flex" className={classes.userProfile} alignItems="center" my="auto">
+        <IconButton className={classes.govHeaderIconButton} onClick={showSupportDialog}>
+          <Icon path={mdiHelpCircleOutline} size={1.12} />
+        </IconButton>
         <Button
           onClick={() => keycloakWrapper?.keycloak?.login()}
           type="submit"
@@ -162,9 +187,6 @@ const Header: React.FC = () => {
           data-testid="login">
           Log In
         </Button>
-        <IconButton className={classes.govHeaderIconButton} onClick={showSupportDialog}>
-          <Icon path={mdiHelpCircle} size={1.12} />
-        </IconButton>
       </Box>
     );
   };
@@ -197,6 +219,7 @@ const Header: React.FC = () => {
 
   return (
     <>
+      <SplashDialog />
       <AppBar position="sticky" style={{ boxShadow: 'none' }}>
         <Toolbar className={classes.govHeaderToolbar}>
           <Box display="flex" justifyContent="space-between" width="100%">

diff --git a/database/openshift/db.bc.yaml b/database/openshift/db.bc.yaml
@@ -1,5 +1,5 @@
 kind: Template
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 metadata:
   name: postgresql
   creationTimestamp: null
@@ -16,7 +16,7 @@ parameters:
     required: true
 objects:
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: '${NAME}'
       labels:

diff --git a/database/openshift/db.dc.yaml b/database/openshift/db.dc.yaml
@@ -1,5 +1,5 @@
-apiVersion: v1
 kind: Template
+apiVersion: template.openshift.io/v1
 labels:
   template: postgresql-persistent-template
 metadata:
@@ -129,7 +129,7 @@ objects:
         requests:
           storage: '${VOLUME_CAPACITY}'
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: '${IMAGE_STREAM_NAME}'
       creationTimestamp:
@@ -140,7 +140,7 @@ objects:
       lookupPolicy:
         local: false
   - kind: DeploymentConfig
-    apiVersion: v1
+    apiVersion: apps.openshift.io/v1
     metadata:
       annotations:
         template.alpha.openshift.io/wait-for-ready: 'true'

diff --git a/database/openshift/db.is.yaml b/database/openshift/db.is.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 kind: Template
 parameters:
   - name: NAME

diff --git a/database/openshift/db.setup.bc.yaml b/database/openshift/db.setup.bc.yaml
@@ -1,4 +1,4 @@
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 kind: Template
 metadata:
   creationTimestamp: null
@@ -42,7 +42,7 @@ parameters:
     value: 14-ubi8
 objects:
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: ${SOURCE_IMAGE_NAME}
       creationTimestamp: null
@@ -63,7 +63,7 @@ objects:
           referencePolicy:
             type: Local
   - kind: ImageStream
-    apiVersion: v1
+    apiVersion: image.openshift.io/v1
     metadata:
       name: "${NAME}"
       creationTimestamp:

diff --git a/database/openshift/db.setup.dc.yaml b/database/openshift/db.setup.dc.yaml
@@ -1,5 +1,5 @@
 kind: Template
-apiVersion: v1
+apiVersion: template.openshift.io/v1
 metadata:
   name: migration
   creationTimestamp: null