From d271cc334a32e1685f0cb9687bb0f07428a971b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Karla=20Valc=C3=A1rcel=20Mart=C3=ADnez?= <99458559+karla-vm@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:32:27 -0500 Subject: [PATCH] CMDCT-4086: Add / Edit Report Modal (NAAAR) (#11920) --- services/app-api/forms/naaar.json | 2 +- services/app-api/handlers/reports/submit.ts | 4 +- services/app-api/utils/types/reportContext.ts | 2 + services/app-api/utils/types/reports.ts | 10 +++ services/app-api/utils/validation/schemas.ts | 4 +- .../modals/AddEditReportModal.test.tsx | 89 ++++++++++++++++++- .../components/modals/AddEditReportModal.tsx | 23 ++++- .../ui-src/src/components/modals/Modal.tsx | 11 ++- .../pages/Dashboard/DashboardPage.tsx | 3 + .../addEditMcparReport.json | 2 +- .../addEditNaaarReport.json | 84 +++++++++++++++-- services/ui-src/src/types/reportContext.ts | 2 + services/ui-src/src/types/reports.ts | 10 +++ .../ui-src/src/utils/testing/mockReport.tsx | 19 +++- 14 files changed, 247 insertions(+), 18 deletions(-) diff --git a/services/app-api/forms/naaar.json b/services/app-api/forms/naaar.json index e4873207a..65cf7913f 100644 --- a/services/app-api/forms/naaar.json +++ b/services/app-api/forms/naaar.json @@ -63,7 +63,7 @@ } }, { - "id": "stateOrTerritory", + "id": "stateName", "type": "text", "validation": "textOptional", "props": { diff --git a/services/app-api/handlers/reports/submit.ts b/services/app-api/handlers/reports/submit.ts index b2542814d..42649b224 100644 --- a/services/app-api/handlers/reports/submit.ts +++ b/services/app-api/handlers/reports/submit.ts @@ -29,6 +29,7 @@ import { MCPARReportMetadata, MLRReportMetadata, UserRoles, + NAAARReportMetadata, } from "../../utils/types"; export const submitReport = handler(async (event, _context) => { @@ -65,7 +66,8 @@ export const submitReport = handler(async (event, _context) => { const reportMetadata = response.Item as | MLRReportMetadata - | MCPARReportMetadata; + | MCPARReportMetadata + | NAAARReportMetadata; const { status, isComplete, fieldDataId, formTemplateId } = reportMetadata; if (status === "Submitted") { diff --git a/services/app-api/utils/types/reportContext.ts b/services/app-api/utils/types/reportContext.ts index 69dd52e41..e8e4af24e 100644 --- a/services/app-api/utils/types/reportContext.ts +++ b/services/app-api/utils/types/reportContext.ts @@ -30,6 +30,8 @@ export interface ReportMetadataShape extends ReportKeys { copyFieldDataSourceId?: string; programIsPCCM?: Choice[]; previousRevisions: string[]; + planTypeIncludedInProgram?: Choice[]; + "planTypeIncludedInProgram-otherText"?: string; novMcparRelease?: boolean; } diff --git a/services/app-api/utils/types/reports.ts b/services/app-api/utils/types/reports.ts index 090e74599..d41e813f6 100644 --- a/services/app-api/utils/types/reports.ts +++ b/services/app-api/utils/types/reports.ts @@ -184,6 +184,16 @@ export interface MCPARReportMetadata extends ReportMetadata { novMcparRelease: boolean; } +export interface NAAARReportMetadata extends ReportMetadata { + programName: string; + reportType: "NAAAR"; + reportingPeriodStartDate: number; + reportingPeriodEndDate: number; + dueDate: number; + planTypeIncludedInProgram: Choice[]; + "planTypeIncludedInProgram-otherText"?: string; +} + // HELPER FUNCTIONS /** diff --git a/services/app-api/utils/validation/schemas.ts b/services/app-api/utils/validation/schemas.ts index 296a9bc2d..09b037b96 100644 --- a/services/app-api/utils/validation/schemas.ts +++ b/services/app-api/utils/validation/schemas.ts @@ -1,5 +1,5 @@ import * as yup from "yup"; -import { radioOptional } from "./completionSchemas"; +import { radioOptional, textOptional } from "./completionSchemas"; export const metadataValidationSchema = yup.object().shape({ programName: yup.string(), @@ -19,4 +19,6 @@ export const metadataValidationSchema = yup.object().shape({ submissionName: yup.string(), completionStatus: yup.mixed(), copyFieldDataSourceId: yup.string(), + planTypeIncludedInProgram: radioOptional(), + "planTypeIncludedInProgram-otherText": textOptional(), }); diff --git a/services/ui-src/src/components/modals/AddEditReportModal.test.tsx b/services/ui-src/src/components/modals/AddEditReportModal.test.tsx index 66f256889..0bb79b098 100644 --- a/services/ui-src/src/components/modals/AddEditReportModal.test.tsx +++ b/services/ui-src/src/components/modals/AddEditReportModal.test.tsx @@ -10,6 +10,7 @@ import { mockMlrReport, mockMlrReportContext, mockMlrReportStore, + mockNaaarReport, mockNaaarReportContext, mockNaaarReportStore, mockStateUserStore, @@ -81,6 +82,22 @@ const mockSelectedMcparReport = { }, }; +// a similar assignment is performed in DashboardPage and is needed here to make sure the modal form hydrates +const mockSelectedNaaarReport = { + ...mockNaaarReport, + fieldData: { + programName: mockNaaarReport.programName, + reportingPeriodEndDate: convertDateUtcToEt( + mockNaaarReport.reportingPeriodEndDate + ), + reportingPeriodStartDate: convertDateUtcToEt( + mockNaaarReport.reportingPeriodStartDate + ), + combinedData: mockNaaarReport.combinedData, + planTypeIncludedInProgram: mockNaaarReport.planTypeIncludedInProgram, + }, +}; + const modalComponentWithSelectedReport = ( @@ -145,6 +162,22 @@ const naaarModalComponent = ( ); +const naaarModalComponentWithSelectedReport = ( + + + + + +); + describe("Test AddEditProgramModal", () => { beforeEach(async () => { mockedUseStore.mockReturnValue({ @@ -324,8 +357,16 @@ describe("Test AddEditReportModal functionality for NAAAR", () => { }); const fillForm = async (form: any) => { - const contactNameField = form.querySelector("[name='contactName']")!; - await userEvent.type(contactNameField, "fake contact name"); + const programNameField = form.querySelector("[name='programName']")!; + await userEvent.type(programNameField, "fake program name"); + const startDateField = form.querySelector( + "[name='reportingPeriodStartDate']" + )!; + await userEvent.type(startDateField, "1/1/2022"); + const endDateField = form.querySelector("[name='reportingPeriodEndDate']")!; + await userEvent.type(endDateField, "12/31/2022"); + const planTypeField = screen.getByLabelText("MCO") as HTMLInputElement; + await userEvent.click(planTypeField); const submitButton = screen.getByRole("button", { name: "Save" }); await userEvent.click(submitButton); }; @@ -340,6 +381,50 @@ describe("Test AddEditReportModal functionality for NAAAR", () => { expect(mockCloseHandler).toHaveBeenCalledTimes(1); }); }); + + test("Edit modal hydrates with report info and disables fields", async () => { + const result = render(naaarModalComponentWithSelectedReport); + const form = result.getByTestId("add-edit-report-form"); + const copyFieldDataSourceId = form.querySelector( + "[name='copyFieldDataSourceId']" + )!; + + // yoy copy field is disabled + expect(copyFieldDataSourceId).toHaveProperty("disabled", true); + + // hydrated values are in the modal + const programNameField = form.querySelector("[name='programName']")!; + const startDateField = form.querySelector( + "[name='reportingPeriodStartDate']" + )!; + const endDateField = form.querySelector("[name='reportingPeriodEndDate']")!; + + expect(programNameField).toHaveProperty( + "value", + mockNaaarReport.programName + ); + expect(startDateField).toHaveProperty( + "value", + convertDateUtcToEt(mockNaaarReport.reportingPeriodStartDate) + ); + expect(endDateField).toHaveProperty( + "value", + convertDateUtcToEt(mockNaaarReport.reportingPeriodEndDate) + ); + + await userEvent.click(screen.getByText("Cancel")); + }); + + test("Editing an existing report", async () => { + const result = render(naaarModalComponentWithSelectedReport); + const form = result.getByTestId("add-edit-report-form"); + await fillForm(form); + await waitFor(() => { + expect(mockUpdateReport).toHaveBeenCalledTimes(1); + expect(mockFetchReportsByState).toHaveBeenCalledTimes(1); + expect(mockCloseHandler).toHaveBeenCalledTimes(1); + }); + }); }); describe("Test AddEditReportModal accessibility", () => { diff --git a/services/ui-src/src/components/modals/AddEditReportModal.tsx b/services/ui-src/src/components/modals/AddEditReportModal.tsx index fb8aa6f96..09f944843 100644 --- a/services/ui-src/src/components/modals/AddEditReportModal.tsx +++ b/services/ui-src/src/components/modals/AddEditReportModal.tsx @@ -138,19 +138,35 @@ export const AddEditReportModal = ({ // NAAAR report payload const prepareNaaarPayload = (formData: any) => { - const contactName = formData["contactName"]; + const programName = formData["programName"]; + const copyFieldDataSourceId = formData["copyFieldDataSourceId"]; + const dueDate = calculateDueDate(formData["reportingPeriodEndDate"]); + const reportingPeriodStartDate = convertDateEtToUtc( + formData["reportingPeriodStartDate"] + ); + const reportingPeriodEndDate = convertDateEtToUtc( + formData["reportingPeriodEndDate"] + ); + const planTypeIncludedInProgram = formData["planTypeIncludedInProgram"]; return { metadata: { - contactName, + programName, + reportingPeriodStartDate, + reportingPeriodEndDate, + dueDate, lastAlteredBy: full_name, + copyFieldDataSourceId: copyFieldDataSourceId?.value, + planTypeIncludedInProgram, + "planTypeIncludedInProgram-otherText": + formData["planTypeIncludedInProgram-otherText"], locked: false, submissionCount: 0, previousRevisions: [], naaarReport, }, fieldData: { - contactName, + programName, }, }; }; @@ -227,6 +243,7 @@ export const AddEditReportModal = ({ content={{ heading: selectedReport?.id ? form.heading?.edit : form.heading?.add, subheading: selectedReport?.id ? "" : form.heading?.subheading, + intro: selectedReport?.id ? "" : form.heading?.intro, actionButtonText: submitting ? : "Save", closeButtonText: "Cancel", }} diff --git a/services/ui-src/src/components/modals/Modal.tsx b/services/ui-src/src/components/modals/Modal.tsx index 65137032d..773ed0518 100644 --- a/services/ui-src/src/components/modals/Modal.tsx +++ b/services/ui-src/src/components/modals/Modal.tsx @@ -39,8 +39,9 @@ export const Modal = ({ {content.subheading && ( - {content.subheading} + {content.subheading} )} + {content.intro && {content.intro}}