Custom UI for EngagementDateOverrideConflict error (#1653)

Author: CarsonF

src/api/errorHandling/error.types.ts

@@ -1,6 +1,6 @@
 import { ApolloError } from '@apollo/client';
 import { assert } from 'ts-essentials';
-import { ProductStep } from '../schema.graphql';
+import { ProductStep, Project } from '../schema.graphql';
 
 interface CordErrorExtensions {
   codes: readonly Code[];
@@ -26,6 +26,7 @@ export interface ErrorMap {
   Duplicate: DuplicateError;
   Unauthorized: InputError;
   StepNotPlanned: StepNotPlannedError;
+  EngagementDateOverrideConflict: EngagementDateOverrideConflictError;
 
   /**
    * This is a special one that allows a default handler for any
@@ -91,6 +92,18 @@ export interface StepNotPlannedError extends InputError {
   index: number;
 }
 
+export interface EngagementDateOverrideConflictError extends InputError {
+  readonly project: Pick<Project, 'id' | 'name' | 'mouStart' | 'mouEnd'>;
+  readonly engagements: ReadonlyArray<
+    Readonly<{
+      id: string;
+      label: string;
+      point: 'start' | 'end';
+      date: string;
+    }>
+  >;
+}
+
 export const isErrorCode = <K extends keyof ErrorMap>(
   errorInfo: ErrorInfo,
   code: K

src/scenes/Projects/Update/UpdateProjectDialog.tsx

@@ -1,11 +1,14 @@
 import { useMutation } from '@apollo/client';
+import { Box, Typography } from '@mui/material';
 import { many, Many } from '@seedcompany/common';
+import { FORM_ERROR } from 'final-form';
 import { pick } from 'lodash';
 import { ComponentType, useMemo } from 'react';
 import { Except, Merge } from 'type-fest';
 import { invalidateProps } from '~/api';
 import { SensitivityList, UpdateProject } from '~/api/schema.graphql';
 import {
+  CalendarDate,
   DisplayFieldRegionFragment,
   DisplayLocationFragment,
   ExtractStrict,
@@ -24,6 +27,8 @@ import {
 } from '../../../components/form';
 import { LocationField } from '../../../components/form/Lookup';
 import { FieldRegionField } from '../../../components/form/Lookup/FieldRegion';
+import { FormattedDate } from '../../../components/Formatters';
+import { Link } from '../../../components/Routing';
 import {
   updateEngagementDateRanges,
   updatePartnershipsDateRanges,
@@ -219,6 +224,40 @@ export const UpdateProjectDialog = ({
           },
         });
       }}
+      errorHandlers={{
+        EngagementDateOverrideConflict: ({ engagements }) => {
+          const rendered = (
+            <>
+              <Typography variant="body2" gutterBottom>
+                {engagements.length === 1
+                  ? 'An engagement has a date outside the new range'
+                  : 'Some engagements have dates outside the new range'}
+              </Typography>
+              <Box component="ul" sx={{ m: 0, paddingInlineStart: 4 }}>
+                {engagements.map((eng) => (
+                  <li key={eng.id + eng.point}>
+                    {eng.point === 'start' ? 'Start' : 'End'} date of{' '}
+                    <Link to={`/engagements/${eng.id}`} color="inherit">
+                      {eng.label}
+                    </Link>{' '}
+                    is <FormattedDate date={CalendarDate.fromISO(eng.date)} />
+                  </li>
+                ))}
+              </Box>
+            </>
+          );
+          const points = new Set(engagements.map((eng) => eng.point));
+          return {
+            [FORM_ERROR]: rendered,
+            // Mark the field(s) as invalid,
+            // even though we show the error in the unified spot.
+            project: {
+              ...(points.has('start') ? { mouStart: ' ' } : {}),
+              ...(points.has('end') ? { mouEnd: ' ' } : {}),
+            },
+          };
+        },
+      }}
     >
       <SubmitError />
       <FieldGroup prefix="project">