From 8fc666500aff01f1f540015f8ee05d25d76efdd4 Mon Sep 17 00:00:00 2001 From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com> Date: Tue, 27 Feb 2024 13:01:52 +0500 Subject: [PATCH 1/2] feat: add auto scroll to editor functionality (#671) * feat: add auto scroll to editor functionality * test: mocked scrollIntoView function in ThreadView test cases --- src/discussions/common/ActionsDropdown.jsx | 3 ++- .../post-comments/PostCommentsView.test.jsx | 1 + .../comments/comment/CommentEditor.jsx | 13 +++++++++++-- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/discussions/common/ActionsDropdown.jsx b/src/discussions/common/ActionsDropdown.jsx index 110219d3..1e7e4f8b 100644 --- a/src/discussions/common/ActionsDropdown.jsx +++ b/src/discussions/common/ActionsDropdown.jsx @@ -48,7 +48,8 @@ const ActionsDropdown = ({ } }, [actions, isPostingEnabled]); - const onClickButton = useCallback(() => { + const onClickButton = useCallback((event) => { + event.preventDefault(); setTarget(buttonRef.current); open(); }, [open]); diff --git a/src/discussions/post-comments/PostCommentsView.test.jsx b/src/discussions/post-comments/PostCommentsView.test.jsx index 09028821..53946c8b 100644 --- a/src/discussions/post-comments/PostCommentsView.test.jsx +++ b/src/discussions/post-comments/PostCommentsView.test.jsx @@ -212,6 +212,7 @@ describe('ThreadView', () => { })]; }); axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`).reply(200, { isPostingEnabled: true }); + window.HTMLElement.prototype.scrollIntoView = jest.fn(); await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState); await executeThunk(fetchCourseCohorts(courseId), store.dispatch, store.getState); diff --git a/src/discussions/post-comments/comments/comment/CommentEditor.jsx b/src/discussions/post-comments/comments/comment/CommentEditor.jsx index a2337128..c387147d 100644 --- a/src/discussions/post-comments/comments/comment/CommentEditor.jsx +++ b/src/discussions/post-comments/comments/comment/CommentEditor.jsx @@ -1,4 +1,6 @@ -import React, { useCallback, useContext, useRef } from 'react'; +import React, { + useCallback, useContext, useEffect, useRef, +} from 'react'; import PropTypes from 'prop-types'; import { Formik } from 'formik'; @@ -35,6 +37,7 @@ const CommentEditor = ({ } = comment; const intl = useIntl(); const editorRef = useRef(null); + const formRef = useRef(null); const { authenticatedUser } = useContext(AppContext); const { enableInContextSidebar } = useContext(DiscussionContext); const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges); @@ -88,6 +91,12 @@ const CommentEditor = ({ // the current comment id, or the current comment parent or the curren thread. const editorId = `comment-editor-${id || parentId || threadId}`; + useEffect(() => { + if (formRef.current) { + formRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }, [formRef]); + return ( ( -
+ {canDisplayEditReason && ( Date: Tue, 27 Feb 2024 14:25:40 +0500 Subject: [PATCH 2/2] fix: now content unavailable ui is only for learner (#672) Co-authored-by: Awais Ansari <79941147+awais-ansari@users.noreply.github.com> --- src/components/NavigationBar/data/slice.js | 1 + src/discussions/data/selectors.js | 23 +++++++++++++++++++ .../discussions-home/DiscussionsHome.jsx | 11 +++++---- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/NavigationBar/data/slice.js b/src/components/NavigationBar/data/slice.js index 1d27c0c9..1b73b42e 100644 --- a/src/components/NavigationBar/data/slice.js +++ b/src/components/NavigationBar/data/slice.js @@ -13,6 +13,7 @@ const slice = createSlice({ tabs: [], courseTitle: null, courseNumber: null, + isEnrolled: false, org: null, }, reducers: { diff --git a/src/discussions/data/selectors.js b/src/discussions/data/selectors.js index acdd06d2..b2e6c984 100644 --- a/src/discussions/data/selectors.js +++ b/src/discussions/data/selectors.js @@ -1,3 +1,5 @@ +import { createSelector } from '@reduxjs/toolkit'; + import { PostsStatusFilter, ThreadType } from '../../data/constants'; export const selectAnonymousPostingConfig = state => ({ @@ -60,3 +62,24 @@ export function selectTopicThreadCount(topicId) { export function selectPostThreadCount(state) { return state.threads.totalThreads; } + +export const selectIsUserLearner = createSelector( + selectUserHasModerationPrivileges, + selectUserIsGroupTa, + selectUserIsStaff, + selectIsCourseAdmin, + selectIsCourseStaff, + ( + userHasModerationPrivileges, + userIsGroupTa, + userIsStaff, + userIsCourseAdmin, + userIsCourseStaff, + ) => ( + !userHasModerationPrivileges + && !userIsGroupTa + && !userIsStaff + && !userIsCourseAdmin + && !userIsCourseStaff + ), +); diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx index a884519c..a9bf772c 100644 --- a/src/discussions/discussions-home/DiscussionsHome.jsx +++ b/src/discussions/discussions-home/DiscussionsHome.jsx @@ -12,14 +12,14 @@ import { LearningHeader as Header } from '@edx/frontend-component-header'; import { Spinner } from '../../components'; import selectCourseTabs from '../../components/NavigationBar/data/selectors'; -import { LOADED } from '../../components/NavigationBar/data/slice'; +import { LOADING } from '../../components/NavigationBar/data/slice'; import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/constants'; import DiscussionContext from '../common/context'; import ContentUnavailable from '../course-content-unavailable/CourseContentUnavailable'; import { useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible, } from '../data/hooks'; -import { selectDiscussionProvider, selectEnableInContext } from '../data/selectors'; +import { selectDiscussionProvider, selectEnableInContext, selectIsUserLearner } from '../data/selectors'; import { EmptyLearners, EmptyTopics } from '../empty-posts'; import EmptyPosts from '../empty-posts/EmptyPosts'; import { EmptyTopic as InContextEmptyTopics } from '../in-context-topics/components'; @@ -46,6 +46,7 @@ const DiscussionsHome = () => { const { courseNumber, courseTitle, org, courseStatus, isEnrolled, } = useSelector(selectCourseTabs); + const isUserLearner = useSelector(selectIsUserLearner); const pageParams = useMatch(ROUTES.COMMENTS.PAGE)?.params; const page = pageParams?.page || null; const matchPattern = ALL_ROUTES.find((route) => matchPath({ path: route }, location.pathname)); @@ -84,7 +85,7 @@ const DiscussionsHome = () => { )}
{!enableInContextSidebar && } - {(isEnrolled || enableInContextSidebar) && ( + {(isEnrolled || !isUserLearner || enableInContextSidebar) && (
{ )} - {(courseStatus === LOADED || enableInContextSidebar) && ( + {(courseStatus !== LOADING || enableInContextSidebar) && (
- { isEnrolled === false ? ( + { isEnrolled === false && isUserLearner ? ( )}> {ALL_ROUTES.map((route) => (