Update new header for notification settings page in ISM (#1126) (#1130)

* Update new header for notification settings page in ISM * fix tests --------- (cherry picked from commit df7848c) Signed-off-by: Sandeep Kumawat <skumwt@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sandeep Kumawat <skumwt@amazon.com>
opensearch-project · Aug 19, 2024 · a2d84b8 · a2d84b8
1 parent ec05690
commit a2d84b8
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 25 deletions.
diff --git a/public/pages/Notifications/containers/Notifications/Notifications.test.tsx b/public/pages/Notifications/containers/Notifications/Notifications.test.tsx
@@ -12,6 +12,23 @@ import { ServicesContext } from "../../../../services";
 import { browserServicesMock, coreServicesMock } from "../../../../../test/mocks";
 import { ROUTES } from "../../../../utils/constants";
 import { CoreServicesContext } from "../../../../components/core_services";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+
+jest.mock("../../../../services/Services", () => ({
+  ...jest.requireActual("../../../../services/Services"),
+  getUISettings: jest.fn(),
+  getApplication: jest.fn(),
+  getNavigationUI: jest.fn(),
+}));
+
+beforeEach(() => {
+  (getUISettings as jest.Mock).mockReturnValue({
+    get: jest.fn().mockReturnValue(false), // or false, depending on your test case
+  });
+  (getApplication as jest.Mock).mockReturnValue({});
+
+  (getNavigationUI as jest.Mock).mockReturnValue({});
+});
 
 function renderNotificationsWithRouter(initialEntries = [ROUTES.NOTIFICATIONS] as string[]) {
   return {

diff --git a/public/pages/Notifications/containers/Notifications/Notifications.tsx b/public/pages/Notifications/containers/Notifications/Notifications.tsx
@@ -33,6 +33,8 @@ import {
 import { checkPermissionForSubmitLRONConfig } from "../../../../containers/NotificationConfig";
 import "./index.scss";
 import { DataSourceMenuContext } from "../../../../services/DataSourceMenuContext";
+import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlButtonData } from "../../../../../../../src/plugins/navigation/public";
 
 export interface NotificationsProps {}
 
@@ -43,6 +45,11 @@ const Notifications = (props: NotificationsProps) => {
   const [submitClicked, setSubmitClicked] = useState(false);
   const [noPermission, setNoPermission] = useState(false);
   const [permissionForUpdate, setPermissionForUpdate] = useState(false);
+  const uiSettings = getUISettings();
+  const useNewUX = uiSettings.get("home:useNewHomePage");
+  const { HeaderControl } = getNavigationUI();
+  const { setAppRightControls, setAppDescriptionControls } = getApplication();
+
   const field = useField({
     values: {} as Partial<FieldState>,
     onBeforeChange(name) {
@@ -142,7 +149,10 @@ const Notifications = (props: NotificationsProps) => {
     field.resetValues(field.getOriginalValues());
   };
   useEffect(() => {
-    coreServices.chrome.setBreadcrumbs([BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.NOTIFICATION_SETTINGS]);
+    const breadCrumbs = useNewUX
+      ? [BREADCRUMBS.INDEX_NOTIFICATION_SETTINGS]
+      : [BREADCRUMBS.INDEX_MANAGEMENT, BREADCRUMBS.NOTIFICATION_SETTINGS];
+    coreServices.chrome.setBreadcrumbs(breadCrumbs);
     reloadNotifications();
     checkPermissionForSubmitLRONConfig({
       services,
@@ -154,32 +164,66 @@ const Notifications = (props: NotificationsProps) => {
   const values = field.getValues();
   const allErrors = Object.entries(field.getErrors());
 
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued">
+          Configure the default notification settings on index operation statuses, such as failed or completed. You can configure <br></br>
+          additional notification settings while performing an index operation.
+        </EuiText>
+      ),
+    },
+  ];
+
+  const controlsData = [
+    {
+      id: "Manage channels",
+      label: "Manage channels",
+      href: "notifications-dashboards#/channels",
+      target: "_blank",
+      controlType: "button",
+      display: "base",
+      iconType: "popout",
+      fill: true,
+    } as TopNavControlButtonData,
+  ];
+
   return (
     <>
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem>
-          <EuiTitle size="l">
-            <h1>Notification settings</h1>
-          </EuiTitle>
-          <CustomFormRow
-            fullWidth
-            helpText={
-              <>
-                Configure the default notification settings on index operation statuses, such as failed or completed. You can configure
-                additional notification settings while performing an index operation.
-              </>
-            }
-          >
-            <></>
-          </CustomFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
-            Manage channels
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+      {useNewUX && (
+        <>
+          <HeaderControl setMountPoint={setAppRightControls} controls={controlsData} />
+          <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
+        </>
+      )}
+      {!useNewUX && (
+        <>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem>
+              <EuiTitle size="l">
+                <h1>Notification settings</h1>
+              </EuiTitle>
+              <CustomFormRow
+                fullWidth
+                helpText={
+                  <>
+                    Configure the default notification settings on index operation statuses, such as failed or completed. You can configure
+                    additional notification settings while performing an index operation.
+                  </>
+                }
+              >
+                <></>
+              </CustomFormRow>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+                Manage channels
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer />
+        </>
+      )}
       {noPermission ? (
         <EuiPanel>
           <EuiEmptyPrompt

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -125,6 +125,7 @@ export const BREADCRUMBS = Object.freeze({
   COMPOSABLE_TEMPLATES: { text: "Component templates", href: `#${ROUTES.COMPOSABLE_TEMPLATES}` },
   CREATE_COMPOSABLE_TEMPLATE: { text: "Create component template", href: `#${ROUTES.CREATE_COMPOSABLE_TEMPLATE}` },
   NOTIFICATION_SETTINGS: { text: "Notification settings", href: `#${ROUTES.NOTIFICATIONS}` },
+  INDEX_NOTIFICATION_SETTINGS: { text: "Index operations notifications", href: `#${ROUTES.NOTIFICATIONS}` },
 });
 
 // TODO: EUI has a SortDirection already