chore(deps): update paragon and frontend-build to openedx scope

.eslintrc.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig(
   'eslint',

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   // setupFilesAfterEnv is used after the jest environment has been loaded.  In general this is what you want.

package.json

@@ -34,11 +34,11 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "12.6.1",
-    "@edx/frontend-component-header": "4.10.1",
-    "@edx/frontend-platform": "5.6.1",
+    "@edx/frontend-component-footer": "^13.0.2",
+    "@edx/frontend-component-header": "^5.0.2",
+    "@edx/frontend-platform": "^7.1.0",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/paragon": "20.46.3",
+    "@openedx/paragon": "^22.1.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -62,11 +62,12 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.14",
+    "@openedx/frontend-build": "^13.0.28",
     "@edx/reactifex": "1.1.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
+    "axios": "^0.28.0",
     "axios-mock-adapter": "1.22.0",
     "babel-plugin-react-intl": "8.2.25",
     "eslint-plugin-simple-import-sort": "7.0.0",

src/components/FilterBar.jsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Collapsible, Form, Icon, Spinner,
+} from '@openedx/paragon';
+import { Tune } from '@openedx/paragon/icons';
 import { capitalize, toString } from 'lodash';
 import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Collapsible, Form, Icon, Spinner,
-} from '@edx/paragon';
-import { Tune } from '@edx/paragon/icons';
 
 import {
   PostsStatusFilter, RequestStatus,

src/components/FormikErrorFeedback.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Form, TransitionReplace } from '@openedx/paragon';
 import { getIn, useFormikContext } from 'formik';
 
-import { Form, TransitionReplace } from '@edx/paragon';
-
 const FormikErrorFeedback = ({ name }) => {
   const { touched, errors } = useFormikContext();
   const fieldTouched = getIn(touched, name);

src/components/NavigationBar/navBar.scss

@@ -1,6 +1,6 @@
 @import "~@edx/brand/paragon/fonts.scss";
 @import "~@edx/brand/paragon/variables.scss";
-@import "~@edx/paragon/scss/core/core.scss";
+@import "~@openedx/paragon/scss/core/core.scss";
 @import "~@edx/brand/paragon/overrides.scss";
 
 $fa-font-path: "~font-awesome/fonts";

src/components/NavigationBar/tabs/Tabs.jsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Dropdown } from '@openedx/paragon';
 import classNames from 'classnames';
 
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Dropdown } from '@edx/paragon';
 
 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
 

src/components/NavigationBar/tabs/useIndexOfLastVisibleChild.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 
-import { useWindowSize } from '@edx/paragon';
+import { useWindowSize } from '@openedx/paragon';
 
 const invisibleStyle = {
   position: 'absolute',

src/components/PostPreviewPanel.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
+import { Button, Icon, IconButton } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon, IconButton } from '@edx/paragon';
-import { Close } from '@edx/paragon/icons';
 
 import messages from '../discussions/posts/post-editor/messages';
 import HTMLLoader from './HTMLLoader';

src/components/Search.jsx

@@ -2,12 +2,12 @@ import React, {
   useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 
+import { Icon, SearchField } from '@openedx/paragon';
+import { Search as SearchIcon } from '@openedx/paragon/icons';
 import camelCase from 'lodash/camelCase';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, SearchField } from '@edx/paragon';
-import { Search as SearchIcon } from '@edx/paragon/icons';
 
 import DiscussionContext from '../discussions/common/context';
 import { setUsernameSearch } from '../discussions/learners/data';

src/components/SearchInfo.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Button, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
 
 import { RequestStatus } from '../data/constants';
 import messages from '../discussions/posts/post-actions-bar/messages';

src/components/Spinner.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Spinner as ParagonSpinner } from '@edx/paragon';
+import { Spinner as ParagonSpinner } from '@openedx/paragon';
 
 const Spinner = () => (
   <div className="spinner-container" data-testid="spinner">

src/components/TinyMCEEditor.jsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
+import { ActionRow, AlertModal, Button } from '@openedx/paragon';
 import { Editor } from '@tinymce/tinymce-react';
 import { useLocation, useParams } from 'react-router-dom';
 // TinyMCE so the global var exists
 // eslint-disable-next-line no-unused-vars,import/no-extraneous-dependencies
 import tinymce from 'tinymce/tinymce';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, AlertModal, Button } from '@edx/paragon';
 
 import { MAX_UPLOAD_FILE_SIZE } from '../data/constants';
 import messages from '../discussions/messages';

src/components/TopicStats.jsx

@@ -2,11 +2,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { HelpOutline, PostOutline, Report } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
-import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
 import {
   selectUserHasModerationPrivileges,

src/discussions/common/ActionsDropdown.jsx

@@ -3,14 +3,14 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
-import {
-  Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
-} from '@edx/paragon';
-import { MoreHoriz } from '@edx/paragon/icons';
 
 import { ContentActions } from '../../data/constants';
 import { selectIsPostingEnabled } from '../data/selectors';

src/discussions/common/AlertBanner.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert } from '@openedx/paragon';
+import { Report } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
-import { Report } from '@edx/paragon/icons';
 
 import { AvatarOutlineAndLabelColors } from '../../data/constants';
 import {

src/discussions/common/AlertBar.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert } from '@openedx/paragon';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
 
 import messages from '../post-comments/messages';
 import AuthorLabel from './AuthorLabel';

