Merge pull request #361 from openedx/INF-628

fix: add a post/response/comment during active blackout dates fixed for all roles

src/discussions/comments/comment/Comment.jsx

@@ -11,9 +11,8 @@ import HTMLLoader from '../../../components/HTMLLoader';
 import { ContentActions } from '../../../data/constants';
 import { AlertBanner, Confirmation, EndorsedAlertBanner } from '../../common';
 import { DiscussionContext } from '../../common/context';
-import { selectBlackoutDate } from '../../data/selectors';
+import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
 import { fetchThread } from '../../posts/data/thunks';
-import { inBlackoutDateRange } from '../../utils';
 import CommentIcons from '../comment-icons/CommentIcons';
 import { selectCommentCurrentPage, selectCommentHasMorePages, selectCommentResponses } from '../data/selectors';
 import { editComment, fetchCommentResponses, removeComment } from '../data/thunks';
@@ -40,7 +39,7 @@ function Comment({
   const [isReplying, setReplying] = useState(false);
   const hasMorePages = useSelector(selectCommentHasMorePages(comment.id));
   const currentPage = useSelector(selectCommentCurrentPage(comment.id));
-  const blackoutDateRange = useSelector(selectBlackoutDate);
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
   const {
     courseId,
   } = useContext(DiscussionContext);
@@ -158,18 +157,18 @@ function Comment({
               />
             ) : (
               <>
-                {(!isClosedPost && !inBlackoutDateRange(blackoutDateRange))
+                {!isClosedPost && userCanAddThreadInBlackoutDate
                   && (
-                    <Button
-                      className="d-flex flex-grow mt-3 py-2 font-size-14"
-                      variant="outline-primary"
-                      style={{
-                        lineHeight: '20px',
-                      }}
-                      onClick={() => setReplying(true)}
-                    >
-                      {intl.formatMessage(messages.addComment)}
-                    </Button>
+                  <Button
+                    className="d-flex flex-grow mt-3 py-2 font-size-14"
+                    variant="outline-primary"
+                    style={{
+                      lineHeight: '20px',
+                    }}
+                    onClick={() => setReplying(true)}
+                  >
+                    {intl.formatMessage(messages.addComment)}
+                  </Button>
                   )}
               </>
 

src/discussions/comments/comment/ResponseEditor.jsx

@@ -2,14 +2,12 @@ import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import classNames from 'classnames';
-import { useSelector } from 'react-redux';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
 import { DiscussionContext } from '../../common/context';
-import { selectBlackoutDate } from '../../data/selectors';
-import { inBlackoutDateRange } from '../../utils';
+import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
 import messages from '../messages';
 import CommentEditor from './CommentEditor';
 
@@ -20,13 +18,12 @@ function ResponseEditor({
 }) {
   const { inContext } = useContext(DiscussionContext);
   const [addingResponse, setAddingResponse] = useState(false);
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
 
   useEffect(() => {
     setAddingResponse(false);
   }, [postId]);
 
-  const blackoutDateRange = useSelector(selectBlackoutDate);
-
   return addingResponse
     ? (
       <div className={classNames({ 'bg-white p-4 mb-4 rounded': addWrappingDiv })}>
@@ -37,7 +34,7 @@ function ResponseEditor({
         />
       </div>
     )
-    : !inBlackoutDateRange(blackoutDateRange) && (
+    : userCanAddThreadInBlackoutDate && (
       <div className={classNames({ 'mb-4': addWrappingDiv }, 'actions d-flex')}>
         <Button
           variant="primary"

src/discussions/data/hooks.js

@@ -17,13 +17,18 @@ import { DiscussionContext } from '../common/context';
 import { clearRedirect } from '../posts/data';
 import { selectTopics } from '../topics/data/selectors';
 import { fetchCourseTopics } from '../topics/data/thunks';
-import { discussionsPath } from '../utils';
+import { discussionsPath, inBlackoutDateRange } from '../utils';
 import {
-  selectAreThreadsFiltered, selectLearnersTabEnabled,
+  selectAreThreadsFiltered,
+  selectBlackoutDate,
+  selectIsCourseAdmin,
+  selectIsCourseStaff,
+  selectLearnersTabEnabled,
   selectModerationSettings,
   selectPostThreadCount,
   selectUserHasModerationPrivileges,
   selectUserIsGroupTa,
+  selectUserIsStaff,
 } from './selectors';
 import { fetchCourseConfig } from './thunks';
 
@@ -174,3 +179,16 @@ export const useCurrentDiscussionTopic = () => {
   }
   return null;
 };
+
+export const useUserCanAddThreadInBlackoutDate = () => {
+  const blackoutDateRange = useSelector(selectBlackoutDate);
+  const isUserAdmin = useSelector(selectUserIsStaff);
+  const userHasModerationPrivilages = useSelector(selectUserHasModerationPrivileges);
+  const isUserGroupTA = useSelector(selectUserIsGroupTa);
+  const isCourseAdmin = useSelector(selectIsCourseAdmin);
+  const isCourseStaff = useSelector(selectIsCourseStaff);
+  const isInBlackoutDateRange = inBlackoutDateRange(blackoutDateRange);
+
+  return (!(isInBlackoutDateRange)
+          || (isUserAdmin || userHasModerationPrivilages || isUserGroupTA || isCourseAdmin || isCourseStaff));
+};

src/discussions/data/hooks.test.jsx

@@ -1,15 +1,32 @@
 import { render } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
 import { IntlProvider } from 'react-intl';
+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 { initializeStore } from '../../store';
+import { executeThunk } from '../../test-utils';
 import { DiscussionContext } from '../common/context';
-import { useCurrentDiscussionTopic } from './hooks';
+import { courseConfigApiUrl } from './api';
+import { useCurrentDiscussionTopic, useUserCanAddThreadInBlackoutDate } from './hooks';
+import { fetchCourseConfig } from './thunks';
 
+const courseId = 'course-v1:edX+TestX+Test_Course';
 let store;
-initializeMockApp();
+let axiosMock;
+
+const generateApiResponse = (blackouts = [], isCourseAdmin = false) => ({
+  blackouts,
+  hasModerationPrivileges: false,
+  isGroupTa: false,
+  isCourseAdmin,
+  isCourseStaff: false,
+  isUserAdmin: false,
+});
+
 describe('Hooks', () => {
   describe('useCurrentDiscussionTopic', () => {
     function ComponentWithHook() {
@@ -39,6 +56,7 @@ describe('Hooks', () => {
     }
 
     beforeEach(() => {
+      initializeMockApp();
       store = initializeStore({
         blocks: {
           blocks: {
@@ -82,4 +100,75 @@ describe('Hooks', () => {
       expect(queryByText('null')).toBeInTheDocument();
     });
   });
+
+  describe('useUserCanAddThreadInBlackoutDate', () => {
+    function ComponentWithHook() {
+      const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
+      return (
+        <div>
+          {String(userCanAddThreadInBlackoutDate)}
+        </div>
+      );
+    }
+
+    function renderComponent() {
+      return render(
+        <IntlProvider locale="en">
+          <AppProvider store={store}>
+            <ComponentWithHook />
+          </AppProvider>
+        </IntlProvider>,
+      );
+    }
+    describe('User can add Thread in blackoutdates ', () => {
+      beforeEach(() => {
+        initializeMockApp({
+          authenticatedUser: {
+            userId: 3,
+            username: 'abc123',
+            administrator: true,
+            roles: [],
+          },
+        });
+        axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+        Factory.resetAll();
+        store = initializeStore();
+      });
+
+      test('when blackoutdates are not active and Role is Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([], false));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are not active and Role is not Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([], true));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are active and Role is Learner return false', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([{
+            start: '2022-11-25T00:00:00Z',
+            end: '2050-11-25T23:59:00Z',
+          }], false));
+        await executeThunk(fetchCourseConfig(courseId), store.dispatch, store.getState);
+        const { queryByText } = renderComponent();
+        expect(queryByText('false')).toBeInTheDocument();
+      });
+
+      test('when blackoutdates are active and Role is not Learner return true', async () => {
+        axiosMock.onGet(`${courseConfigApiUrl}${courseId}/`)
+          .reply(200, generateApiResponse([
+            { start: '2022-11-25T00:00:00Z', end: '2050-11-25T23:59:00Z' }], true));
+        const { queryByText } = renderComponent();
+        expect(queryByText('true')).toBeInTheDocument();
+      });
+    });
+  });
 });

src/discussions/data/selectors.js

@@ -24,6 +24,10 @@ export const selectBlackoutDate = state => state.config.blackouts;
 
 export const selectGroupAtSubsection = state => state.config.groupAtSubsection;
 
+export const selectIsCourseAdmin = state => state.config.isCourseAdmin;
+
+export const selectIsCourseStaff = state => state.config.isCourseStaff;
+
 export const selectModerationSettings = state => ({
   postCloseReasons: state.config.postCloseReasons,
   editReasons: state.config.editReasons,

src/discussions/data/slices.js

@@ -14,6 +14,8 @@ const configSlice = createSlice({
     groupAtSubsection: false,
     hasModerationPrivileges: false,
     isGroupTa: false,
+    isCourseAdmin: false,
+    isCourseStaff: false,
     isUserAdmin: false,
     learnersTabEnabled: false,
     settings: {

src/discussions/posts/post-actions-bar/PostActionsBar.jsx

@@ -12,8 +12,9 @@ import { Close } from '@edx/paragon/icons';
 
 import Search from '../../../components/Search';
 import { RequestStatus } from '../../../data/constants';
-import { selectBlackoutDate, selectconfigLoadingStatus } from '../../data/selectors';
-import { inBlackoutDateRange, postMessageToParent } from '../../utils';
+import { useUserCanAddThreadInBlackoutDate } from '../../data/hooks';
+import { selectconfigLoadingStatus } from '../../data/selectors';
+import { postMessageToParent } from '../../utils';
 import { showPostEditor } from '../data';
 import messages from './messages';
 
@@ -25,7 +26,7 @@ function PostActionsBar({
 }) {
   const dispatch = useDispatch();
   const loadingStatus = useSelector(selectconfigLoadingStatus);
-  const blackoutDateRange = useSelector(selectBlackoutDate);
+  const userCanAddThreadInBlackoutDate = useUserCanAddThreadInBlackoutDate();
 
   const handleCloseInContext = () => {
     postMessageToParent('learning.events.sidebar.close');
@@ -39,7 +40,8 @@ function PostActionsBar({
           {intl.formatMessage(messages.title)}
         </h4>
       )}
-      {(!inBlackoutDateRange(blackoutDateRange) && loadingStatus === RequestStatus.SUCCESSFUL) && (
+      {loadingStatus === RequestStatus.SUCCESSFUL && userCanAddThreadInBlackoutDate
+      && (
         <>
           {!inContext && <div className="border-right border-light-400 mx-3" />}
           <Button