Keycloak

1
import { UserProfileAttributeMetadata } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
2
import { FormGroup, InputGroup } from "@patternfly/react-core";
3
import { TFunction } from "i18next";
4
import { get } from "lodash-es";
5
import { PropsWithChildren, ReactNode } from "react";
6
import { UseFormReturn } from "react-hook-form";
7

8
import { HelpItem } from "../controls/HelpItem";
9
import {
10
  UserFormFields,
11
  fieldName,
12
  isRequiredAttribute,
13
  labelAttribute,
14
} from "./utils";
15

16
export type UserProfileGroupProps = {
17
  t: TFunction;
18
  form: UseFormReturn<UserFormFields>;
19
  attribute: UserProfileAttributeMetadata;
20
  renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
21
};
22

23
export const UserProfileGroup = ({
24
  t,
25
  form,
26
  attribute,
27
  renderer,
28
  children,
29
}: PropsWithChildren<UserProfileGroupProps>) => {
30
  const helpText = attribute.annotations?.["inputHelperTextBefore"] as string;
31
  const {
32
    formState: { errors },
33
  } = form;
34

35
  const component = renderer?.(attribute);
36
  return (
37
    <FormGroup
38
      key={attribute.name}
39
      label={labelAttribute(t, attribute) || ""}
40
      fieldId={attribute.name}
41
      isRequired={isRequiredAttribute(attribute)}
42
      validated={get(errors, fieldName(attribute.name)) ? "error" : "default"}
43
      helperTextInvalid={t(
44
        get(errors, fieldName(attribute.name))?.message as string,
45
      )}
46
      labelIcon={
47
        helpText ? (
48
          <HelpItem helpText={helpText} fieldLabelId={attribute.name!} />
49
        ) : undefined
50
      }
51
    >
52
      {component ? (
53
        <InputGroup>
54
          {children}
55
          {component}
56
        </InputGroup>
57
      ) : (
58
        children
59
      )}
60
    </FormGroup>
61
  );
62
};
63