PR amendments

x-pack/solutions/observability/plugins/streams_app/.storybook/get_mock_streams_app_context.tsx

@@ -14,7 +14,7 @@ import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/
 import type { SharePublicStart } from '@kbn/share-plugin/public/plugin';
 import { NavigationPublicStart } from '@kbn/navigation-plugin/public/types';
 import type { SavedObjectTaggingPluginStart } from '@kbn/saved-objects-tagging-plugin/public';
-import { FieldsMetadataPublicStart } from '@kbn/fields-metadata-plugin/public';
+import { fieldsMetadataPluginPublicMock } from '@kbn/fields-metadata-plugin/public/mocks';
 import type { StreamsAppKibanaContext } from '../public/hooks/use_kibana';
 
 export function getMockStreamsAppContext(): StreamsAppKibanaContext {
@@ -34,7 +34,7 @@ export function getMockStreamsAppContext(): StreamsAppKibanaContext {
         share: {} as unknown as SharePublicStart,
         navigation: {} as unknown as NavigationPublicStart,
         savedObjectsTagging: {} as unknown as SavedObjectTaggingPluginStart,
-        fieldsMetadata: {} as unknown as FieldsMetadataPublicStart,
+        fieldsMetadata: fieldsMetadataPluginPublicMock.createStartContract(),
       },
     },
     services: {

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/configuration_maps.ts

@@ -9,43 +9,36 @@ import { i18n } from '@kbn/i18n';
 
 export const FIELD_TYPE_MAP = {
   boolean: {
-    icon: 'tokenBoolean',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableBooleanType', {
       defaultMessage: 'Boolean',
     }),
   },
   date: {
-    icon: 'tokenDate',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableDateType', {
       defaultMessage: 'Date',
     }),
   },
   keyword: {
-    icon: 'tokenKeyword',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableKeywordType', {
       defaultMessage: 'Keyword',
     }),
   },
   match_only_text: {
-    icon: 'tokenText',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableTextType', {
       defaultMessage: 'Text',
     }),
   },
   long: {
-    icon: 'tokenNumber',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableNumberType', {
       defaultMessage: 'Number (long)',
     }),
   },
   double: {
-    icon: 'tokenNumber',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableNumberType', {
       defaultMessage: 'Number (double)',
     }),
   },
   ip: {
-    icon: 'tokenIP',
     label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableIpType', {
       defaultMessage: 'IP',
     }),
@@ -72,3 +65,5 @@ export const FIELD_STATUS_MAP = {
     }),
   },
 };
+
+export type FieldStatus = keyof typeof FIELD_STATUS_MAP;

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/field_status.tsx

@@ -7,11 +7,9 @@
 
 import { EuiBadge } from '@elastic/eui';
 import React from 'react';
-import { FIELD_STATUS_MAP } from './configuration_maps';
+import { FIELD_STATUS_MAP, FieldStatus } from './configuration_maps';
 
