feat: added stats at subsection level in topics tab

* fix: fix filter and sorting effect in discussion sidebar

* test: fix test cases

src/components/TopicStats.jsx

@@ -0,0 +1,108 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
+import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
+
+import {
+  selectUserHasModerationPrivileges,
+  selectUserIsGroupTa,
+} from '../discussions/data/selectors';
+import messages from '../discussions/in-context-topics/messages';
+
+function TopicStats({
+  threadCounts,
+  activeFlags,
+  inactiveFlags,
+  intl,
+}) {
+  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+  const userIsGroupTa = useSelector(selectUserIsGroupTa);
+  const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
+  return (
+    <div className="d-flex align-items-center mt-2.5" style={{ marginBottom: '2px' }}>
+      <OverlayTrigger
+        overlay={(
+          <Tooltip>
+            <div className="d-flex flex-column align-items-start">
+              {intl.formatMessage(messages.discussions, {
+                count: threadCounts?.discussion || 0,
+              })}
+            </div>
+          </Tooltip>
+        )}
+      >
+        <div className="d-flex align-items-center mr-3.5">
+          <Icon src={PostOutline} className="icon-size mr-2" />
+          {threadCounts?.discussion || 0}
+        </div>
+      </OverlayTrigger>
+      <OverlayTrigger
+        overlay={(
+          <Tooltip>
+            <div className="d-flex flex-column align-items-start">
+              {intl.formatMessage(messages.questions, {
+                count: threadCounts?.question || 0,
+              })}
+            </div>
+          </Tooltip>
+        )}
+      >
+        <div className="d-flex align-items-center mr-3.5">
+          <Icon src={HelpOutline} className="icon-size mr-2" />
+          {threadCounts?.question || 0}
+        </div>
+      </OverlayTrigger>
+      {Boolean(canSeeReportedStats) && (
+        <OverlayTrigger
+          overlay={(
+            <Tooltip>
+              <div className="d-flex flex-column align-items-start">
+                {Boolean(activeFlags) && (
+                  <span>
+                    {intl.formatMessage(messages.reported, { reported: activeFlags })}
+                  </span>
+                )}
+                {Boolean(inactiveFlags) && (
+                  <span>
+                    {intl.formatMessage(messages.previouslyReported, { previouslyReported: inactiveFlags })}
+                  </span>
+                )}
+              </div>
+            </Tooltip>
+          )}
+        >
+          <div className="d-flex align-items-center">
+            <Icon src={Report} className="icon-size mr-2 text-danger" />
+            {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
+          </div>
+        </OverlayTrigger>
+      )}
+    </div>
+  );
+}
+
+TopicStats.propTypes = {
+  threadCounts: PropTypes.shape({
+    discussions: PropTypes.number,
+    questions: PropTypes.number,
+  }),
+  activeFlags: PropTypes.number,
+  inactiveFlags: PropTypes.number,
+  intl: intlShape.isRequired,
+};
+
+TopicStats.defaultProps = {
+  threadCounts: {
+    discussions: 0,
+    questions: 0,
+  },
+  activeFlags: null,
+  inactiveFlags: null,
+};
+
+export default injectIntl(TopicStats);

src/components/index.js

@@ -1,3 +1,4 @@
 export { default as PostActionsBar } from '../discussions/posts/post-actions-bar/PostActionsBar';
 export { default as Search } from './Search';
 export { default as TinyMCEEditor } from './TinyMCEEditor';
+export { default as TopicStats } from './TopicStats';

src/data/constants.js

@@ -63,6 +63,7 @@ export const ContentActions = {
  * @enum {string}
  */
 export const RequestStatus = {
+  IDLE: 'idle',
   IN_PROGRESS: 'in-progress',
   SUCCESSFUL: 'successful',
   FAILED: 'failed',

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

@@ -1,6 +1,6 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -8,6 +8,7 @@ import { Spinner } from '@edx/paragon';
 
 import { RequestStatus, Routes } from '../../data/constants';
 import { DiscussionContext } from '../common/context';
+import { selectDiscussionProvider } from '../data/selectors';
 import { selectTopicThreads } from '../posts/data/selectors';
 import PostsList from '../posts/PostsList';
 import { discussionsPath, handleKeyDown } from '../utils';
@@ -15,14 +16,18 @@ import {
   selectArchivedTopic, selectLoadingStatus, selectNonCoursewareTopics,
   selectSubsection, selectSubsectionUnits, selectUnits,
 } from './data/selectors';
+import { fetchCourseTopicsV3 } from './data/thunks';
 import { BackButton, NoResults } from './components';
 import messages from './messages';
 import { Topic } from './topic';
 
 function TopicPostsView({ intl }) {
   const location = useLocation();
+  const dispatch = useDispatch();
   const { courseId, topicId, category } = useContext(DiscussionContext);
-  const topicsLoadingStatus = useSelector(selectLoadingStatus);
+  const provider = useSelector(selectDiscussionProvider);
+  const topicsStatus = useSelector(selectLoadingStatus);
+  const topicsInProgress = topicsStatus === RequestStatus.IN_PROGRESS;
   const posts = useSelector(selectTopicThreads([topicId]));
   const selectedSubsectionUnits = useSelector(selectSubsectionUnits(category));
   const selectedSubsection = useSelector(selectSubsection(category));
@@ -30,6 +35,12 @@ function TopicPostsView({ intl }) {
   const selectedNonCoursewareTopic = useSelector(selectNonCoursewareTopics)?.find(topic => topic.id === topicId);
   const selectedArchivedTopic = useSelector(selectArchivedTopic(topicId));
 
+  useEffect(() => {
+    if (provider && topicsStatus === RequestStatus.IDLE) {
+      dispatch(fetchCourseTopicsV3(courseId));
+    }
+  }, [provider]);
+
   const backButtonPath = () => {
     const path = selectedUnit ? Routes.TOPICS.CATEGORY : Routes.TOPICS.ALL;
     const params = selectedUnit ? { courseId, category: selectedUnit?.parentId } : { courseId };
@@ -40,12 +51,14 @@ function TopicPostsView({ intl }) {
     <div className="discussion-posts d-flex flex-column h-100">
       {topicId ? (
         <BackButton
+          loading={topicsInProgress}
           path={backButtonPath()}
           title={selectedUnit?.name || selectedNonCoursewareTopic?.name || selectedArchivedTopic?.name
             || intl.formatMessage(messages.unnamedTopic)}
         />
       ) : (
         <BackButton
+          loading={topicsInProgress}
           path={discussionsPath(Routes.TOPICS.ALL, { courseId })(location)}
           title={selectedSubsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
         />
@@ -56,6 +69,7 @@ function TopicPostsView({ intl }) {
           <PostsList
             posts={posts}
             topics={[topicId]}
+            parentIsLoading={topicsInProgress}
           />
         ) : (
           selectedSubsectionUnits?.map((unit) => (
@@ -65,10 +79,10 @@ function TopicPostsView({ intl }) {
             />
           ))
         )}
-        {(category && selectedSubsectionUnits.length === 0 && topicsLoadingStatus === RequestStatus.SUCCESSFUL) && (
+        {(category && selectedSubsectionUnits.length === 0 && topicsStatus === RequestStatus.SUCCESSFUL) && (
           <NoResults />
         )}
-        {(category && topicsLoadingStatus === RequestStatus.IN_PROGRESS) && (
+        {(category && topicsInProgress) && (
           <div className="d-flex justify-content-center p-4">
             <Spinner animation="border" variant="primary" size="lg" />
           </div>

src/discussions/in-context-topics/components/BackButton.jsx

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Icon, IconButton } from '@edx/paragon';
+import { Icon, IconButton, Spinner } from '@edx/paragon';
 import { ArrowBack } from '@edx/paragon/icons';
 
 import messages from '../messages';
 
-function BackButton({ intl, path, title }) {
+function BackButton({
+  intl, path, title, loading,
+}) {
   const history = useHistory();
 
   return (
@@ -24,7 +26,7 @@ function BackButton({ intl, path, title }) {
           alt={intl.formatMessage(messages.backAlt)}
         />
         <div className="d-flex flex-fill justify-content-center align-items-center mr-4.5">
-          {title}
+          {loading ? <Spinner animation="border" variant="primary" size="sm" /> : title}
         </div>
       </div>
       <div className="border-bottom border-light-400" />
@@ -36,6 +38,11 @@ BackButton.propTypes = {
   intl: intlShape.isRequired,
   path: PropTypes.shape({}).isRequired,
   title: PropTypes.string.isRequired,
+  loading: PropTypes.bool,
+};
+
+BackButton.defaultProps = {
+  loading: false,
 };
 
 export default injectIntl(BackButton);

src/discussions/in-context-topics/data/slices.js

@@ -6,7 +6,7 @@ import { RequestStatus } from '../../../data/constants';
 const topicsSlice = createSlice({
   name: 'inContextTopics',
   initialState: {
-    status: RequestStatus.IN_PROGRESS,
+    status: RequestStatus.IDLE,
     topics: [],
     coursewareTopics: [],
     nonCoursewareTopics: [],

src/discussions/in-context-topics/topic/SectionBaseGroup.jsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
+import TopicStats from '../../../components/TopicStats';
 import { Routes } from '../../../data/constants';
 import { discussionsPath } from '../../utils';
 import messages from '../messages';
@@ -55,6 +56,7 @@ function SectionBaseGroup({
                 <div className="topic-name text-truncate">
                   {subsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
                 </div>
+                <TopicStats threadCounts={subsection?.threadCounts} />
               </div>
             </div>
           </div>

src/discussions/in-context-topics/topic/Topic.jsx

@@ -11,6 +11,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
 import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
 
+import TopicStats from '../../../components/TopicStats';
 import { Routes } from '../../../data/constants';
 import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
 import { discussionsPath } from '../../utils';
@@ -53,65 +54,11 @@ function Topic({
                 {topic?.name || topic?.displayName || intl.formatMessage(messages.unnamedTopicSubCategories)}
               </div>
             </div>
-            <div className="d-flex align-items-center mt-2.5" style={{ marginBottom: '2px' }}>
+            <TopicStats
-              <OverlayTrigger
+              threadCounts={topic?.threadCounts}
-                overlay={(
+              activeFlags={topic?.activeFlags}
-                  <Tooltip>
+              inactiveFlags={topic?.inactiveFlags}
-                    <div className="d-flex flex-column align-items-start">
+            />
-                      {intl.formatMessage(messages.discussions, {
-                        count: topic.threadCounts?.discussion || 0,
-                      })}
-                    </div>
-                  </Tooltip>
-                  )}
-              >
-                <div className="d-flex align-items-center mr-3.5">
-                  <Icon src={PostOutline} className="icon-size mr-2" />
-                  {topic.threadCounts?.discussion || 0}
-                </div>
-              </OverlayTrigger>
-              <OverlayTrigger
-                overlay={(
-                  <Tooltip>
-                    <div className="d-flex flex-column align-items-start">
-                      {intl.formatMessage(messages.questions, {
-                        count: topic.threadCounts?.question || 0,
-                      })}
-                    </div>
-                  </Tooltip>
-                )}
-              >
-                <div className="d-flex align-items-center mr-3.5">
-                  <Icon src={HelpOutline} className="icon-size mr-2" />
-                  {topic.threadCounts?.question || 0}
-                </div>
-              </OverlayTrigger>
-              {Boolean(canSeeReportedStats) && (
-                <OverlayTrigger
-                  overlay={(
-                    <Tooltip>
-                      <div className="d-flex flex-column align-items-start">
-                        {Boolean(activeFlags) && (
-                        <span>
-                          {intl.formatMessage(messages.reported, { reported: activeFlags })}
-                        </span>
-                        )}
-                        {Boolean(inactiveFlags) && (
-                        <span>
-                          {intl.formatMessage(messages.previouslyReported, { previouslyReported: inactiveFlags })}
-                        </span>
-                        )}
-                      </div>
-                    </Tooltip>
-                    )}
-                >
-                  <div className="d-flex align-items-center">
-                    <Icon src={Report} className="icon-size mr-2 text-danger" />
-                    {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
-                  </div>
-                </OverlayTrigger>
-              )}
-            </div>
           </div>
         </div>
       </Link>

src/discussions/posts/PostsList.jsx

@@ -23,7 +23,7 @@ import NoResults from './NoResults';
 import { PostLink } from './post';
 
 function PostsList({
-  posts, topics, intl, isTopicTab,
+  posts, topics, intl, isTopicTab, parentIsLoading,
 }) {
   const dispatch = useDispatch();
   const {
@@ -85,10 +85,10 @@ function PostsList({
 
   return (
     <>
-      {postInstances(pinnedPosts)}
+      {!parentIsLoading && postInstances(pinnedPosts)}
-      {postInstances(unpinnedPosts)}
+      {!parentIsLoading && postInstances(unpinnedPosts)}
       {posts?.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && <NoResults />}
-      {loadingStatus === RequestStatus.IN_PROGRESS ? (
+      {loadingStatus === RequestStatus.IN_PROGRESS || parentIsLoading ? (
         <div className="d-flex justify-content-center p-4 mx-auto my-auto">
           <Spinner animation="border" variant="primary" size="lg" />
         </div>
@@ -110,6 +110,7 @@ PostsList.propTypes = {
   })),
   topics: PropTypes.arrayOf(PropTypes.string),
   isTopicTab: PropTypes.bool,
+  parentIsLoading: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
@@ -117,6 +118,7 @@ PostsList.defaultProps = {
   posts: [],
   topics: undefined,
   isTopicTab: false,
+  parentIsLoading: undefined,
 };
 
 export default injectIntl(PostsList);

src/discussions/posts/PostsView.jsx

@@ -37,7 +37,7 @@ function CategoryPostsList({ category }) {
   const groupedCategory = useSelector(selectCurrentCategoryGrouping)(category);
   // If grouping at subsection is enabled, only apply it when browsing discussions in context in the learning MFE.
   const topicIds = useSelector(selectTopicsUnderCategory)(enableInContextSidebar ? groupedCategory : category);
-  const posts = useSelector(selectTopicThreads(topicIds));
+  const posts = useSelector(enableInContextSidebar ? selectAllThreads : selectTopicThreads(topicIds));
   return <PostsList posts={posts} topics={topicIds} />;
 }
 

src/discussions/posts/PostsView.test.jsx

@@ -191,7 +191,7 @@ describe('PostsView', () => {
           .toHaveLength(topicThreadCount);
         // When grouping is enabled, topic 1 will be shown, but not otherwise.
         expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-1/i))
-          .toHaveLength(grouping ? topicThreadCount : 0);
+          .toHaveLength(grouping ? topicThreadCount : 2);
       },
     );
   });