feat: update react & react-dom to v17 (#758)

* feat: update react & react-dom to v17 * build: update paragon * feat: replaced react-truncate with react-lines-ellipsis, updated code respectively * refactor: updated snapshot and fixed eslint issues * refactor: updated failing tests * refactor: updated tests for SearchProgramCard * refactor: bumped enterprise, react-fontawesome & react-helmet * refactor: pinned frontend-build version to 12.8.60 * feat: replaced react-lines-ellipsis with paragon truncate, updated test cases --------- Co-authored-by: Mashal Malik <107556986+Mashal-m@users.noreply.github.com> Co-authored-by: mashal-m <mashal.malik@arbisoft.com>
openedx · Oct 3, 2023 · 548a4c5 · 548a4c5
1 parent c1f97d9
commit 548a4c5
Show file tree

Hide file tree

Showing 24 changed files with 3,933 additions and 3,360 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,13 +8,13 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "12.0.0",
+    "@edx/frontend-component-footer": "12.1.2",
     "@edx/frontend-enterprise-catalog-search": "4.7.1",
-    "@edx/frontend-enterprise-hotjar": "1.3.0",
-    "@edx/frontend-enterprise-logistration": "3.0.0",
-    "@edx/frontend-enterprise-utils": "3.0.0",
+    "@edx/frontend-enterprise-hotjar": "1.4.0",
+    "@edx/frontend-enterprise-logistration": "3.4.0",
+    "@edx/frontend-enterprise-utils": "3.4.0",
     "@edx/frontend-platform": "4.6.3",
-    "@edx/paragon": "21.1.6",
+    "@edx/paragon": "20.45.4",
     "@tanstack/react-query": "4.28.0",
     "@tanstack/react-query-devtools": "4.29.0",
     "algoliasearch": "4.6.0",
@@ -36,10 +36,10 @@
     "lodash.isnil": "4.0.0",
     "plotly.js-dist": "2.17.0",
     "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-fullstory": "1.4.0",
-    "react-helmet": "5.2.1",
+    "react-helmet": "6.1.0",
     "react-instantsearch-dom": "6.38.1",
     "react-parallax": "3.3.0",
     "react-redux": "7.2.2",
@@ -49,7 +49,6 @@
     "react-scroll": "1.8.4",
     "react-string-replace": "1.1.0",
     "react-transition-group": "4.4.1",
-    "react-truncate": "2.4.0",
     "redux": "4.0.5",
     "reselect": "4.0.0",
     "start": "5.1.0",
@@ -63,17 +62,17 @@
     "@edx/frontend-build": "12.9.4",
     "@tanstack/eslint-plugin-query": "4.29.9",
     "@testing-library/jest-dom": "5.11.9",
-    "@testing-library/react": "11.2.7",
+    "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "3.7.0",
     "@testing-library/user-event": "13.5.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "acorn": "8.5.0",
     "axios-mock-adapter": "1.19.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
     "jest-canvas-mock": "^2.4.0",
     "match-media-mock": "0.1.1",
     "prettier": "2.2.1",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "17.0.2",
     "resize-observer-polyfill": "^1.5.1"
   },
   "keywords": [],

diff --git a/src/components/course/CourseRecommendationCard.jsx b/src/components/course/CourseRecommendationCard.jsx
@@ -1,10 +1,9 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Truncate from 'react-truncate';
 import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
