From 546820bc5520e9ddd41bd6d8b481f5ff1ad36ba8 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 6 Aug 2024 13:52:59 +0200
Subject: [PATCH] Use TextControl in StringComponent (#31442) (#31743)

* Use TextControl in StringComponent

This makes that the field is required and partially fixes:

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

* enable test-id override

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

---------

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
(cherry picked from commit 0b5f42f95d13296a124c64a63ee355d7a1c962dd)
---
 .../tabs/mappers/MapperDetailsPage.ts         |  2 +-
 .../realm_settings/RealmSettingsPage.ts       |  2 +-
 .../components/dynamic/StringComponent.tsx    | 29 +++++--------------
 .../ui-shared/src/controls/TextControl.tsx    |  9 +++---
 4 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/mappers/MapperDetailsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/mappers/MapperDetailsPage.ts
index 951f4d7cb7d..6f4b42a2c25 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/mappers/MapperDetailsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/client_scopes/client_scope_details/tabs/mappers/MapperDetailsPage.ts
@@ -10,7 +10,7 @@ export enum ClaimJsonType {
 
 export default class MapperDetailsPage extends CommonPage {
   #userAttributeInput = '[data-testid="config.user🍺attribute"]';
-  #tokenClaimNameInput = '[id="claim.name"]';
+  #tokenClaimNameInput = '[data-testid="claim.name"]';
   #claimJsonType = '[id="jsonType.label"]';
 
   fillUserAttribute(userAttribute: string) {
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
index 1f7cac1f1a3..061f9be5229 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
@@ -207,7 +207,7 @@ export default class RealmSettingsPage extends CommonPage {
   #availablePeriodExecutorFld = "available-period";
   #editExecutorBtn =
     '[aria-label="Executors"] > li > div:first-child [data-testid="editExecutor"]';
-  #executorAvailablePeriodInput = "#available-period";
+  #executorAvailablePeriodInput = "[data-testid='available-period']";
 
   #listingPage = new ListingPage();
   #addCondition = "addCondition";
diff --git a/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx b/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx
index 3da266c1a81..7bff36d3fa1 100644
--- a/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx
+++ b/js/apps/admin-ui/src/components/dynamic/StringComponent.tsx
@@ -1,8 +1,5 @@
-import { FormGroup, TextInput } from "@patternfly/react-core";
-import { useFormContext } from "react-hook-form";
+import { TextControl } from "@keycloak/keycloak-ui-shared";
 import { useTranslation } from "react-i18next";
-import { HelpItem } from "@keycloak/keycloak-ui-shared";
-
 import { convertToName } from "./DynamicComponents";
 import type { ComponentProps } from "./components";
 
@@ -10,27 +7,17 @@ export const StringComponent = ({
   name,
   label,
   helpText,
-  defaultValue,
-  isDisabled = false,
-  required,
+  ...props
 }: ComponentProps) => {
   const { t } = useTranslation();
-  const { register } = useFormContext();
 
   return (
-    <FormGroup
+    <TextControl
+      name={convertToName(name!)}
       label={t(label!)}
-      labelIcon={<HelpItem helpText={t(helpText!)} fieldLabelId={`${label}`} />}
-      fieldId={name!}
-      isRequired={required}
-    >
-      <TextInput
-        id={name!}
-        data-testid={name}
-        isDisabled={isDisabled}
-        defaultValue={defaultValue?.toString()}
-        {...register(convertToName(name!))}
-      />
-    </FormGroup>
+      helperText={t(helpText!)}
+      data-testid={name}
+      {...props}
+    />
   );
 };
diff --git a/js/libs/ui-shared/src/controls/TextControl.tsx b/js/libs/ui-shared/src/controls/TextControl.tsx
index b29e10f6901..668ec2868b9 100644
--- a/js/libs/ui-shared/src/controls/TextControl.tsx
+++ b/js/libs/ui-shared/src/controls/TextControl.tsx
@@ -26,6 +26,7 @@ export type TextControlProps<
     labelIcon?: string | ReactNode;
     isDisabled?: boolean;
     helperText?: string;
+    "data-testid"?: string;
   };
 
 export const TextControl = <
@@ -34,7 +35,7 @@ export const TextControl = <
 >(
   props: TextControlProps<T, P>,
 ) => {
-  const { labelIcon, ...rest } = props;
+  const { labelIcon, helperText, ...rest } = props;
   const required = !!props.rules?.required;
   const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
 
@@ -54,7 +55,7 @@ export const TextControl = <
       <TextInput
         isRequired={required}
         id={props.name}
-        data-testid={props.name}
+        data-testid={props["data-testid"] || props.name}
         validated={
           fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
         }
@@ -62,10 +63,10 @@ export const TextControl = <
         {...rest}
         {...field}
       />
-      {props.helperText && (
+      {helperText && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem>{props.helperText}</HelperTextItem>
+            <HelperTextItem>{helperText}</HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}