[Backport 2.x] Page header

babel.config.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// babelrc doesn't respect NODE_PATH anymore but using require does.
+// Alternative to install them locally in node_modules
+module.exports = {
+  "presets": [
+    require('@babel/preset-env'),
+    require('@babel/preset-react'),
+    require('@babel/preset-typescript'),
+  ],
+  "plugins":
+    [
+      [require("@babel/plugin-transform-modules-commonjs"), { "allowTopLevelThis": true }],
+      [require('@babel/plugin-transform-runtime'), { regenerator: true }],
+      require('@babel/plugin-transform-class-properties'),
+      require('@babel/plugin-transform-object-rest-spread')
+    ]
+};

models/interfaces.ts

@@ -106,4 +106,5 @@ export interface TableState<T> {
   selectedItems: T[];
   items: T[];
   loading: boolean;
+  isPopoverOpen?: boolean; // Ensure this is included
 }

opensearch_dashboards.json

@@ -4,7 +4,8 @@
   "opensearchDashboardsVersion": "2.17.0",
   "requiredPlugins": [
     "navigation",
-    "data"
+    "data",
+    "opensearchDashboardsUtils"
   ],
   "optionalPlugins": [
     "share",

package.json

@@ -20,13 +20,12 @@
     "plugin_helpers": "node ../../scripts/plugin_helpers",
     "postbuild": "echo Renaming build artifact to [$npm_package_config_zip_name-$npm_package_version.zip] && mv build/$npm_package_config_id*.zip build/$npm_package_config_zip_name-$npm_package_version.zip"
   },
