From ff3c0452d2527c29e0291807239010f0f17e842a Mon Sep 17 00:00:00 2001
From: Junqiu Lei <junqiu@amazon.com>
Date: Fri, 16 Aug 2024 10:52:27 -0700
Subject: [PATCH] Conditionally use full width for Maps listing page table
 (#655)

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
---
 CHANGELOG.md                              |  1 +
 public/components/maps_list/maps_list.tsx | 86 +++++++++++------------
 2 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e37d0fed..5e11a259 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### 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
diff --git a/public/components/maps_list/maps_list.tsx b/public/components/maps_list/maps_list.tsx
index 43d455b8..3ebcbcf3 100644
--- a/public/components/maps_list/maps_list.tsx
+++ b/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,
@@ -38,7 +35,7 @@ export const MapsList = () => {
     },
   } = useOpenSearchDashboards<MapServices>();
 
-  const showActionsInHeader = uiSettings.get('home:useNewHomePage');
+  const newHomePageEnabled = uiSettings.get('home:useNewHomePage');
 
     useEffect(() => {
     setBreadcrumbs(getMapsLandingBreadcrumbs(navigateToApp));
@@ -114,7 +111,7 @@ export const MapsList = () => {
       pageTitle="Create your first map"
       description="There is no map to display, let's create your first map."
       rightSideItems={
-        showActionsInHeader ? [] : [
+        newHomePageEnabled ? [] : [
           <EuiSmallButton
             fill
             onClick={navigateToCreateMapPage}
@@ -128,49 +125,46 @@ export const MapsList = () => {
   );
 
   return (
+    // @ts-ignore
     <I18nProvider>
       <>
-        <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= { showActionsInHeader ? 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={showActionsInHeader ? '' : 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>
   );