[Datasource management] Direct query connections fit and finish fixes (…

…opensearch-project#8544) Signed-off-by: Shenoy Pratik <sgguruda@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
LDrago27 · Oct 14, 2024 · d4be718 · d4be718
1 parent c8f386e
commit d4be718
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 40 deletions.
diff --git a/changelogs/fragments/8544.yml b/changelogs/fragments/8544.yml
@@ -0,0 +1,2 @@
+fix:
+- Direct query connections fit and finish fixes ([#8544](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8544))
diff --git a/...t_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx b/...t_query_data_sources_components/connection_detail/direct_query_connection_detail.test.tsx
@@ -3,18 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { MemoryRouter, Route } from 'react-router-dom';
-import { DirectQueryDataConnectionDetail } from './direct_query_connection_detail';
+import { render, screen, waitFor } from '@testing-library/react';
 import {
   ApplicationStart,
   HttpStart,
   NotificationsStart,
   SavedObjectsStart,
 } from 'opensearch-dashboards/public';
+import React from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+import { coreMock } from '../../../../../../core/public/mocks';
+import { DataSourceSelectionService } from '../../../service/data_source_selection_service';
 import * as utils from '../../utils';
+import { DirectQueryDataConnectionDetail } from './direct_query_connection_detail';
 
 jest.mock('../../../constants', () => ({
   DATACONNECTIONS_BASE: '/api/dataconnections',
@@ -67,9 +69,17 @@ jest.mock('../associated_object_management/utils/associated_objects_tab_utils',
   redirectToExplorerS3: jest.fn(),
 }));
 
+const mockApplication = coreMock.createSetup().application;
+const mockUiSettings = coreMock.createSetup().uiSettings;
+const mockdataSourceSelection = new DataSourceSelectionService();
+
 jest.mock('../../utils', () => ({
   isPluginInstalled: jest.fn(),
   getDataSourcesWithFields: jest.fn(),
+  getApplication: () => mockApplication,
+  getUiSettings: () => mockUiSettings,
+  getHideLocalCluster: () => ({ enabled: true }),
+  getDataSourceSelection: () => mockdataSourceSelection,
 }));
 
 const renderComponent = ({
@@ -87,6 +97,7 @@ const renderComponent = ({
       find: jest.fn().mockResolvedValue({ saved_objects: [] }),
     },
   },
+  setHeaderActionMenu = jest.fn(),
 }) => {
   return render(
     <MemoryRouter initialEntries={['/dataconnections/test?dataSourceMDSId=test-mdsid']}>
@@ -98,6 +109,8 @@ const renderComponent = ({
           application={application as ApplicationStart}
           setBreadcrumbs={setBreadcrumbs}
           savedObjects={savedObjects as SavedObjectsStart}
+          useNewUX={false}
+          setHeaderActionMenu={setHeaderActionMenu}
         />
       </Route>
     </MemoryRouter>

diff --git a/...direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx b/...direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
@@ -3,55 +3,57 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useState } from 'react';
 import {
+  EuiAccordion,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
   EuiPage,
   EuiPageBody,
   EuiPageHeader,
   EuiPageHeaderSection,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiPanel,
   EuiSpacer,
-  EuiText,
   EuiTabbedContent,
-  EuiIcon,
-  EuiCard,
-  EuiAccordion,
+  EuiText,
 } from '@elastic/eui';
+import { escapeRegExp } from 'lodash';
 import {
   ApplicationStart,
   HttpStart,
+  MountPoint,
   NotificationsStart,
   SavedObjectsStart,
 } from 'opensearch-dashboards/public';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { escapeRegExp } from 'lodash';
-import { DATACONNECTIONS_BASE } from '../../../constants';
-import { DirectQueryDatasourceDetails, PrometheusProperties } from '../../../types';
-import { NoAccess } from './utils/no_access_page';
-import { InactiveDataConnectionCallout } from './utils/inactive_data_connection_callout';
-import { AccessControlTab } from './access_control_tab';
-import { getManageDirectQueryDataSourceBreadcrumbs } from '../../breadcrumbs';
 import {
   useLoadAccelerationsToCache,
   useLoadDatabasesToCache,
   useLoadTablesToCache,
 } from '../../../../framework/catalog_cache/cache_loader';
-import { AccelerationTable } from '../acceleration_management/acceleration_table';
+import {
+  IntegrationInstanceResult,
+  IntegrationInstancesSearchResult,
+} from '../../../../framework/types';
+import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
+import { DATACONNECTIONS_BASE } from '../../../constants';
 import { getRenderCreateAccelerationFlyout } from '../../../plugin';
+import { DirectQueryDatasourceDetails, PrometheusProperties } from '../../../types';
+import { getManageDirectQueryDataSourceBreadcrumbs } from '../../breadcrumbs';
+import { createDataSourceMenu, DataSourceViewConfig } from '../../data_source_menu';
+import { getDataSourcesWithFields, isPluginInstalled } from '../../utils';
+import { AccelerationTable } from '../acceleration_management/acceleration_table';
 import { AssociatedObjectsTab } from '../associated_object_management/associated_objects_tab';
 import { redirectToExplorerS3 } from '../associated_object_management/utils/associated_objects_tab_utils';
 import {
-  InstallIntegrationFlyout,
   InstalledIntegrationsTable,
+  InstallIntegrationFlyout,
 } from '../integrations/installed_integrations_table';
-import {
-  IntegrationInstanceResult,
-  IntegrationInstancesSearchResult,
-} from '../../../../framework/types';
-import { INTEGRATIONS_BASE } from '../../../../framework/utils/shared';
-import { isPluginInstalled, getDataSourcesWithFields } from '../../utils';
+import { AccessControlTab } from './access_control_tab';
+import { InactiveDataConnectionCallout } from './utils/inactive_data_connection_callout';
+import { NoAccess } from './utils/no_access_page';
 
 interface DirectQueryDataConnectionDetailProps {
   featureFlagStatus: boolean;
@@ -61,6 +63,7 @@ interface DirectQueryDataConnectionDetailProps {
   setBreadcrumbs: (breadcrumbs: any) => void;
   useNewUX: boolean;
   savedObjects: SavedObjectsStart;
+  setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
 }
 
 export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnectionDetailProps> = ({
@@ -71,12 +74,13 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   setBreadcrumbs,
   useNewUX,
   savedObjects,
+  setHeaderActionMenu,
 }) => {
   const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
   const { dataSourceName } = useParams<{ dataSourceName: string }>();
   const { search } = useLocation();
   const queryParams = new URLSearchParams(search);
-  const dataSourceMDSId = queryParams.get('dataSourceMDSId');
+  const dataSourceMDSId = queryParams.get('dataSourceMDSId') ?? '';
   const [datasourceDetails, setDatasourceDetails] = useState<DirectQueryDatasourceDetails>({
     allowedRoles: [],
     name: '',
@@ -91,6 +95,24 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
     redirectToExplorerS3(dataSourceName, application);
   };
 
+  const dataSourceMenuView = useMemo(() => {
+    if (!featureFlagStatus) return null;
+
+    const DataSourceMenuView = createDataSourceMenu<DataSourceViewConfig>();
+
+    const dataSourceViewProps = {
+      setMenuMountPoint: setHeaderActionMenu,
+      componentConfig: {
+        activeOption: [{ id: dataSourceMDSId }],
+        savedObjects: savedObjects.client,
+        notifications,
+        fullWidth: true,
+      },
+    };
+
+    return <DataSourceMenuView {...dataSourceViewProps} componentType={'DataSourceView'} />;
+  }, [featureFlagStatus, dataSourceMDSId, setHeaderActionMenu, savedObjects.client, notifications]);
+
   // Cache loader hook
   const {
     loadStatus: databasesLoadStatus,
@@ -322,7 +344,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Description</EuiText>
               <EuiText size="s" className="overview-content">
-                {datasourceDetails.description || '-'}
+                {datasourceDetails.description || '\u2014'}
               </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -352,13 +374,13 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Connection title</EuiText>
               <EuiText size="s" className="overview-content">
-                {datasourceDetails.name || '-'}
+                {datasourceDetails.name || '\u2014'}
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText className="overview-title">Data source description</EuiText>
               <EuiText size="s" className="overview-content">
-                {datasourceDetails.description || '-'}
+                {datasourceDetails.description || '\u2014'}
               </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
@@ -473,14 +495,15 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
       <EuiPageBody>
         <EuiPageHeader style={{ justifyContent: 'spaceBetween' }}>
           <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
-            <EuiFlexGroup>
-              <EuiFlexItem grow={false}>
+            <EuiFlexGroup alignItems="center">
+              <EuiFlexItem>
                 {!useNewUX && (
                   <EuiText data-test-subj="datasourceTitle" size="s">
                     <h1>{datasourceDetails.name}</h1>
                   </EuiText>
                 )}
               </EuiFlexItem>
+              <EuiFlexItem grow={false}>{dataSourceMenuView}</EuiFlexItem>
             </EuiFlexGroup>
           </EuiPageHeaderSection>
         </EuiPageHeader>

diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.tsx
@@ -3,26 +3,26 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { StartServicesAccessor } from 'src/core/public';
+import { MountPoint, StartServicesAccessor } from 'src/core/public';
 
+import { EuiPageContent } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import { DataPublicPluginStart } from 'src/plugins/data/public';
-import { EuiPageContent } from '@elastic/eui';
 import { ManagementAppMountParams } from '../../../management/public';
 
 import { NavigationPublicPluginStart } from '../../../navigation/public';
 import { OpenSearchDashboardsContextProvider } from '../../../opensearch_dashboards_react/public';
+import { AuthenticationMethodRegistry } from '../auth_registry';
 import { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard';
-import { EditDataSourceWithRouter } from '../components/edit_data_source';
-import { DataSourceHomePanel } from '../components/data_source_home_panel/data_source_home_panel';
 import { CreateDataSourcePanel } from '../components/data_source_creation_panel/create_data_source_panel';
-import { DataSourceManagementContext } from '../types';
-import { AuthenticationMethodRegistry } from '../auth_registry';
-import { ConfigureDirectQueryDataSourceWithRouter } from '../components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources';
+import { DataSourceHomePanel } from '../components/data_source_home_panel/data_source_home_panel';
 import { DirectQueryDataConnectionDetail } from '../components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail';
+import { ConfigureDirectQueryDataSourceWithRouter } from '../components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources';
+import { EditDataSourceWithRouter } from '../components/edit_data_source';
+import { DataSourceManagementContext } from '../types';
 
 export interface DataSourceManagementStartDependencies {
   data: DataPublicPluginStart;
@@ -31,7 +31,10 @@ export interface DataSourceManagementStartDependencies {
 
 export async function mountManagementSection(
   getStartServices: StartServicesAccessor<DataSourceManagementStartDependencies>,
-  params: ManagementAppMountParams & { wrapInPage?: boolean },
+  params: ManagementAppMountParams & {
+    wrapInPage?: boolean;
+    setHeaderActionMenu: (menuMount: MountPoint | undefined) => void;
+  },
   authMethodsRegistry: AuthenticationMethodRegistry,
   featureFlagStatus: boolean
 ) {
@@ -80,6 +83,7 @@ export async function mountManagementSection(
             application={application}
             useNewUX={useNewUX}
             savedObjects={savedObjects}
+            setHeaderActionMenu={params.setHeaderActionMenu}
           />
         </Route>
         {canManageDataSource && (