-  "dependencies": {},
   "devDependencies": {
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/showdown": "^1.9.3",
+    "cypress": "9.5.4",
     "enzyme-adapter-react-16": "^1.15.5",
-    "jest-dom": "^4.0.0",
-    "cypress": "9.5.4"
+    "jest-dom": "^4.0.0"
   },
   "resolutions": {
     "async": "^3.2.3",

public/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  TopNavControlData,
+  TopNavControlDescriptionData,
+  TopNavControlLinkData,
+} from '../../../../../src/plugins/navigation/public';
+import { getApplication, getNavigationUI, getUseUpdatedUx } from '../../services/utils/constants';
+
+export interface PageHeaderProps {
+  appRightControls?: TopNavControlData[];
+  appBadgeControls?: TopNavControlData[];
+  appDescriptionControls?: (TopNavControlDescriptionData | TopNavControlLinkData)[];
+  appLeftControls?: TopNavControlData[];
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({
+  children,
+  appBadgeControls,
+  appRightControls,
+  appDescriptionControls,
+  appLeftControls,
+}) => {
+  const { HeaderControl } = getNavigationUI();
+  const { setAppBadgeControls, setAppRightControls, setAppDescriptionControls, setAppLeftControls } = getApplication();
+
+  return getUseUpdatedUx() ? (
+    <>
+      <HeaderControl setMountPoint={setAppBadgeControls} controls={appBadgeControls} />
+      <HeaderControl setMountPoint={setAppRightControls} controls={appRightControls} />
+      <HeaderControl setMountPoint={setAppDescriptionControls} controls={appDescriptionControls} />
+      <HeaderControl setMountPoint={setAppLeftControls} controls={appLeftControls} />
+    </>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default PageHeader;

public/pages/Channels/Channels.tsx

@@ -12,12 +12,13 @@ import {
   EuiLink,
   EuiTableFieldDataColumnType,
   EuiTableSortingType,
+  EuiTitle,
   SortDirection,
 } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
 import _ from 'lodash';
-import React, { Component, useContext } from 'react';
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { ChannelItemType, TableState } from '../../../models/interfaces';
 import {
@@ -29,6 +30,7 @@ import { NotificationService } from '../../services';
 import {
   BREADCRUMBS,
   ROUTES,
+  setBreadcrumbs,
 } from '../../utils/constants';
 import {
   CHANNEL_TYPE,
@@ -43,6 +45,9 @@ import MDSEnabledComponent, {
   isDataSourceChanged,
   isDataSourceError,
 } from '../../components/MDSEnabledComponent/MDSEnabledComponent';
+import PageHeader from "../../components/PageHeader/PageHeader"
+import { getUseUpdatedUx } from '../../services/utils/constants';
+import { TopNavControlButtonData } from 'src/plugins/navigation/public';
 
 interface ChannelsProps extends RouteComponentProps, DataSourceMenuProperties {
   notificationService: NotificationService;
@@ -115,7 +120,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
   }
 
   async componentDidMount() {
-    this.context.chrome.setBreadcrumbs([
+    setBreadcrumbs([
       BREADCRUMBS.NOTIFICATIONS,
       BREADCRUMBS.CHANNELS,
     ]);
@@ -215,26 +220,82 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
       onSelectionChange: this.onSelectionChange,
     };
 
+    const headerControls = [
+      {
+        id: 'Create Channel',
+        label: 'Create channel',
+        iconType: 'plus',
+        fill: true,
+        href: `#${ROUTES.CREATE_CHANNEL}`,
+        testId: 'createButton',
+        controlType: 'button',
+      } as TopNavControlButtonData,
+    ];
+
+    const totalChannels = (
+      <EuiTitle size="m">
+        <h2>({this.state.total})</h2>
+      </EuiTitle>
+    )
+
+    const channelActionsComponent = <ChannelActions
+      selected={this.state.selectedItems}
+      setSelected={(selectedItems: ChannelItemType[]) => this.setState({ selectedItems })}
+      items={this.state.items}
+      setItems={(items: ChannelItemType[]) => this.setState({ items })}
+      refresh={this.refresh} />;
+
+    const channelControlsComponent = <ChannelControls
+      onSearchChange={this.onSearchChange}
+      filters={this.state.filters}
+      onFiltersChange={this.onFiltersChange} />;
+
+    const basicTableComponent = <EuiBasicTable
+      columns={this.columns}
+      items={this.state.items}
+      itemId="config_id"
+      isSelectable={true}
+      selection={selection}
+      noItemsMessage={<EuiEmptyPrompt
+        title={<h2>No channels to display</h2>}
+        body="To send or receive notifications, you will need to create a notification channel."
+        actions={<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
+          Create channel
+        </EuiSmallButton>} />}
+      onChange={this.onTableChange}
+      pagination={pagination}
+      sorting={sorting}
+      tableLayout="auto"
+      loading={this.state.loading} />;
+
     return (
       <>
+      {getUseUpdatedUx() ? (
+        <>
+          <PageHeader
+            appRightControls={headerControls}
+            appLeftControls={[{ renderComponent: totalChannels }]}
+          />
+          <ContentPanel>
+            <div style={{ marginBottom: '10px' }}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                {channelControlsComponent}
+                <div style={{ marginLeft: '10px' }}>
+                  {channelActionsComponent}
+                </div>
+              </div>
+            </div>
+            <EuiHorizontalRule margin="s" />
+            {basicTableComponent}
+          </ContentPanel>
+        </>
+      ) : (
         <ContentPanel
           actions={
             <ContentPanelActions
               actions={[
                 {
-                  component: (
-                    <ChannelActions
-                      selected={this.state.selectedItems}
-                      setSelected={(selectedItems: ChannelItemType[]) =>
-                        this.setState({ selectedItems })
-                      }
-                      items={this.state.items}
-                      setItems={(items: ChannelItemType[]) =>
-                        this.setState({ items })
-                      }
-                      refresh={this.refresh}
-                    />
-                  ),
+                  component: channelActionsComponent,
                 },
                 {
                   component: (
@@ -251,38 +312,14 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
           titleSize="m"
           total={this.state.total}
         >
-          <ChannelControls
-            onSearchChange={this.onSearchChange}
-            filters={this.state.filters}
-            onFiltersChange={this.onFiltersChange}
-          />
+          {channelControlsComponent}
           <EuiHorizontalRule margin="s" />
-
-          <EuiBasicTable
-            columns={this.columns}
-            items={this.state.items}
-            itemId="config_id"
-            isSelectable={true}
-            selection={selection}
-            noItemsMessage={
-              <EuiEmptyPrompt
-                title={<h2>No channels to display</h2>}
-                body="To send or receive notifications, you will need to create a notification channel."
-                actions={
-                  <EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
-                    Create channel
-                  </EuiSmallButton>
-                }
-              />
-            }
-            onChange={this.onTableChange}
-            pagination={pagination}
-            sorting={sorting}
-            tableLayout="auto"
-            loading={this.state.loading}
-          />
+          {basicTableComponent}
         </ContentPanel>
-      </>
+      )}
+    </>
+
     );
   }
-}
+};
+

public/pages/Channels/__tests__/ChannelDetails.test.tsx

@@ -18,6 +18,11 @@ import {
 import { CoreServicesContext } from '../../../components/coreServices';
 import { ServicesContext } from '../../../services';
 import { ChannelDetails } from '../components/details/ChannelDetails';
+import { setupCoreStart } from '../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('<ChannelDetails/> spec', () => {
   configure({ adapter: new Adapter() });

public/pages/Channels/__tests__/ChannelDetailsActions.test.tsx

@@ -15,6 +15,11 @@ import {
 import { CoreServicesContext } from '../../../components/coreServices';
 import { ServicesContext } from '../../../services';
 import { ChannelDetailsActions } from '../components/details/ChannelDetailsActions';
+import { setupCoreStart } from '../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('<ChannelDetailsActions /> spec', () => {
   configure({ adapter: new Adapter() });

public/pages/Channels/__tests__/Channels.test.tsx

@@ -14,6 +14,11 @@ import {
 import { CoreServicesContext } from '../../../components/coreServices';
 import { MainContext } from '../../Main/Main';
 import { Channels } from '../Channels';
+import { setupCoreStart } from '../../../../test/utils/helpers';
+
+beforeAll(() => {
+  setupCoreStart();
+});
 
 describe('<Channels/> spec', () => {
   it('renders the empty component', () => {