-import { Card } from '@edx/paragon';
+import { Card, Truncate } from '@edx/paragon';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import { getPrimaryPartnerLogo, isDefinedAndNotNull } from '../../utils/common';
@@ -62,15 +61,11 @@ const CourseRecommendationCard = ({ course, isPartnerRecommendation }) => {
 
       <Card.Header
         title={(
-          <Truncate lines={3} trimWhitespace>
-            {course.title}
-          </Truncate>
+          <Truncate maxLine={3}>{course.title}</Truncate>
         )}
         subtitle={course.owners?.length > 0 && (
           <p className="partner">
-            <Truncate lines={1} trimWhitespace>
-              {course.owners.map(partner => partner.name).join(', ')}
-            </Truncate>
+            <Truncate maxLine={1}>{course.owners.map(partner => partner.name).join(', ')}</Truncate>
           </p>
         )}
       />

diff --git a/src/components/course/tests/CourseRecommendationCard.test.jsx b/src/components/course/tests/CourseRecommendationCard.test.jsx
@@ -13,11 +13,6 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
   sendEnterpriseTrackEvent: jest.fn(),
 }));
 
-jest.mock('react-truncate', () => ({
-  __esModule: true,
-  default: ({ children }) => children,
-}));
-
 const TEST_UUID = '1234053423-4212-21323-45fdf';
 const initialAppState = {
   enterpriseConfig: {

diff --git a/src/components/course/tests/CourseRecommendations.test.jsx b/src/components/course/tests/CourseRecommendations.test.jsx
@@ -13,11 +13,6 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
   hasFeatureFlagEnabled: jest.fn(),
 }));
 
-jest.mock('react-truncate', () => ({
-  __esModule: true,
-  default: ({ children }) => children,
-}));
-
 const TEST_UUID = '1234053423-4212-21323-45fdf';
 const initialAppState = {
   enterpriseConfig: {

diff --git a/src/components/my-career/tests/SkillsRecommendationCourses.test.jsx b/src/components/my-career/tests/SkillsRecommendationCourses.test.jsx
@@ -27,11 +27,6 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
   sendEnterpriseTrackEvent: jest.fn(),
 }));
 
-jest.mock('react-truncate', () => ({
-  __esModule: true,
-  default: ({ children }) => children,
-}));
-
 // eslint-disable-next-line no-console
 console.error = jest.fn();
 

