header redesign (#841)

* header redesign Signed-off-by: Jackie Han <[email protected]> * update snapshot Signed-off-by: Jackie Han <[email protected]> --------- Signed-off-by: Jackie Han <[email protected]> (cherry picked from commit 399025a)
opensearch-project · Aug 19, 2024 · e4ea3fd · e4ea3fd
1 parent 95cd499
commit e4ea3fd
Show file tree

Hide file tree

Showing 15 changed files with 347 additions and 68 deletions.
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
@@ -20,7 +20,8 @@
     "opensearchDashboardsReact",
     "savedObjects",
     "visAugmenter",
-    "opensearchDashboardsUtils"
+    "opensearchDashboardsUtils",
+    "navigation"
   ],
   "server": true,
   "ui": true,

diff --git a/public/pages/Dashboard/Components/utils/DashboardHeader.tsx b/public/pages/Dashboard/Components/utils/DashboardHeader.tsx
@@ -20,9 +20,12 @@ import {
 import {
   PLUGIN_NAME,
   APP_PATH,
+  USE_NEW_HOME_PAGE,
 } from '../../../../utils/constants';
 import { useLocation } from 'react-router-dom';
 import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../../../pages/utils/helpers';
+import { getApplication, getNavigationUI, getUISettings } from '../../../../services';
+import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
 export interface DashboardHeaderProps {
   hasDetectors: boolean;
 }
@@ -32,8 +35,27 @@ export const DashboardHeader = (props: DashboardHeaderProps) => {
   const MDSQueryParams = getDataSourceFromURL(location);
   const dataSourceId = MDSQueryParams.dataSourceId;
   const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(APP_PATH.CREATE_DETECTOR, dataSourceId, false);
+  const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
+  const { HeaderControl } = getNavigationUI();
+  const { setAppRightControls } = getApplication();
 
-  return (
+  return useUpdatedUX ? (
+    <HeaderControl
+      setMountPoint={setAppRightControls}
+      controls={[
+        {
+          id: 'Create detector',
+          label: 'Create detector',
+          iconType: 'plus',
+          fill: true,
+          href: createDetectorUrl,
+          testId: 'add_detector',
+          controlType: 'button',
+        } as TopNavControlButtonData,
+      ]}
+    />
+  ) : (
+    <>
     <EuiPageHeader>
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
@@ -54,5 +76,6 @@ export const DashboardHeader = (props: DashboardHeaderProps) => {
         ) : null}
       </EuiFlexGroup>
     </EuiPageHeader>
+    </>
   );
-};
+}
diff --git a/public/pages/Dashboard/Container/DashboardOverview.tsx b/public/pages/Dashboard/Container/DashboardOverview.tsx
@@ -45,7 +45,7 @@ import {
   getVisibleOptions,
   isDataSourceCompatible,
 } from '../../utils/helpers';
