build: edx namespace packages upgrade & resolved respective eslint issue

.eslintrc.js

@@ -1,9 +1,10 @@
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint',
-{
-  "plugins": ["simple-import-sort"],
-    "rules": {
+module.exports = createConfig(
+  'eslint',
+  {
+    plugins: ['simple-import-sort'],
+    rules: {
       'import/no-extraneous-dependencies': 'off',
       'react-hooks/exhaustive-deps': 'off',
       'jsx-a11y/no-noninteractive-element-interactions': 'off',
@@ -25,7 +26,6 @@ module.exports = createConfig('eslint',
         },
       ],
       'simple-import-sort/exports': 'error',
-    }
-  }
+    },
+  },
 );
-

package.json

@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "11.2.0",
-    "@edx/frontend-component-header": "3.2.0",
-    "@edx/frontend-platform": "2.6.1",
+    "@edx/frontend-component-footer": "11.6.3",
+    "@edx/frontend-component-header": "3.6.4",
+    "@edx/frontend-platform": "3.4.1",
     "@edx/paragon": "20.15.0",
     "@reduxjs/toolkit": "1.8.0",
     "@tinymce/tinymce-react": "3.13.1",
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.1.0",
-    "@edx/frontend-build": "11.0.1",
+    "@edx/frontend-build": "12.4.15",
     "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.4",

src/components/FilterBar.jsx

@@ -19,19 +19,21 @@ import { selectCourseCohorts } from '../discussions/cohorts/data/selectors';
 import messages from '../discussions/posts/post-filter-bar/messages';
 import { ActionItem } from '../discussions/posts/post-filter-bar/PostFilterBar';
 
