moved credentials to ui-shared (#27845)

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/clients/credentials/Credentials.tsx

@@ -12,16 +12,13 @@ import {
   Divider,
   FormGroup,
   PageSection,
-  Select,
-  SelectOption,
-  SelectVariant,
   Split,
   SplitItem,
 } from "@patternfly/react-core";
 import { useState } from "react";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "ui-shared";
+import { HelpItem, SelectControl } from "ui-shared";
 import { adminClient } from "../../admin-client";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
@@ -65,7 +62,6 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
 
   const [secret, setSecret] = useState("");
   const [accessToken, setAccessToken] = useState("");
-  const [open, isOpen] = useState(false);
 
   const selectedProvider = providers.find(
     (provider) => provider.id === clientAuthenticatorType,
@@ -147,47 +143,18 @@ export const Credentials = ({ client, save, refresh }: CredentialsProps) => {
         <AccessTokenConfirm />
         <Card isFlat>
           <CardBody>
-            <FormGroup
+            <SelectControl
+              name="clientAuthenticatorType"
               label={t("clientAuthenticator")}
-              fieldId="kc-client-authenticator-type"
-              labelIcon={
-                <HelpItem
-                  helpText={t("clientAuthenticatorTypeHelp")}
-                  fieldLabelId="clientAuthenticator"
-                />
-              }
-            >
-              <Controller
-                name="clientAuthenticatorType"
-                control={control}
-                defaultValue=""
-                render={({ field }) => (
-                  <Select
-                    toggleId="kc-client-authenticator-type"
-                    required
-                    onToggle={isOpen}
-                    onSelect={(_, value) => {
-                      field.onChange(value as string);
-                      isOpen(false);
-                    }}
-                    selections={field.value}
-                    variant={SelectVariant.single}
-                    aria-label={t("clientAuthenticator")}
-                    isOpen={open}
-                  >
-                    {providers.map((option) => (
-                      <SelectOption
-                        selected={option.id === field.value}
-                        key={option.id}
-                        value={option.id}
-                      >
-                        {option.displayName}
-                      </SelectOption>
-                    ))}
-                  </Select>
-                )}
-              />
-            </FormGroup>
+              labelIcon={t("clientAuthenticatorTypeHelp")}
+              controller={{
+                defaultValue: "",
+              }}
+              options={providers.map(({ id, displayName }) => ({
+                key: id!,
+                value: displayName || id!,
+              }))}
+            />
             {(clientAuthenticatorType === "client-jwt" ||
               clientAuthenticatorType === "client-secret-jwt") && (
               <SignedJWT clientAuthenticatorType={clientAuthenticatorType} />

js/apps/admin-ui/src/clients/credentials/SignedJWT.tsx

@@ -1,15 +1,6 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
-import {
-  FormGroup,
-  Select,
-  SelectOption,
-  SelectVariant,
-} from "@patternfly/react-core";
-
+import { SelectControl } from "ui-shared";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
-import { HelpItem } from "ui-shared";
 import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 
@@ -18,7 +9,6 @@ type SignedJWTProps = {
 };
 
 export const SignedJWT = ({ clientAuthenticatorType }: SignedJWTProps) => {
-  const { control } = useFormContext();
   const { cryptoInfo } = useServerInfo();
   const providers =
     clientAuthenticatorType === "client-jwt"
@@ -27,53 +17,21 @@ export const SignedJWT = ({ clientAuthenticatorType }: SignedJWTProps) => {
 
   const { t } = useTranslation();
 
-  const [open, isOpen] = useState(false);
   return (
-    <FormGroup
+    <SelectControl
+      name={convertAttributeNameToForm<FormFields>(
+        "attributes.token.endpoint.auth.signing.alg",
+      )}
       label={t("signatureAlgorithm")}
-      fieldId="kc-signature-algorithm"
-      labelIcon={
-        <HelpItem
-          helpText={t("signatureAlgorithmHelp")}
-          fieldLabelId="signatureAlgorithm"
-        />
-      }
-    >
-      <Controller
-        name={convertAttributeNameToForm<FormFields>(
-          "attributes.token.endpoint.auth.signing.alg",
-        )}
-        defaultValue=""
-        control={control}
-        render={({ field }) => (
-          <Select
-            maxHeight={200}
-            toggleId="kc-signature-algorithm"
-            onToggle={isOpen}
-            onSelect={(_, value) => {
-              field.onChange(value.toString());
-              isOpen(false);
-            }}
-            selections={field.value || t("anyAlgorithm")}
-            variant={SelectVariant.single}
-            aria-label={t("signatureAlgorithm")}
-            isOpen={open}
-          >
-            <SelectOption selected={field.value === ""} key="any" value="">
-              {t("anyAlgorithm")}
-            </SelectOption>
-            <>
-              {providers.map((option) => (
-                <SelectOption
-                  selected={option === field.value}
-                  key={option}
-                  value={option}
-                />
-              ))}
-            </>
-          </Select>
-        )}
-      />
-    </FormGroup>
+      labelIcon={t("signatureAlgorithmHelp")}
+      controller={{
+        defaultValue: "",
+      }}
+      maxHeight={200}
+      options={[
+        { key: "", value: t("anyAlgorithm") },
+        ...providers.map((option) => ({ key: option, value: option })),
+      ]}
+    />
   );
 };

js/apps/admin-ui/src/clients/credentials/X509.tsx

@@ -1,77 +1,28 @@
 import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
-import { FormGroup, Switch, ValidatedOptions } from "@patternfly/react-core";
-import { HelpItem } from "ui-shared";
-import { KeycloakTextInput } from "../../components/keycloak-text-input/KeycloakTextInput";
-import { beerify, convertAttributeNameToForm } from "../../util";
+import { TextControl } from "ui-shared";
+import { DefaultSwitchControl } from "../../components/SwitchControl";
+import { convertAttributeNameToForm } from "../../util";
 import { FormFields } from "../ClientDetails";
 
 export const X509 = () => {
   const { t } = useTranslation();
-  const {
-    register,
-    control,
-    formState: { errors },
-  } = useFormContext<FormFields>();
   return (
     <>
-      <FormGroup
+      <DefaultSwitchControl
+        name={convertAttributeNameToForm<FormFields>(
+          "attributes.x509.allow.regex.pattern.comparison",
+        )}
         label={t("allowRegexComparison")}
-        labelIcon={
-          <HelpItem
-            helpText={t("allowRegexComparisonHelp")}
-            fieldLabelId="allowRegexComparison"
-          />
-        }
-        fieldId="allowRegexComparison"
-        hasNoPaddingTop
-      >
-        <Controller
-          name={convertAttributeNameToForm<FormFields>(
-            "attributes.x509.allow.regex.pattern.comparison",
-          )}
-          defaultValue="false"
-          control={control}
-          render={({ field }) => (
-            <Switch
-              id="allowRegexComparison"
-              label={t("on")}
-              labelOff={t("off")}
-              isChecked={field.value === "true"}
-              onChange={(value) => field.onChange(value.toString())}
-              aria-label={t("allowRegexComparison")}
-            />
-          )}
-        />
-      </FormGroup>
-      <FormGroup
+        labelIcon={t("allowRegexComparisonHelp")}
+      />
+      <TextControl
+        name={convertAttributeNameToForm("attributes.x509.subjectdn")}
         label={t("subject")}
-        fieldId="kc-subject"
-        labelIcon={
-          <HelpItem helpText={t("subjectHelp")} fieldLabelId="subject" />
-        }
-        helperTextInvalid={t("required")}
-        validated={
-          errors.attributes?.[beerify("x509.subjectdn")]
-            ? ValidatedOptions.error
-            : ValidatedOptions.default
-        }
-        isRequired
-      >
-        <KeycloakTextInput
-          type="text"
-          id="kc-subject"
-          validated={
-            errors.attributes?.[beerify("x509.subjectdn")]
-              ? ValidatedOptions.error
-              : ValidatedOptions.default
-          }
-          {...register(
-            convertAttributeNameToForm("attributes.x509.subjectdn"),
-            { required: true },
-          )}
-        />
-      </FormGroup>
+        labelIcon={t("subjectHelp")}
+        rules={{
+          required: t("required"),
+        }}
+      />
     </>
   );
 };