@keycloakify/keycloak-ui-shared 26.0.6001

package/keycloak-theme/shared/keycloak-ui-shared/controls/NumberControl.tsx

@@ -0,0 +1,93 @@
+import {
+  NumberInput,
+  NumberInputProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+  useFormContext,
+} from "react-hook-form";
+
+import { getRuleValue } from "../utils/getRuleValue";
+import { FormLabel } from "./FormLabel";
+
+export type NumberControlOption = {
+  key: string;
+  value: string;
+};
+
+export type NumberControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = Omit<NumberInputProps, "name" | "isRequired" | "required"> &
+  UseControllerProps<T, P> & {
+    name: string;
+    label?: string;
+    labelIcon?: string;
+    controller: Omit<ControllerProps, "name" | "render">;
+  };
+
+export const NumberControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>({
+  name,
+  label,
+  controller,
+  labelIcon,
+  ...rest
+}: NumberControlProps<T, P>) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+
+  return (
+    <FormLabel
+      name={name}
+      label={label}
+      isRequired={controller.rules?.required === true}
+      error={errors[name]}
+      labelIcon={labelIcon}
+    >
+      <Controller
+        {...controller}
+        name={name}
+        control={control}
+        render={({ field }) => {
+          const required = !!controller.rules?.required;
+          const min = getRuleValue(controller.rules?.min);
+          const value = field.value ?? controller.defaultValue;
+          const setValue = (newValue: number) =>
+            field.onChange(
+              min !== undefined ? Math.max(newValue, Number(min)) : newValue,
+            );
+
+          return (
+            <NumberInput
+              {...rest}
+              id={name}
+              value={value}
+              validated={
+                errors[name] ? ValidatedOptions.error : ValidatedOptions.default
+              }
+              required={required}
+              min={Number(min)}
+              max={Number(controller.rules?.max)}
+              onPlus={() => setValue(value + 1)}
+              onMinus={() => setValue(value - 1)}
+              onChange={(event) => {
+                const newValue = Number(event.currentTarget.value);
+                setValue(!isNaN(newValue) ? newValue : controller.defaultValue);
+              }}
+            />
+          );
+        }}
+      />
+    </FormLabel>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/OrganizationTable.tsx

@@ -0,0 +1,122 @@
+import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
+import { Badge, Chip, ChipGroup } from "@patternfly/react-core";
+import { TableText } from "@patternfly/react-table";
+import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { KeycloakDataTable, LoaderFunction } from "./table/KeycloakDataTable";
+
+type OrgDetailLinkProps = {
+  link: FunctionComponent<
+    PropsWithChildren<{ organization: OrganizationRepresentation }>
+  >;
+  organization: OrganizationRepresentation;
+};
+
+const OrgDetailLink = ({ link, organization }: OrgDetailLinkProps) => {
+  const { t } = useTranslation();
+  const Component = link;
+  return (
+    <TableText wrapModifier="truncate">
+      <Component organization={organization}>
+        {organization.name}
+        {!organization.enabled && (
+          <Badge
+            key={`${organization.id}-disabled`}
+            isRead
+            className="pf-v5-u-ml-sm"
+          >
+            {t("disabled")}
+          </Badge>
+        )}
+      </Component>
+    </TableText>
+  );
+};
+
+const Domains = (org: OrganizationRepresentation) => {
+  const { t } = useTranslation();
+  return (
+    <ChipGroup
+      numChips={2}
+      expandedText={t("hide")}
+      collapsedText={t("showRemaining")}
+    >
+      {org.domains?.map((dn) => {
+        const name = typeof dn === "string" ? dn : dn.name;
+        return (
+          <Chip key={name} isReadOnly>
+            {name}
+          </Chip>
+        );
+      })}
+    </ChipGroup>
+  );
+};
+
+type OrganizationTableProps = PropsWithChildren & {
+  loader:
+    | LoaderFunction<OrganizationRepresentation>
+    | OrganizationRepresentation[];
+  link: FunctionComponent<
+    PropsWithChildren<{ organization: OrganizationRepresentation }>
+  >;
+  toolbarItem?: ReactNode;
+  isPaginated?: boolean;
+  onSelect?: (orgs: OrganizationRepresentation[]) => void;
+  onDelete?: (org: OrganizationRepresentation) => void;
+  deleteLabel?: string;
+};
+
+export const OrganizationTable = ({
+  loader,
+  toolbarItem,
+  isPaginated = false,
+  onSelect,
+  onDelete,
+  deleteLabel = "delete",
+  link,
+  children,
+}: OrganizationTableProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <KeycloakDataTable
+      loader={loader}
+      isPaginated={isPaginated}
+      ariaLabelKey="organizationList"
+      searchPlaceholderKey="searchOrganization"
+      toolbarItem={toolbarItem}
+      onSelect={onSelect}
+      canSelectAll={onSelect !== undefined}
+      actions={
+        onDelete
+          ? [
+              {
+                title: t(deleteLabel),
+                onRowClick: onDelete,
+              },
+            ]
+          : undefined
+      }
+      columns={[
+        {
+          name: "name",
+          displayKey: "name",
+          cellRenderer: (row) => (
+            <OrgDetailLink link={link} organization={row} />
+          ),
+        },
+        {
+          name: "domains",
+          displayKey: "domains",
+          cellRenderer: Domains,
+        },
+        {
+          name: "description",
+          displayKey: "description",
+        },
+      ]}
+      emptyState={children}
+    />
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/PasswordControl.tsx

@@ -0,0 +1,71 @@
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+import { FormLabel } from "./FormLabel";
+import { PasswordInput, PasswordInputProps } from "./PasswordInput";
+
+export type PasswordControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  Omit<PasswordInputProps, "name" | "isRequired" | "required"> & {
+    label: string;
+    labelIcon?: string;
+    isDisabled?: boolean;
+    helperText?: string;
+  };
+
+export const PasswordControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: PasswordControlProps<T, P>,
+) => {
+  const { labelIcon, ...rest } = props;
+  const required = !!props.rules?.required;
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      name={props.name}
+      label={props.label}
+      labelIcon={labelIcon}
+      isRequired={required}
+      error={fieldState.error}
+    >
+      <PasswordInput
+        isRequired={required}
+        id={props.name}
+        data-testid={props.name}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        isDisabled={props.isDisabled}
+        {...rest}
+        {...field}
+      />
+      {props.helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{props.helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormLabel>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/PasswordInput.tsx

@@ -0,0 +1,50 @@
+import {
+  Button,
+  InputGroup,
+  InputGroupItem,
+  TextInput,
+  type TextInputProps,
+} from "@patternfly/react-core";
+import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
+import { MutableRefObject, Ref, forwardRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export type PasswordInputProps = TextInputProps & {
+  hasReveal?: boolean;
+};
+
+const PasswordInputBase = ({
+  hasReveal = true,
+  innerRef,
+  ...rest
+}: PasswordInputProps) => {
+  const { t } = useTranslation();
+  const [hidePassword, setHidePassword] = useState(true);
+  return (
+    <InputGroup>
+      <InputGroupItem isFill>
+        <TextInput
+          {...rest}
+          type={hidePassword ? "password" : "text"}
+          ref={innerRef}
+        />
+      </InputGroupItem>
+      {hasReveal && (
+        <Button
+          variant="control"
+          aria-label={t("showPassword")}
+          onClick={() => setHidePassword(!hidePassword)}
+        >
+          {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
+        </Button>
+      )}
+    </InputGroup>
+  );
+};
+
+export const PasswordInput = forwardRef(
+  (props: PasswordInputProps, ref: Ref<HTMLInputElement>) => (
+    <PasswordInputBase {...props} innerRef={ref as MutableRefObject<any>} />
+  ),
+);
+PasswordInput.displayName = "PasswordInput";

package/keycloak-theme/shared/keycloak-ui-shared/controls/SwitchControl.tsx

@@ -0,0 +1,67 @@
+import {
+  Controller,
+  FieldValues,
+  FieldPath,
+  UseControllerProps,
+  PathValue,
+  useFormContext,
+} from "react-hook-form";
+import { SwitchProps, Switch } from "@patternfly/react-core";
+import { FormLabel } from "./FormLabel";
+
+export type SwitchControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = Omit<SwitchProps, "name" | "defaultValue" | "ref"> &
+  UseControllerProps<T, P> & {
+    name: string;
+    label?: string;
+    labelIcon?: string;
+    labelOn: string;
+    labelOff: string;
+    stringify?: boolean;
+  };
+
+export const SwitchControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>({
+  labelOn,
+  stringify,
+  defaultValue,
+  labelIcon,
+  ...props
+}: SwitchControlProps<T, P>) => {
+  const fallbackValue = stringify ? "false" : false;
+  const defValue = defaultValue ?? (fallbackValue as PathValue<T, P>);
+  const { control } = useFormContext();
+  return (
+    <FormLabel
+      hasNoPaddingTop
+      name={props.name}
+      isRequired={props.rules?.required === true}
+      label={props.label}
+      labelIcon={labelIcon}
+    >
+      <Controller
+        control={control}
+        name={props.name}
+        defaultValue={defValue}
+        render={({ field: { onChange, value } }) => (
+          <Switch
+            {...props}
+            id={props.name}
+            data-testid={props.name}
+            label={labelOn}
+            isChecked={stringify ? value === "true" : value}
+            onChange={(e, checked) => {
+              const value = stringify ? checked.toString() : checked;
+              props.onChange?.(e, checked);
+              onChange(value);
+            }}
+          />
+        )}
+      />
+    </FormLabel>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/TextAreaControl.tsx

@@ -0,0 +1,60 @@
+import {
+  TextArea,
+  TextAreaProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+import { FormLabel } from "./FormLabel";
+
+export type TextAreaControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  TextAreaProps & {
+    label: string;
+    labelIcon?: string;
+    isDisabled?: boolean;
+  };
+
+export const TextAreaControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: TextAreaControlProps<T, P>,
+) => {
+  const required = !!props.rules?.required;
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      isRequired={required}
+      label={props.label}
+      labelIcon={props.labelIcon}
+      name={props.name}
+      error={fieldState.error}
+    >
+      <TextArea
+        isRequired={required}
+        id={props.name}
+        data-testid={props.name}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        isDisabled={props.isDisabled}
+        {...field}
+      />
+    </FormLabel>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/TextControl.tsx

@@ -0,0 +1,75 @@
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  TextInputProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import { ReactNode } from "react";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+import { FormLabel } from "./FormLabel";
+
+export type TextControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  Omit<TextInputProps, "name" | "isRequired" | "required"> & {
+    label: string;
+    labelIcon?: string | ReactNode;
+    isDisabled?: boolean;
+    helperText?: string;
+    "data-testid"?: string;
+  };
+
+export const TextControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: TextControlProps<T, P>,
+) => {
+  const { labelIcon, helperText, ...rest } = props;
+  const required = !!props.rules?.required;
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      name={props.name}
+      label={props.label}
+      labelIcon={labelIcon}
+      isRequired={required}
+      error={fieldState.error}
+    >
+      <TextInput
+        isRequired={required}
+        id={props.name}
+        data-testid={props["data-testid"] || props.name}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        isDisabled={props.isDisabled}
+        {...rest}
+        {...field}
+      />
+      {helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormLabel>
+  );
+};

package/keycloak-theme/shared/keycloak-ui-shared/controls/keycloak-text-area/KeycloakTextArea.tsx

@@ -0,0 +1,23 @@
+// TODO: Remove code once the following issue has been fixed:
+// https://github.com/patternfly/patternfly-react/issues/10192
+import { TextArea } from "@patternfly/react-core";
+import {
+  ComponentProps,
+  HTMLProps,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
+
+// PatternFly changes the signature of the 'onFocus' and 'onBlur' handlers for textarea elements.
+// This causes issues with React Hook Form as it expects the default signature for a textarea element.
+// So we have to create this wrapper component that takes care of converting these signatures for us.
+
+export type KeycloakTextAreaProps = Omit<
+  ComponentProps<typeof TextArea>,
+  "onFocus" | "onBlur"
+> &
+  Pick<HTMLProps<HTMLTextAreaElement>, "onFocus" | "onBlur">;
+
+export const KeycloakTextArea = TextArea as ForwardRefExoticComponent<
+  KeycloakTextAreaProps & RefAttributes<HTMLTextAreaElement>
+>;

package/keycloak-theme/shared/keycloak-ui-shared/controls/select-control/SelectControl.tsx

@@ -0,0 +1,75 @@
+import { ChipGroupProps, SelectProps } from "@patternfly/react-core";
+import {
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from "react-hook-form";
+import { SingleSelectControl } from "./SingleSelectControl";
+import { TypeaheadSelectControl } from "./TypeaheadSelectControl";
+
+type Variant = `${SelectVariant}`;
+
+export enum SelectVariant {
+  single = "single",
+  typeahead = "typeahead",
+  typeaheadMulti = "typeaheadMulti",
+}
+
+export type SelectControlOption = {
+  key: string;
+  value: string;
+};
+
+export type OptionType = string[] | SelectControlOption[];
+
+export type SelectControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = Omit<
+  SelectProps,
+  | "name"
+  | "toggle"
+  | "selections"
+  | "onSelect"
+  | "onClear"
+  | "isOpen"
+  | "onFilter"
+  | "variant"
+> &
+  UseControllerProps<T, P> & {
+    name: string;
+    label?: string;
+    options: OptionType;
+    labelIcon?: string;
+    controller: Omit<ControllerProps, "name" | "render">;
+    onFilter?: (value: string) => void;
+    variant?: Variant;
+    isDisabled?: boolean;
+    menuAppendTo?: string;
+    placeholderText?: string;
+    chipGroupProps?: ChipGroupProps;
+  };
+
+export const isSelectBasedOptions = (
+  options: OptionType,
+): options is SelectControlOption[] => typeof options[0] !== "string";
+
+export const isString = (
+  option: SelectControlOption | string,
+): option is string => typeof option === "string";
+export const key = (option: SelectControlOption | string) =>
+  isString(option) ? option : option.key;
+
+export const SelectControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>({
+  variant = SelectVariant.single,
+  ...rest
+}: SelectControlProps<T, P>) =>
+  variant === SelectVariant.single ? (
+    <SingleSelectControl {...rest} />
+  ) : (
+    <TypeaheadSelectControl {...rest} variant={variant} />
+  );