Biohub UI Updates

app/src/AppRouter.tsx

@@ -6,12 +6,9 @@ import NotFoundPage from 'features/404/NotFoundPage';
 import AdminUsersRouter from 'features/admin/AdminUsersRouter';
 import AdminDashboardRouter from 'features/admin/dashboard/AdminDashboardRouter';
 import DatasetsRouter from 'features/datasets/DatasetsRouter';
-import HomeRouter from 'features/home/HomeRouter';
-import MapRouter from 'features/map/MapRouter';
 import SearchRouter from 'features/search/SearchRouter';
 import SubmissionsRouter from 'features/submissions/SubmissionsRouter';
 import BaseLayout from 'layouts/BaseLayout';
-import ContentLayout from 'layouts/ContentLayout';
 import LoginPage from 'pages/authentication/LoginPage';
 import LogOutPage from 'pages/authentication/LogOutPage';
 import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
@@ -27,7 +24,7 @@ const AppRouter: React.FC<React.PropsWithChildren> = () => {
 
       <Route exact path="/">
         <BaseLayout>
-          <HomeRouter />
+          <SubmissionsRouter />
         </BaseLayout>
       </Route>
 
@@ -43,18 +40,6 @@ const AppRouter: React.FC<React.PropsWithChildren> = () => {
         </BaseLayout>
       </Route>
 
-      <Route path="/submissions">
-        <BaseLayout>
-          <SubmissionsRouter />
-        </BaseLayout>
-      </Route>
-
-      <Route path="/map">
-        <ContentLayout>
-          <MapRouter />
-        </ContentLayout>
-      </Route>
-
       <RouteWithTitle path="/page-not-found" title={getTitle('Page Not Found')}>
         <BaseLayout>
           <NotFoundPage />

app/src/components/dialog/EditDialog.tsx

@@ -75,7 +75,7 @@ export interface IEditDialogProps<T> {
 export const EditDialog = <T extends FormikValues>(props: React.PropsWithChildren<IEditDialogProps<T>>) => {
   const theme = useTheme();
 
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('lg'));
 
   if (!props.open) {
     return <></>;
@@ -93,8 +93,8 @@ export const EditDialog = <T extends FormikValues>(props: React.PropsWithChildre
       }}>
       {(formikProps) => (
         <Dialog
-          fullScreen={fullScreen}
           fullWidth
+          fullScreen={fullScreen}
           maxWidth="md"
           open={props.open}
           aria-labelledby="edit-dialog-title"

app/src/components/dialog/YesNoDialog.tsx

@@ -4,6 +4,8 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
+import useTheme from '@mui/material/styles/useTheme';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { ReactNode } from 'react';
 
 export interface IYesNoDialogProps {
@@ -95,12 +97,18 @@ export interface IYesNoDialogProps {
  * @return {*}
  */
 const YesNoDialog: React.FC<React.PropsWithChildren<IYesNoDialogProps>> = (props) => {
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
   if (!props.open) {
     return <></>;
   }
 
   return (
     <Dialog
+      fullWidth
+      fullScreen={fullScreen}
+      maxWidth="md"
       open={props.open}
       onClose={props.onClose}
       data-testid="yes-no-dialog"

app/src/components/layout/header/BaseHeader.tsx

@@ -27,8 +27,8 @@ const BaseHeader = (props: IBaseHeader) => {
       sx={{
         position: 'sticky',
         top: 0,
-        zIndex: 1002,
-        py: 3,
+        zIndex: 1101,
+        py: 4,
         borderBottomStyle: 'solid',
         borderBottomWidth: '1px',
         borderBottomColor: grey[300]
@@ -42,9 +42,9 @@ const BaseHeader = (props: IBaseHeader) => {
           gap={3}>
           <Box>
             <Typography
-              component="h1"
-              variant="h2"
+              variant="h1"
               sx={{
+                mt: '-4px',
                 ml: '-2px',
                 display: '-webkit-box',
                 WebkitLineClamp: '2',

app/src/components/layout/header/Header.test.tsx

@@ -26,7 +26,6 @@ describe('Header', () => {
 
     expect(getByText('Home')).toBeVisible();
     expect(getByText('Submissions')).toBeVisible();
-    expect(getByText('Map Search')).toBeVisible();
     expect(getByText('Manage Users')).toBeVisible();
   });
 

app/src/components/layout/header/Header.tsx

@@ -102,7 +102,7 @@ const Header: React.FC<React.PropsWithChildren> = () => {
 
   return (
     <>
-      <AppBar position="sticky" elevation={0}>
+      <AppBar elevation={0} position="relative">
         <Box className={classes.govHeader}>
           <Toolbar className={classes.govHeaderToolbar}>
             <Box display="flex" justifyContent="space-between" alignItems="center" width="100%">
@@ -136,15 +136,9 @@ const Header: React.FC<React.PropsWithChildren> = () => {
                   </Link>
                   <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN]}>
                     <Link to="/admin/dashboard" id="menu_admin_dashboard">
-                      Dashboard
+                      Submissions
                     </Link>
                   </SystemRoleGuard>
-                  <Link to="/submissions" id="submissions">
-                    Submissions
-                  </Link>
-                  <Link to="/map" id="menu_map">
-                    Map Search
-                  </Link>
                   <SystemRoleGuard validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN]}>
                     <Link to="/admin/users" id="menu_admin_users">
                       Manage Users

app/src/components/security/ManageSecurity.tsx

@@ -1,4 +1,4 @@
-import { mdiChevronDown, mdiChevronUp, mdiCog, mdiLock, mdiLockOpenVariantOutline } from '@mdi/js';
+import { mdiChevronDown, mdiChevronUp, mdiLock, mdiLockOpenOutline, mdiSecurity } from '@mdi/js';
 import Icon from '@mdi/react';
 import { Button, Menu, MenuItem } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -42,20 +42,31 @@ const ManageSecurity = (props: IManageSecurityProps) => {
         data-testid="manage-security"
         variant="outlined"
         onClick={handleClick}
-        startIcon={<Icon path={mdiCog} size={1} />}
-        endIcon={open ? <Icon path={mdiChevronUp} size={1} /> : <Icon path={mdiChevronDown} size={1} />}>
+        startIcon={<Icon path={mdiSecurity} size={0.75} />}
+        endIcon={open ? <Icon path={mdiChevronUp} size={0.75} /> : <Icon path={mdiChevronDown} size={0.75} />}>
         Manage Security
       </Button>
-      <Menu open={open} anchorEl={anchorEl} onClose={handleClose}>
+      <Menu
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}>
         <MenuItem onClick={() => setIsSecuritiesDialogOpen(true)}>
           <ListItemIcon>
-            <Icon path={mdiLock} size={1} />
+            <Icon path={mdiLock} size={0.75} />
           </ListItemIcon>
           <ListItemText>Secure Records</ListItemText>
         </MenuItem>
         <MenuItem onClick={() => setIsUnsecuredDialogOpen(true)}>
           <ListItemIcon>
-            <Icon path={mdiLockOpenVariantOutline} size={1} />
+            <Icon path={mdiLockOpenOutline} size={0.75} />
           </ListItemIcon>
           <ListItemText>Unsecure Records</ListItemText>
         </MenuItem>

app/src/components/security/SecuritiesDialog.tsx

@@ -30,7 +30,7 @@
 
   useEffect(() => {
     submissionContext?.submissionFeatureRulesDataLoader.refresh(props.features);
   }, [props.isOpen]);
 
   const handleSubmit = async (rules: ISecurityRule[]) => {
     try {
@@ -62,20 +62,18 @@
   };
 
   return (
-    <>
-      <EditDialog
-        dialogTitle="Manage Security Reasons"
-        open={props.isOpen}
-        dialogSaveButtonLabel="APPLY"
-        onCancel={props.onClose}
-        onSave={(values: ISecurityRuleFormProps) => handleSubmit(values.rules)}
-        component={{
-          element: <SecurityRuleForm />,
-          initialValues: { rules: [] },
-          validationSchema: SecurityRuleYupSchema
-        }}
-      />
-    </>
+    <EditDialog
+      dialogTitle="Secure Records"
+      open={props.isOpen}
+      dialogSaveButtonLabel="APPLY"
+      onCancel={props.onClose}
+      onSave={(values: ISecurityRuleFormProps) => handleSubmit(values.rules)}
+      component={{
+        element: <SecurityRuleForm />,
+        initialValues: { rules: [] },
+        validationSchema: SecurityRuleYupSchema
+      }}
+    />
   );
 };
 

app/src/components/security/SecurityRuleActionCard.tsx

@@ -1,6 +1,7 @@
 import { mdiClose } from '@mdi/js';
 import Icon from '@mdi/react';
-import { IconButton, Paper } from '@mui/material';
+import { Card, IconButton } from '@mui/material';
+import grey from '@mui/material/colors/grey';
 import SecurityRuleCard from './SecurityRuleCard';
 
 interface ISecurityRuleActionCardProps {
@@ -12,20 +13,22 @@
 
 const SecurityRuleActionCard = (props: ISecurityRuleActionCardProps) => {
   return (
-    <Paper
+    <Card
       variant="outlined"
       sx={{
         display: 'flex',
+        px: 2,
+        py: 1.5,
         flexDirection: 'row',
+        alignItems: 'center',
         justifyContent: 'space-between',
-        p: 1,
-        mb: 1
+        background: grey[100]
       }}>
       <SecurityRuleCard key={props.security_rule_id} title={props.name} subtitle={props.description} />
-      <IconButton onClick={() => props.remove(props.security_rule_id)}>
+      <IconButton onClick={() => props.remove(props.security_rule_id)} aria-label="Remove security rule">
         <Icon path={mdiClose} size={1} />
       </IconButton>
-    </Paper>
+    </Card>
   );
 };
 export default SecurityRuleActionCard;

app/src/components/security/SecurityRuleCard.tsx

@@ -1,23 +1,37 @@
-import { Box, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 
 interface ISecurityRuleCardProps {
   title: string;
   subtitle: string;
 }
 const SecurityRuleCard = (props: ISecurityRuleCardProps) => {
   return (
-    <Box>
-      <Box>
-        <Typography variant="subtitle1" fontWeight="bold">
-          {props.title}
-        </Typography>
-      </Box>
-      <Box my={0.25}>
-        <Typography variant="subtitle2" color="textSecondary">
-          {props.subtitle}
-        </Typography>
-      </Box>
-    </Box>
+    <Stack gap={0.5}>
+      <Typography
+        variant="body1"
+        fontWeight="bold"
+        sx={{
+          display: '-webkit-box',
+          WebkitLineClamp: '2',
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }}>
+        {props.title}
+      </Typography>
+      <Typography
+        variant="body2"
+        color="textSecondary"
+        sx={{
+          display: '-webkit-box',
+          WebkitLineClamp: '2',
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }}>
+        {props.subtitle}
+      </Typography>
+    </Stack>
   );
 };