Refactor saved object management plugin to use datasourceManagement ui API to get DataSourceSelector

changelogs/fragments/6544.yml

@@ -0,0 +1,2 @@
+refactor:
+- Refactor saved object management plugin to use datasourceManagement ui API to get DataSourceSelector ([#6544](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6544))

src/plugins/saved_objects_management/opensearch_dashboards.json

@@ -11,8 +11,9 @@
     "home",
     "visBuilder",
     "visAugmenter",
-    "dataSource"
+    "dataSource",
+    "dataSourceManagement"
   ],
   "extraPublicDirs": ["public/lib"],
-  "requiredBundles": ["opensearchDashboardsReact", "home", "dataSourceManagement"]
+  "requiredBundles": ["opensearchDashboardsReact", "home"]
 }

src/plugins/saved_objects_management/public/management_section/mount_section.tsx

@@ -35,6 +35,7 @@ import { I18nProvider } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { CoreSetup } from 'src/core/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import { ManagementAppMountParams } from '../../../management/public';
 import { StartDependencies, SavedObjectsManagementPluginStart } from '../plugin';
 import { ISavedObjectsManagementServiceRegistry } from '../services';
@@ -45,7 +46,7 @@ interface MountParams {
   serviceRegistry: ISavedObjectsManagementServiceRegistry;
   mountParams: ManagementAppMountParams;
   dataSourceEnabled: boolean;
-  hideLocalCluster: boolean;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
 let allowedObjectTypes: string[] | undefined;
@@ -61,7 +62,7 @@ export const mountManagementSection = async ({
   mountParams,
   serviceRegistry,
   dataSourceEnabled,
-  hideLocalCluster,
+  dataSourceManagement,
 }: MountParams) => {
   const [coreStart, { data, uiActions }, pluginStart] = await core.getStartServices();
   const { element, history, setBreadcrumbs } = mountParams;
@@ -113,7 +114,7 @@ export const mountManagementSection = async ({
                   allowedTypes={allowedObjectTypes}
                   setBreadcrumbs={setBreadcrumbs}
                   dataSourceEnabled={dataSourceEnabled}
-                  hideLocalCluster={hideLocalCluster}
+                  dataSourceManagement={dataSourceManagement}
                 />
               </Suspense>
             </RedirectToHomeIfUnauthorized>

src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.test.tsx

@@ -55,6 +55,12 @@ const legacyMockFile = ({
   path: '/home/foo.json',
 } as unknown) as File;
 
+const dataSourceManagementMock = {
+  ui: {
+    DataSourceSelector: () => <div>Mock DataSourceSelector</div>,
+  },
+};
+
 describe('Flyout', () => {
   let defaultProps: FlyoutProps;
 
@@ -99,27 +105,11 @@ describe('Flyout', () => {
     expect(component).toMatchSnapshot();
   });
 
-  it('should render cluster selector and import options when local cluster option is not hidden', async () => {
-    const component = shallowRender({
-      ...defaultProps,
-      dataSourceEnabled: true,
-      hideLocalCluster: false,
-      notifications: notificationServiceMock.createStartContract(),
-    });
-
-    // Ensure all promises resolve
-    await new Promise((resolve) => process.nextTick(resolve));
-    // Ensure the state changes are reflected
-    component.update();
-
-    expect(component).toMatchSnapshot();
-  });
-
-  it('should render cluster selector and import options when local cluster option is hidden', async () => {
+  it('should render cluster selector and import options when datasource is enabled', async () => {
     const component = shallowRender({
       ...defaultProps,
       dataSourceEnabled: true,
-      hideLocalCluster: true,
+      dataSourceManagement: dataSourceManagementMock,
       notifications: notificationServiceMock.createStartContract(),
     });
 

src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx

@@ -54,8 +54,13 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
-import { OverlayStart, HttpStart } from 'src/core/public';
-import { DataSourceSelector } from '../../../../../data_source_management/public';
+import {
+  OverlayStart,
+  HttpStart,
+  NotificationsStart,
+  SavedObjectsClientContract,
+} from 'src/core/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import {
   IndexPatternsContract,
   IIndexPattern,
@@ -80,6 +85,7 @@ import { FailedImportConflict, RetryDecision } from '../../../lib/resolve_import
 import { OverwriteModal } from './overwrite_modal';
 import { ImportModeControl, ImportMode } from './import_mode_control';
 import { ImportSummary } from './import_summary';
+
 const CREATE_NEW_COPIES_DEFAULT = true;
 const OVERWRITE_ALL_DEFAULT = true;
 
@@ -94,9 +100,9 @@ export interface FlyoutProps {
   http: HttpStart;
   search: DataPublicPluginStart['search'];
   dataSourceEnabled: boolean;
-  hideLocalCluster: boolean;
   savedObjects: SavedObjectsClientContract;
   notifications: NotificationsStart;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
 export interface FlyoutState {
@@ -811,6 +817,7 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
   }
 
   renderImportControlForDataSource(importMode: ImportMode, isLegacyFile: boolean) {
+    const DataSourceSelector = this.props.dataSourceManagement!.ui.DataSourceSelector;
     return (
       <div className="savedObjectImportControlForDataSource">
         <EuiSpacer />
@@ -828,8 +835,8 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
             notifications={this.props.notifications.toasts}
             onSelectedDataSource={this.onSelectedDataSourceChange}
             disabled={!this.props.dataSourceEnabled}
-            hideLocalCluster={this.props.hideLocalCluster}
             fullWidth={true}
+            isClearable={false}
           />
         </EuiFormFieldset>
         <EuiSpacer />
@@ -855,7 +862,8 @@ export class Flyout extends Component<FlyoutProps, FlyoutState> {
     let confirmButton;
 
     let importButtonDisabled = false;
-    if (this.props.dataSourceEnabled && this.props.hideLocalCluster && !selectedDataSourceId) {
+    // If a data source is enabled, the import button should be disabled when there's no selected data source
+    if (this.props.dataSourceEnabled && selectedDataSourceId === undefined) {
       importButtonDisabled = true;
     }
 

src/plugins/saved_objects_management/public/management_section/objects_table/saved_objects_table.tsx

@@ -58,6 +58,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import {
   SavedObjectsClientContract,
   SavedObjectsFindOptions,
@@ -121,7 +122,7 @@ export interface SavedObjectsTableProps {
   canGoInApp: (obj: SavedObjectWithMetadata) => boolean;
   dateFormat: string;
   dataSourceEnabled: boolean;
-  hideLocalCluster: boolean;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
 export interface SavedObjectsTableState {
@@ -650,9 +651,9 @@ export class SavedObjectsTable extends Component<SavedObjectsTableProps, SavedOb
         overlays={this.props.overlays}
         search={this.props.search}
         dataSourceEnabled={this.props.dataSourceEnabled}
-        hideLocalCluster={this.props.hideLocalCluster}
         savedObjects={this.props.savedObjectsClient}
         notifications={this.props.notifications}
+        dataSourceManagement={this.props.dataSourceManagement}
       />
     );
   }