fix(streams): update form typing

elastic · Jan 20, 2025 · 060d24d · 060d24d
1 parent 66c3b82
commit 060d24d
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 17 deletions.
diff --git a/.../public/components/stream_detail_enrichment/flyout/dissect/dissect_pattern_definition.tsx b/.../public/components/stream_detail_enrichment/flyout/dissect/dissect_pattern_definition.tsx
@@ -12,12 +12,13 @@ import { CodeEditor } from '@kbn/code-editor';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '../../../../hooks/use_kibana';
+import { ProcessorFormState } from '../../types';
 
 export const DissectPatternDefinition = () => {
   const { core } = useKibana();
   const esDocUrl = core.docLinks.links.ingest.dissectKeyModifiers;
 
-  const { field, fieldState } = useController({
+  const { field, fieldState } = useController<ProcessorFormState, 'pattern'>({
     name: 'pattern',
     rules: {
       required: i18n.translate(

diff --git a/...ms_app/public/components/stream_detail_enrichment/flyout/grok/grok_pattern_definition.tsx b/...ms_app/public/components/stream_detail_enrichment/flyout/grok/grok_pattern_definition.tsx
@@ -10,9 +10,12 @@ import { useController } from 'react-hook-form';
 import { EuiFormRow } from '@elastic/eui';
 import { CodeEditor } from '@kbn/code-editor';
 import { i18n } from '@kbn/i18n';
+import { ProcessorFormState } from '../../types';
 
 export const GrokPatternDefinition = () => {
-  const { field, fieldState } = useController({ name: 'pattern_definitions' });
+  const { field, fieldState } = useController<ProcessorFormState, 'pattern_definitions'>({
+    name: 'pattern_definitions',
+  });
 
   return (
     <EuiFormRow

diff --git a/...reams_app/public/components/stream_detail_enrichment/flyout/grok/grok_patterns_editor.tsx b/...reams_app/public/components/stream_detail_enrichment/flyout/grok/grok_patterns_editor.tsx
@@ -132,7 +132,10 @@ const DraggablePatternInput = ({
               color="transparent"
               paddingSize="xs"
               {...provided.dragHandleProps}
-              aria-label="Drag Handle"
+              aria-label={i18n.translate(
+                'xpack.streams.streamDetailView.managementTab.enrichment.processorFlyout.grokEditor.dragHandleLabel',
+                { defaultMessage: 'Drag Handle' }
+              )}
             >
               <EuiIcon type="grab" />
             </EuiPanel>

diff --git a/...eams_app/public/components/stream_detail_enrichment/flyout/processor_condition_editor.tsx b/...eams_app/public/components/stream_detail_enrichment/flyout/processor_condition_editor.tsx
@@ -8,9 +8,10 @@
 import React from 'react';
 import { useController } from 'react-hook-form';
 import { ConditionEditor } from '../../condition_editor';
+import { ProcessorFormState } from '../types';
 
 export const ProcessorConditionEditor = () => {
-  const { field } = useController({ name: 'condition' });
+  const { field } = useController<ProcessorFormState, 'condition'>({ name: 'condition' });
 
   return <ConditionEditor condition={field.value} onConditionChange={field.onChange} />;
 };
diff --git a/...treams_app/public/components/stream_detail_enrichment/flyout/processor_field_selector.tsx b/...treams_app/public/components/stream_detail_enrichment/flyout/processor_field_selector.tsx
@@ -9,9 +9,10 @@ import { EuiFormRow, EuiFieldText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useController } from 'react-hook-form';
+import { ProcessorFormState } from '../types';
 
 export const ProcessorFieldSelector = () => {
-  const { field, fieldState } = useController({
+  const { field, fieldState } = useController<ProcessorFormState, 'field'>({
     name: 'field',
     rules: {
       required: i18n.translate(

diff --git a/...reams_app/public/components/stream_detail_enrichment/flyout/processor_outcome_preview.tsx b/...reams_app/public/components/stream_detail_enrichment/flyout/processor_outcome_preview.tsx
@@ -31,7 +31,7 @@ import {
   ReadStreamDefinition,
   isWiredReadStream,
 } from '@kbn/streams-schema';
-import { useController, useFieldArray } from 'react-hook-form';
+import { UseControllerProps, useController, useFieldArray } from 'react-hook-form';
 import { css } from '@emotion/react';
 import { flattenObject } from '@kbn/object-utils';
 import { IHttpFetchError, ResponseErrorBody } from '@kbn/core/public';
@@ -287,17 +287,19 @@ const DetectedFields = ({ detectedFields }: { detectedFields: DetectedField[] })
     >
       <EuiFlexGroup gutterSize="s" wrap>
         {fields.map((field, id) => (
-          <DetectedFieldSelector key={field.name} selectorId={`detected_fields.${id}`} />
+          <DetectedFieldSelector key={field.name} name={`detected_fields.${id}`} />
         ))}
       </EuiFlexGroup>
     </EuiFormRow>
   );
 };
 
-const DetectedFieldSelector = ({ selectorId }: { selectorId: string }) => {
-  const { field } = useController({ name: selectorId });
+const DetectedFieldSelector = (
+  props: UseControllerProps<ProcessorFormState, `detected_fields.${number}`>
+) => {
+  const { field } = useController(props);
 
-  const options = useMemo(() => getDetectedFieldSelectOptions(field.value), [field]);
+  const options = useMemo(() => getDetectedFieldSelectOptions(field.value), [field.value]);
 
   return (
     <EuiSuperSelect

diff --git a/...streams_app/public/components/stream_detail_enrichment/flyout/processor_type_selector.tsx b/...streams_app/public/components/stream_detail_enrichment/flyout/processor_type_selector.tsx
@@ -13,6 +13,7 @@ import { useController, useFormContext, useWatch } from 'react-hook-form';
 import { ProcessorType } from '@kbn/streams-schema';
 import { useKibana } from '../../../hooks/use_kibana';
 import { getDefaultFormState } from '../utils';
+import { ProcessorFormState } from '../types';
 
 interface TAvailableProcessor {
   value: ProcessorType;
@@ -28,8 +29,11 @@ export const ProcessorTypeSelector = ({
   const { core } = useKibana();
   const esDocUrl = core.docLinks.links.elasticsearch.docsBase;
 
-  const { control, reset } = useFormContext();
-  const { field, fieldState } = useController({ name: 'type', control, rules: { required: true } });
+  const { reset } = useFormContext();
+  const { field, fieldState } = useController<ProcessorFormState, 'type'>({
+    name: 'type',
+    rules: { required: true },
+  });
 
   const processorType = useWatch<{ type: ProcessorType }>({ name: 'type' });
 
@@ -74,7 +78,9 @@ const availableProcessors: TAvailableProcessors = {
         values={{
           dissectLink: (
             <EuiLink external target="_blank" href={esDocUrl + 'dissect-processor.html'}>
-              dissect
+              {i18n.translate('xpack.streams.availableProcessors.dissectLinkLabel', {
+                defaultMessage: 'dissect',
+              })}
             </EuiLink>
           ),
         }}
@@ -91,7 +97,9 @@ const availableProcessors: TAvailableProcessors = {
         values={{
           grokLink: (
             <EuiLink external target="_blank" href={esDocUrl + 'grok-processor.html'}>
-              grok
+              {i18n.translate('xpack.streams.availableProcessors.grokLinkLabel', {
+                defaultMessage: 'grok',
+              })}
             </EuiLink>
           ),
         }}

diff --git a/...ty/plugins/streams_app/public/components/stream_detail_enrichment/flyout/toggle_field.tsx b/...ty/plugins/streams_app/public/components/stream_detail_enrichment/flyout/toggle_field.tsx
@@ -8,12 +8,19 @@
 import React from 'react';
 import { useController } from 'react-hook-form';
 import { EuiFormRow, EuiFormRowProps, EuiSwitch, htmlIdGenerator } from '@elastic/eui';
+import { ProcessorFormState } from '../types';
+
+type ExtractBooleanFields<TInput> = NonNullable<
+  {
+    [K in keyof TInput]: boolean extends TInput[K] ? K : never;
+  }[keyof TInput]
+>;
 
 interface ToggleFieldProps {
   helpText?: EuiFormRowProps['helpText'];
   id?: string;
   label: string;
-  name: string;
+  name: ExtractBooleanFields<ProcessorFormState>;
 }
 
 export const ToggleField = ({
@@ -23,14 +30,16 @@ export const ToggleField = ({
   name,
   ...rest
 }: ToggleFieldProps) => {
-  const { field } = useController({ name });
+  const { field } = useController<ProcessorFormState, ToggleFieldProps['name']>({
+    name,
+  });
 
   return (
     <EuiFormRow helpText={helpText} fullWidth describedByIds={id ? [id] : undefined} {...rest}>
       <EuiSwitch
         id={id}
         label={label}
-        checked={field.value}
+        checked={field.value ?? false}
         onChange={(e) => field.onChange(e.target.checked)}
       />
     </EuiFormRow>