[Page Header]Implement new page header for admin data sources page (#…

…7833) * Implement new page header for admin data sources page Signed-off-by: Wei Wang <weiwangv@amazon.com> * update unit tests for page header change Signed-off-by: Wei Wang <weiwangv@amazon.com> * make button group smaller and change section title to h2 Signed-off-by: Wei Wang <weiwangv@amazon.com> --------- Signed-off-by: Wei Wang <weiwangv@amazon.com> Co-authored-by: Wei Wang <weiwangv@amazon.com>
opensearch-project · Aug 28, 2024 · cb273fc · cb273fc
1 parent 56fc8f4
commit cb273fc
Show file tree

Hide file tree

Showing 29 changed files with 549 additions and 275 deletions.
diff --git 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
@@ -28,44 +28,44 @@ 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`,
     },
   ];
 }
 
-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`,
     },
   ];
 }
 
-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/...c/components/create_data_source_wizard/components/create_form/create_data_source_form.tsx b/...c/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">
+          <h2>
             <FormattedMessage id={i18nId} defaultMessage={defaultMessage} />
-          </h4>
+          </h2>
         </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(
@@ -749,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/...ource_management/public/components/create_data_source_wizard/components/header/header.tsx b/...ource_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/...urce_management/public/components/create_data_source_wizard/create_data_source_wizard.tsx b/...urce_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/...management/public/components/data_source_creation_panel/create_data_source_panel.test.tsx b/...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/...urce_management/public/components/data_source_creation_panel/create_data_source_panel.tsx b/...urce_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/...blic/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap b/...blic/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap
diff --git a/...ource_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx b/...ource_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(),
     },
   };