src/discussions/common/AuthorLabel.jsx

@@ -1,12 +1,12 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
 import classNames from 'classnames';
 import { generatePath, Link } from 'react-router-dom';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 
 import { Routes } from '../../data/constants';
 import messages from '../messages';

src/discussions/common/Confirmation.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 import messages from '../messages';
 

src/discussions/common/EndorsedAlertBanner.jsx

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import { Alert, Icon } from '@openedx/paragon';
+import { CheckCircle, Verified } from '@openedx/paragon/icons';
 import * as timeago from 'timeago.js';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert, Icon } from '@edx/paragon';
-import { CheckCircle, Verified } from '@edx/paragon/icons';
 
 import { ThreadType } from '../../data/constants';
 import messages from '../post-comments/messages';

src/discussions/common/HoverCard.jsx

@@ -1,15 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import classNames from 'classnames';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Button, Icon, IconButton, OverlayTrigger, Tooltip,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import {
   StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,
-} from '@edx/paragon/icons';
+} from '@openedx/paragon/icons';
+import classNames from 'classnames';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { ThreadType } from '../../data/constants';
 import { useUserPostingEnabled } from '../data/hooks';

src/discussions/content-unavailable/ContentUnavailable.jsx

@@ -1,12 +1,12 @@
 import React, { useCallback } from 'react';
 import propTypes from 'prop-types';
 
+import { Button } from '@openedx/paragon';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
 
 import ContentUnavailableIcon from '../../assets/ContentUnavailable';
 import selectCourseTabs from '../../components/NavigationBar/data/selectors';

src/discussions/data/hooks.js

@@ -3,6 +3,7 @@ import {
   useContext, useEffect, useMemo, useRef, useState,
 } from 'react';
 
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   matchPath, useLocation, useMatch, useNavigate,
@@ -11,7 +12,6 @@ import {
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-import { breakpoints, useWindowSize } from '@edx/paragon';
 
 import fetchTab from '../../components/NavigationBar/data/thunks';
 import { RequestStatus, Routes } from '../../data/constants';

src/discussions/discussions-home/DiscussionSidebar.jsx

@@ -3,14 +3,13 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
+import { useWindowSize } from '@openedx/paragon';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import {
   Navigate, Route, Routes,
 } from 'react-router-dom';
 
-import { useWindowSize } from '@edx/paragon';
-
 import Spinner from '../../components/Spinner';
 import { RequestStatus, Routes as ROUTES } from '../../data/constants';
 import DiscussionContext from '../common/context';

src/discussions/discussions-home/DiscussionsRestrictionBanner.jsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useState } from 'react';
 
+import { PageBanner } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { PageBanner } from '@edx/paragon';
 
 import { RequestStatus } from '../../data/constants';
 import { selectConfigLoadingStatus, selectIsPostingEnabled } from '../data/selectors';

src/discussions/empty-posts/EmptyPage.jsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import propTypes from 'prop-types';
 
+import { Button } from '@openedx/paragon';
 import classNames from 'classnames';
 
-import { Button } from '@edx/paragon';
-
 import EmptyIcon from '../../assets/Empty';
 
 const EmptyPage = ({

src/discussions/in-context-topics/TopicPostsView.jsx

@@ -2,11 +2,11 @@ import React, {
   useCallback, useContext, useEffect, useMemo,
 } from 'react';
 
+import { Spinner } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Spinner } from '@edx/paragon';
 
 import { RequestStatus, Routes } from '../../data/constants';
 import DiscussionContext from '../common/context';

src/discussions/in-context-topics/TopicsView.jsx

@@ -2,12 +2,11 @@ import React, {
   useCallback, useContext, useEffect, useMemo,
 } from 'react';
 
+import { Spinner } from '@openedx/paragon';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Spinner } from '@edx/paragon';
-
 import SearchInfo from '../../components/SearchInfo';
 import { RequestStatus } from '../../data/constants';
 import DiscussionContext from '../common/context';

src/discussions/in-context-topics/TopicsView.test.jsx

@@ -151,12 +151,14 @@ describe('InContext Topics View', () => {
     const sectionGroups = await screen.getAllByTestId('section-group');
 
     coursewareTopics.forEach(async (topic, index) => {
-      const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
-      const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
+      await waitFor(async () => {
+        const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
+        const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
 
-      expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
-      expect(stats).toHaveLength(0);
-      expect(subsectionGroups).toHaveLength(2);
+        expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
+        expect(stats).toHaveLength(0);
+        expect(subsectionGroups).toHaveLength(2);
+      });
     });
   });