[Streams 🌊] Fix _sample API condition param and missing typing on processor forms

x-pack/solutions/observability/plugins/streams/server/routes/streams/management/route.ts

@@ -135,7 +135,7 @@ export const sampleStreamRoute = createServerRoute({
       condition: z.optional(conditionSchema),
       start: z.optional(z.number()),
       end: z.optional(z.number()),
-      number: z.optional(z.number()),
+      size: z.optional(z.number()),
     }),
   }),
   handler: async ({ params, request, getScopedClients }): Promise<{ documents: unknown[] }> => {
@@ -146,18 +146,20 @@ export const sampleStreamRoute = createServerRoute({
       if (!read) {
         throw new DefinitionNotFound(`Stream definition for ${params.path.id} not found.`);
       }
+
+      const { condition, start, end, size } = params.body;
       const searchBody = {
         query: {
           bool: {
             must: [
-              isCompleteCondition(params.body.condition)
-                ? conditionToQueryDsl(params.body.condition)
+              Boolean(condition && isCompleteCondition(condition))
+                ? conditionToQueryDsl(condition)
                 : { match_all: {} },
               {
                 range: {
                   '@timestamp': {
-                    gte: params.body.start,
-                    lte: params.body.end,
+                    gte: start,
+                    lte: end,
                     format: 'epoch_millis',
                   },
                 },
@@ -170,20 +172,22 @@ export const sampleStreamRoute = createServerRoute({
         // ingest in the painless condition checks.
         // This is less efficient than it could be - in some cases, these fields _are_ indexed with the right type and we could use them directly.
         // This can be optimized in the future.
-        runtime_mappings: Object.fromEntries(
-          getFields(params.body.condition).map((field) => [
-            field.name,
-            { type: field.type === 'string' ? 'keyword' : 'double' },
-          ])
-        ),
+        runtime_mappings: condition
+          ? Object.fromEntries(
+              getFields(condition).map((field) => [
+                field.name,
+                { type: field.type === 'string' ? 'keyword' : 'double' },
+              ])
+            )
+          : undefined,
         sort: [
           {
             '@timestamp': {
               order: 'desc',
             },
           },
         ],
-        size: params.body.number,
+        size,
       };
       const results = await scopedClusterClient.asCurrentUser.search({
         index: params.path.id,

x-pack/solutions/observability/plugins/streams_app/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(

x-pack/solutions/observability/plugins/streams_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

x-pack/solutions/observability/plugins/streams_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>

x-pack/solutions/observability/plugins/streams_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} />;
 };

x-pack/solutions/observability/plugins/streams_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(

x-pack/solutions/observability/plugins/streams_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

x-pack/solutions/observability/plugins/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>
           ),
         }}

x-pack/solutions/observability/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>

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_enrichment/hooks/use_processing_simulator.ts

@@ -64,7 +64,7 @@ export const useProcessingSimulator = ({
             condition,
             start: start?.valueOf(),
             end: end?.valueOf(),
-            number: 100,
+            size: 100,
           },
         },
       });

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_routing/index.tsx

@@ -507,7 +507,7 @@ function PreviewPanel({
             condition: routingAppState.debouncedChildUnderEdit.child.condition,
             start: start?.valueOf(),
             end: end?.valueOf(),
-            number: 100,
+            size: 100,
           },
         },
       });