[react@18] fix field.helpText type issue (#192083)

## Summary Part of #138222 This is one of the issues that `@types/react@18` upgrade highlights and that needs to be addressed with or before the upgrade. `field.helpText` is `ReactNode`, a function is not a valid `ReactNode`, but `@types/react@17` allowed a function. That is why `typeof field.helpText === 'function' ? field.helpText() : field.helpText` doesn't fail with `@17`, but fails with `@18` as `field.helpText is not callable, as never is not callable`. You can check the types with @types/react@18 yourself here #191738 It looks like the lazy `helpText` isn't needed apart from a hack for index management where documentation service is used as part of helpText that could be not available yet. To keep it supported, I specifically, allowed a function that returns a ReactNode for `helpText` on `FieldConfig`, but to make consumption clean and to now break other places `useField` will call it and pass just a `ReactNode` down
elastic · Sep 6, 2024 · bec5117 · bec5117
1 parent 426eb89
commit bec5117
Show file tree

Hide file tree

Showing 25 changed files with 26 additions and 26 deletions.
diff --git a/src/plugins/data_view_editor/public/components/form_fields/title_field.tsx b/src/plugins/data_view_editor/public/components/form_fields/title_field.tsx
@@ -170,7 +170,7 @@ export const TitleField = ({
           <EuiFormRow
             label={field.label}
             labelAppend={field.labelAppend}
-            helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+            helpText={field.helpText}
             error={errorMessage}
             isInvalid={isInvalid}
             fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/button_group_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/button_group_field.tsx
@@ -28,7 +28,7 @@ export const ButtonGroupField = ({ field, euiFieldProps, idAria, ...rest }: Prop
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/card_radio_group_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/card_radio_group_field.tsx
@@ -38,7 +38,7 @@ export const CardRadioGroupField = ({
     <EuiFormRow
       label={field.label}
       labelType="legend"
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/checkbox_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/checkbox_field.tsx
@@ -24,7 +24,7 @@ export const CheckBoxField = ({ field, euiFieldProps = {}, idAria, ...rest }: Pr
 
   return (
     <EuiFormRow
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/combobox_field.tsx
@@ -73,7 +73,7 @@ export const ComboBoxField = ({ field, euiFieldProps = {}, idAria, ...rest }: Pr
     <EuiFormRow
       label={field.label}
       labelAppend={field.labelAppend}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/date_picker_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/date_picker_field.tsx
@@ -25,7 +25,7 @@ export const DatePickerField = ({ field, euiFieldProps, idAria, ...rest }: Props
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/file_picker_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/file_picker_field.tsx
@@ -61,7 +61,7 @@ export const FilePickerField = ({
     <EuiFormRow
       label={field.label}
       labelAppend={field.labelAppend}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/multi_button_group_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/multi_button_group_field.tsx
@@ -32,7 +32,7 @@ export const MultiButtonGroupField = ({ field, euiFieldProps, idAria, ...rest }:
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/multi_select_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/multi_select_field.tsx
@@ -24,7 +24,7 @@ export const MultiSelectField = ({ field, euiFieldProps = {}, idAria, ...rest }:
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/numeric_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/numeric_field.tsx
@@ -24,7 +24,7 @@ export const NumericField = ({ field, euiFieldProps = {}, idAria, ...rest }: Pro
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/password_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/password_field.tsx
@@ -24,7 +24,7 @@ export const PasswordField = ({ field, euiFieldProps, idAria, ...rest }: Props)
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/radio_group_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/radio_group_field.tsx
@@ -24,7 +24,7 @@ export const RadioGroupField = ({ field, euiFieldProps = {}, idAria, ...rest }:
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx
@@ -33,7 +33,7 @@ export const RangeField = ({ field, euiFieldProps = {}, idAria, ...rest }: Props
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/select_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/select_field.tsx
@@ -29,7 +29,7 @@ export const SelectField = ({ field, euiFieldProps, idAria, ...rest }: Props) =>
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/super_select_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/super_select_field.tsx
@@ -32,7 +32,7 @@ export const SuperSelectField = ({
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/text_area_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/text_area_field.tsx
@@ -24,7 +24,7 @@ export const TextAreaField = ({ field, euiFieldProps = {}, idAria, ...rest }: Pr
   return (
     <EuiFormRow
       label={field.label}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/text_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/text_field.tsx
@@ -25,7 +25,7 @@ export const TextField = ({ field, euiFieldProps = {}, idAria, ...rest }: Props)
     <EuiFormRow
       label={field.label}
       labelAppend={field.labelAppend}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx
@@ -31,7 +31,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, idAria, ...rest }: Prop
 
   return (
     <EuiFormRow
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/src/plugins/es_ui_shared/static/forms/docs/examples/style_fields.mdx b/src/plugins/es_ui_shared/static/forms/docs/examples/style_fields.mdx
@@ -35,7 +35,7 @@ export const MyComponent = () => {
           return (
             <EuiFormRow
               label={label}
-              helpText={typeof helpText === 'function' ? helpText() : helpText}
+              helpText={helpText}
               error={errorMessage}
               isInvalid={isInvalid}
             >

diff --git a/src/plugins/es_ui_shared/static/forms/docs/examples/validation.mdx b/src/plugins/es_ui_shared/static/forms/docs/examples/validation.mdx
@@ -56,7 +56,7 @@ export const MyComponent = () => {
           return (
             <EuiFormRow
               label={field.label}
-              helpText={typeof field.helpText === 'function' ? field.helpText() : helpText}
+              helpText={helpText}
               error={errorMessage}
               isInvalid={isInvalid}
             >

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts
@@ -549,7 +549,7 @@ export const useField = <T, FormType = FormData, I = T>(
       type,
       label,
       labelAppend,
-      helpText,
+      helpText: typeof helpText === 'function' ? helpText() : helpText,
       value,
       errors,
       isPristine,

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts b/src/plugins/es_ui_shared/static/forms/hook_form_lib/types.ts
@@ -211,7 +211,7 @@ export interface FieldHook<T = unknown, I = T> {
 export interface FieldConfig<T = unknown, FormType extends FormData = FormData, I = T> {
   readonly label?: string;
   readonly labelAppend?: string | ReactNode;
-  readonly helpText?: string | ReactNode;
+  readonly helpText?: string | ReactNode | (() => ReactNode);
   readonly type?: string;
   readonly defaultValue?: T;
   readonly validations?: Array<ValidationConfig<FormType, string, I>>;

diff --git a/...gement/public/application/sections/enrich_policy_create/steps/fields/indices_selector.tsx b/...gement/public/application/sections/enrich_policy_create/steps/fields/indices_selector.tsx
@@ -90,7 +90,7 @@ export const IndicesSelector = ({ field, euiFieldProps, ...rest }: Props) => {
     <EuiFormRow
       label={field.label}
       labelAppend={field.labelAppend}
-      helpText={typeof field.helpText === 'function' ? field.helpText() : field.helpText}
+      helpText={field.helpText}
       error={errorMessage}
       isInvalid={isInvalid}
       fullWidth

diff --git a/...plugins/triggers_actions_ui/public/application/components/mustache_text_field_wrapper.tsx b/...plugins/triggers_actions_ui/public/application/components/mustache_text_field_wrapper.tsx
@@ -40,7 +40,7 @@ export const MustacheTextFieldWrapper = ({ field, euiFieldProps, idAria, ...rest
         describedByIds: idAria ? [idAria] : undefined,
         error: errorMessage,
         fullWidth: true,
-        helpText: typeof field.helpText === 'function' ? field.helpText() : field.helpText,
+        helpText: field.helpText,
         isInvalid,
         label: field.label,
         ...rest,

diff --git a/...s/triggers_actions_ui/public/application/components/text_field_with_message_variables.tsx b/...s/triggers_actions_ui/public/application/components/text_field_with_message_variables.tsx
@@ -25,7 +25,7 @@ interface Props {
     describedByIds?: string[];
     error: string | null;
     fullWidth: boolean;
-    helpText: string;
+    helpText: React.ReactNode;
     isInvalid: boolean;
     label?: string;
   };
@@ -45,7 +45,7 @@ const Wrapper = ({
     describedByIds?: string[];
     error: string | null;
     fullWidth: boolean;
-    helpText: string;
+    helpText: React.ReactNode;
     isInvalid: boolean;
     label?: string;
   };