refactor: replace @edx/paragon and @edx/frontend-build

.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

@@ -37,7 +37,7 @@
     "@edx/frontend-component-footer": "12.5.1",
     "@edx/frontend-component-header": "4.9.1",
     "@edx/frontend-platform": "4.6.3",
-    "@edx/paragon": "20.46.3",
+    "@openedx/paragon": "^21.11.3",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "13.0.5",
+    "@openedx/frontend-build": "13.0.19",
     "@edx/reactifex": "1.1.0",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",

src/components/FilterBar.jsx

@@ -2,14 +2,14 @@
 import React, { 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';
 // 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,14 +1,14 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { Institution, School } from '@openedx/paragon/icons';
 import classNames from 'classnames';
 import { generatePath } from 'react-router';
 import { 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 { Institution, School } from '@edx/paragon/icons';
 
 import { Routes } from '../../data/constants';
 import { useShowLearnersTab } from '../data/hooks';

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,12 +1,12 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
+import {
+  Button, Icon, IconButton, OverlayTrigger, Tooltip,
+} from '@openedx/paragon';
 import classNames from 'classnames';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Button, Icon, IconButton, OverlayTrigger, Tooltip,
-} from '@edx/paragon';
 
 import {
   StarFilled, StarOutline, ThumbUpFilled, ThumbUpOutline,

src/discussions/data/hooks.js

@@ -3,13 +3,13 @@ import {
   useContext, useEffect, useMemo, useRef, useState,
 } from 'react';
 
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation, useRouteMatch } from 'react-router';
 
 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 { RequestStatus, Routes } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';

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 {
   Redirect, Route, Switch, useLocation,
 } from 'react-router';
 
-import { useWindowSize } from '@edx/paragon';
-
 import Spinner from '../../components/Spinner';
 import { RequestStatus, 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/components/BackButton.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { Icon, IconButton, Spinner } from '@openedx/paragon';
+import { ArrowBack } from '@openedx/paragon/icons';
 import { useHistory } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButton, Spinner } from '@edx/paragon';
-import { ArrowBack } from '@edx/paragon/icons';
 
 import messages from '../messages';
 

src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useContext, useEffect } from 'react';
 
+import { Icon, SearchField } from '@openedx/paragon';
+import { Search as SearchIcon } from '@openedx/paragon/icons';
 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 '../../common/context';
 import postsMessages from '../../posts/post-actions-bar/messages';

src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { SearchField } from '@openedx/paragon';
 import { useDispatch } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { SearchField } from '@edx/paragon';
 
 import { setFilter } from '../data';
 import messages from '../messages';