Use new header to maps vis page

Signed-off-by: Junqiu Lei <[email protected]>
junqiu-lei · Aug 9, 2024 · f68d6c5 · f68d6c5
1 parent 0fab5fa
commit f68d6c5
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/public/components/map_top_nav/get_top_nav_config.tsx b/public/components/map_top_nav/get_top_nav_config.tsx
@@ -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,49 @@ export const getTopNavConfig = (
     scopedHistory,
   } = services;
   const stateTransfer = embeddable.getStateTransfer(scopedHistory);
+  if (showActionsInGroup) {
+    const topNavConfig: TopNavMenuData[] = [
+      {
+        tooltip: i18n.translate('maps.topNav.saveMapButtonLabel', {
+          defaultMessage: `Save`,
+        }),
+        ariaLabel: i18n.translate('maps.topNav.saveButtonAriaLabel', {
+          defaultMessage: 'Save your map',
+        }),
+        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);
+        },
+        iconType: 'save',
+        controlType: 'icon',
+      }
+    ];
+    return topNavConfig;
+  }
+
   const topNavConfig: TopNavMenuData[] = [
     {
       iconType: 'save',

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,7 @@ 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';
 
 interface MapTopNavMenuProps {
   mapIdFromUrl: string;
@@ -48,9 +49,10 @@ export const MapTopNavMenu = ({
     application: { navigateToApp },
     embeddable,
     scopedHistory,
+    uiSettings,
   } = services;
 
-  const [title, setTitle] = useState<string>('');
+  const [title, setTitle] = useState<string>('Untitled');
   const [description, setDescription] = useState<string>('');
   const [dateFrom, setDateFrom] = useState<string>('');
   const [dateTo, setDateTo] = useState<string>('');
@@ -65,6 +67,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 +142,7 @@ export const MapTopNavMenu = ({
       setDescription,
       mapState,
       originatingApp,
+      showActionsInGroup,
     });
   }, [services, mapIdFromUrl, layers, title, description, mapState, originatingApp]);
 
@@ -153,6 +167,8 @@ export const MapTopNavMenu = ({
       refreshInterval={refreshIntervalValue}
       onRefresh={refreshDataLayerRender}
       onRefreshChange={onRefreshChange}
+      groupActions={showActionsInGroup}
+      screenTitle={title}
     />
   );
 };