Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2563 users should not be able to add places assigned on the contacts form #2648

Merged
merged 3 commits into from
Jan 7, 2025
+42 −11
Merged

2563 users should not be able to add places assigned on the contacts form #2648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec1e495
fix: users shouldn't be able to edit places assigned on the contacts …
Sepehr-Sobhani Jan 3, 2025
653e36e
chore: move uischema to the form - array field template is a client-s…
Sepehr-Sobhani Jan 3, 2025
f24d49f
test: add regression test
Sepehr-Sobhani Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions bciers/apps/administration/app/components/contacts/ContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -27,7 +27,6 @@ const NewOperationMessage = () => (
export default function ContactForm({
formData,
schema,
uiSchema,
isCreating,
allowEdit,
}: Readonly<Props>) {
Expand All @@ -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}
Expand Down
6 changes: 1 addition & 5 deletions bciers/apps/administration/app/components/contacts/ContactPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -53,7 +50,6 @@ export default async function ContactPage({
userOperatorUsers,
isCreating,
)}
uiSchema={contactsUiSchema}
formData={contactFormData}
isCreating={isCreating}
allowEdit={role === FrontEndRoles.INDUSTRY_USER_ADMIN}
Expand Down
10 changes: 8 additions & 2 deletions bciers/apps/administration/app/data/jsonSchema/contact.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it better to use this one?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not entirely sure why it was originally used, but these two field templates are quite similar. When I used them interchangeably, they appeared identical. The only noticeable difference was the note prop, which I assume we would also need in the ArrayField. That said, I aimed to minimize the usage of InlineArrayFieldTemplate and instead reuse ArrayFieldTemplate.

Additionally, the removable prop on the ArrayFieldTemplate perfectly aligned with the requirements of this feature. I avoided modifying InlineArrayFieldTemplate to replicate the same removable prop behaviour, as it seemed unnecessary.


const section1: RJSFSchema = {
type: "object",
Expand All @@ -25,6 +25,7 @@ const section1: RJSFSchema = {
type: "array",
default: ["None"],
title: "Places assigned",
readOnly: true,
items: {
type: "string",
},
Expand Down Expand Up @@ -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: {
Expand Down
25 changes: 25 additions & 0 deletions bciers/apps/administration/tests/components/contacts/ContactForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<ContactForm
schema={readOnlyContactSchema}
uiSchema={contactsUiSchema}
formData={contactFormData}
allowEdit
/>,
);
// 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();
});
});
7 changes: 6 additions & 1 deletion bciers/libs/components/src/form/fields/ArrayFieldTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="flex min-w-full flex-col">
Expand Down Expand Up @@ -80,7 +81,6 @@ const ArrayFieldTemplate = ({
"ui:options": {
label: false,
inline: true,
unit: "test",
},
},
},
Expand All @@ -98,6 +98,11 @@ const ArrayFieldTemplate = ({
{arrayAddLabel as any}
</Button>
)}
{note && (
<div className="w-full px-[14px] py-4 items-center">
<b>Note:</b> {note}
</div>
)}
</div>
);
};
Expand Down
Loading