Conditionally use the new Application Header variant on the Maps visu…

…alization page (#654) Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Aug 13, 2024 · ecd477a · ecd477a
1 parent 370e5dd
commit ecd477a
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,7 +14,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased 2.x](https://github.com/opensearch-project/dashboards-maps/compare/2.16...2.x)
 ### Features
-* Use new header to maps listing page [#653](https://github.com/opensearch-project/dashboards-maps/pull/653)
+* Conditionally use the new Page Header variant on the Maps listing page [#653](https://github.com/opensearch-project/dashboards-maps/pull/653)
+* Conditionally use the new Application Header variant on the Maps visualization page [#654](https://github.com/opensearch-project/dashboards-maps/pull/654)
 ### Enhancements
 ### Bug Fixes
 ### Infrastructure

diff --git a/public/components/map_top_nav/get_top_nav_config.tsx b/public/components/map_top_nav/get_top_nav_config.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { i18n } from '@osd/i18n';
-import { TopNavMenuData } from '../../../../../src/plugins/navigation/public';
+import { TopNavMenuData, TopNavMenuIconData } from '../../../../../src/plugins/navigation/public';
 import {
   SavedObjectSaveModalOrigin,
   showSaveModal,
@@ -25,6 +25,7 @@ interface GetTopNavConfigParams {
   setDescription: (description: string) => void;
   mapState: MapState;
   originatingApp?: string;
+  showActionsInGroup: boolean;
 }
 
 export const getTopNavConfig = (
@@ -38,6 +39,7 @@ export const getTopNavConfig = (
     setDescription,
     mapState,
     originatingApp,
+    showActionsInGroup,
   }: GetTopNavConfigParams
 ) => {
   const {
@@ -46,6 +48,51 @@ export const getTopNavConfig = (
     scopedHistory,
   } = services;
   const stateTransfer = embeddable.getStateTransfer(scopedHistory);
+  const onSaveButtonClick = () => {
+    const documentInfo = {
+      title,
+      description,
+    };
+    const saveModal = (
+      <SavedObjectSaveModalOrigin
+        documentInfo={documentInfo}
+        onSave={onGetSave(
+          title,
+          originatingApp,
+          mapIdFromUrl,
+          services,
+          layers,
+          mapState,
+          setTitle,
+          setDescription
+        )}
+        objectType={'map'}
+        onClose={() => {}}
+        originatingApp={originatingApp}
+        getAppNameFromId={stateTransfer.getAppNameFromId}
+      />
+    );
+    showSaveModal(saveModal, I18nContext);
+  };
+
+  if (showActionsInGroup) {
+    const topNavConfig: TopNavMenuIconData[] = [
+      {
+        tooltip: i18n.translate('maps.topNav.saveMapButtonLabel', {
+          defaultMessage: `Save`,
+        }),
+        ariaLabel: i18n.translate('maps.topNav.saveButtonAriaLabel', {
+          defaultMessage: 'Save your map',
+        }),
+        testId: 'mapSaveButton',
+        run: onSaveButtonClick,
+        iconType: 'save',
+        controlType: 'icon',
+      },
+    ];
+    return topNavConfig;
+  }
+
   const topNavConfig: TopNavMenuData[] = [
     {
       iconType: 'save',
@@ -55,33 +102,7 @@ export const getTopNavConfig = (
         defaultMessage: `Save`,
       }),
       testId: 'mapSaveButton',
-      run: (_anchorElement: any) => {
-        const documentInfo = {
-          title,
-          description,
-        };
-
-        const saveModal = (
-          <SavedObjectSaveModalOrigin
-            documentInfo={documentInfo}
-            onSave={onGetSave(
-              title,
-              originatingApp,
-              mapIdFromUrl,
-              services,
-              layers,
-              mapState,
-              setTitle,
-              setDescription
-            )}
-            objectType={'map'}
-            onClose={() => {}}
-            originatingApp={originatingApp}
-            getAppNameFromId={stateTransfer.getAppNameFromId}
-          />
-        );
-        showSaveModal(saveModal, I18nContext);
-      },
+      run: onSaveButtonClick,
     },
   ];
   return topNavConfig;

diff --git a/public/components/map_top_nav/top_nav_menu.tsx b/public/components/map_top_nav/top_nav_menu.tsx
@@ -15,6 +15,8 @@ import { getSavedMapBreadcrumbs } from '../../utils/breadcrumbs';
 import { handleDataLayerRender } from '../../model/layerRenderController';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import { MapState } from '../../model/mapState';
+import { HeaderVariant } from '../../../../../src/core/public';
+import { TopNavMenuItemRenderType } from '../../../../../src/plugins/navigation/public';
 
 interface MapTopNavMenuProps {
   mapIdFromUrl: string;
@@ -48,6 +50,7 @@ export const MapTopNavMenu = ({
     application: { navigateToApp },
     embeddable,
     scopedHistory,
+    uiSettings,
   } = services;
 
   const [title, setTitle] = useState<string>('');
@@ -65,6 +68,17 @@ export const MapTopNavMenu = ({
     },
     [chrome, navigateToApp]
   );
+  const showActionsInGroup = uiSettings.get('home:useNewHomePage');
+
+  useEffect(() => {
+    if (showActionsInGroup) {
+      chrome.setHeaderVariant?.(HeaderVariant.APPLICATION);
+    }
+
+    return () => {
+      chrome.setHeaderVariant?.();
+    };
+  }, [chrome.setHeaderVariant, showActionsInGroup]);
 
   useEffect(() => {
     const { originatingApp: value } =
@@ -129,6 +143,7 @@ export const MapTopNavMenu = ({
       setDescription,
       mapState,
       originatingApp,
+      showActionsInGroup,
     });
   }, [services, mapIdFromUrl, layers, title, description, mapState, originatingApp]);
 
@@ -139,7 +154,7 @@ export const MapTopNavMenu = ({
       config={config}
       setMenuMountPoint={setHeaderActionMenu}
       indexPatterns={layersIndexPatterns || []}
-      showSearchBar={true}
+      showSearchBar={TopNavMenuItemRenderType.IN_PORTAL}
       showFilterBar={false}
       showDatePicker={true}
       showQueryBar={true}
@@ -153,6 +168,8 @@ export const MapTopNavMenu = ({
       refreshInterval={refreshIntervalValue}
       onRefresh={refreshDataLayerRender}
       onRefreshChange={onRefreshChange}
+      groupActions={showActionsInGroup}
+      screenTitle={title}
     />
   );
 };