[8.x] [Streams] Schema Editor UX improvements (#207066)

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

@@ -14,6 +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 { fieldsMetadataPluginPublicMock } from '@kbn/fields-metadata-plugin/public/mocks';
 import type { StreamsAppKibanaContext } from '../public/hooks/use_kibana';
 
 export function getMockStreamsAppContext(): StreamsAppKibanaContext {
@@ -33,6 +34,7 @@ export function getMockStreamsAppContext(): StreamsAppKibanaContext {
         share: {} as unknown as SharePublicStart,
         navigation: {} as unknown as NavigationPublicStart,
         savedObjectsTagging: {} as unknown as SavedObjectTaggingPluginStart,
+        fieldsMetadata: fieldsMetadataPluginPublicMock.createStartContract(),
       },
     },
     services: {

x-pack/solutions/observability/plugins/streams_app/kibana.jsonc

@@ -17,7 +17,8 @@
       "unifiedSearch",
       "share",
       "savedObjectsTagging",
-      "navigation"
+      "navigation",
+      "fieldsMetadata",
     ],
     "requiredBundles": [
       "kibanaReact"

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

@@ -0,0 +1,69 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const FIELD_TYPE_MAP = {
+  boolean: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableBooleanType', {
+      defaultMessage: 'Boolean',
+    }),
+  },
+  date: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableDateType', {
+      defaultMessage: 'Date',
+    }),
+  },
+  keyword: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableKeywordType', {
+      defaultMessage: 'Keyword',
+    }),
+  },
+  match_only_text: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableTextType', {
+      defaultMessage: 'Text',
+    }),
+  },
+  long: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableNumberType', {
+      defaultMessage: 'Number (long)',
+    }),
+  },
+  double: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableNumberType', {
+      defaultMessage: 'Number (double)',
+    }),
+  },
+  ip: {
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableIpType', {
+      defaultMessage: 'IP',
+    }),
+  },
+};
+
+export const FIELD_STATUS_MAP = {
+  inherited: {
+    color: 'hollow',
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorInheritedStatusLabel', {
+      defaultMessage: 'Inherited',
+    }),
+  },
+  mapped: {
+    color: 'success',
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorMappedStatusLabel', {
+      defaultMessage: 'Mapped',
+    }),
+  },
+  unmapped: {
+    color: 'default',
+    label: i18n.translate('xpack.streams.streamDetailSchemaEditorUnmappedStatusLabel', {
+      defaultMessage: 'Unmapped',
+    }),
+  },
+};
+
+export type FieldStatus = keyof typeof FIELD_STATUS_MAP;

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiBadge } from '@elastic/eui';
+import { EuiBadge, EuiLink } from '@elastic/eui';
 import React from 'react';
 import { useStreamsAppRouter } from '../../hooks/use_streams_app_router';
 
@@ -18,17 +18,19 @@ export const FieldParent = ({
 }) => {
   const router = useStreamsAppRouter();
   return linkEnabled ? (
-    <EuiBadge
-      color="hollow"
-      href={router.link('/{key}/{tab}/{subtab}', {
-        path: {
-          key: parent,
-          tab: 'management',
-          subtab: 'schemaEditor',
-        },
-      })}
-    >
-      {parent}
+    <EuiBadge color="hollow">
+      <EuiLink
+        href={router.link('/{key}/{tab}/{subtab}', {
+          path: {
+            key: parent,
+            tab: 'management',
+            subtab: 'schemaEditor',
+          },
+        })}
+        target="_blank"
+      >
+        {parent}
+      </EuiLink>
     </EuiBadge>
   ) : (
     <EuiBadge color="hollow">{parent}</EuiBadge>

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

@@ -6,33 +6,10 @@
  */
 
 import { EuiBadge } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { FIELD_STATUS_MAP, FieldStatus } from './configuration_maps';
 
-export type FieldStatus = 'inherited' | 'mapped' | 'unmapped';
-
-export const FIELD_STATUS_MAP = {
-  inherited: {
-    color: 'hollow',
-    label: i18n.translate('xpack.streams.streamDetailSchemaEditorInheritedStatusLabel', {
-      defaultMessage: 'Inherited',
-    }),
-  },
-  mapped: {
-    color: 'success',
-    label: i18n.translate('xpack.streams.streamDetailSchemaEditorMappedStatusLabel', {
-      defaultMessage: 'Mapped',
-    }),
-  },
-  unmapped: {
-    color: 'default',
-    label: i18n.translate('xpack.streams.streamDetailSchemaEditorUnmappedStatusLabel', {
-      defaultMessage: '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,61 +5,17 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiToken } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 import { FieldDefinitionConfig } from '@kbn/streams-schema';
-
-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',
-    }),
-  },
-  double: {
-    icon: 'tokenNumber',
-    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableNumberType', {
-      defaultMessage: 'Number',
-    }),
-  },
-  ip: {
-    icon: 'tokenIP',
-    label: i18n.translate('xpack.streams.streamDetailSchemaEditorFieldsTableIpType', {
-      defaultMessage: 'IP',
-    }),
-  },
-};
+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

