Use TextControl in StringComponent (#31442)

* 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>

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) {

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";

js/apps/admin-ui/src/components/dynamic/StringComponent.tsx

@@ -1,8 +1,5 @@
-import { FormGroup, TextInput } from "@patternfly/react-core";
+import { TextControl } from "@keycloak/keycloak-ui-shared";
-import { useFormContext } from "react-hook-form";
 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,
+  ...props
-  isDisabled = false,
-  required,
 }: ComponentProps) => {
   const { t } = useTranslation();
-  const { register } = useFormContext();
 
   return (
-    <FormGroup
+    <TextControl
+      name={convertToName(name!)}
       label={t(label!)}
-      labelIcon={<HelpItem helpText={t(helpText!)} fieldLabelId={`${label}`} />}
+      helperText={t(helpText!)}
-      fieldId={name!}
+      data-testid={name}
-      isRequired={required}
+      {...props}
-    >
+    />
-      <TextInput
-        id={name!}
-        data-testid={name}
-        isDisabled={isDisabled}
-        defaultValue={defaultValue?.toString()}
-        {...register(convertToName(name!))}
-      />
-    </FormGroup>
   );
 };

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>
       )}