diff --git a/changelogs/fragments/6477.yml b/changelogs/fragments/6477.yml
new file mode 100644
index 000000000000..fe9c055906f4
--- /dev/null
+++ b/changelogs/fragments/6477.yml
@@ -0,0 +1,2 @@
+refactor:
+- Refactor dev tool to use dataSourceManagement.ui API to get DataSourceSelector ([#6477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6477))
\ No newline at end of file
diff --git a/src/core/public/index.ts b/src/core/public/index.ts
index c82457ef2184..cc51c7215964 100644
--- a/src/core/public/index.ts
+++ b/src/core/public/index.ts
@@ -94,7 +94,7 @@ export type { Logos } from '../common';
export { PackageInfo, EnvironmentMode } from '../server/types';
/** @interal */
export { CoreContext, CoreSystem } from './core_system';
-export { DEFAULT_APP_CATEGORIES, WORKSPACE_TYPE } from '../utils';
+export { DEFAULT_APP_CATEGORIES, WORKSPACE_TYPE, cleanWorkspaceId } from '../utils';
export {
AppCategory,
UiSettingsParams,
@@ -358,3 +358,5 @@ export {
export { __osdBootstrap__ } from './osd_bootstrap';
export { WorkspacesStart, WorkspacesSetup, WorkspacesService, WorkspaceObject } from './workspace';
+
+export { debounce } from './utils';
diff --git a/src/core/public/utils/debounce.test.ts b/src/core/public/utils/debounce.test.ts
new file mode 100644
index 000000000000..7722a26bd0e5
--- /dev/null
+++ b/src/core/public/utils/debounce.test.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { debounce } from './debounce';
+
+describe('debounce', () => {
+ let fn: Function;
+ beforeEach(() => {
+ fn = jest.fn();
+ jest.useFakeTimers();
+ });
+ afterEach(() => {
+ jest.clearAllTimers();
+ });
+
+ test('it should call the debounced fn once at the end of the quiet time', () => {
+ const debounced = debounce(fn, 1000);
+
+ for (let i = 0; i < 100; i++) {
+ debounced(i);
+ }
+
+ jest.advanceTimersByTime(1001);
+ expect(fn).toBeCalledTimes(1);
+ expect(fn).toBeCalledWith(99);
+ });
+
+ test("with a leading invocation, it should call the debounced fn once, if the time doens't pass", () => {
+ const debounced = debounce(fn, 1000, true);
+
+ for (let i = 0; i < 100; i++) {
+ debounced(i);
+ }
+
+ jest.advanceTimersByTime(999);
+
+ expect(fn).toBeCalledTimes(1);
+ expect(fn).toBeCalledWith(0);
+ });
+
+ test('with a leading invocation, it should call the debounced fn twice (at the beginning and at the end)', () => {
+ const debounced = debounce(fn, 1000, true);
+
+ for (let i = 0; i < 100; i++) {
+ debounced(i);
+ }
+
+ jest.advanceTimersByTime(1500);
+
+ expect(fn).toBeCalledTimes(2);
+ expect(fn).toBeCalledWith(0);
+ expect(fn).toBeCalledWith(99);
+ });
+});
diff --git a/src/core/public/utils/debounce.ts b/src/core/public/utils/debounce.ts
new file mode 100644
index 000000000000..95e1a81dcab8
--- /dev/null
+++ b/src/core/public/utils/debounce.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @param func The function to be debounced.
+ * @param delay The time in milliseconds to wait before invoking the function again after the last invocation.
+ * @param leading An optional parameter that, when true, allows the function to be invoked immediately upon the first call.
+
+ */
+export const debounce = (func: Function, delay: number, leading?: boolean) => {
+ let timerId: NodeJS.Timeout;
+
+ return (...args: any) => {
+ if (!timerId && leading) {
+ func(...args);
+ }
+ clearTimeout(timerId);
+
+ timerId = setTimeout(() => func(...args), delay);
+ };
+};
diff --git a/src/core/public/utils/index.ts b/src/core/public/utils/index.ts
index 30055b0ff81c..4c64728feb16 100644
--- a/src/core/public/utils/index.ts
+++ b/src/core/public/utils/index.ts
@@ -38,3 +38,4 @@ export {
getWorkspaceIdFromUrl,
cleanWorkspaceId,
} from '../../utils';
+export { debounce } from './debounce';
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_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 dda3da78363b..c77a49a75831 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
@@ -16,6 +16,7 @@ import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/p
import { getDataSourcesWithFields, handleDataSourceFetchError } from '../utils';
import { SavedObject } from '../../../../../core/public';
import { DataSourceAttributes } from '../../types';
+import { NoDataSource } from '../no_data_source';
import { DataSourceErrorMenu } from '../data_source_error_menu';
import { DataSourceBaseState } from '../data_source_menu/types';
@@ -46,6 +47,7 @@ export class DataSourceAggregatedView extends React.Component<
this.state = {
isPopoverOpen: false,
allDataSourcesIdToTitleMap: new Map(),
+ showEmptyState: false,
showError: false,
};
}
@@ -73,7 +75,6 @@ export class DataSourceAggregatedView extends React.Component<
this.props.dataSourceFilter!(ds)
);
}
-
const allDataSourcesIdToTitleMap = new Map();
filteredDataSources.forEach((ds) => {
@@ -101,6 +102,9 @@ export class DataSourceAggregatedView extends React.Component<
}
render() {
+ if (this.state.showEmptyState) {
+ return ;
+ }
if (this.state.showError) {
return ;
}
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 {
>