fix: update enterprise-app view height (#1258)

src/components/App/index.jsx

@@ -33,6 +33,7 @@ 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) => ({
@@ -124,60 +125,62 @@ const AppWrapper = () => {
           {config.MAINTENANCE_ALERT_MESSAGE}
         </SystemWideWarningBanner>
         )}
-        <Header />
-        <Routes>
-          <Route
-            path="/enterprises"
-            element={(
-              <AuthenticatedPageRoute
-                authenticatedAPIClient={apiClient}
-                redirect={`${process.env.BASE_URL}/enterprises`}
-              >
-                <EnterpriseIndexPage />
-              </AuthenticatedPageRoute>
-          )}
-          />
-          <Route
-            path="/:enterpriseSlug/admin/register"
-            element={<PageWrap><AdminRegisterPage /></PageWrap>}
-          />
-          <Route
-            path="/:enterpriseSlug/admin/register/activate"
-            element={<PageWrap><UserActivationPage /></PageWrap>}
-          />
-          <Route
-            path="/:enterpriseSlug/admin?"
-            element={(
-              <PageWrap
-                authenticatedAPIClient={apiClient}
-                redirect={process.env.BASE_URL}
-              >
-                <RedirectComponent />
-              </PageWrap>
-          )}
-          />
-          <Route
-            path="/:enterpriseSlug/admin/:enterpriseAppPage/*"
-            element={(
-              <PageWrap
-                authenticatedAPIClient={apiClient}
-                redirect={process.env.BASE_URL}
-              >
-                <AuthenticatedEnterpriseApp />
-              </PageWrap>
-          )}
-          />
-          <Route
-            path="/"
-            element={(
-              <AuthenticatedPageRoute authenticatedAPIClient={apiClient} redirect={process.env.BASE_URL}>
-                <EnterpriseIndexPage />
-              </AuthenticatedPageRoute>
-          )}
-          />
-          <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
-        </Routes>
-        <Footer />
+        <GlobalContextProvider>
+          <Header />
+          <Routes>
+            <Route
+              path="/enterprises"
+              element={(
+                <AuthenticatedPageRoute
+                  authenticatedAPIClient={apiClient}
+                  redirect={`${process.env.BASE_URL}/enterprises`}
+                >
+                  <EnterpriseIndexPage />
+                </AuthenticatedPageRoute>
+           )}
+            />
+            <Route
+              path="/:enterpriseSlug/admin/register"
+              element={<PageWrap><AdminRegisterPage /></PageWrap>}
+            />
+            <Route
+              path="/:enterpriseSlug/admin/register/activate"
+              element={<PageWrap><UserActivationPage /></PageWrap>}
+            />
+            <Route
+              path="/:enterpriseSlug/admin?"
+              element={(
+                <PageWrap
+                  authenticatedAPIClient={apiClient}
+                  redirect={process.env.BASE_URL}
+                >
+                  <RedirectComponent />
+                </PageWrap>
+           )}
+            />
+            <Route
+              path="/:enterpriseSlug/admin/:enterpriseAppPage/*"
+              element={(
+                <PageWrap
+                  authenticatedAPIClient={apiClient}
+                  redirect={process.env.BASE_URL}
+                >
+                  <AuthenticatedEnterpriseApp />
+                </PageWrap>
+           )}
+            />
+            <Route
+              path="/"
+              element={(
+                <AuthenticatedPageRoute authenticatedAPIClient={apiClient} redirect={process.env.BASE_URL}>
+                  <EnterpriseIndexPage />
+                </AuthenticatedPageRoute>
+           )}
+            />
+            <Route path="*" element={<PageWrap><NotFoundPage /></PageWrap>} />
+          </Routes>
+          <Footer />
+        </GlobalContextProvider>
       </AppProvider>
     </QueryClientProvider>
   );

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

