Added text component for ProviderConfigProperty.TEXT_TYPE (#3269)

apps/admin-ui/src/components/dynamic/TextComponent.tsx

@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next";
+import { useFormContext } from "react-hook-form";
+import { FormGroup } from "@patternfly/react-core";
+
+import { HelpItem } from "../help-enabler/HelpItem";
+import { KeycloakTextArea } from "../keycloak-text-area/KeycloakTextArea";
+import type { ComponentProps } from "./components";
+import { convertToName } from "./DynamicComponents";
+
+export const TextComponent = ({
+  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!}
+    >
+      <KeycloakTextArea
+        id={name!}
+        data-testid={name}
+        isDisabled={isDisabled}
+        ref={register()}
+        name={convertToName(name!)}
+        defaultValue={defaultValue?.toString()}
+      />
+    </FormGroup>
+  );
+};

apps/admin-ui/src/components/dynamic/components.ts

@@ -2,6 +2,7 @@ import type { FunctionComponent } from "react";
 
 import type { ConfigPropertyRepresentation } from "@keycloak/keycloak-admin-client/lib/defs/authenticatorConfigInfoRepresentation";
 import { StringComponent } from "./StringComponent";
+import { TextComponent } from "./TextComponent";
 import { BooleanComponent } from "./BooleanComponent";
 import { ListComponent } from "./ListComponent";
 import { RoleComponent } from "./RoleComponent";
@@ -20,6 +21,7 @@ export type ComponentProps = Omit<ConfigPropertyRepresentation, "type"> & {
 
 const ComponentTypes = [
   "String",
+  "Text",
   "boolean",
   "List",
   "Role",
@@ -39,6 +41,7 @@ export const COMPONENTS: {
   [index in Components]: FunctionComponent<ComponentProps>;
 } = {
   String: StringComponent,
+  Text: TextComponent,
   boolean: BooleanComponent,
   List: ListComponent,
   Role: RoleComponent,