fix: simplified solution for layout style issues (#1263)

src/components/App/index.jsx

@@ -33,7 +33,6 @@ import { SystemWideWarningBanner } from '../system-wide-banner';
 import store from '../../data/store';
 import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
 import { defaultQueryClientRetryHandler, queryCacheOnErrorHandler } from '../../utils';
-import GlobalContextProvider from '../GlobalContextProvider';
 
 // eslint-disable-next-line import/no-unresolved
 const ReactQueryDevtoolsProduction = lazy(() => import('@tanstack/react-query-devtools/production').then((d) => ({
@@ -107,6 +106,7 @@ const AppWrapper = () => {
     }
     return true;
   }, [config]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <ReactQueryDevtools />
@@ -116,16 +116,16 @@ const AppWrapper = () => {
         </Suspense>
       )}
       <AppProvider store={store}>
-        <Helmet
-          titleTemplate="%s - edX Admin Portal"
-          defaultTitle="edX Admin Portal"
-        />
-        {isMaintenanceAlertOpen && (
-        <SystemWideWarningBanner>
-          {config.MAINTENANCE_ALERT_MESSAGE}
-        </SystemWideWarningBanner>
-        )}
-        <GlobalContextProvider>
+        <div id="app-container">
+          <Helmet
+            titleTemplate="%s - edX Admin Portal"
+            defaultTitle="edX Admin Portal"
+          />
+          {isMaintenanceAlertOpen && (
+            <SystemWideWarningBanner>
+              {config.MAINTENANCE_ALERT_MESSAGE}
+            </SystemWideWarningBanner>
+          )}
           <Header />
           <Routes>
             <Route
@@ -137,7 +137,7 @@ const AppWrapper = () => {
                 >
                   <EnterpriseIndexPage />
                 </AuthenticatedPageRoute>
-           )}
+              )}
             />
             <Route
               path="/:enterpriseSlug/admin/register"
@@ -156,7 +156,7 @@ const AppWrapper = () => {
                 >
                   <RedirectComponent />
                 </PageWrap>
-           )}
+              )}
             />
             <Route
               path="/:enterpriseSlug/admin/:enterpriseAppPage/*"
@@ -167,20 +167,20 @@ const AppWrapper = () => {
                 >
                   <AuthenticatedEnterpriseApp />
                 </PageWrap>
-           )}
+            )}
             />
             <Route
               path="/"
               element={(
                 <AuthenticatedPageRoute authenticatedAPIClient={apiClient} redirect={process.env.BASE_URL}>
                   <EnterpriseIndexPage />
                 </AuthenticatedPageRoute>
-           )}
+            )}
             />
             <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
           </Routes>
           <Footer />
-        </GlobalContextProvider>
+        </div>
       </AppProvider>
     </QueryClientProvider>
   );

src/components/CodeManagement/tests/CouponCodeTabs.test.jsx

@@ -19,7 +19,6 @@ import {
   MANAGE_REQUESTS_TAB,
   COUPON_CODE_TABS_LABELS,
 } from '../data/constants';
-import { GlobalContext } from '../../GlobalContextProvider';
 
 const MANAGE_CODES_MOCK_CONTENT = 'codes';
 const MANAGE_REQUESTS_MOCK_CONTENT = 'requests';
@@ -47,16 +46,6 @@ const initialStore = {
   },
 };
 
-const headerHeight = 0;
-const footerHeight = 0;
-
-const defaultGlobalContextValue = {
-  headerHeight,
-  footerHeight,
-  minHeight: `calc(100vh - ${headerHeight + footerHeight + 16}px)`,
-  dispatch: jest.fn(),
-};
-
 const mockStore = configureMockStore([thunk]);
 const getMockStore = store => mockStore(store);
 const store = getMockStore({ ...initialStore });