@@ -19,6 +19,7 @@ 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';
@@ -46,6 +47,16 @@ 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 });
@@ -63,16 +74,18 @@ const CouponCodeTabsWrapper = ({
     <IntlProvider locale="en">
       <Provider store={store}>
         <MemoryRouter initialEntries={[route]}>
-          <Routes>
-            <Route
-              path="/:enterpriseSlug/admin/coupons/:couponCodesTab"
-              element={(
-                <SubsidyRequestsContext.Provider value={contextValue}>
-                  <CouponCodeTabs />
-                </SubsidyRequestsContext.Provider>
-            )}
-            />
-          </Routes>
+          <GlobalContext.Provider value={defaultGlobalContextValue}>
+            <Routes>
+              <Route
+                path="/:enterpriseSlug/admin/coupons/:couponCodesTab"
+                element={(
+                  <SubsidyRequestsContext.Provider value={contextValue}>
+                    <CouponCodeTabs />
+                  </SubsidyRequestsContext.Provider>
+                  )}
+              />
+            </Routes>
+          </GlobalContext.Provider>
         </MemoryRouter>
       </Provider>
     </IntlProvider>

src/components/EnterpriseApp/EnterpriseApp.test.jsx

@@ -12,9 +12,20 @@ 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,
@@ -27,12 +38,19 @@ 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', () => ({
@@ -67,27 +85,37 @@ jest.mock('../../containers/Sidebar', () => ({
   default: () => 'Sidebar',
 }));
 
+const basicProps = {
+  enterpriseSlug: 'foo',
+  fetchPortalConfiguration: jest.fn(),
+  toggleSidebarToggle: jest.fn(),
+  loading: false,
+  enableLearnerPortal: true,
+  enterpriseId: 'uuid',
+  enterpriseName: 'test-enterprise',
+  enterpriseBranding: {
+    primary_color: SCHOLAR_THEME.button,
+    secondary_color: SCHOLAR_THEME.banner,
+    tertiary_color: SCHOLAR_THEME.accent,
+  },
+};
+
+const invalidEnterpriseId = {
+  ...basicProps,
+  enterpriseId: null,
+  enterpriseName: null,
+};
+
+const EnterpriseAppWrapper = (props = basicProps) => (
+  <IntlProvider locale="en">
+    <GlobalContextProvider>
+      <EnterpriseApp {...props} />
+    </GlobalContextProvider>
+  </IntlProvider>
+
+);
+
 describe('<EnterpriseApp />', () => {
-  const basicProps = {
-    enterpriseSlug: 'foo',
-    fetchPortalConfiguration: jest.fn(),
-    toggleSidebarToggle: jest.fn(),
-    loading: false,
-    enableLearnerPortal: true,
-    enterpriseId: 'uuid',
-    enterpriseName: 'test-enterprise',
-    enterpriseBranding: {
-      primary_color: SCHOLAR_THEME.button,
-      secondary_color: SCHOLAR_THEME.banner,
-      tertiary_color: SCHOLAR_THEME.accent,
-    },
-  };
-
-  const invalidEnterpriseId = {
-    ...basicProps,
-    enterpriseId: null,
-    enterpriseName: null,
-  };
   beforeEach(() => {
     getAuthenticatedUser.mockReturnValue({
       username: 'edx',
@@ -97,16 +125,12 @@ describe('<EnterpriseApp />', () => {
   });
 
   it('should show settings page if there is at least one visible tab', () => {
-    renderWithRouter(<EnterpriseApp {...basicProps} />);
+    renderWithRouter(<EnterpriseAppWrapper {...basicProps} />);
     expect(screen.getByText('/admin/settings'));
   });
 
   it('should show error page if enterprise name is invalid', () => {
-    render(
-      <IntlProvider locale="en">
-        <EnterpriseApp {...invalidEnterpriseId} />
-      </IntlProvider>,
-    );
+    render(<EnterpriseAppWrapper {...invalidEnterpriseId} />);
     expect(screen.getByText("Oops, sorry we can't find that page!")).toBeInTheDocument();
   });
 });

src/components/EnterpriseApp/index.jsx

@@ -16,8 +16,12 @@ 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);
 
@@ -122,7 +126,7 @@ class EnterpriseApp extends React.Component {
         enablePortalLearnerCreditManagementScreen={enablePortalLearnerCreditManagementScreen}
       >
         <BrandStyles enterpriseBranding={enterpriseBranding} />
-        <div className="enterprise-app">
+        <div className="enterprise-app" style={{ minHeight: this.context.minHeight }}>
           <MediaQuery minWidth={breakpoints.large.minWidth}>
             {matchesMediaQ => (
               <>

src/components/EnterpriseList/EnterpriseList.test.jsx

@@ -4,6 +4,7 @@ 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));
 
@@ -13,9 +14,21 @@ 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>
-    <EnterpriseList clearPortalConfiguration={() => { }} />
+  <IntlProvider locale="en">
+    <GlobalContext.Provider value={defaultGlobalContextValue}>
+      <EnterpriseList clearPortalConfiguration={() => { }} />
+    </GlobalContext.Provider>
   </IntlProvider>
 );
 

src/components/EnterpriseList/index.jsx

@@ -1,5 +1,6 @@
 import React, {
   useCallback,
+  useContext,
   useEffect,
   useMemo,
   useState,
@@ -12,6 +13,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import { DataTable, TextFilter } from '@openedx/paragon';
 
 import LmsApiService from '../../data/services/LmsApiService';
+import { GlobalContext } from '../GlobalContextProvider';
 
 export const TITLE = 'Enterprise List';
 const PAGE_SIZE = 50;
@@ -52,10 +54,11 @@ 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">
+      <div className="container-fluid" style={{ minHeight }}>
         <div className="row mt-4">
           <div className="col-sm-12 col-md">
             <h1>{TITLE}</h1>