Add datasource picker to import saved object flyout when multiple data source is enabled

CHANGELOG.md

@@ -33,6 +33,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Custom Branding] Relative URL should be allowed for logos ([#5572](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5572))
 - [Discover] Enhanced the data source selector with added sorting functionality ([#5609](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5609))
 - [Multiple Datasource] Add datasource picker component and use it in devtools and tutorial page when multiple datasource is enabled ([#5756](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5756))
+- [Multiple Datasource] Add datasource picker to import saved object flyout when multiple data source is enabled ([#5781](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5781))
 
 ### 🐛 Bug Fixes
 

src/plugins/data_source_management/opensearch_dashboards.json

@@ -5,6 +5,6 @@
   "ui": true,
   "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
-  "requiredBundles": ["opensearchDashboardsReact"],
-  "extraPublicDirs": ["public/components/utils", "public/components/data_source_picker/data_source_picker"]
+  "requiredBundles": ["opensearchDashboardsReact", "dataSource"],
+  "extraPublicDirs": ["public/components/utils"]
 }

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ShallowWrapper, shallow } from 'enzyme';
+import { ClusterSelector } from './cluster_selector';
+import { SavedObjectsClientContract } from '../../../../../core/public';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+import React from 'react';
+
+describe('ClusterSelector', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+
+  beforeEach(() => {
+    client = {
+      find: jest.fn().mockResolvedValue([]),
+    } as any;
+    component = shallow(
+      <ClusterSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        fullWidth={false}
+      />
+    );
+  });
+
+  it('should render normally', () => {
+    expect(component).toMatchSnapshot();
+    expect(client.find).toBeCalledWith({
+      fields: ['id', 'description', 'title'],
+      perPage: 10000,
+      type: 'data-source',
+    });
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+});

src/plugins/data_source_management/public/components/data_source_picker/data_source_picker.js → src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -4,23 +4,44 @@
  */
 
 import React from 'react';
-import { getDataSources } from '../utils';
 import { i18n } from '@osd/i18n';
 import { EuiComboBox } from '@elastic/eui';
+import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
+import { getDataSources } from '../utils';
 
-export const LocalCluster = {
+export const LocalCluster: ClusterOption = {
   label: i18n.translate('dataSource.localCluster', {
     defaultMessage: 'Local cluster',
   }),
   id: '',
 };
 
-export class DataSourcePicker extends React.Component {
-  constructor(props) {
+interface ClusterSelectorProps {
+  savedObjectsClient: SavedObjectsClientContract;
+  notifications: ToastsStart;
+  onSelectedDataSource: (clusterOption: ClusterOption[]) => void;
+  disabled: boolean;
+  fullWidth: boolean;
+}
+
+interface ClusterSelectorState {
+  clusterOptions: ClusterOption[];
+  selectedOption: ClusterOption[];
+}
+
+export interface ClusterOption {
+  label: string;
+  id: string;
+}
+
+export class ClusterSelector extends React.Component<ClusterSelectorProps, ClusterSelectorState> {
+  private _isMounted: boolean = false;
+
+  constructor(props: ClusterSelectorProps) {
     super(props);
 
     this.state = {
-      dataSources: [],
+      clusterOptions: [],
       selectedOption: [LocalCluster],
     };
   }
@@ -34,17 +55,17 @@
     getDataSources(this.props.savedObjectsClient)
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          const dataSourceOptions = fetchedDataSources.map((dataSource) => ({
+          const clusterOptions = fetchedDataSources.map((dataSource) => ({
             id: dataSource.id,
             label: dataSource.title,
           }));
 
-          dataSourceOptions.push(LocalCluster);
+          clusterOptions.push(LocalCluster);
 
           if (!this._isMounted) return;
           this.setState({
             ...this.state,
-            dataSources: dataSourceOptions,
+            clusterOptions,
           });
         }
       })
@@ -68,21 +89,23 @@
   render() {
     return (
       <EuiComboBox
-        aria-label={i18n.translate('dataSourceComboBoxAriaLabel', {
+        aria-label={i18n.translate('clusterSelectorComboBoxAriaLabel', {
           defaultMessage: 'Select a data source',
         })}
-        placeholder={i18n.translate('dataSourceComboBoxPlaceholder', {
+        placeholder={i18n.translate('clusterSelectorComboBoxPlaceholder', {
           defaultMessage: 'Select a data source',
         })}
         singleSelection={{ asPlainText: true }}
-        options={this.state.dataSources}
+        options={this.state.clusterOptions}
         selectedOptions={this.state.selectedOption}
         onChange={(e) => this.onChange(e)}
-        prepend={i18n.translate('dataSourceComboBoxPrepend', {
+        prepend={i18n.translate('clusterSelectorComboBoxPrepend', {
           defaultMessage: 'Data source',
         })}
         compressed
         isDisabled={this.props.disabled}
+        fullWidth={this.props.fullWidth || false}
+        data-test-subj={'clusterSelectorComboBox'}
       />
     );
   }

src/plugins/data_source_management/public/components/cluster_selector/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ClusterSelector } from './cluster_selector';

src/plugins/data_source_management/public/index.ts

@@ -11,3 +11,4 @@ export function plugin() {
   return new DataSourceManagementPlugin();
 }
 export { DataSourceManagementPluginStart } from './types';
+export { ClusterSelector } from './components/cluster_selector';

src/plugins/dev_tools/public/application.tsx

@@ -44,8 +44,7 @@ import {
   ScopedHistory,
 } from 'src/core/public';
 
-// eslint-disable-next-line @osd/eslint/no-restricted-paths
-import { DataSourcePicker } from '../../data_source_management/public/components/data_source_picker/data_source_picker';
+import { ClusterSelector } from '../../data_source_management/public';
 import { DevToolApp } from './dev_tool';
 import { DevToolsSetupDependencies } from './plugin';
 import { addHelpMenuToAppChrome } from './utils/util';
@@ -131,12 +130,13 @@ function DevToolsWrapper({
           </EuiToolTip>
         ))}
         {dataSourceEnabled ? (
-          <div className="devAppDataSourcePicker">
-            <DataSourcePicker
+          <div className="devAppClusterSelector">
+            <ClusterSelector
               savedObjectsClient={savedObjects.client}
               notifications={toasts}
               onSelectedDataSource={onChange}
               disabled={!dataSourceEnabled}
+              fullWidth={false}
             />
           </div>
         ) : null}

src/plugins/dev_tools/public/index.scss

@@ -22,7 +22,7 @@
   flex-grow: 1;
 }
 
-.devAppDataSourcePicker {
+.devAppClusterSelector {
   margin: 7px 8px 0 0;
   min-width: 400px;
 }

src/plugins/home/public/application/components/tutorial_directory.js

@@ -34,8 +34,6 @@ import PropTypes from 'prop-types';
 import { Synopsis } from './synopsis';
 import { SampleDataSetCards } from './sample_data_set_cards';
 import { getServices } from '../opensearch_dashboards_services';
-// eslint-disable-next-line @osd/eslint/no-restricted-paths
-import { DataSourcePicker } from '../../../../data_source_management/public/components/data_source_picker/data_source_picker';
 
 import {
   EuiPage,
@@ -53,6 +51,7 @@ import {
 import { getTutorials } from '../load_tutorials';
 import { injectI18n, FormattedMessage } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
+import { ClusterSelector } from '../../../../data_source_management/public';
 
 const ALL_TAB_ID = 'all';
 const SAMPLE_DATA_TAB_ID = 'sampleData';
@@ -228,8 +227,8 @@ class TutorialDirectoryUi extends React.Component {
     const { isDataSourceEnabled } = this.state;
 
     return isDataSourceEnabled ? (
-      <div className="sampledataSourcePicker">
-        <DataSourcePicker
+      <div className="sampleDataClusterSelector">
+        <ClusterSelector
           savedObjectsClient={getServices().savedObjectsClient}
           notifications={getServices().toastNotifications}
           onSelectedDataSource={this.onSelectedDataSourceChange}

src/plugins/saved_objects_management/opensearch_dashboards.json

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

src/plugins/saved_objects_management/public/lib/import_file.ts

@@ -40,11 +40,15 @@
 export async function importFile(
   http: HttpStart,
   file: File,
-  { createNewCopies, overwrite }: ImportMode
+  { createNewCopies, overwrite }: ImportMode,
+  selectedDataSourceId?: string
 ) {
   const formData = new FormData();
   formData.append('file', file);
   const query = createNewCopies ? { createNewCopies } : { overwrite };
+  if (selectedDataSourceId) {
+    query.dataSourceId = selectedDataSourceId;
+  }
   return await http.post<ImportResponse>('/api/saved_objects/_import', {
     body: formData,
     headers: {

src/plugins/saved_objects_management/public/lib/resolve_import_errors.ts

@@ -89,12 +89,16 @@
   http: HttpStart,
   file: File,
   retries: any,
-  createNewCopies: boolean
+  createNewCopies: boolean,
+  selectedDataSourceId?: string
 ): Promise<SavedObjectsImportResponse> {
   const formData = new FormData();
   formData.append('file', file);
   formData.append('retries', JSON.stringify(retries));
   const query = createNewCopies ? { createNewCopies } : {};
+  if (selectedDataSourceId) {
+    query.dataSourceId = selectedDataSourceId;
+  }
   return http.post<any>('/api/saved_objects/_resolve_import_errors', {
     headers: {
       // Important to be undefined, it forces proper headers to be set for FormData
@@ -167,6 +171,7 @@
   http,
   getConflictResolutions,
   state,
+  selectedDataSourceId,
 }: {
   http: HttpStart;
   getConflictResolutions: (
@@ -180,6 +185,7 @@
     file?: File;
     importMode: { createNewCopies: boolean; overwrite: boolean };
   };
+  selectedDataSourceId: string;
 }) {
   const retryDecisionCache = new Map<string, RetryDecision>();
   const replaceReferencesCache = new Map<string, Reference[]>();
@@ -264,7 +270,13 @@
     }
 
     // Call API
-    const response = await callResolveImportErrorsApi(http, file!, retries, createNewCopies);
+    const response = await callResolveImportErrorsApi(
+      http,
+      file!,
+      retries,
+      createNewCopies,
+      selectedDataSourceId
+    );
     importCount = response.successCount; // reset the success count since we retry all successful results each time
     failedImports = [];
     for (const { error, ...obj } of response.errors || []) {

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

@@ -44,6 +44,7 @@ interface MountParams {
   core: CoreSetup<StartDependencies, SavedObjectsManagementPluginStart>;
   serviceRegistry: ISavedObjectsManagementServiceRegistry;
   mountParams: ManagementAppMountParams;
+  dataSourceEnabled: boolean;
 }
 
 let allowedObjectTypes: string[] | undefined;
@@ -58,6 +59,7 @@ export const mountManagementSection = async ({
   core,
   mountParams,
   serviceRegistry,
+  dataSourceEnabled,
 }: MountParams) => {
   const [coreStart, { data, uiActions }, pluginStart] = await core.getStartServices();
   const { element, history, setBreadcrumbs } = mountParams;
@@ -108,6 +110,7 @@ export const mountManagementSection = async ({
                   namespaceRegistry={pluginStart.namespaces}
                   allowedTypes={allowedObjectTypes}
                   setBreadcrumbs={setBreadcrumbs}
+                  dataSourceEnabled={dataSourceEnabled}
                 />
               </Suspense>
             </RedirectToHomeIfUnauthorized>