From 9a97b436b11820ff7df4e3e456e9aea3a6005593 Mon Sep 17 00:00:00 2001
From: Tianle Huang <60111637+tianleh@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:17:44 -0700
Subject: [PATCH 01/10] fix dynamic config API calls to pass correct input
 (#6474)

* update dynamic API calls to pass correct input

Signed-off-by: Tianle Huang <tianleh@amazon.com>

* add unit tests

Signed-off-by: Tianle Huang <tianleh@amazon.com>

* add changelog

Signed-off-by: Tianle Huang <tianleh@amazon.com>

* revert yml

Signed-off-by: Tianle Huang <tianleh@amazon.com>

---------

Signed-off-by: Tianle Huang <tianleh@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../server/routes/index.test.ts               | 86 +++++++++++++++++--
 .../application_config/server/routes/index.ts | 35 ++++----
 3 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c823709af27..06eccf2d30ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -118,6 +118,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Multiple Datasource]Read hideLocalCluster setting from yml and set in data source selector and data source menu ([#6361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6361))
 - [BUG][Multiple Datasource] Refactor read-only component to cover more edge cases ([#6416](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6416))
 - [BUG] Fix for checkForFunctionProperty so that order does not matter ([#6248](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6248))
+- [Dynamic Configurations] Fix dynamic config API calls to pass correct input ([#6474](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6474))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
 
diff --git a/src/plugins/application_config/server/routes/index.test.ts b/src/plugins/application_config/server/routes/index.test.ts
index 0aa161bf560f..37fc7981ea16 100644
--- a/src/plugins/application_config/server/routes/index.test.ts
+++ b/src/plugins/application_config/server/routes/index.test.ts
@@ -79,6 +79,8 @@ describe('application config routes', () => {
         getConfig: jest.fn().mockReturnValue(configurations),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const request = {};
 
       const okResponse = {
@@ -91,7 +93,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleGetConfig(client, request, response, logger);
+      const returnedResponse = await handleGetConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(okResponse);
 
@@ -100,6 +107,8 @@ describe('application config routes', () => {
           value: configurations,
         },
       });
+
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
 
     it('return error response when client throws error', async () => {
@@ -111,6 +120,8 @@ describe('application config routes', () => {
         }),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const request = {};
 
       const response = {
@@ -119,7 +130,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleGetConfig(client, request, response, logger);
+      const returnedResponse = await handleGetConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(ERROR_RESPONSE);
 
@@ -131,6 +147,7 @@ describe('application config routes', () => {
       });
 
       expect(logger.error).toBeCalledWith(error);
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
   });
 
@@ -140,6 +157,8 @@ describe('application config routes', () => {
         getEntityConfig: jest.fn().mockReturnValue(ENTITY_VALUE),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const okResponse = {
         statusCode: 200,
       };
@@ -156,7 +175,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleGetEntityConfig(client, request, response, logger);
+      const returnedResponse = await handleGetEntityConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(okResponse);
 
@@ -165,6 +189,8 @@ describe('application config routes', () => {
           value: ENTITY_VALUE,
         },
       });
+
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
 
     it('return error response when client throws error', async () => {
@@ -176,6 +202,8 @@ describe('application config routes', () => {
         }),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const request = {
         params: {
           entity: ENTITY_NAME,
@@ -188,7 +216,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleGetEntityConfig(client, request, response, logger);
+      const returnedResponse = await handleGetEntityConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(ERROR_RESPONSE);
 
@@ -200,6 +233,8 @@ describe('application config routes', () => {
       });
 
       expect(logger.error).toBeCalledWith(error);
+
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
   });
 
@@ -209,6 +244,8 @@ describe('application config routes', () => {
         updateEntityConfig: jest.fn().mockReturnValue(ENTITY_NEW_VALUE),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const okResponse = {
         statusCode: 200,
       };
@@ -228,7 +265,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleUpdateEntityConfig(client, request, response, logger);
+      const returnedResponse = await handleUpdateEntityConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(okResponse);
 
@@ -241,6 +283,8 @@ describe('application config routes', () => {
       });
 
       expect(logger.error).not.toBeCalled();
+
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
 
     it('return error response when client fails', async () => {
@@ -252,6 +296,8 @@ describe('application config routes', () => {
         }),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const request = {
         params: {
           entity: ENTITY_NAME,
@@ -267,7 +313,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleUpdateEntityConfig(client, request, response, logger);
+      const returnedResponse = await handleUpdateEntityConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(ERROR_RESPONSE);
 
@@ -279,6 +330,8 @@ describe('application config routes', () => {
       });
 
       expect(logger.error).toBeCalledWith(error);
+
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
   });
 
@@ -288,6 +341,8 @@ describe('application config routes', () => {
         deleteEntityConfig: jest.fn().mockReturnValue(ENTITY_NAME),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const okResponse = {
         statusCode: 200,
       };
@@ -304,7 +359,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleDeleteEntityConfig(client, request, response, logger);
+      const returnedResponse = await handleDeleteEntityConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(okResponse);
 
@@ -317,6 +377,7 @@ describe('application config routes', () => {
       });
 
       expect(logger.error).not.toBeCalled();
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
 
     it('return error response when client fails', async () => {
@@ -328,6 +389,8 @@ describe('application config routes', () => {
         }),
       };
 
+      const getConfigurationClient = jest.fn().mockReturnValue(client);
+
       const request = {
         params: {
           entity: ENTITY_NAME,
@@ -340,7 +403,12 @@ describe('application config routes', () => {
 
       const logger = loggerMock.create();
 
-      const returnedResponse = await handleDeleteEntityConfig(client, request, response, logger);
+      const returnedResponse = await handleDeleteEntityConfig(
+        getConfigurationClient,
+        request,
+        response,
+        logger
+      );
 
       expect(returnedResponse).toBe(ERROR_RESPONSE);
 
@@ -352,6 +420,8 @@ describe('application config routes', () => {
       });
 
       expect(logger.error).toBeCalledWith(error);
+
+      expect(getConfigurationClient).toBeCalledWith(request);
     });
   });
 });
diff --git a/src/plugins/application_config/server/routes/index.ts b/src/plugins/application_config/server/routes/index.ts
index b6ec638e1aa9..82c9a98bc445 100644
--- a/src/plugins/application_config/server/routes/index.ts
+++ b/src/plugins/application_config/server/routes/index.ts
@@ -6,7 +6,6 @@
 import { schema } from '@osd/config-schema';
 import {
   IRouter,
-  IScopedClusterClient,
   Logger,
   OpenSearchDashboardsRequest,
   OpenSearchDashboardsResponseFactory,
@@ -15,7 +14,7 @@ import { ConfigurationClient } from '../types';
 
 export function defineRoutes(
   router: IRouter,
-  getConfigurationClient: (configurationClient: IScopedClusterClient) => ConfigurationClient,
+  getConfigurationClient: (request?: OpenSearchDashboardsRequest) => ConfigurationClient,
   logger: Logger
 ) {
   router.get(
@@ -24,9 +23,7 @@ export function defineRoutes(
       validate: false,
     },
     async (context, request, response) => {
-      const client = getConfigurationClient(context.core.opensearch.client);
-
-      return await handleGetConfig(client, request, response, logger);
+      return await handleGetConfig(getConfigurationClient, request, response, logger);
     }
   );
   router.get(
@@ -39,9 +36,7 @@ export function defineRoutes(
       },
     },
     async (context, request, response) => {
-      const client = getConfigurationClient(context.core.opensearch.client);
-
-      return await handleGetEntityConfig(client, request, response, logger);
+      return await handleGetEntityConfig(getConfigurationClient, request, response, logger);
     }
   );
   router.post(
@@ -57,9 +52,7 @@ export function defineRoutes(
       },
     },
     async (context, request, response) => {
-      const client = getConfigurationClient(context.core.opensearch.client);
-
-      return await handleUpdateEntityConfig(client, request, response, logger);
+      return await handleUpdateEntityConfig(getConfigurationClient, request, response, logger);
     }
   );
   router.delete(
@@ -72,21 +65,21 @@ export function defineRoutes(
       },
     },
     async (context, request, response) => {
-      const client = getConfigurationClient(context.core.opensearch.client);
-
-      return await handleDeleteEntityConfig(client, request, response, logger);
+      return await handleDeleteEntityConfig(getConfigurationClient, request, response, logger);
     }
   );
 }
 
 export async function handleGetEntityConfig(
-  client: ConfigurationClient,
+  getConfigurationClient: (request?: OpenSearchDashboardsRequest) => ConfigurationClient,
   request: OpenSearchDashboardsRequest,
   response: OpenSearchDashboardsResponseFactory,
   logger: Logger
 ) {
   logger.info(`Received a request to get entity config for ${request.params.entity}.`);
 
+  const client = getConfigurationClient(request);
+
   try {
     const result = await client.getEntityConfig(request.params.entity, {
       headers: request.headers,
@@ -103,7 +96,7 @@ export async function handleGetEntityConfig(
 }
 
 export async function handleUpdateEntityConfig(
-  client: ConfigurationClient,
+  getConfigurationClient: (request?: OpenSearchDashboardsRequest) => ConfigurationClient,
   request: OpenSearchDashboardsRequest,
   response: OpenSearchDashboardsResponseFactory,
   logger: Logger
@@ -112,6 +105,8 @@ export async function handleUpdateEntityConfig(
     `Received a request to update entity ${request.params.entity} with new value ${request.body.newValue}.`
   );
 
+  const client = getConfigurationClient(request);
+
   try {
     const result = await client.updateEntityConfig(request.params.entity, request.body.newValue, {
       headers: request.headers,
@@ -128,13 +123,15 @@ export async function handleUpdateEntityConfig(
 }
 
 export async function handleDeleteEntityConfig(
-  client: ConfigurationClient,
+  getConfigurationClient: (request?: OpenSearchDashboardsRequest) => ConfigurationClient,
   request: OpenSearchDashboardsRequest,
   response: OpenSearchDashboardsResponseFactory,
   logger: Logger
 ) {
   logger.info(`Received a request to delete entity ${request.params.entity}.`);
 
+  const client = getConfigurationClient(request);
+
   try {
     const result = await client.deleteEntityConfig(request.params.entity, {
       headers: request.headers,
@@ -151,13 +148,15 @@ export async function handleDeleteEntityConfig(
 }
 
 export async function handleGetConfig(
-  client: ConfigurationClient,
+  getConfigurationClient: (request?: OpenSearchDashboardsRequest) => ConfigurationClient,
   request: OpenSearchDashboardsRequest,
   response: OpenSearchDashboardsResponseFactory,
   logger: Logger
 ) {
   logger.info('Received a request to get all configurations.');
 
+  const client = getConfigurationClient(request);
+
   try {
     const result = await client.getConfig({ headers: request.headers });
     return response.ok({

From a1c8b8c437e34d186f3bc44436f71b62371432f1 Mon Sep 17 00:00:00 2001
From: Zhongnan Su <szhongna@amazon.com>
Date: Tue, 16 Apr 2024 09:30:56 -0700
Subject: [PATCH 02/10] [MD] Add dropdown header to Data source single selector
 (#6431)

---
 CHANGELOG.md                                  |  1 +
 .../opensearch_dashboards.json                |  2 +-
 .../create_data_source_menu.test.tsx          | 15 +++-
 .../create_data_source_menu.tsx               | 10 ++-
 .../data_source_menu/data_source_menu.tsx     |  4 +-
 .../components/data_source_menu/types.ts      |  2 +
 .../data_source_selectable.test.tsx.snap      | 57 +++++++++++-
 .../data_source_selectable.test.tsx           | 51 ++++++++++-
 .../data_source_selectable.tsx                | 25 +++++-
 .../data_source_selector.test.tsx             |  1 -
 .../drop_down_header.test.tsx.snap            | 86 +++++++++++++++++++
 .../drop_down_header/drop_down_header.scss    |  3 +
 .../drop_down_header.test.tsx                 | 67 +++++++++++++++
 .../drop_down_header/drop_down_header.tsx     | 50 +++++++++++
 .../components/drop_down_header/index.ts      |  6 ++
 .../public/components/utils.ts                | 19 ++++
 .../data_source_management/public/plugin.ts   |  4 +-
 17 files changed, 388 insertions(+), 15 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
 create mode 100644 src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss
 create mode 100644 src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.test.tsx
 create mode 100644 src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
 create mode 100644 src/plugins/data_source_management/public/components/drop_down_header/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06eccf2d30ec..4a8dca630e52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -92,6 +92,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [CSP Handler] Update CSP handler to only query and modify frame ancestors instead of all CSP directives ([#6398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6398))
 - [MD] Add OpenSearch cluster group label to top of single selectable dropdown  ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))
 - [Workspace] Support workspace in saved objects client in server side. ([#6365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6365))
+- [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))
 
 ### 🐛 Bug Fixes
 
diff --git a/src/plugins/data_source_management/opensearch_dashboards.json b/src/plugins/data_source_management/opensearch_dashboards.json
index cfcfdd2ce430..824f9eacc9f6 100644
--- a/src/plugins/data_source_management/opensearch_dashboards.json
+++ b/src/plugins/data_source_management/opensearch_dashboards.json
@@ -5,6 +5,6 @@
   "ui": true,
   "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
-  "requiredBundles": ["opensearchDashboardsReact", "dataSource"],
+  "requiredBundles": ["opensearchDashboardsReact", "dataSource", "opensearchDashboardsUtils"],
   "extraPublicDirs": ["public/components/utils"]
 }
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
index 6d7200b182c5..df299687928b 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
@@ -5,18 +5,29 @@
 
 import { createDataSourceMenu } from './create_data_source_menu';
 import { MountPoint, SavedObjectsClientContract } from '../../../../../core/public';
-import { coreMock, notificationServiceMock } from '../../../../../core/public/mocks';
+import {
+  applicationServiceMock,
+  coreMock,
+  notificationServiceMock,
+} from '../../../../../core/public/mocks';
 import React from 'react';
-import { act, getByText, render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import { DataSourceComponentType, DataSourceSelectableConfig } from './types';
 import { ReactWrapper } from 'enzyme';
 import { mockDataSourcePluginSetupWithShowLocalCluster } from '../../mocks';
+import * as utils from '../utils';
 
 describe('create data source menu', () => {
   let client: SavedObjectsClientContract;
   const notifications = notificationServiceMock.createStartContract();
   const { uiSettings } = coreMock.createSetup();
 
+  beforeAll(() => {
+    jest
+      .spyOn(utils, 'getApplication')
+      .mockImplementation(() => applicationServiceMock.createStartContract());
+  });
+
   beforeEach(() => {
     client = {
       find: jest.fn().mockResolvedValue([]),
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
index 56fd7a7a7cb3..51fcb0db0857 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx
@@ -10,11 +10,13 @@ import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { DataSourceMenu } from './data_source_menu';
 import { DataSourceMenuProps } from './types';
 import { MountPointPortal } from '../../../../opensearch_dashboards_react/public';
+import { getApplication } from '../utils';
 
 export function createDataSourceMenu<T>(
   uiSettings: IUiSettingsClient,
   dataSourcePluginSetup: DataSourcePluginSetup
 ) {
+  const application = getApplication();
   return (props: DataSourceMenuProps<T>) => {
     const { hideLocalCluster } = dataSourcePluginSetup;
     if (props.setMenuMountPoint) {
@@ -25,13 +27,19 @@ export function createDataSourceMenu<T>(
               {...props}
               uiSettings={uiSettings}
               hideLocalCluster={hideLocalCluster}
+              application={application}
             />
           </EuiHeaderLinks>
         </MountPointPortal>
       );
     }
     return (
-      <DataSourceMenu {...props} uiSettings={uiSettings} hideLocalCluster={hideLocalCluster} />
+      <DataSourceMenu
+        {...props}
+        uiSettings={uiSettings}
+        hideLocalCluster={hideLocalCluster}
+        application={application}
+      />
     );
   };
 }
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
index 9511090e6c5a..bc645a0b885f 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -19,8 +19,7 @@ import {
 import { DataSourceSelectable } from '../data_source_selectable';
 
 export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
-  const { componentType, componentConfig, uiSettings, hideLocalCluster } = props;
-
+  const { componentType, componentConfig, uiSettings, hideLocalCluster, application } = props;
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
     const {
       activeOption,
@@ -81,6 +80,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         hideLocalCluster={hideLocalCluster || false}
         fullWidth={fullWidth}
         uiSettings={uiSettings}
+        application={application}
       />
     );
   }
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
index a37d7d0dd0c3..e5f34a3a2979 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/types.ts
+++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
@@ -8,6 +8,7 @@ import {
   SavedObjectsClientContract,
   SavedObject,
   IUiSettingsClient,
+  ApplicationStart,
 } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 
@@ -32,6 +33,7 @@ export interface DataSourceMenuProps<T = any> {
   componentConfig: T;
   hideLocalCluster?: boolean;
   uiSettings?: IUiSettingsClient;
+  application?: ApplicationStart;
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
 }
 
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index e49222c37d7c..4601e70491d2 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
   display="inlineBlock"
   hasArrow={true}
   id="dataSourceSelectableContextMenuPopover"
+  initialFocus=".euiSelectableSearch"
   isOpen={false}
   ownFocus={true}
   panelPaddingSize="none"
@@ -37,6 +38,12 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
       color="transparent"
       paddingSize="s"
     >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={3}
+      />
+      <EuiHorizontalRule
+        margin="none"
+      />
       <EuiSpacer
         size="s"
       />
@@ -70,6 +77,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
         renderOption={[Function]}
         searchProps={
           Object {
+            "compressed": true,
             "placeholder": "Search",
           }
         }
@@ -105,6 +113,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
   display="inlineBlock"
   hasArrow={true}
   id="dataSourceSelectableContextMenuPopover"
+  initialFocus=".euiSelectableSearch"
   isOpen={false}
   ownFocus={true}
   panelPaddingSize="none"
@@ -118,6 +127,12 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
       color="transparent"
       paddingSize="s"
     >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={0}
+      />
+      <EuiHorizontalRule
+        margin="none"
+      />
       <EuiSpacer
         size="s"
       />
@@ -130,6 +145,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
         renderOption={[Function]}
         searchProps={
           Object {
+            "compressed": true,
             "placeholder": "Search",
           }
         }
@@ -165,6 +181,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
   display="inlineBlock"
   hasArrow={true}
   id="dataSourceSelectableContextMenuPopover"
+  initialFocus=".euiSelectableSearch"
   isOpen={false}
   ownFocus={true}
   panelPaddingSize="none"
@@ -178,6 +195,12 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
       color="transparent"
       paddingSize="s"
     >
+      <DataSourceDropDownHeader
+        totalDataSourceCount={0}
+      />
+      <EuiHorizontalRule
+        margin="none"
+      />
       <EuiSpacer
         size="s"
       />
@@ -190,6 +213,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
         renderOption={[Function]}
         searchProps={
           Object {
+            "compressed": true,
             "placeholder": "Search",
           }
         }
@@ -273,6 +297,35 @@ Object {
                   <div
                     class="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow dataSourceSelectableOuiPanel"
                   >
+                    <div
+                      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
+                    >
+                      <div
+                        class="euiFlexItem"
+                      >
+                        DATA SOURCES
+                         (
+                        3
+                        )
+                      </div>
+                      <div
+                        class="dataSourceDropDownHeaderInvisibleFocusable"
+                        tabindex="0"
+                      />
+                      <div
+                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <button
+                          class="euiLink euiLink--primary"
+                          type="button"
+                        >
+                          Manage
+                        </button>
+                      </div>
+                    </div>
+                    <hr
+                      class="euiHorizontalRule euiHorizontalRule--full"
+                    />
                     <div
                       class="euiSpacer euiSpacer--s"
                     />
@@ -281,7 +334,7 @@ Object {
                       data-test-subj="dataSourceSelectable"
                     >
                       <div
-                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
@@ -295,7 +348,7 @@ Object {
                             aria-label="Search"
                             aria-owns="generated-id_listbox"
                             autocomplete="off"
-                            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch"
+                            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch"
                             placeholder="Search"
                             role="combobox"
                             type="search"
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index 78b63a57144c..6a85acb17511 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -7,12 +7,13 @@ import { ShallowWrapper, shallow, mount } from 'enzyme';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
-import { DataSourceSelectable, opensearchClusterGroupLabel } from './data_source_selectable';
+import { DataSourceSelectable } from './data_source_selectable';
 import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 import { render } from '@testing-library/react';
 import * as utils from '../utils';
 import { EuiSelectable } from '@elastic/eui';
+import { dataSourceOptionGroupLabel } from '../utils';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -409,7 +410,7 @@ describe('DataSourceSelectable', () => {
     component.instance().componentDidMount!();
     await nextTick();
     const optionsProp = component.find(EuiSelectable).prop('options');
-    expect(optionsProp[0]).toEqual(opensearchClusterGroupLabel);
+    expect(optionsProp[0]).toEqual(dataSourceOptionGroupLabel.opensearchCluster);
   });
 
   it('should not render opensearch cluster group label, when there is no option availiable', async () => {
@@ -431,4 +432,50 @@ describe('DataSourceSelectable', () => {
     const optionsProp = component.find(EuiSelectable).prop('options');
     expect(optionsProp).toEqual([]);
   });
+
+  it('should render group lablel normally after onChange', async () => {
+    const onSelectedDataSource = jest.fn();
+    component = shallow(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: 'test1', label: 'test1' }]}
+      />
+    );
+    const componentInstance = component.instance();
+
+    componentInstance.componentDidMount!();
+    await nextTick();
+    const optionsPropBefore = component.find(EuiSelectable).prop('options');
+    expect(optionsPropBefore).toEqual([
+      dataSourceOptionGroupLabel.opensearchCluster,
+      {
+        id: 'test1',
+        label: 'test1',
+        checked: 'on',
+      },
+      {
+        id: 'test2',
+        label: 'test2',
+      },
+      {
+        id: 'test3',
+        label: 'test3',
+      },
+    ]);
+    componentInstance.onChange([
+      dataSourceOptionGroupLabel.opensearchCluster,
+      { id: 'test2', label: 'test2', checked: 'on' },
+    ]);
+    await nextTick();
+    const optionsPropAfter = component.find(EuiSelectable).prop('options');
+    expect(optionsPropAfter).toEqual([
+      dataSourceOptionGroupLabel.opensearchCluster,
+      { id: 'test2', label: 'test2', checked: 'on' },
+    ]);
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 89f3d908dfe8..cf7c88526065 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -12,19 +12,27 @@ import {
   EuiButtonEmpty,
   EuiSelectable,
   EuiSpacer,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import {
+  ApplicationStart,
   IUiSettingsClient,
   SavedObjectsClientContract,
   ToastsStart,
 } from 'opensearch-dashboards/public';
-import { getDataSourcesWithFields, getDefaultDataSource, getFilteredDataSources } from '../utils';
+import {
+  dataSourceOptionGroupLabel,
+  getDataSourcesWithFields,
+  getDefaultDataSource,
+  getFilteredDataSources,
+} from '../utils';
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
 import { DataSourceItem } from '../data_source_item';
 import './data_source_selectable.scss';
+import { DataSourceDropDownHeader } from '../drop_down_header';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -33,6 +41,7 @@ interface DataSourceSelectableProps {
   disabled: boolean;
   hideLocalCluster: boolean;
   fullWidth: boolean;
+  application?: ApplicationStart;
   selectedOption?: DataSourceOption[];
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
   uiSettings?: IUiSettingsClient;
@@ -193,9 +202,12 @@ export class DataSourceSelectable extends React.Component<
 
   onChange(options: DataSourceOption[]) {
     if (!this._isMounted) return;
+    const optionsWithoutGroupLabel = options.filter(
+      (option) => !option.hasOwnProperty('isGroupLabel')
+    );
     const selectedDataSource = options.find(({ checked }) => checked);
 
-    this.setState({ dataSourceOptions: options });
+    this.setState({ dataSourceOptions: optionsWithoutGroupLabel });
 
     if (selectedDataSource) {
       this.setState({
@@ -213,7 +225,7 @@ export class DataSourceSelectable extends React.Component<
     if (dataSourceOptions.length === 0) {
       optionsWithGroupLabel = [];
     } else {
-      optionsWithGroupLabel = [opensearchClusterGroupLabel, ...dataSourceOptions];
+      optionsWithGroupLabel = [dataSourceOptionGroupLabel.opensearchCluster, ...dataSourceOptions];
     }
     return optionsWithGroupLabel;
   };
@@ -242,6 +254,7 @@ export class DataSourceSelectable extends React.Component<
 
     return (
       <EuiPopover
+        initialFocus={'.euiSelectableSearch'}
         id={'dataSourceSelectableContextMenuPopover'}
         button={button}
         isOpen={this.state.isPopoverOpen}
@@ -252,12 +265,18 @@ export class DataSourceSelectable extends React.Component<
       >
         <EuiContextMenuPanel>
           <EuiPanel className={'dataSourceSelectableOuiPanel'} color="transparent" paddingSize="s">
+            <DataSourceDropDownHeader
+              totalDataSourceCount={this.state.dataSourceOptions.length}
+              application={this.props.application}
+            />
+            <EuiHorizontalRule margin="none" />
             <EuiSpacer size="s" />
             <EuiSelectable
               aria-label="Search"
               searchable
               searchProps={{
                 placeholder: 'Search',
+                compressed: true,
               }}
               options={this.getOptionsWithGroupLabel(this.state.dataSourceOptions)}
               onChange={(newOptions) => this.onChange(newOptions)}
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx
index af5086f35a50..4f8df2542059 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx
@@ -14,7 +14,6 @@ import {
   mockResponseForSavedObjectsCalls,
 } from '../../mocks';
 import { AuthType } from 'src/plugins/data_source/common/data_sources';
-import * as utils from '../utils';
 import { EuiComboBox } from '@elastic/eui';
 
 describe('DataSourceSelector', () => {
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
new file mode 100644
index 000000000000..213c946d09b4
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/drop_down_header/__snapshots__/drop_down_header.test.tsx.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataSourceDropDownHeader should render correctly with the provided totalDataSourceCount 1`] = `
+<EuiTitle
+  size="xxxs"
+>
+  <EuiFlexGroup
+    responsive={false}
+  >
+    <EuiFlexItem>
+      DATA SOURCES
+       (
+      5
+      )
+    </EuiFlexItem>
+    <div
+      className="dataSourceDropDownHeaderInvisibleFocusable"
+      tabIndex={0}
+    />
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiLink
+        onClick={[Function]}
+      >
+        Manage
+      </EuiLink>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</EuiTitle>
+`;
+
+exports[`DataSourceDropDownHeader should render the activeDataSourceCount/totalDataSourceCount when both provided 1`] = `
+<DataSourceDropDownHeader
+  activeDataSourceCount={2}
+  totalDataSourceCount={5}
+>
+  <EuiTitle
+    size="xxxs"
+  >
+    <EuiFlexGroup
+      className="euiTitle euiTitle--xxxsmall"
+      responsive={false}
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiTitle euiTitle--xxxsmall"
+      >
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            DATA SOURCES
+             (
+            2/5
+            )
+          </div>
+        </EuiFlexItem>
+        <div
+          className="dataSourceDropDownHeaderInvisibleFocusable"
+          tabIndex={0}
+        />
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiLink
+              onClick={[Function]}
+            >
+              <button
+                className="euiLink euiLink--primary"
+                disabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                Manage
+              </button>
+            </EuiLink>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </EuiTitle>
+</DataSourceDropDownHeader>
+`;
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss
new file mode 100644
index 000000000000..244ca77b90e1
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.scss
@@ -0,0 +1,3 @@
+.dataSourceDropDownHeaderInvisibleFocusable {
+  opacity: 0;
+}
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.test.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.test.tsx
new file mode 100644
index 000000000000..920ad09271e1
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.test.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { coreMock } from '../../../../../core/public/mocks';
+import { DSM_APP_ID } from '../../plugin';
+import { DataSourceDropDownHeader } from '.';
+
+describe('DataSourceDropDownHeader', () => {
+  it('should render correctly with the provided totalDataSourceCount', () => {
+    const totalDataSourceCount = 5;
+    const wrapper = shallow(
+      <DataSourceDropDownHeader totalDataSourceCount={totalDataSourceCount} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render "DATA SOURCES" when totalDataSourceCount is greater than 1', () => {
+    const totalDataSourceCount = 5;
+    const wrapper = mount(<DataSourceDropDownHeader totalDataSourceCount={totalDataSourceCount} />);
+    expect(wrapper.text()).toContain('DATA SOURCES');
+  });
+
+  it.each([1, 0])(
+    'should render "DATA SOURCE" when totalDataSourceCount is %s',
+    (totalDataSourceCount) => {
+      const wrapper = mount(
+        <DataSourceDropDownHeader totalDataSourceCount={totalDataSourceCount} />
+      );
+      expect(wrapper.text()).toContain('DATA SOURCE');
+    }
+  );
+
+  it('should render the activeDataSourceCount/totalDataSourceCount when both provided', () => {
+    const totalDataSourceCount = 5;
+    const activeDataSourceCount = 2;
+    const wrapper = mount(
+      <DataSourceDropDownHeader
+        totalDataSourceCount={totalDataSourceCount}
+        activeDataSourceCount={activeDataSourceCount}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.text()).toContain(`${activeDataSourceCount}/${totalDataSourceCount}`);
+  });
+
+  it('should call application.navigateToApp when the "Manage" link is clicked', () => {
+    const totalDataSourceCount = 5;
+    const applicationMock = coreMock.createStart().application;
+    const navigateToAppMock = applicationMock.navigateToApp;
+
+    const wrapper = mount(
+      <DataSourceDropDownHeader
+        totalDataSourceCount={totalDataSourceCount}
+        application={applicationMock}
+      />
+    );
+
+    wrapper.find('EuiLink').simulate('click');
+    expect(navigateToAppMock).toHaveBeenCalledWith('management', {
+      path: `opensearch-dashboards/${DSM_APP_ID}`,
+    });
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
new file mode 100644
index 000000000000..2eb457c47511
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/drop_down_header/drop_down_header.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './drop_down_header.scss';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui';
+import React from 'react';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { DSM_APP_ID } from '../../plugin';
+
+interface DataSourceOptionItemProps {
+  totalDataSourceCount: number;
+  activeDataSourceCount?: number;
+  application?: ApplicationStart;
+}
+
+export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
+  activeDataSourceCount,
+  totalDataSourceCount,
+  application,
+}) => {
+  const dataSourceCounterPrefix = totalDataSourceCount === 1 ? 'DATA SOURCE' : 'DATA SOURCES';
+  const dataSourceCounter =
+    activeDataSourceCount !== undefined
+      ? `${activeDataSourceCount}/${totalDataSourceCount}`
+      : totalDataSourceCount;
+
+  return (
+    <EuiTitle size="xxxs">
+      <EuiFlexGroup responsive={false}>
+        <EuiFlexItem>
+          {dataSourceCounterPrefix} ({dataSourceCounter})
+        </EuiFlexItem>
+        <div tabIndex={0} className="dataSourceDropDownHeaderInvisibleFocusable" />
+        <EuiFlexItem grow={false}>
+          <EuiLink
+            onClick={() =>
+              application?.navigateToApp('management', {
+                path: `opensearch-dashboards/${DSM_APP_ID}`,
+              })
+            }
+          >
+            Manage
+          </EuiLink>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiTitle>
+  );
+};
diff --git a/src/plugins/data_source_management/public/components/drop_down_header/index.ts b/src/plugins/data_source_management/public/components/drop_down_header/index.ts
new file mode 100644
index 000000000000..3fc657904637
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/drop_down_header/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { DataSourceDropDownHeader } from './drop_down_header';
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index e433cdff52c5..98c23cc140c3 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -9,8 +9,10 @@ import {
   SavedObject,
   IUiSettingsClient,
   ToastsStart,
+  ApplicationStart,
 } from 'src/core/public';
 import { i18n } from '@osd/i18n';
+import { deepFreeze } from '@osd/std';
 import {
   DataSourceAttributes,
   DataSourceTableItem,
@@ -19,6 +21,8 @@ import {
 } from '../types';
 import { AuthenticationMethodRegistry } from '../auth_registry';
 import { DataSourceOption } from './data_source_menu/types';
+import { DataSourceGroupLabelOption } from './data_source_menu/types';
+import { createGetterSetter } from '../../../opensearch_dashboards_utils/public';
 
 export async function getDataSources(savedObjectsClient: SavedObjectsClientContract) {
   return savedObjectsClient
@@ -279,3 +283,18 @@ export const extractRegisteredAuthTypeCredentials = (
 
   return registeredCredentials;
 };
+
+interface DataSourceOptionGroupLabel {
+  [key: string]: DataSourceGroupLabelOption;
+}
+
+export const dataSourceOptionGroupLabel = deepFreeze<Readonly<DataSourceOptionGroupLabel>>({
+  opensearchCluster: {
+    id: 'opensearchClusterGroupLabel',
+    label: 'OpenSearch cluster',
+    isGroupLabel: true,
+  },
+  // TODO: add other group labels if needed
+});
+
+export const [getApplication, setApplication] = createGetterSetter<ApplicationStart>('Application');
diff --git a/src/plugins/data_source_management/public/plugin.ts b/src/plugins/data_source_management/public/plugin.ts
index abcc532b8a7e..2461044a680b 100644
--- a/src/plugins/data_source_management/public/plugin.ts
+++ b/src/plugins/data_source_management/public/plugin.ts
@@ -21,6 +21,7 @@ import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod
 import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector';
 import { createDataSourceMenu } from './components/data_source_menu/create_data_source_menu';
 import { DataSourceMenuProps } from './components/data_source_menu';
+import { setApplication } from './components/utils';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -40,7 +41,7 @@ export interface DataSourceManagementPluginStart {
   getAuthenticationMethodRegistry: () => IAuthenticationMethodRegistry;
 }
 
-const DSM_APP_ID = 'dataSources';
+export const DSM_APP_ID = 'dataSourceManagement';
 
 export class DataSourceManagementPlugin
   implements
@@ -111,6 +112,7 @@ export class DataSourceManagementPlugin
 
   public start(core: CoreStart) {
     this.started = true;
+    setApplication(core.application);
     return {
       getAuthenticationMethodRegistry: () => this.authMethodsRegistry,
     };

From 97355995c89a78bf45ebbdcbe3364fa8cc6eafe6 Mon Sep 17 00:00:00 2001
From: Yu Jin <112784385+yujin-emma@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:18:44 -0700
Subject: [PATCH 03/10] [Multiple DataSource] Do not support import data source
 object to Local cluster when not enable data source (#6395)

* WIP resolve import ds to lc

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* add test

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* fix typo

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* fix failed test

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* Update CHANGELOG.md

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* fix the failed test

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* remove unused snapshot

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* Update src/core/server/saved_objects/import/validate_object_id.ts

Co-authored-by: Zhongnan Su <szhongna@amazon.com>
Signed-off-by: Yu Jin <112784385+yujin-emma@users.noreply.github.com>

* Update src/core/server/saved_objects/import/import_saved_objects.ts

Co-authored-by: Zhongnan Su <szhongna@amazon.com>
Signed-off-by: Yu Jin <112784385+yujin-emma@users.noreply.github.com>

* address comments

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* fix test

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* remove unused comments

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

* fix bootstrap filure

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>

---------

Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>
Signed-off-by: Yu Jin <112784385+yujin-emma@users.noreply.github.com>
Co-authored-by: Zhongnan Su <szhongna@amazon.com>
---
 CHANGELOG.md                                  |   1 +
 .../import/import_saved_objects.test.ts       | 105 +++++++++++++++++-
 .../import/import_saved_objects.ts            |  25 +++++
 src/core/server/saved_objects/import/types.ts |   2 +-
 .../import/validate_object_id.test.ts         |  59 ++++++++++
 .../import/validate_object_id.ts              |  40 +++++++
 .../server/saved_objects/routes/import.ts     |   4 +
 .../public/lib/import_file.ts                 |   6 +-
 .../objects_table/components/flyout.test.tsx  |   1 +
 .../objects_table/components/flyout.tsx       |  10 +-
 10 files changed, 247 insertions(+), 6 deletions(-)
 create mode 100644 src/core/server/saved_objects/import/validate_object_id.test.ts
 create mode 100644 src/core/server/saved_objects/import/validate_object_id.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a8dca630e52..a578087fead9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -67,6 +67,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add icon in datasource table page to show the default datasource ([#6231](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6231))
 - [Multiple Datasource] Add TLS configuration for multiple data sources ([#6171](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6171))
 - [Multiple Datasource] Add multi selectable data source component ([#6211](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6211))
+- [Multiple Datasource] Do not support import data source object to Local cluster when not enable data source ([#6395](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6395))
 - [Multiple Datasource] Refactor data source menu and interface to allow cleaner selection of component and related configurations ([#6256](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6256))
 - [Multiple Datasource] Allow top nav menu to mount data source menu for use case when both menus are mounted ([#6268](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6268))
 - [Workspace] Add create workspace page ([#6179](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6179))
diff --git a/src/core/server/saved_objects/import/import_saved_objects.test.ts b/src/core/server/saved_objects/import/import_saved_objects.test.ts
index fff5b60c89cc..ea4ac66b1a0b 100644
--- a/src/core/server/saved_objects/import/import_saved_objects.test.ts
+++ b/src/core/server/saved_objects/import/import_saved_objects.test.ts
@@ -96,11 +96,12 @@ describe('#importSavedObjectsFromStream', () => {
   let savedObjectsClient: jest.Mocked<SavedObjectsClientContract>;
   let typeRegistry: jest.Mocked<ISavedObjectTypeRegistry>;
   const namespace = 'some-namespace';
-  const testDataSourceId = 'some-datasource';
+  const testDataSourceId = uuidv4();
 
   const setupOptions = (
     createNewCopies: boolean = false,
-    dataSourceId: string | undefined = undefined
+    dataSourceId: string | undefined = undefined,
+    dataSourceEnabled: boolean | undefined = false
   ): SavedObjectsImportOptions => {
     readStream = new Readable();
     savedObjectsClient = savedObjectsClientMock.create();
@@ -135,6 +136,17 @@ describe('#importSavedObjectsFromStream', () => {
       attributes: { title: 'some-title' },
     };
   };
+
+  const createDataSourceObject = (): SavedObject<{
+    title: string;
+  }> => {
+    return {
+      type: 'data-source',
+      id: uuidv4(),
+      references: [],
+      attributes: { title: 'some-title' },
+    };
+  };
   const createError = (): SavedObjectsImportError => {
     const title = 'some-title';
     return {
@@ -589,5 +601,94 @@ describe('#importSavedObjectsFromStream', () => {
       const expectedErrors = errors.map(({ type, id }) => expect.objectContaining({ type, id }));
       expect(result).toEqual({ success: false, successCount: 0, errors: expectedErrors });
     });
+
+    test('early return if import data source objects to non-MDS cluster', async () => {
+      const options = setupOptions(false, testDataSourceId, false);
+      const dsObj = createDataSourceObject();
+      const dsExportedObj = createObject(testDataSourceId);
+      const collectedObjects = [dsObj, dsExportedObj];
+
+      const errors = [
+        {
+          type: dsObj.type,
+          id: dsObj.id,
+          title: dsObj.attributes.title,
+          meta: { title: dsObj.attributes.title },
+          error: { type: 'unsupported_type' },
+        },
+        {
+          type: dsExportedObj.type,
+          id: dsExportedObj.id,
+          title: dsExportedObj.attributes.title,
+          meta: { title: dsExportedObj.attributes.title },
+          error: { type: 'unsupported_type' },
+        },
+      ];
+      getMockFn(collectSavedObjects).mockResolvedValue({
+        errors: [],
+        collectedObjects,
+        importIdMap: new Map(),
+      });
+      const result = await importSavedObjectsFromStream(options);
+      const expectedErrors = errors.map(({ type, id }) => expect.objectContaining({ type, id }));
+      expect(result).toEqual({ success: false, successCount: 0, errors: expectedErrors });
+    });
+
+    test('early return if import mixed non/data source objects to non-MDS cluster', async () => {
+      const options = setupOptions(false, testDataSourceId, false);
+      const dsObj = createDataSourceObject();
+      const dsExportedObj = createObject(testDataSourceId);
+      const nonDsExportedObj = createObject();
+      const collectedObjects = [dsObj, dsExportedObj, nonDsExportedObj];
+
+      const errors = [
+        {
+          type: dsObj.type,
+          id: dsObj.id,
+          title: dsObj.attributes.title,
+          meta: { title: dsObj.attributes.title },
+          error: { type: 'unsupported_type' },
+        },
+        {
+          type: dsExportedObj.type,
+          id: dsExportedObj.id,
+          title: dsExportedObj.attributes.title,
+          meta: { title: dsExportedObj.attributes.title },
+          error: { type: 'unsupported_type' },
+        },
+      ];
+      getMockFn(collectSavedObjects).mockResolvedValue({
+        errors: [],
+        collectedObjects,
+        importIdMap: new Map(),
+      });
+      const result = await importSavedObjectsFromStream(options);
+      const expectedErrors = errors.map(({ type, id }) => expect.objectContaining({ type, id }));
+      expect(result).toEqual({ success: false, successCount: 0, errors: expectedErrors });
+    });
+
+    test('early return if import single data source objects to non-MDS cluster', async () => {
+      const options = setupOptions(false, testDataSourceId, false);
+      const dsObj = createDataSourceObject();
+      const collectedObjects = [dsObj];
+
+      const errors = [
+        {
+          type: dsObj.type,
+          id: dsObj.id,
+          title: dsObj.attributes.title,
+          meta: { title: dsObj.attributes.title },
+          error: { type: 'unsupported_type' },
+        },
+      ];
+      getMockFn(collectSavedObjects).mockResolvedValue({
+        errors: [],
+        collectedObjects,
+        importIdMap: new Map(),
+      });
+      const result = await importSavedObjectsFromStream(options);
+      const expectedErrors = errors.map(({ type, id }) => expect.objectContaining({ type, id }));
+      expect(result).toEqual({ success: false, successCount: 0, errors: expectedErrors });
+    });
   });
 });
diff --git a/src/core/server/saved_objects/import/import_saved_objects.ts b/src/core/server/saved_objects/import/import_saved_objects.ts
index e82b4e634e0f..cfd091149004 100644
--- a/src/core/server/saved_objects/import/import_saved_objects.ts
+++ b/src/core/server/saved_objects/import/import_saved_objects.ts
@@ -33,6 +33,7 @@ import {
   SavedObjectsImportError,
   SavedObjectsImportResponse,
   SavedObjectsImportOptions,
+  SavedObjectsImportUnsupportedTypeError,
 } from './types';
 import { validateReferences } from './validate_references';
 import { checkOriginConflicts } from './check_origin_conflicts';
@@ -40,6 +41,7 @@ import { createSavedObjects } from './create_saved_objects';
 import { checkConflicts } from './check_conflicts';
 import { regenerateIds } from './regenerate_ids';
 import { checkConflictsForDataSource } from './check_conflict_for_data_source';
+import { isSavedObjectWithDataSource } from './validate_object_id';
 
 /**
  * Import saved objects from given stream. See the {@link SavedObjectsImportOptions | options} for more
@@ -58,6 +60,7 @@ export async function importSavedObjectsFromStream({
   dataSourceId,
   dataSourceTitle,
   workspaces,
+  dataSourceEnabled,
 }: SavedObjectsImportOptions): Promise<SavedObjectsImportResponse> {
   let errorAccumulator: SavedObjectsImportError[] = [];
   const supportedTypes = typeRegistry.getImportableAndExportableTypes().map((type) => type.name);
@@ -69,6 +72,28 @@ export async function importSavedObjectsFromStream({
     supportedTypes,
     dataSourceId,
   });
+  // if not enable data_source, throw error early
+  if (!dataSourceEnabled) {
+    const notSupportedErrors: SavedObjectsImportError[] = collectSavedObjectsResult.collectedObjects.reduce(
+      (errors: SavedObjectsImportError[], obj) => {
+        if (obj.type === 'data-source' || isSavedObjectWithDataSource(obj.id)) {
+          const error: SavedObjectsImportUnsupportedTypeError = { type: 'unsupported_type' };
+          const { title } = obj.attributes;
+          errors.push({ error, type: obj.type, id: obj.id, title, meta: { title } });
+        }
+        return errors; // Return the accumulator in each iteration
+      },
+      []
+    );
+    if (notSupportedErrors?.length > 0) {
+      return {
+        successCount: 0,
+        success: false,
+        errors: notSupportedErrors,
+      };
+    }
+  }
+
   errorAccumulator = [...errorAccumulator, ...collectSavedObjectsResult.errors];
   /** Map of all IDs for objects that we are attempting to import; each value is empty by default */
   let importIdMap = collectSavedObjectsResult.importIdMap;
diff --git a/src/core/server/saved_objects/import/types.ts b/src/core/server/saved_objects/import/types.ts
index a243e08f83e0..2db074119cad 100644
--- a/src/core/server/saved_objects/import/types.ts
+++ b/src/core/server/saved_objects/import/types.ts
@@ -189,7 +189,7 @@ export interface SavedObjectsImportOptions {
   createNewCopies: boolean;
   dataSourceId?: string;
   dataSourceTitle?: string;
-  /** if specified, will import in given workspaces */
+  dataSourceEnabled?: boolean;
   workspaces?: SavedObjectsBaseOptions['workspaces'];
 }
 
diff --git a/src/core/server/saved_objects/import/validate_object_id.test.ts b/src/core/server/saved_objects/import/validate_object_id.test.ts
new file mode 100644
index 000000000000..2f0cb3c6487a
--- /dev/null
+++ b/src/core/server/saved_objects/import/validate_object_id.test.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isSavedObjectWithDataSource } from './validate_object_id';
+
+describe('isObjectWithDataSource', () => {
+  test('should return false for valid object with data source ID but in wrong format', () => {
+    // Valid ID with two parts separated by underscore, and both parts being UUIDs
+    const inValidId = 'invalid_uuid_1234-invalid_uuid_5678';
+    expect(isSavedObjectWithDataSource(inValidId)).toBe(false);
+  });
+
+  test('should return false for invalid IDs', () => {
+    // Missing underscore
+    const invalidId1 = 'missingunderscore';
+    expect(isSavedObjectWithDataSource(invalidId1)).toBe(false);
+
+    // Invalid UUID in the second part
+    const invalidId2 = 'valid_uuid_1234-invalid_uuid';
+    expect(isSavedObjectWithDataSource(invalidId2)).toBe(false);
+
+    // Missing second part
+    const invalidId3 = 'valid_uuid_1234';
+    expect(isSavedObjectWithDataSource(invalidId3)).toBe(false);
+
+    // More than two parts
+    const invalidId4 = 'valid_uuid_1234-valid_uuid_5678-extra_part';
+    expect(isSavedObjectWithDataSource(invalidId4)).toBe(false);
+  });
+
+  test('should return false for non-UUID parts', () => {
+    // First part is not a UUID
+    const invalidId1 = 'not_a_uuid_valid_uuid_1234';
+    expect(isSavedObjectWithDataSource(invalidId1)).toBe(false);
+
+    // Second part is not a UUID
+    const invalidId2 = 'valid_uuid_1234_not_a_uuid';
+    expect(isSavedObjectWithDataSource(invalidId2)).toBe(false);
+
+    // Both parts are not UUIDs
+    const invalidId3 = 'not_a_uuid_not_a_uuid';
+    expect(isSavedObjectWithDataSource(invalidId3)).toBe(false);
+  });
+
+  test('should return false for string with underscore but not with UUID', () => {
+    // First part is not a UUID
+    const invalidId = 'saved_object_with_index_pattern_conflict';
+    expect(isSavedObjectWithDataSource(invalidId)).toBe(false);
+  });
+
+  test('should return false for string with underscore but with three UUIDs', () => {
+    // First part is not a UUID
+    const invalidId =
+      '7cbd2350-2223-11e8-b802-5bcf64c2cfb4_7cbd2350-2223-11e8-b802-5bcf64c2cfb4_7cbd2350-2223-11e8-b802-5bcf64c2cfb4';
+    expect(isSavedObjectWithDataSource(invalidId)).toBe(false);
+  });
+});
diff --git a/src/core/server/saved_objects/import/validate_object_id.ts b/src/core/server/saved_objects/import/validate_object_id.ts
new file mode 100644
index 000000000000..9a496c4d572a
--- /dev/null
+++ b/src/core/server/saved_objects/import/validate_object_id.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * When enable multiple data source, exported objects from a data source will maintain object id like
+ * "69a34b00-9ee8-11e7-8711-e7a007dcef99_7cbd2350-2223-11e8-b802-5bcf64c2cfb4"
+ * two UUIDs are connected with a underscore,
+ * before the underscore, the UUID represents the data source
+ * after the underscore, the UUID is the original object id
+ * when disable multiple data source, the exported object from local cluster will look like 7cbd2350-2223-11e8-b802-5bcf64c2cfb4
+ * we can use this format to tell out whether a single object is exported from MDS enabled/disabled cluster
+ *
+ * This file to going to group some validate function to tell source of object based on the object id
+ */
+
+/**
+ *
+ * @param candidate: string without underscore
+ * @returns
+ */
+const isUUID = (candidate: string): boolean => {
+  // Regular expression pattern for UUID
+  const uuidPattern: RegExp = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return uuidPattern.test(candidate);
+};
+
+/**
+ *
+ * @param id single object id
+ * @returns
+ */
+export const isSavedObjectWithDataSource = (id: string): boolean => {
+  const idParts = id.split('_');
+  /**
+   * check with the
+   */
+  return idParts && idParts.length === 2 && idParts.every(isUUID);
+};
diff --git a/src/core/server/saved_objects/routes/import.ts b/src/core/server/saved_objects/routes/import.ts
index 1fc739ea168c..a2a5bdcacd7a 100644
--- a/src/core/server/saved_objects/routes/import.ts
+++ b/src/core/server/saved_objects/routes/import.ts
@@ -64,6 +64,7 @@ export const registerImportRoute = (router: IRouter, config: SavedObjectConfig)
             workspaces: schema.maybe(
               schema.oneOf([schema.string(), schema.arrayOf(schema.string())])
             ),
+            dataSourceEnabled: schema.maybe(schema.boolean({ defaultValue: false })),
           },
           {
             validate: (object) => {
@@ -116,6 +117,8 @@ export const registerImportRoute = (router: IRouter, config: SavedObjectConfig)
         workspaces = [workspaces];
       }
 
+      const dataSourceEnabled = req.query.dataSourceEnabled;
+
       const result = await importSavedObjectsFromStream({
         savedObjectsClient: context.core.savedObjects.client,
         typeRegistry: context.core.savedObjects.typeRegistry,
@@ -126,6 +129,7 @@ export const registerImportRoute = (router: IRouter, config: SavedObjectConfig)
         dataSourceId,
         dataSourceTitle,
         workspaces,
+        dataSourceEnabled,
       });
 
       return res.ok({ body: result });
diff --git a/src/plugins/saved_objects_management/public/lib/import_file.ts b/src/plugins/saved_objects_management/public/lib/import_file.ts
index 3753a8251e10..f5156cd94f1d 100644
--- a/src/plugins/saved_objects_management/public/lib/import_file.ts
+++ b/src/plugins/saved_objects_management/public/lib/import_file.ts
@@ -41,7 +41,8 @@ export async function importFile(
   http: HttpStart,
   file: File,
   { createNewCopies, overwrite }: ImportMode,
-  selectedDataSourceId?: string
+  selectedDataSourceId?: string,
+  dataSourceEnabled?: boolean
 ) {
   const formData = new FormData();
   formData.append('file', file);
@@ -49,6 +50,9 @@ export async function importFile(
   if (selectedDataSourceId) {
     query.dataSourceId = selectedDataSourceId;
   }
+  if (dataSourceEnabled) {
+    query.dataSourceEnabled = dataSourceEnabled;
+  }
   return await http.post<ImportResponse>('/api/saved_objects/_import', {
     body: formData,
     headers: {
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.test.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.test.tsx
index 575741708f1e..ffefc806a979 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.test.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.test.tsx
@@ -231,6 +231,7 @@ describe('Flyout', () => {
           createNewCopies: true,
           overwrite: true,
         },
+        undefined,
         undefined
       );
       expect(component.state()).toMatchObject({
diff --git a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
index 586a573ffb53..03b15ada3201 100644
--- a/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx
@@ -189,13 +189,19 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
    * Does the initial import of a file, resolveImportErrors then handles errors and retries
    */
   import = async () => {
-    const { http } = this.props;
+    const { http, dataSourceEnabled } = this.props;
     const { file, importMode, selectedDataSourceId } = this.state;
     this.setState({ status: 'loading', error: undefined });
 
     // Import the file
     try {
-      const response = await importFile(http, file!, importMode, selectedDataSourceId);
+      const response = await importFile(
+        http,
+        file!,
+        importMode,
+        selectedDataSourceId,
+        dataSourceEnabled
+      );
       this.setState(processImportResponse(response), () => {
         // Resolve import errors right away if there's no index patterns to match
         // This will ask about overwriting each object, etc

From b9c703bc39c915cb5c240f0930acd9d1a43f4e68 Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Tue, 16 Apr 2024 11:26:26 -0700
Subject: [PATCH 04/10] [Multiple Datasource] Add error state to all data
 source menu components to show error component and consolidate all fetch
 errors (#6440)

* add error state to all components

Signed-off-by: Lu Yu <nluyu@amazon.com>

* add change log

Signed-off-by: Lu Yu <nluyu@amazon.com>

* resolve conflict and fix tests

Signed-off-by: Lu Yu <nluyu@amazon.com>

* move import up

Signed-off-by: Lu Yu <nluyu@amazon.com>

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>
Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 .../data_source_aggregated_view.tsx           | 20 ++++---
 .../data_source_error_menu.tsx                | 16 +++++
 .../data_source_error_menu/index.ts           |  5 ++
 .../create_data_source_menu.test.tsx.snap     | 60 +++++--------------
 .../components/data_source_menu/types.ts      |  4 ++
 .../data_source_multi_selectable.tsx          | 23 ++++---
 .../data_source_selectable.test.tsx           |  7 ++-
 .../data_source_selectable.tsx                | 26 ++++++--
 .../data_source_view.test.tsx.snap            | 46 +-------------
 .../data_source_view/data_source_view.tsx     | 23 +++----
 .../public/components/utils.test.ts           |  4 +-
 .../public/components/utils.ts                | 25 ++++----
 13 files changed, 127 insertions(+), 133 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/data_source_error_menu/data_source_error_menu.tsx
 create mode 100644 src/plugins/data_source_management/public/components/data_source_error_menu/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a578087fead9..ea2dd672f630 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -92,6 +92,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Dynamic Configurations] Improve dynamic configurations by adding cache and simplifying client fetch ([#6364](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6364))
 - [CSP Handler] Update CSP handler to only query and modify frame ancestors instead of all CSP directives ([#6398](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6398))
 - [MD] Add OpenSearch cluster group label to top of single selectable dropdown  ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))
+- [Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors ([#6440](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6440))
 - [Workspace] Support workspace in saved objects client in server side. ([#6365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6365))
 - [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))
 
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
index 7c039c2f64f3..dda3da78363b 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
@@ -13,9 +13,11 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
-import { getDataSourcesWithFields } from '../utils';
+import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
+import { DataSourceBaseState } from '../data_source_menu/types';
 
 interface DataSourceAggregatedViewProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -27,7 +29,7 @@ interface DataSourceAggregatedViewProps {
   displayAllCompatibleDataSources: boolean;
 }
 
-interface DataSourceAggregatedViewState {
+interface DataSourceAggregatedViewState extends DataSourceBaseState {
   isPopoverOpen: boolean;
   allDataSourcesIdToTitleMap: Map<string, any>;
 }
@@ -44,6 +46,7 @@ export class DataSourceAggregatedView extends React.Component<
     this.state = {
       isPopoverOpen: false,
       allDataSourcesIdToTitleMap: new Map(),
+      showError: false,
     };
   }
 
@@ -89,15 +92,18 @@ export class DataSourceAggregatedView extends React.Component<
         }
       })
       .catch(() => {
-        this.props.notifications.addWarning(
-          i18n.translate('dataSource.fetchDataSourceError', {
-            defaultMessage: 'Unable to fetch existing data sources',
-          })
-        );
+        handleDataSourceFetchError(this.onError.bind(this), this.props.notifications);
       });
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     const button = (
       <EuiButtonIcon
         data-test-subj="dataSourceAggregatedViewInfoButton"
diff --git a/src/plugins/data_source_management/public/components/data_source_error_menu/data_source_error_menu.tsx b/src/plugins/data_source_management/public/components/data_source_error_menu/data_source_error_menu.tsx
new file mode 100644
index 000000000000..e3352243fc6a
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_error_menu/data_source_error_menu.tsx
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiIcon, EuiText } from '@elastic/eui';
+import React from 'react';
+
+export const DataSourceErrorMenu = () => {
+  return (
+    <>
+      <EuiIcon type={'crossInCircleFilled'} color={'danger'} />
+      <EuiText color={'danger'}>Error</EuiText>
+    </>
+  );
+};
diff --git a/src/plugins/data_source_management/public/components/data_source_error_menu/index.ts b/src/plugins/data_source_management/public/components/data_source_error_menu/index.ts
new file mode 100644
index 000000000000..1bc0b8eb36e3
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/data_source_error_menu/index.ts
@@ -0,0 +1,5 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export { DataSourceErrorMenu } from './data_source_error_menu';
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index 31ae3a99d9cd..c520768a6890 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -5,65 +5,33 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <span
+        color="danger"
+        data-euiicon-type="crossInCircleFilled"
+      />
       <div
-        class="euiPopover euiPopover--anchorDownLeft"
-        data-test-subj="dataSourceSelectableContextMenuPopover"
-        id="dataSourceSelectableContextMenuPopover"
+        class="euiText euiText--medium"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiTextColor euiTextColor--danger"
         >
-          <button
-            aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-            type="button"
-          >
-            <span
-              class="euiButtonContent euiButtonEmpty__content"
-            >
-              <span
-                class="euiButtonContent__icon"
-                color="inherit"
-                data-euiicon-type="database"
-              />
-              <span
-                class="euiButtonEmpty__text"
-              />
-            </span>
-          </button>
+          Error
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
+    <span
+      color="danger"
+      data-euiicon-type="crossInCircleFilled"
+    />
     <div
-      class="euiPopover euiPopover--anchorDownLeft"
-      data-test-subj="dataSourceSelectableContextMenuPopover"
-      id="dataSourceSelectableContextMenuPopover"
+      class="euiText euiText--medium"
     >
       <div
-        class="euiPopover__anchor"
+        class="euiTextColor euiTextColor--danger"
       >
-        <button
-          aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-          type="button"
-        >
-          <span
-            class="euiButtonContent euiButtonEmpty__content"
-          >
-            <span
-              class="euiButtonContent__icon"
-              color="inherit"
-              data-euiicon-type="database"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            />
-          </span>
-        </button>
+        Error
       </div>
     </div>
   </div>,
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
index e5f34a3a2979..483f08c524bc 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/types.ts
+++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts
@@ -28,6 +28,10 @@ export interface DataSourceBaseConfig {
   disabled?: boolean;
 }
 
+export interface DataSourceBaseState {
+  showError: boolean;
+}
+
 export interface DataSourceMenuProps<T = any> {
   componentType: DataSourceComponentType;
   componentConfig: T;
diff --git a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
index 1a1d958b618c..25122a801e84 100644
--- a/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
@@ -5,10 +5,11 @@
 
 import React from 'react';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
-import { i18n } from '@osd/i18n';
 import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceFilterGroup, SelectedDataSourceOption } from './data_source_filter_group';
-import { getDataSourcesWithFields } from '../utils';
+import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
+import { DataSourceBaseState } from '../data_source_menu/types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
 
 export interface DataSourceMultiSeletableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -19,7 +20,7 @@ export interface DataSourceMultiSeletableProps {
   uiSettings?: IUiSettingsClient;
 }
 
-interface DataSourceMultiSeletableState {
+interface DataSourceMultiSeletableState extends DataSourceBaseState {
   dataSourceOptions: SelectedDataSourceOption[];
   selectedOptions: SelectedDataSourceOption[];
   defaultDataSource: string | null;
@@ -38,6 +39,7 @@ export class DataSourceMultiSelectable extends React.Component<
       dataSourceOptions: [],
       selectedOptions: [],
       defaultDataSource: null,
+      showError: false,
     };
   }
 
@@ -84,14 +86,18 @@ export class DataSourceMultiSelectable extends React.Component<
 
       this.props.onSelectedDataSources(selectedOptions);
     } catch (error) {
-      this.props.notifications.addWarning(
-        i18n.translate('dataSource.fetchDataSourceError', {
-          defaultMessage: 'Unable to fetch existing data sources',
-        })
+      handleDataSourceFetchError(
+        this.onError.bind(this),
+        this.props.notifications,
+        this.props.onSelectedDataSources
       );
     }
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   onChange(selectedOptions: SelectedDataSourceOption[]) {
     if (!this._isMounted) return;
     this.setState({
@@ -101,6 +107,9 @@ export class DataSourceMultiSelectable extends React.Component<
   }
 
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     return (
       <DataSourceFilterGroup
         selectedOptions={this.state.selectedOptions}
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index 6a85acb17511..c836dd011085 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -145,6 +145,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: false,
     });
 
     containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
@@ -165,6 +166,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: false,
     });
 
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
@@ -341,6 +343,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: false,
     });
   });
 
@@ -362,12 +365,13 @@ describe('DataSourceSelectable', () => {
 
     const containerInstance = container.instance();
 
-    expect(onSelectedDataSource).toBeCalledTimes(0);
+    expect(onSelectedDataSource).toBeCalledWith([]);
     expect(containerInstance.state).toEqual({
       dataSourceOptions: [],
       defaultDataSource: null,
       isPopoverOpen: false,
       selectedOption: [],
+      showError: true,
     });
 
     containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
@@ -388,6 +392,7 @@ describe('DataSourceSelectable', () => {
           label: 'test2',
         },
       ],
+      showError: true,
     });
 
     expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index cf7c88526065..47e54fae671f 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -25,11 +25,17 @@ import {
   getDataSourcesWithFields,
   getDefaultDataSource,
   getFilteredDataSources,
+  handleDataSourceFetchError,
 } from '../utils';
 import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
-import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import {
+  DataSourceBaseState,
+  DataSourceGroupLabelOption,
+  DataSourceOption,
+} from '../data_source_menu/types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
 import { DataSourceItem } from '../data_source_item';
 import './data_source_selectable.scss';
 import { DataSourceDropDownHeader } from '../drop_down_header';
@@ -47,7 +53,7 @@ interface DataSourceSelectableProps {
   uiSettings?: IUiSettingsClient;
 }
 
-interface DataSourceSelectableState {
+interface DataSourceSelectableState extends DataSourceBaseState {
   dataSourceOptions: DataSourceOption[];
   isPopoverOpen: boolean;
   selectedOption?: DataSourceOption[];
@@ -74,6 +80,7 @@ export class DataSourceSelectable extends React.Component<
       isPopoverOpen: false,
       selectedOption: [],
       defaultDataSource: null,
+      showError: false,
     };
 
     this.onChange.bind(this);
@@ -192,14 +199,18 @@ export class DataSourceSelectable extends React.Component<
       // handle default data source if there is no valid active option
       this.handleDefaultDataSource(dataSourceOptions, defaultDataSource);
     } catch (error) {
-      this.props.notifications.addWarning(
-        i18n.translate('dataSource.fetchDataSourceError', {
-          defaultMessage: 'Unable to fetch existing data sources',
-        })
+      handleDataSourceFetchError(
+        this.onError.bind(this),
+        this.props.notifications,
+        this.props.onSelectedDataSources
       );
     }
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   onChange(options: DataSourceOption[]) {
     if (!this._isMounted) return;
     const optionsWithoutGroupLabel = options.filter(
@@ -231,6 +242,9 @@ export class DataSourceSelectable extends React.Component<
   };
 
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     const button = (
       <>
         <EuiButtonEmpty
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index 9e0f04cea122..f0154f84d7e4 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -194,51 +194,7 @@ exports[`DataSourceView should call getDataSourceById when only pass id with no
 </Fragment>
 `;
 
-exports[`DataSourceView should call notification warning when there is data source fetch error 1`] = `
-<Fragment>
-  <EuiButtonEmpty
-    aria-label="dataSourceViewMenuButton"
-    className="euiHeaderLink"
-    data-test-subj="dataSourceViewContextMenuHeaderLink"
-    disabled={true}
-    iconSide="left"
-    iconType="database"
-    size="s"
-  />
-  <EuiPopover
-    anchorPosition="downLeft"
-    button={
-      <EuiButtonIcon
-        aria-label="Next"
-        display="empty"
-        iconType="iInCircle"
-        onClick={[Function]}
-      />
-    }
-    closePopover={[Function]}
-    display="inlineBlock"
-    hasArrow={true}
-    id="dataSourceViewContextMenuPopover"
-    isOpen={false}
-    ownFocus={true}
-    panelPaddingSize="none"
-  >
-    <EuiContextMenu
-      initialPanelId={0}
-      panels={
-        Array [
-          Object {
-            "id": 0,
-            "items": Array [],
-            "title": "Selected data source",
-          },
-        ]
-      }
-      size="m"
-    />
-  </EuiPopover>
-</Fragment>
-`;
+exports[`DataSourceView should call notification warning when there is data source fetch error 1`] = `<DataSourceErrorMenu />`;
 
 exports[`DataSourceView should render normally with local cluster not hidden 1`] = `
 <Fragment>
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index ab48e925d18f..420bb5927145 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -8,13 +8,14 @@ import { i18n } from '@osd/i18n';
 import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
 import { IUiSettingsClient } from 'src/core/public';
-import { DataSourceOption } from '../data_source_menu/types';
+import { DataSourceBaseState, DataSourceOption } from '../data_source_menu/types';
+import { MenuPanelItem } from '../../types';
+import { DataSourceErrorMenu } from '../data_source_error_menu';
 import {
   getDataSourceById,
   handleDataSourceFetchError,
   handleNoAvailableDataSourceError,
 } from '../utils';
-import { MenuPanelItem } from '../../types';
 import { LocalCluster } from '../constants';
 
 interface DataSourceViewProps {
@@ -28,7 +29,7 @@ interface DataSourceViewProps {
   onSelectedDataSources?: (dataSources: DataSourceOption[]) => void;
 }
 
-interface DataSourceViewState {
+interface DataSourceViewState extends DataSourceBaseState {
   selectedOption: DataSourceOption[];
   isPopoverOpen: boolean;
 }
@@ -42,6 +43,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     this.state = {
       isPopoverOpen: false,
       selectedOption: this.props.selectedOption ? this.props.selectedOption : [],
+      showError: false,
     };
   }
 
@@ -94,19 +96,17 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
           this.props.onSelectedDataSources([{ id: optionId, label: selectedDataSource.title }]);
         }
       } catch (error) {
-        this.setState({
-          selectedOption: [],
-        });
-        if (this.props.onSelectedDataSources) {
-          this.props.onSelectedDataSources([]);
-        }
-        handleDataSourceFetchError(this.props.notifications!);
+        handleDataSourceFetchError(this.onError.bind(this), this.props.notifications!);
       }
     } else if (this.props.onSelectedDataSources) {
       this.props.onSelectedDataSources([option]);
     }
   }
 
+  onError() {
+    this.setState({ showError: true });
+  }
+
   onClick() {
     this.setState({ ...this.state, isPopoverOpen: !this.state.isPopoverOpen });
   }
@@ -138,6 +138,9 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
   }
 
   render() {
+    if (this.state.showError) {
+      return <DataSourceErrorMenu />;
+    }
     const { panels } = this.getPanels();
 
     const button = (
diff --git a/src/plugins/data_source_management/public/components/utils.test.ts b/src/plugins/data_source_management/public/components/utils.test.ts
index 397f55333ed2..cc553037188b 100644
--- a/src/plugins/data_source_management/public/components/utils.test.ts
+++ b/src/plugins/data_source_management/public/components/utils.test.ts
@@ -76,7 +76,9 @@ describe('DataSourceManagement: Utils.ts', () => {
     const { toasts } = notificationServiceMock.createStartContract();
 
     test('should send warning when data source fetch failed', () => {
-      handleDataSourceFetchError(toasts);
+      const changeStateMock = jest.fn();
+      handleDataSourceFetchError(changeStateMock, toasts);
+      expect(changeStateMock).toBeCalledWith({ showError: true });
       expect(toasts.addWarning).toHaveBeenCalledWith(`Failed to fetch data source`);
     });
   });
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index 98c23cc140c3..a9f428f5cfa7 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
+import { i18n } from '@osd/i18n';
 import {
   HttpStart,
   SavedObjectsClientContract,
@@ -11,7 +11,6 @@ import {
   ToastsStart,
   ApplicationStart,
 } from 'src/core/public';
-import { i18n } from '@osd/i18n';
 import { deepFreeze } from '@osd/std';
 import {
   DataSourceAttributes,
@@ -85,14 +84,6 @@ export async function setFirstDataSourceAsDefault(
   }
 }
 
-export function handleDataSourceFetchError(notifications: ToastsStart) {
-  notifications.addWarning(
-    i18n.translate('dataSource.fetchDataSourceError', {
-      defaultMessage: `Failed to fetch data source`,
-    })
-  );
-}
-
 export function handleNoAvailableDataSourceError(notifications: ToastsStart) {
   notifications.addWarning(
     i18n.translate('dataSource.noAvailableDataSourceError', {
@@ -284,6 +275,20 @@ export const extractRegisteredAuthTypeCredentials = (
   return registeredCredentials;
 };
 
+export const handleDataSourceFetchError = (
+  changeState: (state: { showError: boolean }) => void,
+  notifications: ToastsStart,
+  callback?: (ds: DataSourceOption[]) => void
+) => {
+  changeState({ showError: true });
+  if (callback) callback([]);
+  notifications.addWarning(
+    i18n.translate('dataSource.fetchDataSourceError', {
+      defaultMessage: 'Failed to fetch data source',
+    })
+  );
+};
+
 interface DataSourceOptionGroupLabel {
   [key: string]: DataSourceGroupLabelOption;
 }

From be0f9d555cab325736ac55dead9ea9f8c6fa00a7 Mon Sep 17 00:00:00 2001
From: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:57:05 -0700
Subject: [PATCH 05/10] [MDS] TSVB Support (#6298)

* Add MDS support to TSVB

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor datasource picker component

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Allow picker to persist state

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactored picker component params

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Add unit tests

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Add to CHANGELOG

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor components to use hideLocalCluster

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Remove Picker wrapper

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Update selector component and rename field to index name

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Address comments

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor to use different decideClient

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Add optional arg

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Remove hidelocalcluster as a setting

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Fixed case where local cluster is disabled but the datasource id could be local cluster

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Add test for create data source picker handler

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

---------

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>
---
 CHANGELOG.md                                  |  1 +
 src/plugins/data/server/index.ts              |  1 +
 .../data/server/index_patterns/index.ts       |  1 +
 .../data/server/index_patterns/routes.ts      |  2 +-
 .../data_source_selector.tsx                  |  2 +
 .../components/data_source_selector/index.ts  |  2 +-
 .../data_source_management/public/index.ts    |  2 +-
 .../vis_type_timeseries/common/constants.ts   |  1 +
 .../vis_type_timeseries/common/vis_schema.ts  |  1 +
 .../opensearch_dashboards.json                |  2 +-
 .../components/annotations_editor.js          |  7 ++-
 .../application/components/index_pattern.js   | 53 +++++++++++++++++--
 .../create_data_source_change_handler.test.ts | 49 +++++++++++++++++
 .../lib/create_data_source_change_handler.ts  | 16 ++++++
 .../application/components/vis_editor.js      |  9 +++-
 .../public/application/lib/fetch_fields.js    |  7 ++-
 .../vis_type_timeseries/public/plugin.ts      | 16 +++++-
 .../vis_type_timeseries/public/services.ts    | 17 +++++-
 .../server/lib/get_fields.ts                  |  7 +--
 .../abstract_search_strategy.test.js          | 48 ++++++++++++++++-
 .../strategies/abstract_search_strategy.ts    |  3 +-
 .../server/lib/vis_data/get_annotations.js    |  3 +-
 .../server/lib/vis_data/get_series_data.js    |  3 +-
 .../server/lib/vis_data/get_table_data.js     | 18 ++++---
 .../vis_type_timeseries/server/plugin.ts      |  2 +
 .../server/routes/fields.ts                   |  9 +++-
 26 files changed, 251 insertions(+), 31 deletions(-)
 create mode 100644 src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.test.ts
 create mode 100644 src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ea2dd672f630..c409485dee50 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -83,6 +83,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add permission control logic ([#6052](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6052))
 - [Multiple Datasource] Add default icon for selectable component and make sure the default datasource shows automatically ([#6327](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6327))
 - [Multiple Datasource] Pass selected data sources to plugin consumers when the multi-select component initially loads ([#6333](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6333))
+- [Mulitple Datasource] Add multi data source support to TSVB ([#6298](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6298))
 - [Multiple Datasource] Add installedPlugins list to data source saved object ([#6348](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6348))
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
diff --git a/src/plugins/data/server/index.ts b/src/plugins/data/server/index.ts
index 46c2b1ca0477..4bc3ad62a4ae 100644
--- a/src/plugins/data/server/index.ts
+++ b/src/plugins/data/server/index.ts
@@ -145,6 +145,7 @@ export {
   FieldDescriptor as IndexPatternFieldDescriptor,
   shouldReadFieldFromDocValues, // used only in logstash_fields fixture
   FieldDescriptor,
+  decideClient,
 } from './index_patterns';
 
 export {
diff --git a/src/plugins/data/server/index_patterns/index.ts b/src/plugins/data/server/index_patterns/index.ts
index b2e832294e41..771aa9c09ab8 100644
--- a/src/plugins/data/server/index_patterns/index.ts
+++ b/src/plugins/data/server/index_patterns/index.ts
@@ -31,3 +31,4 @@
 export * from './utils';
 export { IndexPatternsFetcher, FieldDescriptor, shouldReadFieldFromDocValues } from './fetcher';
 export { IndexPatternsService, IndexPatternsServiceStart } from './index_patterns_service';
+export { decideClient } from './routes';
diff --git a/src/plugins/data/server/index_patterns/routes.ts b/src/plugins/data/server/index_patterns/routes.ts
index 3adc1970dd81..8b3c7139ffc0 100644
--- a/src/plugins/data/server/index_patterns/routes.ts
+++ b/src/plugins/data/server/index_patterns/routes.ts
@@ -155,7 +155,7 @@ export function registerRoutes(http: HttpServiceSetup) {
   );
 }
 
-const decideClient = async (
+export const decideClient = async (
   context: RequestHandlerContext,
   request: any
 ): Promise<LegacyAPICaller> => {
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
index bfe02b7288a2..8d2a90943b9f 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
@@ -34,6 +34,7 @@ export interface DataSourceSelectorProps {
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
   compressed?: boolean;
   uiSettings?: IUiSettingsClient;
+  isClearable?: boolean;
 }
 
 interface DataSourceSelectorState {
@@ -202,6 +203,7 @@ export class DataSourceSelector extends React.Component<
 
     return (
       <EuiComboBox
+        isClearable={this.props.isClearable}
         aria-label={
           placeholderText
             ? i18n.translate('dataSourceSelectorComboBoxAriaLabel', {
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/index.ts b/src/plugins/data_source_management/public/components/data_source_selector/index.ts
index a1d1d97b9828..ea44c761e1d4 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/index.ts
+++ b/src/plugins/data_source_management/public/components/data_source_selector/index.ts
@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { DataSourceSelector } from './data_source_selector';
+export { DataSourceSelector, DataSourceOption } from './data_source_selector';
diff --git a/src/plugins/data_source_management/public/index.ts b/src/plugins/data_source_management/public/index.ts
index 471792ddd726..da7fd8992459 100644
--- a/src/plugins/data_source_management/public/index.ts
+++ b/src/plugins/data_source_management/public/index.ts
@@ -12,7 +12,7 @@ export function plugin() {
 }
 
 export { DataSourceManagementPluginStart } from './types';
-export { DataSourceSelector } from './components/data_source_selector';
+export { DataSourceSelector, DataSourceOption } from './components/data_source_selector';
 export { DataSourceMenu } from './components/data_source_menu';
 export { DataSourceManagementPlugin, DataSourceManagementPluginSetup } from './plugin';
 export {
diff --git a/src/plugins/vis_type_timeseries/common/constants.ts b/src/plugins/vis_type_timeseries/common/constants.ts
index f97c4aaae3ad..279b9298f197 100644
--- a/src/plugins/vis_type_timeseries/common/constants.ts
+++ b/src/plugins/vis_type_timeseries/common/constants.ts
@@ -30,3 +30,4 @@
 
 export const MAX_BUCKETS_SETTING = 'metrics:max_buckets';
 export const INDEXES_SEPARATOR = ',';
+export const DATA_SOURCE_ID_KEY = 'data_source_id';
diff --git a/src/plugins/vis_type_timeseries/common/vis_schema.ts b/src/plugins/vis_type_timeseries/common/vis_schema.ts
index c6c79b165727..53d7e35519f5 100644
--- a/src/plugins/vis_type_timeseries/common/vis_schema.ts
+++ b/src/plugins/vis_type_timeseries/common/vis_schema.ts
@@ -238,6 +238,7 @@ export const panel = schema.object({
   ignore_global_filters: numberOptional,
   ignore_global_filter: numberOptional,
   index_pattern: stringRequired,
+  data_source_id: stringOptionalNullable,
   interval: stringRequired,
   isModelInvalid: schema.maybe(schema.boolean()),
   legend_position: stringOptionalNullable,
diff --git a/src/plugins/vis_type_timeseries/opensearch_dashboards.json b/src/plugins/vis_type_timeseries/opensearch_dashboards.json
index 92441a8a2e4d..23aa8049928b 100644
--- a/src/plugins/vis_type_timeseries/opensearch_dashboards.json
+++ b/src/plugins/vis_type_timeseries/opensearch_dashboards.json
@@ -5,6 +5,6 @@
   "server": true,
   "ui": true,
   "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
-  "optionalPlugins": ["usageCollection"],
+  "optionalPlugins": ["usageCollection", "dataSourceManagement", "dataSource"],
   "requiredBundles": ["opensearchDashboardsUtils", "opensearchDashboardsReact"]
 }
diff --git a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js
index 8a473c396511..f75284ff7439 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js
@@ -55,6 +55,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
 
 function newAnnotation() {
   return {
@@ -131,9 +132,13 @@ export class AnnotationsEditor extends Component {
                   label={
                     <FormattedMessage
                       id="visTypeTimeseries.annotationsEditor.indexPatternLabel"
-                      defaultMessage="Index pattern (required)"
+                      defaultMessage="Index name (required)"
                     />
                   }
+                  helpText={i18n.translate('visTypeTimeseries.indexPattern.searchByIndex', {
+                    defaultMessage:
+                      'Use an asterisk (*) to match multiple indices. Spaces and the characters , /, ?, ", <, >, | are not allowed.',
+                  })}
                   fullWidth
                 >
                   <EuiFieldText
diff --git a/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js b/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
index b28be12ffc33..da05e3e90138 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
@@ -41,6 +41,12 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { FieldSelect } from './aggs/field_select';
+import { createDataSourcePickerHandler } from './lib/create_data_source_change_handler';
+import {
+  getSavedObjectsClient,
+  getNotifications,
+  getDataSourceManagementSetup,
+} from '../../services';
 import { createSelectHandler } from './lib/create_select_handler';
 import { createTextHandler } from './lib/create_text_handler';
 import { YesNo } from './yes_no';
@@ -112,6 +118,14 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
   };
 
   const model = { ...defaults, ..._model };
+
+  const dataSourceManagementEnabled =
+    !!getDataSourceManagementSetup().dataSourceManagement || false;
+  const handleDataSourceSelectChange = createDataSourcePickerHandler(onChange);
+  const DataSourceSelector = dataSourceManagementEnabled
+    ? getDataSourceManagementSetup().dataSourceManagement.ui.DataSourceSelector
+    : undefined;
+
   const isDefaultIndexPatternUsed = model.default_index_pattern && !model[indexPatternName];
   const intervalValidation = validateIntervalValue(model[intervalName]);
   const selectedTimeRangeOption = timeRangeOptions.find(
@@ -157,18 +171,47 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
           </EuiFlexItem>
         </EuiFlexGroup>
       )}
+      {!!dataSourceManagementEnabled && (
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFormRow
+              id={htmlId('dataSource')}
+              label={i18n.translate('visTypeTimeseries.indexPattern.dataSourceLabel', {
+                defaultMessage: 'Data source',
+              })}
+            >
+              <DataSourceSelector
+                savedObjectsClient={getSavedObjectsClient().client}
+                notifications={getNotifications().toasts}
+                onSelectedDataSource={handleDataSourceSelectChange}
+                defaultOption={
+                  model.data_source_id !== undefined ? [{ id: model.data_source_id }] : undefined
+                }
+                disabled={false}
+                fullWidth={false}
+                removePrepend={true}
+                isClearable={false}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('indexPattern')}
             label={i18n.translate('visTypeTimeseries.indexPatternLabel', {
-              defaultMessage: 'Index pattern',
+              defaultMessage: 'Index name',
             })}
             helpText={
-              isDefaultIndexPatternUsed &&
-              i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', {
-                defaultMessage: 'Default index pattern is used. To query all indexes use *',
-              })
+              isDefaultIndexPatternUsed
+                ? i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', {
+                    defaultMessage: 'Default index pattern is used. To query all indexes use *',
+                  })
+                : i18n.translate('visTypeTimeseries.indexPattern.searchByIndex', {
+                    defaultMessage:
+                      'Use an asterisk (*) to match multiple indices. Spaces and the characters , /, ?, ", <, >, | are not allowed.',
+                  })
             }
           >
             <EuiFieldText
diff --git a/src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.test.ts b/src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.test.ts
new file mode 100644
index 000000000000..2a95a2756b50
--- /dev/null
+++ b/src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.test.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createDataSourcePickerHandler } from './create_data_source_change_handler';
+
+describe('createDataSourcePickerHandler()', () => {
+  let handleChange: jest.Mock<any, any>;
+  let changeHandler: (selectedOptions: []) => void;
+
+  beforeEach(() => {
+    handleChange = jest.fn();
+    changeHandler = createDataSourcePickerHandler(handleChange);
+  });
+
+  test.each([
+    {
+      id: undefined,
+    },
+    {},
+  ])(
+    'calls handleChange() and sets data_source_id to undefined if id cannot be found or is undefined',
+    ({ id }) => {
+      // @ts-ignore
+      changeHandler([{ id }]);
+      expect(handleChange.mock.calls.length).toEqual(1);
+      expect(handleChange.mock.calls[0][0]).toEqual({
+        data_source_id: undefined,
+      });
+    }
+  );
+
+  test.each([
+    {
+      id: '',
+    },
+    {
+      id: 'foo',
+    },
+  ])('calls handleChange() function with partial and updates the data_source_id', ({ id }) => {
+    // @ts-ignore
+    changeHandler([{ id }]);
+    expect(handleChange.mock.calls.length).toEqual(1);
+    expect(handleChange.mock.calls[0][0]).toEqual({
+      data_source_id: id,
+    });
+  });
+});
diff --git a/src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.ts b/src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.ts
new file mode 100644
index 000000000000..5fa18d74c5b3
--- /dev/null
+++ b/src/plugins/vis_type_timeseries/public/application/components/lib/create_data_source_change_handler.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import _ from 'lodash';
+
+import { PanelSchema } from 'src/plugins/vis_type_timeseries/common/types';
+import { DATA_SOURCE_ID_KEY } from '../../../../common/constants';
+
+export const createDataSourcePickerHandler = (handleChange: (e: PanelSchema) => void) => {
+  return (selectedOptions: []): void => {
+    return handleChange?.({
+      [DATA_SOURCE_ID_KEY]: _.get(selectedOptions, '[0].id', undefined),
+    } as PanelSchema);
+  };
+};
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js
index e3d78bd0a824..c91d1f084f91 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js
@@ -41,6 +41,7 @@ import { createBrushHandler } from '../lib/create_brush_handler';
 import { fetchFields } from '../lib/fetch_fields';
 import { extractIndexPatterns } from '../../../../../plugins/vis_type_timeseries/common/extract_index_patterns';
 import { getSavedObjectsClient, getUISettings, getDataStart, getCoreStart } from '../../services';
+import { DATA_SOURCE_ID_KEY } from '../../../common/constants';
 
 import { CoreStartContextProvider } from '../contexts/query_input_bar_context';
 import { OpenSearchDashboardsContextProvider } from '../../../../../plugins/opensearch_dashboards_react/public';
@@ -113,9 +114,13 @@ export class VisEditor extends Component {
     }
 
     if (this.props.isEditorMode) {
+      const dataSourceId = nextModel[DATA_SOURCE_ID_KEY] || undefined;
       const extractedIndexPatterns = extractIndexPatterns(nextModel);
-      if (!isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns)) {
-        fetchFields(extractedIndexPatterns).then((visFields) =>
+      if (
+        !isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns) ||
+        !isEqual(this.state.model[DATA_SOURCE_ID_KEY], dataSourceId)
+      ) {
+        fetchFields(extractedIndexPatterns, dataSourceId).then((visFields) =>
           this.setState({
             visFields,
             extractedIndexPatterns,
diff --git a/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js b/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js
index cac4c910fee4..8aa9bb618cad 100644
--- a/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js
+++ b/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js
@@ -30,9 +30,10 @@
 
 import { i18n } from '@osd/i18n';
 import { extractIndexPatterns } from '../../../common/extract_index_patterns';
+import { DATA_SOURCE_ID_KEY } from '../../../common/constants';
 import { getCoreStart } from '../../services';
 
-export async function fetchFields(indexPatterns = ['*']) {
+export async function fetchFields(indexPatterns = ['*'], dataSourceId = undefined) {
   const patterns = Array.isArray(indexPatterns) ? indexPatterns : [indexPatterns];
   try {
     const indexFields = await Promise.all(
@@ -40,6 +41,7 @@ export async function fetchFields(indexPatterns = ['*']) {
         return getCoreStart().http.get('/api/metrics/fields', {
           query: {
             index: pattern,
+            data_source: dataSourceId,
           },
         });
       })
@@ -62,7 +64,8 @@ export async function fetchFields(indexPatterns = ['*']) {
 }
 
 export async function fetchIndexPatternFields({ params, fields = {} }) {
+  const dataSourceId = params[DATA_SOURCE_ID_KEY] || undefined;
   const indexPatterns = extractIndexPatterns(params, fields);
 
-  return await fetchFields(indexPatterns);
+  return await fetchFields(indexPatterns, dataSourceId);
 }
diff --git a/src/plugins/vis_type_timeseries/public/plugin.ts b/src/plugins/vis_type_timeseries/public/plugin.ts
index da565a160164..0220a5320422 100644
--- a/src/plugins/vis_type_timeseries/public/plugin.ts
+++ b/src/plugins/vis_type_timeseries/public/plugin.ts
@@ -36,6 +36,8 @@ import {
   CoreStart,
   Plugin,
 } from 'opensearch-dashboards/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
+import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../expressions/public';
 import { VisualizationsSetup } from '../../visualizations/public';
 
@@ -49,6 +51,8 @@ import {
   setCoreStart,
   setDataStart,
   setChartsSetup,
+  setDataSourceManagementSetup,
+  setNotifications,
 } from './services';
 import { DataPublicPluginStart } from '../../data/public';
 import { ChartsPluginSetup } from '../../charts/public';
@@ -58,6 +62,8 @@ export interface MetricsPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
   charts: ChartsPluginSetup;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
+  dataSource?: DataSourcePluginSetup;
 }
 
 /** @internal */
@@ -75,12 +81,19 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations, charts }: MetricsPluginSetupDependencies
+    {
+      expressions,
+      visualizations,
+      charts,
+      dataSourceManagement,
+      dataSource,
+    }: MetricsPluginSetupDependencies
   ) {
     expressions.registerFunction(createMetricsFn);
     setUISettings(core.uiSettings);
     setChartsSetup(charts);
     visualizations.createReactVisualization(metricsVisDefinition);
+    setDataSourceManagementSetup({ dataSourceManagement });
   }
 
   public start(core: CoreStart, { data }: MetricsPluginStartDependencies) {
@@ -89,5 +102,6 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
     setFieldFormats(data.fieldFormats);
     setDataStart(data);
     setCoreStart(core);
+    setNotifications(core.notifications);
   }
 }
diff --git a/src/plugins/vis_type_timeseries/public/services.ts b/src/plugins/vis_type_timeseries/public/services.ts
index 15532bc4fd6f..5f54ac3e7546 100644
--- a/src/plugins/vis_type_timeseries/public/services.ts
+++ b/src/plugins/vis_type_timeseries/public/services.ts
@@ -28,7 +28,14 @@
  * under the License.
  */
 
-import { I18nStart, SavedObjectsStart, IUiSettingsClient, CoreStart } from 'src/core/public';
+import {
+  I18nStart,
+  SavedObjectsStart,
+  IUiSettingsClient,
+  CoreStart,
+  NotificationsStart,
+} from 'src/core/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import { createGetterSetter } from '../../opensearch_dashboards_utils/public';
 import { ChartsPluginSetup } from '../../charts/public';
 import { DataPublicPluginStart } from '../../data/public';
@@ -52,3 +59,11 @@ export const [getI18n, setI18n] = createGetterSetter<I18nStart>('I18n');
 export const [getChartsSetup, setChartsSetup] = createGetterSetter<ChartsPluginSetup>(
   'ChartsPluginSetup'
 );
+
+export const [getDataSourceManagementSetup, setDataSourceManagementSetup] = createGetterSetter<{
+  dataSourceManagement: DataSourceManagementPluginSetup | undefined;
+}>('DataSourceManagementSetup');
+
+export const [getNotifications, setNotifications] = createGetterSetter<NotificationsStart>(
+  'Notifications'
+);
diff --git a/src/plugins/vis_type_timeseries/server/lib/get_fields.ts b/src/plugins/vis_type_timeseries/server/lib/get_fields.ts
index 1752d3f91f86..56a58b43b45e 100644
--- a/src/plugins/vis_type_timeseries/server/lib/get_fields.ts
+++ b/src/plugins/vis_type_timeseries/server/lib/get_fields.ts
@@ -37,6 +37,7 @@ import {
   indexPatterns,
   IndexPatternFieldDescriptor,
   IndexPatternsFetcher,
+  decideClient,
 } from '../../../data/server';
 import { ReqFacade } from './search_strategies/strategies/abstract_search_strategy';
 
@@ -50,15 +51,15 @@ export async function getFields(
   // removes the need to refactor many layers of dependencies on "req", and instead just augments the top
   // level object passed from here. The layers should be refactored fully at some point, but for now
   // this works and we are still using the New Platform services for these vis data portions.
+  const client = await decideClient(requestContext, request);
+
   const reqFacade: ReqFacade = {
     requestContext,
     ...request,
     framework,
     payload: {},
     pre: {
-      indexPatternsService: new IndexPatternsFetcher(
-        requestContext.core.opensearch.legacy.client.callAsCurrentUser
-      ),
+      indexPatternsService: new IndexPatternsFetcher(client),
     },
     getUiSettingsService: () => requestContext.core.uiSettings.client,
     getSavedObjectsClient: () => requestContext.core.savedObjects.client,
diff --git a/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.test.js b/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.test.js
index fa130462e78d..068a7ef06c04 100644
--- a/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.test.js
+++ b/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.test.js
@@ -65,7 +65,7 @@ describe('AbstractSearchStrategy', () => {
     });
   });
 
-  test('should return response', async () => {
+  test('should return response for local cluster queries', async () => {
     const searches = [{ body: 'body', index: 'index' }];
     const searchFn = jest.fn().mockReturnValue(Promise.resolve({}));
 
@@ -107,4 +107,50 @@ describe('AbstractSearchStrategy', () => {
       }
     );
   });
+
+  test('should return response for datasource query', async () => {
+    const searches = [{ body: 'body', index: 'index' }];
+    const searchFn = jest.fn().mockReturnValue(Promise.resolve({}));
+
+    const responses = await abstractSearchStrategy.search(
+      {
+        requestContext: {},
+        framework: {
+          core: {
+            getStartServices: jest.fn().mockReturnValue(
+              Promise.resolve([
+                {},
+                {
+                  data: {
+                    search: {
+                      search: searchFn,
+                    },
+                  },
+                },
+              ])
+            ),
+          },
+        },
+      },
+      searches,
+      {},
+      'some-data-source-id'
+    );
+
+    expect(responses).toEqual([{}]);
+    expect(searchFn).toHaveBeenCalledWith(
+      {},
+      {
+        dataSourceId: 'some-data-source-id',
+        params: {
+          body: 'body',
+          index: 'index',
+        },
+        indexType: undefined,
+      },
+      {
+        strategy: 'opensearch',
+      }
+    );
+  });
 });
diff --git a/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.ts b/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.ts
index 6b69628353ac..7c333fad7f73 100644
--- a/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.ts
+++ b/src/plugins/vis_type_timeseries/server/lib/search_strategies/strategies/abstract_search_strategy.ts
@@ -66,7 +66,7 @@ export class AbstractSearchStrategy {
     this.additionalParams = additionalParams;
   }
 
-  async search(req: ReqFacade, bodies: any[], options = {}) {
+  async search(req: ReqFacade, bodies: any[], options = {}, dataSourceId?: string) {
     const [, deps] = await req.framework.core.getStartServices();
     const requests: any[] = [];
     bodies.forEach((body) => {
@@ -74,6 +74,7 @@ export class AbstractSearchStrategy {
         deps.data.search.search(
           req.requestContext,
           {
+            ...(!!dataSourceId && { dataSourceId }),
             params: {
               ...body,
               ...this.additionalParams,
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_annotations.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_annotations.js
index 16b526d1ba2e..3dd88b830346 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_annotations.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_annotations.js
@@ -54,6 +54,7 @@ export async function getAnnotations({
   const annotations = panel.annotations.filter(validAnnotation);
   const lastSeriesTimestamp = getLastSeriesTimestamp(series);
   const handleAnnotationResponseBy = handleAnnotationResponse(lastSeriesTimestamp);
+  const panelDataSourceId = panel.data_source_id;
 
   const bodiesPromises = annotations.map((annotation) =>
     getAnnotationRequestParams(req, panel, annotation, opensearchQueryConfig, capabilities)
@@ -67,7 +68,7 @@ export async function getAnnotations({
   if (!searches.length) return { responses: [] };
 
   try {
-    const data = await searchStrategy.search(req, searches);
+    const data = await searchStrategy.search(req, searches, {}, panelDataSourceId);
 
     return annotations.reduce((acc, annotation, index) => {
       acc[annotation.id] = handleAnnotationResponseBy(data[index].rawResponse, annotation);
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
index a5c8a239d2b0..59d445f93324 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_series_data.js
@@ -41,6 +41,7 @@ export async function getSeriesData(req, panel) {
     capabilities,
   } = await req.framework.searchStrategyRegistry.getViableStrategyForPanel(req, panel);
   const opensearchQueryConfig = await getOpenSearchQueryConfig(req);
+  const panelDataSourceId = panel.data_source_id;
   const meta = {
     type: panel.type,
     uiRestrictions: capabilities.uiRestrictions,
@@ -56,7 +57,7 @@ export async function getSeriesData(req, panel) {
       []
     );
 
-    const data = await searchStrategy.search(req, searches);
+    const data = await searchStrategy.search(req, searches, {}, panelDataSourceId);
 
     const handleResponseBodyFn = handleResponseBody(panel);
 
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_table_data.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_table_data.js
index 0b744638c3d8..20dfa06c1a78 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/get_table_data.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/get_table_data.js
@@ -37,6 +37,7 @@ import { getIndexPatternObject } from './helpers/get_index_pattern';
 
 export async function getTableData(req, panel) {
   const panelIndexPattern = panel.index_pattern;
+  const panelDataSourceId = panel.data_source_id;
 
   const {
     searchStrategy,
@@ -58,12 +59,17 @@ export async function getTableData(req, panel) {
       indexPatternObject,
       capabilities
     );
-    const [resp] = await searchStrategy.search(req, [
-      {
-        body,
-        index: panelIndexPattern,
-      },
-    ]);
+    const [resp] = await searchStrategy.search(
+      req,
+      [
+        {
+          body,
+          index: panelIndexPattern,
+        },
+      ],
+      {},
+      panelDataSourceId
+    );
 
     const buckets = get(
       resp.rawResponse ? resp.rawResponse : resp,
diff --git a/src/plugins/vis_type_timeseries/server/plugin.ts b/src/plugins/vis_type_timeseries/server/plugin.ts
index 654c85d452b1..af95e2e6b5dc 100644
--- a/src/plugins/vis_type_timeseries/server/plugin.ts
+++ b/src/plugins/vis_type_timeseries/server/plugin.ts
@@ -40,6 +40,7 @@ import {
 } from 'src/core/server';
 import { Observable } from 'rxjs';
 import { Server } from '@hapi/hapi';
+import { DataSourcePluginSetup } from 'src/plugins/data_source/server';
 import { VisTypeTimeseriesConfig } from './config';
 import { getVisData, GetVisData, GetVisDataOptions } from './lib/get_vis_data';
 import { ValidationTelemetryService } from './validation_telemetry';
@@ -57,6 +58,7 @@ export interface LegacySetup {
 
 interface VisTypeTimeseriesPluginSetupDependencies {
   usageCollection?: UsageCollectionSetup;
+  dataSource?: DataSourcePluginSetup;
 }
 
 interface VisTypeTimeseriesPluginStartDependencies {
diff --git a/src/plugins/vis_type_timeseries/server/routes/fields.ts b/src/plugins/vis_type_timeseries/server/routes/fields.ts
index bff34ee159f5..80a04918c517 100644
--- a/src/plugins/vis_type_timeseries/server/routes/fields.ts
+++ b/src/plugins/vis_type_timeseries/server/routes/fields.ts
@@ -38,12 +38,17 @@ export const fieldsRoutes = (framework: Framework) => {
     {
       path: '/api/metrics/fields',
       validate: {
-        query: schema.object({ index: schema.string() }),
+        query: schema.object({
+          index: schema.string(),
+          data_source: schema.maybe(schema.string()),
+        }),
       },
     },
     async (context, req, res) => {
       try {
-        return res.ok({ body: await getFields(context, req, framework, req.query.index) });
+        return res.ok({
+          body: await getFields(context, req, framework, req.query.index),
+        });
       } catch (err) {
         if (isBoom(err) && err.output.statusCode === 401) {
           return res.customError({

From 4199162bbdf8245d72f9e9d809504c2055c2d39e Mon Sep 17 00:00:00 2001
From: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Date: Tue, 16 Apr 2024 15:58:37 -0400
Subject: [PATCH 06/10] [OSCI][FEAT] Changelog Project - PoC Changelog and
 release notes automation tool - OpenSearch Dashboards (#5519)

Refactor and Enhance Workflow Management

- Added and updated changesets for multiple PRs to improve tracking and documentation of changes.
- Removed unnecessary test and dummy files (`test.txt`, various `.yml` fragments) to clean up the repository.
- Refactored workflow scripts to streamline changelog generation and fragment handling, moving temporary files to a designated folder.
- Updated GitHub Actions workflows by changing event triggers from `pull_request` to `pull_request_target` and vice versa to optimize workflow execution.
- Enhanced security and automation by updating token names and adding write permissions to the changeset workflow.
- Deleted obsolete workflow file for creating changeset files, now handled by an automated process.
- Major clean-up of dummy fragment files and unnecessary changelog entries to maintain clarity and relevancy in documentation.
- Implemented minor updates and improvements in codebase, specifically in generating release notes and handling fragments.


---------

Signed-off-by: Johnathon Bowers <johnathonbowers@gmail.com>
Signed-off-by: CMDWillYang <williamyang721@gmail.com>
Signed-off-by: Qiwen Li <qiwen_li@brown.edu>
Signed-off-by: qiwen li <qiwen_li@brown.edu>
Signed-off-by: Samuel Valdes Gutierrez <valdesgutierrez@gmail.com>
Signed-off-by: Ashwin P Chandran <ashwinpc1993@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Johnathon Bowers <johnathonbowers@gmail.com>
Co-authored-by: CMDWillYang <williamyang721@gmail.com>
Co-authored-by: Qiwen Li <qiwen_li@brown.edu>
Co-authored-by: Ashwin P Chandran <ashwinpc1993@gmail.com>
Co-authored-by: Anan Zhuang <ananzh@amazon.com>
Co-authored-by: Josh Romero <rmerqg@amazon.com>
Co-authored-by: autochangeset[bot] <154024398+autochangeset[bot]@users.noreply.github.com>
Co-authored-by: opensearch-bot[bot] <154024398+opensearch-bot[bot]@users.noreply.github.com>
Co-authored-by: opensearch-bot-dev[bot] <154634848+opensearch-bot-dev[bot]@users.noreply.github.com>
Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>
Co-authored-by: Miki <amoo_miki@yahoo.com>
---
 .github/pull_request_template.md              |  12 ++
 .github/workflows/changelog_verifier.yml      |  19 ---
 .../opensearch_changelog_workflow.yml         |  23 +++
 changelogs/README.md                          |   5 +
 package.json                                  |   1 +
 scripts/generate_release_note.js              |   8 ++
 src/dev/generate_release_note.ts              | 134 ++++++++++++++++++
 src/dev/generate_release_note_helper.ts       |  59 ++++++++
 8 files changed, 242 insertions(+), 19 deletions(-)
 delete mode 100644 .github/workflows/changelog_verifier.yml
 create mode 100644 .github/workflows/opensearch_changelog_workflow.yml
 create mode 100644 changelogs/README.md
 create mode 100644 scripts/generate_release_note.js
 create mode 100644 src/dev/generate_release_note.ts
 create mode 100644 src/dev/generate_release_note_helper.ts

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 3cb6f172b119..662ca15b8d68 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -19,6 +19,18 @@
   the functionality of your change
 -->
 
+## Changelog
+<!--
+Add a short but concise sentence about the impact of this pull request. Prefix an entry with the type of change they correspond to: breaking, chore, deprecate, doc, feat, fix, infra, refactor, test.
+- fix: Update the graph
+- feat: Add a new feature
+
+If this change does not need to added to the changelog, just add a single `skip` line e.g.
+- skip
+
+Descriptions following the prefixes must be 100 characters long or less
+-->
+
 ### Check List
 
 - [ ] All tests pass
diff --git a/.github/workflows/changelog_verifier.yml b/.github/workflows/changelog_verifier.yml
deleted file mode 100644
index 0890ea8b8fbb..000000000000
--- a/.github/workflows/changelog_verifier.yml
+++ /dev/null
@@ -1,19 +0,0 @@
-name: "Changelog Verifier"
-on:
-  pull_request:
-    branches: [ '**', '!feature/**' ]
-    types: [opened, edited, review_requested, synchronize, reopened, ready_for_review, labeled, unlabeled]
-
-jobs:
-  # Enforces the update of a changelog file on every pull request
-  verify-changelog:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - uses: dangoslen/changelog-enforcer@v3
-        with:
-          skipLabels: "autocut, Skip-Changelog"
diff --git a/.github/workflows/opensearch_changelog_workflow.yml b/.github/workflows/opensearch_changelog_workflow.yml
new file mode 100644
index 000000000000..8af8b0d70b0d
--- /dev/null
+++ b/.github/workflows/opensearch_changelog_workflow.yml
@@ -0,0 +1,23 @@
+name: OpenSearch Changelog Workflow
+
+on:
+  pull_request_target:
+    types: [opened, reopened, edited]
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  update-changelog:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+      - name: Parse changelog entries and submit request for changset creation
+        uses: BigSamu/OpenSearch_Changelog_Workflow@1.0.0-alpha1
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          CHANGELOG_PR_BRIDGE_URL_DOMAIN: ${{secrets.CHANGELOG_PR_BRIDGE_URL_DOMAIN}}
+          CHANGELOG_PR_BRIDGE_API_KEY: ${{secrets.CHANGELOG_PR_BRIDGE_API_KEY}}
diff --git a/changelogs/README.md b/changelogs/README.md
new file mode 100644
index 000000000000..a4620754cfd1
--- /dev/null
+++ b/changelogs/README.md
@@ -0,0 +1,5 @@
+# Changelog and Release Notes
+
+For information regarding the changelog and release notes process, please consult the README in the GitHub Actions repository that this process utilizes. To view this README, follow the link below:
+
+[GitHub Actions Workflow README](https://github.com/BigSamu/OpenSearch_Change_Set_Create_Action/blob/main/README.md)
diff --git a/package.json b/package.json
index 172c48cfbd70..c728618fcbcd 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "osd:bootstrap": "scripts/use_node scripts/build_ts_refs && scripts/use_node scripts/register_git_hook",
     "spec_to_console": "scripts/use_node scripts/spec_to_console",
     "pkg-version": "scripts/use_node -e \"console.log(require('./package.json').version)\"",
+    "release_note:generate": "scripts/use_node scripts/generate_release_note",
     "cypress:run-without-security": "env TZ=America/Los_Angeles NO_COLOR=1 cypress run --headless --env SECURITY_ENABLED=false",
     "cypress:run-with-security": "env TZ=America/Los_Angeles NO_COLOR=1 cypress run --headless --env SECURITY_ENABLED=true,openSearchUrl=https://localhost:9200,WAIT_FOR_LOADER_BUFFER_MS=500",
     "osd:ciGroup10": "echo \"dashboard_sanity_test_spec.js\"",
diff --git a/scripts/generate_release_note.js b/scripts/generate_release_note.js
new file mode 100644
index 000000000000..4721fe0dec35
--- /dev/null
+++ b/scripts/generate_release_note.js
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+require('../src/setup_node_env');
+require('../src/dev/generate_release_note');
+require('../src/dev/generate_release_note_helper');
diff --git a/src/dev/generate_release_note.ts b/src/dev/generate_release_note.ts
new file mode 100644
index 000000000000..4c9eaabf0bf7
--- /dev/null
+++ b/src/dev/generate_release_note.ts
@@ -0,0 +1,134 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { join, resolve } from 'path';
+import { readFileSync, writeFileSync, Dirent, rm, rename, promises as fsPromises } from 'fs';
+import { load as loadYaml } from 'js-yaml';
+import { readdir } from 'fs/promises';
+import { version as pkgVersion } from '../../package.json';
+import {
+  validateFragment,
+  getCurrentDateFormatted,
+  Changelog,
+  SECTION_MAPPING,
+  fragmentDirPath,
+  SectionKey,
+  releaseNotesDirPath,
+  filePath,
+} from './generate_release_note_helper';
+
+// Function to add content after the 'Unreleased' section in the changelog
+function addContentAfterUnreleased(path: string, newContent: string): void {
+  let fileContent = readFileSync(path, 'utf8');
+  const targetString = '## [Unreleased]';
+  const targetIndex = fileContent.indexOf(targetString);
+
+  if (targetIndex !== -1) {
+    const endOfLineIndex = fileContent.indexOf('\n', targetIndex);
+    if (endOfLineIndex !== -1) {
+      fileContent =
+        fileContent.slice(0, endOfLineIndex + 1) +
+        '\n' +
+        newContent +
+        '\n' +
+        fileContent.slice(endOfLineIndex + 1);
+    } else {
+      throw new Error('End of line for "Unreleased" section not found.');
+    }
+  } else {
+    throw new Error("'## [Unreleased]' not found in the file.");
+  }
+
+  writeFileSync(path, fileContent);
+}
+
+async function deleteFragments(fragmentTempDirPath: string) {
+  rm(fragmentTempDirPath, { recursive: true }, (err: any) => {
+    if (err) {
+      throw err;
+    }
+  });
+}
+
+// Read fragment files and populate sections
+async function readFragments() {
+  // Initialize sections
+  const sections: Changelog = (Object.fromEntries(
+    Object.keys(SECTION_MAPPING).map((key) => [key, []])
+  ) as unknown) as Changelog;
+
+  const fragmentPaths = await readdir(fragmentDirPath, { withFileTypes: true });
+  for (const fragmentFilename of fragmentPaths) {
+    // skip non yml or yaml files
+    if (!/\.ya?ml$/i.test(fragmentFilename.name)) {
+      // eslint-disable-next-line no-console
+      console.warn(`Skipping non yml or yaml file ${fragmentFilename.name}`);
+      continue;
+    }
+
+    const fragmentPath = join(fragmentDirPath, fragmentFilename.name);
+    const fragmentContents = readFileSync(fragmentPath, { encoding: 'utf-8' });
+
+    validateFragment(fragmentContents);
+
+    const fragmentYaml = loadYaml(fragmentContents) as Changelog;
+
+    for (const [sectionKey, entries] of Object.entries(fragmentYaml)) {
+      sections[sectionKey as SectionKey].push(...entries);
+    }
+  }
+  return { sections, fragmentPaths };
+}
+
+async function moveFragments(fragmentPaths: Dirent[], fragmentTempDirPath: string): Promise<void> {
+  // Move fragment files to temp fragments folder
+  for (const fragmentFilename of fragmentPaths) {
+    const fragmentPath = resolve(fragmentDirPath, fragmentFilename.name);
+    const fragmentTempPath = resolve(fragmentTempDirPath, fragmentFilename.name);
+    rename(fragmentPath, fragmentTempPath, () => {});
+  }
+}
+
+function generateChangelog(sections: Changelog) {
+  // Generate changelog sections
+  const changelogSections = Object.entries(sections).map(([sectionKey, entries]) => {
+    const sectionName = SECTION_MAPPING[sectionKey as SectionKey];
+    return entries.length === 0
+      ? `### ${sectionName}`
+      : `### ${sectionName}\n\n${entries.map((entry) => ` - ${entry}`).join('\n')}`;
+  });
+
+  // Generate full changelog
+  const currentDate = getCurrentDateFormatted();
+  const changelog = `## [${pkgVersion}-${currentDate}](https://github.com/opensearch-project/OpenSearch-Dashboards/releases/tag/${pkgVersion})\n\n${changelogSections.join(
+    '\n\n'
+  )}`;
+  // Update changelog file
+  addContentAfterUnreleased(filePath, changelog);
+  return changelogSections;
+}
+
+function generateReleaseNote(changelogSections: string[]) {
+  // Generate release note
+  const releaseNoteFilename = `opensearch-dashboards.release-notes-${pkgVersion}.md`;
+  const releaseNoteHeader = `# VERSION ${pkgVersion} Release Note`;
+  const releaseNote = `${releaseNoteHeader}\n\n${changelogSections.join('\n\n')}`;
+  writeFileSync(resolve(releaseNotesDirPath, releaseNoteFilename), releaseNote);
+}
+
+(async () => {
+  const { sections, fragmentPaths } = await readFragments();
+  // create folder for temp fragments
+  const fragmentTempDirPath = await fsPromises.mkdtemp(join(fragmentDirPath, 'tmp_fragments-'));
+  // move fragments to temp fragments folder
+  await moveFragments(fragmentPaths, fragmentTempDirPath);
+
+  const changelogSections = generateChangelog(sections);
+
+  generateReleaseNote(changelogSections);
+
+  // remove temp fragments folder
+  await deleteFragments(fragmentTempDirPath);
+})();
diff --git a/src/dev/generate_release_note_helper.ts b/src/dev/generate_release_note_helper.ts
new file mode 100644
index 000000000000..988c0f92d964
--- /dev/null
+++ b/src/dev/generate_release_note_helper.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { resolve } from 'path';
+
+export const filePath = resolve(__dirname, '..', '..', 'CHANGELOG.md');
+export const fragmentDirPath = resolve(__dirname, '..', '..', 'changelogs', 'fragments');
+export const releaseNotesDirPath = resolve(__dirname, '..', '..', 'release-notes');
+
+export function getCurrentDateFormatted(): string {
+  return new Date().toISOString().slice(0, 10);
+}
+
+export const SECTION_MAPPING = {
+  breaking: '💥 Breaking Changes',
+  deprecate: 'Deprecations',
+  security: '🛡 Security',
+  feat: '📈 Features/Enhancements',
+  fix: '🐛 Bug Fixes',
+  infra: '🚞 Infrastructure',
+  doc: '📝 Documentation',
+  chore: '🛠 Maintenance',
+  refactor: '🪛 Refactoring',
+  test: '🔩 Tests',
+};
+
+export type SectionKey = keyof typeof SECTION_MAPPING;
+export type Changelog = Record<SectionKey, string[]>;
+
+const MAX_ENTRY_LENGTH = 100;
+// Each entry must start with '-' and a space, followed by a non-empty string, and be no longer that MAX_ENTRY_LENGTH characters
+const entryRegex = new RegExp(`^-.{1,${MAX_ENTRY_LENGTH}}\\(\\[#.+]\\(.+\\)\\)$`);
+
+// validate format of fragment files
+export function validateFragment(content: string) {
+  const sections = content.split(/(?:\r?\n){2,}/);
+
+  // validate each section
+  for (const section of sections) {
+    const lines = section.split('\n');
+    const sectionName = lines[0];
+    const sectionKey = sectionName.slice(0, -1);
+
+    if (!SECTION_MAPPING[sectionKey as SectionKey] || !sectionName.endsWith(':')) {
+      throw new Error(`Unknown section ${sectionKey}.`);
+    }
+    for (const entry of lines.slice(1)) {
+      if (entry === '') {
+        continue;
+      }
+      // if (!entryRegex.test(entry)) {
+      if (!entryRegex.test(entry.trim())) {
+        throw new Error(`Invalid entry ${entry} in section ${sectionKey}.`);
+      }
+    }
+  }
+}

From 73e5d78c968f1ab20d28eed6ac6ea772f9c6b620 Mon Sep 17 00:00:00 2001
From: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>
Date: Tue, 16 Apr 2024 12:59:58 -0700
Subject: [PATCH 07/10] [MDS] Support for Timeline (#6385)

* Add MDS support to Timeline

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor to function and add unit tests

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Fix typo in args

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor build request to pass unit tests

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Add to CHANGELOG

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Refactor error messages + address comments

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Fix ut

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Change to data source feature

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Fix UT

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

* Address comments

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>

---------

Signed-off-by: Huy Nguyen <73027756+huyaboo@users.noreply.github.com>
---
 CHANGELOG.md                                  |   1 +
 .../opensearch_dashboards.json                |   1 +
 .../helpers/timeline_request_handler.ts       |   4 +-
 .../server/handlers/chain_runner.js           |   4 +-
 .../server/lib/fetch_data_source_id.test.ts   | 152 ++++++++++++++++++
 .../server/lib/fetch_data_source_id.ts        |  42 +++++
 .../vis_type_timeline/server/lib/services.ts  |  10 ++
 .../vis_type_timeline/server/plugin.ts        |  10 +-
 .../vis_type_timeline/server/routes/run.ts    |   5 +-
 .../series_functions/opensearch/index.js      |  19 ++-
 .../opensearch/lib/build_request.js           |   3 +-
 src/plugins/vis_type_timeline/server/types.ts |  15 ++
 12 files changed, 260 insertions(+), 6 deletions(-)
 create mode 100644 src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.test.ts
 create mode 100644 src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.ts
 create mode 100644 src/plugins/vis_type_timeline/server/lib/services.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c409485dee50..9cf4d4b0570d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -88,6 +88,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add default icon in multi-selectable picker ([#6357](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6357))
 - [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
 - [Workspace] Filter left nav menu items according to the current workspace ([#6234](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6234))
+- [Multiple Datasource] Add multi data source support to Timeline ([#6385](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6385))
 - [Multiple Datasource] Refactor data source selector component to include placeholder and add tests ([#6372](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6372))
 - Replace control characters before logging ([#6402](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6402))
 - [Dynamic Configurations] Improve dynamic configurations by adding cache and simplifying client fetch ([#6364](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6364))
diff --git a/src/plugins/vis_type_timeline/opensearch_dashboards.json b/src/plugins/vis_type_timeline/opensearch_dashboards.json
index 14b3af415177..c4fa1e8d40fd 100644
--- a/src/plugins/vis_type_timeline/opensearch_dashboards.json
+++ b/src/plugins/vis_type_timeline/opensearch_dashboards.json
@@ -4,6 +4,7 @@
   "opensearchDashboardsVersion": "opensearchDashboards",
   "server": true,
   "ui": true,
+  "optionalPlugins": ["dataSource"],
   "requiredPlugins": ["visualizations", "data", "expressions"],
   "requiredBundles": ["opensearchDashboardsUtils", "opensearchDashboardsReact", "visDefaultEditor"]
 }
diff --git a/src/plugins/vis_type_timeline/public/helpers/timeline_request_handler.ts b/src/plugins/vis_type_timeline/public/helpers/timeline_request_handler.ts
index 467fef727f29..d7b955f96ef9 100644
--- a/src/plugins/vis_type_timeline/public/helpers/timeline_request_handler.ts
+++ b/src/plugins/vis_type_timeline/public/helpers/timeline_request_handler.ts
@@ -129,10 +129,12 @@ export function getTimelineRequestHandler({
       });
     } catch (e) {
       if (e && e.body) {
+        const errorTitle =
+          e.body.attributes && e.body.attributes.title ? ` (${e.body.attributes.title})` : '';
         const err = new Error(
           `${i18n.translate('timeline.requestHandlerErrorTitle', {
             defaultMessage: 'Timeline request error',
-          })}: ${e.body.title} ${e.body.message}`
+          })}${errorTitle}: ${e.body.message}`
         );
         err.stack = e.stack;
         throw err;
diff --git a/src/plugins/vis_type_timeline/server/handlers/chain_runner.js b/src/plugins/vis_type_timeline/server/handlers/chain_runner.js
index 75382b73de57..39af9939056f 100644
--- a/src/plugins/vis_type_timeline/server/handlers/chain_runner.js
+++ b/src/plugins/vis_type_timeline/server/handlers/chain_runner.js
@@ -47,7 +47,9 @@ export default function chainRunner(tlConfig) {
   let sheet;
 
   function throwWithCell(cell, exception) {
-    throw new Error(' in cell #' + (cell + 1) + ': ' + exception.message);
+    const e = new Error(exception.message);
+    e.name = `Expression parse error in cell #${cell + 1}`;
+    throw e;
   }
 
   // Invokes a modifier function, resolving arguments into series as needed
diff --git a/src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.test.ts b/src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.test.ts
new file mode 100644
index 000000000000..e5596a001a2d
--- /dev/null
+++ b/src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.test.ts
@@ -0,0 +1,152 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { savedObjectsClientMock } from '../../../../core/server/mocks';
+import { fetchDataSourceIdByName } from './fetch_data_source_id';
+import { OpenSearchFunctionConfig } from '../types';
+
+jest.mock('./services', () => ({
+  getDataSourceEnabled: jest
+    .fn()
+    .mockReturnValueOnce({ enabled: false })
+    .mockReturnValue({ enabled: true }),
+}));
+
+describe('fetchDataSourceIdByName()', () => {
+  const validId = 'some-valid-id';
+  const config: OpenSearchFunctionConfig = {
+    q: null,
+    metric: null,
+    split: null,
+    index: null,
+    timefield: null,
+    kibana: null,
+    opensearchDashboards: null,
+    interval: null,
+  };
+  const client = savedObjectsClientMock.create();
+  client.find = jest.fn().mockImplementation((props) => {
+    if (props.search === '"No Results With Filter"') {
+      return Promise.resolve({
+        saved_objects: [
+          {
+            id: 'some-non-matching-id',
+            attributes: {
+              title: 'No Results With Filter Some Suffix',
+            },
+          },
+        ],
+      });
+    }
+    if (props.search === '"Duplicate Title"') {
+      return Promise.resolve({
+        saved_objects: [
+          {
+            id: 'duplicate-id-1',
+            attributes: {
+              title: 'Duplicate Title',
+            },
+          },
+          {
+            id: 'duplicate-id-2',
+            attributes: {
+              title: 'Duplicate Title',
+            },
+          },
+        ],
+      });
+    }
+    if (props.search === '"Some Data Source"') {
+      return Promise.resolve({
+        saved_objects: [
+          {
+            id: validId,
+            attributes: {
+              title: 'Some Data Source',
+            },
+          },
+        ],
+      });
+    }
+    if (props.search === '"Some Prefix"') {
+      return Promise.resolve({
+        saved_objects: [
+          {
+            id: 'some-id-2',
+            attributes: {
+              title: 'Some Prefix B',
+            },
+          },
+          {
+            id: validId,
+            attributes: {
+              title: 'Some Prefix',
+            },
+          },
+        ],
+      });
+    }
+
+    return Promise.resolve({ saved_objects: [] });
+  });
+
+  it('should return undefined if data_source_name is not present', async () => {
+    expect(await fetchDataSourceIdByName(config, client)).toBe(undefined);
+  });
+
+  it('should return undefined if data_source_name is an empty string', async () => {
+    expect(await fetchDataSourceIdByName({ ...config, data_source_name: '' }, client)).toBe(
+      undefined
+    );
+  });
+
+  it('should throw errors when MDS is disabled', async () => {
+    await expect(
+      fetchDataSourceIdByName({ ...config, data_source_name: 'Some Data Source' }, client)
+    ).rejects.toThrowError(
+      'To query from multiple data sources, first enable the data source feature'
+    );
+  });
+
+  it.each([
+    {
+      dataSourceName: 'Non-existent Data Source',
+      expectedResultCount: 0,
+    },
+    {
+      dataSourceName: 'No Results With Filter',
+      expectedResultCount: 0,
+    },
+    {
+      dataSourceName: 'Duplicate Title',
+      expectedResultCount: 2,
+    },
+  ])(
+    'should throw errors when non-existent or duplicate data_source_name is provided',
+    async ({ dataSourceName, expectedResultCount }) => {
+      await expect(
+        fetchDataSourceIdByName({ ...config, data_source_name: dataSourceName }, client)
+      ).rejects.toThrowError(
+        `Expected exactly 1 result for data_source_name "${dataSourceName}" but got ${expectedResultCount} results`
+      );
+    }
+  );
+
+  it.each([
+    {
+      dataSourceName: 'Some Data Source',
+    },
+    {
+      dataSourceName: 'Some Prefix',
+    },
+  ])(
+    'should return valid id when data_source_name exists and is unique',
+    async ({ dataSourceName }) => {
+      expect(
+        await fetchDataSourceIdByName({ ...config, data_source_name: dataSourceName }, client)
+      ).toBe(validId);
+    }
+  );
+});
diff --git a/src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.ts b/src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.ts
new file mode 100644
index 000000000000..e3d0d76d23e7
--- /dev/null
+++ b/src/plugins/vis_type_timeline/server/lib/fetch_data_source_id.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { SavedObjectsClientContract } from 'src/core/server';
+import { DataSourceAttributes } from 'src/plugins/data_source/common/data_sources';
+import { getDataSourceEnabled } from './services';
+import { OpenSearchFunctionConfig } from '../types';
+
+export const fetchDataSourceIdByName = async (
+  config: OpenSearchFunctionConfig,
+  client: SavedObjectsClientContract
+) => {
+  if (!config.data_source_name) {
+    return undefined;
+  }
+
+  if (!getDataSourceEnabled().enabled) {
+    throw new Error('To query from multiple data sources, first enable the data source feature');
+  }
+
+  const dataSources = await client.find<DataSourceAttributes>({
+    type: 'data-source',
+    perPage: 100,
+    search: `"${config.data_source_name}"`,
+    searchFields: ['title'],
+    fields: ['id', 'title'],
+  });
+
+  const possibleDataSourceIds = dataSources.saved_objects.filter(
+    (obj) => obj.attributes.title === config.data_source_name
+  );
+
+  if (possibleDataSourceIds.length !== 1) {
+    throw new Error(
+      `Expected exactly 1 result for data_source_name "${config.data_source_name}" but got ${possibleDataSourceIds.length} results`
+    );
+  }
+
+  return possibleDataSourceIds.pop()?.id;
+};
diff --git a/src/plugins/vis_type_timeline/server/lib/services.ts b/src/plugins/vis_type_timeline/server/lib/services.ts
new file mode 100644
index 000000000000..13b257622abd
--- /dev/null
+++ b/src/plugins/vis_type_timeline/server/lib/services.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createGetterSetter } from '../../../opensearch_dashboards_utils/common';
+
+export const [getDataSourceEnabled, setDataSourceEnabled] = createGetterSetter<{
+  enabled: boolean;
+}>('DataSource');
diff --git a/src/plugins/vis_type_timeline/server/plugin.ts b/src/plugins/vis_type_timeline/server/plugin.ts
index d2c7097ac419..f768e51e93d0 100644
--- a/src/plugins/vis_type_timeline/server/plugin.ts
+++ b/src/plugins/vis_type_timeline/server/plugin.ts
@@ -34,6 +34,7 @@ import { TypeOf, schema } from '@osd/config-schema';
 import { RecursiveReadonly } from '@osd/utility-types';
 import { deepFreeze } from '@osd/std';
 
+import { DataSourcePluginSetup } from 'src/plugins/data_source/server';
 import { PluginStart } from '../../data/server';
 import { CoreSetup, PluginInitializerContext } from '../../../core/server';
 import { configSchema } from '../config';
@@ -42,11 +43,16 @@ import { functionsRoute } from './routes/functions';
 import { validateOpenSearchRoute } from './routes/validate_es';
 import { runRoute } from './routes/run';
 import { ConfigManager } from './lib/config_manager';
+import { setDataSourceEnabled } from './lib/services';
 
 const experimentalLabel = i18n.translate('timeline.uiSettings.experimentalLabel', {
   defaultMessage: 'experimental',
 });
 
+export interface TimelinePluginSetupDeps {
+  dataSource?: DataSourcePluginSetup;
+}
+
 export interface TimelinePluginStartDeps {
   data: PluginStart;
 }
@@ -57,7 +63,7 @@ export interface TimelinePluginStartDeps {
 export class Plugin {
   constructor(private readonly initializerContext: PluginInitializerContext) {}
 
-  public async setup(core: CoreSetup): void {
+  public async setup(core: CoreSetup, { dataSource }: TimelinePluginSetupDeps): void {
     const config = await this.initializerContext.config
       .create<TypeOf<typeof configSchema>>()
       .pipe(first())
@@ -80,6 +86,8 @@ export class Plugin {
       );
     };
 
+    setDataSourceEnabled({ enabled: !!dataSource });
+
     const logger = this.initializerContext.logger.get('timeline');
 
     const router = core.http.createRouter();
diff --git a/src/plugins/vis_type_timeline/server/routes/run.ts b/src/plugins/vis_type_timeline/server/routes/run.ts
index ab6a993b4bb5..af1005ebcb8f 100644
--- a/src/plugins/vis_type_timeline/server/routes/run.ts
+++ b/src/plugins/vis_type_timeline/server/routes/run.ts
@@ -122,7 +122,10 @@ export function runRoute(
         } else {
           return response.internalError({
             body: {
-              message: err.toString(),
+              attributes: {
+                title: err.name,
+              },
+              message: err.message,
             },
           });
         }
diff --git a/src/plugins/vis_type_timeline/server/series_functions/opensearch/index.js b/src/plugins/vis_type_timeline/server/series_functions/opensearch/index.js
index 8837116bfc02..5192059f3e6d 100644
--- a/src/plugins/vis_type_timeline/server/series_functions/opensearch/index.js
+++ b/src/plugins/vis_type_timeline/server/series_functions/opensearch/index.js
@@ -34,6 +34,7 @@ import { OPENSEARCH_SEARCH_STRATEGY } from '../../../../data/server';
 import Datasource from '../../lib/classes/datasource';
 import buildRequest from './lib/build_request';
 import toSeriesList from './lib/agg_response_to_series_list';
+import { fetchDataSourceIdByName } from '../../lib/fetch_data_source_id';
 
 export default new Datasource('es', {
   args: [
@@ -112,6 +113,14 @@ export default new Datasource('es', {
         defaultMessage: `**DO NOT USE THIS**. It's fun for debugging fit functions, but you really should use the interval picker`,
       }),
     },
+    {
+      name: 'data_source_name',
+      types: ['string', 'null'], // If null, the query will proceed with local cluster
+      help: i18n.translate('timeline.help.functions.opensearch.args.dataSourceNameHelpText', {
+        defaultMessage:
+          'Specify a data source to query from. This will only work if multiple data sources is enabled',
+      }),
+    },
   ],
   help: i18n.translate('timeline.help.functions.opensearchHelpText', {
     defaultMessage: 'Pull data from an opensearch instance',
@@ -148,7 +157,15 @@ export default new Datasource('es', {
 
     const opensearchShardTimeout = tlConfig.opensearchShardTimeout;
 
-    const body = buildRequest(config, tlConfig, scriptedFields, opensearchShardTimeout);
+    const dataSourceId = await fetchDataSourceIdByName(config, tlConfig.savedObjectsClient);
+
+    const body = buildRequest(
+      config,
+      tlConfig,
+      scriptedFields,
+      opensearchShardTimeout,
+      dataSourceId
+    );
 
     const deps = (await tlConfig.getStartServices())[1];
 
diff --git a/src/plugins/vis_type_timeline/server/series_functions/opensearch/lib/build_request.js b/src/plugins/vis_type_timeline/server/series_functions/opensearch/lib/build_request.js
index 8436b4dbb04a..90fb7b819a08 100644
--- a/src/plugins/vis_type_timeline/server/series_functions/opensearch/lib/build_request.js
+++ b/src/plugins/vis_type_timeline/server/series_functions/opensearch/lib/build_request.js
@@ -34,7 +34,7 @@ import { buildAggBody } from './agg_body';
 import createDateAgg from './create_date_agg';
 import { UI_SETTINGS } from '../../../../../data/server';
 
-export default function buildRequest(config, tlConfig, scriptedFields, timeout) {
+export default function buildRequest(config, tlConfig, scriptedFields, timeout, dataSourceId) {
   const bool = { must: [] };
 
   const timeFilter = {
@@ -105,6 +105,7 @@ export default function buildRequest(config, tlConfig, scriptedFields, timeout)
   }
 
   return {
+    ...(!!dataSourceId && { dataSourceId }),
     params: request,
   };
 }
diff --git a/src/plugins/vis_type_timeline/server/types.ts b/src/plugins/vis_type_timeline/server/types.ts
index f021ffeae00f..2fa3a25c5813 100644
--- a/src/plugins/vis_type_timeline/server/types.ts
+++ b/src/plugins/vis_type_timeline/server/types.ts
@@ -29,3 +29,18 @@
  */
 
 export { TimelineFunctionInterface, TimelineFunctionConfig } from './lib/classes/timeline_function';
+
+export interface OpenSearchFunctionConfig {
+  q: string | null;
+  metric: string | null;
+  split: string | null;
+  index: string | null;
+  timefield: string | null;
+  kibana: boolean | null;
+  opensearchDashboards: boolean | null;
+  /**
+   * @deprecated This property should not be set in the Timeline expression. Users should use the interval picker React component instead
+   */
+  interval: string | null;
+  data_source_name?: string | null;
+}

From b619ccb5fea8b23a748d74ba3dec21aabb1a7765 Mon Sep 17 00:00:00 2001
From: "Yuanqi(Ella) Zhu" <53279298+zhyuanqi@users.noreply.github.com>
Date: Tue, 16 Apr 2024 14:38:25 -0700
Subject: [PATCH 08/10] Modify the button of selectable component to fix the
 title overflow issue (#6465)

* Modify the button of selectable component to fix the title overflow issue

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

* update snapshot

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

---------

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
---
 CHANGELOG.md                                           |  1 +
 .../public/components/button_title.scss                |  7 +++++++
 .../create_data_source_menu.test.tsx.snap              |  6 +++---
 .../__snapshots__/data_source_selectable.test.tsx.snap | 10 +++++-----
 .../data_source_selectable/data_source_selectable.tsx  |  5 +++--
 5 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 src/plugins/data_source_management/public/components/button_title.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9cf4d4b0570d..f49b43d1e946 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -124,6 +124,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Multiple Datasource] Refactor read-only component to cover more edge cases ([#6416](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6416))
 - [BUG] Fix for checkForFunctionProperty so that order does not matter ([#6248](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6248))
 - [Dynamic Configurations] Fix dynamic config API calls to pass correct input ([#6474](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6474))
+- [BUG][Multiple Datasource] Modify the button of selectable component to fix the title overflow issue ([#6465](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6465))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
 - [BUG][Multiple Datasource] Add validation for title length to be no longer than 32 characters [#6452](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6452))
 
diff --git a/src/plugins/data_source_management/public/components/button_title.scss b/src/plugins/data_source_management/public/components/button_title.scss
new file mode 100644
index 000000000000..66b32d4ee8b7
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/button_title.scss
@@ -0,0 +1,7 @@
+.dataSourceComponentButtonTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+  max-width: 16ch;
+}
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index c520768a6890..c705db9194b0 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -104,7 +104,7 @@ Object {
         >
           <button
             aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
             data-test-subj="dataSourceSelectableContextMenuHeaderLink"
             type="button"
           >
@@ -136,7 +136,7 @@ Object {
       >
         <button
           aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           type="button"
         >
@@ -233,7 +233,7 @@ Object {
             >
               <button
                 aria-label="dataSourceMenuButton"
-                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
                 data-test-subj="dataSourceSelectableContextMenuHeaderLink"
                 type="button"
               >
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 4601e70491d2..8089f79d5487 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
     <React.Fragment>
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
-        className="euiHeaderLink"
+        className="euiHeaderLink dataSourceComponentButtonTitle"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
         iconSide="left"
@@ -98,7 +98,7 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
     <React.Fragment>
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
-        className="euiHeaderLink"
+        className="euiHeaderLink dataSourceComponentButtonTitle"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
         iconSide="left"
@@ -166,7 +166,7 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
     <React.Fragment>
       <EuiButtonEmpty
         aria-label="dataSourceMenuButton"
-        className="euiHeaderLink"
+        className="euiHeaderLink dataSourceComponentButtonTitle"
         data-test-subj="dataSourceSelectableContextMenuHeaderLink"
         disabled={false}
         iconSide="left"
@@ -242,7 +242,7 @@ Object {
         >
           <button
             aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
             data-test-subj="dataSourceSelectableContextMenuHeaderLink"
             type="button"
           >
@@ -411,7 +411,7 @@ Object {
       >
         <button
           aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           type="button"
         >
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index 47e54fae671f..4e2278c280b6 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -37,8 +37,9 @@ import {
 } from '../data_source_menu/types';
 import { DataSourceErrorMenu } from '../data_source_error_menu';
 import { DataSourceItem } from '../data_source_item';
-import './data_source_selectable.scss';
 import { DataSourceDropDownHeader } from '../drop_down_header';
+import '../button_title.scss';
+import './data_source_selectable.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -248,7 +249,7 @@ export class DataSourceSelectable extends React.Component<
     const button = (
       <>
         <EuiButtonEmpty
-          className="euiHeaderLink"
+          className={'euiHeaderLink dataSourceComponentButtonTitle'}
           onClick={this.onClick.bind(this)}
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           aria-label={i18n.translate('dataSourceSelectable.dataSourceOptionsButtonAriaLabel', {

From 4339f4e089b2fe0343883d07cb8b8df55760a334 Mon Sep 17 00:00:00 2001
From: Lu Yu <nluyu@amazon.com>
Date: Tue, 16 Apr 2024 16:36:07 -0700
Subject: [PATCH 09/10] add body to error object (#6496)

Signed-off-by: Lu Yu <nluyu@amazon.com>
---
 .../data_source/server/lib/error.test.ts      | 23 +++++++++++++++++++
 src/plugins/data_source/server/lib/error.ts   |  6 +++++
 2 files changed, 29 insertions(+)

diff --git a/src/plugins/data_source/server/lib/error.test.ts b/src/plugins/data_source/server/lib/error.test.ts
index 2ead6fde7345..7dec9280a450 100644
--- a/src/plugins/data_source/server/lib/error.test.ts
+++ b/src/plugins/data_source/server/lib/error.test.ts
@@ -117,4 +117,27 @@ describe('CreateDataSourceError', () => {
       new DataSourceError(new Error('dummy'), 'Connection Failure', 400)
     );
   });
+
+  it('create data source error should be casted to a 400 DataSourceError', () => {
+    const error = new ResponseError({
+      statusCode: 401,
+      body: {
+        error: {
+          type: 'index_not_found_exception',
+        },
+      },
+      warnings: [],
+      headers: {
+        'WWW-Authenticate': 'content',
+      },
+      meta: {} as any,
+    });
+
+    const actual = new DataSourceError(error);
+
+    expect(actual).toMatchObject({
+      statusCode: 401,
+      body: { error: { type: 'index_not_found_exception' } },
+    });
+  });
 });
diff --git a/src/plugins/data_source/server/lib/error.ts b/src/plugins/data_source/server/lib/error.ts
index 9d1108e13e16..4b5c44153aae 100644
--- a/src/plugins/data_source/server/lib/error.ts
+++ b/src/plugins/data_source/server/lib/error.ts
@@ -11,6 +11,8 @@ import { OsdError } from '../../../opensearch_dashboards_utils/common';
 export class DataSourceError extends OsdError {
   // must have statusCode to avoid route handler in search.ts to return 500
   statusCode: number;
+  body: any;
+
   constructor(error: any, context?: string, statusCode?: number) {
     let message: string;
     if (context) {
@@ -23,6 +25,10 @@ export class DataSourceError extends OsdError {
 
     super('Data Source Error: ' + message);
 
+    if (error.body) {
+      this.body = error.body;
+    }
+
     if (statusCode) {
       this.statusCode = statusCode;
     } else if (error.statusCode) {

From d911fa7144fec19b9409a8dea6b7d4d06af9a2b8 Mon Sep 17 00:00:00 2001
From: Lin Wang <wonglam@amazon.com>
Date: Wed, 17 Apr 2024 10:32:07 +0800
Subject: [PATCH 10/10] [Workspace] Add permission tab to workspace create
 update page (#6378)

* Allow workspace update with partial attirbutes

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Add permissions tab for workspace creator and update page

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Add change log for adding permission tab

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Optimize permissions to permissions settings convertation

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Address PR comments

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Update comments for getPermissionModeId

Signed-off-by: Lin Wang <wonglam@amazon.com>

---------

Signed-off-by: Lin Wang <wonglam@amazon.com>
---
 CHANGELOG.md                                  |   1 +
 src/core/types/saved_objects.ts               |   2 +
 src/core/types/workspace.ts                   |   6 +
 .../workspace_creator.test.tsx                |  50 +++-
 .../workspace_creator/workspace_creator.tsx   |  10 +-
 .../components/workspace_form/constants.ts    |  50 ++++
 .../public/components/workspace_form/index.ts |   4 +
 .../public/components/workspace_form/types.ts |  26 +-
 .../workspace_form/use_workspace_form.ts      |  51 ++--
 .../components/workspace_form/utils.test.ts   | 266 +++++++++++++++++-
 .../public/components/workspace_form/utils.ts | 237 +++++++++++++++-
 .../workspace_form/workspace_form.tsx         |  41 ++-
 ...orkspace_permission_setting_input.test.tsx | 114 ++++++++
 .../workspace_permission_setting_input.tsx    | 128 +++++++++
 ...orkspace_permission_setting_panel.test.tsx | 199 +++++++++++++
 .../workspace_permission_setting_panel.tsx    | 235 ++++++++++++++++
 .../workspace_updater.test.tsx                |  24 +-
 .../workspace_updater/workspace_updater.tsx   |  48 +++-
 .../workspace/public/workspace_client.ts      |  23 +-
 .../server/integration_tests/routes.test.ts   |  26 ++
 src/plugins/workspace/server/routes/index.ts  |  17 +-
 src/plugins/workspace/server/types.ts         |   2 +-
 .../workspace/server/workspace_client.ts      |  21 +-
 23 files changed, 1503 insertions(+), 78 deletions(-)
 create mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx
 create mode 100644 src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f49b43d1e946..77d1fad31e9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -97,6 +97,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add error state to all data source menu components to show error component and consolidate all fetch errors ([#6440](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6440))
 - [Workspace] Support workspace in saved objects client in server side. ([#6365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6365))
 - [MD] Add dropdown header to data source single selector ([#6431](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6431))
+- [Workspace] Add permission tab to workspace create update page ([#6378](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6378))
 
 ### 🐛 Bug Fixes
 
diff --git a/src/core/types/saved_objects.ts b/src/core/types/saved_objects.ts
index 06d03f5f24c4..e63f380d9fb0 100644
--- a/src/core/types/saved_objects.ts
+++ b/src/core/types/saved_objects.ts
@@ -126,3 +126,5 @@ export interface SavedObjectError {
   statusCode: number;
   metadata?: Record<string, unknown>;
 }
+
+export type SavedObjectPermissions = Permissions;
diff --git a/src/core/types/workspace.ts b/src/core/types/workspace.ts
index c95b993edc74..92888b845257 100644
--- a/src/core/types/workspace.ts
+++ b/src/core/types/workspace.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { Permissions } from '../server/saved_objects';
+
 export interface WorkspaceAttribute {
   id: string;
   name: string;
@@ -12,3 +14,7 @@ export interface WorkspaceAttribute {
   icon?: string;
   reserved?: boolean;
 }
+
+export interface WorkspaceAttributeWithPermission extends WorkspaceAttribute {
+  permissions?: Permissions;
+}
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
index 9cc4f9b53f69..f5a12df2e43d 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.test.tsx
@@ -34,6 +34,12 @@ const WorkspaceCreator = (props: any) => {
     ...{
       application: {
         ...mockCoreStart.application,
+        capabilities: {
+          ...mockCoreStart.application.capabilities,
+          workspaces: {
+            permissionEnabled: true,
+          },
+        },
         navigateToApp,
         getUrlForApp: jest.fn(() => '/app/workspace_overview'),
         applications$: new BehaviorSubject<Map<string, PublicAppInfo>>(PublicAPPInfoMap as any),
@@ -145,7 +151,8 @@ describe('WorkspaceCreator', () => {
         name: 'test workspace name',
         color: '#000000',
         description: 'test workspace description',
-      })
+      }),
+      undefined
     );
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -168,7 +175,8 @@ describe('WorkspaceCreator', () => {
       expect.objectContaining({
         name: 'test workspace name',
         features: expect.arrayContaining(['app1', 'app2', 'app3']),
-      })
+      }),
+      undefined
     );
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
@@ -180,7 +188,7 @@ describe('WorkspaceCreator', () => {
   });
 
   it('should show danger toasts after create workspace failed', async () => {
-    workspaceClientCreate.mockReturnValue({ result: { id: 'failResult' }, success: false });
+    workspaceClientCreate.mockReturnValueOnce({ result: { id: 'failResult' }, success: false });
     const { getByTestId } = render(<WorkspaceCreator />);
     const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
     fireEvent.input(nameInput, {
@@ -195,7 +203,7 @@ describe('WorkspaceCreator', () => {
   });
 
   it('should show danger toasts after call create workspace API failed', async () => {
-    workspaceClientCreate.mockImplementation(async () => {
+    workspaceClientCreate.mockImplementationOnce(async () => {
       throw new Error();
     });
     const { getByTestId } = render(<WorkspaceCreator />);
@@ -210,4 +218,38 @@ describe('WorkspaceCreator', () => {
     });
     expect(notificationToastsAddSuccess).not.toHaveBeenCalled();
   });
+
+  it('create workspace with customized permissions', async () => {
+    const { getByTestId, getByText, getAllByText } = render(<WorkspaceCreator />);
+    const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
+    fireEvent.input(nameInput, {
+      target: { value: 'test workspace name' },
+    });
+    fireEvent.click(getByText('Users & Permissions'));
+    fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-user-addNew'));
+    const userIdInput = getAllByText('Select')[0];
+    fireEvent.click(userIdInput);
+    fireEvent.input(getByTestId('comboBoxSearchInput'), {
+      target: { value: 'test user id' },
+    });
+    fireEvent.blur(getByTestId('comboBoxSearchInput'));
+    fireEvent.click(getByTestId('workspaceForm-bottomBar-createButton'));
+    expect(workspaceClientCreate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'test workspace name',
+      }),
+      {
+        read: {
+          users: ['test user id'],
+        },
+        library_read: {
+          users: ['test user id'],
+        },
+      }
+    );
+    await waitFor(() => {
+      expect(notificationToastsAddSuccess).toHaveBeenCalled();
+    });
+    expect(notificationToastsAddDanger).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
index 0ba7ca9947df..75b598d7aa6d 100644
--- a/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
+++ b/src/plugins/workspace/public/components/workspace_creator/workspace_creator.tsx
@@ -11,17 +11,23 @@ import { WorkspaceForm, WorkspaceFormSubmitData, WorkspaceOperationType } from '
 import { WORKSPACE_OVERVIEW_APP_ID } from '../../../common/constants';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
 import { WorkspaceClient } from '../../workspace_client';
+import { convertPermissionSettingsToPermissions } from '../workspace_form';
 
 export const WorkspaceCreator = () => {
   const {
     services: { application, notifications, http, workspaceClient },
   } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+  const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
 
   const handleWorkspaceFormSubmit = useCallback(
     async (data: WorkspaceFormSubmitData) => {
       let result;
       try {
-        result = await workspaceClient.create(data);
+        const { permissionSettings, ...attributes } = data;
+        result = await workspaceClient.create(
+          attributes,
+          convertPermissionSettingsToPermissions(permissionSettings)
+        );
         if (result?.success) {
           notifications?.toasts.addSuccess({
             title: i18n.translate('workspace.create.success', {
@@ -80,6 +86,8 @@ export const WorkspaceCreator = () => {
               application={application}
               onSubmit={handleWorkspaceFormSubmit}
               operationType={WorkspaceOperationType.Create}
+              permissionEnabled={isPermissionEnabled}
+              permissionLastAdminItemDeletable
             />
           )}
         </EuiPageContent>
diff --git a/src/plugins/workspace/public/components/workspace_form/constants.ts b/src/plugins/workspace/public/components/workspace_form/constants.ts
index 83ae111e9c20..693f0cdce141 100644
--- a/src/plugins/workspace/public/components/workspace_form/constants.ts
+++ b/src/plugins/workspace/public/components/workspace_form/constants.ts
@@ -3,6 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
+import { WorkspacePermissionMode } from '../../../common/constants';
+
 export enum WorkspaceOperationType {
   Create = 'create',
   Update = 'update',
@@ -11,4 +14,51 @@ export enum WorkspaceOperationType {
 export enum WorkspaceFormTabs {
   NotSelected,
   FeatureVisibility,
+  UsersAndPermissions,
+}
+
+export enum WorkspacePermissionItemType {
+  User = 'user',
+  Group = 'group',
 }
+
+export enum PermissionModeId {
+  Read = 'read',
+  ReadAndWrite = 'read+write',
+  Admin = 'admin',
+}
+
+export const permissionModeOptions = [
+  {
+    id: PermissionModeId.Read,
+    label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.read', {
+      defaultMessage: 'Read',
+    }),
+  },
+  {
+    id: PermissionModeId.ReadAndWrite,
+    label: i18n.translate(
+      'workspace.form.permissionSettingPanel.permissionModeOptions.readAndWrite',
+      {
+        defaultMessage: 'Read & Write',
+      }
+    ),
+  },
+  {
+    id: PermissionModeId.Admin,
+    label: i18n.translate('workspace.form.permissionSettingPanel.permissionModeOptions.admin', {
+      defaultMessage: 'Admin',
+    }),
+  },
+];
+
+export const optionIdToWorkspacePermissionModesMap: {
+  [key: string]: WorkspacePermissionMode[];
+} = {
+  [PermissionModeId.Read]: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+  [PermissionModeId.ReadAndWrite]: [
+    WorkspacePermissionMode.LibraryWrite,
+    WorkspacePermissionMode.Read,
+  ],
+  [PermissionModeId.Admin]: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/index.ts b/src/plugins/workspace/public/components/workspace_form/index.ts
index 6531d4a1c6f7..416592ff2006 100644
--- a/src/plugins/workspace/public/components/workspace_form/index.ts
+++ b/src/plugins/workspace/public/components/workspace_form/index.ts
@@ -6,3 +6,7 @@
 export { WorkspaceForm } from './workspace_form';
 export { WorkspaceFormSubmitData } from './types';
 export { WorkspaceOperationType } from './constants';
+export {
+  convertPermissionsToPermissionSettings,
+  convertPermissionSettingsToPermissions,
+} from './utils';
diff --git a/src/plugins/workspace/public/components/workspace_form/types.ts b/src/plugins/workspace/public/components/workspace_form/types.ts
index 8014c2321ad5..95c96fa3e353 100644
--- a/src/plugins/workspace/public/components/workspace_form/types.ts
+++ b/src/plugins/workspace/public/components/workspace_form/types.ts
@@ -3,14 +3,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type { WorkspaceOperationType } from './constants';
 import type { ApplicationStart } from '../../../../../core/public';
+import type { WorkspacePermissionMode } from '../../../common/constants';
+import type { WorkspaceOperationType, WorkspacePermissionItemType } from './constants';
+
+export type WorkspacePermissionSetting =
+  | {
+      id: number;
+      type: WorkspacePermissionItemType.User;
+      userId: string;
+      modes: WorkspacePermissionMode[];
+    }
+  | {
+      id: number;
+      type: WorkspacePermissionItemType.Group;
+      group: string;
+      modes: WorkspacePermissionMode[];
+    };
 
 export interface WorkspaceFormSubmitData {
   name: string;
   description?: string;
   features?: string[];
   color?: string;
+  permissionSettings?: WorkspacePermissionSetting[];
 }
 
 export interface WorkspaceFormData extends WorkspaceFormSubmitData {
@@ -28,11 +44,17 @@ export interface WorkspaceFeatureGroup {
   features: WorkspaceFeature[];
 }
 
-export type WorkspaceFormErrors = { [key in keyof WorkspaceFormData]?: string };
+export type WorkspaceFormErrors = {
+  [key in keyof Omit<WorkspaceFormData, 'permissionSettings'>]?: string;
+} & {
+  permissionSettings?: { [key: number]: string };
+};
 
 export interface WorkspaceFormProps {
   application: ApplicationStart;
   onSubmit?: (formData: WorkspaceFormSubmitData) => void;
   defaultValues?: WorkspaceFormData;
   operationType?: WorkspaceOperationType;
+  permissionEnabled?: boolean;
+  permissionLastAdminItemDeletable?: boolean;
 }
diff --git a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
index 315f3486f83e..cded7c4bcb71 100644
--- a/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
+++ b/src/plugins/workspace/public/components/workspace_form/use_workspace_form.ts
@@ -5,13 +5,12 @@
 
 import { useCallback, useState, FormEventHandler, useRef, useMemo, useEffect } from 'react';
 import { htmlIdGenerator, EuiFieldTextProps, EuiColorPickerProps } from '@elastic/eui';
-import { i18n } from '@osd/i18n';
 import { useApplications } from '../../hooks';
 import { featureMatchesConfig } from '../../utils';
 
 import { WorkspaceFormTabs } from './constants';
-import { WorkspaceFormProps, WorkspaceFormErrors } from './types';
-import { appendDefaultFeatureIds, getNumberOfErrors, isValidFormTextInput } from './utils';
+import { WorkspaceFormProps, WorkspaceFormErrors, WorkspacePermissionSetting } from './types';
+import { appendDefaultFeatureIds, getNumberOfErrors, validateWorkspaceForm } from './utils';
 
 const workspaceHtmlIdGenerator = htmlIdGenerator();
 
@@ -36,6 +35,13 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
   const [selectedFeatureIds, setSelectedFeatureIds] = useState(
     appendDefaultFeatureIds(defaultFeatures)
   );
+  const [permissionSettings, setPermissionSettings] = useState<
+    Array<Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>>
+  >(
+    defaultValues?.permissionSettings && defaultValues.permissionSettings.length > 0
+      ? defaultValues.permissionSettings
+      : []
+  );
 
   const [formErrors, setFormErrors] = useState<WorkspaceFormErrors>({});
   const numberOfErrors = useMemo(() => getNumberOfErrors(formErrors), [formErrors]);
@@ -45,6 +51,7 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
     description,
     features: selectedFeatureIds,
     color,
+    permissionSettings,
   });
   const getFormDataRef = useRef(getFormData);
   getFormDataRef.current = getFormData;
@@ -56,32 +63,8 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
   const handleFormSubmit = useCallback<FormEventHandler>(
     (e) => {
       e.preventDefault();
-      let currentFormErrors: WorkspaceFormErrors = {};
       const formData = getFormDataRef.current();
-      if (!formData.name) {
-        currentFormErrors = {
-          ...currentFormErrors,
-          name: i18n.translate('workspace.form.detail.name.empty', {
-            defaultMessage: "Name can't be empty.",
-          }),
-        };
-      }
-      if (formData.name && !isValidFormTextInput(formData.name)) {
-        currentFormErrors = {
-          ...currentFormErrors,
-          name: i18n.translate('workspace.form.detail.name.invalid', {
-            defaultMessage: 'Invalid workspace name',
-          }),
-        };
-      }
-      if (formData.description && !isValidFormTextInput(formData.description)) {
-        currentFormErrors = {
-          ...currentFormErrors,
-          description: i18n.translate('workspace.form.detail.description.invalid', {
-            defaultMessage: 'Invalid workspace description',
-          }),
-        };
-      }
+      const currentFormErrors: WorkspaceFormErrors = validateWorkspaceForm(formData);
       setFormErrors(currentFormErrors);
       if (getNumberOfErrors(currentFormErrors) > 0) {
         return;
@@ -101,7 +84,11 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
         formData.features = defaultValues?.features ?? [];
       }
 
-      onSubmit?.({ ...formData, name: formData.name! });
+      onSubmit?.({
+        ...formData,
+        name: formData.name!,
+        permissionSettings: formData.permissionSettings as WorkspacePermissionSetting[],
+      });
     },
     [defaultFeatures, onSubmit, defaultValues?.features]
   );
@@ -122,6 +109,10 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
     setSelectedTab(WorkspaceFormTabs.FeatureVisibility);
   }, []);
 
+  const handleTabPermissionClick = useCallback(() => {
+    setSelectedTab(WorkspaceFormTabs.UsersAndPermissions);
+  }, []);
+
   const handleFeaturesChange = useCallback((featureIds: string[]) => {
     setSelectedFeatureIds(featureIds);
   }, []);
@@ -143,6 +134,8 @@ export const useWorkspaceForm = ({ application, defaultValues, onSubmit }: Works
     handleFeaturesChange,
     handleNameInputChange,
     handleTabFeatureClick,
+    setPermissionSettings,
+    handleTabPermissionClick,
     handleDescriptionInputChange,
   };
 };
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.test.ts b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
index 6101bd078831..4531b2979bc1 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.test.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.test.ts
@@ -4,7 +4,14 @@
  */
 
 import { AppNavLinkStatus, DEFAULT_APP_CATEGORIES } from '../../../../../core/public';
-import { convertApplicationsToFeaturesOrGroups } from './utils';
+import {
+  validateWorkspaceForm,
+  convertApplicationsToFeaturesOrGroups,
+  convertPermissionSettingsToPermissions,
+  convertPermissionsToPermissionSettings,
+} from './utils';
+import { WorkspacePermissionMode } from '../../../common/constants';
+import { WorkspacePermissionItemType } from './constants';
 
 describe('convertApplicationsToFeaturesOrGroups', () => {
   it('should filter out invisible features', () => {
@@ -124,3 +131,260 @@ describe('convertApplicationsToFeaturesOrGroups', () => {
     ]);
   });
 });
+
+describe('convertPermissionSettingsToPermissions', () => {
+  it('should return undefined if permission items not provided', () => {
+    expect(convertPermissionSettingsToPermissions(undefined)).toBeUndefined();
+    expect(convertPermissionSettingsToPermissions([])).toBeUndefined();
+  });
+
+  it('should not add duplicate users and groups', () => {
+    expect(
+      convertPermissionSettingsToPermissions([
+        {
+          id: 0,
+          type: WorkspacePermissionItemType.User,
+          userId: 'duplicate-user',
+          modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+        },
+        {
+          id: 1,
+          type: WorkspacePermissionItemType.User,
+          userId: 'duplicate-user',
+          modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+        },
+        {
+          id: 2,
+          type: WorkspacePermissionItemType.Group,
+          group: 'duplicate-group',
+          modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+        },
+        {
+          id: 3,
+          type: WorkspacePermissionItemType.Group,
+          group: 'duplicate-group',
+          modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+        },
+      ])
+    ).toEqual({
+      library_read: { users: ['duplicate-user'], groups: ['duplicate-group'] },
+      library_write: { users: ['duplicate-user'], groups: ['duplicate-group'] },
+      read: { users: ['duplicate-user'], groups: ['duplicate-group'] },
+    });
+  });
+
+  it('should return consistent permissions', () => {
+    expect(
+      convertPermissionSettingsToPermissions([
+        {
+          id: 0,
+          type: WorkspacePermissionItemType.User,
+          userId: 'foo',
+          modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+        },
+        {
+          id: 1,
+          type: WorkspacePermissionItemType.Group,
+          group: 'bar',
+          modes: [WorkspacePermissionMode.LibraryWrite],
+        },
+      ])
+    ).toEqual({
+      library_read: { users: ['foo'] },
+      library_write: { groups: ['bar'] },
+      read: { users: ['foo'] },
+    });
+  });
+});
+
+describe('convertPermissionsToPermissionSettings', () => {
+  it('should return consistent permission settings', () => {
+    expect(
+      convertPermissionsToPermissionSettings({
+        library_read: { users: ['foo'] },
+        library_write: { groups: ['bar'] },
+        read: { users: ['foo'] },
+        write: { groups: ['bar'] },
+      })
+    ).toEqual([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.User,
+        userId: 'foo',
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+      },
+      {
+        id: 1,
+        type: WorkspacePermissionItemType.Group,
+        group: 'bar',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+      },
+    ]);
+  });
+  it('should separate to multi permission settings', () => {
+    expect(
+      convertPermissionsToPermissionSettings({
+        library_read: { users: ['foo'] },
+        library_write: { users: ['foo'] },
+        read: { users: ['foo'] },
+      })
+    ).toEqual([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.User,
+        userId: 'foo',
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+      },
+      {
+        id: 1,
+        type: WorkspacePermissionItemType.User,
+        userId: 'foo',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+      },
+    ]);
+    expect(
+      convertPermissionsToPermissionSettings({
+        library_read: { groups: ['bar'] },
+        library_write: { groups: ['bar'] },
+        read: { groups: ['bar'] },
+      })
+    ).toEqual([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.Group,
+        group: 'bar',
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+      },
+      {
+        id: 1,
+        type: WorkspacePermissionItemType.Group,
+        group: 'bar',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+      },
+    ]);
+  });
+  it('should only convert workspace supported permissions', () => {
+    expect(
+      convertPermissionsToPermissionSettings({
+        another_read: { users: ['foo'] },
+      })
+    ).toEqual([]);
+  });
+});
+
+describe('validateWorkspaceForm', () => {
+  it('should return error if name is empty', () => {
+    expect(validateWorkspaceForm({}).name).toEqual("Name can't be empty.");
+  });
+  it('should return error if name is invalid', () => {
+    expect(validateWorkspaceForm({ name: '~' }).name).toEqual('Invalid workspace name');
+  });
+  it('should return error if description is invalid', () => {
+    expect(validateWorkspaceForm({ description: '~' }).description).toEqual(
+      'Invalid workspace description'
+    );
+  });
+  it('should return error if permission setting type is invalid', () => {
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [{ id: 0 }],
+      }).permissionSettings
+    ).toEqual({ 0: 'Invalid type' });
+  });
+  it('should return error if permission setting modes is invalid', () => {
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [{ id: 0, type: WorkspacePermissionItemType.User, modes: [] }],
+      }).permissionSettings
+    ).toEqual({ 0: 'Invalid permission modes' });
+  });
+  it('should return error if permission setting user id is invalid', () => {
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [
+          {
+            id: 0,
+            type: WorkspacePermissionItemType.User,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            userId: '',
+          },
+        ],
+      }).permissionSettings
+    ).toEqual({ 0: 'Invalid user id' });
+  });
+  it('should return error if permission setting group is invalid', () => {
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [
+          {
+            id: 0,
+            type: WorkspacePermissionItemType.Group,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            group: '',
+          },
+        ],
+      }).permissionSettings
+    ).toEqual({ 0: 'Invalid user group' });
+  });
+
+  it('should return error if permission setting is duplicate', () => {
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [
+          {
+            id: 0,
+            type: WorkspacePermissionItemType.User,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            userId: 'foo',
+          },
+          {
+            id: 1,
+            type: WorkspacePermissionItemType.User,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            userId: 'foo',
+          },
+        ],
+      }).permissionSettings
+    ).toEqual({ 1: 'Duplicate permission setting' });
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [
+          {
+            id: 0,
+            type: WorkspacePermissionItemType.Group,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            group: 'foo',
+          },
+          {
+            id: 1,
+            type: WorkspacePermissionItemType.Group,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            group: 'foo',
+          },
+        ],
+      }).permissionSettings
+    ).toEqual({ 1: 'Duplicate permission setting' });
+  });
+
+  it('should return empty object for valid for data', () => {
+    expect(
+      validateWorkspaceForm({
+        name: 'test',
+        permissionSettings: [
+          {
+            id: 0,
+            type: WorkspacePermissionItemType.Group,
+            modes: [WorkspacePermissionMode.LibraryRead],
+            group: 'foo',
+          },
+        ],
+      })
+    ).toEqual({});
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_form/utils.ts b/src/plugins/workspace/public/components/workspace_form/utils.ts
index 5514e6a8fb9c..a00be1ceaa4e 100644
--- a/src/plugins/workspace/public/components/workspace_form/utils.ts
+++ b/src/plugins/workspace/public/components/workspace_form/utils.ts
@@ -3,14 +3,28 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { i18n } from '@osd/i18n';
+
 import {
   AppNavLinkStatus,
   DEFAULT_APP_CATEGORIES,
   PublicAppInfo,
 } from '../../../../../core/public';
-import { DEFAULT_SELECTED_FEATURES_IDS } from '../../../common/constants';
+import type { SavedObjectPermissions } from '../../../../../core/types';
+import { DEFAULT_SELECTED_FEATURES_IDS, WorkspacePermissionMode } from '../../../common/constants';
+import {
+  optionIdToWorkspacePermissionModesMap,
+  PermissionModeId,
+  WorkspacePermissionItemType,
+} from './constants';
 
-import { WorkspaceFeature, WorkspaceFeatureGroup, WorkspaceFormErrors } from './types';
+import {
+  WorkspaceFeature,
+  WorkspaceFeatureGroup,
+  WorkspaceFormErrors,
+  WorkspaceFormSubmitData,
+  WorkspacePermissionSetting,
+} from './types';
 
 export const isWorkspaceFeatureGroup = (
   featureOrGroup: WorkspaceFeature | WorkspaceFeatureGroup
@@ -38,6 +52,9 @@ export const getNumberOfErrors = (formErrors: WorkspaceFormErrors) => {
   if (formErrors.description) {
     numberOfErrors += 1;
   }
+  if (formErrors.permissionSettings) {
+    numberOfErrors += Object.keys(formErrors.permissionSettings).length;
+  }
   return numberOfErrors;
 };
 
@@ -98,3 +115,219 @@ export const convertApplicationsToFeaturesOrGroups = (
     ];
   }, []);
 };
+
+export const isUserOrGroupPermissionSettingDuplicated = (
+  permissionSettings: Array<Partial<WorkspacePermissionSetting>>,
+  permissionSettingToCheck: WorkspacePermissionSetting
+) =>
+  permissionSettings.some(
+    (permissionSetting) =>
+      (permissionSettingToCheck.type === WorkspacePermissionItemType.User &&
+        permissionSetting.type === WorkspacePermissionItemType.User &&
+        permissionSettingToCheck.userId === permissionSetting.userId) ||
+      (permissionSettingToCheck.type === WorkspacePermissionItemType.Group &&
+        permissionSetting.type === WorkspacePermissionItemType.Group &&
+        permissionSettingToCheck.group === permissionSetting.group)
+  );
+
+/**
+ * This function is for converting passed permission modes to permission option id,
+ * it will return Read as default if permission modes not matched.
+ *
+ * @param modes permission modes
+ * @returns permission option id
+ */
+export const getPermissionModeId = (modes: WorkspacePermissionMode[]) => {
+  for (const key in optionIdToWorkspacePermissionModesMap) {
+    if (optionIdToWorkspacePermissionModesMap[key].every((mode) => modes?.includes(mode))) {
+      return key;
+    }
+  }
+  return PermissionModeId.Read;
+};
+
+export const convertPermissionSettingsToPermissions = (
+  permissionItems: WorkspacePermissionSetting[] | undefined
+) => {
+  if (!permissionItems || permissionItems.length === 0) {
+    return undefined;
+  }
+  return permissionItems.reduce<SavedObjectPermissions>((previous, current) => {
+    current.modes.forEach((mode) => {
+      if (!previous[mode]) {
+        previous[mode] = {};
+      }
+      switch (current.type) {
+        case WorkspacePermissionItemType.User:
+          previous[mode].users = previous[mode].users?.includes(current.userId)
+            ? previous[mode].users
+            : [...(previous[mode].users || []), current.userId];
+          break;
+        case WorkspacePermissionItemType.Group:
+          previous[mode].groups = previous[mode].groups?.includes(current.group)
+            ? previous[mode].groups
+            : [...(previous[mode].groups || []), current.group];
+          break;
+      }
+    });
+    return previous;
+  }, {});
+};
+
+const isWorkspacePermissionMode = (test: string): test is WorkspacePermissionMode =>
+  test === WorkspacePermissionMode.LibraryRead ||
+  test === WorkspacePermissionMode.LibraryWrite ||
+  test === WorkspacePermissionMode.Read ||
+  test === WorkspacePermissionMode.Write;
+
+export const convertPermissionsToPermissionSettings = (permissions: SavedObjectPermissions) => {
+  const permissionSettings: WorkspacePermissionSetting[] = [];
+  const finalPermissionSettings: WorkspacePermissionSetting[] = [];
+  const settingType2Modes: { [key: string]: WorkspacePermissionMode[] } = {};
+
+  const processUsersOrGroups = (
+    usersOrGroups: string[] | undefined,
+    type: WorkspacePermissionItemType,
+    mode: WorkspacePermissionMode
+  ) => {
+    usersOrGroups?.forEach((userOrGroup) => {
+      const settingTypeKey = `${type}-${userOrGroup}`;
+      const modes = settingType2Modes[settingTypeKey] ?? [];
+
+      modes.push(mode);
+      if (modes.length === 1) {
+        permissionSettings.push({
+          // This id is for type safe, and will be overwrite in below.
+          id: 0,
+          modes,
+          ...(type === WorkspacePermissionItemType.User
+            ? { type: WorkspacePermissionItemType.User, userId: userOrGroup }
+            : { type: WorkspacePermissionItemType.Group, group: userOrGroup }),
+        });
+        settingType2Modes[settingTypeKey] = modes;
+      }
+    });
+  };
+
+  Object.keys(permissions).forEach((mode) => {
+    if (isWorkspacePermissionMode(mode)) {
+      processUsersOrGroups(permissions[mode].users, WorkspacePermissionItemType.User, mode);
+      processUsersOrGroups(permissions[mode].groups, WorkspacePermissionItemType.Group, mode);
+    }
+  });
+
+  let id = 0;
+  /**
+   * One workspace permission setting may include multi setting options,
+   * for loop the workspace permission setting array to separate it to multi rows.
+   **/
+  permissionSettings.forEach((currentPermissionSettings) => {
+    /**
+     * For loop the option id to workspace permission modes map,
+     * if one settings includes all permission modes in a specific option,
+     * add these permission modes to the result array.
+     */
+    for (const key in optionIdToWorkspacePermissionModesMap) {
+      if (!Object.prototype.hasOwnProperty.call(optionIdToWorkspacePermissionModesMap, key)) {
+        continue;
+      }
+      const modesForCertainPermissionId = optionIdToWorkspacePermissionModesMap[key];
+      if (
+        modesForCertainPermissionId.every((mode) => currentPermissionSettings.modes?.includes(mode))
+      ) {
+        finalPermissionSettings.push({
+          ...currentPermissionSettings,
+          id,
+          modes: modesForCertainPermissionId,
+        });
+        id++;
+      }
+    }
+  });
+
+  return finalPermissionSettings;
+};
+
+export const validateWorkspaceForm = (
+  formData: Omit<Partial<WorkspaceFormSubmitData>, 'permissionSettings'> & {
+    permissionSettings?: Array<
+      Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
+    >;
+  }
+) => {
+  const formErrors: WorkspaceFormErrors = {};
+  const { name, description, permissionSettings } = formData;
+  if (name) {
+    if (!isValidFormTextInput(name)) {
+      formErrors.name = i18n.translate('workspace.form.detail.name.invalid', {
+        defaultMessage: 'Invalid workspace name',
+      });
+    }
+  } else {
+    formErrors.name = i18n.translate('workspace.form.detail.name.empty', {
+      defaultMessage: "Name can't be empty.",
+    });
+  }
+  if (description && !isValidFormTextInput(description)) {
+    formErrors.description = i18n.translate('workspace.form.detail.description.invalid', {
+      defaultMessage: 'Invalid workspace description',
+    });
+  }
+  if (permissionSettings) {
+    const permissionSettingsErrors: { [key: number]: string } = {};
+    for (let i = 0; i < permissionSettings.length; i++) {
+      const setting = permissionSettings[i];
+      if (!setting.type) {
+        permissionSettingsErrors[setting.id] = i18n.translate(
+          'workspace.form.permission.invalidate.type',
+          {
+            defaultMessage: 'Invalid type',
+          }
+        );
+      } else if (!setting.modes || setting.modes.length === 0) {
+        permissionSettingsErrors[setting.id] = i18n.translate(
+          'workspace.form.permission.invalidate.modes',
+          {
+            defaultMessage: 'Invalid permission modes',
+          }
+        );
+      } else if (setting.type === WorkspacePermissionItemType.User && !setting.userId) {
+        permissionSettingsErrors[setting.id] = i18n.translate(
+          'workspace.form.permission.invalidate.userId',
+          {
+            defaultMessage: 'Invalid user id',
+          }
+        );
+      } else if (setting.type === WorkspacePermissionItemType.Group && !setting.group) {
+        permissionSettingsErrors[setting.id] = i18n.translate(
+          'workspace.form.permission.invalidate.group',
+          {
+            defaultMessage: 'Invalid user group',
+          }
+        );
+      } else if (
+        isUserOrGroupPermissionSettingDuplicated(
+          permissionSettings.slice(0, i),
+          setting as WorkspacePermissionSetting
+        )
+      ) {
+        permissionSettingsErrors[setting.id] = i18n.translate(
+          'workspace.form.permission.invalidate.group',
+          {
+            defaultMessage: 'Duplicate permission setting',
+          }
+        );
+      }
+    }
+    if (Object.keys(permissionSettingsErrors).length > 0) {
+      formErrors.permissionSettings = permissionSettingsErrors;
+    }
+  }
+  return formErrors;
+};
+
+export const generateNextPermissionSettingsId = (permissionSettings: Array<{ id: number }>) => {
+  return permissionSettings.length === 0
+    ? 0
+    : Math.max(...permissionSettings.map(({ id }) => id)) + 1;
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
index 69793c75395d..274cee6d07d3 100644
--- a/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_form.tsx
@@ -24,9 +24,16 @@ import { WorkspaceFormProps } from './types';
 import { WorkspaceFormTabs } from './constants';
 import { useWorkspaceForm } from './use_workspace_form';
 import { WorkspaceFeatureSelector } from './workspace_feature_selector';
+import { WorkspacePermissionSettingPanel } from './workspace_permission_setting_panel';
 
 export const WorkspaceForm = (props: WorkspaceFormProps) => {
-  const { application, defaultValues, operationType } = props;
+  const {
+    application,
+    defaultValues,
+    operationType,
+    permissionEnabled,
+    permissionLastAdminItemDeletable,
+  } = props;
   const {
     formId,
     formData,
@@ -39,6 +46,8 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
     handleFeaturesChange,
     handleNameInputChange,
     handleTabFeatureClick,
+    setPermissionSettings,
+    handleTabPermissionClick,
     handleDescriptionInputChange,
   } = useWorkspaceForm(props);
   const workspaceDetailsTitle = i18n.translate('workspace.form.workspaceDetails.title', {
@@ -47,6 +56,9 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
   const featureVisibilityTitle = i18n.translate('workspace.form.featureVisibility.title', {
     defaultMessage: 'Feature Visibility',
   });
+  const usersAndPermissionsTitle = i18n.translate('workspace.form.usersAndPermissions.title', {
+    defaultMessage: 'Users & Permissions',
+  });
 
   return (
     <EuiForm id={formId} onSubmit={handleFormSubmit} component="form">
@@ -124,6 +136,14 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
         >
           <EuiText>{featureVisibilityTitle}</EuiText>
         </EuiTab>
+        {permissionEnabled && (
+          <EuiTab
+            onClick={handleTabPermissionClick}
+            isSelected={selectedTab === WorkspaceFormTabs.UsersAndPermissions}
+          >
+            <EuiText>{usersAndPermissionsTitle}</EuiText>
+          </EuiTab>
+        )}
       </EuiTabs>
       {selectedTab === WorkspaceFormTabs.FeatureVisibility && (
         <EuiPanel>
@@ -139,6 +159,25 @@ export const WorkspaceForm = (props: WorkspaceFormProps) => {
           />
         </EuiPanel>
       )}
+      {selectedTab === WorkspaceFormTabs.UsersAndPermissions && (
+        <EuiPanel>
+          <EuiTitle size="s">
+            <h2>
+              {i18n.translate('workspace.form.usersAndPermissions.title', {
+                defaultMessage: 'Users & Permissions',
+              })}
+            </h2>
+          </EuiTitle>
+          <EuiHorizontalRule margin="xs" />
+          <WorkspacePermissionSettingPanel
+            errors={formErrors.permissionSettings}
+            onChange={setPermissionSettings}
+            permissionSettings={formData.permissionSettings}
+            lastAdminItemDeletable={!!permissionLastAdminItemDeletable}
+            data-test-subj={`workspaceForm-permissionSettingPanel`}
+          />
+        </EuiPanel>
+      )}
       <EuiSpacer />
       <WorkspaceBottomBar
         operationType={operationType}
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx
new file mode 100644
index 000000000000..ea18692255e6
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.test.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import {
+  WorkspacePermissionSettingInput,
+  WorkspacePermissionSettingInputProps,
+} from './workspace_permission_setting_input';
+import { WorkspacePermissionItemType } from './constants';
+import { WorkspacePermissionMode } from '../../../common/constants';
+
+const setup = (options?: Partial<WorkspacePermissionSettingInputProps>) => {
+  const onGroupOrUserIdChangeMock = jest.fn();
+  const onPermissionModesChangeMock = jest.fn();
+  const onDeleteMock = jest.fn();
+  const renderResult = render(
+    <WorkspacePermissionSettingInput
+      index={0}
+      deletable
+      type={WorkspacePermissionItemType.User}
+      onGroupOrUserIdChange={onGroupOrUserIdChangeMock}
+      onPermissionModesChange={onPermissionModesChangeMock}
+      onDelete={onDeleteMock}
+      {...options}
+    />
+  );
+  return {
+    renderResult,
+    onGroupOrUserIdChangeMock,
+    onPermissionModesChangeMock,
+    onDeleteMock,
+  };
+};
+
+describe('WorkspacePermissionSettingInput', () => {
+  it('should render consistent user id and permission modes', () => {
+    const { renderResult } = setup({
+      userId: 'foo',
+      modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+    });
+
+    expect(renderResult.getByText('foo')).toBeInTheDocument();
+    expect(renderResult.getByText('Read')).toBeInTheDocument();
+    expect(
+      renderResult.getByText('Read').closest('.euiButtonGroupButton-isSelected')
+    ).toBeInTheDocument();
+  });
+  it('should render consistent group id and permission modes', () => {
+    const { renderResult } = setup({
+      type: WorkspacePermissionItemType.Group,
+      group: 'bar',
+      modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+    });
+
+    expect(renderResult.getByText('bar')).toBeInTheDocument();
+    expect(renderResult.getByText('Read & Write')).toBeInTheDocument();
+    expect(
+      renderResult.getByText('Read & Write').closest('.euiButtonGroupButton-isSelected')
+    ).toBeInTheDocument();
+  });
+  it('should call onGroupOrUserIdChange with user id', () => {
+    const { renderResult, onGroupOrUserIdChangeMock } = setup();
+
+    expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByText('Select'));
+    fireEvent.input(renderResult.getByTestId('comboBoxSearchInput'), {
+      target: { value: 'user1' },
+    });
+    fireEvent.blur(renderResult.getByTestId('comboBoxSearchInput'));
+    expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'user', userId: 'user1' }, 0);
+  });
+  it('should call onGroupOrUserIdChange with group', () => {
+    const { renderResult, onGroupOrUserIdChangeMock } = setup({
+      type: WorkspacePermissionItemType.Group,
+    });
+
+    expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByText('Select'));
+    fireEvent.input(renderResult.getByTestId('comboBoxSearchInput'), {
+      target: { value: 'group' },
+    });
+    fireEvent.blur(renderResult.getByTestId('comboBoxSearchInput'));
+    expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'group', group: 'group' }, 0);
+  });
+
+  it('should call onGroupOrUserIdChange without user id after clear button clicked', () => {
+    const { renderResult, onGroupOrUserIdChangeMock } = setup({
+      userId: 'foo',
+    });
+
+    expect(onGroupOrUserIdChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByTestId('comboBoxClearButton'));
+    expect(onGroupOrUserIdChangeMock).toHaveBeenCalledWith({ type: 'user' }, 0);
+  });
+
+  it('should call onPermissionModesChange with permission modes after permission modes changed', () => {
+    const { renderResult, onPermissionModesChangeMock } = setup({});
+
+    expect(onPermissionModesChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByText('Admin'));
+    expect(onPermissionModesChangeMock).toHaveBeenCalledWith(['library_write', 'write'], 0);
+  });
+
+  it('should call onDelete with index after delete button clicked', () => {
+    const { renderResult, onDeleteMock } = setup();
+
+    expect(onDeleteMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByLabelText('Delete permission setting'));
+    expect(onDeleteMock).toHaveBeenCalledWith(0);
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx
new file mode 100644
index 000000000000..099ae33bc23c
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_input.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import {
+  EuiFlexGroup,
+  EuiComboBox,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiButtonGroup,
+} from '@elastic/eui';
+import { WorkspacePermissionMode } from '../../../common/constants';
+import {
+  WorkspacePermissionItemType,
+  optionIdToWorkspacePermissionModesMap,
+  permissionModeOptions,
+} from './constants';
+import { getPermissionModeId } from './utils';
+
+export interface WorkspacePermissionSettingInputProps {
+  index: number;
+  deletable: boolean;
+  type: WorkspacePermissionItemType;
+  userId?: string;
+  group?: string;
+  modes?: WorkspacePermissionMode[];
+  onGroupOrUserIdChange: (
+    groupOrUserId:
+      | { type: WorkspacePermissionItemType.User; userId?: string }
+      | { type: WorkspacePermissionItemType.Group; group?: string },
+    index: number
+  ) => void;
+  onPermissionModesChange: (
+    WorkspacePermissionMode: WorkspacePermissionMode[],
+    index: number
+  ) => void;
+  onDelete: (index: number) => void;
+}
+
+export const WorkspacePermissionSettingInput = ({
+  index,
+  type,
+  userId,
+  group,
+  modes,
+  deletable,
+  onDelete,
+  onGroupOrUserIdChange,
+  onPermissionModesChange,
+}: WorkspacePermissionSettingInputProps) => {
+  const groupOrUserIdSelectedOptions = useMemo(
+    () => (group || userId ? [{ label: (group || userId) as string }] : []),
+    [group, userId]
+  );
+
+  const permissionModesSelectedId = useMemo(() => getPermissionModeId(modes ?? []), [modes]);
+  const handleGroupOrUserIdCreate = useCallback(
+    (groupOrUserId) => {
+      onGroupOrUserIdChange(
+        type === WorkspacePermissionItemType.Group
+          ? { type, group: groupOrUserId }
+          : { type, userId: groupOrUserId },
+        index
+      );
+    },
+    [index, type, onGroupOrUserIdChange]
+  );
+
+  const handleGroupOrUserIdChange = useCallback(
+    (options) => {
+      if (options.length === 0) {
+        onGroupOrUserIdChange({ type }, index);
+      }
+    },
+    [index, type, onGroupOrUserIdChange]
+  );
+
+  const handlePermissionModeOptionChange = useCallback(
+    (id: string) => {
+      if (optionIdToWorkspacePermissionModesMap[id]) {
+        onPermissionModesChange([...optionIdToWorkspacePermissionModesMap[id]], index);
+      }
+    },
+    [index, onPermissionModesChange]
+  );
+
+  const handleDelete = useCallback(() => {
+    onDelete(index);
+  }, [index, onDelete]);
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="l">
+      <EuiFlexItem>
+        <EuiComboBox
+          singleSelection
+          selectedOptions={groupOrUserIdSelectedOptions}
+          onCreateOption={handleGroupOrUserIdCreate}
+          onChange={handleGroupOrUserIdChange}
+          placeholder="Select"
+          style={{ width: 200 }}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonGroup
+          type="single"
+          isDisabled={!deletable}
+          legend="Permission Modes"
+          options={permissionModeOptions}
+          idSelected={permissionModesSelectedId}
+          onChange={handlePermissionModeOptionChange}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          color="danger"
+          aria-label="Delete permission setting"
+          iconType="trash"
+          display="base"
+          size="m"
+          onClick={handleDelete}
+          isDisabled={!deletable}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx
new file mode 100644
index 000000000000..8415405e8e98
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.test.tsx
@@ -0,0 +1,199 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import {
+  WorkspacePermissionSettingPanel,
+  WorkspacePermissionSettingPanelProps,
+} from './workspace_permission_setting_panel';
+import { WorkspacePermissionItemType } from './constants';
+import { WorkspacePermissionMode } from '../../../common/constants';
+
+const setup = (options?: Partial<WorkspacePermissionSettingPanelProps>) => {
+  const onChangeMock = jest.fn();
+  const permissionSettings = [
+    {
+      id: 0,
+      type: WorkspacePermissionItemType.User,
+      userId: 'foo',
+      modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+    },
+    {
+      id: 1,
+      type: WorkspacePermissionItemType.Group,
+      group: 'bar',
+      modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+    },
+  ];
+  const renderResult = render(
+    <WorkspacePermissionSettingPanel
+      lastAdminItemDeletable={true}
+      permissionSettings={permissionSettings}
+      onChange={onChangeMock}
+      {...options}
+    />
+  );
+  return {
+    renderResult,
+    onChangeMock,
+  };
+};
+
+describe('WorkspacePermissionSettingInput', () => {
+  it('should render consistent user and group permissions', () => {
+    const { renderResult } = setup();
+
+    expect(renderResult.getByText('foo')).toBeInTheDocument();
+    expect(
+      renderResult.getAllByText('Read')[0].closest('.euiButtonGroupButton-isSelected')
+    ).toBeInTheDocument();
+
+    expect(renderResult.getByText('bar')).toBeInTheDocument();
+    expect(
+      renderResult.getAllByText('Read & Write')[1].closest('.euiButtonGroupButton-isSelected')
+    ).toBeInTheDocument();
+  });
+
+  it('should call onChange with new user permission modes', () => {
+    const { renderResult, onChangeMock } = setup();
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getAllByText('Read & Write')[0]);
+    expect(onChangeMock).toHaveBeenCalledWith([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.User,
+        userId: 'foo',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+      },
+      {
+        id: 1,
+        type: WorkspacePermissionItemType.Group,
+        group: 'bar',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Read],
+      },
+    ]);
+  });
+  it('should call onChange with new group permission modes', () => {
+    const { renderResult, onChangeMock } = setup();
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getAllByText('Admin')[1]);
+    expect(onChangeMock).toHaveBeenCalledWith([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.User,
+        userId: 'foo',
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+      },
+      {
+        id: 1,
+        type: WorkspacePermissionItemType.Group,
+        group: 'bar',
+        modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+      },
+    ]);
+  });
+
+  it('should call onChange with new user permission setting after add new button click', () => {
+    const { renderResult, onChangeMock } = setup({
+      permissionSettings: [],
+    });
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByTestId('workspaceForm-permissionSettingPanel-user-addNew'));
+    expect(onChangeMock).toHaveBeenCalledWith([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.User,
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+      },
+    ]);
+  });
+
+  it('should call onChange with new group permission setting after add new button click', () => {
+    const { renderResult, onChangeMock } = setup({
+      permissionSettings: [],
+    });
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+    fireEvent.click(renderResult.getByTestId('workspaceForm-permissionSettingPanel-group-addNew'));
+    expect(onChangeMock).toHaveBeenCalledWith([
+      {
+        id: 0,
+        type: WorkspacePermissionItemType.Group,
+        modes: [WorkspacePermissionMode.LibraryRead, WorkspacePermissionMode.Read],
+      },
+    ]);
+  });
+
+  it('should not able to delete last user admin permission setting', () => {
+    const { renderResult } = setup({
+      lastAdminItemDeletable: false,
+      permissionSettings: [
+        {
+          id: 0,
+          type: WorkspacePermissionItemType.User,
+          userId: 'foo',
+          modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+        },
+      ],
+    });
+
+    expect(renderResult.getByLabelText('Delete permission setting')).toBeDisabled();
+  });
+
+  it('should not able to delete last group admin permission setting', () => {
+    const { renderResult } = setup({
+      lastAdminItemDeletable: false,
+      permissionSettings: [
+        {
+          id: 0,
+          type: WorkspacePermissionItemType.Group,
+          group: 'bar',
+          modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+        },
+      ],
+    });
+
+    expect(renderResult.getByLabelText('Delete permission setting')).toBeDisabled();
+  });
+
+  it('should able to delete permission setting if more than one admin permission', () => {
+    const { renderResult } = setup({
+      lastAdminItemDeletable: false,
+      permissionSettings: [
+        {
+          id: 0,
+          type: WorkspacePermissionItemType.User,
+          userId: 'foo',
+          modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+        },
+        {
+          id: 0,
+          type: WorkspacePermissionItemType.Group,
+          group: 'bar',
+          modes: [WorkspacePermissionMode.LibraryWrite, WorkspacePermissionMode.Write],
+        },
+      ],
+    });
+
+    expect(renderResult.getAllByLabelText('Delete permission setting')[0]).not.toBeDisabled();
+    expect(renderResult.getAllByLabelText('Delete permission setting')[1]).not.toBeDisabled();
+  });
+
+  it('should render consistent errors', () => {
+    const { renderResult } = setup({
+      errors: { '0': 'User permission setting error', '1': 'Group permission setting error' },
+    });
+    expect(renderResult.container.querySelectorAll('.euiFormRow')[0]).toHaveTextContent(
+      'User permission setting error'
+    );
+    expect(renderResult.container.querySelectorAll('.euiFormRow')[1]).toHaveTextContent(
+      'Group permission setting error'
+    );
+  });
+});
diff --git a/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx
new file mode 100644
index 000000000000..a4cb3b83f52b
--- /dev/null
+++ b/src/plugins/workspace/public/components/workspace_form/workspace_permission_setting_panel.tsx
@@ -0,0 +1,235 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { EuiButton, EuiFormRow, EuiText, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { WorkspacePermissionSetting } from './types';
+import {
+  WorkspacePermissionItemType,
+  optionIdToWorkspacePermissionModesMap,
+  PermissionModeId,
+} from './constants';
+import {
+  WorkspacePermissionSettingInput,
+  WorkspacePermissionSettingInputProps,
+} from './workspace_permission_setting_input';
+import { generateNextPermissionSettingsId, getPermissionModeId } from './utils';
+
+export interface WorkspacePermissionSettingPanelProps {
+  errors?: { [key: number]: string };
+  lastAdminItemDeletable: boolean;
+  permissionSettings: Array<
+    Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>
+  >;
+  onChange?: (
+    value: Array<Pick<WorkspacePermissionSetting, 'id'> & Partial<WorkspacePermissionSetting>>
+  ) => void;
+}
+
+interface UserOrGroupSectionProps
+  extends Omit<WorkspacePermissionSettingPanelProps, 'lastAdminItemDeletable'> {
+  title: string;
+  nonDeletableIndex: number;
+  type: WorkspacePermissionItemType;
+  nextIdGenerator: () => number;
+}
+
+const UserOrGroupSection = ({
+  type,
+  title,
+  errors,
+  onChange,
+  nextIdGenerator,
+  permissionSettings,
+  nonDeletableIndex,
+}: UserOrGroupSectionProps) => {
+  // default permission mode is read
+  const handleAddNewOne = useCallback(() => {
+    onChange?.([
+      ...permissionSettings,
+      {
+        id: nextIdGenerator(),
+        type,
+        modes: optionIdToWorkspacePermissionModesMap[PermissionModeId.Read],
+      },
+    ]);
+  }, [onChange, type, permissionSettings, nextIdGenerator]);
+
+  const handleDelete = useCallback(
+    (index: number) => {
+      onChange?.(permissionSettings.filter((_item, itemIndex) => itemIndex !== index));
+    },
+    [onChange, permissionSettings]
+  );
+
+  const handlePermissionModesChange = useCallback<
+    WorkspacePermissionSettingInputProps['onPermissionModesChange']
+  >(
+    (modes, index) => {
+      onChange?.(
+        permissionSettings.map((item, itemIndex) =>
+          index === itemIndex ? { ...item, modes } : item
+        )
+      );
+    },
+    [onChange, permissionSettings]
+  );
+
+  const handleGroupOrUserIdChange = useCallback<
+    WorkspacePermissionSettingInputProps['onGroupOrUserIdChange']
+  >(
+    (userOrGroupIdWithType, index) => {
+      onChange?.(
+        permissionSettings.map((item, itemIndex) =>
+          index === itemIndex
+            ? {
+                id: item.id,
+                ...userOrGroupIdWithType,
+                ...(item.modes ? { modes: item.modes } : {}),
+              }
+            : item
+        )
+      );
+    },
+    [onChange, permissionSettings]
+  );
+
+  return (
+    <div>
+      <EuiText>
+        <strong>{title}</strong>
+      </EuiText>
+      <EuiSpacer size="s" />
+      {permissionSettings.map((item, index) => (
+        <React.Fragment key={item.id}>
+          <EuiFormRow isInvalid={!!errors?.[item.id]} error={errors?.[item.id]}>
+            <WorkspacePermissionSettingInput
+              {...item}
+              type={type}
+              index={index}
+              deletable={index !== nonDeletableIndex}
+              onDelete={handleDelete}
+              onGroupOrUserIdChange={handleGroupOrUserIdChange}
+              onPermissionModesChange={handlePermissionModesChange}
+            />
+          </EuiFormRow>
+        </React.Fragment>
+      ))}
+      <EuiButton
+        fill
+        fullWidth={false}
+        onClick={handleAddNewOne}
+        data-test-subj={`workspaceForm-permissionSettingPanel-${type}-addNew`}
+      >
+        {i18n.translate('workspace.form.permissionSettingPanel.addNew', {
+          defaultMessage: 'Add New',
+        })}
+      </EuiButton>
+    </div>
+  );
+};
+
+export const WorkspacePermissionSettingPanel = ({
+  errors,
+  onChange,
+  permissionSettings,
+  lastAdminItemDeletable,
+}: WorkspacePermissionSettingPanelProps) => {
+  const userPermissionSettings = useMemo(
+    () =>
+      permissionSettings?.filter(
+        (permissionSettingItem) => permissionSettingItem.type === WorkspacePermissionItemType.User
+      ) ?? [],
+    [permissionSettings]
+  );
+  const groupPermissionSettings = useMemo(
+    () =>
+      permissionSettings?.filter(
+        (permissionSettingItem) => permissionSettingItem.type === WorkspacePermissionItemType.Group
+      ) ?? [],
+    [permissionSettings]
+  );
+
+  const { userNonDeletableIndex, groupNonDeletableIndex } = useMemo(() => {
+    if (
+      lastAdminItemDeletable ||
+      // Permission setting can be deleted if there are more than one admin setting
+      [...userPermissionSettings, ...groupPermissionSettings].filter(
+        (permission) =>
+          permission.modes && getPermissionModeId(permission.modes) === PermissionModeId.Admin
+      ).length > 1
+    ) {
+      return { userNonDeletableIndex: -1, groupNonDeletableIndex: -1 };
+    }
+    return {
+      userNonDeletableIndex: userPermissionSettings.findIndex(
+        (permission) =>
+          permission.modes && getPermissionModeId(permission.modes) === PermissionModeId.Admin
+      ),
+      groupNonDeletableIndex: groupPermissionSettings.findIndex(
+        (permission) =>
+          permission.modes && getPermissionModeId(permission.modes) === PermissionModeId.Admin
+      ),
+    };
+  }, [userPermissionSettings, groupPermissionSettings, lastAdminItemDeletable]);
+
+  const nextIdRef = useRef(generateNextPermissionSettingsId(permissionSettings));
+
+  const handleUserPermissionSettingsChange = useCallback(
+    (newSettings) => {
+      onChange?.([...newSettings, ...groupPermissionSettings]);
+    },
+    [groupPermissionSettings, onChange]
+  );
+
+  const handleGroupPermissionSettingsChange = useCallback(
+    (newSettings) => {
+      onChange?.([...userPermissionSettings, ...newSettings]);
+    },
+    [userPermissionSettings, onChange]
+  );
+
+  const nextIdGenerator = useCallback(() => {
+    const nextId = nextIdRef.current;
+    nextIdRef.current++;
+    return nextId;
+  }, []);
+
+  useEffect(() => {
+    nextIdRef.current = Math.max(
+      nextIdRef.current,
+      generateNextPermissionSettingsId(permissionSettings)
+    );
+  }, [permissionSettings]);
+
+  return (
+    <div>
+      <UserOrGroupSection
+        title={i18n.translate('workspace.form.permissionSettingPanel.userTitle', {
+          defaultMessage: 'User',
+        })}
+        errors={errors}
+        onChange={handleUserPermissionSettingsChange}
+        nonDeletableIndex={userNonDeletableIndex}
+        permissionSettings={userPermissionSettings}
+        type={WorkspacePermissionItemType.User}
+        nextIdGenerator={nextIdGenerator}
+      />
+      <EuiSpacer size="s" />
+      <UserOrGroupSection
+        title={i18n.translate('workspace.form.permissionSettingPanel.userGroupTitle', {
+          defaultMessage: 'User Groups',
+        })}
+        errors={errors}
+        onChange={handleGroupPermissionSettingsChange}
+        nonDeletableIndex={groupNonDeletableIndex}
+        permissionSettings={groupPermissionSettings}
+        type={WorkspacePermissionItemType.Group}
+        nextIdGenerator={nextIdGenerator}
+      />
+    </div>
+  );
+};
diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx
index d829154426dd..142fcfaa61ea 100644
--- a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.test.tsx
@@ -56,6 +56,9 @@ const WorkspaceUpdater = (props: any) => {
         ...mockCoreStart.application,
         capabilities: {
           ...mockCoreStart.application.capabilities,
+          workspaces: {
+            permissionEnabled: true,
+          },
         },
         navigateToApp,
         getUrlForApp: jest.fn(() => '/app/workspace_overview'),
@@ -148,7 +151,7 @@ describe('WorkspaceUpdater', () => {
   });
 
   it('update workspace successfully', async () => {
-    const { getByTestId } = render(<WorkspaceUpdater />);
+    const { getByTestId, getByText, getAllByText } = render(<WorkspaceUpdater />);
     const nameInput = getByTestId('workspaceForm-workspaceDetails-nameInputText');
     fireEvent.input(nameInput, {
       target: { value: 'test workspace name' },
@@ -169,6 +172,15 @@ describe('WorkspaceUpdater', () => {
     fireEvent.click(getByTestId('workspaceForm-workspaceFeatureVisibility-app1'));
     fireEvent.click(getByTestId('workspaceForm-workspaceFeatureVisibility-category1'));
 
+    fireEvent.click(getByText('Users & Permissions'));
+    fireEvent.click(getByTestId('workspaceForm-permissionSettingPanel-user-addNew'));
+    const userIdInput = getAllByText('Select')[0];
+    fireEvent.click(userIdInput);
+    fireEvent.input(getByTestId('comboBoxSearchInput'), {
+      target: { value: 'test user id' },
+    });
+    fireEvent.blur(getByTestId('comboBoxSearchInput'));
+
     fireEvent.click(getByTestId('workspaceForm-bottomBar-updateButton'));
     expect(workspaceClientUpdate).toHaveBeenCalledWith(
       expect.any(String),
@@ -177,7 +189,15 @@ describe('WorkspaceUpdater', () => {
         color: '#000000',
         description: 'test workspace description',
         features: expect.arrayContaining(['app1', 'app2', 'app3']),
-      })
+      }),
+      {
+        read: {
+          users: ['test user id'],
+        },
+        library_read: {
+          users: ['test user id'],
+        },
+      }
     );
     await waitFor(() => {
       expect(notificationToastsAddSuccess).toHaveBeenCalled();
diff --git a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
index d39ddd650360..201175c11c8e 100644
--- a/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
+++ b/src/plugins/workspace/public/components/workspace_updater/workspace_updater.tsx
@@ -6,36 +6,46 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { EuiPage, EuiPageBody, EuiPageHeader, EuiPageContent } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
-import { WorkspaceAttribute } from 'opensearch-dashboards/public';
 import { useObservable } from 'react-use';
 import { of } from 'rxjs';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
-import { WorkspaceForm, WorkspaceFormSubmitData, WorkspaceOperationType } from '../workspace_form';
 import { WORKSPACE_OVERVIEW_APP_ID } from '../../../common/constants';
 import { formatUrlWithWorkspaceId } from '../../../../../core/public/utils';
+import { WorkspaceAttributeWithPermission } from '../../../../../core/types';
 import { WorkspaceClient } from '../../workspace_client';
-import { WorkspaceFormData } from '../workspace_form/types';
+import {
+  WorkspaceForm,
+  WorkspaceFormSubmitData,
+  WorkspaceOperationType,
+  convertPermissionsToPermissionSettings,
+  convertPermissionSettingsToPermissions,
+} from '../workspace_form';
 
 function getFormDataFromWorkspace(
-  currentWorkspace: WorkspaceAttribute | null | undefined
-): WorkspaceFormData {
-  return (currentWorkspace || {}) as WorkspaceFormData;
+  currentWorkspace: WorkspaceAttributeWithPermission | null | undefined
+) {
+  if (!currentWorkspace) {
+    return null;
+  }
+  return {
+    ...currentWorkspace,
+    permissionSettings: currentWorkspace.permissions
+      ? convertPermissionsToPermissionSettings(currentWorkspace.permissions)
+      : currentWorkspace.permissions,
+  };
 }
 
 export const WorkspaceUpdater = () => {
   const {
     services: { application, workspaces, notifications, http, workspaceClient },
   } = useOpenSearchDashboards<{ workspaceClient: WorkspaceClient }>();
+  const isPermissionEnabled = application?.capabilities.workspaces.permissionEnabled;
 
   const currentWorkspace = useObservable(workspaces ? workspaces.currentWorkspace$ : of(null));
-  const [currentWorkspaceFormData, setCurrentWorkspaceFormData] = useState<WorkspaceFormData>(
+  const [currentWorkspaceFormData, setCurrentWorkspaceFormData] = useState(
     getFormDataFromWorkspace(currentWorkspace)
   );
 
-  useEffect(() => {
-    setCurrentWorkspaceFormData(getFormDataFromWorkspace(currentWorkspace));
-  }, [currentWorkspace]);
-
   const handleWorkspaceFormSubmit = useCallback(
     async (data: WorkspaceFormSubmitData) => {
       let result;
@@ -49,8 +59,12 @@ export const WorkspaceUpdater = () => {
       }
 
       try {
-        const { ...attributes } = data;
-        result = await workspaceClient.update(currentWorkspace.id, attributes);
+        const { permissionSettings, ...attributes } = data;
+        result = await workspaceClient.update(
+          currentWorkspace.id,
+          attributes,
+          convertPermissionSettingsToPermissions(permissionSettings)
+        );
         if (result?.success) {
           notifications?.toasts.addSuccess({
             title: i18n.translate('workspace.update.success', {
@@ -86,7 +100,11 @@ export const WorkspaceUpdater = () => {
     [notifications?.toasts, currentWorkspace, http, application, workspaceClient]
   );
 
-  if (!currentWorkspaceFormData.name) {
+  useEffect(() => {
+    setCurrentWorkspaceFormData(getFormDataFromWorkspace(currentWorkspace));
+  }, [currentWorkspace]);
+
+  if (!currentWorkspaceFormData) {
     return null;
   }
 
@@ -108,6 +126,8 @@ export const WorkspaceUpdater = () => {
               defaultValues={currentWorkspaceFormData}
               onSubmit={handleWorkspaceFormSubmit}
               operationType={WorkspaceOperationType.Update}
+              permissionEnabled={isPermissionEnabled}
+              permissionLastAdminItemDeletable={false}
             />
           )}
         </EuiPageContent>
diff --git a/src/plugins/workspace/public/workspace_client.ts b/src/plugins/workspace/public/workspace_client.ts
index 3e988f38b265..892fcc52cef1 100644
--- a/src/plugins/workspace/public/workspace_client.ts
+++ b/src/plugins/workspace/public/workspace_client.ts
@@ -11,6 +11,7 @@ import {
   WorkspaceAttribute,
   WorkspacesSetup,
 } from '../../../core/public';
+import { SavedObjectPermissions, WorkspaceAttributeWithPermission } from '../../../core/types';
 
 const WORKSPACES_API_BASE_URL = '/api/workspaces';
 
@@ -146,7 +147,7 @@ export class WorkspaceClient {
   /**
    * A bypass layer to get current workspace id
    */
-  public getCurrentWorkspaceId(): IResponse<WorkspaceAttribute['id']> {
+  public getCurrentWorkspaceId(): IResponse<WorkspaceAttributeWithPermission['id']> {
     const currentWorkspaceId = this.workspaces.currentWorkspaceId$.getValue();
     if (!currentWorkspaceId) {
       return {
@@ -166,7 +167,7 @@ export class WorkspaceClient {
   /**
    * Do a find in the latest workspace list with current workspace id
    */
-  public async getCurrentWorkspace(): Promise<IResponse<WorkspaceAttribute>> {
+  public async getCurrentWorkspace(): Promise<IResponse<WorkspaceAttributeWithPermission>> {
     const currentWorkspaceIdResp = this.getCurrentWorkspaceId();
     if (currentWorkspaceIdResp.success) {
       const currentWorkspaceResp = await this.get(currentWorkspaceIdResp.result);
@@ -183,14 +184,16 @@ export class WorkspaceClient {
    * @returns {Promise<IResponse<Pick<WorkspaceAttribute, 'id'>>>} id of the new created workspace
    */
   public async create(
-    attributes: Omit<WorkspaceAttribute, 'id'>
-  ): Promise<IResponse<Pick<WorkspaceAttribute, 'id'>>> {
+    attributes: Omit<WorkspaceAttribute, 'id'>,
+    permissions?: SavedObjectPermissions
+  ): Promise<IResponse<Pick<WorkspaceAttributeWithPermission, 'id'>>> {
     const path = this.getPath();
 
-    const result = await this.safeFetch<WorkspaceAttribute>(path, {
+    const result = await this.safeFetch<WorkspaceAttributeWithPermission>(path, {
       method: 'POST',
       body: JSON.stringify({
         attributes,
+        permissions,
       }),
     });
 
@@ -233,7 +236,7 @@ export class WorkspaceClient {
     options?: WorkspaceFindOptions
   ): Promise<
     IResponse<{
-      workspaces: WorkspaceAttribute[];
+      workspaces: WorkspaceAttributeWithPermission[];
       total: number;
       per_page: number;
       page: number;
@@ -250,9 +253,9 @@ export class WorkspaceClient {
    * Fetches a single workspace by a workspace id
    *
    * @param {string} id
-   * @returns {Promise<IResponse<WorkspaceAttribute>>} The metadata of the workspace for the given id.
+   * @returns {Promise<IResponse<WorkspaceAttributeWithPermission>>} The metadata of the workspace for the given id.
    */
-  public get(id: string): Promise<IResponse<WorkspaceAttribute>> {
+  public get(id: string): Promise<IResponse<WorkspaceAttributeWithPermission>> {
     const path = this.getPath(id);
     return this.safeFetch(path, {
       method: 'GET',
@@ -268,11 +271,13 @@ export class WorkspaceClient {
    */
   public async update(
     id: string,
-    attributes: Partial<WorkspaceAttribute>
+    attributes: Partial<WorkspaceAttribute>,
+    permissions?: SavedObjectPermissions
   ): Promise<IResponse<boolean>> {
     const path = this.getPath(id);
     const body = {
       attributes,
+      permissions,
     };
 
     const result = await this.safeFetch(path, {
diff --git a/src/plugins/workspace/server/integration_tests/routes.test.ts b/src/plugins/workspace/server/integration_tests/routes.test.ts
index 66b7032a003a..cc1ef5f756b3 100644
--- a/src/plugins/workspace/server/integration_tests/routes.test.ts
+++ b/src/plugins/workspace/server/integration_tests/routes.test.ts
@@ -263,6 +263,32 @@ describe('workspace service api integration test', () => {
       expect(findResult.body.total).toEqual(0);
       expect(listResult.body.result.total).toEqual(1);
     });
+    it('should able to update workspace with partial attributes', async () => {
+      const result: any = await osdTestServer.request
+        .post(root, `/api/workspaces`)
+        .send({
+          attributes: omitId(testWorkspace),
+        })
+        .expect(200);
+
+      await osdTestServer.request
+        .put(root, `/api/workspaces/${result.body.result.id}`)
+        .send({
+          attributes: {
+            name: 'updated',
+          },
+        })
+        .expect(200);
+
+      const getResult = await osdTestServer.request.get(
+        root,
+        `/api/workspaces/${result.body.result.id}`
+      );
+
+      expect(getResult.body.success).toEqual(true);
+      expect(getResult.body.result.name).toEqual('updated');
+      expect(getResult.body.result.description).toEqual(testWorkspace.description);
+    });
   });
 
   describe('Duplicate saved objects APIs', () => {
diff --git a/src/plugins/workspace/server/routes/index.ts b/src/plugins/workspace/server/routes/index.ts
index b49bb2893575..2f7c6d8969fd 100644
--- a/src/plugins/workspace/server/routes/index.ts
+++ b/src/plugins/workspace/server/routes/index.ts
@@ -29,14 +29,23 @@ const workspacePermissions = schema.recordOf(
   schema.recordOf(principalType, schema.arrayOf(schema.string()), {})
 );
 
-const workspaceAttributesSchema = schema.object({
+const workspaceOptionalAttributesSchema = {
   description: schema.maybe(schema.string()),
-  name: schema.string(),
   features: schema.maybe(schema.arrayOf(schema.string())),
   color: schema.maybe(schema.string()),
   icon: schema.maybe(schema.string()),
   defaultVISTheme: schema.maybe(schema.string()),
   reserved: schema.maybe(schema.boolean()),
+};
+
+const createWorkspaceAttributesSchema = schema.object({
+  name: schema.string(),
+  ...workspaceOptionalAttributesSchema,
+});
+
+const updateWorkspaceAttributesSchema = schema.object({
+  name: schema.maybe(schema.string()),
+  ...workspaceOptionalAttributesSchema,
 });
 
 export function registerRoutes({
@@ -117,7 +126,7 @@ export function registerRoutes({
       path: `${WORKSPACES_API_BASE_URL}`,
       validate: {
         body: schema.object({
-          attributes: workspaceAttributesSchema,
+          attributes: createWorkspaceAttributesSchema,
           permissions: schema.maybe(workspacePermissions),
         }),
       },
@@ -163,7 +172,7 @@ export function registerRoutes({
           id: schema.string(),
         }),
         body: schema.object({
-          attributes: workspaceAttributesSchema,
+          attributes: updateWorkspaceAttributesSchema,
           permissions: schema.maybe(workspacePermissions),
         }),
       },
diff --git a/src/plugins/workspace/server/types.ts b/src/plugins/workspace/server/types.ts
index 2973ea4dbc31..10a7649c87da 100644
--- a/src/plugins/workspace/server/types.ts
+++ b/src/plugins/workspace/server/types.ts
@@ -95,7 +95,7 @@ export interface IWorkspaceClientImpl {
   update(
     requestDetail: IRequestDetail,
     id: string,
-    payload: Omit<WorkspaceAttributeWithPermission, 'id'>
+    payload: Partial<Omit<WorkspaceAttributeWithPermission, 'id'>>
   ): Promise<IResponse<boolean>>;
   /**
    * Delete a given workspace
diff --git a/src/plugins/workspace/server/workspace_client.ts b/src/plugins/workspace/server/workspace_client.ts
index c86c9e9a67e1..72609519d2f7 100644
--- a/src/plugins/workspace/server/workspace_client.ts
+++ b/src/plugins/workspace/server/workspace_client.ts
@@ -67,10 +67,11 @@ export class WorkspaceClient implements IWorkspaceClientImpl {
   }
   private getFlattenedResultWithSavedObject(
     savedObject: SavedObject<WorkspaceAttribute>
-  ): WorkspaceAttribute {
+  ): WorkspaceAttributeWithPermission {
     return {
       ...savedObject.attributes,
       id: savedObject.id,
+      permissions: savedObject.permissions,
     };
   }
   private formatError(error: Error | any): string {
@@ -172,7 +173,7 @@ export class WorkspaceClient implements IWorkspaceClientImpl {
   public async update(
     requestDetail: IRequestDetail,
     id: string,
-    payload: Omit<WorkspaceAttributeWithPermission, 'id'>
+    payload: Partial<Omit<WorkspaceAttributeWithPermission, 'id'>>
   ): Promise<IResponse<boolean>> {
     const { permissions, ...attributes } = payload;
     try {
@@ -191,12 +192,16 @@ export class WorkspaceClient implements IWorkspaceClientImpl {
           throw new Error(DUPLICATE_WORKSPACE_NAME_ERROR);
         }
       }
-      await client.create<Omit<WorkspaceAttribute, 'id'>>(WORKSPACE_TYPE, attributes, {
-        id,
-        permissions,
-        overwrite: true,
-        version: workspaceInDB.version,
-      });
+      await client.create<Omit<WorkspaceAttribute, 'id'>>(
+        WORKSPACE_TYPE,
+        { ...workspaceInDB.attributes, ...attributes },
+        {
+          id,
+          permissions,
+          overwrite: true,
+          version: workspaceInDB.version,
+        }
+      );
       return {
         success: true,
         result: true,