{
- const isFiltered = useSelector(selectAreThreadsFiltered);
- const totalThreads = useSelector(selectPostThreadCount);
- const threadsCallStatus = useSelector(threadsLoadingStatus);
- const isViewingSpecificTopic = useRouteMatch(Routes.TOPICS.TOPIC);
+ const enableInContext = useSelector(selectEnableInContext);
const isViewingTopics = useRouteMatch(Routes.TOPICS.ALL);
const isViewingLearners = useRouteMatch(Routes.LEARNERS.PATH);
- const topicsLoading = useSelector(topicsLoadingStatus);
+ const isFiltered = useSelector(selectAreThreadsFiltered);
+ const totalThreads = useSelector(selectPostThreadCount);
+ const isThreadsEmpty = Boolean(useSelector(threadsLoadingStatus()) === RequestStatus.SUCCESSFUL && !totalThreads);
+ const isIncontextTopicsView = Boolean(useRouteMatch(Routes.TOPICS.PATH) && enableInContext);
+ const hideSidebar = Boolean(isThreadsEmpty && !isFiltered && !(isViewingTopics?.isExact || isViewingLearners));
- if (
- isViewingSpecificTopic
- && isViewingSpecificTopic.isExact
- && totalThreads > 0
- && topicsLoading === RequestStatus.SUCCESSFUL
- && threadsCallStatus === RequestStatus.SUCCESSFUL
- ) {
- return false;
- }
-
- if (isFiltered) {
+ if (isIncontextTopicsView) {
return true;
}
- if ((isViewingTopics && isViewingTopics.isExact) || isViewingLearners) {
- return true;
- }
-
- return totalThreads > 0;
+ return !hideSidebar;
};
export function useCourseDiscussionData(courseId) {
@@ -83,7 +70,6 @@ export function useCourseDiscussionData(courseId) {
useEffect(() => {
async function fetchBaseData() {
await dispatch(fetchCourseConfig(courseId));
- await dispatch(fetchCourseTopics(courseId));
await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
}
@@ -91,7 +77,7 @@ export function useCourseDiscussionData(courseId) {
}, [courseId]);
}
-export function useRedirectToThread(courseId, inContext) {
+export function useRedirectToThread(courseId, enableInContextSidebar) {
const dispatch = useDispatch();
const redirectToThread = useSelector(
(state) => state.threads.redirectToThread,
@@ -104,7 +90,7 @@ export function useRedirectToThread(courseId, inContext) {
// stored in redirectToThread
if (redirectToThread) {
dispatch(clearRedirect());
- const newLocation = discussionsPath(Routes.COMMENTS.PAGES[inContext ? 'topics' : 'my-posts'], {
+ const newLocation = discussionsPath(Routes.COMMENTS.PAGES[enableInContextSidebar ? 'topics' : 'my-posts'], {
courseId,
postId: redirectToThread.threadId,
topicId: redirectToThread.topicId,
diff --git a/src/discussions/data/selectors.js b/src/discussions/data/selectors.js
index 771fe8de..3c701691 100644
--- a/src/discussions/data/selectors.js
+++ b/src/discussions/data/selectors.js
@@ -28,6 +28,8 @@ export const selectIsCourseAdmin = state => state.config.isCourseAdmin;
export const selectIsCourseStaff = state => state.config.isCourseStaff;
+export const selectEnableInContext = state => state.config.enableInContext;
+
export const selectModerationSettings = state => ({
postCloseReasons: state.config.postCloseReasons,
editReasons: state.config.editReasons,
@@ -51,7 +53,7 @@ export function selectAreThreadsFiltered(state) {
export function selectTopicThreadCount(topicId) {
return state => {
- const topic = state.topics.topics[topicId];
+ const topic = topicId && state.topics?.topics[topicId];
if (!topic) {
return 0;
}
diff --git a/src/discussions/data/slices.js b/src/discussions/data/slices.js
index f77fb088..9de4ffbb 100644
--- a/src/discussions/data/slices.js
+++ b/src/discussions/data/slices.js
@@ -27,6 +27,7 @@ const configSlice = createSlice({
reasonCodesEnabled: false,
editReasons: [],
postCloseReasons: [],
+ enableInContext: false,
},
reducers: {
fetchConfigRequest: (state) => {
diff --git a/src/discussions/data/thunks.js b/src/discussions/data/thunks.js
index a5d427e3..e22151d7 100644
--- a/src/discussions/data/thunks.js
+++ b/src/discussions/data/thunks.js
@@ -3,7 +3,7 @@ import { camelCaseObject } from '@edx/frontend-platform';
import { logError } from '@edx/frontend-platform/logging';
import {
- LearnersOrdering,
+ DiscussionProvider, LearnersOrdering,
PostsStatusFilter,
} from '../../data/constants';
import { setSortedBy } from '../learners/data';
@@ -36,7 +36,10 @@ export function fetchCourseConfig(courseId) {
learnerSort = LearnersOrdering.BY_FLAG;
}
- dispatch(fetchConfigSuccess(camelCaseObject(config)));
+ dispatch(fetchConfigSuccess(camelCaseObject({
+ ...config,
+ enable_in_context: config.provider === DiscussionProvider.OPEN_EDX,
+ })));
dispatch(setSortedBy(learnerSort));
dispatch(setStatusFilter(postsFilterStatus));
} catch (error) {
diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx
index 8b1e8736..934c269e 100644
--- a/src/discussions/discussions-home/DiscussionSidebar.jsx
+++ b/src/discussions/discussions-home/DiscussionSidebar.jsx
@@ -14,51 +14,72 @@ import { DiscussionContext } from '../common/context';
import {
useContainerSize, useIsOnDesktop, useIsOnXLDesktop, useShowLearnersTab,
} from '../data/hooks';
-import { selectconfigLoadingStatus } from '../data/selectors';
+import { selectconfigLoadingStatus, selectEnableInContext } from '../data/selectors';
+import { TopicPostsView, TopicsView as InContextTopicsView } from '../in-context-topics';
import { LearnerPostsView, LearnersView } from '../learners';
import { PostsView } from '../posts';
-import { TopicsView } from '../topics';
+import { TopicsView as LegacyTopicsView } from '../topics';
export default function DiscussionSidebar({ displaySidebar, postActionBarRef }) {
const location = useLocation();
const isOnDesktop = useIsOnDesktop();
const isOnXLDesktop = useIsOnXLDesktop();
+ const { enableInContextSidebar } = useContext(DiscussionContext);
+ const enableInContext = useSelector(selectEnableInContext);
const configStatus = useSelector(selectconfigLoadingStatus);
const redirectToLearnersTab = useShowLearnersTab();
const sidebarRef = useRef(null);
const postActionBarHeight = useContainerSize(postActionBarRef);
const { height: windowHeight } = useWindowSize();
- const { inContext } = useContext(DiscussionContext);
useEffect(() => {
- if (sidebarRef && postActionBarHeight && !inContext) {
+ if (sidebarRef && postActionBarHeight && !enableInContextSidebar) {
if (isOnDesktop) {
sidebarRef.current.style.maxHeight = `${windowHeight - postActionBarHeight}px`;
}
sidebarRef.current.style.minHeight = `${windowHeight - postActionBarHeight}px`;
sidebarRef.current.style.top = `${postActionBarHeight}px`;
}
- }, [sidebarRef, postActionBarHeight, inContext]);
+ }, [sidebarRef, postActionBarHeight, enableInContextSidebar]);
return (
+ {enableInContext && !enableInContextSidebar && (
+
+ )}
+ {enableInContext && !enableInContextSidebar && (
+
+ )}
-
+
{redirectToLearnersTab && (
)}
@@ -66,13 +87,13 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef })
)}
{configStatus === RequestStatus.SUCCESSFUL && (
-
+
)}
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
index 3c8c65aa..61a21a5c 100644
--- a/src/discussions/discussions-home/DiscussionsHome.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -12,60 +12,52 @@ import { getConfig } from '@edx/frontend-platform';
import { PostActionsBar } from '../../components';
import { CourseTabsNavigation } from '../../components/NavigationBar';
+import { selectCourseTabs } from '../../components/NavigationBar/data/selectors';
import { ALL_ROUTES, DiscussionProvider, Routes } from '../../data/constants';
import { DiscussionContext } from '../common/context';
import {
useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useShowLearnersTab, useSidebarVisible,
} from '../data/hooks';
-import { selectDiscussionProvider } from '../data/selectors';
+import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors';
import { EmptyLearners, EmptyPosts, EmptyTopics } from '../empty-posts';
+import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components';
import messages from '../messages';
-import { BreadcrumbMenu, LegacyBreadcrumbMenu, NavigationBar } from '../navigation';
+import { LegacyBreadcrumbMenu, NavigationBar } from '../navigation';
+import { selectPostEditorVisible } from '../posts/data/selectors';
import { postMessageToParent } from '../utils';
import BlackoutInformationBanner from './BlackoutInformationBanner';
import DiscussionContent from './DiscussionContent';
import DiscussionSidebar from './DiscussionSidebar';
-import InformationBanner from './InformationsBanner';
+import InformationBanner from './InformationBanner';
export default function DiscussionsHome() {
const location = useLocation();
const postActionBarRef = useRef(null);
- const postEditorVisible = useSelector(
- (state) => state.threads.postEditorVisible,
- );
- const {
- params: { page },
- } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
-
+ const postEditorVisible = useSelector(selectPostEditorVisible);
+ const provider = useSelector(selectDiscussionProvider);
+ const enableInContext = useSelector(selectEnableInContext);
+ const { courseNumber, courseTitle, org } = useSelector(selectCourseTabs);
+ const { params: { page } } = useRouteMatch(`${Routes.COMMENTS.PAGE}?`);
const { params: { path } } = useRouteMatch(`${Routes.DISCUSSIONS.PATH}/:path*`);
const { params } = useRouteMatch(ALL_ROUTES);
const isRedirectToLearners = useShowLearnersTab();
- const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
-
- const {
- courseId,
- postId,
- topicId,
- category,
- learnerUsername,
- } = params;
- const inContext = new URLSearchParams(location.search).get('inContext') !== null;
- // Display the content area if we are currently viewing/editing a post or creating one.
- const displayContentArea = postId || postEditorVisible || (learnerUsername && postId);
- let displaySidebar = useSidebarVisible();
-
const isOnDesktop = useIsOnDesktop();
+ let displaySidebar = useSidebarVisible();
+ const enableInContextSidebar = Boolean(new URLSearchParams(location.search).get('inContextSidebar') !== null);
+ const isFeedbackBannerVisible = getConfig().DISPLAY_FEEDBACK_BANNER === 'true';
+ const {
+ courseId, postId, topicId, category, learnerUsername,
+ } = params;
- const { courseNumber, courseTitle, org } = useSelector((state) => state.courseTabs);
- if (displayContentArea) {
- // If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
- // However, for smaller screens or embeds, only show the sidebar if the content area isn't displayed.
- displaySidebar = isOnDesktop;
- }
-
- const provider = useSelector(selectDiscussionProvider);
useCourseDiscussionData(courseId);
- useRedirectToThread(courseId, inContext);
+ useRedirectToThread(courseId, enableInContextSidebar);
+
+ /* Display the content area if we are currently viewing/editing a post or creating one.
+ If the window is larger than a particular size, show the sidebar for navigating between posts/topics.
+ However, for smaller screens or embeds, onlyshow the sidebar if the content area isn't displayed. */
+ const displayContentArea = (postId || postEditorVisible || (learnerUsername && postId));
+ if (displayContentArea) { displaySidebar = isOnDesktop; }
+
useEffect(() => {
if (path && path !== 'undefined') {
postMessageToParent('discussions.navigate', { path });
@@ -78,33 +70,35 @@ export default function DiscussionsHome() {
courseId,
postId,
topicId,
- inContext,
+ enableInContextSidebar,
category,
learnerUsername,
}}
>
- {!inContext &&
}
+ {!enableInContextSidebar &&
}
- {!inContext && }
+ {!enableInContextSidebar && }
- {!inContext &&
}
-
+ {!enableInContextSidebar &&
}
+
{isFeedbackBannerVisible &&
}
- {!inContext && (
+ {provider === DiscussionProvider.LEGACY && (
)}
@@ -112,7 +106,10 @@ export default function DiscussionsHome() {
{displayContentArea && }
{!displayContentArea && (
-
+
}
@@ -126,7 +123,7 @@ export default function DiscussionsHome() {
)}
- {!inContext &&
}
+ {!enableInContextSidebar &&
}
);
}
diff --git a/src/discussions/discussions-home/DiscussionsHome.test.jsx b/src/discussions/discussions-home/DiscussionsHome.test.jsx
index 23a0a52e..685e15fc 100644
--- a/src/discussions/discussions-home/DiscussionsHome.test.jsx
+++ b/src/discussions/discussions-home/DiscussionsHome.test.jsx
@@ -1,18 +1,25 @@
import {
fireEvent, render, screen, waitFor,
} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
import { act } from 'react-dom/test-utils';
import { IntlProvider } from 'react-intl';
import { Context as ResponsiveContext } from 'react-responsive';
import { MemoryRouter } from 'react-router';
import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { AppProvider } from '@edx/frontend-platform/react';
import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
+import { getCourseConfigApiUrl } from '../data/api';
+import { fetchCourseConfig } from '../data/thunks';
import navigationBarMessages from '../navigation/navigation-bar/messages';
import DiscussionsHome from './DiscussionsHome';
+const courseConfigApiUrl = getCourseConfigApiUrl();
+let axiosMock;
let store;
const courseId = 'course-v1:edX+DemoX+Demo_Course';
@@ -40,7 +47,7 @@ describe('DiscussionsHome', () => {
roles: [],
},
});
-
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
store = initializeStore();
});
@@ -63,7 +70,9 @@ describe('DiscussionsHome', () => {
});
test('in-context view should show close button', async () => {
- renderComponent(`/${courseId}/topics?inContext`);
+ axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { provider: 'openedx' });
+ await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+ renderComponent(`/${courseId}/topics?inContextSidebar`);
expect(screen.queryByText(navigationBarMessages.allTopics.defaultMessage))
.not
@@ -73,10 +82,12 @@ describe('DiscussionsHome', () => {
});
test('the close button should post a message', async () => {
+ axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { provider: 'openedx' });
+ await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
const { parent } = window;
delete window.parent;
window.parent = { ...window, postMessage: jest.fn() };
- renderComponent(`/${courseId}/topics?inContext`);
+ renderComponent(`/${courseId}/topics?inContextSidebar`);
const closeButton = screen.queryByRole('button', { name: 'Close' });
@@ -88,7 +99,7 @@ describe('DiscussionsHome', () => {
window.parent = parent;
});
- test('header, course navigation bar and footer are visible', async () => {
+ test('header, course navigation bar and footer are only visible in Discussions MFE', async () => {
renderComponent();
expect(screen.queryByRole('banner')).toBeInTheDocument();
expect(document.getElementById('courseTabsNavigation')).toBeInTheDocument();
diff --git a/src/discussions/discussions-home/InformationsBanner.jsx b/src/discussions/discussions-home/InformationBanner.jsx
similarity index 100%
rename from src/discussions/discussions-home/InformationsBanner.jsx
rename to src/discussions/discussions-home/InformationBanner.jsx
diff --git a/src/discussions/discussions-home/InformationBanner.test.jsx b/src/discussions/discussions-home/InformationBanner.test.jsx
index a88a33f7..05af082c 100644
--- a/src/discussions/discussions-home/InformationBanner.test.jsx
+++ b/src/discussions/discussions-home/InformationBanner.test.jsx
@@ -8,7 +8,7 @@ import { initializeStore } from '../../store';
import { DiscussionContext } from '../common/context';
import { fetchConfigSuccess } from '../data/slices';
import messages from '../messages';
-import InformationBanner from './InformationsBanner';
+import InformationBanner from './InformationBanner';
import '../posts/data/__factories__';
diff --git a/src/discussions/empty-posts/EmptyPosts.jsx b/src/discussions/empty-posts/EmptyPosts.jsx
index 481c35e1..4e62215f 100644
--- a/src/discussions/empty-posts/EmptyPosts.jsx
+++ b/src/discussions/empty-posts/EmptyPosts.jsx
@@ -52,7 +52,11 @@ function EmptyPosts({ intl, subTitleMessage }) {
}
EmptyPosts.propTypes = {
- subTitleMessage: propTypes.string.isRequired,
+ subTitleMessage: propTypes.shape({
+ id: propTypes.string,
+ defaultMessage: propTypes.string,
+ description: propTypes.string,
+ }).isRequired,
intl: intlShape.isRequired,
};
diff --git a/src/discussions/in-context-topics/TopicPostsView.jsx b/src/discussions/in-context-topics/TopicPostsView.jsx
new file mode 100644
index 00000000..56cbc837
--- /dev/null
+++ b/src/discussions/in-context-topics/TopicPostsView.jsx
@@ -0,0 +1,82 @@
+import React, { useContext } from 'react';
+
+import first from 'lodash/first';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Spinner } from '@edx/paragon';
+
+import { RequestStatus, Routes } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import { selectTopicThreads } from '../posts/data/selectors';
+import PostsList from '../posts/PostsList';
+import { discussionsPath, handleKeyDown } from '../utils';
+import {
+ selectLoadingStatus, selectNonCoursewareTopics, selectSubsectionUnits, selectUnits,
+} from './data/selectors';
+import { BackButton, NoResults } from './components';
+import messages from './messages';
+import { Topic } from './topic';
+
+function TopicPostsView({ intl }) {
+ const location = useLocation();
+ const { courseId, topicId, category } = useContext(DiscussionContext);
+ const topicsLoadingStatus = useSelector(selectLoadingStatus);
+ const posts = useSelector(selectTopicThreads([topicId]));
+ const selectedSubsectionUnits = useSelector(selectSubsectionUnits(category));
+ const selectedUnit = useSelector(selectUnits)?.find(unit => unit.id === topicId);
+ const selectedNonCoursewareTopic = useSelector(selectNonCoursewareTopics)?.find(topic => topic.id === topicId);
+
+ const backButtonPath = () => {
+ const path = selectedUnit ? Routes.TOPICS.CATEGORY : Routes.TOPICS.ALL;
+ const params = selectedUnit ? { courseId, category: selectedUnit?.parentId } : { courseId };
+ return discussionsPath(path, params)(location);
+ };
+
+ return (
+
+ {topicId ? (
+
+ ) : (
+
+ )}
+
+
handleKeyDown(e)}>
+ {topicId ? (
+
+ ) : (
+ selectedSubsectionUnits?.map((unit) => (
+
+ ))
+ )}
+ {(category && selectedSubsectionUnits.length === 0 && topicsLoadingStatus === RequestStatus.SUCCESSFUL) && (
+
+ )}
+ {(category && topicsLoadingStatus === RequestStatus.IN_PROGRESS) && (
+
+
+
+ )}
+
+
+ );
+}
+
+TopicPostsView.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(TopicPostsView);
diff --git a/src/discussions/in-context-topics/TopicsView.jsx b/src/discussions/in-context-topics/TopicsView.jsx
new file mode 100644
index 00000000..4dea2256
--- /dev/null
+++ b/src/discussions/in-context-topics/TopicsView.jsx
@@ -0,0 +1,104 @@
+import React, { useContext, useEffect } from 'react';
+
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { Spinner } from '@edx/paragon';
+
+import SearchInfo from '../../components/SearchInfo';
+import { RequestStatus } from '../../data/constants';
+import { DiscussionContext } from '../common/context';
+import { selectDiscussionProvider } from '../data/selectors';
+import NoResults from '../posts/NoResults';
+import { handleKeyDown } from '../utils';
+import {
+ selectCoursewareTopics,
+ selectFilteredTopics, selectLoadingStatus,
+ selectNonCoursewareTopics, selectTopicFilter,
+} from './data/selectors';
+import { setFilter } from './data/slices';
+import { fetchCourseTopicsV3 } from './data/thunks';
+import { SectionBaseGroup, Topic } from './topic';
+
+function TopicsList() {
+ const loadingStatus = useSelector(selectLoadingStatus);
+ const coursewareTopics = useSelector(selectCoursewareTopics);
+ const nonCoursewareTopics = useSelector(selectNonCoursewareTopics);
+
+ return (
+ <>
+ {nonCoursewareTopics?.map((topic, index) => (
+
+ ))}
+ {coursewareTopics?.map((topic, index) => (
+
+ ))}
+ {loadingStatus === RequestStatus.IN_PROGRESS && (
+
+
+
+ )}
+
+ );
+}
+
+function TopicsView() {
+ const dispatch = useDispatch();
+ const { courseId } = useContext(DiscussionContext);
+ const provider = useSelector(selectDiscussionProvider);
+ const topicFilter = useSelector(selectTopicFilter);
+ const filteredTopics = useSelector(selectFilteredTopics);
+ const loadingStatus = useSelector(selectLoadingStatus);
+
+ useEffect(() => {
+ if (provider) {
+ dispatch(fetchCourseTopicsV3(courseId));
+ }
+ }, [provider]);
+
+ return (
+
+ {topicFilter && (
+ <>
+
dispatch(setFilter(''))}
+ />
+ {filteredTopics.length === 0 && loadingStatus === RequestStatus.SUCCESSFUL && }
+
+ )}
+ handleKeyDown(e)}
+ >
+ {topicFilter ? (
+ filteredTopics?.map((topic) => (
+
+ ))
+ ) : (
+
+ )}
+
+
+ );
+}
+
+export default TopicsView;
diff --git a/src/discussions/in-context-topics/components/BackButton.jsx b/src/discussions/in-context-topics/components/BackButton.jsx
new file mode 100644
index 00000000..cadfe332
--- /dev/null
+++ b/src/discussions/in-context-topics/components/BackButton.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useHistory } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, IconButton } from '@edx/paragon';
+import { ArrowBack } from '@edx/paragon/icons';
+
+import messages from '../messages';
+
+function BackButton({ intl, path, title }) {
+ const history = useHistory();
+
+ return (
+ <>
+
+
history.push(path)}
+ alt={intl.formatMessage(messages.backAlt)}
+ />
+
+ {title}
+
+
+
+
+ );
+}
+
+BackButton.propTypes = {
+ intl: intlShape.isRequired,
+ path: PropTypes.shape({}).isRequired,
+ title: PropTypes.string.isRequired,
+};
+
+export default injectIntl(BackButton);
diff --git a/src/discussions/in-context-topics/components/EmptyTopics.jsx b/src/discussions/in-context-topics/components/EmptyTopics.jsx
new file mode 100644
index 00000000..9d667839
--- /dev/null
+++ b/src/discussions/in-context-topics/components/EmptyTopics.jsx
@@ -0,0 +1,83 @@
+import React, { useContext } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useRouteMatch } from 'react-router';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { ALL_ROUTES } from '../../../data/constants';
+import { DiscussionContext } from '../../common/context';
+import { useIsOnDesktop } from '../../data/hooks';
+import { selectPostThreadCount } from '../../data/selectors';
+import EmptyPage from '../../empty-posts/EmptyPage';
+import messages from '../../messages';
+import { messages as postMessages, showPostEditor } from '../../posts';
+import { selectCourseWareThreadsCount, selectTotalTopicsThreadsCount } from '../data/selectors';
+
+function EmptyTopics({ intl }) {
+ const match = useRouteMatch(ALL_ROUTES);
+ const dispatch = useDispatch();
+ const { enableInContextSidebar } = useContext(DiscussionContext);
+ const courseWareThreadsCount = useSelector(selectCourseWareThreadsCount(match.params.category));
+ const topicThreadsCount = useSelector(selectPostThreadCount);
+ // hasGlobalThreads is used to determine if there are any post available in courseware and non-courseware topics
+ const hasGlobalThreads = useSelector(selectTotalTopicsThreadsCount) > 0;
+
+ function addPost() {
+ return dispatch(showPostEditor());
+ }
+
+ const isOnDesktop = useIsOnDesktop();
+
+ let title = messages.emptyTitle;
+ let fullWidth = false;
+ let subTitle;
+ let action;
+ let actionText;
+
+ if (!isOnDesktop) {
+ return null;
+ }
+
+ if (match.params.topicId) {
+ if (topicThreadsCount > 0) {
+ title = messages.noPostSelected;
+ } else {
+ action = addPost;
+ actionText = postMessages.addAPost;
+ subTitle = messages.emptyTopic;
+ fullWidth = true;
+ }
+ } else if (match.params.category) {
+ if (enableInContextSidebar && topicThreadsCount > 0) {
+ title = messages.noPostSelected;
+ } else if (courseWareThreadsCount > 0) {
+ title = messages.noTopicSelected;
+ } else {
+ action = addPost;
+ actionText = postMessages.addAPost;
+ subTitle = messages.emptyTopic;
+ fullWidth = true;
+ }
+ } else if (hasGlobalThreads) {
+ title = messages.noTopicSelected;
+ } else {
+ fullWidth = true;
+ }
+
+ return (
+
+ );
+}
+
+EmptyTopics.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(EmptyTopics);
diff --git a/src/discussions/in-context-topics/components/NoResults.jsx b/src/discussions/in-context-topics/components/NoResults.jsx
new file mode 100644
index 00000000..7c03cc19
--- /dev/null
+++ b/src/discussions/in-context-topics/components/NoResults.jsx
@@ -0,0 +1,29 @@
+import { useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { selectTopics } from '../data/selectors';
+import messages from '../messages';
+
+function NoResults({ intl }) {
+ const topics = useSelector(selectTopics);
+
+ let title = messages.nothingHere;
+ const helpMessage = '';
+ if (topics.length === 0) {
+ title = messages.noTopicExists;
+ }
+
+ return (
+
+
{intl.formatMessage(title)}
+ { helpMessage && {intl.formatMessage(helpMessage)}}
+
+ );
+}
+
+NoResults.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(NoResults);
diff --git a/src/discussions/in-context-topics/components/index.js b/src/discussions/in-context-topics/components/index.js
new file mode 100644
index 00000000..634fa615
--- /dev/null
+++ b/src/discussions/in-context-topics/components/index.js
@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+export { default as BackButton } from './BackButton';
+export { default as EmptyTopic } from './EmptyTopics';
+export { default as NoResults } from './NoResults';
diff --git a/src/discussions/in-context-topics/data/api.js b/src/discussions/in-context-topics/data/api.js
new file mode 100644
index 00000000..3439bd29
--- /dev/null
+++ b/src/discussions/in-context-topics/data/api.js
@@ -0,0 +1,11 @@
+/* eslint-disable import/prefer-default-export */
+import { camelCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { getApiBaseUrl } from '../../../data/constants';
+
+export async function getCourseTopicsV3(courseId) {
+ const url = `${getApiBaseUrl()}/api/discussion/v3/course_topics/${courseId}`;
+ const { data } = await getAuthenticatedHttpClient().get(url);
+ return camelCaseObject(data);
+}
diff --git a/src/discussions/in-context-topics/data/index.js b/src/discussions/in-context-topics/data/index.js
new file mode 100644
index 00000000..716c85cf
--- /dev/null
+++ b/src/discussions/in-context-topics/data/index.js
@@ -0,0 +1 @@
+export * from './slices';
diff --git a/src/discussions/in-context-topics/data/selectors.js b/src/discussions/in-context-topics/data/selectors.js
new file mode 100644
index 00000000..38bf7f20
--- /dev/null
+++ b/src/discussions/in-context-topics/data/selectors.js
@@ -0,0 +1,51 @@
+/* eslint-disable import/prefer-default-export */
+
+import { createSelector } from '@reduxjs/toolkit';
+
+export const selectTopicFilter = state => state.inContextTopics.filter.trim().toLowerCase();
+
+export const selectTopics = state => state.inContextTopics.topics;
+
+export const selectCoursewareTopics = state => state.inContextTopics.coursewareTopics;
+
+export const selectNonCoursewareTopics = state => state.inContextTopics.nonCoursewareTopics;
+
+export const selectNonCoursewareIds = state => state.inContextTopics.nonCoursewareIds;
+
+export const selectUnits = state => state.inContextTopics.units;
+
+export const selectSubsectionUnits = subsectionId => state => state.inContextTopics.units?.filter(
+ unit => unit.parentId === subsectionId,
+);
+
+export const selectLoadingStatus = state => state.inContextTopics.status;
+
+export const selectFilteredTopics = createSelector(
+ selectUnits,
+ selectNonCoursewareTopics,
+ selectTopicFilter,
+ (units, nonCoursewareTopics, filter) => (
+ (units && nonCoursewareTopics && filter) && [...units, ...nonCoursewareTopics]?.filter(
+ topic => topic.name.toLowerCase().includes(filter),
+ )
+ ),
+);
+
+export const selectTotalTopicsThreadsCount = createSelector(
+ selectUnits,
+ selectNonCoursewareTopics,
+ (units, nonCoursewareTopics) => (
+ (units && nonCoursewareTopics) && [...units, ...nonCoursewareTopics]?.reduce((total, topic) => (
+ total + topic.threadCounts.discussion + topic.threadCounts.question
+ ), 0)
+ ),
+);
+
+export const selectCourseWareThreadsCount = category => createSelector(
+ selectSubsectionUnits(category),
+ (units) => (
+ units?.reduce((total, unit) => (
+ total + unit.threadCounts.discussion + unit.threadCounts.question
+ ), 0)
+ ),
+);
diff --git a/src/discussions/in-context-topics/data/slices.js b/src/discussions/in-context-topics/data/slices.js
new file mode 100644
index 00000000..ac43c945
--- /dev/null
+++ b/src/discussions/in-context-topics/data/slices.js
@@ -0,0 +1,49 @@
+/* eslint-disable no-param-reassign,import/prefer-default-export */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../../data/constants';
+
+const topicsSlice = createSlice({
+ name: 'inContextTopics',
+ initialState: {
+ status: RequestStatus.IN_PROGRESS,
+ topics: [],
+ coursewareTopics: [],
+ nonCoursewareTopics: [],
+ nonCoursewareIds: [],
+ units: [],
+ filter: '',
+ },
+ reducers: {
+ fetchCourseTopicsRequest: (state) => {
+ state.status = RequestStatus.IN_PROGRESS;
+ },
+ fetchCourseTopicsSuccess: (state, { payload }) => {
+ state.status = RequestStatus.SUCCESSFUL;
+ state.topics = payload.topics;
+ state.coursewareTopics = payload.coursewareTopics;
+ state.nonCoursewareTopics = payload.nonCoursewareTopics;
+ state.nonCoursewareIds = payload.nonCoursewareIds;
+ state.units = payload.units;
+ },
+ fetchCourseTopicsFailed: (state) => {
+ state.status = RequestStatus.FAILED;
+ },
+ fetchCourseTopicsDenied: (state) => {
+ state.status = RequestStatus.DENIED;
+ },
+ setFilter: (state, { payload }) => {
+ state.filter = payload;
+ },
+ },
+});
+
+export const {
+ fetchCourseTopicsRequest,
+ fetchCourseTopicsSuccess,
+ fetchCourseTopicsFailed,
+ setFilter,
+ setSortBy,
+} = topicsSlice.actions;
+
+export const inContextTopicsReducer = topicsSlice.reducer;
diff --git a/src/discussions/in-context-topics/data/thunks.js b/src/discussions/in-context-topics/data/thunks.js
new file mode 100644
index 00000000..b47907c0
--- /dev/null
+++ b/src/discussions/in-context-topics/data/thunks.js
@@ -0,0 +1,56 @@
+/* eslint-disable import/prefer-default-export */
+import { reduce } from 'lodash';
+
+import { logError } from '@edx/frontend-platform/logging';
+
+import { getCourseTopicsV3 } from './api';
+import { fetchCourseTopicsFailed, fetchCourseTopicsRequest, fetchCourseTopicsSuccess } from './slices';
+
+function normalizeTopicsV3(topics) {
+ const coursewareUnits = reduce(topics, (arrayOfUnits, chapter) => {
+ if (chapter?.children) {
+ return [
+ ...arrayOfUnits,
+ ...reduce(chapter.children, (units, sequential) => {
+ if (sequential?.children) {
+ return [
+ ...units,
+ ...sequential.children.map((unit) => ({
+ ...unit,
+ parentId: sequential.id,
+ parentTitle: sequential.displayName,
+ })),
+ ];
+ }
+ return units;
+ }, []),
+ ];
+ }
+ return arrayOfUnits;
+ }, []);
+
+ const coursewareTopics = topics.filter((topic) => topic.courseware);
+ const nonCoursewareTopics = topics.filter((topic) => !topic.courseware);
+ const nonCoursewareIds = nonCoursewareTopics?.map((topic) => topic.id);
+
+ return {
+ topics,
+ units: coursewareUnits,
+ coursewareTopics,
+ nonCoursewareTopics,
+ nonCoursewareIds,
+ };
+}
+
+export function fetchCourseTopicsV3(courseId) {
+ return async (dispatch) => {
+ try {
+ dispatch(fetchCourseTopicsRequest({ courseId }));
+ const data = await getCourseTopicsV3(courseId);
+ dispatch(fetchCourseTopicsSuccess(normalizeTopicsV3(data)));
+ } catch (error) {
+ dispatch(fetchCourseTopicsFailed());
+ logError(error);
+ }
+ };
+}
diff --git a/src/discussions/in-context-topics/index.js b/src/discussions/in-context-topics/index.js
new file mode 100644
index 00000000..a7b55dda
--- /dev/null
+++ b/src/discussions/in-context-topics/index.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export { default as TopicPostsView } from './TopicPostsView';
+export { default as TopicsView } from './TopicsView';
diff --git a/src/discussions/in-context-topics/messages.js b/src/discussions/in-context-topics/messages.js
new file mode 100644
index 00000000..87886cf6
--- /dev/null
+++ b/src/discussions/in-context-topics/messages.js
@@ -0,0 +1,74 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+ backAlt: {
+ id: 'discussions.topics.backAlt',
+ defaultMessage: 'Back to topics list',
+ description: 'Display back button text used to navigate back to topics list',
+ },
+ discussions: {
+ id: 'discussions.topics.discussions',
+ defaultMessage: `{count, plural,
+ =0 {Discussion}
+ one {# Discussion}
+ other {# Discussions}
+ }`,
+ description: 'Display tooltip text used to indicate how many posts type are discussion',
+ },
+ questions: {
+ id: 'discussions.topics.questions',
+ defaultMessage: `{count, plural,
+ =0 {Question}
+ one {# Question}
+ other {# Questions}
+ }`,
+ description: 'Display tooltip text used to indicate how many posts type are questions',
+ },
+ reported: {
+ id: 'discussions.topics.reported',
+ defaultMessage: '{reported} reported',
+ description: 'Display tooltip text used to indicate how many posts are reported',
+ },
+ previouslyReported: {
+ id: 'discussions.topics.previouslyReported',
+ defaultMessage: '{previouslyReported} previously reported',
+ description: 'Display tooltip text used to indicate how many posts are previously reported',
+ },
+ searchTopics: {
+ id: 'discussions.topics.find.label',
+ defaultMessage: 'Search topics',
+ description: 'Placeholder text in search bar',
+ },
+ unnamedSection: {
+ id: 'discussions.topics.unnamed.section.label',
+ defaultMessage: 'Unnamed Section',
+ description: 'Text to display in place of section name if section name is empty',
+ },
+ unnamedSubsection: {
+ id: 'discussions.topics.unnamed.subsection.label',
+ defaultMessage: 'Unnamed Subsection',
+ description: 'Text to display in place of subsection name if subsection name is empty',
+ },
+ unnamedTopic: {
+ id: 'discussions.subtopics.unnamed.topic.label',
+ defaultMessage: 'Unnamed Topic',
+ description: 'Text to display in place of topic name if topic name is empty',
+ },
+ noTopicExists: {
+ id: 'discussions.topics.title',
+ defaultMessage: 'No topic exists',
+ description: 'Text to display in place of topic list if topic does not exist',
+ },
+ createTopic: {
+ id: 'discussions.topics.createTopic',
+ defaultMessage: 'Please contact you admin to create a topic',
+ description: 'Helping Text to display in place of topic list if topic does not exist',
+ },
+ nothingHere: {
+ id: 'discussions.topics.nothing',
+ defaultMessage: 'Nothing here yet',
+ description: 'Helping Text to display if nothing here yet',
+ },
+});
+
+export default messages;
diff --git a/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx b/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
new file mode 100644
index 00000000..116e8336
--- /dev/null
+++ b/src/discussions/in-context-topics/topic-search/TopicSearchBar.jsx
@@ -0,0 +1,64 @@
+import React, { useContext, useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, SearchField } from '@edx/paragon';
+import { Search as SearchIcon } from '@edx/paragon/icons';
+
+import { DiscussionContext } from '../../common/context';
+import postsMessages from '../../posts/post-actions-bar/messages';
+import { setFilter as setTopicFilter } from '../data/slices';
+
+function TopicSearchBar({ intl }) {
+ const dispatch = useDispatch();
+ const { page } = useContext(DiscussionContext);
+ const topicSearch = useSelector(({ inContextTopics }) => inContextTopics.filter);
+ let searchValue = '';
+
+ const onClear = () => {
+ dispatch(setTopicFilter(''));
+ };
+
+ const onChange = (query) => {
+ searchValue = query;
+ };
+
+ const onSubmit = (query) => {
+ if (query === '') {
+ return;
+ }
+ dispatch(setTopicFilter(query));
+ };
+
+ useEffect(() => onClear(), [page]);
+
+ return (
+ <>
+
+
+
+
+ onSubmit(searchValue)}
+ />
+
+
+
+ );
+}
+
+TopicSearchBar.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(TopicSearchBar);
diff --git a/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx b/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx
new file mode 100644
index 00000000..e06ad35b
--- /dev/null
+++ b/src/discussions/in-context-topics/topic-search/TopicSearchResultBar.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { SearchField } from '@edx/paragon';
+
+import { setFilter } from '../data';
+import messages from '../messages';
+
+function TopicSearchResultBar({ intl }) {
+ const dispatch = useDispatch();
+
+ return (
+
+ dispatch(setFilter(query))}
+ onChange={(query) => dispatch(setFilter(query))}
+ />
+
+ );
+}
+
+TopicSearchResultBar.propTypes = {
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(TopicSearchResultBar);
diff --git a/src/discussions/in-context-topics/topic-search/index.js b/src/discussions/in-context-topics/topic-search/index.js
new file mode 100644
index 00000000..ff0a7dcf
--- /dev/null
+++ b/src/discussions/in-context-topics/topic-search/index.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export { default as TopicSearchBar } from './TopicSearchBar';
+export { default as TopicSearchResultBar } from './TopicSearchResultBar';
diff --git a/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx b/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
new file mode 100644
index 00000000..ae9fc61c
--- /dev/null
+++ b/src/discussions/in-context-topics/topic/SectionBaseGroup.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { Routes } from '../../../data/constants';
+import { discussionsPath } from '../../utils';
+import messages from '../messages';
+import { topicShape } from './Topic';
+
+function SectionBaseGroup({
+ section,
+ sectionTitle,
+ sectionId,
+ showDivider,
+ intl,
+}) {
+ const { courseId } = useParams();
+ const isSelected = (id) => window.location.pathname.includes(id);
+ const sectionUrl = (id) => discussionsPath(Routes.TOPICS.CATEGORY, {
+ courseId,
+ category: id,
+ });
+
+ return (
+
+
+ {sectionTitle || intl.formatMessage(messages.unnamedSection)}
+
+ {section.map((subsection, index) => (
+
isSelected(subsection.id)}
+ aria-current={isSelected(section.id) ? 'page' : undefined}
+ tabIndex={(isSelected(subsection.id) || index === 0) ? 0 : -1}
+ >
+
+
+
+
+ {subsection?.displayName || intl.formatMessage(messages.unnamedSubsection)}
+
+
+
+
+
+ ))}
+ {showDivider && (
+ <>
+
+
+
+ )}
+
+ );
+}
+
+SectionBaseGroup.propTypes = {
+ section: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.string,
+ blockId: PropTypes.string,
+ lmsWebUrl: PropTypes.string,
+ legacyWebUrl: PropTypes.string,
+ studentViewUrl: PropTypes.string,
+ type: PropTypes.string,
+ displayName: PropTypes.string,
+ children: PropTypes.arrayOf(topicShape),
+ })).isRequired,
+ sectionTitle: PropTypes.string.isRequired,
+ sectionId: PropTypes.string.isRequired,
+ showDivider: PropTypes.bool.isRequired,
+ intl: intlShape.isRequired,
+};
+
+export default injectIntl(SectionBaseGroup);
diff --git a/src/discussions/in-context-topics/topic/Topic.jsx b/src/discussions/in-context-topics/topic/Topic.jsx
new file mode 100644
index 00000000..d316ebfc
--- /dev/null
+++ b/src/discussions/in-context-topics/topic/Topic.jsx
@@ -0,0 +1,155 @@
+/* eslint-disable no-unused-vars, react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, OverlayTrigger, Tooltip } from '@edx/paragon';
+import { HelpOutline, PostOutline, Report } from '@edx/paragon/icons';
+
+import { Routes } from '../../../data/constants';
+import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
+import { discussionsPath } from '../../utils';
+import messages from '../messages';
+
+function Topic({
+ topic,
+ showDivider,
+ index,
+ intl,
+}) {
+ const { courseId } = useParams();
+ const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
+ const userIsGroupTa = useSelector(selectUserIsGroupTa);
+ const { inactiveFlags, activeFlags } = topic;
+ const canSeeReportedStats = (activeFlags || inactiveFlags) && (userHasModerationPrivileges || userIsGroupTa);
+ const isSelected = (id) => window.location.pathname.includes(id);
+ const topicUrl = discussionsPath(Routes.TOPICS.TOPIC, {
+ courseId,
+ topicId: topic.id,
+ });
+
+ return (
+ <>
+
isSelected(topic.id)}
+ aria-current={isSelected(topic.id) ? 'page' : undefined}
+ role="option"
+ tabIndex={(isSelected(topic.id) || index === 0) ? 0 : -1}
+ >
+
+
+
+
+ {topic?.name || topic?.displayName || intl.formatMessage(messages.unnamedTopicSubCategories)}
+
+
+
+
+
+ {intl.formatMessage(messages.discussions, {
+ count: topic.threadCounts?.discussion || 0,
+ })}
+
+
+ )}
+ >
+
+
+ {topic.threadCounts?.discussion || 0}
+
+
+
+
+ {intl.formatMessage(messages.questions, {
+ count: topic.threadCounts?.question || 0,
+ })}
+
+
+ )}
+ >
+
+
+ {topic.threadCounts?.question || 0}
+
+
+ {Boolean(canSeeReportedStats) && (
+
+
+ {Boolean(activeFlags) && (
+
+ {intl.formatMessage(messages.reported, { reported: activeFlags })}
+
+ )}
+ {Boolean(inactiveFlags) && (
+
+ {intl.formatMessage(messages.previouslyReported, { previouslyReported: inactiveFlags })}
+
+ )}
+
+
+ )}
+ >
+
+
+ {activeFlags}{Boolean(inactiveFlags) && `/${inactiveFlags}`}
+
+
+ )}
+
+
+
+
+ {!showDivider && (
+ <>
+
+
+
+ )}
+
+ );
+}
+
+export const topicShape = PropTypes.shape({
+ id: PropTypes.string,
+ usage_key: PropTypes.string,
+ name: PropTypes.string,
+ thread_counts: PropTypes.shape({
+ discussions: PropTypes.number,
+ questions: PropTypes.number,
+ }),
+ enabled_in_context: PropTypes.bool,
+ flags: PropTypes.number,
+});
+
+Topic.propTypes = {
+ intl: intlShape.isRequired,
+ topic: topicShape,
+ showDivider: PropTypes.bool,
+ index: PropTypes.number,
+};
+
+Topic.defaultProps = {
+ showDivider: true,
+ index: -1,
+ topic: {
+ usage_key: '',
+ },
+};
+
+export default injectIntl(Topic);
diff --git a/src/discussions/in-context-topics/topic/index.js b/src/discussions/in-context-topics/topic/index.js
new file mode 100644
index 00000000..28f8a040
--- /dev/null
+++ b/src/discussions/in-context-topics/topic/index.js
@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+export { default as SectionBaseGroup } from './SectionBaseGroup';
+export { default as Topic } from './Topic';
diff --git a/src/discussions/learners/learner/LearnerCard.jsx b/src/discussions/learners/learner/LearnerCard.jsx
index b13a52de..46164aff 100644
--- a/src/discussions/learners/learner/LearnerCard.jsx
+++ b/src/discussions/learners/learner/LearnerCard.jsx
@@ -16,9 +16,9 @@ function LearnerCard({
learner,
courseId,
}) {
- const { inContext, learnerUsername } = useContext(DiscussionContext);
+ const { enableInContextSidebar, learnerUsername } = useContext(DiscussionContext);
const linkUrl = discussionsPath(Routes.LEARNERS.POSTS, {
- 0: inContext ? 'in-context' : undefined,
+ 0: enableInContextSidebar ? 'in-context' : undefined,
learnerUsername: learner.username,
courseId,
});
diff --git a/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.jsx b/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.jsx
deleted file mode 100644
index 1c897e4c..00000000
--- a/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useContext } from 'react';
-
-import { useSelector } from 'react-redux';
-
-import { Routes } from '../../../data/constants';
-import { selectBlocks, selectChapters } from '../../../data/selectors';
-import { DiscussionContext } from '../../common/context';
-import { selectTopic } from '../../topics/data/selectors';
-import { discussionsPath } from '../../utils';
-import BreadcrumbDropdown from './BreadcrumbDropdown';
-
-function BreadcrumbMenu() {
- const {
- courseId,
- topicId,
- category,
- } = useContext(DiscussionContext);
- const blocks = useSelector(selectBlocks);
- const chapters = useSelector(selectChapters);
- const blockKey = useSelector(selectTopic(topicId))?.usageKey || category;
-
- let currentChapter = null;
- let currentVertical = null;
- let currentSequential = null;
- if (!blocks[blockKey]) {
- // Data is still loading
- return null;
- }
- if (blocks[blockKey].type === 'chapter') {
- currentChapter = blockKey;
- } else if (blocks[blockKey].type === 'sequential') {
- currentSequential = blockKey;
- currentChapter = blocks[currentSequential].parent;
- } else if (blocks[blockKey].type === 'vertical') {
- currentVertical = blockKey;
- currentSequential = blocks[currentVertical].parent;
- currentChapter = blocks[currentSequential].parent;
- }
-
- const getItemDisplayName = itemId => blocks[itemId]?.displayName;
- const getItemPath = itemId => discussionsPath(Routes.TOPICS.CATEGORY, {
- courseId,
- category: itemId,
- });
-
- return (
-
-
item === currentChapter}
- itemLabelFunc={getItemDisplayName}
- />
- {currentChapter
- && (
- <>
- /
- seqId === currentChapter}
- itemLabelFunc={getItemDisplayName}
- />
-
- )}
- {currentSequential
- && (
- <>
- /
- vertId === currentChapter}
- itemLabelFunc={getItemDisplayName}
- />
-
- )}
-
- );
-}
-
-BreadcrumbMenu.propTypes = {};
-
-export default BreadcrumbMenu;
diff --git a/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.test.jsx b/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.test.jsx
deleted file mode 100644
index 31eafaa4..00000000
--- a/src/discussions/navigation/breadcrumb-menu/BreadcrumbMenu.test.jsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from 'react';
-
-import {
- act, fireEvent, render, screen, waitFor,
-} from '@testing-library/react';
-import MockAdapter from 'axios-mock-adapter';
-import { IntlProvider } from 'react-intl';
-import { 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 { getBlocksAPIResponse } from '../../../data/__factories__';
-import { getBlocksAPIURL } from '../../../data/api';
-import { getApiBaseUrl, Routes } from '../../../data/constants';
-import { fetchCourseBlocks } from '../../../data/thunks';
-import { initializeStore } from '../../../store';
-import { executeThunk } from '../../../test-utils';
-import { DiscussionContext } from '../../common/context';
-import { fetchCourseTopics } from '../../topics/data/thunks';
-import { BreadcrumbMenu } from '../index';
-
-import '../../topics/data/__factories__';
-
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v2/course_topics/${courseId}`;
-let store;
-let axiosMock;
-
-function renderComponent(path, topicId = null, category = null) {
- render(
-
-
-
-
-
-
-
-
- ,
- );
-}
-
-describe('BreadcrumbMenu', () => {
- let blocksAPIResponse;
- beforeEach(async () => {
- initializeMockApp({
- authenticatedUser: {
- userId: 3,
- username: 'abc123',
- administrator: true,
- roles: [],
- },
- });
-
- store = initializeStore({
- config: {
- provider: 'openedx',
- },
- blocks: {
- topics: {},
- },
- });
- Factory.resetAll();
- axiosMock = new MockAdapter(getAuthenticatedHttpClient());
- blocksAPIResponse = getBlocksAPIResponse();
- axiosMock.onGet(getBlocksAPIURL())
- .reply(200, blocksAPIResponse);
- await executeThunk(fetchCourseBlocks(courseId, 'test-user'), store.dispatch, store.getState);
- const data = [
- ...Factory.buildList('topic.v2', 3, { usage_key: null }, { topicPrefix: 'ncw' }),
- Factory.build('topic.v2', { id: 'vertical_0270f6de40fc' }),
- Factory.build('topic.v2', { id: '867dddb6f55d410caaa9c1eb9c6743ec' }),
- Factory.build('topic.v2', { id: '4f6c1b4e316a419ab5b6bf30e6c708e9' }),
- ];
- axiosMock
- .onGet(topicsApiUrl)
- .reply(200, data);
- await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
- });
-
- it('shows the category dropdown with a category selected', async () => {
- const chapterKey = 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b';
- const sectionKey = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction';
-
- renderComponent(`/${courseId}/category/${chapterKey}`, null, chapterKey);
-
- await waitFor(() => screen.findByText(blocksAPIResponse.blocks[chapterKey].display_name));
-
- const chapterDropdown = screen.queryByText(blocksAPIResponse.blocks[chapterKey].display_name);
- // Since a category is selected a subcategory dropdown should also be visible with "show all" selected by default
- const sectionDropdown = screen.queryByRole('button', { name: 'Show all' });
- // A show all button should show up that lists topics in the current category
- expect(sectionDropdown)
- .toBeInTheDocument();
- // Other categories should not be visible.
- expect(screen.queryByText(blocksAPIResponse.blocks[sectionKey].display_name))
- .not
- .toBeInTheDocument();
-
- // Click on the category dropdown.
- act(() => {
- fireEvent.click(chapterDropdown);
- });
- // Now other categories should be visible in the dropdown.
- expect(screen.queryByText(blocksAPIResponse.blocks[chapterKey].display_name))
- .toBeInTheDocument();
- // There are 4 categories but this has a length of 5 since there is also a link to show all.
- expect(screen.queryAllByRole('link', { exact: false }))
- .toHaveLength(5);
-
- // Now click on the topics dropdown
- act(() => {
- fireEvent.click(sectionDropdown);
- });
-
- // Topics in the category should be visible.
- expect(screen.queryByRole('link', { name: 'Demo Course Overview' }))
- .toBeInTheDocument();
- });
-
- it('shows the category correct dropdown labels with a topic selected', async () => {
- const topicId = 'vertical_0270f6de40fc';
- renderComponent(`/${courseId}/topics/${topicId}`, topicId);
- // Since a topic is selected, we have both a category and topic, so "show all shouldn't be visible"
- expect(screen.queryByText('Show all'))
- .not
- .toBeInTheDocument();
- // The name of the category and topic should be visible.
- expect(await screen.findByRole('button', { name: 'Introduction' }))
- .toBeInTheDocument();
- expect(await screen.findByRole('button', { name: 'Demo Course Overview' }))
- .toBeInTheDocument();
- expect(await screen.findByRole('button', { name: 'Introduction: Video and Sequences' }))
- .toBeInTheDocument();
- });
-});
diff --git a/src/discussions/navigation/index.js b/src/discussions/navigation/index.js
index 9ea64da0..e5e9c078 100644
--- a/src/discussions/navigation/index.js
+++ b/src/discussions/navigation/index.js
@@ -1,4 +1,3 @@
/* eslint-disable import/prefer-default-export */
-export { default as BreadcrumbMenu } from './breadcrumb-menu/BreadcrumbMenu';
export { default as LegacyBreadcrumbMenu } from './breadcrumb-menu/LegacyBreadcrumbMenu';
export { default as NavigationBar } from './navigation-bar/NavigationBar';
diff --git a/src/discussions/posts/NoResults.jsx b/src/discussions/posts/NoResults.jsx
index f1dc7a47..fbc99a50 100644
--- a/src/discussions/posts/NoResults.jsx
+++ b/src/discussions/posts/NoResults.jsx
@@ -4,21 +4,24 @@ import { useSelector } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { selectAreThreadsFiltered } from '../data/selectors';
+import { selectTopicFilter } from '../in-context-topics/data/selectors';
import messages from '../messages';
function NoResults({ intl }) {
const postsFiltered = useSelector(selectAreThreadsFiltered);
+ const inContextTopicsFilter = useSelector(selectTopicFilter);
const topicsFilter = useSelector(({ topics }) => topics.filter);
const filters = useSelector((state) => state.threads.filters);
const learnersFilter = useSelector(({ learners }) => learners.usernameSearch);
- const isFiltered = postsFiltered || (topicsFilter !== '') || (learnersFilter !== null);
+ const isFiltered = postsFiltered || (topicsFilter !== '')
+ || (learnersFilter !== null) || (inContextTopicsFilter !== '');
let helpMessage = messages.removeFilters;
if (!isFiltered) {
return null;
} if (filters.search || learnersFilter) {
helpMessage = messages.removeKeywords;
- } if (topicsFilter) {
+ } if (topicsFilter || inContextTopicsFilter) {
helpMessage = messages.removeKeywordsOnly;
}
const titleCssClasses = classNames(
diff --git a/src/discussions/posts/PostsView.jsx b/src/discussions/posts/PostsView.jsx
index b63b677f..0ec439bf 100644
--- a/src/discussions/posts/PostsView.jsx
+++ b/src/discussions/posts/PostsView.jsx
@@ -1,11 +1,18 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
import { useDispatch, useSelector } from 'react-redux';
import SearchInfo from '../../components/SearchInfo';
import { selectCurrentCategoryGrouping, selectTopicsUnderCategory } from '../../data/selectors';
import { DiscussionContext } from '../common/context';
+import { selectEnableInContext } from '../data/selectors';
+import { selectTopics as selectInContextTopics } from '../in-context-topics/data/selectors';
+import { fetchCourseTopicsV3 } from '../in-context-topics/data/thunks';
+import { selectTopics } from '../topics/data/selectors';
+import { fetchCourseTopics } from '../topics/data/thunks';
+import { handleKeyDown } from '../utils';
import {
selectAllThreads,
selectTopicThreads,
@@ -29,10 +36,10 @@ TopicPostsList.propTypes = {
};
function CategoryPostsList({ category }) {
- const { inContext } = useContext(DiscussionContext);
+ const { enableInContextSidebar } = 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 topicIds = useSelector(selectTopicsUnderCategory)(enableInContextSidebar ? groupedCategory : category);
const posts = useSelector(selectTopicThreads(topicIds));
return
;
}
@@ -45,12 +52,24 @@ function PostsView() {
const {
topicId,
category,
+ courseId,
+ enableInContextSidebar,
} = useContext(DiscussionContext);
const dispatch = useDispatch();
+ const enableInContext = useSelector(selectEnableInContext);
const searchString = useSelector(({ threads }) => threads.filters.search);
const resultsFound = useSelector(({ threads }) => threads.totalThreads);
const textSearchRewrite = useSelector(({ threads }) => threads.textSearchRewrite);
const loadingStatus = useSelector(({ threads }) => threads.status);
+ const topics = useSelector(enableInContext ? selectInContextTopics : selectTopics);
+
+ useEffect(() => {
+ if (isEmpty(topics)) {
+ dispatch((enableInContext || enableInContextSidebar)
+ ? fetchCourseTopicsV3(courseId)
+ : fetchCourseTopics(courseId));
+ }
+ }, [topics]);
let postsListComponent;
@@ -62,20 +81,6 @@ function PostsView() {
postsListComponent =
;
}
- const handleKeyDown = (event) => {
- const { key } = event;
- if (key !== 'ArrowDown' && key !== 'ArrowUp') { return; }
- const option = event.target;
-
- let selectedOption;
- if (key === 'ArrowDown') { selectedOption = option.nextElementSibling; }
- if (key === 'ArrowUp') { selectedOption = option.previousElementSibling; }
-
- if (selectedOption) {
- selectedOption.focus();
- }
- };
-
return (
{searchString && (
diff --git a/src/discussions/posts/PostsView.test.jsx b/src/discussions/posts/PostsView.test.jsx
index ca954a33..e8e3b5fa 100644
--- a/src/discussions/posts/PostsView.test.jsx
+++ b/src/discussions/posts/PostsView.test.jsx
@@ -13,27 +13,31 @@ import { initializeMockApp } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { AppProvider } from '@edx/frontend-platform/react';
-import { Routes, ThreadType } from '../../data/constants';
+import { getApiBaseUrl, Routes, ThreadType } from '../../data/constants';
import { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
import { getCohortsApiUrl } from '../cohorts/data/api';
import { DiscussionContext } from '../common/context';
import { fetchConfigSuccess } from '../data/slices';
import { getCoursesApiUrl } from '../learners/data/api';
+import { fetchCourseTopics } from '../topics/data/thunks';
import { getThreadsApiUrl } from './data/api';
import { PostsView } from './index';
import './data/__factories__';
import '../cohorts/data/__factories__';
+import '../topics/data/__factories__';
const courseId = 'course-v1:edX+TestX+Test_Course';
const coursesApiUrl = getCoursesApiUrl();
const threadsApiUrl = getThreadsApiUrl();
+const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
let store;
let axiosMock;
const username = 'abc123';
async function renderComponent({
- postId, topicId, category, myPosts, inContext = false,
+ postId, topicId, category, myPosts, enableInContextSidebar = false,
} = { myPosts: false }) {
let path = generatePath(Routes.POSTS.ALL_POSTS, { courseId });
let page;
@@ -60,7 +64,7 @@ async function renderComponent({
topicId,
category,
page,
- inContext,
+ enableInContextSidebar,
}}
>
@@ -106,6 +110,12 @@ describe('PostsView', () => {
pageSize: 6,
})];
});
+ axiosMock
+ .onGet(topicsApiUrl)
+ .reply(200, {
+ courseware_topics: Factory.buildList('category', 2),
+ non_courseware_topics: Factory.buildList('topic', 3, {}, { topicPrefix: 'ncw' }),
+ });
});
function setupStore(data = {}) {
@@ -172,7 +182,7 @@ describe('PostsView', () => {
config: { groupAtSubsection: grouping, hasModerationPrivileges: true, provider: 'openedx' },
});
await act(async () => {
- await renderComponent({ category: 'test-usage-key', inContext: true, p: true });
+ 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 some-topic-2/i))
@@ -196,6 +206,8 @@ describe('PostsView', () => {
beforeEach(async () => {
setupStore();
+ await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
+
await act(async () => {
await renderComponent();
});
diff --git a/src/discussions/posts/data/selectors.js b/src/discussions/posts/data/selectors.js
index 19bbf2a7..dcff076f 100644
--- a/src/discussions/posts/data/selectors.js
+++ b/src/discussions/posts/data/selectors.js
@@ -6,6 +6,8 @@ const selectThreads = state => state.threads.threadsById;
const mapIdsToThreads = (ids, threads) => ids.map(id => threads?.[id]);
+export const selectPostEditorVisible = state => state.threads.postEditorVisible;
+
export const selectTopicThreads = topicIds => createSelector(
[
state => (topicIds || []).flatMap(topicId => state.threads.threadsInTopic[topicId] || []),
diff --git a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
index 35403fae..b66ec467 100644
--- a/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
+++ b/src/discussions/posts/post-actions-bar/PostActionsBar.jsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
import classNames from 'classnames';
import { useDispatch, useSelector } from 'react-redux';
@@ -12,8 +11,10 @@ import { Close } from '@edx/paragon/icons';
import Search from '../../../components/Search';
import { RequestStatus } from '../../../data/constants';
+import { DiscussionContext } from '../../common/context';
import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
-import { selectconfigLoadingStatus } from '../../data/selectors';
+import { selectconfigLoadingStatus, selectEnableInContext } from '../../data/selectors';
+import { TopicSearchBar as IncontextSearch } from '../../in-context-topics/topic-search';
import { postMessageToParent } from '../../utils';
import { showPostEditor } from '../data';
import messages from './messages';
@@ -22,20 +23,25 @@ import './actionBar.scss';
function PostActionsBar({
intl,
- inContext,
}) {
const dispatch = useDispatch();
const loadingStatus = useSelector(selectconfigLoadingStatus);
+ const enableInContext = useSelector(selectEnableInContext);
const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+ const { enableInContextSidebar, page } = useContext(DiscussionContext);
const handleCloseInContext = () => {
postMessageToParent('learning.events.sidebar.close');
};
return (
-
- {!inContext &&
}
- {inContext && (
+
+ {!enableInContextSidebar && (
+ (enableInContext && ['topics', 'category'].includes(page))
+ ?
+ :
+ )}
+ {enableInContextSidebar && (
{intl.formatMessage(messages.title)}
@@ -43,18 +49,18 @@ function PostActionsBar({
{loadingStatus === RequestStatus.SUCCESSFUL && userCanAddThreadInBlackoutDate
&& (
<>
- {!inContext &&
}
+ {!enableInContextSidebar &&
}
)}
- {inContext && (
+ {enableInContextSidebar && (
<>
(
+ `${section.displayName} / ${subsection.displayName}` || intl.formatMessage(messages.unnamedTopics)
+ );
+
return (
{nonCoursewareTopics.map(topic => (
))}
- {coursewareTopics.map(categoryObj => (
-
- ))}
+ {enableInContext ? (
+ coursewareTopics?.map(section => (
+ section?.children?.map(subsection => (
+
+ ))
+ ))
+ ) : (
+ coursewareTopics.map(categoryObj => (
+
+ ))
+ )}
{canSelectCohort(values.topic) && (
diff --git a/src/discussions/posts/post/Post.jsx b/src/discussions/posts/post/Post.jsx
index 3a5a43fa..7cf2159c 100644
--- a/src/discussions/posts/post/Post.jsx
+++ b/src/discussions/posts/post/Post.jsx
@@ -58,7 +58,7 @@ function Post({
hideReportConfirmation();
};
- const { inContext } = useContext(DiscussionContext);
+ const { enableInContextSidebar } = useContext(DiscussionContext);
const actionHandlers = {
[ContentActions.EDIT_CONTENT]: () => history.push({
...location,
@@ -111,14 +111,14 @@ function Post({
{topicContext && topic && (
{intl.formatMessage(messages.relatedTo)}{' '}
- {inContext
+ {enableInContextSidebar
? (
<>
{topicContext.chapterName}
diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx
index 9aedd4e6..172ef2e9 100644
--- a/src/discussions/posts/post/PostLink.jsx
+++ b/src/discussions/posts/post/PostLink.jsx
@@ -29,12 +29,12 @@ function PostLink({
const {
page,
postId,
- inContext,
+ enableInContextSidebar,
category,
learnerUsername,
} = useContext(DiscussionContext);
const linkUrl = discussionsPath(Routes.COMMENTS.PAGES[page], {
- 0: inContext ? 'in-context' : undefined,
+ 0: enableInContextSidebar ? 'in-context' : undefined,
courseId: post.courseId,
topicId: post.topicId,
postId: post.id,
diff --git a/src/discussions/topics/TopicsView.jsx b/src/discussions/topics/TopicsView.jsx
index ce4a2ef8..fd0fbe62 100644
--- a/src/discussions/topics/TopicsView.jsx
+++ b/src/discussions/topics/TopicsView.jsx
@@ -4,17 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router';
import SearchInfo from '../../components/SearchInfo';
-import { DiscussionProvider, RequestStatus } from '../../data/constants';
-import { selectSequences } from '../../data/selectors';
+import { RequestStatus } from '../../data/constants';
import { DiscussionContext } from '../common/context';
import { selectDiscussionProvider } from '../data/selectors';
import NoResults from '../posts/NoResults';
+import { handleKeyDown } from '../utils';
import { selectCategories, selectNonCoursewareTopics, selectTopicFilter } from './data/selectors';
import { setFilter, setTopicsCount } from './data/slices';
import { fetchCourseTopics } from './data/thunks';
-import ArchivedTopicGroup from './topic-group/ArchivedTopicGroup';
import LegacyTopicGroup from './topic-group/LegacyTopicGroup';
-import SequenceTopicGroup from './topic-group/SequenceTopicGroup';
import Topic from './topic-group/topic/Topic';
import countFilteredTopics from './utils';
@@ -38,24 +36,6 @@ function CourseWideTopics() {
));
}
-function CoursewareTopics() {
- const sequences = useSelector(selectSequences);
-
- return (
- <>
- { sequences?.map(
- sequence => (
-
- ),
- )}
-
-
- );
-}
-
function LegacyCoursewareTopics() {
const { category } = useParams();
const categories = useSelector(selectCategories)
@@ -80,20 +60,6 @@ function TopicsView() {
const { courseId } = useContext(DiscussionContext);
const dispatch = useDispatch();
- const handleKeyDown = (event) => {
- const { key } = event;
- if (key !== 'ArrowDown' && key !== 'ArrowUp') { return; }
- const option = event.target;
-
- let selectedOption;
- if (key === 'ArrowDown') { selectedOption = option.nextElementSibling; }
- if (key === 'ArrowUp') { selectedOption = option.previousElementSibling; }
-
- if (selectedOption) {
- selectedOption.focus();
- }
- };
-
useEffect(() => {
// Don't load till the provider information is available
if (provider) {
@@ -118,8 +84,7 @@ function TopicsView() {
)}
handleKeyDown(e)}>
- {provider === DiscussionProvider.OPEN_EDX && }
- {provider === DiscussionProvider.LEGACY && }
+
{
filteredTopicsCount === 0
diff --git a/src/discussions/topics/TopicsView.test.jsx b/src/discussions/topics/TopicsView.test.jsx
index 4874a03a..f50070df 100644
--- a/src/discussions/topics/TopicsView.test.jsx
+++ b/src/discussions/topics/TopicsView.test.jsx
@@ -1,5 +1,5 @@
import {
- fireEvent, render, screen, within,
+ fireEvent, render, screen,
} from '@testing-library/react';
import MockAdapter from 'axios-mock-adapter';
import { IntlProvider } from 'react-intl';
@@ -10,11 +10,7 @@ import { initializeMockApp } from '@edx/frontend-platform';
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
import { AppProvider } from '@edx/frontend-platform/react';
-import { getBlocksAPIResponse } from '../../data/__factories__';
-import { getBlocksAPIURL } from '../../data/api';
-import { DiscussionProvider, getApiBaseUrl } from '../../data/constants';
-import { selectSequences } from '../../data/selectors';
-import { fetchCourseBlocks } from '../../data/thunks';
+import { getApiBaseUrl } from '../../data/constants';
import { initializeStore } from '../../store';
import { executeThunk } from '../../test-utils';
import { DiscussionContext } from '../common/context';
@@ -27,7 +23,6 @@ import './data/__factories__';
const courseId = 'course-v1:edX+DemoX+Demo_Course';
const topicsApiUrl = `${getApiBaseUrl()}/api/discussion/v1/course_topics/${courseId}`;
-const topicsv2ApiUrl = `${getApiBaseUrl()}/api/discussion/v2/course_topics/${courseId}`;
let store;
let axiosMock;
let lastLocation;
@@ -57,131 +52,86 @@ function renderComponent() {
);
}
-describe('TopicsView', () => {
- describe.each(['legacy', 'openedx'])('%s provider', (provider) => {
- let inContextTopics;
- let globalTopics;
- let categories;
- beforeEach(() => {
- initializeMockApp({
- authenticatedUser: {
- userId: 3,
- username: 'abc123',
- administrator: true,
- roles: [],
- },
- });
-
- store = initializeStore({
- config: { provider },
- blocks: {
- topics: {},
- },
- });
- Factory.resetAll();
- axiosMock = new MockAdapter(getAuthenticatedHttpClient());
- lastLocation = undefined;
+describe('Legacy Topics View', () => {
+ let inContextTopics;
+ let globalTopics;
+ let categories;
+ beforeEach(() => {
+ initializeMockApp({
+ authenticatedUser: {
+ userId: 3,
+ username: 'abc123',
+ administrator: true,
+ roles: [],
+ },
});
- async function setupMockResponse() {
- if (provider === 'legacy') {
- axiosMock
- .onGet(topicsApiUrl)
- .reply(200, {
- courseware_topics: Factory.buildList('category', 2),
- non_courseware_topics: Factory.buildList('topic', 3, {}, { topicPrefix: 'ncw' }),
- });
- await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
- const state = store.getState();
- categories = state.topics.categoryIds;
- globalTopics = selectNonCoursewareTopics(state);
- inContextTopics = selectCoursewareTopics(state);
- } else {
- const blocksAPIResponse = getBlocksAPIResponse(true);
- const ids = Object.values(blocksAPIResponse.blocks).filter(block => block.type === 'vertical')
- .map(block => block.block_id);
- const deletedIds = [
- 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@deleted-vertical-1',
- 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@deleted-vertical-2',
- ];
- const data = [
- ...Factory.buildList('topic.v2', 2, { usage_key: null }, { topicPrefix: 'ncw' }),
- ...ids.map(id => Factory.build('topic.v2', { id })),
- ...deletedIds.map(id => Factory.build('topic.v2', { id, enabled_in_context: false }, { topicPrefix: 'archived ' })),
- ];
-
- axiosMock
- .onGet(topicsv2ApiUrl)
- .reply(200, data);
- axiosMock.onGet(getBlocksAPIURL())
- .reply(200, getBlocksAPIResponse(true));
- axiosMock.onAny().networkError();
- await executeThunk(fetchCourseBlocks(courseId, 'abc123'), store.dispatch, store.getState);
- await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
- const state = store.getState();
- categories = selectSequences(state);
- globalTopics = selectNonCoursewareTopics(state);
- inContextTopics = selectCoursewareTopics(state);
- }
- }
-
- it('displays non-courseware topics', async () => {
- await setupMockResponse();
- renderComponent();
-
- globalTopics.forEach(topic => {
- expect(screen.queryByText(topic.name)).toBeInTheDocument();
- });
+ store = initializeStore({
+ config: { provider: 'legacy' },
+ blocks: {
+ topics: {},
+ },
});
+ Factory.resetAll();
+ axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+ lastLocation = undefined;
+ });
- it('displays non-courseware outside of a topic group', async () => {
- await setupMockResponse();
- renderComponent();
-
- categories.forEach(category => {
- // For the new provider categories are blocks so use the display name
- // otherwise use the category itself which is a string
- expect(screen.queryByText(category.displayName || category)).toBeInTheDocument();
+ async function setupMockResponse() {
+ axiosMock
+ .onGet(topicsApiUrl)
+ .reply(200, {
+ courseware_topics: Factory.buildList('category', 2),
+ non_courseware_topics: Factory.buildList('topic', 3, {}, { topicPrefix: 'ncw' }),
});
+ await executeThunk(fetchCourseTopics(courseId), store.dispatch, store.getState);
+ const state = store.getState();
+ categories = state.topics.categoryIds;
+ globalTopics = selectNonCoursewareTopics(state);
+ inContextTopics = selectCoursewareTopics(state);
+ }
- const topicGroups = screen.queryAllByTestId('topic-group');
- // For the new provider there should be a section for archived topics
- expect(topicGroups).toHaveLength(
- provider === DiscussionProvider.LEGACY
- ? categories.length
- : categories.length + 1,
- );
- });
+ it('displays non-courseware topics', async () => {
+ await setupMockResponse();
+ renderComponent();
- if (provider === DiscussionProvider.OPEN_EDX) {
- it('displays archived topics', async () => {
- await setupMockResponse();
- renderComponent();
- const archivedTopicGroup = screen.queryAllByTestId('topic-group').pop();
- expect(archivedTopicGroup).toHaveTextContent(/archived/i);
- const archivedTopicLinks = within(archivedTopicGroup).queryAllByRole('option');
- expect(archivedTopicLinks).toHaveLength(2);
- });
- }
-
- it('displays courseware topics', async () => {
- await setupMockResponse();
- renderComponent();
-
- inContextTopics.forEach(topic => {
- expect(screen.queryByText(topic.name)).toBeInTheDocument();
- });
- });
-
- it('clicking on courseware topic (category) takes to category page', async () => {
- await setupMockResponse();
- renderComponent();
-
- const categoryName = categories[0].displayName || categories[0];
- const categoryPath = provider === 'legacy' ? categoryName : categories[0].id;
- const topic = await screen.findByText(categoryName);
- fireEvent.click(topic);
- expect(lastLocation.pathname.endsWith(`/category/${categoryPath}`)).toBeTruthy();
+ globalTopics.forEach(topic => {
+ expect(screen.queryByText(topic.name)).toBeInTheDocument();
});
});
+
+ it('displays non-courseware outside of a topic group', async () => {
+ await setupMockResponse();
+ renderComponent();
+
+ categories.forEach(category => {
+ // For the new provider categories are blocks so use the display name
+ // otherwise use the category itself which is a string
+ expect(screen.queryByText(category.displayName || category)).toBeInTheDocument();
+ });
+
+ const topicGroups = screen.queryAllByTestId('topic-group');
+ // For the new provider there should be a section for archived topics
+ expect(topicGroups).toHaveLength(categories.length);
+ });
+
+ it('displays courseware topics', async () => {
+ await setupMockResponse();
+ renderComponent();
+
+ inContextTopics.forEach(topic => {
+ expect(screen.queryByText(topic.name)).toBeInTheDocument();
+ });
+ });
+
+ it('clicking on courseware topic (category) takes to category page', async () => {
+ await setupMockResponse();
+ renderComponent();
+
+ const categoryName = categories[0].displayName || categories[0];
+ const categoryPath = categoryName;
+ const topic = await screen.findByText(categoryName);
+ fireEvent.click(topic);
+ expect(lastLocation.pathname.endsWith(`/category/${categoryPath}`)).toBeTruthy();
+ });
});
diff --git a/src/discussions/topics/data/api.js b/src/discussions/topics/data/api.js
index ec0fecbf..b297e2d9 100644
--- a/src/discussions/topics/data/api.js
+++ b/src/discussions/topics/data/api.js
@@ -13,14 +13,3 @@ export async function getCourseTopics(courseId, topicIds) {
.get(url);
return data;
}
-
-export async function getCourseTopicsV2(courseId, topicIds) {
- const url = `${getApiBaseUrl()}/api/discussion/v2/course_topics/${courseId}`;
- const params = {};
- if (topicIds) {
- params.topic_id = topicIds.join(',');
- }
- const { data } = await getAuthenticatedHttpClient()
- .get(url);
- return data;
-}
diff --git a/src/discussions/topics/data/selectors.js b/src/discussions/topics/data/selectors.js
index 7b81ce44..d5c636e5 100644
--- a/src/discussions/topics/data/selectors.js
+++ b/src/discussions/topics/data/selectors.js
@@ -2,10 +2,6 @@
import { createSelector } from '@reduxjs/toolkit';
-import { DiscussionProvider } from '../../../data/constants';
-import { selectSequences } from '../../../data/selectors';
-import { selectDiscussionProvider } from '../../data/selectors';
-
export const selectTopicFilter = state => state.topics.filter.trim()
.toLowerCase();
@@ -19,29 +15,22 @@ export const selectTopicsInCategory = (categoryId) => state => (
export const selectTopics = state => state.topics.topics;
export const selectCoursewareTopics = createSelector(
- selectDiscussionProvider,
selectCategories,
selectTopicCategoryMap,
selectTopics,
- selectSequences,
- (provider, categoryIds, topicsInCategory, topics, sequences) => (
- provider === DiscussionProvider.LEGACY
- ? categoryIds.map(category => ({
- id: category,
- name: category,
- topics: topicsInCategory[category].map(id => topics[id]),
- }))
- : sequences.map(sequence => ({
- id: sequence.id,
- name: sequence.displayName,
- topics: sequence.topics.map(topicId => ({ id: topicId, name: topics[topicId]?.name || 'unnamed' })),
- }))
+ (categoryIds, topicsInCategory, topics) => (
+ categoryIds.map(category => ({
+ id: category,
+ name: category,
+ topics: topicsInCategory[category].map(id => topics[id]),
+ }))
),
);
export const selectNonCoursewareIds = state => state.topics.nonCoursewareIds;
-export const selectNonCoursewareTopics = state => state.topics.nonCoursewareIds.map(id => state.topics.topics[id]);
+export const selectNonCoursewareTopics = state => state.topics.nonCoursewareIds?.map(id => state.topics.topics[id])
+ || [];
export const selectTopic = topicId => state => state.topics.topics[topicId];
diff --git a/src/discussions/topics/data/slices.js b/src/discussions/topics/data/slices.js
index 4456a0c0..1efe0008 100644
--- a/src/discussions/topics/data/slices.js
+++ b/src/discussions/topics/data/slices.js
@@ -11,8 +11,6 @@ const topicsSlice = createSlice({
categoryIds: [],
// List of all non-courseware topics
nonCoursewareIds: [],
- // Topics that have been archived
- archivedIds: [],
// Mapping of all topics in each category
topicsInCategory: {},
// Map of topics ids to topic data
@@ -32,7 +30,6 @@ const topicsSlice = createSlice({
state.topics = payload.topics;
state.nonCoursewareIds = payload.nonCoursewareIds;
state.categoryIds = payload.categoryIds;
- state.archivedIds = payload.archivedIds;
state.topicsInCategory = payload.topicsInCategory;
},
fetchCourseTopicsFailed: (state) => {
diff --git a/src/discussions/topics/data/thunks.js b/src/discussions/topics/data/thunks.js
index d52568c4..212da426 100644
--- a/src/discussions/topics/data/thunks.js
+++ b/src/discussions/topics/data/thunks.js
@@ -2,8 +2,7 @@
import { camelCaseObject } from '@edx/frontend-platform';
import { logError } from '@edx/frontend-platform/logging';
-import { DiscussionProvider } from '../../../data/constants';
-import { getCourseTopics, getCourseTopicsV2 } from './api';
+import { getCourseTopics } from './api';
import { fetchCourseTopicsFailed, fetchCourseTopicsRequest, fetchCourseTopicsSuccess } from './slices';
function normaliseTopics(data) {
@@ -26,34 +25,12 @@ function normaliseTopics(data) {
};
}
-function normaliseTopicsV2(data) {
- const nonCoursewareIds = [];
- const topics = {};
- const archivedIds = [];
- data.forEach(topic => {
- if (!topic.enabledInContext) {
- archivedIds.push(topic.id);
- } else if (topic.usageKey === null) {
- nonCoursewareIds.push(topic.id);
- }
- topics[topic.id] = topic;
- });
- return {
- topics, nonCoursewareIds, archivedIds,
- };
-}
-
export function fetchCourseTopics(courseId) {
- return async (dispatch, getState) => {
+ return async (dispatch) => {
try {
- const { config } = getState();
dispatch(fetchCourseTopicsRequest({ courseId }));
- let data = {};
- if (config.provider === DiscussionProvider.LEGACY) {
- data = normaliseTopics(camelCaseObject(await getCourseTopics(courseId)));
- } else if (config.provider === DiscussionProvider.OPEN_EDX) {
- data = normaliseTopicsV2(camelCaseObject(await getCourseTopicsV2(courseId)));
- }
+
+ const data = normaliseTopics(camelCaseObject(await getCourseTopics(courseId)));
dispatch(fetchCourseTopicsSuccess(data));
} catch (error) {
dispatch(fetchCourseTopicsFailed());
@@ -61,16 +38,3 @@ export function fetchCourseTopics(courseId) {
}
};
}
-
-export function fetchCourseTopicsV2(courseId) {
- return async (dispatch) => {
- try {
- dispatch(fetchCourseTopicsRequest({ courseId }));
- const data = await getCourseTopicsV2(courseId);
- dispatch(fetchCourseTopicsSuccess(normaliseTopicsV2(camelCaseObject(data))));
- } catch (error) {
- dispatch(fetchCourseTopicsFailed());
- logError(error);
- }
- };
-}
diff --git a/src/discussions/topics/utils.js b/src/discussions/topics/utils.js
index 6499cb6e..fcc3f961 100644
--- a/src/discussions/topics/utils.js
+++ b/src/discussions/topics/utils.js
@@ -10,7 +10,7 @@ export default function countFilteredTopics(topicsSelector, provider) {
? item.name.toLowerCase().includes(query)
: true
));
- count += nonCoursewareTopicsList.length;
+ count += nonCoursewareTopicsList?.length;
// Counting legacy topics
if (provider === DiscussionProvider.LEGACY) {
const categories = topicsSelector?.categoryIds;
diff --git a/src/discussions/utils.js b/src/discussions/utils.js
index ff84c9d1..bb1c5587 100644
--- a/src/discussions/utils.js
+++ b/src/discussions/utils.js
@@ -281,3 +281,17 @@ export function inBlackoutDateRange(blackoutDateRanges) {
(blackoutDateRange) => dateInDateRange(now, new Date(blackoutDateRange.start), new Date(blackoutDateRange.end)),
);
}
+
+export function handleKeyDown(event) {
+ const { key } = event;
+ if (key !== 'ArrowDown' && key !== 'ArrowUp') { return; }
+ const option = event.target;
+
+ let selectedOption;
+ if (key === 'ArrowDown') { selectedOption = option.nextElementSibling; }
+ if (key === 'ArrowUp') { selectedOption = option.previousElementSibling; }
+
+ if (selectedOption) {
+ selectedOption.focus();
+ }
+}
diff --git a/src/store.js b/src/store.js
index 6be5e82b..3159f288 100644
--- a/src/store.js
+++ b/src/store.js
@@ -5,6 +5,7 @@ import { blocksReducer } from './data/slices';
import { cohortsReducer } from './discussions/cohorts/data';
import { commentsReducer } from './discussions/comments/data';
import { configReducer } from './discussions/data/slices';
+import { inContextTopicsReducer } from './discussions/in-context-topics/data';
import { learnersReducer } from './discussions/learners/data';
import { threadsReducer } from './discussions/posts/data';
import { topicsReducer } from './discussions/topics/data';
@@ -17,6 +18,7 @@ export function initializeStore(preloadedState = undefined) {
comments: commentsReducer,
cohorts: cohortsReducer,
config: configReducer,
+ inContextTopics: inContextTopicsReducer,
blocks: blocksReducer,
learners: learnersReducer,
courseTabs: courseTabsReducer,