@@ -17,6 +17,7 @@ import {
 import type {
   EuiContextMenuPanelDescriptor,
   EuiContextMenuPanelItemDescriptor,
+  EuiDataGridColumnSortingConfig,
   EuiDataGridProps,
   Query,
 } from '@elastic/eui';
@@ -28,10 +29,11 @@ import {
   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';
+import { SchemaEditorQueryAndFiltersState } from './hooks/use_query_and_filters';
 
 interface FieldsTableContainerProps {
   definition: ReadStreamDefinition;
@@ -40,6 +42,7 @@ interface FieldsTableContainerProps {
   query?: Query;
   editingState: SchemaEditorEditingState;
   unpromotingState: SchemaEditorUnpromotingState;
+  queryAndFiltersState: SchemaEditorQueryAndFiltersState;
 }
 
 const COLUMNS = {
@@ -78,6 +81,7 @@ export const FieldsTableContainer = ({
   query,
   editingState,
   unpromotingState,
+  queryAndFiltersState,
 }: FieldsTableContainerProps) => {
   const inheritedFields = useMemo(() => {
     return Object.entries(definition.inherited_fields).map(([name, field]) => ({
@@ -138,9 +142,28 @@ export const FieldsTableContainer = ({
     return [...filteredInheritedFields, ...filteredMappedFields, ...filteredUnmappedFields];
   }, [filteredInheritedFields, filteredMappedFields, filteredUnmappedFields]);
 
+  const filteredFieldsWithFilterGroupsApplied = useMemo(() => {
+    const filterGroups = queryAndFiltersState.filterGroups;
+    let fieldsWithFilterGroupsApplied = allFilteredFields;
+
+    if (filterGroups.type && filterGroups.type.length > 0) {
+      fieldsWithFilterGroupsApplied = fieldsWithFilterGroupsApplied.filter(
+        (field) => 'type' in field && filterGroups.type.includes(field.type)
+      );
+    }
+
+    if (filterGroups.status && filterGroups.status.length > 0) {
+      fieldsWithFilterGroupsApplied = fieldsWithFilterGroupsApplied.filter(
+        (field) => 'status' in field && filterGroups.status.includes(field.status)
+      );
+    }
+
+    return fieldsWithFilterGroupsApplied;
+  }, [allFilteredFields, queryAndFiltersState.filterGroups]);
+
   return (
     <FieldsTable
-      fields={allFilteredFields}
+      fields={filteredFieldsWithFilterGroupsApplied}
       editingState={editingState}
       unpromotingState={unpromotingState}
       definition={definition}
@@ -156,8 +179,12 @@ interface FieldsTableProps {
 }
 
 const FieldsTable = ({ definition, fields, editingState, unpromotingState }: FieldsTableProps) => {
+  // Column visibility
   const [visibleColumns, setVisibleColumns] = useState(Object.keys(COLUMNS));
 
+  // Column sorting
+  const [sortingColumns, setSortingColumns] = useState<EuiDataGridColumnSortingConfig[]>([]);
+
   const trailingColumns = useMemo(() => {
     return !isRootStreamDefinition(definition.stream)
       ? ([
@@ -168,6 +195,8 @@ const FieldsTable = ({ definition, fields, editingState, unpromotingState }: Fie
             rowCellRender: ({ rowIndex }) => {
               const field = fields[rowIndex];
 
+              if (!field) return null;
+
               let actions: ActionsCellActionsDescriptor[] = [];
 
               switch (field.status) {
@@ -275,19 +304,22 @@ const FieldsTable = ({ definition, fields, editingState, unpromotingState }: Fie
           defaultMessage: 'Preview',
         }
       )}
-      columns={visibleColumns.map((columnId) => ({
+      columns={Object.entries(COLUMNS).map(([columnId, value]) => ({
         id: columnId,
-        ...COLUMNS[columnId as keyof typeof COLUMNS],
+        ...value,
       }))}
       columnVisibility={{
         visibleColumns,
         setVisibleColumns,
         canDragAndDropColumns: false,
       }}
-      toolbarVisibility={false}
+      sorting={{ columns: sortingColumns, onSort: setSortingColumns }}
+      toolbarVisibility={true}
       rowCount={fields.length}
       renderCellValue={({ rowIndex, columnId }) => {
         const field = fields[rowIndex];
+        if (!field) return null;
+
         if (columnId === 'type') {
           const fieldType = field.type;
           if (!fieldType) return EMPTY_CONTENT;
@@ -297,7 +329,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;
         }
@@ -308,6 +340,7 @@ const FieldsTable = ({ definition, fields, editingState, unpromotingState }: Fie
         rowHover: 'none',
         header: 'underline',
       }}
+      inMemory={{ level: 'sorting' }}
     />
   );
 };