changed to use ui-shared (#27776)
Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This commit is contained in:
parent
967ceddfbb
commit
d2a7e87967
6 changed files with 71 additions and 201 deletions
|
@ -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);
|
||||
|
|
|
@ -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")}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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")}
|
||||
|
|
Loading…
Reference in a new issue