feat: support React 18; drop support for Paragon v21 in favor of v22 (#…

…441) * feat: support React 18 and Paragon v22 BREAKING CHANGE: drop support for Paragon v21 in `@edx/frontend-enterprise-catalog-search` * fix: use secondary pagination variant
openedx · Feb 26, 2025 · 7046540 · 7046540
1 parent f48e3e6
commit 7046540
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 207 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/catalog-search/package.json b/packages/catalog-search/package.json
@@ -11,17 +11,17 @@
       "patterns": [
         "src"
       ],
-      "extensions": "js,jsx"
+      "extensions": "js,jsx,ts,tsx"
     }
   },
   "scripts": {
     "dev": "npx npm-watch build",
     "clean": "make clean",
     "build": "make build",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "lint:fix": "npm run lint -- --fix",
+    "snapshot": "npm run test -- --updateSnapshot",
     "test": "fedx-scripts jest --coverage --passWithNoTests",
     "test:watch": "npm run test -- --watch"
   },
@@ -38,30 +38,30 @@
   "sideEffects": false,
   "dependencies": {
     "@edx/frontend-enterprise-utils": "^10.0.0",
-    "classnames": "2.5.1",
-    "lodash.debounce": "4.0.8",
-    "prop-types": "15.8.1"
+    "classnames": "^2.5.1",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "1.5.0",
-    "@edx/frontend-platform": "8.2.1",
-    "@openedx/frontend-build": "14.3.1",
-    "@openedx/paragon": "21.13.1",
-    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "3.7.0",
-    "@testing-library/user-event": "13.5.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-instantsearch-dom": "6.40.4",
-    "react-router-dom": "6.29.0",
-    "react-test-renderer": "17.0.2"
+    "@edx/browserslist-config": "^1.5.0",
+    "@edx/frontend-platform": "^8.2.1",
+    "@openedx/frontend-build": "^14.3.1",
+    "@openedx/paragon": "^22.15.1",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^3.7.0",
+    "@testing-library/user-event": "^14.6.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-instantsearch-dom": "^6.40.4",
+    "react-router-dom": "^6.29.0",
+    "react-test-renderer": "^18.3.1"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": "^21.0.0",
-    "react": "^16.12.0 || ^17.0.0",
-    "react-dom": "^16.12.0 || ^17.0.0",
+    "@openedx/paragon": "^22.0.0",
+    "react": "^16.12.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0",
     "react-instantsearch-dom": "^6.8.3",
     "react-router-dom": "^6.0.0"
   }

diff --git a/packages/catalog-search/src/SearchPagination.jsx b/packages/catalog-search/src/SearchPagination.jsx
@@ -1,7 +1,7 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { connectPagination } from 'react-instantsearch-dom';
-import { Pagination, Icon } from '@openedx/paragon';
+import { Pagination } from '@openedx/paragon';
 import { ArrowBackIos, ArrowForwardIos } from '@openedx/paragon/icons';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -16,27 +16,17 @@ export const SearchPaginationBase = ({
   const { dispatch } = useContext(SearchContext);
   const intl = useIntl();
 
-  const icons = useMemo(
-    () => ({
-      left: (
-        <>
-          <Icon src={ArrowBackIos} />
-          <div className="sr-only">Navigate Left</div>
-        </>
-      ),
-      right: (
-        <>
-          <Icon src={ArrowForwardIos} />
-          <div className="sr-only">Navigate Right</div>
-        </>
-      ),
-    }),
-    [],
-  );
-
   const buttonLabels = {
-    previous: '',
-    next: '',
+    previous: intl.formatMessage({
+      id: 'catalog.search.pagination.previous',
+      defaultMessage: 'Previous',
+      description: 'Label for the previous page button in the pagination component',
+    }),
+    next: intl.formatMessage({
+      id: 'catalog.search.pagination.next',
+      defaultMessage: 'Next',
+      description: 'Label for the next page button in the pagination component',
+    }),
     page: intl.formatMessage({
       id: 'catalog.search.pagination.page',
       defaultMessage: 'Page',
@@ -64,21 +54,20 @@ export const SearchPaginationBase = ({
 
   return (
     <Pagination
-      paginationLabel={
-        intl.formatMessage({
-          id: 'catalog.search.pagination.label',
-          defaultMessage: 'search results navigation',
-          description: 'Label for the pagination component',
-        })
-      }
+      variant="secondary"
+      paginationLabel={intl.formatMessage({
+        id: 'catalog.search.pagination.label',
+        defaultMessage: 'search results navigation',
+        description: 'Label for the pagination component',
+      })}
       pageCount={nbPages}
       currentPage={currentRefinement}
       onPageSelect={handlePageSelect}
       maxPagesDisplayed={maxPagesDisplayed}
       buttonLabels={buttonLabels}
       icons={{
-        leftIcon: icons.left,
-        rightIcon: icons.right,
+        leftIcon: ArrowBackIos,
+        rightIcon: ArrowForwardIos,
       }}
     />
   );

diff --git a/packages/catalog-search/src/tests/ClearCurrentRefinements.test.jsx b/packages/catalog-search/src/tests/ClearCurrentRefinements.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -25,11 +26,12 @@ describe('<ClearCurrentRefinements />', () => {
   });
 
   test('dispatches the clear refinements action on click', async () => {
+    const user = userEvent.setup();
     const spy = jest.spyOn(actions, 'clearRefinementsAction');
     renderWithRouter(<ClearCurrentRefinementsWrapper />);
 
     // click a specific refinement to remove it
-    fireEvent.click(screen.queryByText(CLEAR_ALL_TEXT));
+    await user.click(screen.queryByText(CLEAR_ALL_TEXT));
 
     // assert the clicked refinement in the url is removed but others stay put
     expect(spy).toHaveBeenCalledTimes(1);