-import { BREADCRUMBS, MDS_BREADCRUMBS } from '../../../utils/constants';
+import { BREADCRUMBS, MDS_BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../../utils/constants';
 import { DETECTOR_STATE } from '../../../../server/utils/constants';
 import {
   getDetectorStateOptions,
@@ -64,6 +64,7 @@ import {
   getDataSourceEnabled,
   getNotifications,
   getSavedObjectsClient,
+  getUISettings,
 } from '../../../services';
 import { RouteComponentProps } from 'react-router-dom';
 
@@ -163,6 +164,8 @@ export function DashboardOverview(props: OverviewProps) {
   const visibleIndices = get(opensearchState, 'indices', []) as CatIndex[];
   const visibleAliases = get(opensearchState, 'aliases', []) as IndexAlias[];
 
+  const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
+
   const handleIndicesFilterChange = (
     options: EuiComboBoxOptionProps[]
   ): void => {
@@ -242,16 +245,32 @@ export function DashboardOverview(props: OverviewProps) {
   }, [errorGettingDetectors]);
 
   useEffect(() => {
-    if (dataSourceEnabled) {
-      core.chrome.setBreadcrumbs([
-        MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
-        MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
-      ]);
+    if (useUpdatedUX) {
+      if (dataSourceEnabled) {
+        core.chrome.setBreadcrumbs([
+          MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
+          MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
+          BREADCRUMBS.TITLE_REAL_TIME_DASHBOARD,
+        ]);
+      } else {
+        core.chrome.setBreadcrumbs([
+          BREADCRUMBS.ANOMALY_DETECTOR,
+          BREADCRUMBS.DASHBOARD,
+          BREADCRUMBS.TITLE_REAL_TIME_DASHBOARD,
+        ]);
+      }
     } else {
-      core.chrome.setBreadcrumbs([
-        BREADCRUMBS.ANOMALY_DETECTOR,
-        BREADCRUMBS.DASHBOARD,
-      ]);
+      if (dataSourceEnabled) {
+        core.chrome.setBreadcrumbs([
+          MDS_BREADCRUMBS.ANOMALY_DETECTOR(MDSOverviewState.selectedDataSourceId),
+          MDS_BREADCRUMBS.DASHBOARD(MDSOverviewState.selectedDataSourceId),
+        ]);
+      } else {
+        core.chrome.setBreadcrumbs([
+          BREADCRUMBS.ANOMALY_DETECTOR,
+          BREADCRUMBS.DASHBOARD,
+        ]);
+      }
     }
   });
 

diff --git a/public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx b/public/pages/DefineDetector/containers/__tests__/DefineDetector.test.tsx
@@ -27,13 +27,30 @@ import {
   testDetectorDefinitionValues,
 } from '../../utils/constants';
 
-jest.mock('../../../../services', () => ({
-  ...jest.requireActual('../../../../services'),
+jest.mock('../../../../services', () => {
+  const originalModule = jest.requireActual('../../../../services');
 
-  getDataSourceEnabled: () => ({
-    enabled: false  
-  })
-}));
+  return {
+    ...originalModule,
+    getDataSourceEnabled: () => ({
+      enabled: false  
+    }),
+    getUISettings: () => ({
+      get: (flag) => {
+        if (flag === 'home:useNewHomePage') {
+          return false; 
+        }
+        return originalModule.getUISettings().get(flag);
+      }
+    }),
+    getNavigationUI: () => ({
+      HeaderControl: null 
+    }),
+    getApplication: () => ({
+      setAppRightControls: null, 
+    })
+  };
+});
 
 const renderWithRouterEmpty = (isEdit: boolean = false) => ({
   ...render(

diff --git a/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx b/public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx
@@ -19,6 +19,8 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 import { Detector } from '../../../../models/interfaces';
+import { getApplication, getNavigationUI, getUISettings } from '../../../../services';
+import { USE_NEW_HOME_PAGE } from '../../../../utils/constants';
 
 interface DetectorControls {
   onEditDetector(): void;
@@ -30,7 +32,11 @@ interface DetectorControls {
 }
 export const DetectorControls = (props: DetectorControls) => {
   const [isOpen, setIsOpen] = useState(false);
-  return (
+  const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
+  const { HeaderControl } = getNavigationUI();
+  const { setAppRightControls } = getApplication();
+
+  const ActionsPopover = (
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiPopover
@@ -80,4 +86,22 @@ export const DetectorControls = (props: DetectorControls) => {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
+  const renderActionsPopover = () => {
+    return useUpdatedUX ? (
+      <HeaderControl
+        setMountPoint={setAppRightControls}
+        controls={[
+          {
+            renderComponent: ActionsPopover
+          }
+        ]}
+      />
+    ) : (
+      ActionsPopover
+    );
+  };
+
+  return (
+    renderActionsPopover()
+  );
 };
diff --git a/public/pages/DetectorDetail/components/DetectorControls/__tests__/DetectorControls.test.tsx b/public/pages/DetectorDetail/components/DetectorControls/__tests__/DetectorControls.test.tsx
@@ -14,6 +14,28 @@ import { render } from '@testing-library/react';
 import { DetectorControls } from '../DetectorControls';
 import { UNITS } from '../../../../../models/interfaces';
 
+jest.mock('../../../../../services', () => {
+  const originalModule = jest.requireActual('../../../../../services');
+
+  return {
+    ...originalModule,
+    getUISettings: () => ({
+      get: (flag) => {
+        if (flag === 'home:useNewHomePage') {
+          return false; 
+        }
+        return originalModule.getUISettings().get(flag);
+      }
+    }),
+    getNavigationUI: () => ({
+      HeaderControl: null 
+    }),
+    getApplication: () => ({
+      setAppRightControls: null, 
+    })
+  };
+});
+
 describe('<DetectorControls /> spec', () => {
   const detector = {
     primaryTerm: 1,

diff --git a/public/pages/DetectorDetail/containers/DetectorDetail.tsx b/public/pages/DetectorDetail/containers/DetectorDetail.tsx
@@ -48,7 +48,7 @@ import {
 import { getAliases, getIndices } from '../../../redux/reducers/opensearch';
 import { getErrorMessage, Listener } from '../../../utils/utils';
 import { darkModeEnabled } from '../../../utils/opensearchDashboardsUtils';
-import { BREADCRUMBS, MDS_BREADCRUMBS } from '../../../utils/constants';
+import { BREADCRUMBS, MDS_BREADCRUMBS, USE_NEW_HOME_PAGE } from '../../../utils/constants';
 import { DetectorControls } from '../components/DetectorControls';
 import { ConfirmModal } from '../components/ConfirmModal/ConfirmModal';
 import { useFetchMonitorInfo } from '../hooks/useFetchMonitorInfo';
@@ -70,6 +70,7 @@ import {
   getDataSourceEnabled,
   getNotifications,
   getSavedObjectsClient,
+  getUISettings,
 } from '../../../services';
 import { constructHrefWithDataSourceId, getDataSourceFromURL } from '../../../pages/utils/helpers';
 
@@ -195,6 +196,8 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
       deleteTyped: false,
     });
 
+  const useUpdatedUX = getUISettings().get(USE_NEW_HOME_PAGE);
+
   useHideSideNavBar(true, false);
 
   // Jump to top of page on first load
@@ -435,6 +438,20 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
     );
   }
 
+  const renderPageHeader = () => {
+    if (useUpdatedUX) {
+      return null;
+    } else {
+      return (
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="l" data-test-subj="detectorNameHeader">
+            <h1>{detector && detector.name}</h1>
+          </EuiTitle>
+        </EuiFlexItem>
+      );
+    }
+  };
+
   return (
     <React.Fragment>
       {!isEmpty(detector) && !hasError ? (
@@ -451,12 +468,7 @@ export const DetectorDetail = (props: DetectorDetailProps) => {
             justifyContent="spaceBetween"
             style={{ padding: '10px' }}
           >
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="l" data-test-subj="detectorNameHeader">
-                {<h1>{detector && detector.name} </h1>}
-              </EuiTitle>
-            </EuiFlexItem>
-
+            {renderPageHeader()}
             <EuiFlexItem grow={false}>
               <DetectorControls
                 onEditDetector={handleEditDetector}

diff --git a/public/pages/DetectorDetail/containers/__tests__/CustomIndexErrorMsg.test.tsx b/public/pages/DetectorDetail/containers/__tests__/CustomIndexErrorMsg.test.tsx
@@ -37,13 +37,30 @@ jest.mock('../../../CreateDetectorSteps/hooks/useFetchDetectorInfo', () => ({
   useFetchDetectorInfo: jest.fn(),
 }));
 
-jest.mock('../../../../services', () => ({
-  ...jest.requireActual('../../../../services'),
-
-  getDataSourceEnabled: () => ({
-    enabled: false,
-  }),
-}));
+jest.mock('../../../../services', () => {
+  const originalModule = jest.requireActual('../../../../services');
+
+  return {
+    ...originalModule,
+    getDataSourceEnabled: () => ({
+      enabled: false,
+    }),
+    getUISettings: () => ({
+      get: (flag) => {
+        if (flag === 'home:useNewHomePage') {
+          return false; 
+        }
+        return originalModule.getUISettings().get(flag);
+      }
+    }),
+    getNavigationUI: () => ({
+      HeaderControl: null 
+    }),
+    getApplication: () => ({
+      setAppRightControls: null, 
+    })
+  };
+});
 
 const detectorId = '4QY4YHEB5W9C7vlb3Mou';