UI updates (#929)

* Minor UI Updates/Fixes for Production Launch
bcgov · Jan 31, 2023 · a746dba · a746dba
1 parent 081d158
commit a746dba
Show file tree

Hide file tree

Showing 19 changed files with 172 additions and 38,365 deletions.
diff --git a/api/package-lock.json b/api/package-lock.json
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -32,7 +32,7 @@
     "@material-ui/pickers": "~3.2.10",
     "@material-ui/styles": "~4.10.0",
     "@material-ui/system": "4.11.3",
-    "@mdi/js": "~6.4.95",
+    "@mdi/js": "~6.9.96",
     "@mdi/react": "~1.4.0",
     "@react-keycloak/web": "~2.1.0",
     "@react-leaflet/core": "~1.0.2",

diff --git a/app/src/components/attachments/AttachmentsList.tsx b/app/src/components/attachments/AttachmentsList.tsx
@@ -13,6 +13,7 @@ import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
 import { mdiDotsVertical, mdiInformationOutline, mdiTrashCanOutline, mdiTrayArrowDown } from '@mdi/js';
 import Icon from '@mdi/react';
 import AttachmentTypeSelector from 'components/dialog/attachments/AttachmentTypeSelector';
@@ -240,8 +241,10 @@ const AttachmentsList: React.FC<IAttachmentsListProps> = (props) => {
                 })}
               {!props.attachmentsList.length && (
                 <TableRow>
-                  <TableCell colSpan={5} align="center">
-                    <strong>No Documents</strong>
+                  <TableCell colSpan={3} align="center">
+                    <Typography component="strong" color="textSecondary" variant="body2">
+                      No Documents
+                    </Typography>
                   </TableCell>
                 </TableRow>
               )}

diff --git a/app/src/components/boundary/InferredLocationDetails.tsx b/app/src/components/boundary/InferredLocationDetails.tsx
@@ -64,7 +64,7 @@ const InferredLocationDetails: React.FC<IInferredLocationDetailsProps> = (props)
           <Divider></Divider>
           <Box component="ul" className={classes.boundaryList}>
             {data.map((item: string, index: number) => (
-              <Typography key={index} variant="body1" component="li" color="textSecondary">
+              <Typography key={index} variant="body1" component="li">
                 {item}
                 {index < data.length - 1 && ', '}
               </Typography>

diff --git a/app/src/components/surveys/SurveysList.tsx b/app/src/components/surveys/SurveysList.tsx
@@ -7,6 +7,7 @@ import TableCell from '@material-ui/core/TableCell';
 import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
 import { SurveyViewObject } from 'interfaces/useSurveyApi.interface';
 import React, { useState } from 'react';
 
@@ -58,8 +59,10 @@ const SurveysList: React.FC<ISurveysListProps> = (props) => {
               ))}
             {!props.surveysList.length && (
               <TableRow>
-                <TableCell colSpan={4} align="center">
-                  <strong>No Surveys</strong>
+                <TableCell colSpan={3} align="center">
+                  <Typography component="strong" color="textSecondary" variant="body2">
+                    No Surveys
+                  </Typography>
                 </TableCell>
               </TableRow>
             )}

diff --git a/app/src/features/admin/users/UsersDetailHeader.test.tsx b/app/src/features/admin/users/UsersDetailHeader.test.tsx
@@ -42,31 +42,10 @@ describe('UsersDetailHeader', () => {
     );
 
     await waitFor(() => {
-      expect(getAllByTestId('user-detail-title').length).toEqual(1);
       expect(getAllByTestId('remove-user-button').length).toEqual(1);
     });
   });
 
