fix: frontend fixes (#281)

* fix: frontend fixes * fix!: extra details * fix: test fixes * fix: PR requests
openedx · Jan 23, 2023 · b0f7872 · b0f7872
1 parent a3461de
commit b0f7872
Show file tree

Hide file tree

Showing 15 changed files with 156 additions and 264 deletions.
diff --git a/src/components/PageWrapper.jsx b/src/components/PageWrapper.jsx
@@ -9,7 +9,7 @@ export const DATA_TEST_ID = 'enterprise-catalogs-content';
 // eslint-disable-next-line react/prop-types
 function PageWrapper({ children, className }) {
   return (
-    <Container className={className}>
+    <Container size="xl" className={className}>
       <Helmet title={PAGE_TITLE} />
       <div data-testid={DATA_TEST_ID}>{children}</div>
     </Container>

diff --git a/src/components/catalogModalBanner/CatalogCourseModalBanner.jsx b/src/components/catalogModalBanner/CatalogCourseModalBanner.jsx
@@ -46,7 +46,7 @@ function CatalogCourseModalBanner({
   execEd,
 }) {
   return (
-    <div className="my-4.5 banner">
+    <div className="banner">
       <div className="banner-section mx-3">
         <div className="banner h4 mb-0">
           <Icon className="mr-1" src={MoneyOutline} />

diff --git a/src/components/catalogModalBanner/CatalogProgramModalBanner.jsx b/src/components/catalogModalBanner/CatalogProgramModalBanner.jsx
@@ -14,7 +14,7 @@ function CatalogProgramModalBanner({
   courses,
 }) {
   return (
-    <div className="my-4.5 banner">
+    <div className="banner">
       {coursePrice !== undefined && (
         <>
           <div className="banner-section mx-3">

diff --git a/src/components/catalogNoResultsDeck/CatalogNoResultsDeck.test.jsx b/src/components/catalogNoResultsDeck/CatalogNoResultsDeck.test.jsx
@@ -1,6 +1,6 @@
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { logError } from '@edx/frontend-platform/logging';
 
@@ -16,10 +16,6 @@ const TEST_COURSE_NAME_2 = 'test course 2';
 const TEST_PARTNER_2 = 'edx 2';
 const TEST_CATALOGS_2 = ['baz', 'ayylmao'];
 
-// Note- console.error is causing tests to fail so we're simply getting rid of it :)
-delete global.console;
-global.console = { error: jest.fn() };
-
 const csvData = {
   default_content: [
     {
@@ -58,59 +54,41 @@ const defaultProps = {
   columns: [],
   renderCardComponent: jest.fn(),
   contentType: 'course',
-  intl: {
-    formatMessage: (header) => header.defaultMessage,
-    formatDate: () => {},
-    formatTime: () => {},
-    formatRelative: () => {},
-    formatNumber: () => {},
-    formatPlural: () => {},
-    formatHTMLMessasge: () => {},
-    now: () => {},
-  },
 };
 
 const execEdProps = {
   setCardView: jest.fn(),
   columns: [],
   renderCardComponent: jest.fn(),
   contentType: 'executive-education-2u',
-  intl: {
-    formatMessage: (header) => header.defaultMessage,
-    formatDate: () => {},
-    formatTime: () => {},
-    formatRelative: () => {},
-    formatNumber: () => {},
-    formatPlural: () => {},
-    formatHTMLMessasge: () => {},
-    now: () => {},
-  },
 };
 
 describe('catalog no results deck works as expected', () => {
-  test('it displays no results alert text', () => {
+  test('it displays no results alert text', async () => {
     mockCatalogApiService.mockResolvedValue(csvData);
     render(
       <IntlProvider locale="en">
         <CatalogNoResultsDeck {...defaultProps} />
       </IntlProvider>,
     );
-    expect(screen.getByTestId('noResultsAlertTestId')).toBeInTheDocument();
-    expect(screen.getByText('No Results')).toBeInTheDocument();
-  });
 
-  test('clicking remove filters will update query params', () => {
+    await waitFor(() => { expect(screen.getByTestId('noResultsAlertTestId')); });
+    await waitFor(() => { expect(screen.getByText('No Results')); });
+  });
+  test('clicking remove filters will update query params', async () => {
     getSelectedCatalogFromURL.mockReturnValue('ayylmao');
     render(
       <IntlProvider locale="en">
         <CatalogNoResultsDeck {...defaultProps} />
       </IntlProvider>,
     );
-    const hyperlinkthing = screen.getByText('removing filters');
-    expect(hyperlinkthing).toHaveAttribute(
-      'href',
-      `${process.env.BASE_URL}/?enterprise_catalog_query_titles=ayylmao`,
-    );
+    await waitFor(() => {
+      const hyperlink = screen.getByText('removing filters');
+      expect(hyperlink).toHaveAttribute(
+        'href',
+        `${process.env.BASE_URL}/?enterprise_catalog_query_titles=ayylmao`,
+      );
+    });
   });
   test('API error responses will hide content deck', async () => {
     mockCatalogApiService.mockRejectedValue(new Error('Async error'));
@@ -130,7 +108,6 @@ describe('catalog no results deck works as expected', () => {
         <CatalogNoResultsDeck {...execEdProps} />
       </IntlProvider>,
     );
-    expect(screen.getByText('No Executive Education courses were found that match your search. Try')).toBeInTheDocument();
-    expect(screen.getByText('Popular Executive Education Courses')).toBeInTheDocument();
+    await waitFor(() => { expect(screen.getByText('No Executive Education courses were found that match your search. Try')); });
   });
 });
diff --git a/src/components/catalogSearchResults/CatalogSearchResults.jsx b/src/components/catalogSearchResults/CatalogSearchResults.jsx
@@ -494,8 +494,7 @@ export function BaseCatalogSearchResults({
             {!cardView && <DataTable.Table />}
 
             {!preview && (
-              <DataTable.TableFooter>
-                <DataTable.RowStatus />
+              <DataTable.TableFooter className="justify-content-center">
                 <PaginationComponent defaultRefinement={page} />
               </DataTable.TableFooter>
             )}

diff --git a/src/components/catalogSelectionCard/CatalogSelectionCard.jsx b/src/components/catalogSelectionCard/CatalogSelectionCard.jsx
diff --git a/src/components/catalogSelectionDeck/CatalogSelectionDeck.jsx b/src/components/catalogSelectionDeck/CatalogSelectionDeck.jsx
@@ -1,80 +1,86 @@
-import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { Container, CardDeck } from '@edx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import CatalogSelectionCard from '../catalogSelectionCard/CatalogSelectionCard';
-import messages from './CatalogSelectionDeck.messages';
+import classNames from 'classnames';
 
-const businessClassName = 'business-catalog';
-const aLaCarteVariant = 'dark';
-const businessVariant = 'secondary';
-const educationVariant = 'light';
+import { getConfig } from '@edx/frontend-platform/config';
+import {
+  SearchContext,
+  setRefinementAction,
+} from '@edx/frontend-enterprise-catalog-search';
+import {
+  Badge, breakpoints, Container, SelectableBox, useMediaQuery,
+} from '@edx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './CatalogSelectionDeck.messages';
+import { QUERY_TITLE_REFINEMENT } from '../../constants';
 
 function CatalogSelectionDeck({ intl, title, hide }) {
+  const { refinements, dispatch } = useContext(SearchContext);
   const config = getConfig();
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    dispatch(setRefinementAction(QUERY_TITLE_REFINEMENT, [e.target.value]));
+    setValue(e.target.value);
+  };
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  useEffect(() => {
+    if (refinements[QUERY_TITLE_REFINEMENT]) {
+      setValue(refinements[QUERY_TITLE_REFINEMENT][0]);
+    }
+  }, [refinements]);
+
   return (
-    <section
-      className="catalog-selection-deck"
-      style={{ display: hide ? 'none' : 'block' }}
-    >
-      <Container className="page-width">
-        <h2>{title}</h2>
-        {/* TODO: The previously used `CardDeck` is since deprecated. However,
-        this use case is more relevant to `SelectableBox` than `CardDeck` */}
-        <CardDeck.Deprecated>
-          <CatalogSelectionCard
-            queryTitle={config.EDX_ENTERPRISE_ALACARTE_TITLE}
-            badgeVariant={aLaCarteVariant}
-            badge={intl.formatMessage(
-              messages['catalogSelectionDeck.aLaCarte.badge'],
-            )}
-            label={intl.formatMessage(
-              messages['catalogSelectionDeck.aLaCarte.label'],
-            )}
-            labelDetail={intl.formatMessage(
-              messages['catalogSelectionDeck.aLaCarte.labelDetail'],
-            )}
-            cardBody={intl.formatMessage(
-              messages['catalogSelectionDeck.aLaCarte.body'],
-            )}
-          />
-          <CatalogSelectionCard
-            queryTitle={config.EDX_FOR_BUSINESS_TITLE}
-            className={businessClassName}
-            badgeVariant={businessVariant}
-            badge={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForBusiness.badge'],
-            )}
-            label={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForBusiness.label'],
-            )}
-            labelDetail={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForBusiness.labelDetail'],
-            )}
-            cardBody={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForBusiness.body'],
-            )}
-          />
-          <CatalogSelectionCard
-            queryTitle={config.EDX_FOR_ONLINE_EDU_TITLE}
-            badgeVariant={educationVariant}
-            badge={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForOnlineEdu.badge'],
-            )}
-            label={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForOnlineEdu.label'],
-            )}
-            labelDetail={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForOnlineEdu.labelDetail'],
-            )}
-            cardBody={intl.formatMessage(
-              messages['catalogSelectionDeck.edxForOnlineEdu.body'],
-            )}
-          />
-        </CardDeck.Deprecated>
-      </Container>
-    </section>
+    <Container size="xl" className={classNames({ 'd-none': hide })}>
+      <h2>{title}</h2>
+      <SelectableBox.Set
+        name="catalog-selection"
+        type="radio"
+        value={value}
+        onChange={handleChange}
+        columns={isExtraSmall ? 1 : 3}
+        className="py-4"
+      >
+        <SelectableBox value={config.EDX_ENTERPRISE_ALACARTE_TITLE} inputHidden={false} type="radio" aria-label="a la carte select">
+          <div>
+            <Badge variant="dark">
+              {intl.formatMessage(messages['catalogSelectionDeck.aLaCarte.badge'])}
+            </Badge>
+            <h3>{intl.formatMessage(messages['catalogSelectionDeck.aLaCarte.label'])}</h3>
+            <p>{intl.formatMessage(messages['catalogSelectionDeck.aLaCarte.labelDetail'])}</p>
+            <ul className="catalog-list">
+              <li>{intl.formatMessage(messages['catalogSelectionDeck.aLaCarte.bullet1'])}</li>
+              <li>{intl.formatMessage(messages['catalogSelectionDeck.aLaCarte.bullet2'])}</li>
+            </ul>
+          </div>
+        </SelectableBox>
+        <SelectableBox value={config.EDX_FOR_BUSINESS_TITLE} inputHidden={false} type="radio" aria-label="business select">
+          <Badge variant="secondary">
+            {intl.formatMessage(messages['catalogSelectionDeck.edxForBusiness.badge'])}
+          </Badge>
+          <h3>{intl.formatMessage(messages['catalogSelectionDeck.edxForBusiness.label'])}</h3>
+          <p>{intl.formatMessage(messages['catalogSelectionDeck.labelDetail'])}</p>
+          <ul className="catalog-list">
+            <li>{intl.formatMessage(messages['catalogSelectionDeck.bullet1'])}</li>
+            <li>{intl.formatMessage(messages['catalogSelectionDeck.bullet2'])}</li>
+            <li>{intl.formatMessage(messages['catalogSelectionDeck.bullet3'])}</li>
+          </ul>
+        </SelectableBox>
+        <SelectableBox value={config.EDX_FOR_ONLINE_EDU_TITLE} inputHidden={false} type="radio" aria-label="education select">
+          <Badge variant="light">
+            {intl.formatMessage(messages['catalogSelectionDeck.edxForOnlineEdu.badge'])}
+          </Badge>
+          <h3>{intl.formatMessage(messages['catalogSelectionDeck.edxForOnlineEdu.label'])}</h3>
+          <p>{intl.formatMessage(messages['catalogSelectionDeck.labelDetail'])}</p>
+          <ul className="catalog-list">
+            <li>{intl.formatMessage(messages['catalogSelectionDeck.bullet1'])}</li>
+            <li>{intl.formatMessage(messages['catalogSelectionDeck.bullet2'])}</li>
+            <li>{intl.formatMessage(messages['catalogSelectionDeck.bullet3'])}</li>
+          </ul>
+        </SelectableBox>
+      </SelectableBox.Set>
+    </Container>
   );
 }