From 1dc096054c0ce8008635889406c65ee7673a7756 Mon Sep 17 00:00:00 2001
From: Wei Wang <weiwangv@amazon.com>
Date: Fri, 23 Aug 2024 16:09:39 -0700
Subject: [PATCH 1/3] Implement new page header for admin data sources page

Signed-off-by: Wei Wang <weiwangv@amazon.com>
---
 .../opensearch_dashboards.json                |   2 +-
 .../public/components/breadcrumbs.ts          |  12 +-
 .../create_form/create_data_source_form.tsx   |  34 ++++-
 .../components/header/header.tsx              |   1 +
 .../create_data_source_wizard.tsx             |   8 +-
 .../create_data_source_panel.tsx              |  37 +++++-
 .../data_source_home_panel.tsx                | 117 +++++++++++++++---
 .../data_source_table/data_source_table.tsx   |   1 +
 .../direct_query_connection_detail.tsx        |  20 ++-
 .../configure_amazon_s3_data_source.tsx       |  90 ++++++++++----
 .../configure_direct_query_data_sources.tsx   | 101 ++++-----------
 .../configure_prometheus_data_source.tsx      |  52 +++++---
 .../query_permissions.tsx                     |   2 +-
 .../edit_form/edit_data_source_form.tsx       |  50 +++++---
 .../components/header/header.tsx              |  42 ++++++-
 .../edit_data_source/edit_data_source.tsx     |   5 +
 .../mount_management_section.tsx              |  23 +++-
 .../data_source_management/public/types.ts    |   2 +
 18 files changed, 413 insertions(+), 186 deletions(-)

diff --git a/src/plugins/data_source_management/opensearch_dashboards.json b/src/plugins/data_source_management/opensearch_dashboards.json
index fb37a16eea0f..86f5d0b5d11f 100644
--- a/src/plugins/data_source_management/opensearch_dashboards.json
+++ b/src/plugins/data_source_management/opensearch_dashboards.json
@@ -3,7 +3,7 @@
   "version": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["management", "indexPatternManagement"],
+  "requiredPlugins": ["navigation", "management", "indexPatternManagement"],
   "optionalPlugins": ["dataSource"],
   "requiredBundles": ["opensearchDashboardsReact", "dataSource", "opensearchDashboardsUtils"],
   "extraPublicDirs": ["public/components/utils"],
diff --git a/src/plugins/data_source_management/public/components/breadcrumbs.ts b/src/plugins/data_source_management/public/components/breadcrumbs.ts
index e1ac30bddb88..0980e931d5fb 100644
--- a/src/plugins/data_source_management/public/components/breadcrumbs.ts
+++ b/src/plugins/data_source_management/public/components/breadcrumbs.ts
@@ -28,14 +28,14 @@ export function getCreateBreadcrumbs() {
     },
   ];
 }
