fix: post loading slow

.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 }}

.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
-

.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

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";

src/discussions/discussions-home/DiscussionsHome.jsx

@@ -124,7 +124,7 @@ export default function DiscussionsHome() {
             </Switch>
           )}
         </div>
-        {!enableInContextSidebar && <DiscussionsProductTour />}
+        <DiscussionsProductTour />
       </main>
       {!enableInContextSidebar && <Footer />}
     </DiscussionContext.Provider>

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();
-      });
-    });
-  });
-});

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>

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

@@ -119,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}

src/discussions/post-comments/data/hooks.js

@@ -2,8 +2,6 @@ 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 { selectThread } from '../../posts/data/selectors';
@@ -13,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,15 +31,11 @@ export function usePostComments(postId, endorsed = null) {
   const hasMorePages = useSelector(selectThreadHasMorePages(postId, endorsed));
   const currentPage = useSelector(selectThreadCurrentPage(postId, endorsed));
 
-  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, {

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);

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', () => {

src/discussions/posts/post/Post.jsx

@@ -90,9 +90,8 @@ function Post({
   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}

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;
     }