[feature to main] Use new header in Maps when new home UI is enabled (#…

…656)

Signed-off-by: Junqiu Lei <[email protected]>
(cherry picked from commit a10033d)

CHANGELOG.md

@@ -14,6 +14,9 @@ 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
+* 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)
+* Conditionally use full width for Maps listing page table [#655](https://github.com/opensearch-project/dashboards-maps/pull/655)
 ### Enhancements
 ### Bug Fixes
 ### Infrastructure

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;

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}
     />
   );
 };

public/components/maps_list/maps_list.tsx

@@ -7,9 +7,6 @@ import { i18n } from '@osd/i18n';
 import React, { useCallback, useEffect } from 'react';
 import { I18nProvider } from '@osd/i18n/react';
 import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContentBody,
   EuiLink,
   EuiSmallButton,
   EuiPageHeader,
@@ -30,10 +27,17 @@ export const MapsList = () => {
       savedObjects: { client: savedObjectsClient },
       application: { navigateToApp },
       chrome: { docTitle, setBreadcrumbs },
+      uiSettings,
+      navigation: {
+        ui: { HeaderControl },
+      },
+      application,
     },
   } = useOpenSearchDashboards<MapServices>();
 
-  useEffect(() => {
+  const newHomePageEnabled = uiSettings.get('home:useNewHomePage');
+
+    useEffect(() => {
     setBreadcrumbs(getMapsLandingBreadcrumbs(navigateToApp));
     docTitle.change(i18n.translate('maps.listing.pageTitle', { defaultMessage: 'Maps' }));
   }, [docTitle, navigateToApp, setBreadcrumbs]);
@@ -106,44 +110,61 @@ export const MapsList = () => {
     <EuiPageHeader
       pageTitle="Create your first map"
       description="There is no map to display, let's create your first map."
-      rightSideItems={[
-        <EuiSmallButton fill onClick={navigateToCreateMapPage}>
-          Create map
-        </EuiSmallButton>,
-      ]}
+      rightSideItems={
+        newHomePageEnabled ? [] : [
+          <EuiSmallButton
+            fill
+            onClick={navigateToCreateMapPage}
+            data-test-subj="createFirstMapButton"
+          >
+            Create map
+          </EuiSmallButton>
+        ]
+      }
     />
   );
 
   return (
+    // @ts-ignore
     <I18nProvider>
       <>
-        <EuiPage restrictWidth="1000px">
-          <EuiPageBody component="main" data-test-subj="mapListingPage">
-            <EuiPageContentBody>
-              <TableListView
-                headingId="mapsListingHeading"
-                createItem={navigateToCreateMapPage}
-                findItems={fetchMaps}
-                deleteItems={deleteMaps}
-                tableColumns={tableColumns}
-                listingLimit={10}
-                initialPageSize={10}
-                initialFilter={''}
-                noItemsFragment={noMapItem}
-                entityName={i18n.translate('maps.listing.table.entityName', {
-                  defaultMessage: 'map',
-                })}
-                entityNamePlural={i18n.translate('maps.listing.table.entityNamePlural', {
-                  defaultMessage: 'maps',
-                })}
-                tableListTitle={i18n.translate('maps.listing.table.listTitle', {
-                  defaultMessage: 'Maps',
-                })}
-                toastNotifications={notifications.toasts}
-              />
-            </EuiPageContentBody>
-          </EuiPageBody>
-        </EuiPage>
+        {newHomePageEnabled &&
+          // @ts-ignore
+          <HeaderControl
+            setMountPoint={application.setAppRightControls}
+            controls={[
+              {
+                id: 'Create map',
+                label: 'Create map',
+                iconType: 'plus',
+                fill: true,
+                href: `${MAPS_APP_ID}${APP_PATH.CREATE_MAP}`,
+                testId: 'createButton',
+                controlType: 'button',
+              },
+            ]}
+          />}
+        <TableListView
+          headingId="mapsListingHeading"
+          createItem= { newHomePageEnabled ? undefined : navigateToCreateMapPage }
+          findItems={fetchMaps}
+          deleteItems={deleteMaps}
+          tableColumns={tableColumns}
+          listingLimit={10}
+          initialPageSize={10}
+          initialFilter={''}
+          noItemsFragment={noMapItem}
+          entityName={i18n.translate('maps.listing.table.entityName', {
+            defaultMessage: 'map',
+          })}
+          entityNamePlural={i18n.translate('maps.listing.table.entityNamePlural', {
+            defaultMessage: 'maps',
+          })}
+          tableListTitle={newHomePageEnabled ? '' : i18n.translate('maps.listing.table.listTitle', {
+            defaultMessage: 'Maps'})}
+          toastNotifications={notifications.toasts}
+          restrictWidth={newHomePageEnabled ? false : true}
+        />
       </>
     </I18nProvider>
   );