Added dynamic properties to custom provider (#3042)
This commit is contained in:
parent
760af5db35
commit
2ecbb60d56
3 changed files with 51 additions and 0 deletions
37
src/components/dynamic/PasswordComponent.tsx
Normal file
37
src/components/dynamic/PasswordComponent.tsx
Normal file
|
@ -0,0 +1,37 @@
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { FormGroup } from "@patternfly/react-core";
|
||||
|
||||
import type { ComponentProps } from "./components";
|
||||
import { HelpItem } from "../help-enabler/HelpItem";
|
||||
import { PasswordInput } from "../password-input/PasswordInput";
|
||||
|
||||
export const PasswordComponent = ({
|
||||
name,
|
||||
label,
|
||||
helpText,
|
||||
defaultValue,
|
||||
isDisabled = false,
|
||||
}: ComponentProps) => {
|
||||
const { t } = useTranslation("dynamic");
|
||||
const { register } = useFormContext();
|
||||
|
||||
return (
|
||||
<FormGroup
|
||||
label={t(label!)}
|
||||
labelIcon={
|
||||
<HelpItem helpText={t(helpText!)} fieldLabelId={`dynamic:${label}`} />
|
||||
}
|
||||
fieldId={name!}
|
||||
>
|
||||
<PasswordInput
|
||||
id={name!}
|
||||
data-testid={name}
|
||||
isDisabled={isDisabled}
|
||||
ref={register()}
|
||||
name={`config.${name}`}
|
||||
defaultValue={defaultValue?.toString()}
|
||||
/>
|
||||
</FormGroup>
|
||||
);
|
||||
};
|
|
@ -12,6 +12,7 @@ import { MultiValuedStringComponent } from "./MultivaluedStringComponent";
|
|||
import { MultiValuedListComponent } from "./MultivaluedListComponent";
|
||||
import { GroupComponent } from "./GroupComponent";
|
||||
import { FileComponent } from "./FileComponent";
|
||||
import { PasswordComponent } from "./PasswordComponent";
|
||||
|
||||
export type ComponentProps = Omit<ConfigPropertyRepresentation, "type"> & {
|
||||
isDisabled?: boolean;
|
||||
|
@ -29,6 +30,7 @@ const ComponentTypes = [
|
|||
"ClientList",
|
||||
"MultivaluedString",
|
||||
"File",
|
||||
"Password",
|
||||
] as const;
|
||||
|
||||
export type Components = typeof ComponentTypes[number];
|
||||
|
@ -47,6 +49,7 @@ export const COMPONENTS: {
|
|||
MultivaluedList: MultiValuedListComponent,
|
||||
MultivaluedString: MultiValuedStringComponent,
|
||||
File: FileComponent,
|
||||
Password: PasswordComponent,
|
||||
} as const;
|
||||
|
||||
export const isValidComponentType = (value: string): value is Components =>
|
||||
|
|
|
@ -21,6 +21,8 @@ import { useRealm } from "../../context/realm-context/RealmContext";
|
|||
import { useAlerts } from "../../components/alert/Alerts";
|
||||
import { SettingsCache } from "../shared/SettingsCache";
|
||||
import { ExtendedHeader } from "../shared/ExtendedHeader";
|
||||
import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
|
||||
import { DynamicComponents } from "../../components/dynamic/DynamicComponents";
|
||||
|
||||
import "./custom-provider-settings.css";
|
||||
|
||||
|
@ -44,6 +46,12 @@ export default function CustomProviderSettings() {
|
|||
const { realm: realmName } = useRealm();
|
||||
const [parentId, setParentId] = useState("");
|
||||
|
||||
const provider = (
|
||||
useServerInfo().componentTypes?.[
|
||||
"org.keycloak.storage.UserStorageProvider"
|
||||
] || []
|
||||
).find((p) => p.id === providerId);
|
||||
|
||||
useFetch(
|
||||
async () => {
|
||||
if (id) {
|
||||
|
@ -126,6 +134,9 @@ export default function CustomProviderSettings() {
|
|||
validated={errors.name ? "error" : "default"}
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormProvider {...form}>
|
||||
<DynamicComponents properties={provider?.properties || []} />
|
||||
</FormProvider>
|
||||
<SettingsCache form={form} unWrap />
|
||||
<ActionGroup>
|
||||
<Button
|
||||
|
|
Loading…
Reference in a new issue