-export type FieldStatus = 'inherited' | 'mapped' | 'unmapped';
-
-export const FieldStatus = ({ status }: { status: FieldStatus }) => {
+export const FieldStatusBadge = ({ status }: { status: FieldStatus }) => {
   return (
     <>
       <EuiBadge color={FIELD_STATUS_MAP[status].color}>{FIELD_STATUS_MAP[status].label}</EuiBadge>

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/field_type.tsx

@@ -5,16 +5,17 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiToken } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import { FieldDefinitionConfig } from '@kbn/streams-schema';
+import { FieldIcon } from '@kbn/react-field';
 import { FIELD_TYPE_MAP } from './configuration_maps';
 
 export const FieldType = ({ type }: { type: FieldDefinitionConfig['type'] }) => {
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s">
       <EuiFlexItem grow={false}>
-        <EuiToken iconType={FIELD_TYPE_MAP[type].icon} />
+        <FieldIcon type={type} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>{`${FIELD_TYPE_MAP[type].label}`}</EuiFlexItem>
     </EuiFlexGroup>

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/fields_table.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   EuiButtonIcon,
   EuiContextMenu,
@@ -25,7 +25,7 @@ import { i18n } from '@kbn/i18n';
 import useToggle from 'react-use/lib/useToggle';
 import { isRootStream, isWiredReadStream, ReadStreamDefinition } from '@kbn/streams-schema';
 import { FieldType } from './field_type';
-import { FieldStatus } from './field_status';
+import { FieldStatusBadge } from './field_status';
 import { FieldEntry, SchemaEditorEditingState } from './hooks/use_editing_state';
 import { SchemaEditorUnpromotingState } from './hooks/use_unpromoting_state';
 import { FieldParent } from './field_parent';
@@ -181,13 +181,6 @@ const FieldsTable = ({ definition, fields, editingState, unpromotingState }: Fie
   // Column sorting
   const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
 
-  const onSort = useCallback(
-    (nextSortingColumns: EuiDataGridColumnSortingConfig[]) => {
-      setSortingColumns(nextSortingColumns);
-    },
-    [setSortingColumns]
-  );
-
   const trailingColumns = useMemo(() => {
     return !isRootStream(definition)
       ? ([
@@ -316,7 +309,7 @@ const FieldsTable = ({ definition, fields, editingState, unpromotingState }: Fie
         setVisibleColumns,
         canDragAndDropColumns: false,
       }}
-      sorting={{ columns: sortingColumns, onSort }}
+      sorting={{ columns: sortingColumns, onSort: setSortingColumns }}
       toolbarVisibility={true}
       rowCount={fields.length}
       renderCellValue={({ rowIndex, columnId }) => {
@@ -332,7 +325,7 @@ const FieldsTable = ({ definition, fields, editingState, unpromotingState }: Fie
             <FieldParent parent={field.parent} linkEnabled={field.parent !== definition.name} />
           );
         } else if (columnId === 'status') {
-          return <FieldStatus status={field.status} />;
+          return <FieldStatusBadge status={field.status} />;
         } else {
           return field[columnId as keyof FieldEntry] || EMPTY_CONTENT;
         }

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/filters/filter_group.tsx

@@ -46,32 +46,30 @@ export const FilterGroup = ({
   );
 
   return (
-    <>
-      <EuiFilterGroup>
-        <EuiPopover
-          id={filterGroupPopoverId}
-          button={button}
-          isOpen={isPopoverOpen}
-          closePopover={() => togglePopover(false)}
-          panelPaddingSize="none"
+    <EuiFilterGroup>
+      <EuiPopover
+        id={filterGroupPopoverId}
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={() => togglePopover(false)}
+        panelPaddingSize="none"
+      >
+        <EuiSelectable
+          aria-label={filterGroupButtonLabel}
+          options={items}
+          onChange={(...args) => onChange(...args)}
         >
-          <EuiSelectable
-            aria-label={filterGroupButtonLabel}
-            options={items}
-            onChange={(...args) => onChange(...args)}
-          >
-            {(list) => (
-              <div
-                css={{
-                  minWidth: '200px',
-                }}
-              >
-                {list}
-              </div>
-            )}
-          </EuiSelectable>
-        </EuiPopover>
-      </EuiFilterGroup>
-    </>
+          {(list) => (
+            <div
+              css={{
+                minWidth: '200px',
+              }}
+            >
+              {list}
+            </div>
+          )}
+        </EuiSelectable>
+      </EuiPopover>
+    </EuiFilterGroup>
   );
 };

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/flyout/ecs_recommendation.tsx

@@ -8,7 +8,6 @@
 import { EuiText } from '@elastic/eui';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { useKibana } from '../../../hooks/use_kibana';
 
 const EcsRecommendationText = i18n.translate(
   'xpack.streams.streamDetailSchemaEditor.ecsRecommendationText',
@@ -31,28 +30,17 @@ const LoadingText = i18n.translate(
   }
 );
 
-export const EcsRecommendation = ({ field }: { field: string }) => {
-  const {
-    dependencies: {
-      start: {
-        fieldsMetadata: { useFieldsMetadata },
-      },
-    },
-  } = useKibana();
-
-  const { fieldsMetadata, loading } = useFieldsMetadata({
-    attributes: ['type'],
-    fieldNames: [field],
-  });
-
+export const EcsRecommendation = ({
+  recommendation,
+  isLoading,
+}: {
+  recommendation?: string;
+  isLoading: boolean;
+}) => {
   return (
     <EuiText size="xs">
       {`${EcsRecommendationText}: `}
-      {loading
-        ? LoadingText
-        : fieldsMetadata?.[field]?.type !== undefined
-        ? fieldsMetadata?.[field]?.type
-        : UknownEcsFieldText}
+      {isLoading ? LoadingText : recommendation !== undefined ? recommendation : UknownEcsFieldText}
     </EuiText>
   );
 };

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/flyout/field_form_type.tsx

@@ -9,7 +9,10 @@ import { EuiSelect } from '@elastic/eui';
 import React from 'react';
 import { SchemaEditorEditingState } from '../hooks/use_editing_state';
 
-type FieldFormTypeProps = Pick<SchemaEditorEditingState, 'nextFieldType' | 'setNextFieldType'>;
+type FieldFormTypeProps = Pick<SchemaEditorEditingState, 'nextFieldType' | 'setNextFieldType'> & {
+  isLoadingRecommendation: boolean;
+  recommendation?: string;
+};
 
 const TYPE_OPTIONS = {
   long: 'Long',
@@ -26,9 +29,13 @@ type FieldTypeOption = keyof typeof TYPE_OPTIONS;
 export const FieldFormType = ({
   nextFieldType: value,
   setNextFieldType: onChange,
+  isLoadingRecommendation,
+  recommendation,
 }: FieldFormTypeProps) => {
   return (
     <EuiSelect
+      disabled={!value && isLoadingRecommendation}
+      isLoading={isLoadingRecommendation}
       data-test-subj="streamsAppFieldFormTypeSelect"
       hasNoInitialSelection={!value}
       onChange={(event) => {

x-pack/solutions/observability/plugins/streams_app/public/components/stream_detail_schema_editor/flyout/field_form_type_wrapper.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useEffect } from 'react';
+import { EMPTY_CONTENT } from '../fields_table';
+import { EcsRecommendation } from './ecs_recommendation';
+import { FieldFormType } from './field_form_type';
+import { FieldEntry, SchemaEditorEditingState } from '../hooks/use_editing_state';
+import { FieldType } from '../field_type';
+import { useKibana } from '../../../hooks/use_kibana';
+import { FIELD_TYPE_MAP } from '../configuration_maps';
+
+export const FieldFormTypeWrapper = ({
+  isEditing,
+  nextFieldType,
+  setNextFieldType,
+  selectedFieldType,
+  selectedFieldName,
+}: {
+  isEditing: boolean;
+  nextFieldType: SchemaEditorEditingState['nextFieldType'];
+  setNextFieldType: SchemaEditorEditingState['setNextFieldType'];
+  selectedFieldType: FieldEntry['type'];
+  selectedFieldName: FieldEntry['name'];
+}) => {
+  const {
+    dependencies: {
+      start: {
+        fieldsMetadata: { useFieldsMetadata },
+      },
+    },
+  } = useKibana();
+
+  const { fieldsMetadata, loading } = useFieldsMetadata(
+    {
+      attributes: ['type'],
+      fieldNames: [selectedFieldName],
+    },
+    [selectedFieldName]
+  );
+
+  // Propagate recommendation to state if a type is not already set
+  useEffect(() => {
+    const recommendation = fieldsMetadata?.[selectedFieldName]?.type;
+    if (
+      !loading &&
+      recommendation !== undefined &&
+      // Supported type
+      recommendation in FIELD_TYPE_MAP &&
+      !nextFieldType
+    ) {
+      setNextFieldType(recommendation as FieldEntry['type']);
+    }
+  }, [fieldsMetadata, loading, nextFieldType, selectedFieldName, setNextFieldType]);
+
+  return (
+    <EuiFlexGroup direction="column">
+      <EuiFlexItem>
+        {isEditing ? (
+          <FieldFormType
+            nextFieldType={nextFieldType}
+            setNextFieldType={setNextFieldType}
+            isLoadingRecommendation={loading}
+            recommendation={fieldsMetadata?.[selectedFieldName]?.type}
+          />
+        ) : selectedFieldType ? (
+          <FieldType type={selectedFieldType} />
+        ) : (
+          `${EMPTY_CONTENT}`
+        )}
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EcsRecommendation
+          isLoading={loading}
+          recommendation={fieldsMetadata?.[selectedFieldName]?.type}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};