Merge pull request #2555 from bcgov/feature/DESENG-655-add-existing-f…

…ields-to-engagement-wizard [To Main] DESENG-655: Add existing engagement fields to engagement wizard
bcgov · Jul 16, 2024 · a5d65be · a5d65be
2 parents ef547b9 + cd93814
commit a5d65be
Show file tree

Hide file tree

Showing 26 changed files with 17,308 additions and 9,864 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,3 +1,15 @@
+## July 11, 2024
+
+- **Feature** Add the existing engagement form fields to the engagement authoring wizard [🎟️ DESENG-655](https://citz-gdx.atlassian.net/browse/DESENG-655)
+  - Added fields for the existing data (engagement title, dates, internal/external, public slug)
+  - Create button is now enabled when all required fields are filled
+  - Users are redirected to the old form after creating a new engagement
+    - (clicking "edit" on an existing engagement also brings you to the old form, as usual)
+- Some extracurricular work:
+  - Created a reusable component to warn users when they're about to navigate away from the page while editing content
+  - Adjusted theming throughout the app to reduce the number of places where colors are defined
+  - Updated to the latest version of @mui/x-date-pickers and adjust existing components where necessary
+
 ## July 10, 2024
 
 - **Feature** Add a skeleton page for the new engagement authoring wizard [🎟️ DESENG-654](https://citz-gdx.atlassian.net/browse/DESENG-654)

diff --git a/met-web/package-lock.json b/met-web/package-lock.json
diff --git a/met-web/package.json b/met-web/package.json
@@ -10,7 +10,7 @@
         "@emotion/styled": "^11.8.1",
         "@formio/react": "^5.3.0",
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
-        "@fortawesome/free-brands-svg-icons": "^6.1.1",
+        "@fortawesome/free-brands-svg-icons": "^6.5.2",
         "@fortawesome/free-regular-svg-icons": "^6.1.1",
         "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@fortawesome/pro-light-svg-icons": "^6.5.2",
@@ -22,7 +22,7 @@
         "@mui/icons-material": "^5.8.3",
         "@mui/lab": "^5.0.0-alpha.91",
         "@mui/material": "^5.6.1",
-        "@mui/x-date-pickers": "^5.0.5",
+        "@mui/x-date-pickers": "^7.9.0",
         "@reduxjs/toolkit": "^1.8.1",
         "@testing-library/react": "^13.0.1",
         "@testing-library/user-event": "^13.5.0",

diff --git a/met-web/src/App.scss b/met-web/src/App.scss
@@ -24,26 +24,6 @@ code {
   }  
 }
 
-/** Overriding Select Menu Dropdown color **/
-// Background white and on hover/focus, light grey
-.MuiMenuItem-root {
-  background-color: var(--bcds-surface-background-white);
-
-  &.Mui-selected {
-    background-color: var(--bcds-surface-brand-blue-20);
-    &:hover, &.Mui-focusVisible {
-      background-color: var(--bcds-surface-secondary-hover);
-    }
-  }
-
-  &.Mui-disabled, &.Mui-disabled:hover {
-    background-color: var(--bcds-surface-background-white);
-  }
-  // the focusVisible class is added when the item is focused by keyboard
-  &.Mui-focusVisible, &:hover {
-    background-color: var(--bcds-surface-secondary-hover);
-  }
-}
 
 /** Overriding Met table styles **/
 // set background color of tr to white

diff --git a/met-web/src/components/appLayouts/AuthenticatedLayout.tsx b/met-web/src/components/appLayouts/AuthenticatedLayout.tsx
@@ -11,6 +11,8 @@ import { ZIndex } from 'styles/Theme';
 import DocumentTitle from 'DocumentTitle';
 import ScrollToTop from 'components/scrollToTop';
 import FormioListener from 'components/FormioListener';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 export const AuthenticatedLayout = ({ drawerWidth = 280 }: { drawerWidth?: number }) => {
     return (
@@ -23,7 +25,14 @@ export const AuthenticatedLayout = ({ drawerWidth = 280 }: { drawerWidth?: numbe
                 <Box component="main" sx={{ flexGrow: 1, marginTop: '80px' }}>
                     <ScrollToTop />
                     <FormioListener />
-                    <Outlet />
+                    <LocalizationProvider
+                        dateFormats={{
+                            keyboardDate: 'YYYY-MM-DD',
+                        }}
+                        dateAdapter={AdapterDayjs}
+                    >
+                        <Outlet />
+                    </LocalizationProvider>
                     <FeedbackModal />
                 </Box>
             </Box>

diff --git a/met-web/src/components/common/Input/Button.tsx b/met-web/src/components/common/Input/Button.tsx
@@ -181,9 +181,10 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
                 '&:focus-visible': {
                     backgroundColor: darkBackgroundColor,
                     outline: `2px solid ${colors.focus.regular.outer}`,
+                    outlineOffset: '0px',
                     boxShadow: elevations.hover,
                     color: darkTextColor,
-                    border: `none`,
+                    border: `1px solid transparent`,
                 },
                 '&:disabled': {
                     backgroundColor: 'white',

diff --git a/met-web/src/components/common/Layout/index.tsx b/met-web/src/components/common/Layout/index.tsx
@@ -6,10 +6,12 @@ import { Outlet } from 'react-router-dom';
 export const ResponsiveContainer: React.FC<BoxProps> = (props: BoxProps) => {
     return (
         <Box
+            {...props}
             sx={{
+                marginTop: '1em',
                 padding: { xs: '1.5em 1em', md: '1.5em 1.5em', lg: '1.5em 2em' },
+                ...props.sx,
             }}
-            {...props}
         >
             {props.children}
         </Box>

diff --git a/met-web/src/components/common/Navigation/Link.tsx b/met-web/src/components/common/Navigation/Link.tsx
@@ -43,8 +43,6 @@ export const Link: React.FC<FocusableNavLinkProps> = ({
                     outline: `2px solid ${colors.focus.regular.outer}`,
                     outlineOffset: '2px',
                     boxShadow: '0px 0px 0px 2px white',
-                    padding: '4px',
-                    margin: '-4px',
                 },
                 outline: 'none',
                 outlineOffset: '2px',

diff --git a/met-web/src/components/common/Navigation/UnsavedWorkConfirmation.tsx b/met-web/src/components/common/Navigation/UnsavedWorkConfirmation.tsx
@@ -0,0 +1,32 @@
+import { Modal } from '@mui/material';
+import React from 'react';
+import { useBlocker } from 'react-router-dom';
+import ConfirmModal from '../Modals/ConfirmModal';
+
+interface UnsavedWorkConfirmationProps {
+    blockNavigationWhen: boolean;
+}
+
+const UnsavedWorkConfirmation: React.FC<UnsavedWorkConfirmationProps> = ({ blockNavigationWhen }) => {
+    const blocker = useBlocker(
+        ({ currentLocation, nextLocation }) =>
+            blockNavigationWhen && nextLocation.pathname !== currentLocation.pathname,
+    );
+
+    return (
+        <Modal open={blocker.state === 'blocked'} onClose={blocker.reset}>
+            <ConfirmModal
+                style="warning"
+                header="Unsaved Changes"
+                subHeader="Are you sure you want to leave this page?"
+                subText={[{ text: 'If you leave this page, your changes will be lost.' }]}
+                cancelButtonText="Stay"
+                confirmButtonText="Leave"
+                handleClose={blocker.reset}
+                handleConfirm={blocker.proceed}
+            />
+        </Modal>
+    );
+};
+
+export default UnsavedWorkConfirmation;
diff --git a/...ts/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/TaxonInputComponents.tsx b/...ts/engagement/form/EngagementFormTabs/AdditionalDetails/Metadata/TaxonInputComponents.tsx
@@ -1,6 +1,5 @@
 import { GenericInputProps as TaxonInputProps } from '../../../../../metadataManagement/types';
-import { DatePicker, TimePicker, DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { DatePicker, TimePicker, DateTimePicker } from '@mui/x-date-pickers';
 import React, { ReactElement, useState } from 'react';
 import {
     FormControlLabel,
@@ -13,6 +12,7 @@ import {
     AutocompleteRenderGetTagProps,
 } from '@mui/material';
 import { FieldError } from 'react-hook-form';
+import dayjs from 'dayjs';
 
 export const DefaultAutocomplete = ({ taxon, taxonType, field, setValue, errors, trigger }: TaxonInputProps) => {
     const [inputValue, setInputValue] = useState('');
@@ -150,39 +150,32 @@ export const inputFormats = {
     [PickerTypes.DATETIME]: 'yyyy-MM-dd hh:mm a',
 };
 
-export const TaxonPicker = ({
-    taxon,
-    field,
-    setValue,
-    errors,
-    pickerType,
-}: TaxonInputProps & { pickerType: string }) => {
+export const TaxonPicker = ({ taxon, field, errors, pickerType }: TaxonInputProps & { pickerType: string }) => {
     const PickerComponent = {
         [PickerTypes.DATE]: DatePicker,
         [PickerTypes.TIME]: TimePicker,
         [PickerTypes.DATETIME]: DateTimePicker,
     }[pickerType];
 
     return (
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-            <PickerComponent
-                {...field}
-                label={taxon.name}
-                inputFormat={inputFormats[pickerType]}
-                onChange={(e) => {
-                    setValue(taxon.id.toString(), e);
-                }}
-                PaperProps={{ sx: { background: '#eee' } }}
-                renderInput={(params) => (
-                    <TextField
-                        {...params}
-                        fullWidth
-                        variant="outlined"
-                        error={!!errors[taxon.id.toString()]}
-                        helperText={errors[taxon.id.toString()]?.message?.toString() ?? ''}
-                    />
-                )}
-            />
-        </LocalizationProvider>
+        <PickerComponent
+            {...field}
+            value={field.value && dayjs(field.value)}
+            onChange={(date) => {
+                field.onChange(date);
+            }}
+            label={taxon.name}
+            slotProps={{
+                desktopPaper: {
+                    sx: { background: '#eee' },
+                },
+                textField: {
+                    fullWidth: true,
+                    variant: 'outlined',
+                    error: !!errors[taxon.id.toString()],
+                    helperText: errors[taxon.id.toString()]?.message?.toString() ?? '',
+                },
+            }}
+        />
     );
 };