Add icon in datasource table page to show the default datasource (ope…

…nsearch-project#6231)

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

CHANGELOG.md

@@ -61,6 +61,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Add import support for Vega when specifying a datasource ([#6123](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6123))
 - [Workspace] Validate if workspace exists when setup inside a workspace ([#6154](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6154))
 - [Workspace] Register a workspace dropdown menu at the top of left nav bar ([#6150](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6150))
+- [Multiple Datasource] Add icon in datasource table page to show the default datasource ([#6231](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6231))
 
 ### 🐛 Bug Fixes
 

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

@@ -19,11 +19,13 @@ const deleteButtonIdentifier = '[data-test-subj="deleteDataSourceConnections"]';
 const tableIdentifier = 'EuiInMemoryTable';
 const confirmModalIdentifier = 'EuiConfirmModal';
 const tableColumnHeaderIdentifier = 'EuiTableHeaderCell';
+const badgeIcon = 'EuiBadge';
 const tableColumnHeaderButtonIdentifier = 'EuiTableHeaderCell .euiTableHeaderButton';
 const emptyStateIdentifier = '[data-test-subj="datasourceTableEmptyState"]';
 
 describe('DataSourceTable', () => {
   const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  const uiSettings = mockedContext.uiSettings;
   let component: ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
   const history = (scopedHistoryMock.create() as unknown) as ScopedHistory;
   describe('should get datasources failed', () => {
@@ -57,6 +59,7 @@ describe('DataSourceTable', () => {
   describe('should get datasources successful', () => {
     beforeEach(async () => {
       spyOn(utils, 'getDataSources').and.returnValue(Promise.resolve(getMappedDataSources));
+      spyOn(uiSettings, 'get').and.returnValue('test');
       await act(async () => {
         component = await mount(
           wrapWithIntl(
@@ -83,13 +86,15 @@ describe('DataSourceTable', () => {
     });
 
     it('should sort datasources based on description', () => {
+      expect(component.find(badgeIcon).exists()).toBe(true);
       expect(component.find(tableIdentifier).exists()).toBe(true);
       act(() => {
         component.find(tableColumnHeaderButtonIdentifier).last().simulate('click');
       });
       component.update();
       // @ts-ignore
       expect(component.find(tableColumnHeaderIdentifier).last().props().isSorted).toBe(true);
+      expect(uiSettings.get).toHaveBeenCalled();
     });
 
     it('should enable delete button when select datasources', () => {

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

@@ -4,6 +4,7 @@
  */
 
 import {
+  EuiBadge,
   EuiButton,
   EuiButtonEmpty,
   EuiConfirmModal,
@@ -50,6 +51,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
     setBreadcrumbs,
     savedObjects,
     notifications: { toasts },
+    uiSettings,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   /* Component state variables */
@@ -147,6 +149,11 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
           <EuiButtonEmpty size="xs" {...reactRouterNavigate(history, `${index.id}`)}>
             {name}
           </EuiButtonEmpty>
+          {index.id === uiSettings.get('defaultDataSource', null) ? (
+            <EuiBadge iconType="starFilled" iconSide="left">
+              Default
+            </EuiBadge>
+          ) : null}
         </>
       ),
       dataType: 'string' as const,