From 70f74abdecb3f2d8929df1dce480ccfcc2a0ccd6 Mon Sep 17 00:00:00 2001 From: Ratheesh kumar R <108045773+ratheesh-aot@users.noreply.github.com> Date: Thu, 11 Jan 2024 15:52:51 -0800 Subject: [PATCH] Deseng 448: Engagement Edit Screen Reorder/Redesign (#2352) * DEDENG-448 : Re-arranging tabs in edit engagement form * DEDENG-448 : Re-arranging tabs in edit engagement form- Deleting unused files * Updated Changelog * DESENG-448: Moving Consent under Additional Details tab * Fixing a Sonarcube suggestion to use usememo --- CHANGELOG.MD | 5 ++ .../AdditionalDetailsContext.tsx | 84 +++++++++++++++++++ .../AdditionalTabContent.tsx | 41 +++++++++ .../ConsentMessage.tsx | 6 +- .../EngagementInformation.tsx | 1 + .../AdditionalDetails/index.tsx | 13 +++ .../form/EngagementFormTabs/FormTabs.tsx | 16 ++-- .../form/EngagementFormTabs/Links/index.tsx | 25 ------ .../Settings/EngagementSettingsContext.tsx | 10 --- .../Settings/EngagementSettingsForm.tsx | 19 ++--- .../{Links => Settings}/PublicUrls.tsx | 0 .../form/EngagementFormTabs/constants.ts | 8 +- 12 files changed, 165 insertions(+), 63 deletions(-) create mode 100644 met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalDetailsContext.tsx create mode 100644 met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx rename met-web/src/components/engagement/form/EngagementFormTabs/{Settings => AdditionalDetails}/ConsentMessage.tsx (79%) rename met-web/src/components/engagement/form/EngagementFormTabs/{Settings => AdditionalDetails}/EngagementInformation.tsx (95%) create mode 100644 met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/index.tsx delete mode 100644 met-web/src/components/engagement/form/EngagementFormTabs/Links/index.tsx rename met-web/src/components/engagement/form/EngagementFormTabs/{Links => Settings}/PublicUrls.tsx (100%) diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 73d84fb5a..c76e5a6fc 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,6 +1,11 @@ ## January 10, 2024 - **Task** Custom Consent per Engagement [🎟️DESENG-456](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-456) +- **Task** Engagement Edit Screen Reorder/Redesign [🎟️DESENG-448](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-448) + - Added new tab Addional Details and moved metadata inside that + - Moved public url section inside Settings tab + - Changed Engagement Details to Engagement Core + - Removed Links tab ## January 9, 2024 diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalDetailsContext.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalDetailsContext.tsx new file mode 100644 index 000000000..19cc4a973 --- /dev/null +++ b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalDetailsContext.tsx @@ -0,0 +1,84 @@ +import React, { createContext, useContext, useState, useMemo } from 'react'; +import { ActionContext } from '../../ActionContext'; +import { EngagementTabsContext } from '../EngagementTabsContext'; +import { useAppDispatch } from 'hooks'; +import { openNotification } from 'services/notificationService/notificationSlice'; +import { SubmissionStatus } from 'constants/engagementStatus'; + +export interface AdditionalDetailsContextState { + initialConsentMessage: string; + setInitialConsentMessage: (richContent: string) => void; + consentMessage: string; + setConsentMessage: (richContent: string) => void; + handleSaveAdditional: () => void; + updatingAdditional: boolean; + hasBeenOpened: boolean; +} + +export const AdditionalDetailsContext = createContext({ + initialConsentMessage: '', + setInitialConsentMessage: () => { + return; + }, + consentMessage: '', + setConsentMessage: () => { + return; + }, + handleSaveAdditional: () => { + return; + }, + updatingAdditional: false, + hasBeenOpened: false, +}); + +export const AdditionalDetailsContextProvider = ({ children }: { children: React.ReactNode }) => { + const { handleUpdateEngagementRequest, savedEngagement } = useContext(ActionContext); + const { engagementFormData } = useContext(EngagementTabsContext); + const dispatch = useAppDispatch(); + + const [updatingAdditional, setUpdatingAdditional] = useState(false); + const [consentMessage, setConsentMessage] = useState(savedEngagement?.consent_message || ''); + const [initialConsentMessage, setInitialConsentMessage] = useState(savedEngagement?.consent_message || ''); + + const handleUpdateEngagementAdditional = () => { + return handleUpdateEngagementRequest({ + ...engagementFormData, + consent_message: consentMessage, + }); + }; + + const handleSaveAdditional = async () => { + try { + if (!savedEngagement.id) { + dispatch(openNotification({ text: 'Must create engagement first', severity: 'error' })); + return; + } + setUpdatingAdditional(true); + await handleUpdateEngagementAdditional(); + setUpdatingAdditional(false); + dispatch(openNotification({ text: 'Engagement additional details saved', severity: 'success' })); + } catch (error) { + setUpdatingAdditional(false); + dispatch(openNotification({ text: 'Error saving engagement additional details', severity: 'error' })); + } + }; + + const hasBeenOpened = [SubmissionStatus.Closed, SubmissionStatus.Open].includes( + savedEngagement.engagement_status.id, + ); + + const contextValue = useMemo( + () => ({ + initialConsentMessage, + setInitialConsentMessage, + consentMessage, + setConsentMessage, + handleSaveAdditional, + updatingAdditional, + hasBeenOpened, + }), + [initialConsentMessage, consentMessage, updatingAdditional, hasBeenOpened], + ); + + return {children}; +}; diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx new file mode 100644 index 000000000..344b13dcf --- /dev/null +++ b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx @@ -0,0 +1,41 @@ +import React, { useContext } from 'react'; +import { Divider, Grid } from '@mui/material'; +import { MetPaper, PrimaryButton } from 'components/common'; +import ConsentMessage from './ConsentMessage'; +import EngagementInformation from './EngagementInformation'; + +import { AdditionalDetailsContext } from './AdditionalDetailsContext'; + +const AdditionalTabContent = () => { + const { handleSaveAdditional, updatingAdditional } = useContext(AdditionalDetailsContext); + + return ( + + + + + + + + + + + + + + Save + + + + + ); +}; + +export default AdditionalTabContent; diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/ConsentMessage.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/ConsentMessage.tsx similarity index 79% rename from met-web/src/components/engagement/form/EngagementFormTabs/Settings/ConsentMessage.tsx rename to met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/ConsentMessage.tsx index ef994ac46..bfde9ff90 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/ConsentMessage.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/ConsentMessage.tsx @@ -1,11 +1,11 @@ import React, { useContext } from 'react'; import { Box, Grid } from '@mui/material'; import { MetHeader4 } from 'components/common'; -import { EngagementSettingsContext } from './EngagementSettingsContext'; +import { AdditionalDetailsContext } from './AdditionalDetailsContext'; import RichTextEditor from 'components/common/RichTextEditor'; const ConsentMessage = () => { - const { consentMessage, setConsentMessage } = useContext(EngagementSettingsContext); + const { initialConsentMessage, setConsentMessage } = useContext(AdditionalDetailsContext); const handleRichContentChange = (newState: string) => { setConsentMessage(newState); @@ -20,7 +20,7 @@ const ConsentMessage = () => { diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementInformation.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/EngagementInformation.tsx similarity index 95% rename from met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementInformation.tsx rename to met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/EngagementInformation.tsx index fe8834752..e348700ab 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementInformation.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/EngagementInformation.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import React, { useContext } from 'react'; import { Grid, MenuItem, TextField, Select, SelectChangeEvent } from '@mui/material'; import { MetLabel, MetHeader4 } from 'components/common'; diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/index.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/index.tsx new file mode 100644 index 000000000..6d502360f --- /dev/null +++ b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import AdditionalTabContent from './AdditionalTabContent'; +import { AdditionalDetailsContextProvider } from './AdditionalDetailsContext'; + +const EngagementAdditionalDetails = () => { + return ( + + + + ); +}; + +export default EngagementAdditionalDetails; diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/FormTabs.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/FormTabs.tsx index 519621754..618ca5e3d 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/FormTabs.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/FormTabs.tsx @@ -5,11 +5,11 @@ import EngagementForm from './EngagementForm'; import { MetTab, MetTabList, MetTabPanel } from '../StyledTabComponents'; import { EngagementFormTabValues, ENGAGEMENT_FORM_TABS } from './constants'; import EngagementUserManagement from './UserManagement/EngagementUserManagement'; -import EngagementLinks from './Links'; +import EngagementAdditionalDetails from './AdditionalDetails'; import EngagementSettings from './Settings'; const FormTabs = () => { - const [value, setValue] = React.useState(ENGAGEMENT_FORM_TABS.DETAILS); + const [value, setValue] = React.useState(ENGAGEMENT_FORM_TABS.CORE); return ( @@ -24,24 +24,24 @@ const FormTabs = () => { }} variant="scrollable" > - + + - - + + + + - - - ); diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Links/index.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Links/index.tsx deleted file mode 100644 index c31146f2a..000000000 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Links/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Grid } from '@mui/material'; -import { MetPaper } from 'components/common'; -import { PublicUrls } from './PublicUrls'; - -const EngagementLinks = () => { - return ( - - - - - - - - ); -}; - -export default EngagementLinks; diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsContext.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsContext.tsx index c7bb86e87..9412c5823 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsContext.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsContext.tsx @@ -8,8 +8,6 @@ import { SubmissionStatus } from 'constants/engagementStatus'; export interface EngagementSettingsContextState { isInternal: boolean; setIsInternal: (isInternal: boolean) => void; - consentMessage: string; - setConsentMessage: (richContent: string) => void; sendReport: boolean; setSendReport: (sendReport: boolean) => void; handleSaveSettings: () => void; @@ -22,10 +20,6 @@ export const EngagementSettingsContext = createContext { return; }, - consentMessage: '', - setConsentMessage: () => { - return; - }, sendReport: false, setSendReport: () => { return; @@ -47,7 +41,6 @@ export const EngagementSettingsContextProvider = ({ children }: { children: Reac const [isInternal, setIsInternal] = useState(savedIsInternal); const [sendReport, setSendReport] = useState(Boolean(settings.send_report)); const [updatingSettings, setUpdatingSettings] = useState(false); - const [consentMessage, setConsentMessage] = useState(savedEngagement?.consent_message || ''); const handleUpdateEngagementMetadata = () => { return handleUpdateEngagementMetadataRequest({ @@ -60,7 +53,6 @@ export const EngagementSettingsContextProvider = ({ children }: { children: Reac return handleUpdateEngagementRequest({ ...engagementFormData, is_internal: isInternal, - consent_message: consentMessage, }); }; @@ -97,8 +89,6 @@ export const EngagementSettingsContextProvider = ({ children }: { children: Reac value={{ isInternal, sendReport, - consentMessage, - setConsentMessage, setIsInternal, setSendReport, handleSaveSettings, diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx index d1c5c4605..ae6fc4dff 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx @@ -1,11 +1,10 @@ import React, { useContext } from 'react'; import { Divider, Grid } from '@mui/material'; import { MetPaper, PrimaryButton } from 'components/common'; -import EngagementInformation from './EngagementInformation'; -import ConsentMessage from './ConsentMessage'; import InternalEngagement from './InternalEngagement'; import SendReport from './SendReport'; import { EngagementSettingsContext } from './EngagementSettingsContext'; +import { PublicUrls } from './PublicUrls'; const EngagementSettingsForm = () => { const { handleSaveSettings, updatingSettings } = useContext(EngagementSettingsContext); @@ -20,12 +19,6 @@ const EngagementSettingsForm = () => { spacing={2} sx={{ padding: '2em' }} > - - - - - - @@ -36,15 +29,15 @@ const EngagementSettingsForm = () => { - + + Save + - + - - Save - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Links/PublicUrls.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx similarity index 100% rename from met-web/src/components/engagement/form/EngagementFormTabs/Links/PublicUrls.tsx rename to met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/constants.ts b/met-web/src/components/engagement/form/EngagementFormTabs/constants.ts index b355252a4..85593c067 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/constants.ts +++ b/met-web/src/components/engagement/form/EngagementFormTabs/constants.ts @@ -1,10 +1,10 @@ -export type EngagementFormTabValues = 'details' | 'settings' | 'User Management' | 'links'; +export type EngagementFormTabValues = 'core' | 'settings' | 'User Management' | 'additional'; export const ENGAGEMENT_FORM_TABS: { [x: string]: EngagementFormTabValues } = { - DETAILS: 'details', - SETTINGS: 'settings', + CORE: 'core', + ADDITIONAL: 'additional', USER_MANAGEMENT: 'User Management', - LINKS: 'links', + SETTINGS: 'settings', }; export const ENGAGEMENT_UPLOADER_HEIGHT = '360px';