@@ -74,18 +63,16 @@ const CouponCodeTabsWrapper = ({
     <IntlProvider locale="en">
       <Provider store={store}>
         <MemoryRouter initialEntries={[route]}>
-          <GlobalContext.Provider value={defaultGlobalContextValue}>
-            <Routes>
-              <Route
-                path="/:enterpriseSlug/admin/coupons/:couponCodesTab"
-                element={(
-                  <SubsidyRequestsContext.Provider value={contextValue}>
-                    <CouponCodeTabs />
-                  </SubsidyRequestsContext.Provider>
-                  )}
-              />
-            </Routes>
-          </GlobalContext.Provider>
+          <Routes>
+            <Route
+              path="/:enterpriseSlug/admin/coupons/:couponCodesTab"
+              element={(
+                <SubsidyRequestsContext.Provider value={contextValue}>
+                  <CouponCodeTabs />
+                </SubsidyRequestsContext.Provider>
+              )}
+            />
+          </Routes>
         </MemoryRouter>
       </Provider>
     </IntlProvider>

src/components/EnterpriseApp/EnterpriseApp.test.jsx

@@ -12,20 +12,9 @@ import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
 import { SCHOLAR_THEME } from '../settings/data/constants';
 import { EnterpriseAppContext } from './EnterpriseAppContextProvider';
 import { renderWithRouter } from '../test/testUtils';
-import { GlobalContext } from '../GlobalContextProvider';
 
 features.SETTINGS_PAGE = true;
 
-const headerHeight = 0;
-const footerHeight = 0;
-
-const defaultGlobalContextValue = {
-  headerHeight,
-  footerHeight,
-  minHeight: `calc(100vh - ${headerHeight + footerHeight + 16}px)`,
-  dispatch: jest.fn(),
-};
-
 const defaultEnterpriseAppContextValue = {
   enterpriseCuration: {
     enterpriseCuration: null,
@@ -38,19 +27,12 @@ const defaultEnterpriseSubsidiesContextValue = {
   canManageLearnerCredit: true,
 };
 
-const GlobalContextProvider = ({ children }) => (
-  <GlobalContext.Provider value={defaultGlobalContextValue}>
-    {children}
-  </GlobalContext.Provider>
-);
-
 const EnterpriseAppContextProvider = ({ children }) => (
   <EnterpriseAppContext.Provider value={defaultEnterpriseAppContextValue}>
     <EnterpriseSubsidiesContext.Provider value={defaultEnterpriseSubsidiesContextValue}>
       {children}
     </EnterpriseSubsidiesContext.Provider>
   </EnterpriseAppContext.Provider>
-
 );
 
 jest.mock('react-router-dom', () => ({
@@ -108,11 +90,8 @@ const invalidEnterpriseId = {
 
 const EnterpriseAppWrapper = (props = basicProps) => (
   <IntlProvider locale="en">
-    <GlobalContextProvider>
-      <EnterpriseApp {...props} />
-    </GlobalContextProvider>
+    <EnterpriseApp {...props} />
   </IntlProvider>
-
 );
 
 describe('<EnterpriseApp />', () => {

src/components/EnterpriseApp/index.jsx

@@ -16,12 +16,8 @@ import { SCHOLAR_THEME } from '../settings/data/constants';
 import NotFoundPage from '../NotFoundPage';
 import EnterpriseAppContent from './EnterpriseAppContent';
 import { withLocation, withParams } from '../../hoc';
-import { GlobalContext } from '../GlobalContextProvider';
 
 class EnterpriseApp extends React.Component {
-  // eslint-disable-next-line react/static-property-placement
-  static contextType = GlobalContext;
-
   constructor(props) {
     super(props);
 
@@ -30,6 +26,7 @@ class EnterpriseApp extends React.Component {
 
     this.state = {
       sidebarWidth: 61.3, // hardcoded sidebarWidth required for initial render
+      enterpriseAppMinHeight: 0,
     };
   }
 
@@ -126,7 +123,7 @@ class EnterpriseApp extends React.Component {
         enablePortalLearnerCreditManagementScreen={enablePortalLearnerCreditManagementScreen}
       >
         <BrandStyles enterpriseBranding={enterpriseBranding} />
-        <div className="enterprise-app" style={{ minHeight: this.context.minHeight }}>
+        <div className="enterprise-app" style={{ minHeight: this.state.enterpriseAppMinHeight }}>
           <MediaQuery minWidth={breakpoints.large.minWidth}>
             {matchesMediaQ => (
               <>
@@ -138,6 +135,11 @@ class EnterpriseApp extends React.Component {
                       sidebarWidth: width + defaultContentPadding,
                     });
                   }}
+                  onMount={({ sidebarHeight }) => {
+                    this.setState({
+                      enterpriseAppMinHeight: sidebarHeight,
+                    });
+                  }}
                   isMobile={!matchesMediaQ}
                 />
                 <div

src/components/EnterpriseList/EnterpriseList.test.jsx

@@ -4,7 +4,6 @@ import { screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import EnterpriseList from './index';
 import mockEnterpriseList from './EnterpriseList.mocks';
-import { GlobalContext } from '../GlobalContextProvider';
 
 jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
 
@@ -14,21 +13,9 @@ jest.mock('../../data/services/LmsApiService', () => ({
   }),
 }));
 
-const headerHeight = 0;
-const footerHeight = 0;
-
-const defaultGlobalContextValue = {
-  headerHeight,
-  footerHeight,
-  minHeight: `calc(100vh - ${headerHeight + footerHeight + 16}px)`,
-  dispatch: jest.fn(),
-};
-
 const EnterpriseListWrapper = () => (
   <IntlProvider locale="en">
-    <GlobalContext.Provider value={defaultGlobalContextValue}>
-      <EnterpriseList clearPortalConfiguration={() => { }} />
-    </GlobalContext.Provider>
+    <EnterpriseList clearPortalConfiguration={() => { }} />
   </IntlProvider>
 );
 

src/components/EnterpriseList/index.jsx

@@ -1,6 +1,5 @@
 import React, {
   useCallback,
-  useContext,
   useEffect,
   useMemo,
   useState,
@@ -10,12 +9,14 @@ import { Link } from 'react-router-dom';
 import debounce from 'lodash.debounce';
 import { camelCaseObject } from '@edx/frontend-platform';
 import { logError } from '@edx/frontend-platform/logging';
-import { DataTable, TextFilter } from '@openedx/paragon';
+import {
+  DataTable, TextFilter, Container, Row, Col,
+} from '@openedx/paragon';
 
 import LmsApiService from '../../data/services/LmsApiService';
-import { GlobalContext } from '../GlobalContextProvider';
 
 export const TITLE = 'Enterprise List';
+
 const PAGE_SIZE = 50;
 
 const EnterpriseList = ({ clearPortalConfiguration }) => {
@@ -54,16 +55,15 @@ const EnterpriseList = ({ clearPortalConfiguration }) => {
     const { name, slug, uuid } = row.original;
     return <Link key={uuid} to={`/${slug}/admin/learners`}>{name}</Link>;
   };
-  const { minHeight } = useContext(GlobalContext);
 
   return (
-    <main role="main">
-      <div className="container-fluid" style={{ minHeight }}>
-        <div className="row mt-4">
-          <div className="col-sm-12 col-md">
+    <main role="main" style={{ flex: 1 }}>
+      <Container className="my-4">
+        <Row>
+          <Col sm={12} md>
             <h1>{TITLE}</h1>
-          </div>
-        </div>
+          </Col>
+        </Row>
         <DataTable
           isPaginated
           manualPagination
@@ -90,7 +90,7 @@ const EnterpriseList = ({ clearPortalConfiguration }) => {
             },
           ]}
         />
-      </div>
+      </Container>
     </main>
   );
 };

src/components/ErrorPage/ErrorPage.test.jsx

@@ -4,24 +4,11 @@ import { MemoryRouter } from 'react-router-dom';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import ErrorPage from './index';
-import { GlobalContext } from '../GlobalContextProvider';
-
-const headerHeight = 0;
-const footerHeight = 0;
-
-const defaultGlobalContextValue = {
-  headerHeight,
-  footerHeight,
-  minHeight: `calc(100vh - ${headerHeight + footerHeight + 16}px)`,
-  dispatch: jest.fn(),
-};
 
 const ErrorPageWrapper = (props) => (
   <MemoryRouter>
     <IntlProvider locale="en">
-      <GlobalContext.Provider value={defaultGlobalContextValue}>
-        <ErrorPage {...props} />
-      </GlobalContext.Provider>
+      <ErrorPage {...props} />
     </IntlProvider>
   </MemoryRouter>
 );

src/components/ErrorPage/__snapshots__/ErrorPage.test.jsx.snap

@@ -3,6 +3,11 @@
 exports[`<ErrorPage /> renders correctly 1`] = `
 <main
   role="main"
+  style={
+    {
+      "flex": 1,
+    }
+  }
 >
   <div
     className="container-fluid"
@@ -60,6 +65,11 @@ exports[`<ErrorPage /> renders correctly 1`] = `
 exports[`<ErrorPage /> renders correctly for 403 errors 1`] = `
 <main
   role="main"
+  style={
+    {
+      "flex": 1,
+    }
+  }
 >
   <div
     className="container-fluid mt-3"
@@ -96,14 +106,14 @@ exports[`<ErrorPage /> renders correctly for 403 errors 1`] = `
 exports[`<ErrorPage /> renders correctly for 404 errors 1`] = `
 <main
   role="main"
+  style={
+    {
+      "flex": 1,
+    }
+  }
 >
   <div
-    className="container-fluid"
-    style={
-      {
-        "minHeight": "calc(100vh - 16px)",
-      }
-    }
+    className="container-fluid mt-3"
   >
     <div
       className="text-center py-5"