-function FilterBar({
+const FilterBar = ({
   intl,
   filters,
   selectedFilters,
   onFilterChange,
   showCohortsFilter,
-}) {
+}) => {
   const [isOpen, setOpen] = useState(false);
   const cohorts = useSelector(selectCourseCohorts);
   const { status } = useSelector(state => state.cohorts);
-  const selectedCohort = useMemo(() => cohorts.find(cohort => (
-    toString(cohort.id) === selectedFilters.cohort)),
-  [selectedFilters.cohort]);
+  const selectedCohort = useMemo(
+    () => cohorts.find(cohort => (
+      toString(cohort.id) === selectedFilters.cohort)),
+    [selectedFilters.cohort],
+  );
 
   const allFilters = [
     {
@@ -183,7 +185,7 @@ function FilterBar({
       </Collapsible.Body>
     </Collapsible.Advanced>
   );
-}
+};
 
 FilterBar.propTypes = {
   intl: intlShape.isRequired,

src/components/NavigationBar/data/api.test.js

@@ -56,8 +56,10 @@ describe('Navigation bar api tests', () => {
   });
 
   it('Denied to get navigation bar when user has no access on course', async () => {
-    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(200,
-      (Factory.build('navigationBar', 1, { hasCourseAccess: false })));
+    axiosMock.onGet(`${getCourseMetadataApiUrl(courseId)}`).reply(
+      200,
+      (Factory.build('navigationBar', 1, { hasCourseAccess: false })),
+    );
     await executeThunk(fetchTab(courseId, 'outline'), store.dispatch, store.getState);
 
     expect(store.getState().courseTabs.courseStatus).toEqual('denied');

src/components/NavigationBar/tabs/Tabs.jsx

@@ -8,7 +8,7 @@ import { Dropdown } from '@edx/paragon';
 
 import useIndexOfLastVisibleChild from './useIndexOfLastVisibleChild';
 
-export default function Tabs({ children, className, ...attrs }) {
+const Tabs = ({ children, className, ...attrs }) => {
   const [
     indexOfLastVisibleChild,
     containerElementRef,
@@ -31,25 +31,28 @@ export default function Tabs({ children, className, ...attrs }) {
 
     // Insert the overflow menu at the cut off index (even if it will be hidden
     // it so it can be part of measurements)
-    wrappedChildren.splice(indexOfOverflowStart, 0, (
-      <div
-        className="nav-item flex-shrink-0"
-        style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
-        ref={overflowElementRef}
-        key="overflow"
-      >
-        <Dropdown className="h-100">
-          <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
-            <FormattedMessage
-              id="learn.course.tabs.navigation.overflow.menu"
-              description="The title of the overflow menu for course tabs"
-              defaultMessage="More..."
-            />
-          </Dropdown.Toggle>
-          <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
-        </Dropdown>
-      </div>
-    ));
+    wrappedChildren.splice(
+      indexOfOverflowStart,
+      0, (
+        <div
+          className="nav-item flex-shrink-0"
+          style={indexOfOverflowStart >= React.Children.count(children) ? invisibleStyle : null}
+          ref={overflowElementRef}
+          key="overflow"
+        >
+          <Dropdown className="h-100">
+            <Dropdown.Toggle variant="link" className="nav-link h-100" id="learn.course.tabs.navigation.overflow.menu">
+              <FormattedMessage
+                id="learn.course.tabs.navigation.overflow.menu"
+                description="The title of the overflow menu for course tabs"
+                defaultMessage="More..."
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu className="dropdown-menu-right">{overflowChildren}</Dropdown.Menu>
+          </Dropdown>
+        </div>
+      ),
+    );
     return wrappedChildren;
   }, [children, indexOfLastVisibleChild]);
 
@@ -62,7 +65,7 @@ export default function Tabs({ children, className, ...attrs }) {
       {tabChildren}
     </nav>
   );
-}
+};
 
 Tabs.propTypes = {
   children: PropTypes.node,
@@ -73,3 +76,5 @@ Tabs.defaultProps = {
   children: null,
   className: undefined,
 };
+
+export default Tabs;

src/components/TinyMCEEditor.jsx

@@ -42,7 +42,7 @@ import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.c
 import contentUiCss from '!!raw-loader!tinymce/skins/ui/oxide/content.min.css';
 
 /* istanbul ignore next */
-function TinyMCEEditor(props) {
+const TinyMCEEditor = (props) => {
   // note that skin and content_css is disabled to avoid the normal
   // loading process and is instead loaded as a string via content_style
 
@@ -152,6 +152,6 @@ function TinyMCEEditor(props) {
       </AlertModal>
     </>
   );
-}
+};
 
 export default React.memo(TinyMCEEditor);

src/components/icons/InsertLink.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function InsertLink() {
   return (
     <svg

src/components/icons/Issue.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function Issue() {
   return (
     <svg

src/components/icons/People.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function People() {
   return (
     <svg

src/components/icons/PushPin.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function PushPin() {
   return (
     <svg

src/components/icons/Question.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function Question() {
   return (
     <svg

src/components/icons/QuestionAnswer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function QuestionAnswer() {
   return (
     <svg

src/components/icons/QuestionAnswerOutline.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function QuestionAnswerOutline() {
   return (
     <svg

src/components/icons/StarFilled.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function StarFilled() {
   return (
     <svg

src/components/icons/StarOutline.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function StarOutline() {
   return (
     <svg

src/components/icons/ThumbUpFilled.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ThumbUpFilled() {
   return (
     <svg

src/components/icons/ThumbUpOutline.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line react/function-component-definition
 export default function ThumbUpOutline() {
   return (
     <svg

src/discussions/common/ActionsDropdown.jsx

@@ -17,14 +17,14 @@ import { selectBlackoutDate } from '../data/selectors';
 import messages from '../messages';
 import { inBlackoutDateRange, useActions } from '../utils';
 
-function ActionsDropdown({
+const ActionsDropdown = ({
   actionHandlers,
   contentType,
   disabled,
   dropDownIconSize,
   iconSize,
   id,
-}) {
+}) => {
   const buttonRef = useRef();
   const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
@@ -109,7 +109,7 @@ function ActionsDropdown({
       </div>
     </>
   );
-}
+};
 
 ActionsDropdown.propTypes = {
   id: PropTypes.string.isRequired,

src/discussions/common/AuthorLabel.test.jsx

@@ -66,19 +66,20 @@ describe('Author label', () => {
     ['retired__user', null, false, ''],
     ['staff_user', 'Staff', true, 'text-staff-color'],
     ['learner_user', null, false, ''],
-  ])('for %s', (
-    author, authorLabel, linkToProfile, labelColor,
-  ) => {
-    it('it has author name text',
+  ])('for %s', (author, authorLabel, linkToProfile, labelColor) => {
+    it(
+      'it has author name text',
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
         const authorElement = container.querySelector('[role=heading]');
         const authorName = author.startsWith('retired__user') ? '[Deactivated]' : author;
 
         expect(authorElement).toHaveTextContent(authorName);
-      });
+      },
+    );
 
-    it(`it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
+    it(
+      `it is "${!linkToProfile && 'not'}" clickable when linkToProfile is ${!!linkToProfile}`,
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
 
@@ -87,9 +88,11 @@ describe('Author label', () => {
         } else {
           expect(screen.queryByTestId('learner-posts-link')).not.toBeInTheDocument();
         }
-      });
+      },
+    );
 
-    it(`it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
+    it(
+      `it has "${!linkToProfile && 'not'}" label text and label color when linkToProfile is ${!!linkToProfile}`,
       async () => {
         renderComponent(author, authorLabel, linkToProfile, labelColor);
         const authorElement = container.querySelector('[role=heading]');
@@ -104,6 +107,7 @@ describe('Author label', () => {
           expect(authorElement.parentNode.lastChild).not.toHaveTextContent(label, { exact: true });
           expect(authorElement.parentNode).not.toHaveClass(labelColor, { exact: true });
         }
-      });
+      },
+    );
   });
 });

src/discussions/common/Confirmation.jsx

@@ -6,7 +6,7 @@ import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 
 import messages from '../messages';
 
-function Confirmation({
+const Confirmation = ({
   isOpen,
   title,
   description,
@@ -15,7 +15,7 @@ function Confirmation({
   closeButtonVaraint,
   confirmButtonVariant,
   confirmButtonText,
-}) {
+}) => {
   const intl = useIntl();
 
   return (
@@ -40,7 +40,7 @@ function Confirmation({
       </ModalDialog.Footer>
     </ModalDialog>
   );
-}
+};
 
 Confirmation.propTypes = {
   isOpen: PropTypes.bool.isRequired,

src/discussions/common/EndorsedAlertBanner.jsx

@@ -13,12 +13,12 @@ import { PostCommentsContext } from '../post-comments/postCommentsContext';
 import AuthorLabel from './AuthorLabel';
 import timeLocale from './time-locale';
 
-function EndorsedAlertBanner({
+const EndorsedAlertBanner = ({
   endorsed,
   endorsedAt,
   endorsedBy,
   endorsedByLabel,
-}) {
+}) => {
   timeago.register('time-locale', timeLocale);
 
   const intl = useIntl();
@@ -62,7 +62,7 @@ function EndorsedAlertBanner({
       </Alert>
     )
   );
-}
+};
 
 EndorsedAlertBanner.propTypes = {
   endorsed: PropTypes.bool.isRequired,