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": "3.0.0",
   "requiredPlugins": [
     "navigation",
-    "data"
+    "data",
+    "opensearchDashboardsUtils"
   ],
   "optionalPlugins": [
     "share",

package.json

@@ -20,13 +20,16 @@
     "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": {},
+  "dependencies": {
+    "tough-cookie": "^4.1.3",
+    "web-streams-polyfill": "^4.0.0"
+  },
   "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,74 +220,164 @@ 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>
+    )
+
     return (
       <>
-        <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: (
-                    <EuiButton fill href={`#${ROUTES.CREATE_CHANNEL}`}>
+        {getUseUpdatedUx() ? (
+          <ContentPanel
+            actions={
+              <ContentPanelActions
+                actions={[
+                  {
+                    component: (
+                      <PageHeader
+                        appRightControls={headerControls}
+                        appLeftControls={[
+                          { renderComponent: totalChannels },
+                        ]}
+                      />
+                    ),
+                  }
+                ]}
+              />
+            }
+          >
+            <div style={{ marginBottom: '10px' }}>
+              <div style={{ display: 'flex', alignItems: 'center' }}>
+                <ChannelControls
+                  onSearchChange={this.onSearchChange}
+                  filters={this.state.filters}
+                  onFiltersChange={this.onFiltersChange}
+                />
+                <div style={{ marginLeft: '10px' }}>
+                  <ChannelActions
+                    selected={this.state.selectedItems}
+                    setSelected={(selectedItems: ChannelItemType[]) =>
+                      this.setState({ selectedItems })
+                    }
+                    items={this.state.items}
+                    setItems={(items: ChannelItemType[]) =>
+                      this.setState({ items })
+                    }
+                    refresh={this.refresh}
+                  />
+                </div>
+              </div>
+            </div>
+            <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={
+                    <EuiButton href={`#${ROUTES.CREATE_CHANNEL}`}>
                       Create channel
                     </EuiButton>
-                  ),
-                },
-              ]}
+                  }
+                />
+              }
+              onChange={this.onTableChange}
+              pagination={pagination}
+              sorting={sorting}
+              tableLayout="auto"
+              loading={this.state.loading}
             />
-          }
-          bodyStyles={{ padding: 'initial' }}
-          title="Channels"
-          titleSize="m"
-          total={this.state.total}
-        >
-          <ChannelControls
-            onSearchChange={this.onSearchChange}
-            filters={this.state.filters}
-            onFiltersChange={this.onFiltersChange}
-          />
-          <EuiHorizontalRule margin="s" />
+          </ContentPanel>
 
-          <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={
-                  <EuiButton href={`#${ROUTES.CREATE_CHANNEL}`}>
-                    Create channel
-                  </EuiButton>
-                }
+
+        ) : (
+          <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: (
+                      <EuiButton fill href={`#${ROUTES.CREATE_CHANNEL}`}>
+                        Create channel
+                      </EuiButton>
+                    ),
+                  },
+                ]}
               />
             }
-            onChange={this.onTableChange}
-            pagination={pagination}
-            sorting={sorting}
-            tableLayout="auto"
-            loading={this.state.loading}
-          />
-        </ContentPanel>
+            bodyStyles={{ padding: 'initial' }}
+            title="Channels"
+            titleSize="m"
+            total={this.state.total}
+          >
+            <ChannelControls
+              onSearchChange={this.onSearchChange}
+              filters={this.state.filters}
+              onFiltersChange={this.onFiltersChange}
+            />
+            <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={
+                    <EuiButton href={`#${ROUTES.CREATE_CHANNEL}`}>
+                      Create channel
+                    </EuiButton>
+                  }
+                />
+              }
+              onChange={this.onTableChange}
+              pagination={pagination}
+              sorting={sorting}
+              tableLayout="auto"
+              loading={this.state.loading}
+            />
+          </ContentPanel>
+
+        )}
       </>
     );
   }
-}
+};
+