changed to use ui-shared (#27776)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
Erik Jan de Wit 2024-03-12 11:32:16 +01:00 committed by GitHub
parent 967ceddfbb
commit d2a7e87967
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 71 additions and 201 deletions

View file

@ -1,3 +1,4 @@
import Select from "../../../../../../forms/Select";
import CommonPage from "../../../../../CommonPage";
export default class KeysTab extends CommonPage {
@ -29,8 +30,7 @@ export default class KeysTab extends CommonPage {
keyPassword: string,
storePassword: string,
) {
cy.get("#archiveFormat").click();
cy.findAllByRole("option").contains(archiveFormat).click();
Select.selectItem(cy.get("#format"), archiveFormat);
cy.findByTestId(this.#keyAlias).type(keyAlias);
cy.findByTestId(this.#keyPassword).type(keyPassword);
cy.findByTestId(this.#storePassword).type(storePassword);

View file

@ -13,15 +13,12 @@ import {
FormGroup,
Modal,
ModalVariant,
Select,
SelectOption,
SelectVariant,
Text,
TextContent,
} from "@patternfly/react-core";
import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
import { HelpItem } from "ui-shared";
import { HelpItem, SelectControl } from "ui-shared";
import { StoreSettings } from "./StoreSettings";
import { FileUpload } from "../../components/json-file-upload/patternfly/FileUpload";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
@ -60,7 +57,6 @@ export const KeyForm = ({
const { t } = useTranslation();
const [filename, setFilename] = useState<string>();
const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
const { control, watch } = useFormContext<FormFields>();
const format = watch("format");
@ -73,45 +69,16 @@ export const KeyForm = ({
return (
<Form className="pf-u-pt-lg">
<FormGroup
<SelectControl
name="format"
label={t("archiveFormat")}
labelIcon={
<HelpItem
helpText={t("archiveFormatHelp")}
fieldLabelId="archiveFormat"
/>
}
fieldId="archiveFormat"
>
<Controller
name="format"
defaultValue={supportedKeystoreTypes[0]}
control={control}
render={({ field }) => (
<Select
toggleId="archiveFormat"
onToggle={setOpenArchiveFormat}
onSelect={(_, value) => {
field.onChange(value.toString());
setOpenArchiveFormat(false);
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("archiveFormat")}
isOpen={openArchiveFormat}
menuAppendTo="parent"
>
{supportedKeystoreTypes.map((option) => (
<SelectOption
selected={option === field.value}
key={option}
value={option}
/>
))}
</Select>
)}
/>
</FormGroup>
labelIcon={t("archiveFormatHelp")}
controller={{
defaultValue: supportedKeystoreTypes[0],
}}
menuAppendTo="parent"
options={supportedKeystoreTypes}
/>
{useFile && (
<FormGroup
label={t("importFile")}

View file

@ -1,6 +1,3 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import {
Button,
ButtonVariant,
@ -8,16 +5,15 @@ import {
FormGroup,
Modal,
ModalVariant,
Select,
SelectOption,
SelectVariant,
Text,
TextContent,
} from "@patternfly/react-core";
import { HelpItem } from "ui-shared";
import { StoreSettings } from "./StoreSettings";
import { Controller, FormProvider, useForm, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { SelectControl } from "ui-shared";
import { FileUpload } from "../../components/json-file-upload/patternfly/FileUpload";
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
import { StoreSettings } from "./StoreSettings";
type ImportKeyDialogProps = {
toggleDialog: () => void;
@ -39,8 +35,6 @@ export const ImportKeyDialog = ({
const form = useForm<ImportFile>();
const { control, handleSubmit } = form;
const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
const baseFormats = useServerInfo().cryptoInfo?.supportedKeystoreTypes ?? [];
const formats = baseFormats.concat([
@ -92,66 +86,35 @@ export const ImportKeyDialog = ({
<Text>{t("generateKeysDescription")}</Text>
</TextContent>
<Form className="pf-u-pt-lg">
<FormGroup
label={t("archiveFormat")}
labelIcon={
<HelpItem
helpText={t("archiveFormatHelp")}
fieldLabelId="archiveFormat"
/>
}
fieldId="archiveFormat"
>
<Controller
<FormProvider {...form}>
<SelectControl
name="keystoreFormat"
control={control}
defaultValue={formats[0]}
render={({ field }) => (
<Select
toggleId="archiveFormat"
onToggle={setOpenArchiveFormat}
onSelect={(_, value) => {
field.onChange(value as string);
setOpenArchiveFormat(false);
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("archiveFormat")}
isOpen={openArchiveFormat}
>
{formats.map((option) => (
<SelectOption
selected={option === field.value}
key={option}
value={option}
/>
))}
</Select>
)}
label={t("archiveFormat")}
labelIcon={t("archiveFormatHelp")}
controller={{
defaultValue: formats[0],
}}
options={formats}
/>
</FormGroup>
{baseFormats.includes(format) && (
<FormProvider {...form}>
<StoreSettings hidePassword />
</FormProvider>
)}
<FormGroup label={t("importFile")} fieldId="importFile">
<Controller
name="file"
control={control}
defaultValue={{ filename: "" }}
render={({ field }) => (
<FileUpload
id="importFile"
value={field.value.value}
filename={field.value.filename}
onChange={(value, filename) =>
field.onChange({ value, filename })
}
/>
)}
/>
</FormGroup>
{baseFormats.includes(format) && <StoreSettings hidePassword />}
<FormGroup label={t("importFile")} fieldId="importFile">
<Controller
name="file"
control={control}
defaultValue={{ filename: "" }}
render={({ field }) => (
<FileUpload
id="importFile"
value={field.value.value}
filename={field.value.filename}
onChange={(value, filename) =>
field.onChange({ value, filename })
}
/>
)}
/>
</FormGroup>
</FormProvider>
</Form>
</Modal>
);

View file

@ -8,22 +8,19 @@ import {
CardBody,
CardHeader,
CardTitle,
FormGroup,
PageSection,
Switch,
Text,
TextContent,
} from "@patternfly/react-core";
import { saveAs } from "file-saver";
import { useState } from "react";
import { Controller, useFormContext, useWatch } from "react-hook-form";
import { useFormContext, useWatch } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { HelpItem } from "ui-shared";
import { TextControl } from "ui-shared";
import { adminClient } from "../../admin-client";
import { DefaultSwitchControl } from "../../components/SwitchControl";
import { useAlerts } from "../../components/alert/Alerts";
import { FormAccess } from "../../components/form/FormAccess";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
import { convertAttributeNameToForm } from "../../util";
import { useFetch } from "../../utils/useFetch";
import useToggle from "../../utils/useToggle";
@ -44,7 +41,6 @@ export const Keys = ({ clientId, save, hasConfigureAccess }: KeysProps) => {
const { t } = useTranslation();
const {
control,
register,
getValues,
formState: { isDirty },
} = useFormContext<FormFields>();
@ -138,33 +134,12 @@ export const Keys = ({ clientId, save, hasConfigureAccess }: KeysProps) => {
fineGrainedAccess={hasConfigureAccess}
isHorizontal
>
<FormGroup
hasNoPaddingTop
<DefaultSwitchControl
name={convertAttributeNameToForm("attributes.use.jwks.url")}
label={t("useJwksUrl")}
fieldId="useJwksUrl"
labelIcon={
<HelpItem
helpText={t("useJwksUrlHelp")}
fieldLabelId="useJwksUrl"
/>
}
>
<Controller
name={convertAttributeNameToForm("attributes.use.jwks.url")}
control={control}
render={({ field }) => (
<Switch
data-testid="useJwksUrl"
id="useJwksUrl-switch"
label={t("on")}
labelOff={t("off")}
isChecked={field.value === "true"}
onChange={(value) => field.onChange(`${value}`)}
aria-label={t("useJwksUrl")}
/>
)}
/>
</FormGroup>
labelIcon={t("useJwksUrlHelp")}
stringify
/>
{useJwksUrl !== "true" &&
(keyInfo ? (
<Certificate plain keyInfo={keyInfo} />
@ -172,24 +147,12 @@ export const Keys = ({ clientId, save, hasConfigureAccess }: KeysProps) => {
"No client certificate configured"
))}
{useJwksUrl === "true" && (
<FormGroup
<TextControl
name={convertAttributeNameToForm("attributes.jwks.url")}
label={t("jwksUrl")}
fieldId="jwksUrl"
labelIcon={
<HelpItem
helpText={t("jwksUrlHelp")}
fieldLabelId="jwksUrl"
/>
}
>
<KeycloakTextInput
id="jwksUrl"
type="url"
{...register(
convertAttributeNameToForm("attributes.jwks.url"),
)}
/>
</FormGroup>
labelIcon={t("jwksUrlHelp")}
type="url"
/>
)}
<ActionGroup>
<Button

View file

@ -17,7 +17,6 @@ import { Fragment, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { FormPanel, HelpItem } from "ui-shared";
import { adminClient } from "../../admin-client";
import { useAlerts } from "../../components/alert/Alerts";
import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";

View file

@ -1,11 +1,9 @@
import { useTranslation } from "react-i18next";
import { useFormContext } from "react-hook-form";
import { FormGroup } from "@patternfly/react-core";
import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
import { HelpItem } from "ui-shared";
import { FormGroup } from "@patternfly/react-core";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { HelpItem, TextControl } from "ui-shared";
import { PasswordInput } from "../../components/password-input/PasswordInput";
import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
export const StoreSettings = ({
hidePassword = false,
@ -22,23 +20,14 @@ export const StoreSettings = ({
return (
<>
<FormGroup
<TextControl
name="keyAlias"
label={t("keyAlias")}
fieldId="keyAlias"
isRequired
labelIcon={
<HelpItem helpText={t("keyAliasHelp")} fieldLabelId="keyAlias" />
}
helperTextInvalid={t("required")}
validated={errors.keyAlias ? "error" : "default"}
>
<KeycloakTextInput
data-testid="keyAlias"
id="keyAlias"
validated={errors.keyAlias ? "error" : "default"}
{...register("keyAlias", { required: true })}
/>
</FormGroup>
labelIcon={t("keyAliasHelp")}
rules={{
required: t("required"),
}}
/>
{!hidePassword && (
<FormGroup
label={t("keyPassword")}
@ -62,22 +51,11 @@ export const StoreSettings = ({
</FormGroup>
)}
{isSaml && (
<FormGroup
<TextControl
name="realmAlias"
label={t("realmCertificateAlias")}
fieldId="realmCertificateAlias"
labelIcon={
<HelpItem
helpText={t("realmCertificateAliasHelp")}
fieldLabelId="realmCertificateAlias"
/>
}
>
<KeycloakTextInput
data-testid="realmCertificateAlias"
id="realmCertificateAlias"
{...register("realmAlias")}
/>
</FormGroup>
labelIcon={t("realmCertificateAliasHelp")}
/>
)}
<FormGroup
label={t("storePassword")}