Added way to convert multi line to string (#3827)
This commit is contained in:
parent
79c1890f00
commit
d06669df27
10 changed files with 66 additions and 71 deletions
|
@ -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");
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -105,6 +105,7 @@ export const AccessSettings = ({
|
|||
)}
|
||||
aria-label={t("validPostLogoutRedirectUri")}
|
||||
addButtonLabel="clients:addPostLogoutRedirectUri"
|
||||
stringify
|
||||
/>
|
||||
</FormGroup>
|
||||
{protocol === "saml" && (
|
||||
|
|
|
@ -240,6 +240,7 @@ export const AdvancedSettings = ({
|
|||
>
|
||||
<MultiLineInput
|
||||
name={convertAttributeNameToForm("attributes.default.acr.values")}
|
||||
stringify
|
||||
/>
|
||||
</FormGroup>
|
||||
</>
|
||||
|
|
|
@ -460,6 +460,7 @@ export const FineGrainOpenIdConnect = ({
|
|||
name={convertAttributeNameToForm("attributes.request.uris")}
|
||||
aria-label={t("validRequestURIs")}
|
||||
addButtonLabel="clients:addRequestUri"
|
||||
stringify
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
|
|
|
@ -31,6 +31,7 @@ export const MultiValuedStringComponent = ({
|
|||
addButtonLabel={t("addMultivaluedLabel", {
|
||||
fieldLabel: t(label!).toLowerCase(),
|
||||
})}
|
||||
stringify
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
|
|
|
@ -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 = Array.isArray(value) && value.length !== 0 ? value : [""];
|
||||
const [fields, setFields] = useState<IdValue[]>([]);
|
||||
|
||||
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) => (
|
||||
<Fragment key={index}>
|
||||
{fields.map(({ id, value }, index) => (
|
||||
<Fragment key={id}>
|
||||
<InputGroup>
|
||||
<TextInput
|
||||
id={name + index}
|
||||
onChange={(value) => {
|
||||
setValue(name, [
|
||||
...fields.slice(0, index),
|
||||
value,
|
||||
...fields.slice(index + 1),
|
||||
]);
|
||||
}}
|
||||
name={`${name}[${index}]`}
|
||||
data-testid={name + index}
|
||||
onChange={(value) => updateValue(index, value)}
|
||||
name={`${name}[${index}].value`}
|
||||
value={value}
|
||||
isDisabled={isDisabled}
|
||||
{...rest}
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
export function stringToMultiline(value?: string): string[] {
|
||||
return (value || "").split("##");
|
||||
}
|
||||
|
||||
export function toStringValue(formValue: string[]): string {
|
||||
return formValue.join("##");
|
||||
}
|
Loading…
Reference in a new issue