feat: Add support for grouping at subsections (#281)

For smaller courses, there is a feature under the new provider
for grouping topics at the subsection level so that when
navigating the course, all topics under a subsection show up in
the sidebar instead of just the current unit.

This implements that functionality by checking if the discussion
is loaded in-context, and if grouping at subsection is enabled,
and if so, displaying the current subsection's topics.

Author: xitij2000

src/data/selectors.js

@@ -2,7 +2,7 @@
 
 import { createSelector } from '@reduxjs/toolkit';
 
-import { selectDiscussionProvider } from '../discussions/data/selectors';
+import { selectDiscussionProvider, selectGroupAtSubsection } from '../discussions/data/selectors';
 import { DiscussionProvider } from './constants';
 
 export const selectTopicContext = (topicId) => (state) => state.blocks.topics[topicId];
@@ -14,6 +14,18 @@ export const selectorForUnitSubsection = createSelector(
   blocks => key => blocks[blocks[key]?.parent],
 );
 
+// If subsection grouping is enabled, and the current selection is a unit, then get the current subsection.
+export const selectCurrentCategoryGrouping = createSelector(
+  selectDiscussionProvider,
+  selectGroupAtSubsection,
+  selectBlocks,
+  (provider, groupAtSubsection, blocks) => blockId => (
+    (provider !== 'openedx' || !groupAtSubsection || blocks[blockId]?.type !== 'vertical')
+      ? blockId
+      : blocks[blockId].parent
+  ),
+);
+
 export const selectChapters = (state) => state.blocks.chapters;
 export const selectTopicsUnderCategory = createSelector(
   selectDiscussionProvider,

src/discussions/data/hooks.js

@@ -11,7 +11,9 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
 import { Routes } from '../../data/constants';
+import { selectTopicsUnderCategory } from '../../data/selectors';
 import { fetchCourseBlocks } from '../../data/thunks';
+import { DiscussionContext } from '../common/context';
 import { clearRedirect } from '../posts/data';
 import { selectTopics } from '../topics/data/selectors';
 import { fetchCourseTopics } from '../topics/data/thunks';
@@ -158,3 +160,24 @@ export const useShowLearnersTab = () => {
   const allowedUsers = isAdmin || IsGroupTA || privileged || (userRoles.includes('Student') && userRoles.length > 1);
   return learnersTabEnabled && allowedUsers;
 };
+
+/**
+ * React hook that gets the current topic ID from the current topic or category.
+ * The topicId in the DiscussionContext only return the direct topicId from the URL.
+ * If the URL has the current block ID it cannot get the topicID from that. This hook
+ * gets the topic ID from the URL if available, or from the current category otherwise.
+ * It only returns an ID if a single ID is available, if navigating a subsection it
+ * returns null.
+ * @returns {null|string} A topic ID if a single one available in the current context.
+ */
+export const useCurrentDiscussionTopic = () => {
+  const { topicId, category } = useContext(DiscussionContext);
+  const topics = useSelector(selectTopicsUnderCategory)(category);
+  if (topicId) {
+    return topicId;
+  }
+  if (topics?.length === 1) {
+    return topics[0];
+  }
+  return null;
+};

src/discussions/data/hooks.test.jsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeStore } from '../../store';
+import { DiscussionContext } from '../common/context';
+import { useCurrentDiscussionTopic } from './hooks';
+
+let store;
+initializeMockApp();
+describe('Hooks', () => {
+  describe('useCurrentDiscussionTopic', () => {
+    function ComponentWithHook() {
+      const topic = useCurrentDiscussionTopic();
+      return (
+        <div>
+          {String(topic)}
+        </div>
+      );
+    }
+
+    function renderComponent({ topicId, category }) {
+      return render(
+        <IntlProvider locale="en">
+          <AppProvider store={store}>
+            <DiscussionContext.Provider
+              value={{
+                topicId,
+                category,
+              }}
+            >
+              <ComponentWithHook />
+            </DiscussionContext.Provider>
+          </AppProvider>
+        </IntlProvider>,
+      );
+    }
+
+    beforeEach(() => {
+      store = initializeStore({
+        blocks: {
+          blocks: {
+            'some-unit-key': { topics: ['some-topic-0'], parent: 'some-sequence-key' },
+            'some-sequence-key': { topics: ['some-topic-0'] },
+            'another-sequence-key': { topics: ['some-topic-1', 'some-topic-2'] },
+            'empty-key': { topics: [] },
+          },
+        },
+        config: { provider: 'openedx' },
+      });
+    });
+
+    test('when topicId is in context', () => {
+      const { queryByText } = renderComponent({ topicId: 'some-topic' });
+      expect(queryByText('some-topic')).toBeInTheDocument();
+    });
+
+    test('when the category is a unit', () => {
+      const { queryByText } = renderComponent({ category: 'some-unit-key' });
+      expect(queryByText('some-topic-0')).toBeInTheDocument();
+    });
+
+    test('when the category is a sequence with one unit', () => {
+      const { queryByText } = renderComponent({ category: 'some-sequence-key' });
+      expect(queryByText('some-topic-0')).toBeInTheDocument();
+    });
+
+    test('when the category is a sequence with multiple units', () => {
+      const { queryByText } = renderComponent({ category: 'another-sequence-key' });
+      expect(queryByText('null')).toBeInTheDocument();
+    });
+
+    test('when the category is invalid', () => {
+      const { queryByText } = renderComponent({ category: 'invalid-key' });
+      expect(queryByText('null')).toBeInTheDocument();
+    });
+
+    test('when the category has no topics', () => {
+      const { queryByText } = renderComponent({ category: 'empty-key' });
+      expect(queryByText('null')).toBeInTheDocument();
+    });
+  });
+});

src/discussions/data/selectors.js

@@ -22,6 +22,8 @@ export const selectDivisionSettings = state => state.config.settings;
 
 export const selectBlackoutDate = state => state.config.blackouts;
 
+export const selectGroupAtSubsection = state => state.config.groupAtSubsection;
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,

src/discussions/data/slices.js

@@ -11,6 +11,7 @@ const configSlice = createSlice({
     allowAnonymous: false,
     allowAnonymousToPeers: false,
     userRoles: [],
+    groupAtSubsection: false,
     hasModerationPrivileges: false,
     isGroupTa: false,
     isUserAdmin: false,

src/discussions/posts/PostsView.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 
 import SearchInfo from '../../components/SearchInfo';
-import { selectTopicsUnderCategory } from '../../data/selectors';
+import { selectCurrentCategoryGrouping, selectTopicsUnderCategory } from '../../data/selectors';
 import { DiscussionContext } from '../common/context';
 import {
   selectAllThreads,
@@ -29,7 +29,10 @@ TopicPostsList.propTypes = {
 };
 
 function CategoryPostsList({ category }) {
-  const topicIds = useSelector(selectTopicsUnderCategory)(category);
+  const { inContext } = useContext(DiscussionContext);
+  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)(inContext ? groupedCategory : category);
   const posts = useSelector(selectTopicThreads(topicIds));
   return <PostsList posts={posts} topics={topicIds} />;
 }

src/discussions/posts/PostsView.test.jsx

@@ -29,7 +29,7 @@ let store;
 let axiosMock;
 
 async function renderComponent({
-  postId, topicId, category, myPosts,
+  postId, topicId, category, myPosts, inContext = false,
 } = { myPosts: false }) {
   let path = generatePath(Routes.POSTS.ALL_POSTS, { courseId });
   let page;
@@ -56,6 +56,7 @@ async function renderComponent({
             topicId,
             category,
             page,
+            inContext,
           }}
           >
             <Switch>
@@ -85,12 +86,6 @@ describe('PostsView', () => {
         roles: [],
       },
     });
-
-    store = initializeStore({
-      blocks: { blocks: { 'test-usage-key': { topics: ['some-topic-2', 'some-topic-0'] } } },
-      config: { hasModerationPrivileges: true },
-    });
-    store.dispatch(fetchConfigSuccess({}));
     Factory.resetAll();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock.onGet(getCohortsApiUrl(courseId)).reply(200, Factory.buildList('cohort', 1));
@@ -109,36 +104,71 @@ describe('PostsView', () => {
       });
   });
 
+  function setupStore(data = {}) {
+    const storeData = {
+      blocks: { blocks: { 'test-usage-key': { topics: ['some-topic-2', 'some-topic-0'] } } },
+      config: { hasModerationPrivileges: true },
+      ...data,
+    };
+    // console.log(storeData);
+    store = initializeStore(storeData);
+    store.dispatch(fetchConfigSuccess({}));
+  }
+
   describe('Basic', () => {
     test('displays a list of all posts', async () => {
+      setupStore();
       await act(async () => {
         await renderComponent();
       });
       expect(screen.getAllByText(/this is thread-\d+/i)).toHaveLength(threadCount);
     });
 
     test('displays a list of user posts', async () => {
+      setupStore();
       await act(async () => {
         await renderComponent({ myPosts: true });
       });
       expect(screen.getAllByText('abc123')).toHaveLength(threadCount);
     });
 
     test('displays a list of posts in a topic', async () => {
+      setupStore();
       await act(async () => {
         await renderComponent({ topicId: 'some-topic-1' });
       });
       expect(screen.getAllByText(/this is thread-\d+ in topic some-topic-1/i)).toHaveLength(Math.ceil(threadCount / 3));
     });
 
-    test('displays a list of posts in a category', async () => {
-      await act(async () => {
-        await renderComponent({ category: 'test-usage-key' });
-      });
-      expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-1}/i)).toHaveLength(0);
-      expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-2/i)).toHaveLength(Math.ceil(threadCount / 3));
-      expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-0/i)).toHaveLength(Math.ceil(threadCount / 3));
-    });
+    test.each([true, false])(
+      'displays a list of posts in a category with grouping at subsection = %s',
+      async (grouping) => {
+        setupStore({
+          blocks: {
+            blocks: {
+              'test-usage-key': {
+                type: 'vertical',
+                topics: ['some-topic-2', 'some-topic-0'],
+                parent: 'test-seq-key',
+              },
+              'test-seq-key': { type: 'sequential', topics: ['some-topic-0', 'some-topic-1', 'some-topic-2'] },
+            },
+          },
+          config: { groupAtSubsection: grouping, hasModerationPrivileges: true, provider: 'openedx' },
+        });
+        await act(async () => {
+          await renderComponent({ category: 'test-usage-key', inContext: true, p: true });
+        });
+        const topicThreadCount = Math.ceil(threadCount / 3);
+        expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-2/i))
+          .toHaveLength(topicThreadCount);
+        expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-0/i))
+          .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);
+      },
+    );
   });
 
   describe('Filtering', () => {
@@ -150,6 +180,7 @@ describe('PostsView', () => {
     }
 
     beforeEach(async () => {
+      setupStore();
       await act(async () => {
         await renderComponent();
       });

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

@@ -10,7 +10,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import * as Yup from 'yup';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
   Button, Card, Form, Spinner, StatefulButton,
@@ -23,6 +23,7 @@ import PostPreviewPane from '../../../components/PostPreviewPane';
 import { useDispatchWithState } from '../../../data/hooks';
 import { selectCourseCohorts } from '../../cohorts/data/selectors';
 import { fetchCourseCohorts } from '../../cohorts/data/thunks';
+import { useCurrentDiscussionTopic } from '../../data/hooks';
 import {
   selectAnonymousPostingConfig,
   selectDivisionSettings,
@@ -77,9 +78,9 @@ DiscussionPostType.propTypes = {
 };
 
 function PostEditor({
-  intl,
   editExisting,
 }) {
+  const intl = useIntl();
   const { authenticatedUser } = useContext(AppContext);
   const dispatch = useDispatch();
   const editorRef = useRef(null);
@@ -89,9 +90,9 @@ function PostEditor({
   const commentsPagePath = useCommentsPagePath();
   const {
     courseId,
-    topicId,
     postId,
   } = useParams();
+  const topicId = useCurrentDiscussionTopic();
 
   const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
   const nonCoursewareIds = useSelector(selectNonCoursewareIds);
@@ -439,12 +440,11 @@ function PostEditor({
 }
 
 PostEditor.propTypes = {
-  intl: intlShape.isRequired,
   editExisting: PropTypes.bool,
 };
 
 PostEditor.defaultProps = {
   editExisting: false,
 };
 
-export default injectIntl(PostEditor);
+export default PostEditor;