-export function getCreateOpenSearchDataSourceBreadcrumbs() {
+export function getCreateOpenSearchDataSourceBreadcrumbs(useNewUX: boolean) {
   return [
     ...getCreateBreadcrumbs(),
     {
       text: i18n.translate(
         'dataSourcesManagement.dataSources.createOpenSearchDataSourceBreadcrumbs',
         {
-          defaultMessage: 'Open Search',
+          defaultMessage: useNewUX ? 'Connect OpenSearch Cluster' : 'Open Search',
         }
       ),
       href: `/configure/OpenSearch`,
@@ -43,14 +43,14 @@ export function getCreateOpenSearchDataSourceBreadcrumbs() {
   ];
 }
 
-export function getCreateAmazonS3DataSourceBreadcrumbs() {
+export function getCreateAmazonS3DataSourceBreadcrumbs(useNewUX: boolean) {
   return [
     ...getCreateBreadcrumbs(),
     {
       text: i18n.translate(
         'dataSourcesManagement.dataSources.createAmazonS3DataSourceBreadcrumbs',
         {
-          defaultMessage: 'Amazon S3',
+          defaultMessage: useNewUX ? 'Connect Amazon S3' : 'Amazon S3',
         }
       ),
       href: `/configure/AmazonS3AWSGlue`,
@@ -58,14 +58,14 @@ export function getCreateAmazonS3DataSourceBreadcrumbs() {
   ];
 }
 
-export function getCreatePrometheusDataSourceBreadcrumbs() {
+export function getCreatePrometheusDataSourceBreadcrumbs(useNewUX: boolean) {
   return [
     ...getCreateBreadcrumbs(),
     {
       text: i18n.translate(
         'dataSourcesManagement.dataSources.createPrometheusDataSourceBreadcrumbs',
         {
-          defaultMessage: 'Prometheus',
+          defaultMessage: useNewUX ? 'Connect Prometheus' : 'Prometheus',
         }
       ),
       href: `/configure/Prometheus`,
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index 7fec74bdc0f9..fabb4a7a1a82 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -23,6 +23,8 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { ApplicationStart } from 'opensearch-dashboards/public';
 import { AuthenticationMethodRegistry } from '../../../../auth_registry';
 import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/common/data_sources';
 import {
@@ -47,6 +49,9 @@ import {
 } from '../../../utils';
 
 export interface CreateDataSourceProps {
+  useNewUX: boolean;
+  navigation: NavigationPublicPluginStart;
+  application: ApplicationStart;
   existingDatasourceNamesList: string[];
   handleSubmit: (formValues: DataSourceAttributes) => void;
   handleTestConnection: (formValues: DataSourceAttributes) => void;
@@ -367,21 +372,41 @@ export class CreateDataSourceForm extends React.Component<
     return null;
   };
 
+  description = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          <FormattedMessage
+            id="dataSourcesManagement.createDataSource.description"
+            defaultMessage="Create a new data source connection to help you retrieve data from an external OpenSearch compatible source."
+          />
+        </EuiText>
+      ),
+    },
+  ];
+
   /* Render methods */
 
   /* Render header*/
   renderHeader = () => {
-    return <Header />;
+    return this.props.useNewUX ? (
+      <this.props.navigation.ui.HeaderControl
+        setMountPoint={this.props.application.setAppDescriptionControls}
+        controls={this.description}
+      />
+    ) : (
+      <Header />
+    );
   };
 
   /* Render Section header*/
   renderSectionHeader = (i18nId: string, defaultMessage: string) => {
     return (
       <>
-        <EuiText grow={false}>
-          <h4>
+        <EuiText grow={false} size="s">
+          <h3>
             <FormattedMessage id={i18nId} defaultMessage={defaultMessage} />
-          </h4>
+          </h3>
         </EuiText>
       </>
     );
@@ -554,7 +579,6 @@ export class CreateDataSourceForm extends React.Component<
       <>
         <EuiPageContent>
           {this.renderHeader()}
-          <EuiSpacer size="m" />
           <EuiForm data-test-subj="data-source-creation">
             {/* Endpoint section */}
             {this.renderSectionHeader(
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx
index 75eda9af9809..c6caa900b436 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/header/header.tsx
@@ -45,6 +45,7 @@ export const Header = () => {
               <br />
             </p>
           </EuiText>
+          <EuiSpacer size="s" />
         </div>
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
index 0be281a20a38..e589d4fee72a 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx
@@ -37,15 +37,18 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
     http,
     notifications: { toasts },
     uiSettings,
+    navigation,
+    application,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   /* State Variables */
   const [existingDatasourceNamesList, setExistingDatasourceNamesList] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const useNewUX = uiSettings.get('home:useNewHomePage');
 
   /* Set breadcrumb */
   useEffectOnce(() => {
-    setBreadcrumbs(getCreateOpenSearchDataSourceBreadcrumbs());
+    setBreadcrumbs(getCreateOpenSearchDataSourceBreadcrumbs(useNewUX));
     getExistingDataSourceNames();
   });
 
@@ -128,6 +131,9 @@ export const CreateDataSourceWizard: React.FunctionComponent<CreateDataSourceWiz
     return (
       <>
         <CreateDataSourceForm
+          useNewUX={useNewUX}
+          navigation={navigation}
+          application={application}
           handleSubmit={handleSubmit}
           handleTestConnection={handleTestConnection}
           handleCancel={() => props.history.push('/create')}
diff --git a/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.tsx b/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.tsx
index 7e6761d51254..8228c82e4ca1 100644
--- a/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.tsx
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPageHeader, EuiPanel, EuiText } from '@elastic/eui';
 import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import { FormattedMessage } from '@osd/i18n/react';
 import { CreateDataSourcePanelHeader } from './create_data_source_panel_header';
 import { CreateDataSourceCardView } from './create_data_source_card_view';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
@@ -14,24 +15,56 @@ import { DataSourceManagementContext } from '../../types';
 
 interface CreateDataSourcePanelProps extends RouteComponentProps {
   featureFlagStatus: boolean;
+  useNewUX: boolean;
 }
 
 export const CreateDataSourcePanel: React.FC<CreateDataSourcePanelProps> = ({
   featureFlagStatus,
+  useNewUX,
   ...props
 }) => {
   const {
     chrome,
+    application,
     setBreadcrumbs,
     notifications: { toasts },
     uiSettings,
+    navigation,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   useEffect(() => {
     setBreadcrumbs(getCreateBreadcrumbs());
   }, [setBreadcrumbs]);
 
-  return (
+  const { HeaderControl } = navigation.ui;
+  const description = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          <FormattedMessage
+            id="dataSourcesManagement.createDataSourcePanel.description"
+            defaultMessage="Select a data source type to get started. "
+          />
+        </EuiText>
+      ),
+    },
+  ];
+
+  return useNewUX ? (
+    <>
+      <HeaderControl setMountPoint={application.setAppDescriptionControls} controls={description} />
+      <EuiPanel color="transparent" hasBorder={false} paddingSize="none">
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem>
+            <CreateDataSourceCardView
+              history={props.history}
+              featureFlagStatus={featureFlagStatus}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </>
+  ) : (
     <EuiPanel>
       <EuiFlexGroup direction="column">
         <EuiFlexItem>
diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
index 3291885a8b60..3f3d88077ab5 100644
--- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
@@ -13,7 +13,12 @@ import {
   EuiTab,
   EuiPageHeader,
   EuiPanel,
+  EuiButtonGroup,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
+import { TopNavControlButtonData, TopNavControlComponentData } from 'src/plugins/navigation/public';
+import { FormattedMessage } from '@osd/i18n/react';
 import { DataSourceHeader } from './data_source_page_header';
 import { DataSourceTableWithRouter } from '../data_source_table/data_source_table';
 import { ManageDirectQueryDataConnectionsTable } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
@@ -24,10 +29,12 @@ import { DataSourceManagementContext } from '../../types';
 
 interface DataSourceHomePanelProps extends RouteComponentProps {
   featureFlagStatus: boolean;
+  useNewUX: boolean;
 }
 
 export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
   featureFlagStatus,
+  useNewUX,
   ...props
 }) => {
   const {
@@ -37,6 +44,8 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     savedObjects,
     uiSettings,
     application,
+    docLinks,
+    navigation,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   const defaultTabId = featureFlagStatus
@@ -44,6 +53,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     : 'manageDirectQueryDataSources';
   const [selectedTabId, setSelectedTabId] = useState(defaultTabId);
   const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
+  const { HeaderControl } = navigation.ui;
 
   useEffect(() => {
     setBreadcrumbs(getListBreadcrumbs());
@@ -53,6 +63,55 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
     setSelectedTabId(id);
   };
 
+  const description = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          <FormattedMessage
+            id="dataSourcesManagement.dataSourcesTable.description"
+            defaultMessage="Create and manage data source connections. "
+          />
+          <EuiLink
+            external={true}
+            href={docLinks.links.opensearchDashboards.dataSource.guide}
+            target="_blank"
+            className="external-link-inline-block"
+          >
+            Learn more
+          </EuiLink>
+        </EuiText>
+      ),
+    },
+  ];
+
+  const createDataSourceButton = [
+    {
+      id: 'Create data source',
+      label: 'Create data source connection',
+      testId: 'createDataSourceButton',
+      run: () => props.history.push('/create'),
+      fill: true,
+      iconType: 'plus',
+      controlType: 'button',
+    } as TopNavControlButtonData,
+  ];
+
+  const connectionTypeButton = [
+    {
+      renderComponent: (
+        <EuiButtonGroup
+          legend="connection type"
+          options={[
+            { id: 'manageOpensearchDataSources', label: 'OpenSearch connections' },
+            { id: 'manageDirectQueryDataSources', label: 'Direct query connections' },
+          ]}
+          idSelected={selectedTabId}
+          onChange={(id) => onSelectedTabChanged(id)}
+        />
+      ),
+    } as TopNavControlComponentData,
+  ];
+
   const tabs = [
     ...(featureFlagStatus
       ? [
@@ -82,25 +141,47 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
 
   return (
     <EuiPanel>
+      {useNewUX && (
+        <>
+          <HeaderControl
+            setMountPoint={application.setAppCenterControls}
+            controls={connectionTypeButton}
+          />
+          {canManageDataSource && (
+            <HeaderControl
+              setMountPoint={application.setAppRightControls}
+              controls={createDataSourceButton}
+            />
+          )}
+          <HeaderControl
+            setMountPoint={application.setAppDescriptionControls}
+            controls={description}
+          />
+        </>
+      )}
       <EuiFlexGroup direction="column">
-        <EuiFlexItem>
-          <EuiPageHeader>
-            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <DataSourceHeader history={props.history} />
-              </EuiFlexItem>
-              {canManageDataSource ? (
-                <EuiFlexItem grow={false}>
-                  <CreateButton history={props.history} dataTestSubj="createDataSourceButton" />
-                </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          </EuiPageHeader>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiSpacer size="s" />
-          <EuiTabs size="s">{renderTabs()}</EuiTabs>
-        </EuiFlexItem>
+        {!useNewUX && (
+          <>
+            <EuiFlexItem>
+              <EuiPageHeader>
+                <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+                  <EuiFlexItem grow={false}>
+                    <DataSourceHeader history={props.history} />
+                  </EuiFlexItem>
+                  {canManageDataSource ? (
+                    <EuiFlexItem grow={false}>
+                      <CreateButton history={props.history} dataTestSubj="createDataSourceButton" />
+                    </EuiFlexItem>
+                  ) : null}
+                </EuiFlexGroup>
+              </EuiPageHeader>
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiSpacer size="s" />
+              <EuiTabs size="s">{renderTabs()}</EuiTabs>
+            </EuiFlexItem>
+          </>
+        )}
         <EuiFlexItem>
           <EuiSpacer size="s" />
           {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
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 bc75e5a17ad3..d2efbf3441f2 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
@@ -122,6 +122,7 @@ export const DataSourceTable = ({ history }: RouteComponentProps) => {
 
   const search = {
     toolsRight: renderToolsRight(),
+    compressed: true,
     box: {
       incremental: true,
       schema: {
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
index 5746454e946d..aad3db2260c9 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/connection_detail/direct_query_connection_detail.tsx
@@ -19,13 +19,7 @@ import {
   EuiCard,
   EuiAccordion,
 } from '@elastic/eui';
-import {
-  ApplicationStart,
-  HttpStart,
-  IUiSettingsClient,
-  NotificationsStart,
-  SavedObjectsStart,
-} from 'opensearch-dashboards/public';
+import { ApplicationStart, HttpStart, NotificationsStart } from 'opensearch-dashboards/public';
 import { useLocation, useParams } from 'react-router-dom';
 import { escapeRegExp } from 'lodash';
 import { DATACONNECTIONS_BASE } from '../../../constants';
@@ -60,6 +54,7 @@ interface DirectQueryDataConnectionDetailProps {
   notifications: NotificationsStart;
   application: ApplicationStart;
   setBreadcrumbs: (breadcrumbs: any) => void;
+  useNewUX: boolean;
 }
 
 export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnectionDetailProps> = ({
@@ -68,6 +63,7 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   notifications,
   application,
   setBreadcrumbs,
+  useNewUX,
 }) => {
   const [observabilityDashboardsExists, setObservabilityDashboardsExists] = useState(false);
   const { dataSourceName } = useParams<{ dataSourceName: string }>();
@@ -427,15 +423,17 @@ export const DirectQueryDataConnectionDetail: React.FC<DirectQueryDataConnection
   const tabs = [...conditionalTabs, ...genericTabs];
 
   return (
-    <EuiPage>
+    <EuiPage paddingSize="none">
       <EuiPageBody>
         <EuiPageHeader style={{ justifyContent: 'spaceBetween' }}>
           <EuiPageHeaderSection style={{ width: '100%', justifyContent: 'space-between' }}>
             <EuiFlexGroup>
               <EuiFlexItem grow={false}>
-                <EuiText data-test-subj="datasourceTitle" size="s">
-                  <h1>{datasourceDetails.name}</h1>
-                </EuiText>
+                {!useNewUX && (
+                  <EuiText data-test-subj="datasourceTitle" size="s">
+                    <h1>{datasourceDetails.name}</h1>
+                  </EuiText>
+                )}
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPageHeaderSection>
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx
index 7eeeda357304..38bbca779815 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx
@@ -7,7 +7,6 @@ import React, { useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import {
   EuiPanel,
-  EuiTitle,
   EuiSpacer,
   EuiText,
   EuiLink,
@@ -17,6 +16,9 @@ import {
   EuiCompressedSelect,
   EuiCallOut,
 } from '@elastic/eui';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { FormattedMessage } from '@osd/i18n/react';
 import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
 import { AuthMethod } from '../../../constants';
 import { QueryPermissionsConfiguration } from '../query_permissions';
@@ -25,6 +27,9 @@ import { AuthDetails } from '../direct_query_data_source_auth_details';
 import { NameRow } from '../name_row';
 
 interface ConfigureS3DatasourceProps extends RouteComponentProps {
+  useNewUX: boolean;
+  navigation: NavigationPublicPluginStart;
+  application: ApplicationStart;
   roles: Role[];
   selectedQueryPermissionRoles?: Role[];
   setSelectedQueryPermissionRoles: React.Dispatch<React.SetStateAction<Role[]>>;
@@ -49,6 +54,9 @@ interface ConfigureS3DatasourceProps extends RouteComponentProps {
 
 export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> = (props) => {
   const {
+    useNewUX,
+    navigation,
+    application,
     setNameForRequest,
     setDetailsForRequest,
     setArnForRequest,
@@ -83,29 +91,67 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
     { value: 'noauth', text: 'No authentication' },
   ];
 
+  const description = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          <FormattedMessage
+            id="dataSourcesManagement.configureS3DataSource.description"
+            defaultMessage="Connect to Amazon S3 via AWS Glue Data Catalog. "
+          />
+          {docLinks && (
+            <EuiLink
+              external={true}
+              href={docLinks.links.opensearchDashboards.dataSource.s3DataSource}
+              target="blank"
+            >
+              Learn more
+            </EuiLink>
+          )}
+        </EuiText>
+      ),
+    },
+  ];
+
+  const callOut = (
+    <EuiCallOut title="Setup Amazon EMR as execution engine first" iconType="iInCircle">
+      <EuiText size="s" color="subdued">
+        {`Make sure you connected to Amazon S3 via AWS Glue Data Catalog with Amazon EMR as an execution engine. `}
+        {docLinks && (
+          <EuiLink
+            external={true}
+            href={docLinks.links.opensearchDashboards.dataSource.s3DataSource}
+            target="blank"
+          >
+            Learn more
+          </EuiLink>
+        )}
+      </EuiText>
+    </EuiCallOut>
+  );
+
   return (
     <div>
       <EuiPanel>
+        <EuiText size="s">{!useNewUX && <h1>{`Configure Amazon S3 data source`}</h1>}</EuiText>
+        {useNewUX ? (
+          <>
+            <navigation.ui.HeaderControl
+              setMountPoint={application.setAppBottomControls}
+              controls={[{ renderComponent: callOut }]}
+            />
+            <navigation.ui.HeaderControl
+              setMountPoint={application.setAppDescriptionControls}
+              controls={description}
+            />
+          </>
+        ) : (
+          <>
+            <EuiSpacer size="s" />
+            {callOut} <EuiSpacer />
+          </>
+        )}
         <EuiText size="s">
-          <h1>{`Configure Amazon S3 data source`}</h1>
-        </EuiText>
-        <EuiSpacer size="s" />
-        <EuiCallOut title="Setup Amazon EMR as execution engine first" iconType="iInCircle">
-          <EuiText size="s" color="subdued">
-            {`Connect to Amazon S3 via AWS Glue Data Catalog with Amazon EMR as an execution engine. `}
-            {docLinks && (
-              <EuiLink
-                external={true}
-                href={docLinks.links.opensearchDashboards.dataSource.s3DataSource}
-                target="blank"
-              >
-                Learn more
-              </EuiLink>
-            )}
-          </EuiText>
-        </EuiCallOut>
-        <EuiSpacer />
-        <EuiText>
           <h3>Data source details</h3>
         </EuiText>
         <EuiSpacer size="m" />
@@ -129,7 +175,7 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
         </EuiCompressedFormRow>
         <EuiSpacer />
 
-        <EuiText>
+        <EuiText size="s">
           <h3>AWS Glue Data Catalog authentication details</h3>
         </EuiText>
         <EuiSpacer size="m" />
@@ -171,7 +217,7 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
 
         <EuiSpacer />
 
-        <EuiText>
+        <EuiText size="s">
           <h3>AWS Glue Data Catalog index store details</h3>
         </EuiText>
         <EuiSpacer size="m" />
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources.tsx
index 11201fe9d538..a45e853de2d9 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/configure_direct_query_data_sources.tsx
@@ -8,19 +8,15 @@ import {
   EuiFlexItem,
   EuiPage,
   EuiPageBody,
-  EuiSpacer,
-  EuiSteps,
-  EuiPageSideBar,
   EuiBottomBar,
   EuiButtonEmpty,
   EuiButton,
+  EuiSpacer,
 } from '@elastic/eui';
 import React, { useEffect, useState, useCallback } from 'react';
 import { RouteComponentProps, useParams, withRouter } from 'react-router-dom';
 import { ConfigureS3DatasourcePanel } from './amazon_s3/configure_amazon_s3_data_source';
 import { ConfigurePrometheusDatasourcePanel } from './prometheus/configure_prometheus_data_source';
-import { ReviewS3Datasource } from './amazon_s3/review_amazon_s3_data_source';
-import { ReviewPrometheusDatasource } from './prometheus/review_prometheus_data_source';
 import { useOpenSearchDashboards } from '../../../../../opensearch_dashboards_react/public';
 import { DataSourceManagementContext, DirectQueryDatasourceType, Role } from '../../../types';
 import { DatasourceTypeToDisplayName, UrlToDatasourceType } from '../../../constants';
@@ -35,10 +31,12 @@ import { DATACONNECTIONS_BASE } from '../../../constants';
 
 interface ConfigureDatasourceProps extends RouteComponentProps {
   notifications: NotificationsStart;
+  useNewUX: boolean;
 }
 
 export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps> = ({
   notifications,
+  useNewUX,
   history,
 }) => {
   const { type: urlType } = useParams<{ type: string }>();
@@ -47,6 +45,8 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
     setBreadcrumbs,
     notifications: { toasts },
     http,
+    navigation,
+    application,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
 
   const [error, setError] = useState<string>('');
@@ -63,17 +63,7 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
   const [roles, setRoles] = useState<Role[]>([]);
   const [hasSecurityAccess, setHasSecurityAccess] = useState(true);
   const [selectedQueryPermissionRoles, setSelectedQueryPermissionRoles] = useState<Role[]>([]);
-  const [page, setPage] = useState<'configure' | 'review'>('configure');
   const type = UrlToDatasourceType[urlType];
-  const ConfigureDatasourceSteps = [
-    {
-      title: 'Configure data source',
-      status: page === 'review' ? 'complete' : undefined,
-    },
-    {
-      title: 'Review configuration',
-    },
-  ];
 
   const formatError = (errorName: string, errorMessage: string, errorDetails: string) => {
     return {
@@ -159,7 +149,6 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
         notifications.toasts.addError(formattedError, {
           title: 'Could not create data source',
         });
-        setPage('configure');
       });
   }, [
     authMethod,
@@ -196,16 +185,16 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
     let breadcrumbs;
     switch (urlType) {
       case 'AmazonS3AWSGlue':
-        breadcrumbs = getCreateAmazonS3DataSourceBreadcrumbs();
+        breadcrumbs = getCreateAmazonS3DataSourceBreadcrumbs(useNewUX);
         break;
       case 'Prometheus':
-        breadcrumbs = getCreatePrometheusDataSourceBreadcrumbs();
+        breadcrumbs = getCreatePrometheusDataSourceBreadcrumbs(useNewUX);
         break;
       default:
         breadcrumbs = getCreateBreadcrumbs();
     }
     setBreadcrumbs(breadcrumbs);
-  }, [urlType, setBreadcrumbs, http]);
+  }, [urlType, setBreadcrumbs, http, useNewUX]);
 
   const ConfigureDatasource = (configurationProps: {
     datasourceType: DirectQueryDatasourceType;
@@ -215,6 +204,9 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
       case 'S3GLUE':
         return (
           <ConfigureS3DatasourcePanel
+            useNewUX={useNewUX}
+            navigation={navigation}
+            application={application}
             currentName={name}
             currentDetails={details}
             setNameForRequest={setName}
@@ -241,6 +233,9 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
       case 'PROMETHEUS':
         return (
           <ConfigurePrometheusDatasourcePanel
+            useNewUX={useNewUX}
+            navigation={navigation}
+            application={application}
             currentName={name}
             currentDetails={details}
             setNameForRequest={setName}
@@ -272,39 +267,6 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
     }
   };
 
-  const ReviewDatasourceConfiguration = (configurationProps: { datasourceType: string }) => {
-    const { datasourceType } = configurationProps;
-    switch (datasourceType) {
-      case 'S3GLUE':
-        return (
-          <ReviewS3Datasource
-            currentName={name}
-            currentDetails={details}
-            currentArn={arn}
-            currentStore={storeURI}
-            selectedQueryPermissionRoles={selectedQueryPermissionRoles}
-            currentAuthMethod={authMethod}
-            goBack={() => setPage('configure')}
-          />
-        );
-      case 'PROMETHEUS':
-        return (
-          <ReviewPrometheusDatasource
-            currentName={name}
-            currentDetails={details}
-            currentArn={arn}
-            currentStore={storeURI}
-            currentUsername={username}
-            selectedQueryPermissionRoles={selectedQueryPermissionRoles}
-            currentAuthMethod={authMethod}
-            goBack={() => setPage('configure')}
-          />
-        );
-      default:
-        return <></>;
-    }
-  };
-
   const ReviewSaveOrCancel = useCallback(() => {
     return (
       <EuiBottomBar data-test-subj="reviewSaveOrCancel">
@@ -324,44 +286,25 @@ export const DirectQueryDataSourceConfigure: React.FC<ConfigureDatasourceProps>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton
-              onClick={() => setPage('configure')}
-              color="ghost"
-              size="s"
-              iconType="arrowLeft"
-              data-test-subj="previousButton"
-            >
-              Previous
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              onClick={() => (page === 'review' ? createDatasource() : setPage('review'))}
+              onClick={() => createDatasource()}
               size="s"
-              iconType="arrowRight"
+              iconType="check"
+              color="secondary"
               fill
-              data-test-subj="nextButton"
+              data-test-subj="createButton"
             >
-              {page === 'configure'
-                ? `Review Configuration`
-                : `Connect to ${DatasourceTypeToDisplayName[type]}`}
+              {`Connect to ${DatasourceTypeToDisplayName[type]}`}
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiBottomBar>
     );
-  }, [page, history, createDatasource, type]);
+  }, [history, createDatasource, type]);
 
   return (
-    <EuiPage>
-      <EuiPageSideBar>
-        <EuiSteps titleSize="xs" steps={ConfigureDatasourceSteps} data-test-subj="configureSteps" />
-      </EuiPageSideBar>
+    <EuiPage paddingSize="none">
       <EuiPageBody>
-        {page === 'configure' ? (
-          <ConfigureDatasource datasourceType={type} />
-        ) : (
-          <ReviewDatasourceConfiguration datasourceType={type} />
-        )}
+        <ConfigureDatasource datasourceType={type} />
         <EuiSpacer size="xl" />
         <EuiSpacer size="xl" />
         <ReviewSaveOrCancel />
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx
index 3d1b02bb60ac..74b425dffdc7 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx
@@ -12,10 +12,12 @@ import {
   EuiCompressedFieldText,
   EuiCompressedTextArea,
   EuiCompressedSelect,
-  EuiCompressedFieldPassword,
   EuiForm,
 } from '@elastic/eui';
 import React, { useState } from 'react';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { FormattedMessage } from '@osd/i18n/react';
 import { AuthMethod, OPENSEARCH_DOCUMENTATION_URL } from '../../../constants';
 import { QueryPermissionsConfiguration } from '../query_permissions';
 import { Role } from '../../../../types';
@@ -23,6 +25,9 @@ import { AuthDetails } from '../direct_query_data_source_auth_details';
 import { NameRow } from '../name_row';
 
 interface ConfigurePrometheusDatasourceProps {
+  useNewUX: boolean;
+  navigation: NavigationPublicPluginStart;
+  application: ApplicationStart;
   roles: Role[];
   selectedQueryPermissionRoles: Role[];
   setSelectedQueryPermissionRoles: React.Dispatch<React.SetStateAction<Role[]>>;
@@ -51,6 +56,9 @@ interface ConfigurePrometheusDatasourceProps {
 
 export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDatasourceProps) => {
   const {
+    useNewUX,
+    navigation,
+    application,
     setNameForRequest,
     setDetailsForRequest,
     setStoreForRequest,
@@ -84,22 +92,36 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
     { value: 'awssigv4', text: 'AWS Signature Version 4' },
   ];
 
+  const description = (
+    <EuiText size="s" color="subdued">
+      <FormattedMessage
+        id="dataSourcesManagement.configurePrometheusDataSource.description"
+        defaultMessage="Connect to Prometheus with OpenSearch and OpenSearch Dashboards. "
+      />
+      <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="blank">
+        Learn more
+      </EuiLink>
+    </EuiText>
+  );
+
   return (
     <div>
       <EuiPanel>
-        <EuiText size="s">
-          <h1>{`Configure Prometheus data source`}</h1>
-        </EuiText>
-        <EuiSpacer size="s" />
-        <EuiText size="s" color="subdued">
-          {`Connect to Prometheus with OpenSearch and OpenSearch Dashboards. `}
-          <EuiLink external={true} href={OPENSEARCH_DOCUMENTATION_URL} target="_blank">
-            Learn more
-          </EuiLink>
-        </EuiText>
-        <EuiSpacer />
+        <EuiText size="s">{!useNewUX && <h1>{`Configure Prometheus data source`}</h1>}</EuiText>
+        {useNewUX ? (
+          <navigation.ui.HeaderControl
+            setMountPoint={application.setAppDescriptionControls}
+            controls={[{ renderComponent: description }]}
+          />
+        ) : (
+          <>
+            <EuiSpacer size="s" />
+            {description}
+            <EuiSpacer />
+          </>
+        )}
         <EuiForm component="form">
-          <EuiText>
+          <EuiText size="s">
             <h3>Data source details</h3>
           </EuiText>
           <EuiSpacer size="m" />
@@ -124,7 +146,7 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
           </EuiCompressedFormRow>
           <EuiSpacer />
 
-          <EuiText>
+          <EuiText size="s">
             <h3>Prometheus data location</h3>
           </EuiText>
           <EuiSpacer size="m" />
@@ -149,7 +171,7 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
           </EuiCompressedFormRow>
           <EuiSpacer />
 
-          <EuiText>
+          <EuiText size="s">
             <h3>Authentication details</h3>
           </EuiText>
           <EuiSpacer size="m" />
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx
index 26570bae318b..69748897f466 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx
@@ -70,7 +70,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
     <EuiFlexItem>
       <EuiFlexGroup direction={layout === 'horizontal' ? 'row' : 'column'}>
         <EuiFlexItem>
-          <EuiText>
+          <EuiText size="s">
             <h3>Query permissions</h3>
           </EuiText>
           <EuiText size="s">
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 48e40dbfd88f..37dcb27c114f 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -26,6 +26,8 @@ import {
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
 import deepEqual from 'fast-deep-equal';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { AuthenticationMethodRegistry } from '../../../../auth_registry';
 import { SigV4Content, SigV4ServiceName } from '../../../../../../data_source/common/data_sources';
 import { Header } from '../header';
@@ -49,6 +51,9 @@ import { UpdateAwsCredentialModal } from '../update_aws_credential_modal';
 import { extractRegisteredAuthTypeCredentials, getDefaultAuthMethod } from '../../../utils';
 
 export interface EditDataSourceProps {
+  navigation: NavigationPublicPluginStart;
+  application: ApplicationStart;
+  useNewUX: boolean;
   existingDataSource: DataSourceAttributes;
   existingDatasourceNamesList: string[];
   isDefault: boolean;
@@ -643,6 +648,9 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   renderHeader = () => {
     return (
       <Header
+        navigation={this.props.navigation}
+        application={this.props.application}
+        useNewUX={this.props.useNewUX}
         showDeleteIcon={true}
         isFormValid={this.isFormValid()}
         onClickDeleteIcon={this.onClickDeleteDataSource}
@@ -677,7 +685,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   renderConnectionDetailsSection = () => {
     return (
       <EuiPanel paddingSize="m">
-        <EuiText size="m">
+        <EuiText size="s">
           <h3>
             {
               <FormattedMessage
@@ -692,14 +700,16 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
 
         <EuiDescribedFormGroup
           title={
-            <h4>
-              {
-                <FormattedMessage
-                  id="dataSourcesManagement.editDataSource.objectDetailsText"
-                  defaultMessage="Object Details"
-                />
-              }
-            </h4>
+            <EuiText size="s">
+              <h4>
+                {
+                  <FormattedMessage
+                    id="dataSourcesManagement.editDataSource.objectDetailsText"
+                    defaultMessage="Object Details"
+                  />
+                }
+              </h4>
+            </EuiText>
           }
           description={
             <p>
@@ -763,7 +773,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   renderEndpointSection = () => {
     return (
       <EuiPanel paddingSize="m">
-        <EuiText size="m">
+        <EuiText size="s">
           <h3>
             {
               <FormattedMessage
@@ -799,7 +809,7 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
   renderAuthenticationSection = () => {
     return (
       <EuiPanel paddingSize="m">
-        <EuiText size="m">
+        <EuiText size="s">
           <h3>
             {
               <FormattedMessage
@@ -814,14 +824,16 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
 
         <EuiDescribedFormGroup
           title={
-            <h4>
-              {
-                <FormattedMessage
-                  id="dataSourcesManagement.editDataSource.authenticationMethod"
-                  defaultMessage="Authentication Method"
-                />
-              }
-            </h4>
+            <EuiText size="s">
+              <h4>
+                {
+                  <FormattedMessage
+                    id="dataSourcesManagement.editDataSource.authenticationMethod"
+                    defaultMessage="Authentication Method"
+                  />
+                }
+              </h4>
+            </EuiText>
           }
         >
           {this.renderCredentialsSection()}
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx
index 3e76ab838f9d..6775c659e6c1 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/header/header.tsx
@@ -18,10 +18,18 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { FormattedMessage } from '@osd/i18n/react';
+import {
+  NavigationPublicPluginStart,
+  TopNavControlComponentData,
+} from 'src/plugins/navigation/public';
+import { ApplicationStart } from 'opensearch-dashboards/public';
 import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
 import { DataSourceManagementContext } from '../../../../types';
 
 export const Header = ({
+  navigation,
+  application,
+  useNewUX,
   showDeleteIcon,
   isFormValid,
   onClickDeleteIcon,
@@ -31,6 +39,9 @@ export const Header = ({
   isDefault,
   canManageDataSource,
 }: {
+  navigation: NavigationPublicPluginStart;
+  application: ApplicationStart;
+  useNewUX: boolean;
   showDeleteIcon: boolean;
   isFormValid: boolean;
   onClickDeleteIcon: () => void;
@@ -67,6 +78,7 @@ export const Header = ({
         iconType={isDefaultDataSourceState ? 'starFilled' : 'starEmpty'}
         aria-label={setDefaultAriaLabel}
         data-test-subj="editSetDefaultDataSource"
+        iconSize="s"
       >
         {isDefaultDataSourceState ? 'Default' : 'Set as default'}
       </EuiSmallButtonEmpty>
@@ -88,14 +100,13 @@ export const Header = ({
               setIsDeleteModalVisible(true);
             }}
             iconType="trash"
-            iconSize="m"
-            size="m"
             aria-label={i18n.translate(
               'dataSourcesManagement.editDataSource.deleteThisDataSource',
               {
                 defaultMessage: 'Delete this Data Source',
               }
             )}
+            iconSize="s"
           />
         </EuiToolTip>
 
@@ -154,6 +165,7 @@ export const Header = ({
           onClickTestConnection();
         }}
         data-test-subj="datasource-edit-testConnectionButton"
+        iconSize="s"
       >
         <FormattedMessage
           id="dataSourcesManagement.createDataSource.testConnectionButton"
@@ -163,7 +175,31 @@ export const Header = ({
     );
   };
 
-  return (
+  const rightSideActions = [
+    {
+      renderComponent: (
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+            {/* Test default button */}
+            <EuiFlexItem grow={false}>{renderDefaultIcon()}</EuiFlexItem>
+            {/* Test connection button */}
+            <EuiFlexItem grow={false}>{renderTestConnectionButton()}</EuiFlexItem>
+            {/* Delete icon button */}
+            {canManageDataSource ? (
+              <EuiFlexItem grow={false}>{showDeleteIcon ? renderDeleteButton() : null}</EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      ),
+    } as TopNavControlComponentData,
+  ];
+
+  return useNewUX ? (
+    <navigation.ui.HeaderControl
+      setMountPoint={application.setAppRightControls}
+      controls={rightSideActions}
+    />
+  ) : (
     <EuiFlexGroup justifyContent="spaceBetween">
       {/* Title */}
       <EuiFlexItem grow={false}>
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
index fbf63aaecb0d..5163506c9e3a 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.tsx
@@ -47,6 +47,7 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
     http,
     notifications: { toasts },
     application,
+    navigation,
   } = useOpenSearchDashboards<DataSourceManagementContext>().services;
   const dataSourceID: string = props.match.params.id;
 
@@ -54,6 +55,7 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
   const [dataSource, setDataSource] = useState<DataSourceAttributes>(defaultDataSource);
   const [existingDatasourceNamesList, setExistingDatasourceNamesList] = useState<string[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const useNewUX = uiSettings.get('home:useNewHomePage');
 
   /* Fetch data source by id*/
   useEffectOnce(() => {
@@ -155,6 +157,9 @@ export const EditDataSource: React.FunctionComponent<RouteComponentProps<{ id: s
       <>
         {dataSource && dataSource.endpoint ? (
           <EditDataSourceForm
+            navigation={navigation}
+            application={application}
+            useNewUX={useNewUX}
             existingDataSource={dataSource}
             existingDatasourceNamesList={existingDatasourceNamesList}
             isDefault={isDefaultDataSource}
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
index c489a6a73936..3eb095585df3 100644
--- 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
@@ -13,6 +13,7 @@ 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 { CreateDataSourceWizardWithRouter } from '../components/create_data_source_wizard';
 import { EditDataSourceWithRouter } from '../components/edit_data_source';
@@ -25,6 +26,7 @@ import { DirectQueryDataConnectionDetail } from '../components/direct_query_data
 
 export interface DataSourceManagementStartDependencies {
   data: DataPublicPluginStart;
+  navigation: NavigationPublicPluginStart;
 }
 
 export async function mountManagementSection(
@@ -35,6 +37,7 @@ export async function mountManagementSection(
 ) {
   const [
     { chrome, application, savedObjects, uiSettings, notifications, overlays, http, docLinks },
+    { navigation },
   ] = await getStartServices();
 
   const deps: DataSourceManagementContext = {
@@ -46,11 +49,13 @@ export async function mountManagementSection(
     overlays,
     http,
     docLinks,
+    navigation,
     setBreadcrumbs: params.setBreadcrumbs,
     authenticationMethodRegistry: authMethodsRegistry,
   };
 
   const canManageDataSource = !!application.capabilities?.dataSource?.canManage;
+  const useNewUX = uiSettings.get('home:useNewHomePage');
 
   const content = (
     <Router history={params.history}>
@@ -62,11 +67,16 @@ export async function mountManagementSection(
             notifications={notifications}
             setBreadcrumbs={params.setBreadcrumbs}
             application={application}
+            useNewUX={useNewUX}
           />
         </Route>
         {canManageDataSource && (
           <Route path={['/create']}>
-            <CreateDataSourcePanel {...params} featureFlagStatus={featureFlagStatus} />
+            <CreateDataSourcePanel
+              {...params}
+              featureFlagStatus={featureFlagStatus}
+              useNewUX={useNewUX}
+            />
           </Route>
         )}
         {featureFlagStatus && canManageDataSource && (
@@ -76,7 +86,10 @@ export async function mountManagementSection(
         )}
         {canManageDataSource && (
           <Route path={['/configure/:type']}>
-            <ConfigureDirectQueryDataSourceWithRouter notifications={notifications} />
+            <ConfigureDirectQueryDataSourceWithRouter
+              notifications={notifications}
+              useNewUX={useNewUX}
+            />
           </Route>
         )}
         {featureFlagStatus && (
@@ -85,7 +98,11 @@ export async function mountManagementSection(
           </Route>
         )}
         <Route path={['/']}>
-          <DataSourceHomePanel history={params.history} featureFlagStatus={featureFlagStatus} />
+          <DataSourceHomePanel
+            history={params.history}
+            featureFlagStatus={featureFlagStatus}
+            useNewUX={useNewUX}
+          />
         </Route>
       </Switch>
     </Router>
diff --git a/src/plugins/data_source_management/public/types.ts b/src/plugins/data_source_management/public/types.ts
index d09591147001..dc3c54505acc 100644
--- a/src/plugins/data_source_management/public/types.ts
+++ b/src/plugins/data_source_management/public/types.ts
@@ -16,6 +16,7 @@ import {
 import { ManagementAppMountParams } from 'src/plugins/management/public';
 import { i18n } from '@osd/i18n';
 import { EuiComboBoxOptionOption } from '@elastic/eui';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { AuthType } from '../../data_source/common/data_sources';
 import { SigV4ServiceName } from '../../data_source/common/data_sources';
 import { OpenSearchDashboardsReactContextValue } from '../../opensearch_dashboards_react/public';
@@ -33,6 +34,7 @@ export interface DataSourceManagementContext {
   overlays: OverlayStart;
   http: HttpSetup;
   docLinks: DocLinksStart;
+  navigation: NavigationPublicPluginStart;
   setBreadcrumbs: ManagementAppMountParams['setBreadcrumbs'];
   authenticationMethodRegistry: AuthenticationMethodRegistry;
 }

From 96fcf3977966419dfe539fd0e9f2d98f05ad6cad Mon Sep 17 00:00:00 2001
From: Wei Wang <weiwangv@amazon.com>
Date: Mon, 26 Aug 2024 16:23:48 -0700
Subject: [PATCH 2/3] update unit tests for page header change

Signed-off-by: Wei Wang <weiwangv@amazon.com>
---
 .../create_data_source_panel.test.tsx         |  3 +-
 .../data_source_home_panel.test.tsx           | 12 ++++-
 .../data_source_table.test.tsx.snap           | 28 ++++------
 ...figure_amazon_s3_data_source.test.tsx.snap | 27 ++++++----
 ...igure_prometheus_data_source.test.tsx.snap | 52 ++++++++++---------
 .../edit_data_source.test.tsx                 |  7 ++-
 .../mount_management_section.test.tsx         | 24 ++++++++-
 7 files changed, 98 insertions(+), 55 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.test.tsx b/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.test.tsx
index 5884dadc5876..235446ffbfea 100644
--- a/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_creation_panel/create_data_source_panel.test.tsx
@@ -10,8 +10,8 @@ import { CreateDataSourcePanelHeader } from './create_data_source_panel_header';
 import { CreateDataSourceCardView } from './create_data_source_card_view';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getCreateBreadcrumbs } from '../breadcrumbs';
-import { DataSourceManagementContext } from '../../types';
 import { RouteComponentProps } from 'react-router-dom';
+import { navigationPluginMock } from 'src/plugins/navigation/public/mocks';
 
 jest.mock('../../../../opensearch_dashboards_react/public');
 jest.mock('../breadcrumbs');
@@ -34,6 +34,7 @@ describe('CreateDataSourcePanel', () => {
         },
       },
       uiSettings: {},
+      navigation: navigationPluginMock.createStartContract(),
     },
   };
 
diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx
index 1f451b1531e9..aab2971ae7eb 100644
--- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx
@@ -10,9 +10,9 @@ import { EuiTab } from '@elastic/eui';
 import { DataSourceHomePanel } from './data_source_home_panel';
 import { DataSourceTableWithRouter } from '../data_source_table/data_source_table';
 import { ManageDirectQueryDataConnectionsTable } from '../direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table';
-import { CreateButton } from '../create_button';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { getListBreadcrumbs } from '../breadcrumbs';
+import { navigationPluginMock } from 'src/plugins/navigation/public/mocks';
 
 jest.mock('../../../../opensearch_dashboards_react/public');
 jest.mock('../breadcrumbs');
@@ -42,6 +42,16 @@ describe('DataSourceHomePanel', () => {
       savedObjects: {},
       uiSettings: {},
       application: { capabilities: { dataSource: { canManage: true } } },
+      docLinks: {
+        links: {
+          opensearchDashboards: {
+            dataSource: {
+              guide: 'https://opensearch.org/docs/latest/dashboards/discover/multi-data-sources/',
+            },
+          },
+        },
+      },
+      navigation: navigationPluginMock.createStartContract(),
     },
   };
 
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 3f12831b546b..770b2ab00efa 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
@@ -140,7 +140,6 @@ exports[`DataSourceTable should get datasources failed should render empty table
                 >
                   <EuiButtonContent
                     className="euiButton__content"
-                    iconGap="m"
                     iconSide="left"
                     textProps={
                       Object {
@@ -369,6 +368,7 @@ exports[`DataSourceTable should get datasources successful should render normall
               },
             },
           },
+          "compressed": true,
           "toolsRight": <EuiFlexItem
             grow={false}
           >
@@ -416,6 +416,7 @@ exports[`DataSourceTable should get datasources successful should render normall
               },
             }
           }
+          compressed={true}
           onChange={[Function]}
           toolsRight={
             <EuiFlexItem
@@ -452,6 +453,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                   className="euiFlexItem euiSearchBar__searchHolder"
                 >
                   <EuiSearchBox
+                    compressed={true}
                     incremental={true}
                     isInvalid={false}
                     onSearch={[Function]}
@@ -460,7 +462,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                   >
                     <EuiFieldSearch
                       aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                      compressed={false}
+                      compressed={true}
                       defaultValue=""
                       fullWidth={true}
                       incremental={true}
@@ -472,13 +474,13 @@ exports[`DataSourceTable should get datasources successful should render normall
                       placeholder="Search..."
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={true}
                         icon="search"
                         isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
@@ -488,7 +490,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                             >
                               <input
                                 aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                                 defaultValue=""
                                 onKeyUp={[Function]}
                                 placeholder="Search..."
@@ -496,7 +498,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                               />
                             </EuiValidatableControl>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon="search"
                               isLoading={false}
                             >
@@ -504,7 +506,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                 className="euiFormControlLayoutIcons"
                               >
                                 <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                                  size="s"
                                   type="search"
                                 >
                                   <span
@@ -513,14 +515,14 @@ exports[`DataSourceTable should get datasources successful should render normall
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="search"
                                     >
                                       <span
                                         aria-hidden="true"
                                         className="euiFormControlLayoutCustomIcon__icon"
                                         data-euiicon-type="search"
-                                        size="m"
+                                        size="s"
                                       />
                                     </EuiIcon>
                                   </span>
@@ -585,7 +587,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                             >
                               <EuiButtonContent
                                 className="euiButton__content"
-                                iconGap="m"
                                 iconSide="left"
                                 textProps={
                                   Object {
@@ -843,7 +844,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                       >
                                         <EuiButtonContent
                                           className="euiButtonEmpty__content"
-                                          iconGap="m"
                                           iconSide="right"
                                           iconSize="s"
                                           iconType="arrowDown"
@@ -1205,7 +1205,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
-                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1359,7 +1358,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
-                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1513,7 +1511,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
-                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1707,7 +1704,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
-                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1877,7 +1873,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
-                                      iconGap="m"
                                       iconSide="right"
                                       iconSize="s"
                                       iconType="arrowDown"
@@ -2048,7 +2043,6 @@ exports[`DataSourceTable should get datasources successful should render normall
                                             >
                                               <EuiButtonContent
                                                 className="euiButtonEmpty__content"
-                                                iconGap="m"
                                                 iconSide="left"
                                                 iconSize="m"
                                                 textProps={
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap
index 43a97eea699d..20f31d9814d9 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap
@@ -225,7 +225,7 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                                 <div
                                   className="euiTextColor euiTextColor--subdued"
                                 >
-                                  Connect to Amazon S3 via AWS Glue Data Catalog with Amazon EMR as an execution engine. 
+                                  Make sure you connected to Amazon S3 via AWS Glue Data Catalog with Amazon EMR as an execution engine. 
                                 </div>
                               </EuiTextColor>
                             </div>
@@ -236,14 +236,17 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                   </EuiText>
                 </div>
               </EuiCallOut>
+               
               <EuiSpacer>
                 <div
                   className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
-              <EuiText>
+              <EuiText
+                size="s"
+              >
                 <div
-                  className="euiText euiText--medium"
+                  className="euiText euiText--small"
                 >
                   <h3>
                     Data source details
@@ -448,9 +451,11 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                   className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
-              <EuiText>
+              <EuiText
+                size="s"
+              >
                 <div
-                  className="euiText euiText--medium"
+                  className="euiText euiText--small"
                 >
                   <h3>
                     AWS Glue Data Catalog authentication details
@@ -645,9 +650,11 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                   className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
-              <EuiText>
+              <EuiText
+                size="s"
+              >
                 <div
-                  className="euiText euiText--medium"
+                  className="euiText euiText--small"
                 >
                   <h3>
                     AWS Glue Data Catalog index store details
@@ -1199,9 +1206,11 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                           <div
                             className="euiFlexItem"
                           >
-                            <EuiText>
+                            <EuiText
+                              size="s"
+                            >
                               <div
-                                className="euiText euiText--medium"
+                                className="euiText euiText--small"
                               >
                                 <h3>
                                   Query permissions
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap
index 2032dacce601..7cf177579596 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap
@@ -106,17 +106,25 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                   <div
                     className="euiTextColor euiTextColor--subdued"
                   >
-                    Connect to Prometheus with OpenSearch and OpenSearch Dashboards. 
+                    <FormattedMessage
+                      defaultMessage="Connect to Prometheus with OpenSearch and OpenSearch Dashboards. "
+                      id="dataSourcesManagement.configurePrometheusDataSource.description"
+                      values={Object {}}
+                    >
+                      <span>
+                        Connect to Prometheus with OpenSearch and OpenSearch Dashboards. 
+                      </span>
+                    </FormattedMessage>
                     <EuiLink
                       external={true}
                       href="https://opensearch.org/docs/latest/dashboards/management/data-sources/"
-                      target="_blank"
+                      target="blank"
                     >
                       <a
                         className="euiLink euiLink--primary"
                         href="https://opensearch.org/docs/latest/dashboards/management/data-sources/"
-                        rel="noopener noreferrer"
-                        target="_blank"
+                        rel="noreferrer"
+                        target="blank"
                       >
                         Learn more
                         <EuiIcon
@@ -132,18 +140,6 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                             size="s"
                           />
                         </EuiIcon>
-                        <EuiScreenReaderOnly>
-                          <span
-                            className="euiScreenReaderOnly"
-                          >
-                            <EuiI18n
-                              default="(opens in a new tab or window)"
-                              token="euiLink.newTarget.screenReaderOnlyText"
-                            >
-                              (opens in a new tab or window)
-                            </EuiI18n>
-                          </span>
-                        </EuiScreenReaderOnly>
                       </a>
                     </EuiLink>
                   </div>
@@ -161,9 +157,11 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
               <form
                 className="euiForm"
               >
-                <EuiText>
+                <EuiText
+                  size="s"
+                >
                   <div
-                    className="euiText euiText--medium"
+                    className="euiText euiText--small"
                   >
                     <h3>
                       Data source details
@@ -371,9 +369,11 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                     className="euiSpacer euiSpacer--l"
                   />
                 </EuiSpacer>
-                <EuiText>
+                <EuiText
+                  size="s"
+                >
                   <div
-                    className="euiText euiText--medium"
+                    className="euiText euiText--small"
                   >
                     <h3>
                       Prometheus data location
@@ -483,9 +483,11 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                     className="euiSpacer euiSpacer--l"
                   />
                 </EuiSpacer>
-                <EuiText>
+                <EuiText
+                  size="s"
+                >
                   <div
-                    className="euiText euiText--medium"
+                    className="euiText euiText--small"
                   >
                     <h3>
                       Authentication details
@@ -947,9 +949,11 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                             <div
                               className="euiFlexItem"
                             >
-                              <EuiText>
+                              <EuiText
+                                size="s"
+                              >
                                 <div
-                                  className="euiText euiText--medium"
+                                  className="euiText euiText--small"
                                 >
                                   <h3>
                                     Query permissions
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
index f53744d67716..9645443ff1dd 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/edit_data_source.test.tsx
@@ -142,7 +142,12 @@ describe('Datasource Management: Edit Datasource Wizard', () => {
     test('should delete datasource successfully', async () => {
       spyOn(utils, 'deleteDataSourceById').and.returnValue({});
       spyOn(utils, 'setFirstDataSourceAsDefault').and.returnValue({});
-      spyOn(uiSettings, 'get').and.returnValue('test1');
+      spyOn(uiSettings, 'get').and.callFake((key) => {
+        if (key === 'home:useNewHomePage') {
+          return false;
+        }
+        return 'test1';
+      });
       await act(async () => {
         // @ts-ignore
         await component.find(formIdentifier).first().prop('onDeleteDataSource')(
diff --git a/src/plugins/data_source_management/public/management_app/mount_management_section.test.tsx b/src/plugins/data_source_management/public/management_app/mount_management_section.test.tsx
index 4b7bd3ab5c8b..02a0af351a23 100644
--- a/src/plugins/data_source_management/public/management_app/mount_management_section.test.tsx
+++ b/src/plugins/data_source_management/public/management_app/mount_management_section.test.tsx
@@ -49,12 +49,22 @@ const mockStartServices: StartServicesAccessor<DataSourceManagementStartDependen
       chrome: { docTitle: { reset: jest.fn() } },
       application: {},
       savedObjects: {},
-      uiSettings: {},
+      uiSettings: {
+        get: jest.fn((key) => {
+          if (key === 'home:useNewHomePage') {
+            return false;
+          }
+          return 'default';
+        }),
+      },
       notifications: {},
       overlays: {},
       http: {},
       docLinks: {},
     },
+    {
+      navigation: {},
+    },
   ]);
 
 const mockParams: any = {
@@ -128,12 +138,22 @@ describe('mountManagementSection', () => {
           chrome: { docTitle: { reset: jest.fn() } },
           application: { capabilities: { dataSource: { canManage: false } } },
           savedObjects: {},
-          uiSettings: {},
+          uiSettings: {
+            get: jest.fn((key) => {
+              if (key === 'home:useNewHomePage') {
+                return false;
+              }
+              return 'default';
+            }),
+          },
           notifications: {},
           overlays: {},
           http: {},
           docLinks: {},
         },
+        {
+          navigation: {},
+        },
       ]);
 
     await mountManagementSection(mockGetStartServices, mockParams, mockAuthMethodsRegistry, true);

From 32b0f5f8d49526ccb32c082d76e1aed6060bb684 Mon Sep 17 00:00:00 2001
From: Wei Wang <weiwangv@amazon.com>
Date: Mon, 26 Aug 2024 20:21:47 -0700
Subject: [PATCH 3/3] make button group smaller and change section title to h2

Signed-off-by: Wei Wang <weiwangv@amazon.com>
---
 .../create_form/create_data_source_form.tsx   |  6 +++---
 .../data_source_home_panel.test.tsx.snap      |  3 ---
 .../data_source_home_panel.tsx                |  2 +-
 .../data_source_table.test.tsx.snap           |  9 +++++++++
 ...query_data_connections_table.test.tsx.snap |  3 ---
 ...ge_direct_query_data_connections_table.tsx |  1 -
 .../query_permissions.test.tsx.snap           | 10 ++++++----
 ...figure_amazon_s3_data_source.test.tsx.snap | 16 +++++++--------
 .../configure_amazon_s3_data_source.tsx       |  6 +++---
 ...igure_prometheus_data_source.test.tsx.snap | 16 +++++++--------
 .../configure_prometheus_data_source.tsx      |  6 +++---
 .../query_permissions.tsx                     |  2 +-
 .../edit_form/edit_data_source_form.tsx       | 20 +++++++++----------
 .../mount_management_section.tsx              |  2 +-
 14 files changed, 53 insertions(+), 49 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
index fabb4a7a1a82..f2eb7778e8e7 100644
--- a/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx
@@ -404,9 +404,9 @@ export class CreateDataSourceForm extends React.Component<
     return (
       <>
         <EuiText grow={false} size="s">
-          <h3>
+          <h2>
             <FormattedMessage id={i18nId} defaultMessage={defaultMessage} />
-          </h3>
+          </h2>
         </EuiText>
       </>
     );
@@ -773,7 +773,7 @@ export class CreateDataSourceForm extends React.Component<
             >
               <FormattedMessage
                 id="dataSourcesManagement.createDataSource.createButtonLabel"
-                defaultMessage="Create data source"
+                defaultMessage="Connect to OpenSearch Cluster"
               />
             </EuiButton>
           </EuiFlexItem>
diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
index e4144646e0b0..cda3acc64031 100644
--- a/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
@@ -61,9 +61,6 @@ exports[`DataSourceHomePanel renders correctly 1`] = `
       </EuiTabs>
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiSpacer
-        size="s"
-      />
       <DataSourceTableWithRouter
         history={
           Object {
diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
index 3f3d88077ab5..dfb3fc0ae188 100644
--- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx
@@ -101,6 +101,7 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
       renderComponent: (
         <EuiButtonGroup
           legend="connection type"
+          buttonSize="compressed"
           options={[
             { id: 'manageOpensearchDataSources', label: 'OpenSearch connections' },
             { id: 'manageDirectQueryDataSources', label: 'Direct query connections' },
@@ -183,7 +184,6 @@ export const DataSourceHomePanel: React.FC<DataSourceHomePanelProps> = ({
           </>
         )}
         <EuiFlexItem>
-          <EuiSpacer size="s" />
           {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && (
             <DataSourceTableWithRouter {...props} />
           )}
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 770b2ab00efa..9dc785b13b4e 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
@@ -140,6 +140,7 @@ exports[`DataSourceTable should get datasources failed should render empty table
                 >
                   <EuiButtonContent
                     className="euiButton__content"
+                    iconGap="m"
                     iconSide="left"
                     textProps={
                       Object {
@@ -587,6 +588,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                             >
                               <EuiButtonContent
                                 className="euiButton__content"
+                                iconGap="m"
                                 iconSide="left"
                                 textProps={
                                   Object {
@@ -844,6 +846,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                       >
                                         <EuiButtonContent
                                           className="euiButtonEmpty__content"
+                                          iconGap="m"
                                           iconSide="right"
                                           iconSize="s"
                                           iconType="arrowDown"
@@ -1205,6 +1208,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
+                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1358,6 +1362,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
+                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1511,6 +1516,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
+                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1704,6 +1710,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
+                                      iconGap="m"
                                       iconSide="left"
                                       iconSize="s"
                                       textProps={
@@ -1873,6 +1880,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                   >
                                     <EuiButtonContent
                                       className="euiButtonEmpty__content"
+                                      iconGap="m"
                                       iconSide="right"
                                       iconSize="s"
                                       iconType="arrowDown"
@@ -2043,6 +2051,7 @@ exports[`DataSourceTable should get datasources successful should render normall
                                             >
                                               <EuiButtonContent
                                                 className="euiButtonEmpty__content"
+                                                iconGap="m"
                                                 iconSide="left"
                                                 iconSize="m"
                                                 textProps={
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
index 3779e10dac95..7269ffca7bb9 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/__snapshots__/manage_direct_query_data_connections_table.test.tsx.snap
@@ -5,9 +5,6 @@ exports[`ManageDirectQueryDataConnectionsTable matches snapshot 1`] = `
   <div
     class="euiPageBody euiPageBody--borderRadiusNone"
   >
-    <div
-      class="euiSpacer euiSpacer--s"
-    />
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
index 1df5b7b87bb8..9d38347f3dac 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_connection/manage_direct_query_data_connections_table.tsx
@@ -331,7 +331,6 @@ export const ManageDirectQueryDataConnectionsTable: React.FC<ManageDirectQueryDa
 
   return (
     <EuiPageBody component="div">
-      <EuiSpacer size="s" />
       <EuiFlexGroup justifyContent="center">
         <EuiFlexItem grow={false} style={{ width: '100%' }}>
           {customSearchBar}
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/__snapshots__/query_permissions.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/__snapshots__/query_permissions.test.tsx.snap
index 36b12e2b510c..ec2445107be8 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/__snapshots__/query_permissions.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/__snapshots__/query_permissions.test.tsx.snap
@@ -34,13 +34,15 @@ exports[`QueryPermissionsConfiguration renders correctly 1`] = `
               <div
                 className="euiFlexItem"
               >
-                <EuiText>
+                <EuiText
+                  size="s"
+                >
                   <div
-                    className="euiText euiText--medium"
+                    className="euiText euiText--small"
                   >
-                    <h3>
+                    <h2>
                       Query permissions
-                    </h3>
+                    </h2>
                   </div>
                 </EuiText>
                 <EuiText
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap
index 20f31d9814d9..1616f4bc22a2 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/__snapshots__/configure_amazon_s3_data_source.test.tsx.snap
@@ -248,9 +248,9 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                 <div
                   className="euiText euiText--small"
                 >
-                  <h3>
+                  <h2>
                     Data source details
-                  </h3>
+                  </h2>
                 </div>
               </EuiText>
               <EuiSpacer
@@ -457,9 +457,9 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                 <div
                   className="euiText euiText--small"
                 >
-                  <h3>
+                  <h2>
                     AWS Glue Data Catalog authentication details
-                  </h3>
+                  </h2>
                 </div>
               </EuiText>
               <EuiSpacer
@@ -656,9 +656,9 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                 <div
                   className="euiText euiText--small"
                 >
-                  <h3>
+                  <h2>
                     AWS Glue Data Catalog index store details
-                  </h3>
+                  </h2>
                 </div>
               </EuiText>
               <EuiSpacer
@@ -1212,9 +1212,9 @@ exports[`ConfigureS3DatasourcePanel renders correctly 1`] = `
                               <div
                                 className="euiText euiText--small"
                               >
-                                <h3>
+                                <h2>
                                   Query permissions
-                                </h3>
+                                </h2>
                               </div>
                             </EuiText>
                             <EuiText
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx
index 38bbca779815..d6d9b7992f6b 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/amazon_s3/configure_amazon_s3_data_source.tsx
@@ -152,7 +152,7 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
           </>
         )}
         <EuiText size="s">
-          <h3>Data source details</h3>
+          <h2>Data source details</h2>
         </EuiText>
         <EuiSpacer size="m" />
         <NameRow
@@ -176,7 +176,7 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
         <EuiSpacer />
 
         <EuiText size="s">
-          <h3>AWS Glue Data Catalog authentication details</h3>
+          <h2>AWS Glue Data Catalog authentication details</h2>
         </EuiText>
         <EuiSpacer size="m" />
 
@@ -218,7 +218,7 @@ export const ConfigureS3DatasourcePanel: React.FC<ConfigureS3DatasourceProps> =
         <EuiSpacer />
 
         <EuiText size="s">
-          <h3>AWS Glue Data Catalog index store details</h3>
+          <h2>AWS Glue Data Catalog index store details</h2>
         </EuiText>
         <EuiSpacer size="m" />
 
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap
index 7cf177579596..e630120bf7cc 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/__snapshots__/configure_prometheus_data_source.test.tsx.snap
@@ -163,9 +163,9 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                   <div
                     className="euiText euiText--small"
                   >
-                    <h3>
+                    <h2>
                       Data source details
-                    </h3>
+                    </h2>
                   </div>
                 </EuiText>
                 <EuiSpacer
@@ -375,9 +375,9 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                   <div
                     className="euiText euiText--small"
                   >
-                    <h3>
+                    <h2>
                       Prometheus data location
-                    </h3>
+                    </h2>
                   </div>
                 </EuiText>
                 <EuiSpacer
@@ -489,9 +489,9 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                   <div
                     className="euiText euiText--small"
                   >
-                    <h3>
+                    <h2>
                       Authentication details
-                    </h3>
+                    </h2>
                   </div>
                 </EuiText>
                 <EuiSpacer
@@ -955,9 +955,9 @@ exports[`ConfigurePrometheusDatasourcePanel renders correctly 1`] = `
                                 <div
                                   className="euiText euiText--small"
                                 >
-                                  <h3>
+                                  <h2>
                                     Query permissions
-                                  </h3>
+                                  </h2>
                                 </div>
                               </EuiText>
                               <EuiText
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx
index 74b425dffdc7..36461943ca6e 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/prometheus/configure_prometheus_data_source.tsx
@@ -122,7 +122,7 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
         )}
         <EuiForm component="form">
           <EuiText size="s">
-            <h3>Data source details</h3>
+            <h2>Data source details</h2>
           </EuiText>
           <EuiSpacer size="m" />
           <NameRow
@@ -147,7 +147,7 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
           <EuiSpacer />
 
           <EuiText size="s">
-            <h3>Prometheus data location</h3>
+            <h2>Prometheus data location</h2>
           </EuiText>
           <EuiSpacer size="m" />
 
@@ -172,7 +172,7 @@ export const ConfigurePrometheusDatasourcePanel = (props: ConfigurePrometheusDat
           <EuiSpacer />
 
           <EuiText size="s">
-            <h3>Authentication details</h3>
+            <h2>Authentication details</h2>
           </EuiText>
           <EuiSpacer size="m" />
 
diff --git a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx
index 69748897f466..c6e7a64604bd 100644
--- a/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx
+++ b/src/plugins/data_source_management/public/components/direct_query_data_sources_components/direct_query_data_source_configuration/query_permissions.tsx
@@ -71,7 +71,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
       <EuiFlexGroup direction={layout === 'horizontal' ? 'row' : 'column'}>
         <EuiFlexItem>
           <EuiText size="s">
-            <h3>Query permissions</h3>
+            <h2>Query permissions</h2>
           </EuiText>
           <EuiText size="s">
             <p>
diff --git a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
index 37dcb27c114f..125539a4dfc5 100644
--- a/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
+++ b/src/plugins/data_source_management/public/components/edit_data_source/components/edit_form/edit_data_source_form.tsx
@@ -686,14 +686,14 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     return (
       <EuiPanel paddingSize="m">
         <EuiText size="s">
-          <h3>
+          <h2>
             {
               <FormattedMessage
                 id="dataSourcesManagement.editDataSource.connectionDetailsText"
                 defaultMessage="Connection Details"
               />
             }
-          </h3>
+          </h2>
         </EuiText>
 
         <EuiHorizontalRule margin="m" />
@@ -701,14 +701,14 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         <EuiDescribedFormGroup
           title={
             <EuiText size="s">
-              <h4>
+              <h3>
                 {
                   <FormattedMessage
                     id="dataSourcesManagement.editDataSource.objectDetailsText"
                     defaultMessage="Object Details"
                   />
                 }
-              </h4>
+              </h3>
             </EuiText>
           }
           description={
@@ -774,14 +774,14 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     return (
       <EuiPanel paddingSize="m">
         <EuiText size="s">
-          <h3>
+          <h2>
             {
               <FormattedMessage
                 id="dataSourcesManagement.editDataSource.endpointTitle"
                 defaultMessage="Endpoint"
               />
             }
-          </h3>
+          </h2>
         </EuiText>
 
         <EuiHorizontalRule margin="m" />
@@ -810,14 +810,14 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
     return (
       <EuiPanel paddingSize="m">
         <EuiText size="s">
-          <h3>
+          <h2>
             {
               <FormattedMessage
                 id="dataSourcesManagement.editDataSource.authenticationTitle"
                 defaultMessage="Authentication"
               />
             }
-          </h3>
+          </h2>
         </EuiText>
 
         <EuiHorizontalRule margin="m" />
@@ -825,14 +825,14 @@ export class EditDataSourceForm extends React.Component<EditDataSourceProps, Edi
         <EuiDescribedFormGroup
           title={
             <EuiText size="s">
-              <h4>
+              <h3>
                 {
                   <FormattedMessage
                     id="dataSourcesManagement.editDataSource.authenticationMethod"
                     defaultMessage="Authentication Method"
                   />
                 }
-              </h4>
+              </h3>
             </EuiText>
           }
         >
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
index 3eb095585df3..545a76ec2736 100644
--- 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
@@ -112,7 +112,7 @@ export async function mountManagementSection(
     <OpenSearchDashboardsContextProvider services={deps}>
       <I18nProvider>
         {params.wrapInPage ? (
-          <EuiPageContent hasShadow={false} hasBorder={false} color="transparent">
+          <EuiPageContent hasShadow={false} hasBorder={false} color="transparent" paddingSize="m">
             {content}
           </EuiPageContent>
         ) : (