test: added test case for navigation bar api

.github/workflows/ci.yml

@@ -9,17 +9,18 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master

.nvmrc

@@ -1 +1 @@
-18
+16

package.json

@@ -34,9 +34,9 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "12.0.0",
-    "@edx/frontend-component-header": "4.0.3",
-    "@edx/frontend-platform": "4.4.0",
+    "@edx/frontend-component-footer": "11.2.0",
+    "@edx/frontend-component-header": "3.2.0",
+    "@edx/frontend-platform": "2.6.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": "12.8.27",
+    "@edx/frontend-build": "11.0.1",
     "@edx/reactifex": "1.0.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.4",

src/components/HTMLLoader.jsx

@@ -24,7 +24,7 @@ function HTMLLoader({
 
     function typeset(code) {
       promise = promise.then(() => {
-        if (typeof window?.MathJax !== 'undefined' && typeof window?.MathJax.startup !== 'undefined') {
+        if (typeof window?.MathJax !== 'undefined') {
           window.MathJax.startup.defaultPageReady().then((window.MathJax?.typesetPromise(code())));
         }
         return null;

src/discussions/common/ActionsDropdown.jsx

@@ -75,7 +75,7 @@ function ActionsDropdown({
           placement="bottom-end"
         >
           <div
-            className="bg-white shadow d-flex flex-column"
+            className="bg-white p-1 shadow d-flex flex-column"
             data-testid="actions-dropdown-modal-popup"
           >
             {actions.map(action => (
@@ -91,15 +91,9 @@ function ActionsDropdown({
                     close();
                     handleActions(action.action);
                   }}
-                  className="d-flex justify-content-start actions-dropdown-item"
+                  className="d-flex justify-content-start py-1.5 mr-4"
                 >
-                  <Icon
-                    src={action.icon}
-                    className="icon-size-24"
-                  />
-                  <span className="font-weight-normal font-xl ml-2">
-                    {intl.formatMessage(action.label)}
-                  </span>
+                  <Icon src={action.icon} className="mr-1" /> {intl.formatMessage(action.label)}
                 </Dropdown.Item>
               </React.Fragment>
             ))}

src/discussions/empty-posts/EmptyPosts.jsx

@@ -8,7 +8,6 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useIsOnDesktop } from '../data/hooks';
 import { selectAreThreadsFiltered, selectPostThreadCount } from '../data/selectors';
 import messages from '../messages';
-// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 

src/discussions/empty-posts/EmptyTopics.jsx

@@ -9,7 +9,6 @@ import { ALL_ROUTES } from '../../data/constants';
 import { useIsOnDesktop, useTotalTopicThreadCount } from '../data/hooks';
 import { selectTopicThreadCount } from '../data/selectors';
 import messages from '../messages';
-// eslint-disable-next-line import/no-cycle
 import { messages as postMessages, showPostEditor } from '../posts';
 import EmptyPage from './EmptyPage';
 

src/discussions/empty-posts/index.js

@@ -1,5 +1,4 @@
 export { default as EmptyLearners } from './EmptyLearners';
 export { default as EmptyPage } from './EmptyPage';
-// eslint-disable-next-line import/no-cycle
 export { default as EmptyPosts } from './EmptyPosts';
 export { default as EmptyTopics } from './EmptyTopics';

src/discussions/learners/data/selectors.js

@@ -14,3 +14,7 @@ export const selectUsernameSearch = () => state => state.learners.usernameSearch
 export const selectLearnerSorting = () => state => state.learners.sortedBy;
 
 export const selectLearnerNextPage = () => state => state.learners.nextPage;
+
+export const selectLearnerAvatar = author => state => (
+  state.learners.learnerProfiles[author]?.profileImage?.imageUrlLarge
+);

src/discussions/learners/learner/LearnerAvatar.jsx

@@ -1,15 +1,20 @@
 import React from 'react';
 
+import { useSelector } from 'react-redux';
+
 import { Avatar } from '@edx/paragon';
 
+import { selectLearnerAvatar } from '../data/selectors';
 import { learnerShape } from './proptypes';
 
 function LearnerAvatar({ learner }) {
+  const learnerAvatar = useSelector(selectLearnerAvatar(learner.username));
   return (
     <div className="mr-3 mt-1">
       <Avatar
         size="sm"
         alt={learner.username}
+        src={learnerAvatar}
         style={{
           height: '2rem',
           width: '2rem',

src/discussions/post-comments/comments/comment/CommentHeader.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 
 import { injectIntl } from '@edx/frontend-platform/i18n';
 import { Avatar } from '@edx/paragon';
@@ -8,11 +9,13 @@ import { Avatar } from '@edx/paragon';
 import { AvatarOutlineAndLabelColors } from '../../../../data/constants';
 import { AuthorLabel } from '../../../common';
 import { useAlertBannerVisible } from '../../../data/hooks';
+import { selectAuthorAvatars } from '../../../posts/data/selectors';
 import { commentShape } from './proptypes';
 
 function CommentHeader({
   comment,
 }) {
+  const authorAvatars = useSelector(selectAuthorAvatars(comment.author));
   const colorClass = AvatarOutlineAndLabelColors[comment.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(comment);
 
@@ -25,6 +28,7 @@ function CommentHeader({
         <Avatar
           className={`border-0 ml-0.5 mr-2.5 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
           alt={comment.author}
+          src={authorAvatars?.imageUrlSmall}
           style={{
             width: '32px',
             height: '32px',

src/discussions/post-comments/comments/comment/Reply.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import * as timeago from 'timeago.js';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -14,6 +14,7 @@ import {
 } from '../../../common';
 import timeLocale from '../../../common/time-locale';
 import { useAlertBannerVisible } from '../../../data/hooks';
+import { selectAuthorAvatars } from '../../../posts/data/selectors';
 import { editComment, removeComment } from '../../data/thunks';
 import messages from '../../messages';
 import CommentEditor from './CommentEditor';
@@ -59,6 +60,7 @@ function Reply({
     [ContentActions.REPORT]: () => handleAbusedFlag(),
   }), [dispatch, handleAbusedFlag, reply.endorsed, reply.id, showDeleteConfirmation]);
 
+  const authorAvatars = useSelector(selectAuthorAvatars(reply.author));
   const colorClass = AvatarOutlineAndLabelColors[reply.authorLabel];
   const hasAnyAlert = useAlertBannerVisible(reply);
 
@@ -99,6 +101,7 @@ function Reply({
           <Avatar
             className={`ml-0.5 mt-0.5 border-0 ${colorClass ? `outline-${colorClass}` : 'outline-anonymous'}`}
             alt={reply.author}
+            src={authorAvatars?.imageUrlSmall}
             style={{
               width: '32px',
               height: '32px',

src/discussions/posts/data/selectors.js

@@ -44,3 +44,7 @@ export const selectThreadSorting = () => state => state.threads.sortedBy;
 export const selectThreadFilters = () => state => state.threads.filters;
 
 export const selectThreadNextPage = () => state => state.threads.nextPage;
+
+export const selectAuthorAvatars = author => state => (
+  state.threads.avatars?.[author]?.profile.image
+);

src/discussions/posts/index.js

@@ -2,6 +2,5 @@
 export { showPostEditor } from './data';
 export { default as Post } from './post/Post';
 export { default as messages } from './post-actions-bar/messages';
-// eslint-disable-next-line import/no-cycle
 export { default as PostEditor } from './post-editor/PostEditor';
 export { default as PostsView } from './PostsView';

src/discussions/posts/post-editor/PostEditor.jsx

@@ -34,7 +34,6 @@ import {
   selectUserIsGroupTa,
   selectUserIsStaff,
 } from '../../data/selectors';
-// eslint-disable-next-line import/no-cycle
 import { EmptyPage } from '../../empty-posts';
 import {
   selectArchivedTopics,

src/discussions/posts/post/PostHeader.jsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
+import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Avatar, Badge, Icon } from '@edx/paragon';
@@ -10,12 +11,14 @@ import { Issue, Question } from '../../../components/icons';
 import { AvatarOutlineAndLabelColors, ThreadType } from '../../../data/constants';
 import { AuthorLabel } from '../../common';
 import { useAlertBannerVisible } from '../../data/hooks';
+import { selectAuthorAvatars } from '../data/selectors';
 import messages from './messages';
 import { postShape } from './proptypes';
 
 export function PostAvatar({
   post, authorLabel, fromPostLink, read,
 }) {
+  const authorAvatars = useSelector(selectAuthorAvatars(post.author));
   const outlineColor = AvatarOutlineAndLabelColors[authorLabel];
 
   const avatarSize = useMemo(() => {
@@ -60,6 +63,7 @@ export function PostAvatar({
           width: avatarSize,
         }}
         alt={post.author}
+        src={authorAvatars?.imageUrlSmall}
       />
     </div>
   );

src/index.scss

@@ -502,19 +502,3 @@ header {
     padding-left: 1rem;
   }
 }
-
-.icon-size-24 {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.actions-dropdown-item {
-  padding: 12px 16px;
-  height: 48px;
-  width: 304px;
-}
-
-.font-xl {
-  font-size: 18px;
-  line-height: 28px;
-}