Add set default datasource

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>

CHANGELOG.md

@@ -117,6 +117,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [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))
+- [Multiple Datasource] Add default functionality for customer to choose default datasource ([#6058](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6058))
 
 ### 🐛 Bug Fixes
 

src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx

@@ -50,9 +50,11 @@ import { extractRegisteredAuthTypeCredentials, getDefaultAuthMethod } from '../.
 export interface EditDataSourceProps {
   existingDataSource: DataSourceAttributes;
   existingDatasourceNamesList: string[];
+  isDefault: boolean;
   handleSubmit: (formValues: DataSourceAttributes) => Promise<void>;
   handleTestConnection: (formValues: DataSourceAttributes) => Promise<void>;
   onDeleteDataSource?: () => Promise<void>;
+  onSetDefaultDataSource: () => Promise<void>;
   displayToastMessage: (info: ToastMessageItem) => void;
 }
 export interface EditDataSourceState {
@@ -400,6 +402,16 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     }
   };
 
+  setDefaultDataSource = async () => {
+    if (this.props.onSetDefaultDataSource) {
+      await this.props.onSetDefaultDataSource();
+    }
+  }
+
+  isDefault =  () => {
+    return this.props.isDefault;
+  }
+
   onClickTestConnection = async () => {
     this.setState({ isLoading: true });
     const isNewCredential = !!(this.state.auth.type !== this.props.existingDataSource.auth.type);
@@ -634,6 +646,8 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         onClickDeleteIcon={this.onClickDeleteDataSource}
         dataSourceName={this.props.existingDataSource.title}
         onClickTestConnection={this.onClickTestConnection}
+        onClickSetDefault={this.setDefaultDataSource}
+        isDefault={this.isDefault()}
       />
     );
   };

src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx

@@ -14,6 +14,7 @@ import {
   EuiButtonIcon,
   EuiConfirmModal,
   EuiButton,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
@@ -25,22 +26,51 @@ export const Header = ({
   isFormValid,
   onClickDeleteIcon,
   onClickTestConnection,
+  onClickSetDefault,
   dataSourceName,
+  isDefault,
 }: {
   showDeleteIcon: boolean;
   isFormValid: boolean;
   onClickDeleteIcon: () => void;
   onClickTestConnection: () => void;
+  onClickSetDefault: () => void;
   dataSourceName: string;
+  isDefault: boolean;
 }) => {
   /* State Variables */
   const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+  const [isDefaultDataSourceState, setIsDefaultDataSourceState] = useState(isDefault);
 
   const changeTitle = useOpenSearchDashboards<DataSourceManagementContext>().services.chrome
     .docTitle.change;
 
   changeTitle(dataSourceName);
 
+  const setDefaultAriaLabel = i18n.translate(
+    'dataSourcesManagement.editDataSource.setDefaultDataSource',
+    {
+      defaultMessage: 'Set as default Data Source.',
+    }
+  );
+
+  const renderDefaultIcon = () => {
+    return (
+      <EuiButtonEmpty
+        onClick={() => {
+          onClickSetDefault();
+          setIsDefaultDataSourceState(!isDefaultDataSourceState);
+        }}
+        disabled={isDefaultDataSourceState}
+        iconType={isDefaultDataSourceState ? 'starFilled' : 'starEmpty'}
+        aria-label={setDefaultAriaLabel}
+        data-test-subj="datasource-edit-setDefaultDataSource"
+      >
+        {isDefaultDataSourceState ? 'Default' : 'Set as default'}
+      </EuiButtonEmpty>
+    );
+  };
+
   const renderDeleteButton = () => {
     return (
       <>
@@ -144,6 +174,8 @@ export const Header = ({
       {/* Right side buttons */}
       <EuiFlexItem grow={false}>
         <EuiFlexGroup alignItems="baseline" gutterSize="m" responsive={false}>
+          {/* Test defaultn button */}
+          <EuiFlexItem grow={false}>{renderDefaultIcon()}</EuiFlexItem>
           {/* Test connection button */}
           <EuiFlexItem grow={false}>{renderTestConnectionButton()}</EuiFlexItem>
           {/* Delete icon button */}

src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx

@@ -38,6 +38,7 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
 ) => {
   /* Initialization */
   const {
+    uiSettings,
     savedObjects,
     setBreadcrumbs,
     http,
@@ -83,6 +84,12 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
     }
   };
 
+  const handleSetDefault = async () => {
+    await uiSettings.set('defaultDataSource', dataSourceID);
+  }
+
+  const isDefaultDataSource = uiSettings.get('defaultDataSource', null) === dataSourceID;
+
   /* Handle submit - create data source*/
   const handleSubmit = async (attributes: DataSourceAttributes) => {
     await updateDataSourceById(savedObjects.client, dataSourceID, attributes);
@@ -128,7 +135,9 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
           <EditDataSourceForm
             existingDataSource={dataSource}
             existingDatasourceNamesList={existingDatasourceNamesList}
+            isDefault={isDefaultDataSource}
             onDeleteDataSource={handleDelete}
+            onSetDefaultDataSource={handleSetDefault}
             handleSubmit={handleSubmit}
             displayToastMessage={handleDisplayToastMessage}
             handleTestConnection={handleTestConnection}