[workspace] fix: manage link does not do anything (#9059)

* fix issue

Signed-off-by: Qxisylolo <[email protected]>

* fix tests

Signed-off-by: Qxisylolo <[email protected]>

* Changeset file for PR #9059 created/updated

* resolve comments

Signed-off-by: Qxisylolo <[email protected]>

---------

Signed-off-by: Qxisylolo <[email protected]>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
(cherry picked from commit 3e69fe0)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

changelogs/fragments/9059.yml

@@ -0,0 +1,2 @@
+fix:
+- Inactive manage link in the data source selector when opening DevTools ([#9059](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/9059))

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

@@ -19,7 +19,14 @@ import {
 import { DataSourceSelectable } from '../data_source_selectable';
 
 export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement | null {
-  const { componentType, componentConfig, uiSettings, hideLocalCluster, application } = props;
+  const {
+    componentType,
+    componentConfig,
+    uiSettings,
+    hideLocalCluster,
+    application,
+    onManageDataSource,
+  } = props;
 
   function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null {
     const {
@@ -74,6 +81,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
     } = config;
     return (
       <DataSourceSelectable
+        onManageDataSource={onManageDataSource}
         savedObjectsClient={savedObjects!}
         notifications={notifications!.toasts}
         onSelectedDataSources={onSelectedDataSources}

src/plugins/data_source_management/public/components/data_source_menu/types.ts

@@ -40,6 +40,7 @@ export interface DataSourceMenuProps<T = any> {
   uiSettings?: IUiSettingsClient;
   application?: ApplicationStart;
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
+  onManageDataSource: () => void;
 }
 
 export const DataSourceComponentType = {
@@ -81,6 +82,7 @@ export interface DataSourceSelectableConfig extends DataSourceBaseConfig {
   notifications: NotificationsStart;
   activeOption?: DataSourceOption[];
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
+  onManageDataSource: () => void;
 }
 
 export interface DataSourceMultiSelectableConfig extends DataSourceBaseConfig {

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

@@ -52,6 +52,7 @@ interface DataSourceSelectableProps {
   selectedOption?: DataSourceOption[];
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
   uiSettings?: IUiSettingsClient;
+  onManageDataSource: () => void;
 }
 
 interface DataSourceSelectableState extends DataSourceBaseState {
@@ -293,6 +294,7 @@ export class DataSourceSelectable extends React.Component<
         data-test-subj={'dataSourceSelectableContextMenuPopover'}
       >
         <DataSourceDropDownHeader
+          onManageDataSource={this.props.onManageDataSource}
           totalDataSourceCount={this.state.dataSourceOptions.length}
           application={this.props.application}
         />

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

@@ -47,21 +47,23 @@ describe('DataSourceDropDownHeader', () => {
     expect(wrapper.text()).toContain(`${activeDataSourceCount}/${totalDataSourceCount}`);
   });
 
-  it('should call application.navigateToApp when the "Manage" link is clicked', () => {
+  it('should call application.navigateToApp and close the modal mask when the "Manage" link is clicked', () => {
     const totalDataSourceCount = 5;
     const applicationMock = coreMock.createStart().application;
     const navigateToAppMock = applicationMock.navigateToApp;
-
+    const onManageDataSourceMock = jest.fn();
     const wrapper = mount(
       <DataSourceDropDownHeader
         totalDataSourceCount={totalDataSourceCount}
         application={applicationMock}
+        onManageDataSource={onManageDataSourceMock}
       />
     );
 
     wrapper.find('EuiLink').simulate('click');
     expect(navigateToAppMock).toHaveBeenCalledWith('management', {
       path: `opensearch-dashboards/${DSM_APP_ID}`,
     });
+    expect(onManageDataSourceMock).toHaveBeenCalled();
   });
 });

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

@@ -13,12 +13,14 @@ interface DataSourceOptionItemProps {
   totalDataSourceCount: number;
   activeDataSourceCount?: number;
   application?: ApplicationStart;
+  onManageDataSource: () => void;
 }
 
 export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
   activeDataSourceCount,
   totalDataSourceCount,
   application,
+  onManageDataSource,
 }) => {
   const dataSourceCounterPrefix = totalDataSourceCount === 1 ? 'DATA SOURCE' : 'DATA SOURCES';
   const dataSourceCounter =
@@ -35,11 +37,12 @@ export const DataSourceDropDownHeader: React.FC<DataSourceOptionItemProps> = ({
         <div tabIndex={0} className="dataSourceDropDownHeaderInvisibleFocusable" />
         <EuiFlexItem grow={false}>
           <EuiLink
-            onClick={() =>
+            onClick={() => {
+              onManageDataSource();
               application?.navigateToApp('management', {
                 path: `opensearch-dashboards/${DSM_APP_ID}`,
-              })
-            }
+              });
+            }}
           >
             Manage
           </EuiLink>

src/plugins/dev_tools/public/application.tsx

@@ -59,6 +59,7 @@ interface DevToolsWrapperProps {
   dataSourceManagement?: DataSourceManagementPluginSetup;
   useUpdatedUX?: boolean;
   setMenuMountPoint?: (menuMount: MountPoint | undefined) => void;
+  onManageDataSource: () => void;
 }
 
 interface MountedDevToolDescriptor {
@@ -68,6 +69,7 @@ interface MountedDevToolDescriptor {
 }
 
 function DevToolsWrapper({
+  onManageDataSource,
   devTools,
   activeDevTool,
   updateRoute,
@@ -125,6 +127,7 @@ function DevToolsWrapper({
       const DataSourceMenu = dataSourceManagement!.ui.getDataSourceMenu();
       return (
         <DataSourceMenu
+          onManageDataSource={onManageDataSource}
           setMenuMountPoint={setMenuMountPoint}
           componentType={'DataSourceSelectable'}
           componentConfig={{
@@ -241,6 +244,7 @@ function setBreadcrumbs(chrome: ChromeStart) {
 
 export function MainApp(
   props: {
+    onManageDataSource: () => void;
     devTools: readonly DevToolApp[];
     RouterComponent?: React.ComponentClass;
     defaultRoute?: string;
@@ -255,6 +259,7 @@ export function MainApp(
   >
 ) {
   const {
+    onManageDataSource,
     devTools,
     savedObjects,
     notifications,
@@ -280,6 +285,7 @@ export function MainApp(
                 exact={!devTool.enableRouting}
                 render={(routeProps) => (
                   <DevToolsWrapper
+                    onManageDataSource={onManageDataSource}
                     updateRoute={routeProps.history.push}
                     activeDevTool={devTool}
                     devTools={devTools}

src/plugins/dev_tools/public/dev_tools_icon.tsx

@@ -68,6 +68,10 @@ export function DevToolsIcon({
     };
   }, [modalVisible]);
 
+  const closeModalVisible = () => {
+    setModalVisible(false);
+  };
+
   return (
     <>
       <EuiToolTip
@@ -130,6 +134,7 @@ export function DevToolsIcon({
                     setMenuMountPoint={setMountPoint}
                     RouterComponent={MemoryRouter}
                     defaultRoute={devToolTab}
+                    onManageDataSource={closeModalVisible}
                   />
                   <EuiSpacer size="s" />
                   <EuiSmallButton