fix: post loading slow

2023-02-21 13:00:36 +05:00
35 changed files with 114 additions and 863 deletions
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -16,4 +16,4 @@ jobs:
    secrets:
      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
-      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
--- a/.github/workflows/add-remove-label-on-comment.yml
+++ b/.github/workflows/add-remove-label-on-comment.yml
@@ -1,20 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "label: " it tries to apply
-# the label indicated in rest of comment.
-# If the comment starts with "remove label: ", it tries
-# to remove the indicated label.
-# Note: Labels are allowed to have spaces and this script does
-# not parse spaces (as often a space is legitimate), so the command
-# "label: really long lots of words label" will apply the
-# label "really long lots of words label"
-
-name: Allows for the adding and removing of labels via comment
-
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  add_remove_labels:
-    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
-
--- a/.github/workflows/self-assign-issue.yml
+++ b/.github/workflows/self-assign-issue.yml
@@ -1,12 +0,0 @@
-# This workflow runs when a comment is made on the ticket
-# If the comment starts with "assign me" it assigns the author to the
-# ticket (case insensitive)
-
-name: Assign comment author to ticket if they say "assign me"
-on:
-  issue_comment:
-    types: [created]
-
-jobs:
-  self_assign_by_comment:
-    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master
--- a/public/index.html
+++ b/public/index.html
@@ -45,7 +45,7 @@
      };
    </script>
    <script
-      defer
+      async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
      id="MathJax-script"
    ></script>
@@ -54,7 +54,7 @@
    <div id="root" class="small"></div>

    <!-- begin usabilla live embed code -->
