From 219414b4e5590d29ca4a3d304422bd0424ff125b Mon Sep 17 00:00:00 2001
From: "Yuanqi(Ella) Zhu" <zhyuanqi@amazon.com>
Date: Thu, 21 Mar 2024 00:59:18 +0000
Subject: [PATCH] Add icon in datasource table page to show the default
 datasource

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>
---
 CHANGELOG.md                                  |  1 +
 .../data_source_table.test.tsx.snap           | 40 +++++++++++++++++++
 .../data_source_table.test.tsx                |  5 +++
 .../data_source_table/data_source_table.tsx   |  7 ++++
 4 files changed, 53 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0cea2c205910..3b2abfe2c19e 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
index 53e2fac37130..acab011f27a8 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap
@@ -1927,6 +1927,46 @@ exports[`DataSourceTable should get datasources successful should render normall
                                           </EuiButtonContent>
                                         </button>
                                       </EuiButtonEmpty>
+                                      <EuiBadge
+                                        iconSide="left"
+                                        iconType="starFilled"
+                                      >
+                                        <EuiInnerText>
+                                          <span
+                                            className="euiBadge euiBadge--iconLeft"
+                                            style={
+                                              Object {
+                                                "backgroundColor": "#d3dae6",
+                                                "color": "#000",
+                                              }
+                                            }
+                                            title="Default"
+                                          >
+                                            <span
+                                              className="euiBadge__content"
+                                            >
+                                              <span
+                                                className="euiBadge__text"
+                                              >
+                                                Default
+                                              </span>
+                                              <EuiIcon
+                                                className="euiBadge__icon"
+                                                color="inherit"
+                                                size="s"
+                                                type="starFilled"
+                                              >
+                                                <span
+                                                  className="euiBadge__icon"
+                                                  color="inherit"
+                                                  data-euiicon-type="starFilled"
+                                                  size="s"
+                                                />
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiInnerText>
+                                      </EuiBadge>
                                     </div>
                                   </td>
                                 </EuiTableRowCell>
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx
index cdb25c057844..dd33c28b6890 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.test.tsx
+++ b/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,6 +86,7 @@ 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');
@@ -90,6 +94,7 @@ describe('DataSourceTable', () => {
       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', () => {
diff --git a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx b/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
index bbb2ce5f4100..b27f957fe142 100644
--- a/src/plugins/data_source_management/public/components/data_source_table/data_source_table.tsx
+++ b/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,