build: run using macos env

.eslintrc.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { getBaseConfig } = require('@edx/frontend-build');
+const { getBaseConfig } = require('@openedx/frontend-build');
 
 const config = getBaseConfig('eslint');
 

.github/workflows/ci.yml

@@ -10,16 +10,16 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
+    runs-on: macos-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ env.NODE_VER }}
 

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFiles: ['<rootDir>/src/setupTest.js'],

package.json

@@ -15,7 +15,7 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "start": "fedx-scripts webpack-dev-server --progress",
     "debug-test": "node --inspect-brk node_modules/.bin/jest --coverage --runInBand",
-    "test": "TZ=UTC fedx-scripts jest --coverage --runInBand",
+    "test": "TZ=UTC fedx-scripts jest --coverage --maxWorkers=2",
     "test:watch": "npm run test -- --watch",
     "snapshot": "fedx-scripts jest --updateSnapshot"
   },
@@ -30,15 +30,15 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-enterprise-utils": "4.0.0",
-    "@edx/frontend-platform": "^5.6.1",
+    "@edx/frontend-enterprise-utils": "9.1.0",
+    "@edx/frontend-platform": "8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "20.46.0",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
     "@fortawesome/free-solid-svg-icons": "5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@openedx/paragon": "21.13.1",
     "babel-polyfill": "6.26.0",
     "classnames": "2.2.6",
     "dayjs": "^1.11.9",
@@ -61,18 +61,19 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-build": "13.0.1",
     "@edx/reactifex": "^1.0.3",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@openedx/frontend-build": "14.0.3",
+    "@testing-library/dom": "^9.3.4",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "12.1.4",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react-table": "^7.7.2",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "axios-mock-adapter": "^1.19.0",
     "enzyme": "3.11.0",
     "glob": "7.1.6",
-    "jest": "26.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react-test-renderer": "^17.0.2",
     "reactifex": "1.1.1",
     "request": "^2.88.2"

src/Configuration/ConfigurationPage.jsx