-  it('breadcrumbs link routes user correctly', async () => {
-    history.push('/admin/users/1');
-
-    const { getAllByTestId, getByText } = render(
-      <Router history={history}>
-        <UsersDetailHeader userDetails={mockUser} />
-      </Router>
-    );
-
-    await waitFor(() => {
-      expect(getAllByTestId('user-detail-title').length).toEqual(1);
-    });
-
-    fireEvent.click(getByText('Manage Users'));
-
-    await waitFor(() => {
-      expect(history.location.pathname).toEqual('/admin/users');
-    });
-  });
-
   describe('Are you sure? Dialog', () => {
     it('Remove User button opens dialog', async () => {
       history.push('/admin/users/1');
@@ -79,10 +58,6 @@ describe('UsersDetailHeader', () => {
         </DialogContextProvider>
       );
 
-      await waitFor(() => {
-        expect(getAllByTestId('user-detail-title').length).toEqual(1);
-      });
-
       fireEvent.click(getByText('Remove User'));
 
       await waitFor(() => {
@@ -101,10 +76,6 @@ describe('UsersDetailHeader', () => {
         </DialogContextProvider>
       );
 
-      await waitFor(() => {
-        expect(getAllByTestId('user-detail-title').length).toEqual(1);
-      });
-
       fireEvent.click(getByText('Remove User'));
 
       await waitFor(() => {
@@ -133,10 +104,6 @@ describe('UsersDetailHeader', () => {
         </DialogContextProvider>
       );
 
-      await waitFor(() => {
-        expect(getAllByTestId('user-detail-title').length).toEqual(1);
-      });
-
       fireEvent.click(getByText('Remove User'));
 
       await waitFor(() => {

diff --git a/app/src/features/admin/users/UsersDetailHeader.tsx b/app/src/features/admin/users/UsersDetailHeader.tsx
@@ -1,13 +1,11 @@
 import Box from '@material-ui/core/Box';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
-import Link from '@material-ui/core/Link';
 import Paper from '@material-ui/core/Paper';
 import { Theme } from '@material-ui/core/styles/createMuiTheme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Typography from '@material-ui/core/Typography';
-import { mdiChevronRight, mdiTrashCanOutline } from '@mdi/js';
+import { mdiArrowLeft, mdiTrashCanOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import React, { useCallback, useContext } from 'react';
 import { useHistory } from 'react-router';
@@ -111,23 +109,21 @@ const UsersDetailHeader: React.FC<IUsersHeaderProps> = (props) => {
     <Paper square={true} elevation={0}>
       <Container maxWidth="xl">
         <Box py={4}>
-          <Box mb={2}>
-            <Breadcrumbs separator={<Icon path={mdiChevronRight} size={0.8} />}>
-              <Link color="primary" onClick={() => history.push('/admin/users')} aria-current="page">
-                Manage Users
-              </Link>
-              <Typography data-testid="user-detail-title" variant="body1" component="span">
-                {userDetails.user_identifier}
-              </Typography>
-            </Breadcrumbs>
+          <Box mt={-1} ml={-0.5} mb={1}>
+            <Button
+              color="primary"
+              startIcon={<Icon path={mdiArrowLeft} size={0.9} />}
+              onClick={() => history.push(`/admin/users`)}>
+              <strong>Back to Manage Users</strong>
+            </Button>
           </Box>
 
           <Box display="flex" justifyContent="space-between">
             <Box flex="1 1 auto" className={classes.projectTitleContainer}>
               <Typography variant="h1" className={classes.projectTitle}>
                 User: <span>{userDetails.user_identifier}</span>
               </Typography>
-              <Box mt={0.75} mb={0.5} display="flex" alignItems="center">
+              <Box mt={0.75} display="flex" alignItems="center">
                 <Typography
                   component="span"
                   variant="subtitle1"

diff --git a/app/src/features/admin/users/UsersDetailPage.test.tsx b/app/src/features/admin/users/UsersDetailPage.test.tsx
@@ -75,7 +75,6 @@ describe('UsersDetailPage', () => {
     );
 
     await waitFor(() => {
-      expect(getAllByTestId('user-detail-title').length).toEqual(1);
       expect(getAllByTestId('projects_header').length).toEqual(1);
     });
   });

diff --git a/app/src/features/projects/participants/ProjectParticipantsHeader.tsx b/app/src/features/projects/participants/ProjectParticipantsHeader.tsx
@@ -1,13 +1,11 @@
 import Box from '@material-ui/core/Box';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
-import Link from '@material-ui/core/Link';
 import Paper from '@material-ui/core/Paper';
 import { Theme } from '@material-ui/core/styles/createMuiTheme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Typography from '@material-ui/core/Typography';
-import { mdiChevronRight, mdiPlus } from '@mdi/js';
+import { mdiArrowLeft, mdiPlus } from '@mdi/js';
 import Icon from '@mdi/react';
 import EditDialog from 'components/dialog/EditDialog';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
@@ -107,21 +105,13 @@ const ProjectParticipantsHeader: React.FC<IProjectParticipantsHeaderProps> = (pr
     <Paper square elevation={0}>
       <Container maxWidth="xl">
         <Box py={4}>
-          <Box mb={2}>
-            <Breadcrumbs separator={<Icon path={mdiChevronRight} size={0.8} />}>
-              <Link color="primary" onClick={() => history.push('/admin/projects')} aria-current="page">
-                Projects
-              </Link>
-              <Link
-                color="primary"
-                onClick={() => history.push(`/admin/projects/${props.projectWithDetails.id}`)}
-                aria-current="page">
-                {props.projectWithDetails.project.project_name}
-              </Link>
-              <Typography variant="body1" component="span">
-                Manage Project Team
-              </Typography>
-            </Breadcrumbs>
+          <Box mt={-1} ml={-0.5} mb={1}>
+            <Button
+              color="primary"
+              startIcon={<Icon path={mdiArrowLeft} size={0.9} />}
+              onClick={() => history.push(`/admin/projects/${props.projectWithDetails.id}`)}>
+              <strong>Back to Project</strong>
+            </Button>
           </Box>
 
           <Box display="flex" justifyContent="space-between">

diff --git a/app/src/features/projects/view/ProjectHeader.tsx b/app/src/features/projects/view/ProjectHeader.tsx
@@ -1,9 +1,7 @@
 import { CircularProgress } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
 import Button from '@material-ui/core/Button';
 import Container from '@material-ui/core/Container';
-import Link from '@material-ui/core/Link';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -14,8 +12,8 @@ import Typography from '@material-ui/core/Typography';
 import {
   mdiAccountMultipleOutline,
   mdiCalendarRangeOutline,
+  mdiCalendarTodayOutline,
   mdiChevronDown,
-  mdiChevronRight,
   mdiCogOutline,
   mdiPencilOutline,
   mdiTrashCanOutline
@@ -206,35 +204,21 @@ const ProjectHeader: React.FC<IProjectHeaderProps> = (props) => {
     <Paper square={true} elevation={0}>
       <Container maxWidth="xl">
         <Box py={4}>
-          <Box mb={2}>
-            <Breadcrumbs separator={<Icon path={mdiChevronRight} size={0.8} />}>
-              <Link color="primary" onClick={() => history.push('/admin/projects')} aria-current="page">
-                <Typography variant="body1" component="span">
-                  Projects
-                </Typography>
-              </Link>
-              <Typography variant="body1" component="span">
-                {projectWithDetails.project.project_name}
-              </Typography>
-            </Breadcrumbs>
-          </Box>
-
           <Box display="flex" justifyContent="space-between">
             <Box className={classes.projectTitleContainer}>
               <Typography variant="h1" className={classes.projectTitle}>
                 Project: <span>{projectWithDetails.project.project_name}</span>
               </Typography>
               <Box mt={0.75} display="flex" alignItems="center">
-                {/* {getChipIcon(projectWithDetails.project.completion_status)} */}
                 <Typography
                   component="span"
                   variant="subtitle1"
                   color="textSecondary"
                   style={{ display: 'flex', alignItems: 'center' }}>
                   {projectWithDetails.project.end_date ? (
                     <>
-                      <Icon path={mdiCalendarRangeOutline} size={0.8} style={{ marginRight: '0.5rem' }} />
-                      <strong>Project Timeline:&nbsp;&nbsp;</strong>
+                      <Icon path={mdiCalendarRangeOutline} size={0.9} style={{ marginRight: '0.5rem' }} />
+                      Project Timeline:&nbsp;&nbsp;
                       {getFormattedDateRangeString(
                         DATE_FORMAT.ShortMediumDateFormat,
                         projectWithDetails.project.start_date,
@@ -243,7 +227,8 @@ const ProjectHeader: React.FC<IProjectHeaderProps> = (props) => {
                     </>
                   ) : (
                     <>
-                      <span>Start Date:</span>{' '}
+                      <Icon path={mdiCalendarTodayOutline} size={0.9} style={{ marginRight: '0.5rem' }} />
+                      Start Date:&nbsp;&nbsp;
                       {getFormattedDateRangeString(
                         DATE_FORMAT.ShortMediumDateFormat,
                         projectWithDetails.project.start_date

diff --git a/app/src/features/projects/view/components/FundingSource.tsx b/app/src/features/projects/view/components/FundingSource.tsx
@@ -78,7 +78,7 @@ const FundingSource: React.FC<IProjectFundingProps> = (props) => {
           ))}
 
         {!hasFundingSources && (
-          <ListItem>
+          <ListItem disableGutters>
             <Typography>No Funding Sources</Typography>
           </ListItem>
         )}

diff --git a/app/src/features/projects/view/components/LocationBoundary.tsx b/app/src/features/projects/view/components/LocationBoundary.tsx
@@ -251,7 +251,7 @@ const LocationBoundary: React.FC<ILocationBoundaryProps> = (props) => {
             Location Description
           </Typography>
           <Divider></Divider>
-          <Typography variant="body1" color="textSecondary">
+          <Typography variant="body1">
             {location.location_description ? <>{location.location_description}</> : 'No description provided'}
           </Typography>
           <Box mt={3}>

diff --git a/app/src/features/projects/view/components/Partnerships.tsx b/app/src/features/projects/view/components/Partnerships.tsx
@@ -10,14 +10,14 @@ const useStyles = makeStyles((theme: Theme) => ({
   projectPartners: {
     position: 'relative',
     display: 'inline-block',
-    '& + dd': {
-      paddingLeft: theme.spacing(1.25)
-    },
-    '& + dd::before': {
+    marginRight: theme.spacing(1.25),
+    '&::after': {
       content: `','`,
       position: 'absolute',
-      left: 0,
       top: 0
+    },
+    '&:last-child::after': {
+      display: 'none'
     }
   }
 }));

diff --git a/app/src/features/surveys/edit/EditSurveyPage.tsx b/app/src/features/surveys/edit/EditSurveyPage.tsx
@@ -1,12 +1,10 @@
-import { Breadcrumbs, Button, Link, Paper } from '@material-ui/core';
+import { Button, Paper } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Container from '@material-ui/core/Container';
 import { Theme } from '@material-ui/core/styles/createMuiTheme';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Typography from '@material-ui/core/Typography';
-import { mdiChevronRight } from '@mdi/js';
-import Icon from '@mdi/react';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import { EditSurveyI18N } from 'constants/i18n';
 import { DialogContext } from 'contexts/dialogContext';
@@ -173,11 +171,6 @@ const EditSurveyPage = () => {
     }
   };
 
-  const handleCancelToProject = () => {
-    dialogContext.setYesNoDialog(defaultCancelDialogProps);
-    history.push(`/admin/projects/${getProjectForViewDL.data?.id}`);
-  };
-
   /**
    * Intercepts all navigation attempts (when used with a `Prompt`).
    *
@@ -214,33 +207,10 @@ const EditSurveyPage = () => {
       <Paper square={true} elevation={0}>
         <Container maxWidth="xl">
           <Box py={4}>
-            <Box mb={2}>
-              <Breadcrumbs separator={<Icon path={mdiChevronRight} size={0.8} />}>
-                <Link color="primary" onClick={() => history.push('/admin/projects')} aria-current="page">
-                  <Typography variant="body1" component="span">
-                    Projects
-                  </Typography>
-                </Link>
-                <Link color="primary" onClick={handleCancelToProject} aria-current="page">
-                  <Typography variant="body1" component="span">
-                    {getProjectForViewDL.data.project.project_name}
-                  </Typography>
-                </Link>
-                <Link color="primary" onClick={handleCancel} aria-current="page">
-                  <Typography variant="body1" component="span">
-                    {editSurveyDL.data?.surveyData.survey_details?.survey_name}
-                  </Typography>
-                </Link>
-                <Typography variant="body1" component="span">
-                  Edit Survey
-                </Typography>
-              </Breadcrumbs>
-            </Box>
-
             <Box display="flex" justifyContent="space-between">
               <Box className={classes.pageTitleContainer}>
                 <Typography variant="h1" className={classes.pageTitle}>
-                  Edit Survey
+                  Edit Survey Details
                 </Typography>
               </Box>
               <Box flex="0 0 auto" className={classes.pageTitleActions}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,6 @@ describe('UsersDetailPage', () => { @@
         );
         await waitFor(() => {
-          expect(getAllByTestId('user-detail-title').length).toEqual(1);
           expect(getAllByTestId('projects_header').length).toEqual(1);
         });
       });
@@ Expand Down @@