[Backport 2.x][Feature] Adds the Drag and Drop editor to Visualize (o…

…pensearch-project#2078)

Backport PR:
opensearch-project#1966

Signed-off-by: Anan Zhuang <ananzh@amazon.com>

Backport PR commit message:
* [Chore] Moves Drag and Drop to new branch (opensearch-project#1400)

* Initial Drag and Drop plugin code (opensearch-project#946)

* Initial Drag and Drop plugin code

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Adds state management to Drag and Drop

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Moves Drag and Drop to create visualization menu

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Field Search in Data panel  (opensearch-project#995)

Add ability to search on index fields
Signed-off-by: Abbas Hussain <abbas_10690@yahoo.com>

* Adds initial type service (opensearch-project#1260)

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: updates viz modal snapshot

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix(License): Fixes license headers

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

Co-authored-by: Abbas Hussain <abbashus@amazon.com>

* [D&D] Type Service Contributions (opensearch-project#1402)

* feat(Contributions): Simple working contributions

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat(Contributions): Add new field from dropbox

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat(Contributions): Working edit mode

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix(Contributions): Fixes switching dropbox fields

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: Updates license headers

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat(Contributions): Adds initial drag & drop validation

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat(Dropbox): Allows multiple instances of the same field

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat(Dropbox): Working reorder fields

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat(Contributions): Working container contributions

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: clean up exports

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* test(Contribution): Adds unit test `mergeArrays`

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* test(TypeService): Adds plugin unit tests

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: remove redundant code

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* test(Functional): Updates
Chart types

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Refactor to use AggService and introduce metric visualization (opensearch-project#1734)

* partial progress

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* simle workign metric using aggShemas

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* updated VisualizationTypeOptions to be a generic

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* partially working metric style options

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* all state objects are serializeable

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* working delete and reorder

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: cleanup agg service changes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Adds the data source selector and a useIndexPatterns hook (opensearch-project#1763)

Signed-off-by: Brooke Green <cptn@amazon.com>

* [D&D] Adding and editing an aggregation + metric color ranges (opensearch-project#1781)

* edit and add agg works

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* edit agg using draft state

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* cleanup dropbox field icon

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Adds other metric style props

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Updated comment

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Enable basic saved object management (opensearch-project#1816)

* [D&D] Enable basic saved object management

- Create README stub for saved_objects_management plugin
- Register wizard saved object loader with management plugin
- Add management methods to SavedObjectsType
- Add capabilities provider to wizard
- Add saved wizard vis SavedObjectClass and SavedObjectLoader
- Add public plugin start method

partially addresses opensearch-project#1620

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [Doc] Add clarifications to README

for save objects management plugin

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Adds drop validation (opensearch-project#1833)

* edit and add agg works

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* edit agg using draft state

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Adds other metric style props

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat: Adds agg type validation and defaults on drop

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: refactor filter

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: updates D&D icon (opensearch-project#1844)

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Chore/remove contributions (opensearch-project#1843)

* adds min/max validation

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* relocated contributions

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Some more cleanup

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* minor fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* one more unnecessary file

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: Seconday panel title

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: Updates Field selector (opensearch-project#1845)

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Adding breadcrumbs for drag and drop creation (opensearch-project#1797)

Signed-off-by: Brooke Green <cptn@amazon.com>

* fix(D&D): fixes reloading app (opensearch-project#1855)

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Dropbox style and animations (opensearch-project#1863)

* fix dropbox styles and added animations

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* simpler usePrefersReducedMotion

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix drop target animation

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Basic saving, loading, and updating (opensearch-project#1870)

* [D&D] Enable basic saving and loading

- Add `/edit` route
- Sync state for saving and loading
- Add setter for vizualization slice
- Switch from BrowserRouter to Router
- Add version to saved objects
- Add savedWizardLoader to services
- store visualization and style states separately
- add version
- update breadcrumb handling
- move useSavedWizardVis to top_nav
- handle savedObjectNotFound
- use savedObjectLoader correctly
- allow copy on save
- update url and chrome on save
- add type for WizardVisSavedObject

fixes opensearch-project#1867

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* chore: Adds a few readme's (opensearch-project#1894)

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Empty-workspace polish (opensearch-project#1900)

* empty workspace polish

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr update

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* pr update 2

Signed-off-by: kaddy645 <xdeskart@amazon.com>

* [D&D] Fix: Topnav updates aggregation parameters (opensearch-project#1905)

* fix(D&D): Fixes top nav query and timerange

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix(D&D): Handles topnav state update

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Add a flag in the YAML config to enable and disable the D&D plugin (opensearch-project#1889)

Resolves Issue - opensearch-project#1877

Signed-off-by: Manasvini B Suryanarayana <manasvis@amazon.com>

* fix(Workspace): Fixes illustration and copy (opensearch-project#1916)

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Misc fixes (opensearch-project#1924)

* fix: minor fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: nit syntax fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: simplify useSavedWizardVis

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Enable basic embeddable panels (opensearch-project#1911)

- add embeddable, embeddable component, embeddable factory
- update `toExpression` to allow passing services
- register embeddable factory in plugin setup

fixes opensearch-project#1908

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Fix scss lint and available fields (opensearch-project#1927)

* fix(Lint): fixes scss linting issues

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: Filter field types correctly

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: minor

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Add wizard saved objects to vis list (opensearch-project#1933)

via appExtensions of alias registration

fixes opensearch-project#1887

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Feature/experimental (opensearch-project#1934)

* feat: experimental banner

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* feat: experimental embeddable

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: experimental banner location

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Remove search/hasMatch embeddable vestiges (opensearch-project#1935)

- removedebugging rendering
- also update embeddables icon

fixes opensearch-project#1910, opensearch-project#1925

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Refactor and cleanup embeddables (opensearch-project#1947)

General plugin updates (opensearch-project#1939):
- add start service getters/setters to plugin service
- move setters from setup to start so they're available to embeddable

Embeddable updates:
- use getters instead of depending on start services in constructor
- remove wizard from add panel "create" list
- add correct edit paths/URLs for linking to wizard opensearch-project#1940
- add basic error embeddable rendering
- render via ExpressionLoader instead of wizard_component opensearch-project#1920
- wizard_component no longer used, but updated for future use
- add subscription handling for query, filter, timerange changes opensearch-project#1937
- fix clone/replace panel actions opensearch-project#1943, opensearch-project#1944
- fix title/description panel rendering opensearch-project#1921
- add inspection panel action opensearch-project#1936

Asset updates:
- Update empty workspace illustration
- Add secondary fill icon version to match new visualization icons

fixes opensearch-project#1936, opensearch-project#1920, opensearch-project#1937, opensearch-project#1940, opensearch-project#1921, opensearch-project#1939, opensearch-project#1941, opensearch-project#1943, opensearch-project#1944

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Fix index pattern state and loading (opensearch-project#1949)

Remove useIndexPattern hook in favor of useIndexPatterns

fixes opensearch-project#1917

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Fix duplicate title warning (opensearch-project#1950)

fixes opensearch-project#1918

Signed-off-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Adds autosave while editing aggregation (opensearch-project#1953)

* fest: Adds autosave while editing agg

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: autosave order

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: spelling

Co-authored-by: Josh Romero <rmerqg@amazon.com>

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Fixes autosave with debounce (opensearch-project#1965)

* fix: autosave editing

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: improve workspace animation

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: show invalid field when editing

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: header offset

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* Update src/plugins/saved_objects_management/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/saved_objects_management/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/saved_objects_management/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/server/index.ts

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/server/types.ts

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/wizard/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* Update src/plugins/saved_objects_management/README.md

Co-authored-by: Josh Romero <rmerqg@amazon.com>

* [D&D] Final fixes (opensearch-project#2071)

* chore: Disable wizard by default

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: remove routes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: remove translations

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: nit fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: adds license to scss files

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: drop hover dark mode

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: nit fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* [D&D] Initial functional tests (opensearch-project#2070)

* fix: searchable dropdown

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: broken empty test

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* test(FTR): Adds basic functional tests for D&D

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* test(FTR): Adds CI group 13 to test workflow

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* fix: nit fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: att test to jenkinsfile

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: minor nit fixes

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: downgrade redux-toolkit for plugin compatibility

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

* chore: add docker config flag

Signed-off-by: Ashwin Pc <ashwinpc@amazon.com>

Co-authored-by: Abbas Hussain <abbashus@amazon.com>
Co-authored-by: Brooke <97559014+CPTNB@users.noreply.github.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: Kartik Desai <xdeskart@amazon.com>
Co-authored-by: Manasvini B Suryanarayana <manasvis@amazon.com>

Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>
Co-authored-by: Abbas Hussain <abbashus@amazon.com>
Co-authored-by: Brooke <97559014+CPTNB@users.noreply.github.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: Kartik Desai <xdeskart@amazon.com>
Co-authored-by: Manasvini B Suryanarayana <manasvis@amazon.com>

src/plugins/wizard/README.md

@@ -0,0 +1,36 @@
+# Wizard
+
+An OpenSearch Dashboards plugin for a visualization experience that makes exploring data and creating visualizations much easier. It will act as an additional way to create visualizations alongside the exiting tools within the current visualizations plugin. The tool will be incremental to the visualization tools available to users in OpenSearch Dashboards today.
+
+## Usage
+
+To use this plugin, navigate to:
+
+Visualize -> Create Visualization -> Wizard
+
+## Add a visualization
+
+All new visualizations currently reside in [public/visualizations](./public/visualizations). To add a new one, create a new visualization directory and add the required code (below) to setup and register a new vis type.
+
+### Anatomy of a visualization
+
+```
+metric/
+├─ index.ts
+├─ metric_viz_type.ts
+├─ to_expression.ts
+├─ components/
+   ├─ metric_viz_options.tsx
+```
+
+Outline:
+- `index.ts`: Exposes the `create<Viz>Config` function that is used to register the viz type
+- `<vizName>_viz_type.ts`: Contains the config that the type service needs to register the new vis type
+- `to_expression.ts`: The expression function that the plugin will use to render the visualization given the state of the plugin
+- `<vizName>_viz_options.tsx`: The component that will render the other properties that user can set in the `Style` tab
+
+**Notes:**
+
+- Currently only the metric viz is defined, so schema properties that other vis types might need may be missing and require further setup.
+- `to_expression` has not yet been abstracted into a common utility for different visualizations. Adding more visualization types should make it easier to identify which parts of expression creation are common, and which are visualization-specific.
+

src/plugins/wizard/common/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const PLUGIN_ID = 'wizard';
+export const PLUGIN_NAME = 'Wizard';
+export const VISUALIZE_ID = 'visualize';
+export const EDIT_PATH = '/edit';
+
+export { WizardSavedObjectAttributes, WIZARD_SAVED_OBJECT } from './wizard_saved_object_attributes';

src/plugins/wizard/common/wizard_saved_object_attributes.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectAttributes } from '../../../core/types';
+
+export const WIZARD_SAVED_OBJECT = 'wizard';
+
+export interface WizardSavedObjectAttributes extends SavedObjectAttributes {
+  title: string;
+  description?: string;
+  visualizationState?: string;
+  styleState?: string;
+  version: number;
+}

src/plugins/wizard/config.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema, TypeOf } from '@osd/config-schema';
+
+export const configSchema = schema.object({
+  enabled: schema.boolean({ defaultValue: false }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;

src/plugins/wizard/opensearch_dashboards.json

@@ -0,0 +1,22 @@
+{
+  "id": "wizard",
+  "version": "1.0.0",
+  "opensearchDashboardsVersion": "opensearchDashboards",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "navigation",
+    "charts",
+    "data",
+    "opensearchDashboardsReact",
+    "opensearchDashboardsUtils",
+    "savedObjects",
+    "embeddable",
+    "expressions",
+    "dashboard",
+    "visualizations",
+    "opensearchUiShared",
+    "visDefaultEditor"
+  ],
+  "optionalPlugins": []
+}

src/plugins/wizard/public/application/_util.scss

@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+@mixin scrollNavParent($template-row: none) {
+  display: grid;
+  min-height: 0;
+
+  @if $template-row != "none" {
+    grid-template-rows: $template-row;
+  }
+}

src/plugins/wizard/public/application/_variables.scss

@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+@import "@elastic/eui/src/global_styling/variables/header";
+@import "@elastic/eui/src/global_styling/variables/form";
+
+$osdHeaderOffset: $euiHeaderHeightCompensation;
+$wizSideNavWidth: 470px;

src/plugins/wizard/public/application/app.scss

@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+@import "variables";
+
+.wizLayout {
+  padding: 0;
+  display: grid;
+  grid-template: min-content 1fr / #{$wizSideNavWidth} 1fr;
+  grid-template-areas:
+    "topNav topNav"
+    "sideNav workspace";
+  height: calc(100vh - #{$osdHeaderOffset});
+}
+
+.headerIsExpanded .wizLayout {
+  height: calc(100vh - #{$osdHeaderOffset * 2});
+}

src/plugins/wizard/public/application/app.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { I18nProvider } from '@osd/i18n/react';
+import { EuiPage } from '@elastic/eui';
+import { DragDropProvider } from './utils/drag_drop/drag_drop_context';
+import { SideNav } from './components/side_nav';
+import { TopNav } from './components/top_nav';
+import { Workspace } from './components/workspace';
+import './app.scss';
+
+export const WizardApp = () => {
+  // Render the application DOM.
+  return (
+    <I18nProvider>
+      <DragDropProvider>
+        <EuiPage className="wizLayout">
+          <TopNav />
+          <SideNav />
+          <Workspace />
+        </EuiPage>
+      </DragDropProvider>
+    </I18nProvider>
+  );
+};

src/plugins/wizard/public/application/components/data_source_select.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiIcon } from '@elastic/eui';
+import { SearchableDropdown, SearchableDropdownOption } from './searchable_dropdown';
+import { useIndexPatterns } from '../utils/use';
+import { useTypedDispatch } from '../utils/state_management';
+import { setIndexPattern } from '../utils/state_management/visualization_slice';
+import { IndexPattern } from '../../../../data/public';
+
+function indexPatternEquality(A?: SearchableDropdownOption, B?: SearchableDropdownOption): boolean {
+  return !A || !B ? false : A.id === B.id;
+}
+
+function toSearchableDropdownOption(indexPattern: IndexPattern): SearchableDropdownOption {
+  return {
+    id: indexPattern.id || '',
+    label: indexPattern.title,
+    searchableLabel: indexPattern.title,
+    prepend: <EuiIcon type="indexPatternApp" />,
+  };
+}
+
+export const DataSourceSelect = () => {
+  const { indexPatterns, loading, error, selected } = useIndexPatterns();
+  const dispatch = useTypedDispatch();
+
+  return (
+    <SearchableDropdown
+      selected={selected !== undefined ? toSearchableDropdownOption(selected) : undefined}
+      onChange={(option) => {
+        const foundOption = indexPatterns.filter((s) => s.id === option.id)[0];
+        if (foundOption !== undefined && typeof foundOption.id === 'string') {
+          dispatch(setIndexPattern(foundOption.id));
+        }
+      }}
+      prepend={i18n.translate('wizard.nav.dataSource.selector.title', {
+        defaultMessage: 'Data Source',
+      })}
+      error={error}
+      loading={loading}
+      options={indexPatterns.map(toSearchableDropdownOption)}
+      equality={indexPatternEquality}
+    />
+  );
+};

src/plugins/wizard/public/application/components/data_tab/config_panel.scss

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+.wizConfig {
+  @include euiYScrollWithShadows;
+
+  background: $euiColorLightestShade;
+  border-left: $euiBorderThin;
+  border-right: $euiBorderThin;
+  position: relative;
+  overflow-x: hidden;
+
+  &__section {
+    width: 100%;
+    transition: transform $euiAnimSpeedNormal 0s $euiAnimSlightResistance;
+  }
+
+  &__title {
+    padding: $euiSizeS;
+    padding-bottom: 0;
+
+    &.showDivider {
+      border-bottom: 1px solid $euiColorLightShade;
+    }
+  }
+
+  &__content {
+    padding: $euiSizeS;
+  }
+
+  &__aggEditor {
+    padding: 0 $euiSizeM;
+  }
+
+  &--secondary {
+    position: absolute;
+    top: 0;
+    left: 100%;
+  }
+
+  &.showSecondary > .wizConfig__section {
+    transform: translateX(-100%);
+  }
+}

src/plugins/wizard/public/application/components/data_tab/config_panel.tsx

@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiForm } from '@elastic/eui';
+import React from 'react';
+import { useVisualizationType } from '../../utils/use';
+import { useTypedSelector } from '../../utils/state_management';
+import './config_panel.scss';
+import { mapSchemaToAggPanel } from './schema_to_dropbox';
+import { SecondaryPanel } from './secondary_panel';
+
+export function ConfigPanel() {
+  const vizType = useVisualizationType();
+  const editingState = useTypedSelector(
+    (state) => state.visualization.activeVisualization?.draftAgg
+  );
+  const schemas = vizType.ui.containerConfig.data.schemas;
+
+  if (!schemas) return null;
+
+  const mainPanel = mapSchemaToAggPanel(schemas);
+
+  return (
+    <EuiForm className={`wizConfig ${editingState ? 'showSecondary' : ''}`}>
+      <div className="wizConfig__section">{mainPanel}</div>
+      <SecondaryPanel />
+    </EuiForm>
+  );
+}