Changed key provider form to use ui shared (#27704)

* replaced KeycloakTextInput with TextControl

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* replaced KeycloakTextInput with TextControl and fixed helpText

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* small test fix

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts

@@ -83,7 +83,7 @@ export default class RealmSettingsPage extends CommonPage {
   activeSwitch = "active";
   enabledSwitch = "enabled";
   addProviderButton = "add-provider-button";
-  displayName = "name-input";
+  displayName = "name";
   enableEvents = "eventsEnabled";
   eventsUserSave = "save-user";
   enableAdminEvents = "adminEventsEnabled";

js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties

@@ -750,6 +750,7 @@ eventTypes.EXECUTE_ACTIONS_ERROR.name=Execute actions error
 path=Path
 overwritten=Overwritten
 mapperNameHelp=Name of the mapper
+providerIdHelp=Provider ID
 deleteProviderError=Error deleting the provider
 supportedLocalesHelp=The locales to support for this realm. The user chooses one of these locales on the login screen.
 comparisonHelp=Specifies the comparison method used to evaluate the requested context classes or statements. The default is "Exact".

js/apps/admin-ui/src/realm-settings/keys/key-providers/KeyProviderForm.tsx

@@ -3,21 +3,16 @@ import {
   ActionGroup,
   AlertVariant,
   Button,
-  FormGroup,
   PageSection,
-  TextInput,
-  ValidatedOptions,
 } from "@patternfly/react-core";
-import { Controller, FormProvider, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { HelpItem } from "ui-shared";
+import { TextControl } from "ui-shared";
-
 import { adminClient } from "../../../admin-client";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { DynamicComponents } from "../../../components/dynamic/DynamicComponents";
 import { FormAccess } from "../../../components/form/FormAccess";
-import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import { ViewHeader } from "../../../components/view-header/ViewHeader";
 import { useServerInfo } from "../../../context/server-info/ServerInfoProvider";
 import { KEY_PROVIDER_TYPE } from "../../../util";
@@ -47,13 +42,7 @@ export const KeyProviderForm = ({
   const form = useForm<ComponentRepresentation>({
     mode: "onChange",
   });
-  const {
+  const { handleSubmit, reset } = form;
-    register,
-    control,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = form;
 
   const save = async (component: ComponentRepresentation) => {
     if (component.config)
@@ -99,61 +88,33 @@ export const KeyProviderForm = ({
 
   return (
     <FormAccess isHorizontal role="manage-realm" onSubmit={handleSubmit(save)}>
-      {id && (
-        <FormGroup
-          label={t("providerId")}
-          labelIcon={
-            <HelpItem
-              helpText={t("mapperNameHelp")}
-              fieldLabelId="providerId"
-            />
-          }
-          fieldId="providerId"
-          isRequired
-        >
-          <KeycloakTextInput
-            id="providerId"
-            data-testid="providerId-input"
-            isReadOnly
-            {...register("id")}
-          />
-        </FormGroup>
-      )}
-      <FormGroup
-        label={t("name")}
-        labelIcon={
-          <HelpItem helpText={t("mapperNameHelp")} fieldLabelId="name" />
-        }
-        fieldId="name"
-        isRequired
-        validated={
-          errors.name ? ValidatedOptions.error : ValidatedOptions.default
-        }
-        helperTextInvalid={t("required")}
-      >
-        <Controller
-          name="name"
-          control={control}
-          rules={{ required: true }}
-          defaultValue={providerType}
-          render={({ field }) => (
-            <TextInput
-              id="name"
-              value={field.value}
-              onChange={field.onChange}
-              data-testid="name-input"
-            />
-          )}
-        />
-      </FormGroup>
       <FormProvider {...form}>
+        {id && (
+          <TextControl
+            name="id"
+            label={t("providerId")}
+            labelIcon={t("providerIdHelp")}
+            rules={{
+              required: t("required"),
+            }}
+            readOnly
+          />
+        )}
+        <TextControl
+          name="name"
+          defaultValue={providerType}
+          label={t("name")}
+          labelIcon={t("mapperNameHelp")}
+          rules={{
+            required: t("required"),
+          }}
+        />
         <DynamicComponents
           properties={
             allComponentTypes.find((type) => type.id === providerType)
               ?.properties || []
           }
         />
-      </FormProvider>
         <ActionGroup>
           <Button
             data-testid="add-provider-button"
@@ -166,6 +127,7 @@ export const KeyProviderForm = ({
             {t("cancel")}
           </Button>
         </ActionGroup>
+      </FormProvider>
     </FormAccess>
   );
 };