diff --git a/src/components/pathway-progress/PathwayProgressCard.jsx b/src/components/pathway-progress/PathwayProgressCard.jsx
@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
-import { Card } from '@edx/paragon';
-import Truncate from 'react-truncate';
+import { Card, Truncate } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 import { useHistory } from 'react-router-dom';
@@ -30,9 +29,7 @@ const PathwayProgressCard = ({ pathway: { learnerPathwayProgress } }) => {
       />
       <Card.Header
         title={(
-          <Truncate lines={2} trimWhitespace>
-            {learnerPathwayProgress.title}
-          </Truncate>
+          <Truncate maxLine={2}>{learnerPathwayProgress.title}</Truncate>
         )}
       />
       <Card.Section />

diff --git a/src/components/pathway/SearchPathwayCard.jsx b/src/components/pathway/SearchPathwayCard.jsx
@@ -1,12 +1,13 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Truncate from 'react-truncate';
 import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform/config';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
-import { Badge, Card, Stack } from '@edx/paragon';
+import {
+  Badge, Card, Stack, Truncate,
+} from '@edx/paragon';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import {
@@ -113,9 +114,7 @@ const SearchPathwayCard = ({
       />
       <Card.Header
         title={(
-          <Truncate lines={3} trimWhitespace>
-            {pathway.title}
-          </Truncate>
+          <Truncate maxLine={3}>{pathway.title}</Truncate>
         )}
       />
       <Card.Section>

diff --git a/src/components/pathway/tests/SearchPathwayCard.test.jsx b/src/components/pathway/tests/SearchPathwayCard.test.jsx
@@ -10,11 +10,6 @@ import { TEST_ENTERPRISE_SLUG, TEST_ENTERPRISE_UUID } from './constants';
 import { PATHWAY_SEARCH_EVENT_NAME, PATHWAY_SKILL_QUIZ_EVENT_NAME } from '../constants';
 import { renderWithRouter } from '../../../utils/tests';
 
-jest.mock('react-truncate', () => ({
-  __esModule: true,
-  default: ({ children }) => children,
-}));
-
 jest.mock('@edx/frontend-enterprise-utils', () => {
   const originalModule = jest.requireActual('@edx/frontend-enterprise-utils');
   return ({

diff --git a/src/components/program-progress/ProgramListingCard.jsx b/src/components/program-progress/ProgramListingCard.jsx
@@ -1,5 +1,5 @@
 import {
-  breakpoints, Card,
+  breakpoints, Card, Truncate,
 } from '@edx/paragon';
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -8,7 +8,6 @@ import { useHistory } from 'react-router-dom';
 
 import { AppContext } from '@edx/frontend-platform/react';
 
-import Truncate from 'react-truncate';
 import { getProgramIcon } from '../course/data/utils';
 import { ProgressCategoryBubbles } from '../progress-category-bubbles';
 
@@ -72,12 +71,10 @@ const ProgramListingCard = ({ program }) => {
 
       <Card.Header
         title={(
-          <Truncate lines={2} trimWhitespace>
-            {program.title}
-          </Truncate>
+          <Truncate maxLine={2}>{program.title}</Truncate>
         )}
         subtitle={program.authoringOrganizations?.length > 0 ? (
-          <Truncate lines={2} trimWhitespace>
+          <Truncate maxLine={2}>
             {program.authoringOrganizations.map(org => org.key).join(', ')}
           </Truncate>
         ) : undefined}

diff --git a/src/components/search/SearchCourseCard.jsx b/src/components/search/SearchCourseCard.jsx
@@ -1,12 +1,11 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Truncate from 'react-truncate';
 import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform/config';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
-import { Card } from '@edx/paragon';
+import { Card, Truncate } from '@edx/paragon';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import { getPrimaryPartnerLogo, isDefinedAndNotNull } from '../../utils/common';
@@ -109,12 +108,10 @@ const SearchCourseCard = ({
       />
       <Card.Header
         title={(
-          <Truncate lines={3} trimWhitespace>
-            {course.title}
-          </Truncate>
+          <Truncate maxLine={3}>{course.title}</Truncate>
         )}
         subtitle={course.partners?.length > 0 && (
-          <Truncate lines={2} trimWhitespace>
+          <Truncate maxLine={2}>
             {course.partners.map(partner => partner.name).join(', ')}
           </Truncate>
         )}

diff --git a/src/components/search/SearchProgramCard.jsx b/src/components/search/SearchProgramCard.jsx
@@ -1,12 +1,13 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Truncate from 'react-truncate';
 import cardFallbackImg from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
-import { Badge, Card, Icon } from '@edx/paragon';
+import {
+  Badge, Card, Icon, Truncate,
+} from '@edx/paragon';
 import { Program } from '@edx/paragon/icons';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
@@ -112,13 +113,11 @@ const SearchProgramCard = ({ hit, isLoading, ...rest }) => {
       />
       <Card.Header
         title={(
-          <Truncate lines={3} trimWhitespace>
-            {program.title}
-          </Truncate>
+          <Truncate maxLine={3}>{program.title}</Truncate>
         )}
         subtitle={
           program.authoringOrganizations?.length > 0 && (
-            <Truncate lines={2} trimWhitespace>
+            <Truncate maxLine={2}>
               {program.authoringOrganizations.map(org => org.key).join(', ')}
             </Truncate>
           )

diff --git a/src/components/search/content-highlights/HighlightedContentCard.jsx b/src/components/search/content-highlights/HighlightedContentCard.jsx
@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import Truncate from 'react-truncate';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
-import { Card } from '@edx/paragon';
+import { Card, Truncate } from '@edx/paragon';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import cardImageCapFallbackSrc from '@edx/brand/paragon/images/card-imagecap-fallback.png';
 
@@ -69,14 +68,10 @@ const HighlightedContentCard = ({
       />
       <Card.Header
         title={(
-          <Truncate lines={3} trimWhitespace>
-            {title}
-          </Truncate>
+          <Truncate maxLine={3}>{title}</Truncate>
         )}
         subtitle={authoringOrganizations?.content && (
-          <Truncate lines={2} trimWhitespace>
-            {authoringOrganizations.content}
-          </Truncate>
+          <Truncate maxLine={2}>{authoringOrganizations.content}</Truncate>
         )}
       />
       <Card.Section />

diff --git a/src/components/search/tests/SearchCourseCard.test.jsx b/src/components/search/tests/SearchCourseCard.test.jsx
@@ -10,11 +10,6 @@ import * as courseSearchUtils from '../utils';
 import { renderWithRouter } from '../../../utils/tests';
 import { TEST_ENTERPRISE_SLUG, TEST_IMAGE_URL } from './constants';
 
-jest.mock('react-truncate', () => ({
-  __esModule: true,
-  default: ({ children }) => children,
-}));
-
 const SearchCourseCardWithAppContext = (props) => (
   <AppContext.Provider
     value={{

diff --git a/src/components/search/tests/SearchProgramCard.test.jsx b/src/components/search/tests/SearchProgramCard.test.jsx
@@ -11,10 +11,6 @@ import { TEST_ENTERPRISE_SLUG } from './constants';
 
 const userId = 'batman';
 const enterpriseUuid = '11111111-1111-1111-1111-111111111111';
-jest.mock('react-truncate', () => ({
-  __esModule: true,
-  default: ({ children }) => children,
-}));
 
 jest.mock('@edx/frontend-platform/auth', () => ({
   ...jest.requireActual('@edx/frontend-platform/auth'),

diff --git a/src/components/skills-quiz/CourseCard.jsx b/src/components/skills-quiz/CourseCard.jsx
@@ -1,7 +1,8 @@
 import React, { useContext, useMemo } from 'react';
-import { Badge, Card, Stack } from '@edx/paragon';
+import {
+  Badge, Card, Stack, Truncate,
+} from '@edx/paragon';
 import { useHistory } from 'react-router-dom';
-import Truncate from 'react-truncate';
 import { AppContext } from '@edx/frontend-platform/react';
 import PropTypes from 'prop-types';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -65,18 +66,13 @@ const CourseCard = ({
       />
       <Card.Header
         title={(
-          <Truncate
-            lines={course.skillNames?.length < 5 ? 3 : 2}
-            trimWhitespace
-          >
+          <Truncate maxLine={course.skillNames?.length < 5 ? 3 : 2}>
             {course.title}
           </Truncate>
         )}
         subtitle={course.partners.length > 0 && (
-          <Truncate lines={2} trimWhitespace>
-            {course.partners
-              .map((partner) => partner.name)
-              .join(', ')}
+          <Truncate maxLine={2}>
+            {course.partners.map((partner) => partner.name).join(', ')}
           </Truncate>
         )}
       />

diff --git a/src/components/skills-quiz/SearchProgramCard.jsx b/src/components/skills-quiz/SearchProgramCard.jsx
@@ -3,13 +3,12 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
-import Truncate from 'react-truncate';
 import { useHistory } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 import {
-  Badge, Card, Icon, Alert, CardGrid, Stack,
+  Badge, Card, Icon, Alert, CardGrid, Stack, Truncate,
 } from '@edx/paragon';
 import { Program, ZoomOut } from '@edx/paragon/icons';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
@@ -203,12 +202,12 @@ const SearchProgramCard = ({ index }) => {
               />
               <Card.Header
                 title={(
-                  <Truncate lines={3} trimWhitespace>
+                  <Truncate maxLine={3}>
                     {program.title}
                   </Truncate>
                 )}
                 subtitle={program.authoringOrganizations?.length > 0 && (
-                  <Truncate lines={2} trimWhitespace>
+                  <Truncate maxLine={2}>
                     {program.authoringOrganizations.map(org => org.key).join(', ')}
                   </Truncate>
                 )}