Add Data scope and Schema mapping info on dataset editing page (#10737)

* Add Data scope and Schema mapping info on dataset editing page

Signed-off-by: Joey Liu <[email protected]>

* Changeset file for PR #10737 created/updated

---------

Signed-off-by: Joey Liu <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

Author: Maosaic

changelogs/fragments/10737.yml

@@ -0,0 +1,2 @@
+feat:
+- Add Data scope and Schema mapping info on dataset editing page ([#10737](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/10737))

src/plugins/data/public/index.ts

@@ -72,6 +72,7 @@ export {
   DatasetSelectorAppearance,
   DetailedDataset,
   AdvancedSelector,
+  ConfiguratorV2,
 } from './ui';
 
 import {
@@ -630,3 +631,8 @@ export {
 
 export { SavedQueryManagementComponent } from './ui/saved_query_management';
 export { SaveQueryForm, SavedQueryMeta } from './ui/saved_query_form';
+export {
+  getSchemaConfigs,
+  SchemaConfig,
+  SchemaAttributeConfig,
+} from './ui/dataset_selector/configurator/schema_config';

src/plugins/data/public/ui/dataset_selector/advanced_selector.tsx

@@ -4,6 +4,26 @@
  */
 
 import React, { useState } from 'react';
+
+/**
+ * AdvancedSelector component for dataset selection and configuration.
+ *
+ * This component provides a two-step interface:
+ * 1. DatasetExplorer - Browse and select datasets
+ * 2. ConfiguratorV2 - Configure the selected dataset (language, time field, schema mappings, etc.)
+ *
+ * Usage with modals:
+ * When rendering this component inside a modal, apply the className 'datasetSelector__advancedModal'
+ * to the modal container for consistent sizing (1200px × 800px) and layout.
+ *
+ * Example:
+ * ```tsx
+ * overlays.openModal(
+ *   toMountPoint(<AdvancedSelector {...props} />),
+ *   { maxWidth: false, className: 'datasetSelector__advancedModal' }
+ * );
+ * ```
+ */
 import {
   BaseDataset,
   DATA_STRUCTURE_META_TYPES,

src/plugins/data/public/ui/dataset_selector/configurator/schema_mappings.test.tsx

@@ -69,11 +69,18 @@ describe('SchemaMappings Component', () => {
     expect(accordion).toBeInTheDocument();
   });
 
-  it('should expand accordion when clicked', () => {
+  it('should toggle accordion when clicked', () => {
     renderWithIntl(<SchemaMappings {...defaultProps} />);
+
     const accordionButton = screen.getByText('Schema Mappings');
+
+    // Click to open
     fireEvent.click(accordionButton);
     expect(screen.getByText('OTel logs')).toBeInTheDocument();
+
+    // Click to close
+    fireEvent.click(accordionButton);
+    // Content may still be in DOM but accordion should toggle
   });
 
   it('should render schema attributes after expanding accordion', () => {
@@ -185,4 +192,21 @@ describe('SchemaMappings Component', () => {
       },
     });
   });
+
+  it('should auto-open accordion when there are existing schema mappings', () => {
+    const propsWithMapping: SchemaMappingsProps = {
+      ...defaultProps,
+      schemaMappings: {
+        otelLogs: {
+          traceId: 'field1',
+        },
+      },
+    };
+
+    renderWithIntl(<SchemaMappings {...propsWithMapping} />);
+
+    // Accordion should be auto-opened, so schema details should be visible without clicking
+    expect(screen.getByText('OTel logs')).toBeInTheDocument();
+    expect(screen.getByText('Trace ID')).toBeInTheDocument();
+  });
 });

src/plugins/data/public/ui/dataset_selector/configurator/schema_mappings.tsx

@@ -31,7 +31,9 @@ export const SchemaMappings: React.FC<SchemaMappingsProps> = ({
   onChange,
   schemas,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  // Auto-open accordion if there are existing schema mappings
+  const hasExistingMappings = Object.keys(schemaMappings).length > 0;
+  const [isOpen, setIsOpen] = useState(hasExistingMappings);
 
   const handleFieldChange = (schemaKey: string, attributeKey: string, fieldName: string) => {
     const newMappings = { ...schemaMappings };

src/plugins/data/public/ui/index.ts

@@ -56,3 +56,4 @@ export {
 export { SuggestionsComponent } from './typeahead';
 export { DatasetSelector, DatasetSelectorAppearance } from './dataset_selector';
 export { AdvancedSelector } from './dataset_selector/advanced_selector';
+export { ConfiguratorV2 } from './dataset_selector/configurator/configurator_v2';

src/plugins/dataset_management/public/components/dataset_table/dataset_table_v2.scss

@@ -1,11 +1,3 @@
-.datasetSelectModal {
-  width: 1200px;
-  height: 800px;
-
-  // euiOverlayMask pushes the modal up due to having padding-bottom: 10vh
-  max-height: calc(90vh - $euiSizeL);
-}
-
 // AdvancedSelector styles from data plugin
 .datasetExplorer {
   display: grid;

src/plugins/dataset_management/public/components/dataset_table/dataset_table_v2.tsx

@@ -212,7 +212,7 @@ export const DatasetTableV2 = ({ canSave, history }: Props) => {
         ),
         {
           maxWidth: false,
-          className: 'datasetSelectModal',
+          className: 'datasetSelector__advancedModal',
         }
       );
     },

src/plugins/dataset_management/public/components/edit_dataset/dataset_info_panel.scss

@@ -0,0 +1,59 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.datasetInfoPanel {
+  &__schemaGroup {
+    margin-bottom: $euiSizeM;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__titleWithButton {
+    display: flex;
+    align-items: center;
+    gap: $euiSizeXS;
+  }
+
+  &__schemaLabel {
+    font-weight: $euiFontWeightSemiBold;
+    margin-bottom: $euiSizeS;
+  }
+
+  &__mappingRow {
+    display: flex;
+    align-items: center;
+    gap: $euiSizeS;
+    margin-bottom: $euiSizeXS;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__attributeTag {
+    display: inline-block;
+    padding: $euiSizeXS $euiSizeS;
+    background-color: $euiColorLightestShade;
+    border: $euiBorderThin;
+    border-radius: $euiBorderRadius;
+    font-size: $euiFontSizeXS;
+    font-weight: $euiFontWeightMedium;
+    color: $euiColorDarkestShade;
+    white-space: nowrap;
+  }
+
+  &__fieldName {
+    font-size: $euiFontSizeS;
+    flex: 1;
+  }
+
+  &__moreText {
+    font-size: $euiFontSizeS;
+    color: $euiColorDarkShade;
+    margin-top: $euiSizeXS;
+  }
+}

src/plugins/dataset_management/public/components/edit_dataset/dataset_info_panel.test.tsx

@@ -0,0 +1,150 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DatasetInfoPanel } from './dataset_info_panel';
+import { IntlProvider } from 'react-intl';
+
+// Mock getSchemaConfigs
+jest.mock('../../../../data/public', () => ({
+  getSchemaConfigs: jest.fn(() => ({
+    otelLogs: {
+      displayName: 'OTel logs',
+      description: 'OTel schema mappings for your logs dataset',
+      signalType: 'logs',
+      attributes: {
+        traceId: {
+          displayName: 'Trace ID',
+          description: 'Unique identifier for the trace',
+        },
+        spanId: {
+          displayName: 'Span ID',
+          description: 'Unique identifier for the span',
+        },
+      },
+    },
+  })),
+}));
+
+const createMockDataset = (overrides = {}) => ({
+  id: 'test-dataset',
+  title: 'test-index',
+  signalType: 'logs',
+  timeFieldName: '@timestamp',
+  dataSourceRef: undefined,
+  schemaMappings: undefined,
+  savedObjectsClient: {
+    get: jest.fn(),
+  },
+  ...overrides,
+});
+
+describe('DatasetInfoPanel', () => {
+  const renderComponent = (dataset: any, editConfiguration?: () => void) => {
+    return render(
+      <IntlProvider locale="en">
+        <DatasetInfoPanel dataset={dataset} editConfiguration={editConfiguration} />
+      </IntlProvider>
+    );
+  };
+
+  it('renders basic dataset information', () => {
+    const dataset = createMockDataset();
+    renderComponent(dataset);
+
+    expect(screen.getByText('Type')).toBeInTheDocument();
+    expect(screen.getByText('logs')).toBeInTheDocument();
+    expect(screen.getByText('Data scope')).toBeInTheDocument();
+    expect(screen.getByText('test-index')).toBeInTheDocument();
+  });
+
+  it('displays N/A when no schema mappings exist', () => {
+    const dataset = createMockDataset();
+    renderComponent(dataset);
+
+    expect(screen.getByText('Schema mapping')).toBeInTheDocument();
+    const naElements = screen.getAllByText('N/A');
+    expect(naElements.length).toBeGreaterThan(0);
+  });
+
+  it('displays schema mappings with display names', () => {
+    const dataset = createMockDataset({
+      schemaMappings: {
+        otelLogs: {
+          traceId: 'trace.id',
+          spanId: 'span.id',
+        },
+      },
+    });
+    renderComponent(dataset);
+
+    expect(screen.getByText('OTel logs')).toBeInTheDocument();
+    expect(screen.getByText('Trace ID')).toBeInTheDocument();
+    expect(screen.getByText('trace.id')).toBeInTheDocument();
+    expect(screen.getByText('Span ID')).toBeInTheDocument();
+    expect(screen.getByText('span.id')).toBeInTheDocument();
+  });
+
+  it('limits display to 4 mappings and shows "X more" message', () => {
+    const dataset = createMockDataset({
+      schemaMappings: {
+        otelLogs: {
+          traceId: 'trace.id',
+          spanId: 'span.id',
+        },
+        otherSchema: {
+          field1: 'field_1',
+          field2: 'field_2',
+          field3: 'field_3',
+          field4: 'field_4',
+        },
+      },
+    });
+    renderComponent(dataset);
+
+    // Should show "2 more" since we have 6 total mappings but limit to 4
+    expect(screen.getByText('2 more')).toBeInTheDocument();
+  });
+
+  it('renders edit button when editConfiguration is provided', () => {
+    const dataset = createMockDataset({
+      schemaMappings: {
+        otelLogs: {
+          traceId: 'trace.id',
+        },
+      },
+    });
+    const editConfiguration = jest.fn();
+    renderComponent(dataset, editConfiguration);
+
+    const editButton = screen.getByTestId('editSchemaConfigurationButton');
+    expect(editButton).toBeInTheDocument();
+  });
+
+  it('does not render edit button when editConfiguration is not provided', () => {
+    const dataset = createMockDataset({
+      schemaMappings: {
+        otelLogs: {
+          traceId: 'trace.id',
+        },
+      },
+    });
+    renderComponent(dataset);
+
+    const editButton = screen.queryByTestId('editSchemaConfigurationButton');
+    expect(editButton).toBeNull();
+  });
+
+  it('displays data source as N/A when no dataSourceRef exists', () => {
+    const dataset = createMockDataset();
+    renderComponent(dataset);
+
+    expect(screen.getByText('Data scope')).toBeInTheDocument();
+    const naElements = screen.getAllByText('N/A');
+    // Should have N/A for data source and schema mapping
+    expect(naElements.length).toBeGreaterThanOrEqual(1);
+  });
+});