Bhbc 1470

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": "~5.9.55",
+    "@mdi/js": "~6.4.95",
     "@mdi/react": "~1.4.0",
     "@react-keycloak/web": "~2.1.0",
     "@react-leaflet/core": "~1.0.2",

app/src/components/attachments/AttachmentsList.tsx

@@ -4,6 +4,7 @@ import IconButton from '@material-ui/core/IconButton';
 import Link from '@material-ui/core/Link';
 import Paper from '@material-ui/core/Paper';
 import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -12,7 +13,14 @@ import TableContainer from '@material-ui/core/TableContainer';
 import TableHead from '@material-ui/core/TableHead';
 import TablePagination from '@material-ui/core/TablePagination';
 import TableRow from '@material-ui/core/TableRow';
-import { mdiLockOpenVariantOutline, mdiLockOutline, mdiDotsVertical } from '@mdi/js';
+import {
+  mdiDownload,
+  mdiLockOpenVariantOutline,
+  mdiLockOutline,
+  mdiDotsVertical,
+  mdiInformationOutline,
+  mdiTrashCanOutline
+} from '@mdi/js';
 import Icon from '@mdi/react';
 import { IErrorDialogProps } from 'components/dialog/ErrorDialog';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
@@ -461,7 +469,7 @@ const AttachmentItemMenuButton: React.FC<IAttachmentItemMenuButtonProps> = (prop
             className={classes.uploadMenu}
             getContentAnchorEl={null}
             anchorOrigin={{
-              vertical: 'bottom',
+              vertical: 'top',
               horizontal: 'right'
             }}
             transformOrigin={{
@@ -481,26 +489,35 @@ const AttachmentItemMenuButton: React.FC<IAttachmentItemMenuButtonProps> = (prop
                 setAnchorEl(null);
               }}
               data-testid="attachment-action-menu-download">
+              <ListItemIcon>
+                <Icon path={mdiDownload} size={1} />
+              </ListItemIcon>
               Download File
             </MenuItem>
-            <MenuItem
-              onClick={() => {
-                props.handleDeleteFileClick(props.attachment);
-                setAnchorEl(null);
-              }}
-              data-testid="attachment-action-menu-delete">
-              Delete File
-            </MenuItem>
             {props.attachment.fileType === AttachmentType.REPORT && (
               <MenuItem
                 onClick={() => {
                   props.handleViewDetailsClick(props.attachment);
                   setAnchorEl(null);
                 }}
                 data-testid="attachment-action-menu-details">
+                <ListItemIcon>
+                  <Icon path={mdiInformationOutline} size={1} />
+                </ListItemIcon>
                 View Details
               </MenuItem>
             )}
+            <MenuItem
+              onClick={() => {
+                props.handleDeleteFileClick(props.attachment);
+                setAnchorEl(null);
+              }}
+              data-testid="attachment-action-menu-delete">
+              <ListItemIcon>
+                <Icon path={mdiTrashCanOutline} size={1} />
+              </ListItemIcon>
+              Delete File
+            </MenuItem>
           </Menu>
         </Box>
       </Box>

app/src/components/attachments/DropZone.tsx

@@ -2,7 +2,7 @@ import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
 import makeStyles from '@material-ui/core/styles/makeStyles';
-import { mdiUpload } from '@mdi/js';
+import { mdiTrayArrowUp } from '@mdi/js';
 import Icon from '@mdi/react';
 import React, { useContext } from 'react';
 import Dropzone, { FileRejection } from 'react-dropzone';
@@ -93,7 +93,7 @@ export const DropZone: React.FC<IDropZoneProps & IDropZoneConfigProps> = (props)
           <Box {...getRootProps()}>
             <input {...getInputProps()} data-testid="drop-zone-input" />
             <Box p={2} display="flex" flexDirection="column" alignItems="center">
-              <Icon className={classes.dropZoneIcon} path={mdiUpload} size={1.5} />
+              <Icon className={classes.dropZoneIcon} path={mdiTrayArrowUp} size={1.5} />
               <Box mt={0.5} className={classes.dropZoneTitle}>
                 Drag your {(multiple && 'files') || 'file'} here, or <Link underline="always">Browse Files</Link>
               </Box>

app/src/components/attachments/EditReportMetaForm.tsx

@@ -38,7 +38,7 @@ export const EditReportMetaFormInitialValues: IEditReportMetaForm = {
 
 export const EditReportMetaFormYupSchema = yup.object().shape({
   title: yup.string().max(300, 'Cannot exceed 300 characters').required('A report title is required'),
-  description: yup.string().max(300, 'Cannot exceed 50 characters').required('A report summary is required'),
+  description: yup.string().max(3000, 'Cannot exceed 3000 characters').required('A report summary is required'),
   year_published: yup
     .number()
     .min(1900, 'year must be between 1900 and 2199')
@@ -70,7 +70,7 @@ const EditReportMetaForm: React.FC = () => {
         <Typography component="legend" variant="body1" id="report_details">
           Report Details
         </Typography>
-        <Grid container spacing={2}>
+        <Grid container spacing={3}>
           <Grid item xs={12} md={8}>
             <CustomTextField
               name="title"
@@ -109,7 +109,7 @@ const EditReportMetaForm: React.FC = () => {
           name="authors"
           render={(arrayHelpers) => (
             <Box>
-              <Grid container direction="row" spacing={2}>
+              <Grid container direction="row" spacing={3}>
                 {values.authors?.map((author, index) => {
                   const authorFirstNameMeta = getFieldMeta(`authors.[${index}].first_name`);
                   const authorLastNameMeta = getFieldMeta(`authors.[${index}].last_name`);

app/src/components/attachments/ReportMetaForm.tsx

@@ -38,7 +38,7 @@ export const ReportMetaFormInitialValues: IReportMetaForm = {
 
 export const ReportMetaFormYupSchema = yup.object().shape({
   title: yup.string().max(300, 'Cannot exceed 300 characters').required('A report title is required'),
-  description: yup.string().max(300, 'Cannot exceed 50 characters').required('A report summary is required'),
+  description: yup.string().max(3000, 'Cannot exceed 3000 characters').required('A report summary is required'),
   year_published: yup
     .number()
     .min(1900, 'year must be between 1900 and 2199')
@@ -71,7 +71,7 @@ const ReportMetaForm: React.FC = () => {
         <Typography component="legend" variant="body1" id="report_details">
           Report Details
         </Typography>
-        <Grid container spacing={2}>
+        <Grid container spacing={3}>
           <Grid item xs={12} md={8}>
             <CustomTextField
               name="title"
@@ -110,7 +110,7 @@ const ReportMetaForm: React.FC = () => {
           name="authors"
           render={(arrayHelpers) => (
             <Box>
-              <Grid container direction="row" spacing={2}>
+              <Grid container direction="row" spacing={3}>
                 {values.authors?.map((author, index) => {
                   const authorFirstNameMeta = getFieldMeta(`authors.[${index}].first_name`);
                   const authorLastNameMeta = getFieldMeta(`authors.[${index}].last_name`);

app/src/components/attachments/__snapshots__/DropZone.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`DropZone matches the snapshot 1`] = `
           viewBox="0 0 24 24"
         >
           <path
-            d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"
+            d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z"
             style="fill: currentColor;"
           />
         </svg>

app/src/components/boundary/MapBoundary.tsx

@@ -7,7 +7,7 @@ import React, { useState, useEffect } from 'react';
 import Button from '@material-ui/core/Button';
 import ComponentDialog from 'components/dialog/ComponentDialog';
 import FileUpload from 'components/attachments/FileUpload';
-import { mdiUploadOutline } from '@mdi/js';
+import { mdiTrayArrowUp } from '@mdi/js';
 import Icon from '@mdi/react';
 import MapContainer from 'components/map/MapContainer';
 import { Feature } from 'geojson';
@@ -139,7 +139,7 @@ const MapBoundary: React.FC<IMapBoundaryProps> = (props) => {
             color="primary"
             data-testid="boundary_file-upload"
             variant="outlined"
-            startIcon={<Icon path={mdiUploadOutline} size={1} />}
+            startIcon={<Icon path={mdiTrayArrowUp} size={1} />}
             onClick={() => setOpenUploadBoundary(true)}>
             Upload Boundary
           </Button>

app/src/components/dialog/EditFileWithMetaDialog.tsx

@@ -125,12 +125,7 @@ const EditFileWithMetaDialog: React.FC<IEditFileWithMetaDialogProps> = (props) =
             </DialogContent>
             <DialogActions>
               <Box className={classes.wrapper}>
-                <Button
-                  onClick={formikProps.submitForm}
-                  color="primary"
-                  variant="contained"
-                  disabled={isSaving}
-                  autoFocus>
+                <Button onClick={formikProps.submitForm} color="primary" variant="contained" disabled={isSaving}>
                   <strong>Save</strong>
                 </Button>
                 {isSaving && <CircularProgress size={24} className={classes.buttonProgress} />}

app/src/components/dialog/FileUploadWithMetaDialog.tsx

@@ -136,12 +136,7 @@ const FileUploadWithMetaDialog: React.FC<IFileUploadWithMetaDialogProps> = (prop
             <DialogActions>
               {props.attachmentType === AttachmentType.REPORT && (
                 <Box className={classes.wrapper}>
-                  <Button
-                    onClick={formikProps.submitForm}
-                    color="primary"
-                    variant="contained"
-                    disabled={isFinishing}
-                    autoFocus>
+                  <Button onClick={formikProps.submitForm} color="primary" variant="contained" disabled={isFinishing}>
                     <strong>Finish</strong>
                   </Button>
                   {isFinishing && <CircularProgress size={24} className={classes.buttonProgress} />}

app/src/components/dialog/ViewFileWithMetaDialog.tsx

@@ -5,7 +5,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { mdiDownload, mdiPencilOutline } from '@mdi/js';
+import { mdiTrayArrowDown, mdiPencilOutline } from '@mdi/js';
 import Icon from '@mdi/react';
 import { DATE_FORMAT } from 'constants/dateTimeFormats';
 import { IGetReportMetaData } from 'interfaces/useProjectApi.interface';
@@ -39,73 +39,70 @@ const ViewFileWithMetaDialog: React.FC<IViewFileWithMetaDialogProps> = (props) =
   return (
     <>
       <Dialog open={props.open} onClose={props.onClose} {...props.dialogProps} data-testid="view-meta-dialog">
-        <DialogContent>
+        <Box p={3} display="flex" flexDirection="row" alignItems="flex-start" justifyContent="space-between">
           <Box>
-            <Box display="flex" alignItems="center" justifyContent="space-between" mb={2} height="2rem">
-              <Typography data-testid="view-meta-dialog-title" variant="h3">
-                {reportMetaData?.title}
+            <Typography data-testid="view-meta-dialog-title" variant="h3">
+              {reportMetaData?.title}
+            </Typography>
+            <Box mt={0.5}>
+              <Typography component="span" variant="subtitle2" color="textSecondary">
+                Last modified:{' '}
+                {getFormattedDateRangeString(DATE_FORMAT.ShortMediumDateFormat, reportMetaData?.last_modified || '')}
               </Typography>
-              {showEditButton && (
-                <Button
-                  variant="text"
-                  color="primary"
-                  className="sectionHeaderButton"
-                  onClick={props.onEdit}
-                  title="Edit Report"
-                  aria-label="Edit Report"
-                  startIcon={<Icon path={mdiPencilOutline} size={0.875} />}>
-                  Edit
-                </Button>
-              )}
             </Box>
-            <dl>
-              <Grid container spacing={2}>
-                <Grid item xs={12} sm={12} md={12}>
-                  <Typography component="dt" variant="subtitle2" color="textSecondary">
-                    Last modified{' '}
-                    {getFormattedDateRangeString(
-                      DATE_FORMAT.ShortMediumDateFormat,
-                      reportMetaData?.last_modified || ''
-                    )}
-                  </Typography>
-                </Grid>
-                <Grid item xs={12} sm={12} md={12}>
-                  <Typography component="dd" variant="body1">
-                    {reportMetaData?.description}
-                  </Typography>
-                </Grid>
-                <Grid item xs={12} sm={6} md={6}>
-                  <Typography component="dt" variant="subtitle2" color="textSecondary">
-                    Year Published
-                  </Typography>
-                  <Typography component="dd" variant="body1">
-                    {reportMetaData?.year_published}
-                  </Typography>
-                </Grid>
-                <Grid item xs={12} sm={6} md={6}>
-                  <Typography component="dt" variant="subtitle2" color="textSecondary">
-                    Authors
-                  </Typography>
-                  <Typography component="dd" variant="body1">
-                    {reportMetaData?.authors
-                      ?.map((author) => [author.first_name, author.last_name].join(' '))
-                      .join(', ')}
-                  </Typography>
-                </Grid>
+          </Box>
+          {showEditButton && (
+            <Button
+              variant="text"
+              color="primary"
+              className="sectionHeaderButton"
+              onClick={props.onEdit}
+              title="Edit Report"
+              aria-label="Edit Report"
+              startIcon={<Icon path={mdiPencilOutline} size={0.875} />}>
+              Edit
+            </Button>
+          )}
+        </Box>
+        <DialogContent>
+          <Box component="dl" mt={0} mb={2}>
+            <Grid container>
+              <Grid item xs={12}>
+                <Typography component="dt" variant="body2" color="textSecondary">
+                  Summary
+                </Typography>
+                <Box mt={0.5} mb={3} component="dd">
+                  {reportMetaData?.description}
+                </Box>
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <Typography component="dt" variant="body2" color="textSecondary">
+                  Year Published
+                </Typography>
+                <Box mt={0.5} component="dd">
+                  {reportMetaData?.year_published}
+                </Box>
+              </Grid>
+              <Grid item xs={12} sm={6}>
+                <Typography component="dt" variant="body2" color="textSecondary">
+                  Authors
+                </Typography>
+                <Box mt={0.5} component="dd">
+                  {reportMetaData?.authors?.map((author) => [author.first_name, author.last_name].join(' ')).join(', ')}
+                </Box>
               </Grid>
-            </dl>
+            </Grid>
           </Box>
         </DialogContent>
         <DialogActions>
           <Button
             onClick={props.onDownload}
             color="primary"
             variant="contained"
-            autoFocus
-            startIcon={<Icon path={mdiDownload} size={0.875} />}>
+            startIcon={<Icon path={mdiTrayArrowDown} size={0.875} />}>
             Download Report ({props.attachmentSize})
           </Button>
-          <Button onClick={props.onClose} color="primary" variant="contained" autoFocus>
+          <Button onClick={props.onClose} color="primary" variant="outlined">
             Close
           </Button>
         </DialogActions>

app/src/features/projects/components/__snapshots__/ProjectLocationForm.test.tsx.snap

@@ -92,7 +92,7 @@ exports[`ProjectLocationForm renders correctly with default empty values 1`] = `
                   viewBox="0 0 24 24"
                 >
                   <path
-                    d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z"
+                    d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z"
                     style="fill: currentColor;"
                   />
                 </svg>
@@ -541,7 +541,7 @@ exports[`ProjectLocationForm renders correctly with errors on fields 1`] = `
                   viewBox="0 0 24 24"
                 >
                   <path
-                    d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z"
+                    d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z"
                     style="fill: currentColor;"
                   />
                 </svg>
@@ -1017,7 +1017,7 @@ exports[`ProjectLocationForm renders correctly with existing location values 1`]
                   viewBox="0 0 24 24"
                 >
                   <path
-                    d="M9,10V16H15V10H19L12,3L5,10H9M12,5.8L14.2,8H13V14H11V8H9.8L12,5.8M19,18H5V20H19V18Z"
+                    d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z"
                     style="fill: currentColor;"
                   />
                 </svg>