Change in maps listing page for new header

Signed-off-by: Junqiu Lei <[email protected]>
junqiu-lei · Aug 6, 2024 · 531f93d · 531f93d
1 parent a433766
commit 531f93d
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/public/components/maps_list/maps_list.tsx b/public/components/maps_list/maps_list.tsx
@@ -30,10 +30,22 @@ export const MapsList = () => {
       savedObjects: { client: savedObjectsClient },
       application: { navigateToApp },
       chrome: { docTitle, setBreadcrumbs },
+      uiSettings,
+      navigation: {
+        ui: { HeaderControl },
+      },
+      application,
     },
   } = useOpenSearchDashboards<MapServices>();
 
-  useEffect(() => {
+  const showActionsInHeader = uiSettings.get('home:useNewHomePage');
+
+  // test if the showActionsInHeader value is true
+  if (showActionsInHeader) {
+    console.log('The value is true');
+  }
+
+    useEffect(() => {
     setBreadcrumbs(getMapsLandingBreadcrumbs(navigateToApp));
     docTitle.change(i18n.translate('maps.listing.pageTitle', { defaultMessage: 'Maps' }));
   }, [docTitle, navigateToApp, setBreadcrumbs]);
@@ -106,11 +118,17 @@ 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={
+        showActionsInHeader ? [] : [
+          <EuiSmallButton
+            fill
+            onClick={navigateToCreateMapPage}
+            data-test-subj="createFirstMapButton"
+          >
+            Create map
+          </EuiSmallButton>
+        ]
+      }
     />
   );
 
@@ -120,9 +138,24 @@ export const MapsList = () => {
         <EuiPage restrictWidth="1000px">
           <EuiPageBody component="main" data-test-subj="mapListingPage">
             <EuiPageContentBody>
+              {showActionsInHeader &&
+                <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={navigateToCreateMapPage}
+                createItem= { showActionsInHeader ? undefined : navigateToCreateMapPage }
                 findItems={fetchMaps}
                 deleteItems={deleteMaps}
                 tableColumns={tableColumns}