Add a null check to convertFormValuesToObject() (#4305)

apps/admin-ui/cypress/component/KeyValueInput.cy.tsx

@@ -0,0 +1,125 @@
+import {
+  ActionGroup,
+  Button,
+  Form,
+  Page,
+  PageSection,
+} from "@patternfly/react-core";
+import { mount } from "cypress/react";
+import { useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { KeyValueType } from "../../src/components/key-value-form/key-value-convert";
+import { KeyValueInput } from "../../src/components/key-value-form/KeyValueInput";
+
+type KeyValueInputTestProps = {
+  submit: (values: any) => void;
+  defaultValues?: KeyValueType[];
+};
+
+const KeyValueInputTest = ({
+  submit,
+  defaultValues,
+}: KeyValueInputTestProps) => {
+  const form = useForm();
+
+  useEffect(() => {
+    form.setValue("name", defaultValues || "");
+  }, [form.setValue]);
+
+  return (
+    <Page>
+      <PageSection variant="light">
+        <FormProvider {...form}>
+          <Form isHorizontal onSubmit={form.handleSubmit(submit)}>
+            <KeyValueInput name="name" />
+            <ActionGroup>
+              <Button data-testid="save" type="submit">
+                Save
+              </Button>
+            </ActionGroup>
+          </Form>
+        </FormProvider>
+      </PageSection>
+    </Page>
+  );
+};
+
+describe("KeyValueInput", () => {
+  it("basic interaction", () => {
+    const submit = cy.spy().as("onSubmit");
+    mount(<KeyValueInputTest submit={submit} />);
+
+    cy.get("input").should("exist");
+    cy.findAllByTestId("name-add-row").should("exist").should("be.disabled");
+
+    cy.findAllByTestId("name[0].key").type("key");
+    cy.findAllByTestId("name[0].value").type("value");
+
+    cy.findAllByTestId("name-add-row").should("be.enabled");
+    cy.findAllByTestId("save").click();
+    cy.get("@onSubmit").should("have.been.calledWith", {
+      name: [{ key: "key", value: "value" }],
+    });
+  });
+
+  it("from existing values", () => {
+    const submit = cy.spy().as("onSubmit");
+    mount(
+      <KeyValueInputTest
+        submit={submit}
+        defaultValues={[{ key: "key1", value: "value1" }]}
+      />
+    );
+
+    cy.findAllByTestId("name[0].key").should("have.value", "key1");
+    cy.findAllByTestId("name[0].value").should("have.value", "value1");
+
+    cy.findAllByTestId("name-add-row").should("be.enabled").click();
+
+    cy.findAllByTestId("name[1].key").type("key2");
+    cy.findAllByTestId("name[1].value").type("value2");
+    cy.findAllByTestId("save").click();
+    cy.get("@onSubmit").should("have.been.calledWith", {
+      name: [
+        { key: "key1", value: "value1" },
+        { key: "key2", value: "value2" },
+      ],
+    });
+  });
+
+  it("leaving it empty", () => {
+    const submit = cy.spy().as("onSubmit");
+    mount(<KeyValueInputTest submit={submit} />);
+
+    cy.get("input").should("exist");
+    cy.findAllByTestId("save").click();
+    cy.get("@onSubmit").should("have.been.calledWith", {
+      name: [{ key: "", value: "" }],
+    });
+  });
+
+  it("deleting values", () => {
+    const submit = cy.spy().as("onSubmit");
+    mount(
+      <KeyValueInputTest
+        submit={submit}
+        defaultValues={[
+          { key: "key1", value: "value1" },
+          { key: "key2", value: "value2" },
+          { key: "key3", value: "value3" },
+          { key: "key4", value: "value4" },
+        ]}
+      />
+    );
+
+    cy.findAllByTestId("name[2].remove").click();
+    cy.findAllByTestId("name[1].remove").click();
+    cy.findAllByTestId("save").click();
+    cy.get("@onSubmit").should("have.been.calledWith", {
+      name: [
+        { key: "key1", value: "value1" },
+        { key: "key4", value: "value4" },
+      ],
+    });
+  });
+});

apps/admin-ui/cypress/e2e/client_authorization_test.spec.ts

@@ -9,6 +9,7 @@ import ModalUtils from "../support/util/ModalUtils";
 import ClientDetailsPage from "../support/pages/admin-ui/manage/clients/client_details/ClientDetailsPage";
 import PoliciesTab from "../support/pages/admin-ui/manage/clients/client_details/tabs/authorization_subtabs/PoliciesTab";
 import PermissionsTab from "../support/pages/admin-ui/manage/clients/client_details/tabs/authorization_subtabs/PermissionsTab";
+import CreateResourcePage from "../support/pages/admin-ui/manage/clients/client_details/CreateResourcePage";
 
 describe("Client authentication subtab", () => {
   const loginPage = new LoginPage();
@@ -68,6 +69,22 @@ describe("Client authentication subtab", () => {
     authenticationTab.formUtils().cancel();
   });
 
+  it("Edit a resource", () => {
+    authenticationTab.goToResourcesSubTab();
+    listingPage.goToItemDetails("Resource");
+
+    new CreateResourcePage()
+      .fillResourceForm({
+        displayName: "updated",
+      })
+      .formUtils()
+      .save();
+
+    masthead.checkNotificationMessage("Resource successfully updated");
+    sidebarPage.waitForPageLoad();
+    authenticationTab.formUtils().cancel();
+  });
+
   it("Should create a scope", () => {
     authenticationTab
       .goToScopesSubTab()

apps/admin-ui/src/clients/advanced/AdvancedSettings.tsx

@@ -49,7 +49,7 @@ export const AdvancedSettings = ({
     []
   );
 
-  const { control, register } = useFormContext();
+  const { control } = useFormContext();
   return (
     <FormAccess
       role="manage-realm"
@@ -234,9 +234,7 @@ export const AdvancedSettings = ({
             }
           >
             <KeyValueInput
-              {...register(
+              name={convertAttributeNameToForm("attributes.acr.loa.map")}
-                convertAttributeNameToForm("attributes.acr.loa.map")
-              )}
             />
           </FormGroup>
           <FormGroup

apps/admin-ui/src/util.ts

@@ -135,10 +135,9 @@ export function convertFormValuesToObject<T extends Record<string, any>, G = T>(
       result[key] = keyValueToArray(value as KeyValueType[]);
     } else if (key === "config" || key === "attributes") {
       result[key] = Object.fromEntries(
-        Object.entries(value as Record<string, unknown>).map(([k, v]) => [
+        Object.entries(
-          debeerify(k),
+          (value as Record<string, unknown> | undefined) || {}
-          v,
+        ).map(([k, v]) => [debeerify(k), v])
-        ])
       );
     } else {
       result[key] = value;