From ec1e4959209afc18d139d4e7fa08079a1a9805b4 Mon Sep 17 00:00:00 2001 From: SeSo Date: Fri, 3 Jan 2025 08:37:31 -0800 Subject: [PATCH 1/3] fix: users shouldn't be able to edit places assigned on the contacts form Signed-off-by: SeSo --- .../apps/administration/app/data/jsonSchema/contact.ts | 10 ++++++++-- .../components/src/form/fields/ArrayFieldTemplate.tsx | 7 ++++++- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/bciers/apps/administration/app/data/jsonSchema/contact.ts b/bciers/apps/administration/app/data/jsonSchema/contact.ts index 0f1ca7da27..753f460c2e 100644 --- a/bciers/apps/administration/app/data/jsonSchema/contact.ts +++ b/bciers/apps/administration/app/data/jsonSchema/contact.ts @@ -1,7 +1,7 @@ import { RJSFSchema } from "@rjsf/utils"; import provinceOptions from "@bciers/data/provinces.json"; import SectionFieldTemplate from "@bciers/components/form/fields/SectionFieldTemplate"; -import { InlineArrayFieldTemplate } from "@bciers/components/form/fields"; +import { ArrayFieldTemplate } from "@bciers/components/form/fields"; const section1: RJSFSchema = { type: "object", @@ -25,6 +25,7 @@ const section1: RJSFSchema = { type: "array", default: ["None"], title: "Places assigned", + readOnly: true, items: { type: "string", }, @@ -140,11 +141,16 @@ export const contactsUiSchema = { "ui:placeholder": "Select the user", }, places_assigned: { + "ui:ArrayFieldTemplate": ArrayFieldTemplate, "ui:options": { note: "You cannot delete this contact unless you replace them with other contact(s) in the place(s) above.", + addable: false, + removable: false, }, - "ui:ArrayFieldTemplate": InlineArrayFieldTemplate, "ui:classNames": "[&>div:last-child]:w-2/3", + items: { + "ui:widget": "ReadOnlyWidget", + }, }, }, section2: { diff --git a/bciers/libs/components/src/form/fields/ArrayFieldTemplate.tsx b/bciers/libs/components/src/form/fields/ArrayFieldTemplate.tsx index 88471634bd..228870483d 100644 --- a/bciers/libs/components/src/form/fields/ArrayFieldTemplate.tsx +++ b/bciers/libs/components/src/form/fields/ArrayFieldTemplate.tsx @@ -40,6 +40,7 @@ const ArrayFieldTemplate = ({ const customTitleName = uiSchema?.["ui:options"]?.title as string; const customItemName = uiSchema?.["ui:options"]?.customItemName as boolean; + const note = uiSchema?.["ui:options"]?.note as string; return (
@@ -80,7 +81,6 @@ const ArrayFieldTemplate = ({ "ui:options": { label: false, inline: true, - unit: "test", }, }, }, @@ -98,6 +98,11 @@ const ArrayFieldTemplate = ({ {arrayAddLabel as any} )} + {note && ( +
+ Note: {note} +
+ )}
); }; From 653e36ea3a9726480b7dfe0da4ebc55a5d2e6baa Mon Sep 17 00:00:00 2001 From: SeSo Date: Fri, 3 Jan 2025 08:38:28 -0800 Subject: [PATCH 2/3] chore: move uischema to the form - array field template is a client-side component Signed-off-by: SeSo --- .../administration/app/components/contacts/ContactForm.tsx | 5 ++--- .../administration/app/components/contacts/ContactPage.tsx | 6 +----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/bciers/apps/administration/app/components/contacts/ContactForm.tsx b/bciers/apps/administration/app/components/contacts/ContactForm.tsx index 0c933a439f..14607988fb 100644 --- a/bciers/apps/administration/app/components/contacts/ContactForm.tsx +++ b/bciers/apps/administration/app/components/contacts/ContactForm.tsx @@ -9,10 +9,10 @@ import { ContactFormData } from "./types"; import getUserData from "./getUserData"; import { IChangeEvent } from "@rjsf/core"; import { FormMode } from "@bciers/utils/src/enums"; +import { contactsUiSchema } from "@/administration/app/data/jsonSchema/contact"; interface Props { schema: any; - uiSchema: any; formData: ContactFormData; isCreating?: boolean; allowEdit?: boolean; @@ -27,7 +27,6 @@ const NewOperationMessage = () => ( export default function ContactForm({ formData, schema, - uiSchema, isCreating, allowEdit, }: Readonly) { @@ -54,7 +53,7 @@ export default function ContactForm({ key={key} error={error} schema={schema} - uiSchema={uiSchema} + uiSchema={contactsUiSchema} formData={formState} mode={isCreatingState ? FormMode.CREATE : FormMode.READ_ONLY} allowEdit={allowEdit} diff --git a/bciers/apps/administration/app/components/contacts/ContactPage.tsx b/bciers/apps/administration/app/components/contacts/ContactPage.tsx index ed431877da..5c4e1b9424 100644 --- a/bciers/apps/administration/app/components/contacts/ContactPage.tsx +++ b/bciers/apps/administration/app/components/contacts/ContactPage.tsx @@ -1,9 +1,6 @@ import { getContact } from "@bciers/actions/api"; import ContactForm from "./ContactForm"; -import { - contactsSchema, - contactsUiSchema, -} from "../../data/jsonSchema/contact"; +import { contactsSchema } from "@/administration/app/data/jsonSchema/contact"; import { ContactFormData, UserOperatorUser } from "./types"; import getUserOperatorUsers from "./getUserOperatorUsers"; import { createContactSchema } from "./createContactSchema"; @@ -53,7 +50,6 @@ export default async function ContactPage({ userOperatorUsers, isCreating, )} - uiSchema={contactsUiSchema} formData={contactFormData} isCreating={isCreating} allowEdit={role === FrontEndRoles.INDUSTRY_USER_ADMIN} From f24d49f0b965a038395304d164dccf8597c01995 Mon Sep 17 00:00:00 2001 From: SeSo Date: Tue, 7 Jan 2025 09:38:47 -0800 Subject: [PATCH 3/3] test: add regression test Signed-off-by: SeSo --- .../components/contacts/ContactForm.test.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/bciers/apps/administration/tests/components/contacts/ContactForm.test.tsx b/bciers/apps/administration/tests/components/contacts/ContactForm.test.tsx index 880c141af8..ea4adf0cd8 100644 --- a/bciers/apps/administration/tests/components/contacts/ContactForm.test.tsx +++ b/bciers/apps/administration/tests/components/contacts/ContactForm.test.tsx @@ -429,4 +429,29 @@ describe("ContactForm component", () => { }, ); }); + it("renders the places assigned field in read-only mode when editing", async () => { + const readOnlyContactSchema = createContactSchema( + contactsSchema, + [], + false, + ); + render( + , + ); + // switch to edit mode + await userEvent.click(screen.getByRole("button", { name: /edit/i })); + + // regression test: places assigned field should not be editable + expect( + screen.queryByDisplayValue(/operation representative \- operation 1/i), + ).not.toBeInTheDocument(); + expect( + screen.queryByRole("button", { name: /remove item/i }), + ).not.toBeInTheDocument(); + }); });