[FIX] Regression on proposed changes form (create and update) (#3974)

frontend/app/src/components/form/type.ts

@@ -91,7 +91,7 @@ export type DynamicDropdownFieldProps = FormFieldProps & {
 
 export type DynamicEnumFieldProps = FormFieldProps & {
   type: "enum";
-  items: Array<string>;
+  items: Array<SelectOption>;
   field?:
     | components["schemas"]["AttributeSchema-Output"]
     | components["schemas"]["RelationshipSchema-Output"];

frontend/app/src/screens/proposed-changes/conversations.tsx

@@ -45,6 +45,7 @@ import DynamicForm from "@/components/form/dynamic-form";
 import { schemaState } from "@/state/atoms/schema.atom";
 import { AttributeType } from "@/utils/getObjectItemDisplayValue";
 import { getUpdateMutationFromFormData } from "@/components/form/utils/mutations/getUpdateMutationFromFormData";
+import { DynamicFieldProps, FormFieldValue } from "@/components/form/type";
 
 type tConversations = {
   refetch?: Function;
@@ -490,7 +491,7 @@ export const Conversations = forwardRef((props: tConversations, ref) => {
                 </div>
               </div>
 
-              <div className="">
+              <div>
                 <Button
                   disabled={
                     !auth?.permissions?.write ||
@@ -573,9 +574,73 @@ const ProposedChangeEditForm = ({ initialData, onSuccess }: ProposedChangeEditFo
 
   if (!proposedChangeSchema) return null;
 
-  async function onSubmit(data: any) {
-    const updatedObject = getUpdateMutationFromFormData(data);
+  const fields: Array<DynamicFieldProps> = [
+    {
+      name: "name",
+      type: "Text",
+      label: "Name",
+      defaultValue: { source: { type: "user" }, value: initialData?.name?.value },
+      rules: {
+        validate: {
+          required: ({ value }: FormFieldValue) => {
+            return (value !== null && value !== undefined && value !== "") || "Required";
+          },
+        },
+      },
+    },
+    {
+      name: "description",
+      type: "TextArea",
+      label: "Description",
+      defaultValue: { source: { type: "user" }, value: initialData?.description?.value },
+    },
+    {
+      name: "source_branch",
+      type: "enum",
+      label: "Source Branch",
+      defaultValue: { source: { type: "user" }, value: initialData?.source_branch?.value },
+      items: branches.map(({ id, name }) => ({ id, name })),
+      rules: {
+        validate: {
+          required: ({ value }: FormFieldValue) => {
+            return (value !== null && value !== undefined) || "Required";
+          },
+        },
+      },
+      disabled: true,
+    },
+    {
+      name: "destination_branch",
+      type: "enum",
+      label: "Destination Branch",
+      defaultValue: { source: { type: "user" }, value: initialData?.destination_branch?.value },
+      items: branches.map(({ id, name }) => ({ id, name })),
+      disabled: true,
+    },
+    {
+      name: "reviewers",
+      label: "Reviewers",
+      type: "relationship",
+      relationship: { cardinality: "many", peer: ACCOUNT_OBJECT } as any,
+      schema: {} as any,
+      defaultValue: {
+        source: { type: "user" },
+        value:
+          initialData?.reviewers?.edges
+            .map((edge: any) => ({ id: edge?.node?.id }))
+            .filter(Boolean) ?? [],
+      },
+      options: initialData?.reviewers?.edges.map(({ node }) => ({
+        id: node?.id,
+        name: node?.display_label,
+      })),
+    },
+  ];
 
+  async function onSubmit(formData: any) {
+    const updatedObject = getUpdateMutationFromFormData({ formData, fields });
+
+    console.log(updatedObject);
     if (Object.keys(updatedObject).length) {
       try {
         const mutationString = updateObjectWithId({
@@ -611,61 +676,5 @@ const ProposedChangeEditForm = ({ initialData, onSuccess }: ProposedChangeEditFo
     }
   }
 
-  return (
-    <DynamicForm
-      onSubmit={onSubmit}
-      fields={[
-        {
-          name: "name",
-          type: "Text",
-          label: "Name",
-          defaultValue: initialData?.name?.value,
-          rules: {
-            required: true,
-          },
-        },
-        {
-          name: "description",
-          type: "TextArea",
-          label: "Description",
-          defaultValue: initialData?.description?.value,
-        },
-        {
-          name: "source_branch",
-          type: "enum",
-          label: "Source Branch",
-          defaultValue: initialData?.source_branch?.value,
-          items: branches.map(({ name }) => name),
-          rules: {
-            required: true,
-          },
-          disabled: true,
-        },
-        {
-          name: "destination_branch",
-          type: "enum",
-          label: "Destination Branch",
-          defaultValue: { source: null, value: "main" },
-          items: [],
-          disabled: true,
-        },
-        {
-          name: "reviewers",
-          label: "Reviewers",
-          type: "relationship",
-          relationship: { cardinality: "many", peer: "CoreAccount" } as any,
-          schema: {} as any,
-          defaultValue:
-            initialData?.reviewers?.edges
-              .map((edge: any) => ({ id: edge?.node?.id }))
-              .filter(Boolean) ?? [],
-          options: initialData?.reviewers?.edges.map(({ node }) => ({
-            id: node?.id,
-            name: node?.display_label,
-          })),
-        },
-      ]}
-      className="p-4"
-    />
-  );
+  return <DynamicForm onSubmit={onSubmit} fields={fields} className="p-4" />;
 };

frontend/app/src/screens/proposed-changes/proposed-changes-create-form.tsx

@@ -24,6 +24,7 @@ import { Icon } from "@iconify-icon/react";
 import { useAtomValue } from "jotai";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
+import { ACCOUNT_OBJECT } from "@/config/constants";
 
 export const ProposedChangeCreateForm = () => {
   const { user } = useAuth();
@@ -149,7 +150,7 @@ export const ProposedChangeCreateForm = () => {
               <Select
                 multiple
                 options={
-                  getAllAccountsData?.CoreAccount?.edges.map((edge: any) => ({
+                  getAllAccountsData?.[ACCOUNT_OBJECT]?.edges.map((edge: any) => ({
                     id: edge?.node.id,
                     name: edge?.node?.display_label,
                   })) ?? []

frontend/app/src/utils/getSchemaObjectColumns.ts

@@ -10,6 +10,7 @@ import { store } from "@/state";
 import { iGenericSchema, iNodeSchema, profilesAtom } from "@/state/atoms/schema.atom";
 import * as R from "ramda";
 import { isGeneric, sortByOrderWeight } from "./common";
+import { SelectOption } from "@/components/inputs/select";
 
 type tgetObjectAttributes = {
   schema: iNodeSchema | iGenericSchema | undefined;
@@ -204,7 +205,7 @@ export const getRelationshipOptions = (row: any, field: any, schemas: any[], gen
   return [option];
 };
 
-export const getOptionsFromAttribute = (attribute: any, value: any) => {
+export const getOptionsFromAttribute = (attribute: any, value: any): Array<SelectOption> => {
   if (attribute.kind === "List") {
     return (value || [])?.map((option: any) => ({
       name: option,

frontend/app/tests/e2e/proposed-changes/proposed-changes.spec.ts

@@ -1,4 +1,4 @@
-import { expect, Page, test } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 import { ACCOUNT_STATE_PATH } from "../../constants";
 import { createBranch, deleteBranch } from "../../utils";
 
@@ -44,55 +44,76 @@ test.describe("/proposed-changes", () => {
     test.describe("Create, edit and merge proposed change", async () => {
       test.describe.configure({ mode: "serial" });
 
-      let page: Page;
       const pcName = "pc-e2e";
       const pcBranchName = "main-copy-for-pc-e2e";
 
       test.beforeAll(async ({ browser }) => {
-        page = await browser.newPage();
+        const page = await browser.newPage();
         await page.goto("/proposed-changes");
         await createBranch(page, pcBranchName);
+        await page.close();
       });
 
-      test.afterAll(async () => {
+      test.afterAll(async ({ browser }) => {
+        const page = await browser.newPage();
+        await page.goto("/proposed-changes");
         await deleteBranch(page, pcBranchName);
+        await page.close();
       });
 
       test("create new proposed change", async ({ page }) => {
         await page.goto("/proposed-changes/new");
         await expect(page.getByText("Create a proposed Change")).toBeVisible();
+
         await page.getByLabel("Source Branch *").click();
         await page.getByRole("option", { name: pcBranchName }).click();
-
         await page.getByLabel("Name *").fill(pcName);
-        await page.getByRole("button", { name: "Create" }).click();
+        await page.getByTestId("codemirror-editor").getByRole("textbox").fill("My description");
+        await page.getByTestId("select-open-option-button").click();
+        await page.getByRole("option", { name: "Architecture Team" }).click();
+        await page.getByRole("option", { name: "Crm Synchronization" }).click();
+        await page.getByTestId("select-open-option-button").click();
+
+        await page.getByRole("button", { name: "Create proposed change" }).click();
         await expect(page.getByText("Proposed change created")).toBeVisible();
       });
 
-      test.fixme("display and edit proposed change", async () => {
+      test("display and edit proposed change", async ({ page }) => {
+        await page.goto("/proposed-changes");
+        await page.getByText(pcName, { exact: true }).first().click();
+
         await test.step("display created proposed change details", async () => {
           await expect(page.getByText("Name" + pcName)).toBeVisible();
           await expect(page.getByText("Source branch" + pcBranchName)).toBeVisible();
           await expect(page.getByText("Stateopen")).toBeVisible();
         });
 
         await test.step("edit proposed change reviewers", async () => {
-          await page.getByTestId("edit-button").click();
+          await page.getByRole("button", { name: "Edit" }).click();
+          await page.getByLabel("Name").fill(pcName + "edit");
           await page
-            .getByText("Empty list")
-            .locator("..")
-            .getByTestId("select-open-option-button")
-            .click();
-          await page.getByRole("option", { name: "Architecture Team" }).click();
-          await page.getByText("CoreThread").click(); // Hack to close Reviewers select option list
+            .getByTestId("side-panel-container")
+            .getByTestId("codemirror-editor")
+            .getByRole("textbox")
+            .fill("My description edit");
+          await page.getByTestId("multi-select-input").getByText("Crm Synchronization").click();
+          await page.getByLabel("Reviewers").click(); // Hack to close Reviewers select option list
           await page.getByRole("button", { name: "Save" }).click();
           await expect(page.getByText("ProposedChange updated")).toBeVisible();
 
-          await expect(page.getByText("ReviewersArchitecture Team", { exact: true })).toBeVisible();
+          await expect(page.getByText("Name" + pcName + "edit")).toBeVisible();
+          await page.getByText("DescriptionMy description edit").click();
+          await expect(page.getByText("ReviewersAT")).toBeVisible();
         });
       });
 
-      test.fixme("merged proposed change", async () => {
+      test.fixme("merged proposed change", async ({ page }) => {
+        await page.goto("/proposed-changes");
+        await page
+          .getByText(pcName + "edit", { exact: true })
+          .first()
+          .click();
+
         await test.step("merge proposed change and update UI", async () => {
           await page.getByRole("button", { name: "Merge" }).click();
           await expect(page.getByText("Proposed changes merged successfully!")).toBeVisible();
@@ -101,7 +122,7 @@ test.describe("/proposed-changes", () => {
 
         await test.step("not able to edit proposed change", async () => {
           await expect(page.getByRole("button", { name: "Merge" })).toBeDisabled();
-          await expect(page.getByTestId("edit-button")).toBeDisabled();
+          await expect(page.getByRole("button", { name: "Edit" })).toBeDisabled();
         });
       });