-    <script defer type="text/javascript">
+    <script type="text/javascript">
      window.lightningjs ||
        (function (n) {
          var e = "lightningjs";
--- a/src/discussions/common/ActionsDropdown.jsx
+++ b/src/discussions/common/ActionsDropdown.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';

 import { useSelector } from 'react-redux';
@@ -16,6 +16,7 @@ import messages from '../messages';
 import { commentShape } from '../post-comments/comments/comment/proptypes';
 import { postShape } from '../posts/post/proptypes';
 import { inBlackoutDateRange, useActions } from '../utils';
+import { DiscussionContext } from './context';

 function ActionsDropdown({
  intl,
@@ -25,54 +26,41 @@ function ActionsDropdown({
  iconSize,
  dropDownIconSize,
 }) {
-  const buttonRef = useRef();
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = useState(null);
  const actions = useActions(commentOrPost);
-
-  const handleActions = useCallback((action) => {
+  const { enableInContextSidebar } = useContext(DiscussionContext);
+  const handleActions = (action) => {
    const actionFunction = actionHandlers[action];
    if (actionFunction) {
      actionFunction();
    } else {
      logError(`Unknown or unimplemented action ${action}`);
    }
-  }, [actionHandlers]);
-
+  };
  const blackoutDateRange = useSelector(selectBlackoutDate);
  // Find and remove edit action if in blackout date range.
  if (inBlackoutDateRange(blackoutDateRange)) {
    actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
  }
-
-  const onClickButton = useCallback(() => {
-    setTarget(buttonRef.current);
-    open();
-  }, [open]);
-
-  const onCloseModal = useCallback(() => {
-    close();
-    setTarget(null);
-  }, [close]);
-
  return (
    <>
      <IconButton
-        onClick={onClickButton}
+        onClick={open}
        alt={intl.formatMessage(messages.actionsAlt)}
        src={MoreHoriz}
        iconAs={Icon}
        disabled={disabled}
        size={iconSize}
-        ref={buttonRef}
+        ref={setTarget}
        iconClassNames={dropDownIconSize ? 'dropdown-icon-dimentions' : ''}
      />
      <div className="actions-dropdown">
        <ModalPopup
-          onClose={onCloseModal}
+          onClose={close}
          positionRef={target}
          isOpen={isOpen}
-          placement="bottom-end"
+          placement={enableInContextSidebar ? 'left' : 'auto-start'}
        >
          <div
            className="bg-white p-1 shadow d-flex flex-column"
--- a/src/discussions/common/HoverCard.test.jsx
+++ b/src/discussions/common/HoverCard.test.jsx
@@ -28,7 +28,6 @@ const discussionPostId = 'thread-1';
 const questionPostId = 'thread-2';
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const reverseOrder = false;
-const enableInContextSidebar = false;
 let store;
 let axiosMock;
 let container;
@@ -46,7 +45,6 @@ function mockAxiosReturnPagedComments() {
            requested_fields: 'profile_image',
            endorsed,
            reverse_order: reverseOrder,
-            enable_in_context_sidebar: enableInContextSidebar,
          },
        })
        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -124,7 +124,7 @@ export default function DiscussionsHome() {
            </Switch>
          )}
        </div>
-        {!enableInContextSidebar && <DiscussionsProductTour />}
+        <DiscussionsProductTour />
      </main>
      {!enableInContextSidebar && <Footer />}
    </DiscussionContext.Provider>
--- a/src/discussions/in-context-topics/TopicPostsView.test.jsx
+++ b/src/discussions/in-context-topics/TopicPostsView.test.jsx
@@ -1,255 +0,0 @@
-import {
-  fireEvent, render, screen, waitFor, within,
-} from '@testing-library/react';
-import MockAdapter from 'axios-mock-adapter';
-import { act } from 'react-dom/test-utils';
-import { IntlProvider } from 'react-intl';
-import { generatePath, MemoryRouter, Route } from 'react-router';
-import { Factory } from 'rosie';
-
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-
-import { PostActionsBar } from '../../components';
-import { Routes } from '../../data/constants';
-import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { DiscussionContext } from '../common/context';
-import { getThreadsApiUrl } from '../posts/data/api';
-import { fetchThreads } from '../posts/data/thunks';
-import { getCourseTopicsApiUrl } from './data/api';
-import { selectCoursewareTopics } from './data/selectors';
-import { fetchCourseTopicsV3 } from './data/thunks';
-import TopicPostsView from './TopicPostsView';
-import TopicsView from './TopicsView';
-
-import './data/__factories__';
-import '../posts/data/__factories__/threads.factory';
-
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const threadsApiUrl = getThreadsApiUrl();
-const topicsApiUrl = getCourseTopicsApiUrl();
-let store;
-let axiosMock;
-let lastLocation;
-let container;
-
-async function renderComponent({ topicId, category } = { }) {
-  let path = `/${courseId}/topics`;
-  if (topicId) {
-    path = generatePath(Routes.POSTS.PATH, { courseId, topicId });
-  } else if (category) {
-    path = generatePath(Routes.TOPICS.CATEGORY, { courseId, category });
-  }
-  const wrapper = await render(
-    <IntlProvider locale="en">
-      <AppProvider store={store}>
-        <DiscussionContext.Provider value={{
-          courseId,
-          topicId,
-          category,
-          page: 'topics',
-        }}
-        >
-          <MemoryRouter initialEntries={[path]}>
-            <Route exact path={[Routes.POSTS.PATH, Routes.TOPICS.CATEGORY]}>
-              <TopicPostsView />
-            </Route>
-            <Route exact path={[Routes.TOPICS.ALL]}>
-              <PostActionsBar />
-              <TopicsView />
-            </Route>
-            <Route
-              render={({ location }) => {
-                lastLocation = location;
-                return null;
-              }}
-            />
-          </MemoryRouter>
-        </DiscussionContext.Provider>
-      </AppProvider>
-    </IntlProvider>,
-  );
-  container = wrapper.container;
-}
-
-describe('InContext Topic Posts View', () => {
-  let coursewareTopics;
-
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore({
-      config: {
-        enableInContext: true,
-        provider: 'openedx',
-        hasModerationPrivileges: true,
-        blackouts: [],
-      },
-    });
-    Factory.resetAll();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    lastLocation = undefined;
-  });
-
-  async function setupTopicsMockResponse() {
-    axiosMock.onGet(`${topicsApiUrl}${courseId}`)
-      .reply(200, (Factory.buildList('topic', 1, null, {
-        topicPrefix: 'noncourseware-topic',
-        enabledInContext: true,
-        topicNamePrefix: 'general-topic',
-        usageKey: '',
-        courseware: false,
-        discussionCount: 1,
-        questionCount: 1,
-      })
-        .concat(Factory.buildList('section', 2, null, { topicPrefix: 'courseware' })))
-        .concat(Factory.buildList('archived-topics', 2, null)));
-    await executeThunk(fetchCourseTopicsV3(courseId), store.dispatch, store.getState);
-
-    const state = store.getState();
-    coursewareTopics = selectCoursewareTopics(state);
-  }
-
-  async function setupPostsMockResponse(topicId, numOfResponses = 3) {
-    axiosMock.onGet(threadsApiUrl)
-      .reply(() => {
-        const threadAttrs = { previewBody: 'thread preview body' };
-        return [200, Factory.build('threadsResult', {}, {
-          topicId,
-          threadAttrs,
-          count: numOfResponses,
-        })];
-      });
-    await executeThunk(fetchThreads(courseId), store.dispatch, store.getState);
-  }
-
-  test.each([
-    { parentId: 'noncourseware-topic-1', parentTitle: 'general-topic-1', topicType: 'NonCourseware' },
-    { parentId: 'courseware-topic-1-v3-1', parentTitle: 'Introduction Introduction 1-1-1', topicType: 'Courseware' },
-  ])('\'$topicType\' topic should have a required number of post lengths.', async ({ parentId, parentTitle }) => {
-    await setupTopicsMockResponse();
-    await setupPostsMockResponse(parentId, 3);
-
-    await act(async () => {
-      renderComponent({ topicId: parentId });
-    });
-
-    await waitFor(async () => {
-      const posts = await container.querySelectorAll('.discussion-post');
-      const backButton = screen.getByLabelText('Back to topics list');
-      const parentHeader = await screen.findByText(parentTitle);
-
-      expect(lastLocation.pathname.endsWith(`/topics/${parentId}`)).toBeTruthy();
-      expect(posts).toHaveLength(3);
-      expect(backButton).toBeInTheDocument();
-      expect(parentHeader).toBeInTheDocument();
-    });
-  });
-
-  it('A back button should redirect from list of posts to list of units.', async () => {
-    await setupTopicsMockResponse();
-    const subSection = coursewareTopics[0].children[0];
-    const unit = subSection.children[0];
-
-    await act(async () => {
-      setupPostsMockResponse(unit.id, 2);
-      renderComponent({ topicId: unit.id });
-    });
-
-    const backButton = await screen.getByLabelText('Back to topics list');
-
-    await act(async () => fireEvent.click(backButton));
-    await waitFor(async () => {
-      renderComponent({ category: subSection.id });
-
-      const subSectionList = await container.querySelector('.list-group');
-      const units = subSectionList.querySelectorAll('.discussion-topic');
-      const unitHeader = within(subSectionList).queryByText(unit.name);
-
-      expect(lastLocation.pathname.endsWith(`/category/${subSection.id}`)).toBeTruthy();
-      expect(unitHeader).toBeInTheDocument();
-      expect(units).toHaveLength(4);
-    });
-  });
-
-  it('A back button should redirect from units to the parent/selected subsection.', async () => {
-    await setupTopicsMockResponse();
-    const subSection = coursewareTopics[0].children[0];
-
-    renderComponent({ category: subSection.id });
-
-    const backButton = await screen.getByLabelText('Back to topics list');
-
-    await act(async () => fireEvent.click(backButton));
-    await waitFor(async () => {
-      renderComponent();
-
-      const sectionList = await container.querySelector('.list-group');
-      const subSections = sectionList.querySelectorAll('.discussion-topic-group');
-      const subSectionHeader = within(sectionList).queryByText(subSection.displayName);
-
-      expect(lastLocation.pathname.endsWith('/topics')).toBeTruthy();
-      expect(subSectionHeader).toBeInTheDocument();
-      expect(subSections).toHaveLength(3);
-    });
-  });
-
-  test.each([
-    { searchText: 'hello world', output: 'Showing 0 results for', resultCount: 0 },
-    { searchText: 'introduction', output: 'Showing 8 results for', resultCount: 8 },
-  ])('It should have a search bar with a clear button and \'$output\' results found text.',
-    async ({ searchText, output, resultCount }) => {
-      await setupTopicsMockResponse();
-      await renderComponent();
-
-      const searchField = await within(container).getByPlaceholderText('Search topics');
-      const searchButton = await within(container).getByTestId('search-icon');
-      fireEvent.change(searchField, { target: { value: searchText } });
-
-      await waitFor(async () => expect(searchField).toHaveValue(searchText));
-      await act(async () => fireEvent.click(searchButton));
-      await waitFor(async () => {
-        const clearButton = await within(container).queryByText('Clear results');
-        const searchMessage = within(container).queryByText(`${output} "${searchText}"`);
-        const units = container.querySelectorAll('.discussion-topic');
-
-        expect(searchMessage).toBeInTheDocument();
-        expect(clearButton).toBeInTheDocument();
-        expect(units).toHaveLength(resultCount);
-      });
-    });
-
-  it('When click on the clear button it should move to main topics pages.', async () => {
-    await setupTopicsMockResponse();
-    await renderComponent();
-
-    const searchText = 'hello world';
-    const searchField = await within(container).getByPlaceholderText('Search topics');
-    const searchButton = await within(container).getByTestId('search-icon');
-
-    fireEvent.change(searchField, { target: { value: searchText } });
-
-    await waitFor(async () => expect(searchField).toHaveValue(searchText));
-    await act(async () => fireEvent.click(searchButton));
-    await waitFor(async () => {
-      const clearButton = await within(container).queryByText('Clear results');
-
-      await act(async () => fireEvent.click(clearButton));
-      await waitFor(async () => {
-        const coursewareTopicList = await container.querySelectorAll('.discussion-topic-group');
-
-        expect(coursewareTopicList).toHaveLength(3);
-        expect(within(container).queryByText('Clear results')).not.toBeInTheDocument();
-      });
-    });
-  });
-});
--- a/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
+++ b/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
@@ -50,7 +50,6 @@ function TopicSearchBar({ intl }) {
          <Icon
            src={SearchIcon}
            onClick={() => onSubmit(searchValue)}
-            data-testid="search-icon"
          />
        </span>
      </SearchField.Advanced>
--- a/src/discussions/learners/LearnersView.test.jsx
+++ b/src/discussions/learners/LearnersView.test.jsx
@@ -64,9 +64,9 @@ describe('LearnersView', () => {
    axiosMock.onGet(`${coursesApiUrl}${courseId}/activity_stats/`)
      .reply(() => [200, learnersData]);
    const learnersProfile = Factory.build('learnersProfile', {}, {
-      username: ['learner-1', 'learner-2', 'learner-3'],
+      username: ['leaner-1', 'leaner-2', 'leaner-3'],
    });
-    axiosMock.onGet(`${userProfileApiUrl}?username=learner-1,learner-2,learner-3`)
+    axiosMock.onGet(`${userProfileApiUrl}?username=leaner-1,leaner-2,leaner-3`)
      .reply(() => [200, learnersProfile.profiles]);
    await executeThunk(fetchLearners(courseId), store.dispatch, store.getState);
  });
--- a/src/discussions/learners/data/factories/learners.factory.js
+++ b/src/discussions/learners/data/factories/learners.factory.js
@@ -2,7 +2,7 @@ import { Factory } from 'rosie';

 Factory.define('learner')
  .sequence('id')
-  .attr('username', ['id'], (id) => `learner-${id}`)
+  .attr('username', ['id'], (id) => `leaner-${id}`)
  .option('activeFlags', null, null)
  .attr('active_flags', ['activeFlags'], (activeFlags) => activeFlags)
  .attrs({
@@ -23,8 +23,14 @@ Factory.define('learnersResult')
    ['courseId', 'count', 'page', 'pageSize'],
    (courseId, count, page, pageSize) => {
      const numPages = Math.ceil(count / pageSize);
-      const next = page < numPages ? page + 1 : null;
-      const prev = page > 1 ? page - 1 : null;
+      const next = page < numPages
+        ? `http://test.site/api/discussion/v1/courses/course-v1:edX+DemoX+Demo_Course/activity_stats?page=${page + 1
+        }`
+        : null;
+      const prev = page > 1
+        ? `http://test.site/api/discussion/v1/courses/course-v1:edX+DemoX+Demo_Course/activity_stats?page=${page - 1
+        }`
+        : null;
      return {
        next,
        prev,
@@ -59,7 +65,7 @@ Factory.define('learnersResult')
  );

 Factory.define('learnersProfile')
-  .option('usernames', null, ['learner-1', 'learner-2', 'learner-3'])
+  .option('usernames', null, ['leaner-1', 'leaner-2', 'leaner-3'])
  .attr('profiles', ['usernames'], (usernames) => {
    const profiles = usernames.map((user) => ({
      account_privacy: 'private',
--- a/src/discussions/learners/data/api.js
+++ b/src/discussions/learners/data/api.js
@@ -10,8 +10,6 @@ ensureConfig([

 export const getCoursesApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussion/v1/courses/`;
 export const getUserProfileApiUrl = () => `${getConfig().LMS_BASE_URL}/api/user/v1/accounts`;
-export const learnerPostsApiUrl = (courseId) => `${getCoursesApiUrl()}${courseId}/learner/`;
-export const learnersApiUrl = (courseId) => `${getCoursesApiUrl()}${courseId}/activity_stats/`;

 /**
 * Fetches all the learners in the given course.
@@ -20,7 +18,8 @@ export const learnersApiUrl = (courseId) => `${getCoursesApiUrl()}${courseId}/ac
 * @returns {Promise<{}>}
 */
 export async function getLearners(courseId, params) {
-  const { data } = await getAuthenticatedHttpClient().get(learnersApiUrl(courseId), { params });
+  const url = `${getCoursesApiUrl()}${courseId}/activity_stats/`;
+  const { data } = await getAuthenticatedHttpClient().get(url, { params });
  return data;
 }

@@ -66,6 +65,8 @@ export async function getUserPosts(courseId, {
  countFlagged,
  cohort,
 } = {}) {
+  const learnerPostsApiUrl = `${getCoursesApiUrl()}${courseId}/learner/`;
+
  const params = snakeCaseObject({
    page,
    pageSize,
@@ -80,6 +81,6 @@ export async function getUserPosts(courseId, {
  });

  const { data } = await getAuthenticatedHttpClient()
-    .get(learnerPostsApiUrl(courseId), { params });
+    .get(learnerPostsApiUrl, { params });
  return data;
 }
--- a/src/discussions/learners/data/api.test.jsx
+++ b/src/discussions/learners/data/api.test.jsx
@@ -1,79 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { initializeMockApp } from '@edx/frontend-platform/testing';
-
-import { setupLearnerMockResponse, setupPostsMockResponse } from '../test-utils';
-
-import './__factories__';
-
-const courseId2 = 'course-v1:edX+TestX+Test_Course2';
-let axiosMock;
-
-describe('Learner api test cases', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    Factory.resetAll();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  it('Successfully get and store API response for the learner\'s list and learners posts in redux',
-    async () => {
-      const learners = await setupLearnerMockResponse();
-      const threads = await setupPostsMockResponse();
-
-      expect(learners.status).toEqual('successful');
-      expect(Object.values(learners.learnerProfiles)).toHaveLength(3);
-      expect(threads.status).toEqual('successful');
-      expect(Object.values(threads.threadsById)).toHaveLength(2);
-    });
-
-  it.each([
-    { status: 'statusUnread', search: 'Title', cohort: 'post' },
-    { status: 'statusUnanswered', search: 'Title', cohort: 'post' },
-    { status: 'statusReported', search: 'Title', cohort: 'post' },
-    { status: 'statusUnresponded', search: 'Title', cohort: 'post' },
-  ])('Successfully fetch user posts based on %s filters',
-    async ({ status, search, cohort }) => {
-      const threads = await setupPostsMockResponse({ filters: { status, search, cohort } });
-
-      expect(threads.status).toEqual('successful');
-      expect(Object.values(threads.threadsById)).toHaveLength(2);
-    });
-
-  it('Failed to fetch learners', async () => {
-    const learners = await setupLearnerMockResponse({ learnerCourseId: courseId2 });
-
-    expect(learners.status).toEqual('failed');
-  });
-
-  it('Denied to fetch learners', async () => {
-    const learners = await setupLearnerMockResponse({ statusCode: 403 });
-
-    expect(learners.status).toEqual('denied');
-  });
-
-  it('Failed to fetch learnerPosts', async () => {
-    const threads = await setupPostsMockResponse({ learnerCourseId: courseId2 });
-
-    expect(threads.status).toEqual('failed');
-  });
-
-  it('Denied to fetch learnerPosts', async () => {
-    const threads = await setupPostsMockResponse({ statusCode: 403 });
-
-    expect(threads.status).toEqual('denied');
-  });
-});
--- a/src/discussions/learners/data/redux.test.jsx
+++ b/src/discussions/learners/data/redux.test.jsx
@@ -1,120 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { initializeMockApp } from '@edx/frontend-platform/testing';
-
-import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
-import { setupLearnerMockResponse } from '../test-utils';
-import { setPostFilter, setSortedBy, setUsernameSearch } from './slices';
-import { fetchLearners } from './thunks';
-
-import './__factories__';
-
-let axiosMock;
-let store;
-
-describe('Learner redux test cases', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-    Factory.resetAll();
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  test('Successfully load initial states in redux', async () => {
-    executeThunk(
-      fetchLearners('course-v1:edX+DemoX+Demo_Course', { usernameSearch: 'learner-1' }),
-      store.dispatch, store.getState,
-    );
-    const { learners } = store.getState();
-
-    expect(learners.status).toEqual('in-progress');
-    expect(learners.learnerProfiles).toEqual({});
-    expect(learners.pages).toHaveLength(0);
-    expect(learners.nextPage).toBeNull();
-    expect(learners.totalPages).toBeNull();
-    expect(learners.totalLearners).toBeNull();
-    expect(learners.sortedBy).toEqual('activity');
-    expect(learners.usernameSearch).toBeNull();
-    expect(learners.postFilter.postType).toEqual('all');
-    expect(learners.postFilter.status).toEqual('statusAll');
-    expect(learners.postFilter.orderBy).toEqual('lastActivityAt');
-    expect(learners.postFilter.cohort).toEqual('');
-  });
-
-  test('Successfully store a learner posts stats data as pages object in redux',
-    async () => {
-      const learners = await setupLearnerMockResponse();
-      const page = learners.pages[0];
-      const statsObject = page[0];
-
-      expect(page).toHaveLength(3);
-      expect(statsObject.responses).toEqual(3);
-      expect(statsObject.threads).toEqual(1);
-      expect(statsObject.replies).toEqual(0);
-    });
-
-  test('Successfully store the nextPage, totalPages, totalLearners, and sortedBy data in redux',
-    async () => {
-      const learners = await setupLearnerMockResponse();
-
-      expect(learners.nextPage).toEqual(2);
-      expect(learners.totalPages).toEqual(2);
-      expect(learners.totalLearners).toEqual(6);
-      expect(learners.sortedBy).toEqual('activity');
-    });
-
-  test('Successfully updated the learner\'s sort data in redux', async () => {
-    const learners = await setupLearnerMockResponse();
-
-    expect(learners.sortedBy).toEqual('activity');
-    expect(learners.pages[0]).toHaveLength(3);
-
-    await store.dispatch(setSortedBy('recency'));
-    const updatedLearners = store.getState().learners;
-
-    expect(updatedLearners.sortedBy).toEqual('recency');
-    expect(updatedLearners.pages).toHaveLength(0);
-  });
-
-  test('Successfully updated the post-filter data in redux', async () => {
-    const learners = await setupLearnerMockResponse();
-    const filter = {
-      ...learners.postFilter,
-      postType: 'discussion',
-    };
-
-    expect(learners.postFilter.postType).toEqual('all');
-
-    await store.dispatch(setPostFilter(filter));
-    const updatedLearners = store.getState().learners;
-
-    expect(updatedLearners.postFilter.postType).toEqual('discussion');
-    expect(updatedLearners.pages).toHaveLength(0);
-  });
-
-  test('Successfully update the learner\'s search query in redux when searching for a learner',
-    async () => {
-      const learners = await setupLearnerMockResponse();
-
-      expect(learners.usernameSearch).toBeNull();
-
-      await store.dispatch(setUsernameSearch('learner-2'));
-      const updatedLearners = store.getState().learners;
-
-      expect(updatedLearners.usernameSearch).toEqual('learner-2');
-    });
-});
--- a/src/discussions/learners/data/selector.test.jsx
+++ b/src/discussions/learners/data/selector.test.jsx
@@ -1,81 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { initializeMockApp } from '@edx/frontend-platform/testing';
-
-import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
-import { getUserProfileApiUrl, learnersApiUrl } from './api';
-import {
-  learnersLoadingStatus,
-  selectLearnerNextPage,
-  selectLearnerSorting,
-  selectUsernameSearch,
-} from './selectors';
-import { fetchLearners } from './thunks';
-
-import './__factories__';
-
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const userProfileApiUrl = getUserProfileApiUrl();
-
-let axiosMock;
-let store;
-const username = 'abc123';
-const learnerCount = 6;
-let state;
-
-describe('Learner selectors test cases', () => {
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username,
-        administrator: true,
-        roles: [],
-      },
-    });
-    Factory.resetAll();
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-    axiosMock.onGet(learnersApiUrl(courseId))
-      .reply(() => [200, Factory.build('learnersResult', {}, {
-        count: learnerCount,
-        pageSize: 3,
-      })]);
-
-    axiosMock.onGet(`${userProfileApiUrl}?username=learner-1,learner-2,learner-3`)
-      .reply(() => [200, Factory.build('learnersProfile', {}, {
-        username: ['learner-1', 'learner-2', 'learner-3'],
-      }).profiles]);
-
-    await executeThunk(fetchLearners(courseId), store.dispatch, store.getState);
-    state = store.getState();
-  });
-
-  afterEach(() => {
-    axiosMock.reset();
-  });
-
-  test('learnersLoadingStatus should return learners list loading status.', async () => {
-    const status = learnersLoadingStatus()(state);
-    expect(status).toEqual('successful');
-  });
-
-  test('selectUsernameSearch should return a learner search query.', async () => {
-    const userNameSearch = selectUsernameSearch()(state);
-    expect(userNameSearch).toBeNull();
-  });
-
-  test('selectLearnerSorting should return learner sortedBy.', async () => {
-    const learnerSorting = selectLearnerSorting()(state);
-    expect(learnerSorting).toEqual('activity');
-  });
-
-  test('selectLearnerNextPage should return learners next page.', async () => {
-    const learnerNextPage = selectLearnerNextPage()(state);
-    expect(learnerNextPage).toEqual(2);
-  });
-});
--- a/src/discussions/learners/test-utils.js
+++ b/src/discussions/learners/test-utils.js
@@ -1,52 +0,0 @@
-import MockAdapter from 'axios-mock-adapter';
-import { Factory } from 'rosie';
-
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-
-import { initializeStore } from '../../store';
-import { executeThunk } from '../../test-utils';
-import { getUserProfileApiUrl, learnerPostsApiUrl, learnersApiUrl } from './data/api';
-import { fetchLearners, fetchUserPosts } from './data/thunks';
-
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-
-export async function setupLearnerMockResponse({
-  learnerCourseId = courseId,
-  statusCode = 200,
-  learnerCount = 6,
-} = {}) {
-  const store = initializeStore();
-  const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-  axiosMock.onGet(learnersApiUrl(learnerCourseId))
-    .reply(() => [statusCode, Factory.build('learnersResult', {}, {
-      count: learnerCount,
-      pageSize: 3,
-    })]);
-
-  axiosMock.onGet(`${getUserProfileApiUrl()}?username=learner-1,learner-2,learner-3`)
-    .reply(() => [statusCode, Factory.build('learnersProfile', {}, {
-      username: ['learner-1', 'learner-2', 'learner-3'],
-    }).profiles]);
-
-  await executeThunk(fetchLearners(courseId), store.dispatch, store.getState);
-  return store.getState().learners;
-}
-
-export async function setupPostsMockResponse({
-  learnerCourseId = courseId,
-  statusCode = 200,
-  username = 'abc123',
-  filters = { status: 'all' },
-} = {}) {
-  const store = initializeStore();
-  const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-  axiosMock.onGet(learnerPostsApiUrl(learnerCourseId), { username, count_flagged: true })
-    .reply(() => [statusCode, Factory.build('learnerPosts', {}, {
-      abuseFlaggedCount: 1,
-    })]);
-
-  await executeThunk(fetchUserPosts(courseId, { filters }), store.dispatch, store.getState);
-  return store.getState().threads;
-}
--- a/src/discussions/post-comments/PostCommentsView.jsx
+++ b/src/discussions/post-comments/PostCommentsView.jsx
@@ -99,7 +99,7 @@ function PostCommentsView({ intl }) {
        )
      )}
      <div
-        className="discussion-comments d-flex flex-column card border-0 post-card-margin post-card-padding on-focus"
+        className="discussion-comments d-flex flex-column card border-0 post-card-margin post-card-padding"
      >
        <Post post={thread} handleAddResponseButton={() => setAddingResponse(true)} />
        {!thread.closed && (
--- a/src/discussions/post-comments/PostCommentsView.test.jsx
+++ b/src/discussions/post-comments/PostCommentsView.test.jsx
@@ -10,7 +10,6 @@ import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';

-import { getApiBaseUrl } from '../../data/constants';
 import { initializeStore } from '../../store';
 import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
@@ -18,13 +17,11 @@ import { getCourseConfigApiUrl } from '../data/api';
 import { fetchCourseConfig } from '../data/thunks';
 import DiscussionContent from '../discussions-home/DiscussionContent';
 import { getThreadsApiUrl } from '../posts/data/api';
-import { fetchThread, fetchThreads } from '../posts/data/thunks';
-import { fetchCourseTopics } from '../topics/data/thunks';
+import { fetchThreads } from '../posts/data/thunks';
 import { getCommentsApiUrl } from './data/api';

 import '../posts/data/__factories__';
 import './data/__factories__';
-import '../topics/data/__factories__';

 const courseConfigApiUrl = getCourseConfigApiUrl();
 const commentsApiUrl = getCommentsApiUrl();
@@ -33,9 +30,7 @@ const discussionPostId = 'thread-1';
 const questionPostId = 'thread-2';
 const closedPostId = 'thread-2';
 const courseId = 'course-v1:edX+TestX+Test_Course';
-const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
 const reverseOrder = false;
-const enableInContextSidebar = false;
 let store;
 let axiosMock;
 let testLocation;
@@ -53,7 +48,6 @@ function mockAxiosReturnPagedComments() {
            requested_fields: 'profile_image',
            endorsed,
            reverse_order: reverseOrder,
-            enable_in_context_sidebar: enableInContextSidebar,
          },
        })
        .reply(200, Factory.build('commentsResult', { can_delete: true }, {
@@ -89,12 +83,6 @@ function mockAxiosReturnPagedCommentsResponses() {
  }
 }

-async function getThreadAPIResponse(threadId, topicId) {
-  axiosMock.onGet(`${threadsApiUrl}${discussionPostId}/`)
-    .reply(200, Factory.build('thread', { id: threadId, topic_id: topicId }));
-  await executeThunk(fetchThread(discussionPostId), store.dispatch, store.getState);
-}
-
 function renderComponent(postId) {
  const wrapper = render(
    <IntlProvider locale="en">
@@ -119,45 +107,6 @@ function renderComponent(postId) {
  return wrapper;
 }

-describe('PostView', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
-    });
-
-    store = initializeStore();
-    Factory.resetAll();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-    axiosMock.onGet(topicsApiUrl)
-      .reply(200, {
-        non_courseware_topics: Factory.buildList('topic', 1, {}, { topicPrefix: 'non-courseware-' }),
-        courseware_topics: Factory.buildList('category', 1, {}, { name: 'courseware' }),
-      });
-    executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
-  });
-
-  it('should show Topic Info for non-courseware topics', async () => {
-    await getThreadAPIResponse('thread-1', 'non-courseware-topic-1');
-    renderComponent(discussionPostId);
-    expect(await screen.findByText('Related to')).toBeInTheDocument();
-    expect(await screen.findByText('non-courseware-topic 1')).toBeInTheDocument();
-  });
-
-  it('should show Topic Info for courseware topics with category', async () => {
-    await getThreadAPIResponse('thread-2', 'courseware-topic-2');
-
-    renderComponent('thread-2');
-    expect(await screen.findByText('Related to')).toBeInTheDocument();
-    expect(await screen.findByText('category-1 / courseware-topic 2')).toBeInTheDocument();
-  });
-});
-
 describe('ThreadView', () => {
  beforeEach(() => {
    initializeMockApp({
--- a/src/discussions/post-comments/comments/comment/Comment.jsx
+++ b/src/discussions/post-comments/comments/comment/Comment.jsx
@@ -1,7 +1,4 @@
-import React, {
-  useCallback,
-  useContext, useEffect, useMemo, useState,
-} from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
@@ -46,28 +43,28 @@ function Comment({
  const hasMorePages = useSelector(selectCommentHasMorePages(comment.id));
  const currentPage = useSelector(selectCommentCurrentPage(comment.id));
  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
-  const { courseId } = useContext(DiscussionContext);
-
+  const {
+    courseId,
+  } = useContext(DiscussionContext);
  useEffect(() => {
    // If the comment has a parent comment, it won't have any children, so don't fetch them.
    if (hasChildren && !currentPage && showFullThread) {
      dispatch(fetchCommentResponses(comment.id, { page: 1 }));
    }
  }, [comment.id]);
-
  const actions = useActions({
    ...comment,
    postType,
  });
  const endorseIcons = actions.find(({ action }) => action === EndorsementStatus.ENDORSED);

-  const handleAbusedFlag = useCallback(() => {
+  const handleAbusedFlag = () => {
    if (comment.abuseFlagged) {
      dispatch(editComment(comment.id, { flagged: !comment.abuseFlagged }));
    } else {
      showReportConfirmation();
    }
-  }, [comment.abuseFlagged, comment.id, dispatch, showReportConfirmation]);
+  };

  const handleDeleteConfirmation = () => {
    dispatch(removeComment(comment.id));
@@ -79,7 +76,7 @@ function Comment({
    hideReportConfirmation();
  };

-  const actionHandlers = useMemo(() => ({
+  const actionHandlers = {
    [ContentActions.EDIT_CONTENT]: () => setEditing(true),
    [ContentActions.ENDORSE]: async () => {
      await dispatch(editComment(comment.id, { endorsed: !comment.endorsed }, ContentActions.ENDORSE));
@@ -87,7 +84,7 @@ function Comment({
    },
    [ContentActions.DELETE]: showDeleteConfirmation,
    [ContentActions.REPORT]: () => handleAbusedFlag(),
-  }), [showDeleteConfirmation, dispatch, comment.id, comment.endorsed, comment.threadId, courseId, handleAbusedFlag]);
+  };

  const handleLoadMoreComments = () => (
    dispatch(fetchCommentResponses(comment.id, { page: currentPage + 1 }))
@@ -122,7 +119,7 @@ function Comment({
          />
        )}
        <EndorsedAlertBanner postType={postType} content={comment} />
-        <div className="d-flex flex-column post-card-comment px-4 pt-3.5 pb-10px" tabIndex="0">
+        <div className="d-flex flex-column post-card-comment px-4 pt-3.5 pb-10px" aria-level={5}>
          <HoverCard
            commentOrPost={comment}
            actionHandlers={actionHandlers}
--- a/src/discussions/post-comments/comments/comment/CommentEditor.jsx
+++ b/src/discussions/post-comments/comments/comment/CommentEditor.jsx
@@ -13,7 +13,6 @@ import { TinyMCEEditor } from '../../../../components';
 import FormikErrorFeedback from '../../../../components/FormikErrorFeedback';
 import PostPreviewPane from '../../../../components/PostPreviewPane';
 import { useDispatchWithState } from '../../../../data/hooks';
-import { DiscussionContext } from '../../../common/context';
 import {
  selectModerationSettings,
  selectUserHasModerationPrivileges,
@@ -33,7 +32,6 @@ function CommentEditor({
 }) {
  const editorRef = useRef(null);
  const { authenticatedUser } = useContext(AppContext);
-  const { enableInContextSidebar } = useContext(DiscussionContext);
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const userIsGroupTa = useSelector(selectUserIsGroupTa);
  const userIsStaff = useSelector(selectUserIsStaff);
@@ -73,7 +71,7 @@ function CommentEditor({
      };
      await dispatch(editComment(comment.id, payload));
    } else {
-      await dispatch(addComment(values.comment, comment.threadId, comment.parentId, enableInContextSidebar));
+      await dispatch(addComment(values.comment, comment.threadId, comment.parentId));
    }
    /* istanbul ignore if: TinyMCE is mocked so this cannot be easily tested */
    if (editorRef.current) {
--- a/src/discussions/post-comments/comments/comment/Reply.jsx
+++ b/src/discussions/post-comments/comments/comment/Reply.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';

 import { useDispatch, useSelector } from 'react-redux';
@@ -31,13 +31,13 @@ function Reply({
  const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
  const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);

-  const handleAbusedFlag = useCallback(() => {
+  const handleAbusedFlag = () => {
    if (reply.abuseFlagged) {
      dispatch(editComment(reply.id, { flagged: !reply.abuseFlagged }));
    } else {
      showReportConfirmation();
    }
-  }, [dispatch, reply.abuseFlagged, reply.id, showReportConfirmation]);
+  };

  const handleDeleteConfirmation = () => {
    dispatch(removeComment(reply.id));
@@ -49,7 +49,7 @@ function Reply({
    hideReportConfirmation();
  };

-  const actionHandlers = useMemo(() => ({
+  const actionHandlers = {
    [ContentActions.EDIT_CONTENT]: () => setEditing(true),
    [ContentActions.ENDORSE]: () => dispatch(editComment(
      reply.id,
@@ -58,8 +58,7 @@ function Reply({
    )),
    [ContentActions.DELETE]: showDeleteConfirmation,
    [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);
--- a/src/discussions/post-comments/data/api.js
+++ b/src/discussions/post-comments/data/api.js
@@ -16,8 +16,6 @@ export const getCommentsApiUrl = () => `${getConfig().LMS_BASE_URL}/api/discussi
 * @param {EndorsementStatus} endorsed
 * @param {number=} page
 * @param {number=} pageSize
- * @param reverseOrder
- * @param enableInContextSidebar
 * @returns {Promise<{}>}
 */
 export async function getThreadComments(
@@ -26,7 +24,6 @@ export async function getThreadComments(
    page,
    pageSize,
    reverseOrder,
-    enableInContextSidebar = false,
  } = {},
 ) {
  const params = snakeCaseObject({
@@ -36,7 +33,6 @@ export async function getThreadComments(
    pageSize,
    reverseOrder,
    requestedFields: 'profile_image',
-    enableInContextSidebar,
  });

  const { data } = await getAuthenticatedHttpClient()
@@ -73,14 +69,11 @@ export async function getCommentResponses(
 * @param {string} comment Raw comment data to post.
 * @param {string} threadId Thread ID for thread in which to post comment.
 * @param {string=} parentId ID for a comments parent.
- * @param {boolean} enableInContextSidebar
 * @returns {Promise<{}>}
 */
-export async function postComment(comment, threadId, parentId = null, enableInContextSidebar = false) {
+export async function postComment(comment, threadId, parentId = null) {
  const { data } = await getAuthenticatedHttpClient()
-    .post(getCommentsApiUrl(), snakeCaseObject({
-      threadId, raw_body: comment, parentId, enableInContextSidebar,
-    }));
+    .post(getCommentsApiUrl(), snakeCaseObject({ threadId, raw_body: comment, parentId }));
  return data;
 }

--- a/src/discussions/post-comments/data/hooks.js
+++ b/src/discussions/post-comments/data/hooks.js
@@ -1,12 +1,9 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';

 import { useDispatch, useSelector } from 'react-redux';

-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-
 import { EndorsementStatus } from '../../../data/constants';
 import { useDispatchWithState } from '../../../data/hooks';
-import { DiscussionContext } from '../../common/context';
 import { selectThread } from '../../posts/data/selectors';
 import { markThreadAsRead } from '../../posts/data/thunks';
 import {
@@ -14,16 +11,6 @@ import {
 } from './selectors';
 import { fetchThreadComments } from './thunks';

-function trackLoadMoreEvent(postId, params) {
-  sendTrackEvent(
-    'edx.forum.responses.loadMore',
-    {
-      postId,
-      params,
-    },
-  );
-}
-
 export function usePost(postId) {
  const dispatch = useDispatch();
  const thread = useSelector(selectThread(postId));
@@ -43,24 +30,18 @@ export function usePostComments(postId, endorsed = null) {
  const reverseOrder = useSelector(selectCommentSortOrder);
  const hasMorePages = useSelector(selectThreadHasMorePages(postId, endorsed));
  const currentPage = useSelector(selectThreadCurrentPage(postId, endorsed));
-  const { enableInContextSidebar } = useContext(DiscussionContext);

-  const handleLoadMoreResponses = async () => {
-    const params = {
-      endorsed,
-      page: currentPage + 1,
-      reverseOrder,
-    };
-    await dispatch(fetchThreadComments(postId, params));
-    trackLoadMoreEvent(postId, params);
-  };
+  const handleLoadMoreResponses = async () => dispatch(fetchThreadComments(postId, {
+    endorsed,
+    page: currentPage + 1,
+    reverseOrder,
+  }));

  useEffect(() => {
    dispatch(fetchThreadComments(postId, {
      endorsed,
      page: 1,
      reverseOrder,
-      enableInContextSidebar,
    }));
  }, [postId, reverseOrder]);

--- a/src/discussions/post-comments/data/thunks.js
+++ b/src/discussions/post-comments/data/thunks.js
@@ -80,15 +80,12 @@ export function fetchThreadComments(
    page = 1,
    reverseOrder,
    endorsed = EndorsementStatus.DISCUSSION,
-    enableInContextSidebar,
  } = {},
 ) {
  return async (dispatch) => {
    try {
      dispatch(fetchCommentsRequest());
-      const data = await getThreadComments(threadId, {
-        page, reverseOrder, endorsed, enableInContextSidebar,
-      });
+      const data = await getThreadComments(threadId, { page, reverseOrder, endorsed });
      dispatch(fetchCommentsSuccess({
        ...normaliseComments(camelCaseObject(data)),
        endorsed,
@@ -147,7 +144,7 @@ export function editComment(commentId, comment, action = null) {
  };
 }

-export function addComment(comment, threadId, parentId = null, enableInContextSidebar = false) {
+export function addComment(comment, threadId, parentId = null) {
  return async (dispatch) => {
    try {
      dispatch(postCommentRequest({
@@ -155,7 +152,7 @@ export function addComment(comment, threadId, parentId = null, enableInContextSi
        threadId,
        parentId,
      }));
-      const data = await postComment(comment, threadId, parentId, enableInContextSidebar);
+      const data = await postComment(comment, threadId, parentId);
      dispatch(postCommentSuccess(camelCaseObject(data)));
    } catch (error) {
      if (getHttpErrorStatus(error) === 403) {
--- a/src/discussions/posts/PostsView.test.jsx
+++ b/src/discussions/posts/PostsView.test.jsx
@@ -160,9 +160,9 @@ describe('PostsView', () => {
    test('displays a list of posts in a topic', async () => {
      setupStore();
      await act(async () => {
-        await renderComponent({ topicId: 'test-topic-1' });
+        await renderComponent({ topicId: 'some-topic-1' });
      });
-      expect(screen.getAllByText(/this is thread-\d+ in topic test-topic-1/i)).toHaveLength(Math.ceil(threadCount / 3));
+      expect(screen.getAllByText(/this is thread-\d+ in topic some-topic-1/i)).toHaveLength(Math.ceil(threadCount / 3));
    });

    test.each([true, false])(
@@ -173,10 +173,10 @@ describe('PostsView', () => {
            blocks: {
              'test-usage-key': {
                type: 'vertical',
-                topics: ['test-topic-2', 'test-topic-0'],
+                topics: ['some-topic-2', 'some-topic-0'],
                parent: 'test-seq-key',
              },
-              'test-seq-key': { type: 'sequential', topics: ['test-topic-0', 'test-topic-1', 'test-topic-2'] },
+              'test-seq-key': { type: 'sequential', topics: ['some-topic-0', 'some-topic-1', 'some-topic-2'] },
            },
          },
          config: { groupAtSubsection: grouping, hasModerationPrivileges: true, provider: 'openedx' },
@@ -185,12 +185,12 @@ describe('PostsView', () => {
          await renderComponent({ category: 'test-usage-key', enableInContextSidebar: true, p: true });
        });
        const topicThreadCount = Math.ceil(threadCount / 3);
-        expect(screen.queryAllByText(/this is thread-\d+ in topic test-topic-2/i))
+        expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-2/i))
          .toHaveLength(topicThreadCount);
-        expect(screen.queryAllByText(/this is thread-\d+ in topic test-topic-0/i))
+        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 test-topic-1/i))
+        expect(screen.queryAllByText(/this is thread-\d+ in topic some-topic-1/i))
          .toHaveLength(grouping ? topicThreadCount : 2);
      },
    );
--- a/src/discussions/posts/data/factories/threads.factory.js
+++ b/src/discussions/posts/data/factories/threads.factory.js
@@ -7,7 +7,7 @@ Factory.define('thread')
  .sequence('rendered_body', (idx) => `Some contents for <b>thread number ${idx}</b>.`)
  .sequence('type', (idx) => (idx % 2 === 1 ? 'discussion' : 'question'))
  .sequence('pinned', idx => (idx < 3))
-  .sequence('topic_id', idx => `test-topic-${(idx % 3)}`)
+  .sequence('topic_id', idx => `some-topic-${(idx % 3)}`)
  .sequence('closed', idx => Boolean(idx % 3 === 2)) // Mark every 3rd post closed
  .attr('comment_list_url', ['id'], (threadId) => `http://test.site/api/discussion/v1/comments/?thread_id=${threadId}`)
  .attrs({
--- a/src/discussions/posts/data/api.js
+++ b/src/discussions/posts/data/api.js
@@ -87,7 +87,6 @@ export async function getThread(threadId, courseId) {
 * @param {boolean} following Follow the thread after creating
 * @param {boolean} anonymous Should the thread be anonymous to all users
 * @param {boolean} anonymousToPeers Should the thread be anonymous to peers
- * @param {boolean} enableInContextSidebar
 * @returns {Promise<{}>}
 */
 export async function postThread(
@@ -102,7 +101,6 @@ export async function postThread(
    anonymous,
    anonymousToPeers,
  } = {},
-  enableInContextSidebar = false,
 ) {
  const postData = snakeCaseObject({
    courseId,
@@ -114,8 +112,8 @@ export async function postThread(
    anonymous,
    anonymousToPeers,
    groupId: cohort,
-    enableInContextSidebar,
  });
+
  const { data } = await getAuthenticatedHttpClient()
    .post(getThreadsApiUrl(), postData);
  return data;
--- a/src/discussions/posts/data/redux.test.js
+++ b/src/discussions/posts/data/redux.test.js
@@ -102,7 +102,7 @@ describe('Threads/Posts data layer tests', () => {
    expect(store.getState().threads.threadsById['thread-1'])
      .toHaveProperty('topicId');
    expect(store.getState().threads.threadsById['thread-1'].topicId)
-      .toEqual('test-topic-1');
+      .toEqual('some-topic-1');
  });

  test('successfully handles thread creation', async () => {
--- a/src/discussions/posts/data/thunks.js
+++ b/src/discussions/posts/data/thunks.js
@@ -204,7 +204,6 @@ export function createNewThread({
  anonymous,
  anonymousToPeers,
  cohort,
-  enableInContextSidebar,
 }) {
  return async (dispatch) => {
    try {
@@ -224,7 +223,7 @@ export function createNewThread({
        following,
        anonymous,
        anonymousToPeers,
-      }, enableInContextSidebar);
+      });
      dispatch(postThreadSuccess(camelCaseObject(data)));
    } catch (error) {
      if (getHttpErrorStatus(error) === 403) {
--- a/src/discussions/posts/post-editor/PostEditor.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.jsx
@@ -106,7 +106,7 @@ function PostEditor({
  const nonCoursewareIds = useSelector(enableInContext ? inContextCoursewareIds : selectNonCoursewareIds);
  const coursewareTopics = useSelector(enableInContext ? inContextCourseware : selectCoursewareTopics);
  const cohorts = useSelector(selectCourseCohorts);
-  const post = useSelector(editExisting ? selectThread(postId) : () => ({}));
+  const post = useSelector(selectThread(postId));
  const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
  const userIsGroupTa = useSelector(selectUserIsGroupTa);
  const settings = useSelector(selectDivisionSettings);
@@ -187,7 +187,6 @@ function PostEditor({
        anonymous: allowAnonymous ? values.anonymous : undefined,
        anonymousToPeers: allowAnonymousToPeers ? values.anonymousToPeers : undefined,
        cohort,
-        enableInContextSidebar,
      }));
    }
    /* istanbul ignore if: TinyMCE is mocked so this cannot be easily tested */
--- a/src/discussions/posts/post-editor/PostEditor.test.jsx
+++ b/src/discussions/posts/post-editor/PostEditor.test.jsx
@@ -141,16 +141,6 @@ describe('PostEditor', () => {
        }
      },
    );
-    test('selectThread is not called while creating a new post', async () => {
-      const mockSelectThread = jest.fn();
-      jest.mock('../data/selectors', () => ({
-        selectThread: mockSelectThread,
-      }));
-      await renderComponent();
-      expect(mockSelectThread)
-        .not
-        .toHaveBeenCalled();
-    });
  });

  describe('cohorting', () => {
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -1,11 +1,10 @@
-import React, { useCallback, useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';

 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';

-import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink, useToggle } from '@edx/paragon';

@@ -42,14 +41,13 @@ function Post({
  const [isDeleting, showDeleteConfirmation, hideDeleteConfirmation] = useToggle(false);
  const [isReporting, showReportConfirmation, hideReportConfirmation] = useToggle(false);
  const [isClosing, showClosePostModal, hideClosePostModal] = useToggle(false);
-
-  const handleAbusedFlag = useCallback(() => {
+  const handleAbusedFlag = () => {
    if (post.abuseFlagged) {
      dispatch(updateExistingThread(post.id, { flagged: !post.abuseFlagged }));
    } else {
      showReportConfirmation();
    }
-  }, [dispatch, post.abuseFlagged, post.id, showReportConfirmation]);
+  };

  const handleDeleteConfirmation = async () => {
    await dispatch(removeThread(post.id));
@@ -65,7 +63,7 @@ function Post({
    hideReportConfirmation();
  };

-  const actionHandlers = useMemo(() => ({
+  const actionHandlers = {
    [ContentActions.EDIT_CONTENT]: () => history.push({
      ...location,
      pathname: `${location.pathname}/edit`,
@@ -83,34 +81,17 @@ function Post({
    [ContentActions.COPY_LINK]: () => { navigator.clipboard.writeText(`${window.location.origin}/${courseId}/posts/${post.id}`); },
    [ContentActions.PIN]: () => dispatch(updateExistingThread(post.id, { pinned: !post.pinned })),
    [ContentActions.REPORT]: () => handleAbusedFlag(),
-  }), [
-    showDeleteConfirmation,
-    history,
-    location,
-    post.closed,
-    post.id,
-    post.pinned,
-    reasonCodesEnabled,
-    dispatch,
-    showClosePostModal,
-    courseId,
-    handleAbusedFlag,
-  ]);
+  };

  const getTopicCategoryName = topicData => (
    topicData.usageKey ? getTopicSubsection(topicData.usageKey)?.displayName : topicData.categoryId
  );

-  const getTopicInfo = topicData => (
-    getTopicCategoryName(topicData) ? `${getTopicCategoryName(topicData)} / ${topicData.name}` : `${topicData.name}`
-  );
-
  return (
    <div
      className="d-flex flex-column w-100 mw-100 post-card-comment"
+      aria-level={5}
      data-testid={`post-${post.id}`}
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex="0"
    >
      <Confirmation
        isOpen={isDeleting}
@@ -145,7 +126,7 @@ function Post({
      <div className="d-flex mt-14px text-break font-style text-primary-500">
        <HTMLLoader htmlNode={post.renderedBody} componentId="post" cssClassName="html-loader" testId={post.id} />
      </div>
-      {(topicContext || topic) && (
+      {topicContext && (
        <div
          className={classNames('mt-14px mb-1 font-style font-size-12',
            { 'w-100': enableInContextSidebar })}
@@ -153,7 +134,7 @@ function Post({
        >
          <span className="text-gray-500" style={{ lineHeight: '20px' }}>{intl.formatMessage(messages.relatedTo)}{' '}</span>
          <Hyperlink
-            destination={topicContext ? topicContext.unitLink : `${getConfig().BASE_URL}/${courseId}/topics/${post.topicId}`}
+            destination={topicContext.unitLink}
            target="_top"
          >
            {(topicContext && !topic)
@@ -166,7 +147,7 @@ function Post({
                  <span className="w-auto">{topicContext.unitName}</span>
                </>
              )
-              : getTopicInfo(topic)}
+              : `${getTopicCategoryName(topic)} / ${topic.name}`}
          </Hyperlink>
        </div>
      )}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1,61 +1,61 @@
 {
-  "navigation.course.tabs.label": "Matériel de cours",
+  "navigation.course.tabs.label": "Course Material",
  "learn.course.tabs.navigation.overflow.menu": "Plus...",
-  "discussions.topics.backAlt": "Retour à la liste des sujets",
+  "discussions.topics.backAlt": "Back to topics list",
  "discussions.topics.discussions": "{count, plural,\n      =0 {Discussion}\n      one {# Discussion}\n      other {# Discussions}\n    }",
  "discussions.topics.questions": "{count, plural,\n      =0 {Question}\n      one {# Question}\n      other {# Questions}\n    }",
-  "discussions.topics.reported": "{reported} signalé",
-  "discussions.topics.previouslyReported": "{previouslyReported} signalé précédemment",
-  "discussions.topics.find.label": "Rechercher des sujets",
-  "discussions.topics.unnamed.section.label": "Section sans nom",
-  "discussions.topics.unnamed.subsection.label": "Sous-section sans nom",
-  "discussions.subtopics.unnamed.topic.label": "Sujet sans nom",
-  "discussions.topics.title": "Aucun sujet n'existe",
-  "discussions.topics.createTopic": "Veuillez contacter votre administrateur pour créer un sujet",
+  "discussions.topics.reported": "{reported} reported",
+  "discussions.topics.previouslyReported": "{previouslyReported} previously reported",
+  "discussions.topics.find.label": "Search topics",
+  "discussions.topics.unnamed.section.label": "Unnamed Section",
+  "discussions.topics.unnamed.subsection.label": "Unnamed Subsection",
+  "discussions.subtopics.unnamed.topic.label": "Unnamed Topic",
+  "discussions.topics.title": "No topic exists",
+  "discussions.topics.createTopic": "Please contact you admin to create a topic",
  "discussions.topics.nothing": "Nothing here yet",
-  "discussions.topics.archived.label": "Archivé",
+  "discussions.topics.archived.label": "Archived",
  "discussions.learner.reported": "{reported} signalé",
-  "discussions.learner.previouslyReported": "{previouslyReported} signalé précédemment",
-  "discussions.learner.lastLogin": "Dernier actif {lastActiveTime}",
+  "discussions.learner.previouslyReported": "{previouslyReported} previously reported",
+  "discussions.learner.lastLogin": "Last active {lastActiveTime}",
  "discussions.learner.loadMostLearners": "Charger plus",
  "discussions.learner.back": "Retour",
  "discussions.learner.activityForLearner": "Activité pour {username}",
-  "discussions.learner.mostActivity": "La plupart des activités",
-  "discussions.learner.reportedActivity": "Activité signalée",
-  "discussions.learner.recentActivity": "Activité récente",
+  "discussions.learner.mostActivity": "Most activity",
+  "discussions.learner.reportedActivity": "Reported activity",
+  "discussions.learner.recentActivity": "Recent activity",
  "discussions.learner.sortFilterStatus": "All learners sorted by {sort, select,\n      flagged {reported activity}\n      activity {most activity}\n      other {{sort}}\n    }",
-  "discussion.learner.allActivity": "Toutes les activités",
+  "discussion.learner.allActivity": "All activity",
  "discussion.learner.posts": "Posts",
-  "discussions.actions.button.alt": "Menu Actions",
-  "discussions.actions.copylink": "Copier le lien",
+  "discussions.actions.button.alt": "Actions menu",
+  "discussions.actions.copylink": "Copy link",
  "discussions.actions.edit": "Modifier",
  "discussions.actions.pin": "Épingler",
-  "discussions.actions.unpin": "Ne plus épingler",
-  "discussions.actions.delete": "Supprimer",
-  "discussions.confirmation.button.confirm": "Confirmer",
-  "discussions.actions.close": "Fermer",
-  "discussions.actions.reopen": "Réouvrir",
+  "discussions.actions.unpin": "Unpin",
+  "discussions.actions.delete": "Delete",
+  "discussions.confirmation.button.confirm": "Confirm",
+  "discussions.actions.close": "Close",
+  "discussions.actions.reopen": "Reopen",
  "discussions.actions.report": "Report",
  "discussions.actions.unreport": "Unreport",
-  "discussions.actions.endorse": "Approuver",
-  "discussions.actions.unendorse": "Ne plus approuver",
-  "discussions.actions.markAnswered": "Marquer comme répondu",
+  "discussions.actions.endorse": "Endorse",
+  "discussions.actions.unendorse": "Unendorse",
+  "discussions.actions.markAnswered": "Mark as answered",
  "discussions.actions.unMarkAnswered": "Unmark as answered",
-  "discussions.modal.confirmation.button.cancel": "Annuler",
+  "discussions.modal.confirmation.button.cancel": "Cancel",
  "discussions.empty.allTopics": "All discussion activity for these topics will show up here.",
  "discussions.empty.allPosts": "All discussion activity for your course will show up here.",
  "discussions.empty.myPosts": "Posts you've interacted with will show up here.",
  "discussions.empty.topic": "All discussion activity for this topic will show up here.",
-  "discussions.empty.title": "Rien ici encore",
+  "discussions.empty.title": "Nothing here yet",
  "discussions.empty.noPostSelected": "No post selected",
-  "discussions.empty.noTopicSelected": "Aucun sujet sélectionné",
-  "discussions.sidebar.noResultsFound": "Aucun résultat trouvé",
+  "discussions.empty.noTopicSelected": "No topic selected",
+  "discussions.sidebar.noResultsFound": "No results found",
  "discussions.sidebar.differentKeywords": "Try searching different keywords",
  "discussions.sidebar.removeKeywords": "Try searching different keywords or removing some filters",
  "discussions.sidebar.removeKeywordsOnly": "Try searching different keywords",
  "discussions.sidebar.removeFilters": "Try removing some filters",
-  "discussions.empty.iconAlt": "Vide",
-  "discussions.authors.label.staff": "Équipe",
+  "discussions.empty.iconAlt": "Empty",
+  "discussions.authors.label.staff": "Staff",
  "discussions.authors.label.ta": "TA",
  "discussions.learner.loadMostPosts": "Load more posts",
  "discussions.post.anonymous.author": "anonymous",
--- a/src/index.scss
+++ b/src/index.scss
@@ -433,7 +433,7 @@ header {
  pointer-events: none;
 }

-.on-focus:focus-within {
+.on-focus:focus-visible {
  outline: 2px solid black;
 }

@@ -442,8 +442,6 @@ header {
 }

 .post-card-comment {
-  outline: none;
-
  &:not(:hover),
  &:not(:focus) {
    .hover-card {
@@ -452,7 +450,7 @@ header {
  }

  &:hover,
-  &:focus-within {
+  &:focus {
    .hover-card {
      display: flex;
    }
--- a/src/test-utils.js
+++ b/src/test-utils.js
@@ -1,5 +1,4 @@
 /* eslint-disable import/prefer-default-export */
-
 export const executeThunk = async (thunk, dispatch, getState) => {
  await thunk(dispatch, getState);
  await new Promise(setImmediate);