[MD]Fix data source link to point to correct page, and use in page re…

…direct instead of reloading (opensearch-project#6604)

Signed-off-by: Zhongnan Su <szhongna@amazon.com>

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

@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { mount } from 'enzyme';
+import { EuiBadge, EuiLink } from '@elastic/eui';
+import { DataSourceColumn } from './data_source_column';
+import { DataSourceTableItem } from '../../types';
+import * as utils from '../utils';
+import React from 'react';
+import { DSM_APP_ID } from '../../plugin';
+
+describe('DataSourceColumn', () => {
+  let dataSourceColumn: DataSourceColumn;
+  let savedObjectPromise: Promise<any>;
+
+  beforeEach(() => {
+    savedObjectPromise = Promise.resolve({ client: {} });
+    dataSourceColumn = new DataSourceColumn(savedObjectPromise);
+  });
+
+  it('should render null when referenceId is not provided', () => {
+    const euiColumn = dataSourceColumn.euiColumn.render('');
+    expect(euiColumn).toBeNull();
+  });
+
+  it('should render "Deleted" badge when data source is not found', () => {
+    dataSourceColumn.data = new Map<string, DataSourceTableItem>();
+    const wrapper = mount(<>{dataSourceColumn.euiColumn.render('1')}</>);
+    expect(wrapper.find(EuiBadge).text()).toBe('Deleted');
+  });
+
+  it('should render EuiLink with correct title and navigate to the correct path', () => {
+    const dataSources = [
+      { id: '1', title: 'DataSource 1' },
+      { id: '2', title: 'DataSource 2' },
+    ];
+    dataSourceColumn.data = new Map<string, DataSourceTableItem>(
+      dataSources.map((dataSource) => [dataSource.id, dataSource])
+    );
+    const navigateToAppMock = jest.fn();
+    spyOn(utils, 'getApplication').and.returnValue({ navigateToApp: navigateToAppMock });
+    const wrapper = mount(<>{dataSourceColumn.euiColumn.render('1')}</>);
+    expect(wrapper.find(EuiLink).text()).toBe('DataSource 1');
+    wrapper.find(EuiLink).simulate('click');
+
+    expect(navigateToAppMock).toHaveBeenCalledWith('management', {
+      path: `opensearch-dashboards/${DSM_APP_ID}/1`,
+    });
+  });
+
+  it('should load data sources and set the data property', async () => {
+    const dataSources = [
+      { id: '1', title: 'DataSource 1' },
+      { id: '2', title: 'DataSource 2' },
+    ];
+    const getDataSourcesMock = jest.fn(() => Promise.resolve(dataSources));
+
+    jest.spyOn(utils, 'getDataSources').mockImplementation(getDataSourcesMock);
+
+    await dataSourceColumn.loadData();
+    expect(dataSourceColumn.data).toEqual(
+      new Map<string, DataSourceTableItem>(
+        dataSources.map((dataSource) => [dataSource.id, dataSource])
+      )
+    );
+  });
+});

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

@@ -4,18 +4,15 @@
  */
 
 import { i18n } from '@osd/i18n';
-import { HttpStart, SavedObjectsStart } from 'opensearch-dashboards/public';
+import { SavedObjectsStart } from 'opensearch-dashboards/public';
 import { EuiBadge, EuiLink } from '@elastic/eui';
 import React from 'react';
-import {
-  IndexPatternTableColumn,
-  IndexPatternTableRecord,
-} from '../../../../index_pattern_management/public';
-import { getDataSources } from '../utils';
+import { IndexPatternTableColumn } from '../../../../index_pattern_management/public';
+import { getApplication, getDataSources } from '../utils';
 import { DataSourceTableItem } from '../../types';
+import { DSM_APP_ID } from '../../plugin';
 
-type DataSourceColumnItem = DataSourceTableItem & { relativeUrl: string };
-type DataSourceMap = Map<string, DataSourceColumnItem> | undefined;
+type DataSourceMap = Map<string, DataSourceTableItem> | undefined;
 
 export class DataSourceColumn implements IndexPatternTableColumn<DataSourceMap> {
   public readonly id: string = 'data_source';
@@ -26,47 +23,44 @@ export class DataSourceColumn implements IndexPatternTableColumn<DataSourceMap>
     name: i18n.translate('dataSource.management.dataSourceColumn', {
       defaultMessage: 'Data Source Connection',
     }),
-    render: (referenceId: string, index: IndexPatternTableRecord) => {
+    render: (referenceId: string) => {
       if (!referenceId) {
         return null;
       }
 
       const dataSource = this.data?.get(referenceId);
+
       if (!dataSource) {
         // Index pattern has the referenceId but data source not found.
         return <EuiBadge color="danger">Deleted</EuiBadge>;
       }
 
-      const { title, relativeUrl } = dataSource;
-      return <EuiLink href={relativeUrl}>{title}</EuiLink>;
+      const { title, id } = dataSource;
+
+      return (
+        <EuiLink
+          onClick={() =>
+            getApplication().navigateToApp('management', {
+              path: `opensearch-dashboards/${DSM_APP_ID}/${encodeURIComponent(id)}`,
+            })
+          }
+        >
+          {title}
+        </EuiLink>
+      );
     },
   };
 
-  constructor(
-    private readonly savedObjectPromise: Promise<SavedObjectsStart>,
-    private readonly httpPromise: Promise<HttpStart>
-  ) {}
+  constructor(private readonly savedObjectPromise: Promise<SavedObjectsStart>) {}
 
   public loadData = async () => {
     const savedObject = await this.savedObjectPromise;
-    const { basePath } = await this.httpPromise;
 
     return getDataSources(savedObject.client).then((dataSources?: DataSourceTableItem[]) => {
-      this.data = dataSources
-        ?.map((dataSource) => {
-          return {
-            ...dataSource,
-            relativeUrl: basePath.prepend(
-              `/app/management/opensearch-dashboards/dataSources/${encodeURIComponent(
-                dataSource.id
-              )}`
-            ),
-          };
-        })
-        ?.reduce(
-          (map, dataSource) => map.set(dataSource.id, dataSource),
-          new Map<string, DataSourceColumnItem>()
-        );
+      this.data = dataSources?.reduce(
+        (map, dataSource) => map.set(dataSource.id, dataSource),
+        new Map<string, DataSourceTableItem>()
+      );
       return this.data;
     });
   };

src/plugins/data_source_management/public/plugin.ts

@@ -41,7 +41,7 @@ export interface DataSourceManagementPluginStart {
   getAuthenticationMethodRegistry: () => IAuthenticationMethodRegistry;
 }
 
-export const DSM_APP_ID = 'dataSourceManagement';
+export const DSM_APP_ID = 'dataSources';
 
 export class DataSourceManagementPlugin
   implements
@@ -67,8 +67,8 @@ export class DataSourceManagementPlugin
     const savedObjectPromise = core
       .getStartServices()
       .then(([coreStart]) => coreStart.savedObjects);
-    const httpPromise = core.getStartServices().then(([coreStart]) => coreStart.http);
-    const column = new DataSourceColumn(savedObjectPromise, httpPromise);
+
+    const column = new DataSourceColumn(savedObjectPromise);
     indexPatternManagement.columns.register(column);
 
     opensearchDashboardsSection.registerApp({