@keycloakify/keycloak-ui-shared 26.0.6001

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/MultiInputComponent.tsx

@@ -0,0 +1,146 @@
+import {
+  Button,
+  ButtonVariant,
+  InputGroup,
+  TextInput,
+  TextInputProps,
+  TextInputTypes,
+  InputGroupItem,
+} from "@patternfly/react-core";
+import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
+import { type TFunction } from "i18next";
+import { Fragment, useEffect, useMemo } from "react";
+import { FieldPath, UseFormReturn, useWatch } from "react-hook-form";
+
+import { InputType, UserProfileFieldProps } from "./UserProfileFields";
+import { UserProfileGroup } from "./UserProfileGroup";
+import { UserFormFields, fieldName, labelAttribute } from "./utils";
+
+export const MultiInputComponent = ({
+  t,
+  form,
+  attribute,
+  renderer,
+  ...rest
+}: UserProfileFieldProps) => (
+  <UserProfileGroup t={t} form={form} attribute={attribute} renderer={renderer}>
+    <MultiLineInput
+      t={t}
+      form={form}
+      aria-label={labelAttribute(t, attribute)}
+      name={fieldName(attribute.name)!}
+      addButtonLabel={t("addMultivaluedLabel", {
+        fieldLabel: labelAttribute(t, attribute),
+      })}
+      {...rest}
+    />
+  </UserProfileGroup>
+);
+
+export type MultiLineInputProps = Omit<TextInputProps, "form"> & {
+  t: TFunction;
+  name: FieldPath<UserFormFields>;
+  form: UseFormReturn<UserFormFields>;
+  addButtonLabel?: string;
+  isDisabled?: boolean;
+  defaultValue?: string[];
+  inputType: InputType;
+};
+
+const MultiLineInput = ({
+  t,
+  name,
+  inputType,
+  form,
+  addButtonLabel,
+  isDisabled = false,
+  defaultValue,
+  id,
+  ...rest
+}: MultiLineInputProps) => {
+  const { register, setValue, control } = form;
+  const value = useWatch({
+    name,
+    control,
+    defaultValue: defaultValue || "",
+  });
+
+  const fields = useMemo<string[]>(() => {
+    return Array.isArray(value) && value.length !== 0
+      ? value
+      : defaultValue || [""];
+  }, [value]);
+
+  const remove = (index: number) => {
+    update([...fields.slice(0, index), ...fields.slice(index + 1)]);
+  };
+
+  const append = () => {
+    update([...fields, ""]);
+  };
+
+  const updateValue = (index: number, value: string) => {
+    update([...fields.slice(0, index), value, ...fields.slice(index + 1)]);
+  };
+
+  const update = (values: string[]) => {
+    const fieldValue = values.flatMap((field) => field);
+    setValue(name, fieldValue, {
+      shouldDirty: true,
+    });
+  };
+
+  const type = inputType.startsWith("html")
+    ? (inputType.substring("html".length + 2) as TextInputTypes)
+    : "text";
+
+  useEffect(() => {
+    register(name);
+  }, [register]);
+
+  return (
+    <div id={id}>
+      {fields.map((value, index) => (
+        <Fragment key={index}>
+          <InputGroup>
+            <InputGroupItem isFill>
+              <TextInput
+                data-testid={name + index}
+                onChange={(_event, value) => updateValue(index, value)}
+                name={`${name}.${index}.value`}
+                value={value}
+                isDisabled={isDisabled}
+                type={type}
+                {...rest}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button
+                data-testid={"remove" + index}
+                variant={ButtonVariant.link}
+                onClick={() => remove(index)}
+                tabIndex={-1}
+                aria-label={t("remove")}
+                isDisabled={fields.length === 1 || isDisabled}
+              >
+                <MinusCircleIcon />
+              </Button>
+            </InputGroupItem>
+          </InputGroup>
+          {index === fields.length - 1 && (
+            <Button
+              variant={ButtonVariant.link}
+              onClick={append}
+              tabIndex={-1}
+              aria-label={t("add")}
+              data-testid="addValue"
+              isDisabled={!value || isDisabled}
+            >
+              <PlusCircleIcon /> {t(addButtonLabel || "add")}
+            </Button>
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/OptionsComponent.tsx

@@ -0,0 +1,63 @@
+import { Checkbox, Radio } from "@patternfly/react-core";
+import { Controller } from "react-hook-form";
+import {
+  OptionLabel,
+  Options,
+  UserProfileFieldProps,
+} from "./UserProfileFields";
+import { UserProfileGroup } from "./UserProfileGroup";
+import { fieldName, isRequiredAttribute, label } from "./utils";
+
+export const OptionComponent = (props: UserProfileFieldProps) => {
+  const { form, inputType, attribute } = props;
+  const isRequired = isRequiredAttribute(attribute);
+  const isMultiSelect = inputType.startsWith("multiselect");
+  const Component = isMultiSelect ? Checkbox : Radio;
+  const options =
+    (attribute.validators?.options as Options | undefined)?.options || [];
+
+  const optionLabel =
+    (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
+  const prefix = attribute.annotations?.[
+    "inputOptionLabelsI18nPrefix"
+  ] as string;
+
+  return (
+    <UserProfileGroup {...props}>
+      <Controller
+        name={fieldName(attribute.name)}
+        control={form.control}
+        defaultValue=""
+        render={({ field }) => (
+          <>
+            {options.map((option) => (
+              <Component
+                key={option}
+                id={option}
+                data-testid={option}
+                label={label(props.t, optionLabel[option], option, prefix)}
+                value={option}
+                isChecked={field.value.includes(option)}
+                onChange={() => {
+                  if (isMultiSelect) {
+                    if (field.value.includes(option)) {
+                      field.onChange(
+                        field.value.filter((item: string) => item !== option),
+                      );
+                    } else {
+                      field.onChange([...field.value, option]);
+                    }
+                  } else {
+                    field.onChange([option]);
+                  }
+                }}
+                readOnly={attribute.readOnly}
+                isRequired={isRequired}
+              />
+            ))}
+          </>
+        )}
+      />
+    </UserProfileGroup>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/SelectComponent.tsx

@@ -0,0 +1,109 @@
+import { SelectOption } from "@patternfly/react-core";
+import { useState } from "react";
+import { Controller, ControllerRenderProps } from "react-hook-form";
+import { KeycloakSelect, SelectVariant } from "../select/KeycloakSelect";
+import {
+  OptionLabel,
+  Options,
+  UserProfileFieldProps,
+} from "./UserProfileFields";
+import { UserProfileGroup } from "./UserProfileGroup";
+import { UserFormFields, fieldName, label } from "./utils";
+
+export const SelectComponent = (props: UserProfileFieldProps) => {
+  const { t, form, inputType, attribute } = props;
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const isMultiValue = inputType === "multiselect";
+
+  const setValue = (
+    value: string,
+    field: ControllerRenderProps<UserFormFields>,
+  ) => {
+    if (isMultiValue) {
+      if (field.value.includes(value)) {
+        field.onChange(field.value.filter((item: string) => item !== value));
+      } else {
+        if (Array.isArray(field.value)) {
+          field.onChange([...field.value, value]);
+        } else {
+          field.onChange([value]);
+        }
+      }
+    } else {
+      field.onChange(value === field.value ? "" : value);
+    }
+  };
+
+  const options =
+    (attribute.validators?.options as Options | undefined)?.options || [];
+
+  const optionLabel =
+    (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
+  const prefix = attribute.annotations?.[
+    "inputOptionLabelsI18nPrefix"
+  ] as string;
+
+  const fetchLabel = (option: string) =>
+    label(props.t, optionLabel[option], option, prefix);
+
+  const convertOptions = (selected: string) =>
+    options
+      .filter((o) =>
+        fetchLabel(o)!.toLowerCase().includes(filter.toLowerCase()),
+      )
+      .map((option) => (
+        <SelectOption
+          selected={selected === option}
+          key={option}
+          value={option}
+        >
+          {fetchLabel(option)}
+        </SelectOption>
+      ));
+
+  return (
+    <UserProfileGroup {...props}>
+      <Controller
+        name={fieldName(attribute.name)}
+        defaultValue=""
+        control={form.control}
+        render={({ field }) => (
+          <KeycloakSelect
+            toggleId={attribute.name}
+            onToggle={(b) => setOpen(b)}
+            onClear={() => setValue("", field)}
+            onSelect={(value) => {
+              const option = value.toString();
+              setValue(option, field);
+              if (!Array.isArray(field.value)) {
+                setOpen(false);
+              }
+            }}
+            selections={
+              isMultiValue && Array.isArray(field.value)
+                ? field.value
+                : fetchLabel(field.value)
+            }
+            variant={
+              isMultiValue
+                ? SelectVariant.typeaheadMulti
+                : options.length >= 10
+                  ? SelectVariant.typeahead
+                  : SelectVariant.single
+            }
+            aria-label={t("selectOne")}
+            isOpen={open}
+            isDisabled={attribute.readOnly}
+            onFilter={(value) => {
+              setFilter(value);
+              return convertOptions(field.value);
+            }}
+          >
+            {convertOptions(field.value)}
+          </KeycloakSelect>
+        )}
+      />
+    </UserProfileGroup>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/TextAreaComponent.tsx

@@ -0,0 +1,23 @@
+import { KeycloakTextArea } from "../controls/keycloak-text-area/KeycloakTextArea";
+import { UserProfileFieldProps } from "./UserProfileFields";
+import { UserProfileGroup } from "./UserProfileGroup";
+import { fieldName, isRequiredAttribute } from "./utils";
+
+export const TextAreaComponent = (props: UserProfileFieldProps) => {
+  const { form, attribute } = props;
+  const isRequired = isRequiredAttribute(attribute);
+
+  return (
+    <UserProfileGroup {...props}>
+      <KeycloakTextArea
+        id={attribute.name}
+        data-testid={attribute.name}
+        {...form.register(fieldName(attribute.name))}
+        cols={attribute.annotations?.["inputTypeCols"] as number}
+        rows={attribute.annotations?.["inputTypeRows"] as number}
+        readOnly={attribute.readOnly}
+        isRequired={isRequired}
+      />
+    </UserProfileGroup>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/TextComponent.tsx

@@ -0,0 +1,32 @@
+import { TextInput, TextInputTypes } from "@patternfly/react-core";
+
+import { UserProfileFieldProps } from "./UserProfileFields";
+import { UserProfileGroup } from "./UserProfileGroup";
+import { fieldName, isRequiredAttribute, label } from "./utils";
+
+export const TextComponent = (props: UserProfileFieldProps) => {
+  const { form, inputType, attribute } = props;
+  const isRequired = isRequiredAttribute(attribute);
+  const type = inputType.startsWith("html")
+    ? (inputType.substring("html".length + 2) as TextInputTypes)
+    : "text";
+
+  return (
+    <UserProfileGroup {...props}>
+      <TextInput
+        id={attribute.name}
+        data-testid={attribute.name}
+        type={type}
+        placeholder={label(
+          props.t,
+          attribute.annotations?.["inputTypePlaceholder"] as string,
+          attribute.name,
+          attribute.annotations?.["inputOptionLabelsI18nPrefix"] as string,
+        )}
+        readOnly={attribute.readOnly}
+        isRequired={isRequired}
+        {...form.register(fieldName(attribute.name))}
+      />
+    </UserProfileGroup>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/UserProfileFields.tsx

@@ -0,0 +1,243 @@
+import {
+  UserProfileAttributeGroupMetadata,
+  UserProfileAttributeMetadata,
+  UserProfileMetadata,
+} from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
+import { Text } from "@patternfly/react-core";
+import { TFunction } from "i18next";
+import { ReactNode, useMemo, type JSX } from "react";
+import { FieldPath, UseFormReturn } from "react-hook-form";
+
+import { ScrollForm } from "../main";
+import { LocaleSelector } from "./LocaleSelector";
+import { MultiInputComponent } from "./MultiInputComponent";
+import { OptionComponent } from "./OptionsComponent";
+import { SelectComponent } from "./SelectComponent";
+import { TextAreaComponent } from "./TextAreaComponent";
+import { TextComponent } from "./TextComponent";
+import { UserFormFields, fieldName, isRootAttribute, label } from "./utils";
+
+export type UserProfileError = {
+  responseData: { errors?: { errorMessage: string }[] };
+};
+
+export type Options = {
+  options?: string[];
+};
+
+export type InputType =
+  | "text"
+  | "textarea"
+  | "select"
+  | "select-radiobuttons"
+  | "multiselect"
+  | "multiselect-checkboxes"
+  | "html5-email"
+  | "html5-tel"
+  | "html5-url"
+  | "html5-number"
+  | "html5-range"
+  | "html5-datetime-local"
+  | "html5-date"
+  | "html5-month"
+  | "html5-time"
+  | "multi-input";
+
+export type UserProfileFieldProps = {
+  t: TFunction;
+  form: UseFormReturn<UserFormFields>;
+  inputType: InputType;
+  attribute: UserProfileAttributeMetadata;
+  renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
+};
+
+export type OptionLabel = Record<string, string> | undefined;
+
+export const FIELDS: {
+  [type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
+} = {
+  text: TextComponent,
+  textarea: TextAreaComponent,
+  select: SelectComponent,
+  "select-radiobuttons": OptionComponent,
+  multiselect: SelectComponent,
+  "multiselect-checkboxes": OptionComponent,
+  "html5-email": TextComponent,
+  "html5-tel": TextComponent,
+  "html5-url": TextComponent,
+  "html5-number": TextComponent,
+  "html5-range": TextComponent,
+  "html5-datetime-local": TextComponent,
+  "html5-date": TextComponent,
+  "html5-month": TextComponent,
+  "html5-time": TextComponent,
+  "multi-input": MultiInputComponent,
+} as const;
+
+export type UserProfileFieldsProps = {
+  t: TFunction;
+  form: UseFormReturn<UserFormFields>;
+  userProfileMetadata: UserProfileMetadata;
+  supportedLocales: string[];
+  currentLocale: string;
+  hideReadOnly?: boolean;
+  renderer?: (
+    attribute: UserProfileAttributeMetadata,
+  ) => JSX.Element | undefined;
+};
+
+type GroupWithAttributes = {
+  group: UserProfileAttributeGroupMetadata;
+  attributes: UserProfileAttributeMetadata[];
+};
+
+export const UserProfileFields = ({
+  t,
+  form,
+  userProfileMetadata,
+  supportedLocales,
+  currentLocale,
+  hideReadOnly = false,
+  renderer,
+}: UserProfileFieldsProps) => {
+  // Group attributes by group, for easier rendering.
+  const groupsWithAttributes = useMemo(() => {
+    // If there are no attributes, there is no need to group them.
+    if (!userProfileMetadata.attributes) {
+      return [];
+    }
+
+    // Hide read-only attributes if 'hideReadOnly' is enabled.
+    const attributes = hideReadOnly
+      ? userProfileMetadata.attributes.filter(({ readOnly }) => !readOnly)
+      : userProfileMetadata.attributes;
+
+    return [
+      // Insert an empty group for attributes without a group.
+      { name: undefined },
+      ...(userProfileMetadata.groups ?? []),
+    ].map<GroupWithAttributes>((group) => ({
+      group,
+      attributes: attributes.filter(
+        (attribute) => attribute.group === group.name,
+      ),
+    }));
+  }, [
+    hideReadOnly,
+    userProfileMetadata.groups,
+    userProfileMetadata.attributes,
+  ]);
+
+  if (groupsWithAttributes.length === 0) {
+    return null;
+  }
+
+  return (
+    <ScrollForm
+      label={t("jumpToSection")}
+      sections={groupsWithAttributes
+        .filter((group) => group.attributes.length > 0)
+        .map(({ group, attributes }) => ({
+          title: label(t, group.displayHeader, group.name) || t("general"),
+          panel: (
+            <div className="pf-v5-c-form">
+              {group.displayDescription && (
+                <Text className="pf-v5-u-pb-lg">
+                  {label(t, group.displayDescription, "")}
+                </Text>
+              )}
+              {attributes.map((attribute) => (
+                <FormField
+                  key={attribute.name}
+                  t={t}
+                  form={form}
+                  supportedLocales={supportedLocales}
+                  currentLocale={currentLocale}
+                  renderer={renderer}
+                  attribute={attribute}
+                />
+              ))}
+            </div>
+          ),
+        }))}
+    />
+  );
+};
+
+type FormFieldProps = {
+  t: TFunction;
+  form: UseFormReturn<UserFormFields>;
+  supportedLocales: string[];
+  currentLocale: string;
+  attribute: UserProfileAttributeMetadata;
+  renderer?: (
+    attribute: UserProfileAttributeMetadata,
+  ) => JSX.Element | undefined;
+};
+
+const FormField = ({
+  t,
+  form,
+  renderer,
+  supportedLocales,
+  currentLocale,
+  attribute,
+}: FormFieldProps) => {
+  const value = form.watch(
+    fieldName(attribute.name) as FieldPath<UserFormFields>,
+  );
+  const inputType = useMemo(() => determineInputType(attribute), [attribute]);
+
+  const Component =
+    attribute.multivalued ||
+    (isMultiValue(value) && attribute.annotations?.inputType === undefined)
+      ? FIELDS["multi-input"]
+      : FIELDS[inputType];
+
+  if (attribute.name === "locale")
+    return (
+      <LocaleSelector
+        form={form}
+        supportedLocales={supportedLocales}
+        currentLocale={currentLocale}
+        t={t}
+        attribute={attribute}
+      />
+    );
+  return (
+    <Component
+      t={t}
+      form={form}
+      inputType={inputType}
+      attribute={attribute}
+      renderer={renderer}
+    />
+  );
+};
+
+const DEFAULT_INPUT_TYPE = "text" satisfies InputType;
+
+function determineInputType(
+  attribute: UserProfileAttributeMetadata,
+): InputType {
+  // Always treat the root attributes as a text field.
+  if (isRootAttribute(attribute.name)) {
+    return "text";
+  }
+
+  const inputType = attribute.annotations?.inputType;
+
+  // if we have an valid input type use that to render
+  if (isValidInputType(inputType)) {
+    return inputType;
+  }
+
+  // In all other cases use the default
+  return DEFAULT_INPUT_TYPE;
+}
+
+const isValidInputType = (value: unknown): value is InputType =>
+  typeof value === "string" && value in FIELDS;
+
+const isMultiValue = (value: unknown): boolean =>
+  Array.isArray(value) && value.length > 1;

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/UserProfileGroup.tsx

@@ -0,0 +1,71 @@
+import { UserProfileAttributeMetadata } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
+import { FormGroup, InputGroup } from "@patternfly/react-core";
+import { TFunction } from "i18next";
+import { get } from "lodash-es";
+import { PropsWithChildren, ReactNode } from "react";
+import { UseFormReturn, type FieldError } from "react-hook-form";
+
+import { FormErrorText } from "../controls/FormErrorText";
+import { HelpItem } from "../controls/HelpItem";
+import {
+  UserFormFields,
+  fieldName,
+  isRequiredAttribute,
+  label,
+  labelAttribute,
+} from "./utils";
+
+export type UserProfileGroupProps = {
+  t: TFunction;
+  form: UseFormReturn<UserFormFields>;
+  attribute: UserProfileAttributeMetadata;
+  renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
+};
+
+export const UserProfileGroup = ({
+  t,
+  form,
+  attribute,
+  renderer,
+  children,
+}: PropsWithChildren<UserProfileGroupProps>) => {
+  const helpText = label(
+    t,
+    attribute.annotations?.["inputHelperTextBefore"] as string,
+  );
+  const {
+    formState: { errors },
+  } = form;
+
+  const component = renderer?.(attribute);
+  const error = get(errors, fieldName(attribute.name)) as FieldError;
+
+  return (
+    <FormGroup
+      key={attribute.name}
+      label={labelAttribute(t, attribute) || ""}
+      fieldId={attribute.name}
+      isRequired={isRequiredAttribute(attribute)}
+      labelIcon={
+        helpText ? (
+          <HelpItem helpText={helpText} fieldLabelId={attribute.name!} />
+        ) : undefined
+      }
+    >
+      {component ? (
+        <InputGroup>
+          {children}
+          {component}
+        </InputGroup>
+      ) : (
+        children
+      )}
+      {error && (
+        <FormErrorText
+          data-testid={`${attribute.name}-helper`}
+          message={error.message as string}
+        />
+      )}
+    </FormGroup>
+  );
+};