@@ -2,7 +2,7 @@ import {
   Container,
   Hyperlink,
   Stack,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import ROUTES from '../data/constants/routes';
 import { titleCase } from '../utils';

src/Configuration/Provisioning/DashboardDataTable/DashboardDataTable.jsx

@@ -1,4 +1,4 @@
-import { DataTable, TextFilter } from '@edx/paragon';
+import { DataTable, TextFilter } from '@openedx/paragon';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
 import debounce from 'lodash.debounce';

src/Configuration/Provisioning/DashboardDataTable/DashboardTableBadges.jsx

@@ -1,6 +1,6 @@
 import {
   Badge,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 const DashboardTableBadges = ({ row }) => {

src/Configuration/Provisioning/DashboardDataTable/DashboardTableLinks.jsx

@@ -1,6 +1,6 @@
-import { Hyperlink, Icon, IconButton } from '@edx/paragon';
+import { Hyperlink, Icon, IconButton } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
-import { DjangoShort } from '@edx/paragon/icons';
+import { DjangoShort } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
 import ROUTES from '../../../data/constants/routes';
 import { DJANGO_ADMIN_RETRIEVE_SUBSIDY_PATH } from '../data/constants';

src/Configuration/Provisioning/DashboardHeader.jsx

@@ -1,8 +1,8 @@
 import {
   Button,
   ActionRow,
-} from '@edx/paragon';
-import { Add } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
 import { useNavigate } from 'react-router-dom';
 import PROVISIONING_PAGE_TEXT from './data/constants';
 import ROUTES from '../../data/constants/routes';

src/Configuration/Provisioning/DashboardToast.jsx

@@ -1,4 +1,4 @@
-import { Toast } from '@edx/paragon';
+import { Toast } from '@openedx/paragon';
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 

src/Configuration/Provisioning/ErrorPage/ErrorPageButton.jsx

@@ -1,4 +1,4 @@
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 const ErrorPageButton = ({

src/Configuration/Provisioning/ErrorPage/ErrorPageContainer.jsx

@@ -1,4 +1,4 @@
-import { Container } from '@edx/paragon';
+import { Container } from '@openedx/paragon';
 import { useEffect, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';

src/Configuration/Provisioning/ErrorPage/ErrorPageImage.jsx

@@ -1,4 +1,4 @@
-import { Image } from '@edx/paragon';
+import { Image } from '@openedx/paragon';
 import PropTypes from 'prop-types';
 
 const ErrorPageImage = ({ image, imageAltText }) => (

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/ProvisioningFormCustomCatalogDropdown.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { Button, Form } from '@edx/paragon';
+import { Button, Form } from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import { logError } from '@edx/frontend-platform/logging';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/ProvisioningFormDefineCustomCatalogHeader.jsx

@@ -5,9 +5,9 @@ import {
   Stack,
   Icon,
   Col,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
-import { Warning } from '@edx/paragon/icons';
+import { Warning } from '@openedx/paragon/icons';
 import PROVISIONING_PAGE_TEXT, { DJANGO_ADMIN_ADD_CATALOG_PATH } from '../../data/constants';
 import { indexOnlyPropType, selectProvisioningContext } from '../../data/utils';
 

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/tests/ProvisioningFormCustomCatalog.test.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
-import { screen } from '@testing-library/react';
+import { screen, act } from '@testing-library/react';
 import ProvisioningFormCustomCatalog from '../ProvisioningFormCustomCatalog';
 import { singlePolicy } from '../../../../testData';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
@@ -38,7 +38,7 @@ describe('ProvisioningFormCustomCatalog', () => {
     expect(screen.getByText(CUSTOM_CATALOG.HEADER.TITLE)).toBeTruthy();
     expect(screen.getByText(CUSTOM_CATALOG.HEADER.WARN_SUB_TITLE)).toBeTruthy();
   });
-  it('renders dropdown if customerCatalog is false', () => {
+  it('renders dropdown if customerCatalog is false', async () => {
     const customCatalogPolicies = singlePolicy
       .map(policy => ({ ...policy, customerCatalog: false }));
     const customInitialStateValue = {
@@ -55,10 +55,12 @@ describe('ProvisioningFormCustomCatalog', () => {
     renderWithRouter(<ProvisioningFormCustomCatalogWrapper
       value={customInitialStateValue}
     />);
-    const autoSuggestInput = screen.getByRole('list');
-    expect(autoSuggestInput.readOnly).toBeFalsy();
+    act(async () => {
+      const autoSuggestInput = await screen.findByRole('list');
+      expect(autoSuggestInput.readOnly).toBeFalsy();
+    });
   });
-  it('renders null if customerCatalog is undefined', () => {
+  it('renders null if customerCatalog is undefined', async () => {
     const customCatalogPolicies = singlePolicy
       .map(policy => ({ ...policy, customerCatalog: undefined }));
     const customInitialStateValue = {
@@ -76,7 +78,9 @@ describe('ProvisioningFormCustomCatalog', () => {
     renderWithRouter(<ProvisioningFormCustomCatalogWrapper
       value={customInitialStateValue}
     />);
-    const autoSuggestInput = screen.getByRole('list');
-    expect(autoSuggestInput.readOnly).toBeTruthy();
+    act(async () => {
+      const autoSuggestInput = await screen.findByRole('list');
+      expect(autoSuggestInput.readOnly).toBeTruthy();
+    });
   });
 });

src/Configuration/Provisioning/ProvisioningForm/CustomCatalog/tests/ProvisioningFormCustomCatalogDropdown.test.jsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/prop-types */
 import { renderWithRouter } from '@edx/frontend-enterprise-utils';
-import { fireEvent, screen, waitFor } from '@testing-library/react';
+import {
+  fireEvent, screen, waitFor, act,
+} from '@testing-library/react';
 import ProvisioningFormCustomCatalogDropdown from '../ProvisioningFormCustomCatalogDropdown';
 import { initialStateValue, ProvisioningContext } from '../../../../testData/Provisioning';
 import PROVISIONING_PAGE_TEXT from '../../../data/constants';
@@ -111,7 +113,7 @@ describe('ProvisioningFormCustomCatalogDropdown', () => {
     fireEvent.click(autoSuggestButton);
     expect(screen.getByText('No catalogs found for customer.')).toBeTruthy();
   });
-  it('renders default catalog query title when isEditMode is true', () => {
+  it('renders default catalog query title when isEditMode is true', async () => {
     LmsApiService.fetchEnterpriseCustomerCatalogs.mockResolvedValue({ data: { results: sampleCatalogs } });
     renderWithRouter(
       <ProvisioningFormCustomCatalogDropdownWrapper
@@ -134,11 +136,13 @@ describe('ProvisioningFormCustomCatalogDropdown', () => {
         }}
       />,
     );
-    expect(screen.getByRole('list', {
-      name: 'Enterprise Catalog',
-    }).value).toBe('Snoopy gang --- 4ev3r');
+    act(async () => {
+      expect(await screen.findByRole('list', {
+        name: 'Enterprise Catalog',
+      }).value).toBe('Snoopy gang --- 4ev3r');
+    });
   });
-  it('renders empty string title when isEditMode is false', () => {
+  it('renders empty string title when isEditMode is false', async () => {
     renderWithRouter(
       <ProvisioningFormCustomCatalogDropdownWrapper
         value={{
@@ -158,8 +162,10 @@ describe('ProvisioningFormCustomCatalogDropdown', () => {
         }}
       />,
     );
-    expect(screen.getByRole('list', {
-      name: 'Enterprise Catalog',
-    }).value).toBe('');
+    act(async () => {
+      expect(await screen.findByRole('list', {
+        name: 'Enterprise Catalog',
+      }).value).toBe('');
+    });
   });
 });

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormAccountDetails.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import useProvisioningContext from '../../data/hooks';
 import {

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormCatalog.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form } from '@edx/paragon';
+import { Form } from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import { useContextSelector } from 'use-context-selector';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormDescription.jsx

@@ -1,6 +1,6 @@
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useState } from 'react';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import { indexOnlyPropType, selectProvisioningContext } from '../../data/utils';

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPerLearnerCap.jsx

@@ -1,6 +1,6 @@
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import React, { useState } from 'react';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPerLearnerCapAmount.jsx

@@ -1,6 +1,6 @@
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useState } from 'react';
 import PROVISIONING_PAGE_TEXT from '../../data/constants';
 import useProvisioningContext from '../../data/hooks';

src/Configuration/Provisioning/ProvisioningForm/PolicyForm/ProvisioningFormPolicyType.jsx

@@ -1,6 +1,6 @@
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import { useContextSelector } from 'use-context-selector';
 import React, { useState } from 'react';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormAccountType.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ActionRow, Form, Spinner } from '@edx/paragon';
+import { ActionRow, Form, Spinner } from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import { logError } from '@edx/frontend-platform/logging';
 import PROVISIONING_PAGE_TEXT from '../data/constants';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormAlert.jsx

@@ -1,5 +1,5 @@
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 
 const ProvisioningFormAlert = () => {

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormContainer.jsx

@@ -1,7 +1,7 @@
 import { useLocation } from 'react-router-dom';
 import {
   Container,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import ProvisioningForm from './ProvisioningForm';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 import ProvisioningContextProvider from '../ProvisioningContext';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormCustomer.jsx

@@ -1,6 +1,6 @@
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { useCallback, useState } from 'react';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 import useProvisioningContext from '../data/hooks';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormCustomerDropdown.jsx

@@ -1,6 +1,6 @@
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   useEffect, useMemo, useState,
 } from 'react';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormHelpText.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import {
   Icon, Form,
-} from '@edx/paragon';
-import { WarningFilled } from '@edx/paragon/icons';
+} from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 
 const ProvisioningFormHelpText = ({ className }) => {

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormInstructionAlert.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
-import { Alert, useToggle } from '@edx/paragon';
-import { Edit } from '@edx/paragon/icons';
+import { Alert, useToggle } from '@openedx/paragon';
+import { Edit } from '@openedx/paragon/icons';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 
 const ProvisioningFormInstructionAlert = ({ formMode }) => {

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormInternalOnly.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 import useProvisioningContext from '../data/hooks';
 import { selectProvisioningContext } from '../data/utils';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormSubmissionButton.jsx

@@ -1,4 +1,4 @@
-import { ActionRow, Button, StatefulButton } from '@edx/paragon';
+import { ActionRow, Button, StatefulButton } from '@openedx/paragon';
 import { useEffect, useMemo, useState } from 'react';
 import { logError } from '@edx/frontend-platform/logging';
 import { useNavigate } from 'react-router-dom';

src/Configuration/Provisioning/ProvisioningForm/ProvisioningFormSubsidy.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   Form,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import { v4 as uuidv4 } from 'uuid';
 import PROVISIONING_PAGE_TEXT from '../data/constants';
 import useProvisioningContext from '../data/hooks';