Added way to convert multi line to string (#3827)

apps/admin-ui/cypress/support/pages/admin_console/manage/clients/CreateClientPage.ts

@@ -27,7 +27,7 @@ export default class CreateClientPage extends CommonPage {
 
   private rootUrlInput = "#kc-root-url";
   private homeUrlInput = "#kc-home-url";
-  private firstValidRedirectUrlInput = "#redirectUris0";
+  private firstValidRedirectUrlInput = "redirectUris0";
   private firstWebOriginsInput = "#webOrigins0";
   private adminUrlInput = "#kc-admin-url";
 
@@ -232,7 +232,7 @@ export default class CreateClientPage extends CommonPage {
     cy.get(this.adminUrlInput).scrollIntoView();
     cy.get(this.rootUrlInput).should("not.be.disabled");
     cy.get(this.homeUrlInput).should("not.be.disabled");
-    cy.get(this.firstValidRedirectUrlInput).should("not.be.disabled");
+    cy.findByTestId(this.firstValidRedirectUrlInput).should("not.be.disabled");
     cy.get(this.firstWebOriginsInput).should("not.be.disabled");
     cy.get(this.adminUrlInput).should("not.be.disabled");
 

apps/admin-ui/cypress/support/pages/admin_console/manage/clients/client_details/CreateResourcePage.ts

@@ -7,7 +7,7 @@ export default class CreateResourcePage extends CommonPage {
       if (Array.isArray(value)) {
         for (let index = 0; index < value.length; index++) {
           const v = value[index];
-          cy.get(`input[name="${key}[${index}]"]`).type(v);
+          cy.findByTestId(`${key}${index}`).type(v);
           cy.findByTestId("addValue").click();
         }
       } else {

apps/admin-ui/cypress/support/pages/admin_console/manage/clients/client_details/tabs/SettingsTab.ts

@@ -33,7 +33,7 @@ export default class SettingsTab extends PageObject {
   private saveBtn = "settingsSave";
   private revertBtn = "settingsRevert";
 
-  private redirectUris = "#redirectUris";
+  private redirectUris = "redirectUris";
   private postLogoutRedirectUris = "attributes.post.logout.redirect.uris";
 
   private idpInitiatedSsoUrlName = "idpInitiatedSsoUrlName";
@@ -213,7 +213,7 @@ export default class SettingsTab extends PageObject {
   }
 
   public selectRedirectUriTextField(number: number, text: string) {
-    cy.get(this.redirectUris + number)
+    cy.findByTestId(this.redirectUris + number)
       .click()
       .clear()
       .type(text);

apps/admin-ui/src/clients/ClientDetails.tsx

@@ -23,10 +23,6 @@ import {
   useConfirmDialog,
 } from "../components/confirm-dialog/ConfirmDialog";
 import { DownloadDialog } from "../components/download-dialog/DownloadDialog";
-import {
-  stringToMultiline,
-  toStringValue,
-} from "../components/multi-line-input/multi-line-convert";
 import {
   ViewHeader,
   ViewHeaderBadge,
@@ -238,10 +234,6 @@ export default function ClientDetails() {
   const setupForm = (client: ClientRepresentation) => {
     form.reset({ ...client });
     convertToFormValues(client, form.setValue);
-    form.setValue(
-      convertAttributeNameToForm("attributes.request.uris"),
-      stringToMultiline(client.attributes?.["request.uris"])
-    );
     if (client.attributes?.["acr.loa.map"]) {
       form.setValue(
         convertAttributeNameToForm("attributes.acr.loa.map"),
@@ -250,18 +242,6 @@ export default function ClientDetails() {
         )
       );
     }
-    if (client.attributes?.["default.acr.values"]) {
-      form.setValue(
-        convertAttributeNameToForm("attributes.default.acr.values"),
-        stringToMultiline(client.attributes["default.acr.values"])
-      );
-    }
-    if (client.attributes?.["post.logout.redirect.uris"]) {
-      form.setValue(
-        convertAttributeNameToForm("attributes.post.logout.redirect.uris"),
-        stringToMultiline(client.attributes["post.logout.redirect.uris"])
-      );
-    }
   };
 
   useFetch(
@@ -294,24 +274,6 @@ export default function ClientDetails() {
 
       const values = convertFormValuesToObject(form.getValues());
 
-      if (values.attributes?.["request.uris"]) {
-        values.attributes["request.uris"] = toStringValue(
-          values.attributes["request.uris"]
-        );
-      }
-
-      if (values.attributes?.["default.acr.values"]) {
-        values.attributes["default.acr.values"] = toStringValue(
-          values.attributes["default.acr.values"]
-        );
-      }
-
-      if (values.attributes?.["post.logout.redirect.uris"]) {
-        values.attributes["post.logout.redirect.uris"] = toStringValue(
-          values.attributes["post.logout.redirect.uris"]
-        );
-      }
-
       const submittedClient =
         convertFormValuesToObject<ClientRepresentation>(values);
 

apps/admin-ui/src/clients/add/AccessSettings.tsx

@@ -105,6 +105,7 @@ export const AccessSettings = ({
               )}
               aria-label={t("validPostLogoutRedirectUri")}
               addButtonLabel="clients:addPostLogoutRedirectUri"
+              stringify
             />
           </FormGroup>
           {protocol === "saml" && (

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

@@ -240,6 +240,7 @@ export const AdvancedSettings = ({
           >
             <MultiLineInput
               name={convertAttributeNameToForm("attributes.default.acr.values")}
+              stringify
             />
           </FormGroup>
         </>

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

@@ -460,6 +460,7 @@ export const FineGrainOpenIdConnect = ({
           name={convertAttributeNameToForm("attributes.request.uris")}
           aria-label={t("validRequestURIs")}
           addButtonLabel="clients:addRequestUri"
+          stringify
         />
       </FormGroup>
       <FormGroup

apps/admin-ui/src/components/dynamic/MultivaluedStringComponent.tsx

@@ -31,6 +31,7 @@ export const MultiValuedStringComponent = ({
         addButtonLabel={t("addMultivaluedLabel", {
           fieldLabel: t(label!).toLowerCase(),
         })}
+        stringify
       />
     </FormGroup>
   );

apps/admin-ui/src/components/multi-line-input/MultiLineInput.tsx

@@ -1,20 +1,36 @@
-import { Fragment, useEffect } from "react";
-import { useFormContext } from "react-hook-form";
 import {
-  TextInput,
   Button,
   ButtonVariant,
-  TextInputProps,
   InputGroup,
+  TextInput,
+  TextInputProps,
 } from "@patternfly/react-core";
 import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
+import { Fragment, useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
+function stringToMultiline(value?: string): string[] {
+  return value ? value.split("##") : [];
+}
+
+function toStringValue(formValue: string[]): string {
+  return formValue.join("##");
+}
+
+type IdValue = {
+  id: number;
+  value: string;
+};
+
+const generateId = () => Math.floor(Math.random() * 1000);
+
 export type MultiLineInputProps = Omit<TextInputProps, "form"> & {
   name: string;
   addButtonLabel?: string;
   isDisabled?: boolean;
   defaultValue?: string[];
+  stringify?: boolean;
 };
 
 export const MultiLineInput = ({
@@ -22,39 +38,59 @@ export const MultiLineInput = ({
   addButtonLabel,
   isDisabled = false,
   defaultValue,
+  stringify = false,
   ...rest
 }: MultiLineInputProps) => {
   const { t } = useTranslation();
-  const { register, watch, setValue } = useFormContext();
+  const { register, setValue, getValues } = useFormContext();
 
-  const value = watch(name, defaultValue);
+  const [fields, setFields] = useState<IdValue[]>([]);
-  const fields = Array.isArray(value) && value.length !== 0 ? value : [""];
 
   const remove = (index: number) => {
-    setValue(name, [...fields.slice(0, index), ...fields.slice(index + 1)]);
+    update([...fields.slice(0, index), ...fields.slice(index + 1)]);
   };
 
   const append = () => {
-    setValue(name, [...fields, ""]);
+    update([...fields, { id: generateId(), value: "" }]);
   };
 
-  useEffect(() => register(name), [register]);
+  const updateValue = (index: number, value: string) => {
+    update([
+      ...fields.slice(0, index),
+      { ...fields[index], value },
+      ...fields.slice(index + 1),
+    ]);
+  };
+
+  const update = (values: IdValue[]) => {
+    setFields(values);
+    const fieldValue = values.flatMap((field) => field.value);
+    setValue(name, stringify ? toStringValue(fieldValue) : fieldValue);
+  };
+
+  useEffect(() => {
+    register(name);
+    let values = stringify
+      ? stringToMultiline(getValues(name))
+      : getValues(name);
+
+    values =
+      Array.isArray(values) && values.length !== 0
+        ? values
+        : defaultValue || [""];
+
+    setFields(values.map((value: string) => ({ value, id: generateId() })));
+  }, [register, getValues]);
 
   return (
     <>
-      {fields.map((value: string, index: number) => (
+      {fields.map(({ id, value }, index) => (
-        <Fragment key={index}>
+        <Fragment key={id}>
           <InputGroup>
             <TextInput
-              id={name + index}
+              data-testid={name + index}
-              onChange={(value) => {
+              onChange={(value) => updateValue(index, value)}
-                setValue(name, [
+              name={`${name}[${index}].value`}
-                  ...fields.slice(0, index),
-                  value,
-                  ...fields.slice(index + 1),
-                ]);
-              }}
-              name={`${name}[${index}]`}
               value={value}
               isDisabled={isDisabled}
               {...rest}

apps/admin-ui/src/components/multi-line-input/multi-line-convert.ts

@@ -1,7 +0,0 @@
-export function stringToMultiline(value?: string): string[] {
-  return (value || "").split("##");
-}
-
-export function toStringValue(formValue: string[]): string {
-  return formValue.join("##");
-}