feat: added rate limit dialogue (#796)

* feat: added rate limit dialogue

* test: added test cases for post comment

* test: added test for content creation dialogue

* test: added test cases for empty topics

* test: added test cases

* feat: added content rate limit dialogue on post API for post and comment

* fix: fixed editor close issue on submit

* test: addd test cases

Author: sundasnoreen12

src/discussions/common/Confirmation.jsx

@@ -53,6 +53,7 @@ const Confirmation = ({
               <ModalDialog.CloseButton variant={closeButtonVariant}>
                 {closeButtonText || intl.formatMessage(messages.confirmationCancel)}
               </ModalDialog.CloseButton>
+              {confirmAction && (
               <StatefulButton
                 labels={{
                   default: confirmButtonText || intl.formatMessage(messages.confirmationConfirm),
@@ -63,6 +64,7 @@ const Confirmation = ({
                 variant={confirmButtonVariant}
                 onClick={confirmAction}
               />
+              )}
             </ActionRow>
           </ModalDialog.Footer>
         </>

src/discussions/common/withEmailConfirmation.jsx renamed to src/discussions/common/withPostingRestrictions.jsx

@@ -1,21 +1,26 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+  useCallback, useMemo, useState,
+} from 'react';
+import PropTypes from 'prop-types';
 
 import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { RequestStatus } from '../../data/constants';
-import { selectConfirmEmailStatus, selectShouldShowEmailConfirmation } from '../data/selectors';
+import { selectConfirmEmailStatus, selectContentCreationRateLimited, selectShouldShowEmailConfirmation } from '../data/selectors';
+import { hidePostEditor } from '../posts/data';
 import { sendAccountActivationEmail } from '../posts/data/thunks';
 import postMessages from '../posts/post-actions-bar/messages';
 import { Confirmation } from '.';
 
-const withEmailConfirmation = (WrappedComponent) => {
-  const EnhancedComponent = (props) => {
+const withPostingRestrictions = (WrappedComponent) => {
+  const EnhancedComponent = ({ onCloseEditor, ...rest }) => {
     const intl = useIntl();
     const dispatch = useDispatch();
     const [isConfirming, setIsConfirming] = useState(false);
     const shouldShowEmailConfirmation = useSelector(selectShouldShowEmailConfirmation);
+    const contentCreationRateLimited = useSelector(selectContentCreationRateLimited);
     const confirmEmailStatus = useSelector(selectConfirmEmailStatus);
 
     const openConfirmation = useCallback(() => {
@@ -24,7 +29,9 @@ const withEmailConfirmation = (WrappedComponent) => {
 
     const closeConfirmation = useCallback(() => {
       setIsConfirming(false);
-    }, []);
+      dispatch(hidePostEditor());
+      onCloseEditor?.();
+    }, [onCloseEditor]);
 
     const handleConfirmation = useCallback(() => {
       dispatch(sendAccountActivationEmail());
@@ -39,8 +46,9 @@ const withEmailConfirmation = (WrappedComponent) => {
     return (
       <>
         <WrappedComponent
-          {...props}
-          openEmailConfirmation={openConfirmation}
+          {...rest}
+          onCloseEditor={onCloseEditor}
+          openRestrictionDialogue={openConfirmation}
         />
         {shouldShowEmailConfirmation
          && (
@@ -57,11 +65,26 @@ const withEmailConfirmation = (WrappedComponent) => {
            confirmButtonVariant="danger"
          />
          )}
+        {contentCreationRateLimited
+          && (
+          <Confirmation
+            isOpen={isConfirming}
+            title={intl.formatMessage(postMessages.postLimitTitle)}
+            description={intl.formatMessage(postMessages.postLimitDescription)}
+            onClose={closeConfirmation}
+            closeButtonText={intl.formatMessage(postMessages.closeButton)}
+            closeButtonVariant="danger"
+          />
+          )}
       </>
     );
   };
 
+  EnhancedComponent.propTypes = {
+    onCloseEditor: PropTypes.func,
+  };
+
   return EnhancedComponent;
 };
 
-export default withEmailConfirmation;
+export default withPostingRestrictions;

src/discussions/common/withEmailConfirmation.test.jsx renamed to src/discussions/common/withPostingRestrictions.test.jsx

@@ -39,10 +39,14 @@ export const selectCaptchaSettings = state => state.config.captchaSettings;
 
 export const selectIsEmailVerified = state => state.config.isEmailVerified;
 
+export const selectContentCreationRateLimited = state => state.config.contentCreationRateLimited;
+
 export const selectOnlyVerifiedUsersCanPost = state => state.config.onlyVerifiedUsersCanPost;
 
 export const selectConfirmEmailStatus = state => state.threads.confirmEmailStatus;
 
+export const selectPostStatus = state => state.comments.postStatus;
+
 export const selectShouldShowEmailConfirmation = createSelector(
   [selectIsEmailVerified, selectOnlyVerifiedUsersCanPost],
   (isEmailVerified, onlyVerifiedUsersCanPost) => !isEmailVerified && onlyVerifiedUsersCanPost,

src/discussions/data/selectors.js

@@ -31,6 +31,7 @@ const configSlice = createSlice({
     postCloseReasons: [],
     enableInContext: false,
     isEmailVerified: false,
+    contentCreationRateLimited: false,
   },
   reducers: {
     fetchConfigRequest: (state) => (
@@ -56,6 +57,12 @@ const configSlice = createSlice({
         status: RequestStatus.DENIED,
       }
     ),
+    setContentCreationRateLimited: (state) => (
+      {
+        ...state,
+        contentCreationRateLimited: true,
+      }
+    ),
   },
 });
 
@@ -64,6 +71,7 @@ export const {
   fetchConfigFailed,
   fetchConfigRequest,
   fetchConfigSuccess,
+  setContentCreationRateLimited,
 } = configSlice.actions;
 
 export const configReducer = configSlice.reducer;

src/discussions/data/slices.js

@@ -5,10 +5,11 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import withEmailConfirmation from '../common/withEmailConfirmation';
+import withPostingRestrictions from '../common/withPostingRestrictions';
 import { useIsOnTablet } from '../data/hooks';
 import {
   selectAreThreadsFiltered,
+  selectContentCreationRateLimited,
   selectPostThreadCount,
   selectShouldShowEmailConfirmation,
 } from '../data/selectors';
@@ -17,17 +18,22 @@ import { showPostEditor } from '../posts/data';
 import postMessages from '../posts/post-actions-bar/messages';
 import EmptyPage from './EmptyPage';
 
-const EmptyPosts = ({ subTitleMessage, openEmailConfirmation }) => {
+const EmptyPosts = ({ subTitleMessage, openRestrictionDialogue }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const isOnTabletorDesktop = useIsOnTablet();
   const isFiltered = useSelector(selectAreThreadsFiltered);
   const totalThreads = useSelector(selectPostThreadCount);
   const shouldShowEmailConfirmation = useSelector(selectShouldShowEmailConfirmation);
+  const contentCreationRateLimited = useSelector(selectContentCreationRateLimited);
 
   const addPost = useCallback(() => {
-    if (shouldShowEmailConfirmation) { openEmailConfirmation(); } else { dispatch(showPostEditor()); }
-  }, [shouldShowEmailConfirmation, openEmailConfirmation]);
+    if (shouldShowEmailConfirmation || contentCreationRateLimited) {
+      openRestrictionDialogue();
+    } else {
+      dispatch(showPostEditor());
+    }
+  }, [shouldShowEmailConfirmation, openRestrictionDialogue, contentCreationRateLimited]);
 
   let title = messages.noPostSelected;
   let subTitle = null;
@@ -64,7 +70,7 @@ EmptyPosts.propTypes = {
     defaultMessage: propTypes.string,
     description: propTypes.string,
   }).isRequired,
-  openEmailConfirmation: propTypes.func.isRequired,
+  openRestrictionDialogue: propTypes.func.isRequired,
 };
 
-export default React.memo(withEmailConfirmation(EmptyPosts));
+export default React.memo(withPostingRestrictions(EmptyPosts));

src/discussions/empty-posts/EmptyPosts.jsx

@@ -6,26 +6,31 @@ import { useParams } from 'react-router-dom';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import withEmailConfirmation from '../common/withEmailConfirmation';
+import withPostingRestrictions from '../common/withPostingRestrictions';
 import { useIsOnTablet, useTotalTopicThreadCount } from '../data/hooks';
-import { selectShouldShowEmailConfirmation, selectTopicThreadCount } from '../data/selectors';
+import { selectContentCreationRateLimited, selectShouldShowEmailConfirmation, selectTopicThreadCount } from '../data/selectors';
 import messages from '../messages';
 import { showPostEditor } from '../posts/data';
 import postMessages from '../posts/post-actions-bar/messages';
 import EmptyPage from './EmptyPage';
 
-const EmptyTopics = ({ openEmailConfirmation }) => {
+const EmptyTopics = ({ openRestrictionDialogue }) => {
   const intl = useIntl();
   const { topicId } = useParams();
   const dispatch = useDispatch();
   const isOnTabletorDesktop = useIsOnTablet();
   const hasGlobalThreads = useTotalTopicThreadCount() > 0;
   const topicThreadCount = useSelector(selectTopicThreadCount(topicId));
   const shouldShowEmailConfirmation = useSelector(selectShouldShowEmailConfirmation);
+  const contentCreationRateLimited = useSelector(selectContentCreationRateLimited);
 
   const addPost = useCallback(() => {
-    if (shouldShowEmailConfirmation) { openEmailConfirmation(); } else { dispatch(showPostEditor()); }
-  }, [shouldShowEmailConfirmation, openEmailConfirmation]);
+    if (shouldShowEmailConfirmation || contentCreationRateLimited) {
+      openRestrictionDialogue();
+    } else {
+      dispatch(showPostEditor());
+    }
+  }, [shouldShowEmailConfirmation, openRestrictionDialogue, contentCreationRateLimited]);
 
   let title = messages.emptyTitle;
   let fullWidth = false;
@@ -67,7 +72,7 @@ const EmptyTopics = ({ openEmailConfirmation }) => {
 };
 
 EmptyTopics.propTypes = {
-  openEmailConfirmation: propTypes.func.isRequired,
+  openRestrictionDialogue: propTypes.func.isRequired,
 };
 
-export default React.memo(withEmailConfirmation(EmptyTopics));
+export default React.memo(withPostingRestrictions(EmptyTopics));

src/discussions/empty-posts/EmptyTopics.jsx

@@ -13,7 +13,9 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { getApiBaseUrl, Routes as ROUTES } from '../../data/constants';
 import { initializeStore } from '../../store';
 import executeThunk from '../../test-utils';
+import * as selectors from '../data/selectors';
 import messages from '../messages';
+import { showPostEditor } from '../posts/data';
 import fetchCourseTopics from '../topics/data/thunks';
 import EmptyTopics from './EmptyTopics';
 
@@ -85,4 +87,17 @@ describe('EmptyTopics', () => {
 
     expect(screen.queryByText('Send confirmation link')).toBeInTheDocument();
   });
+
+  it('should dispatch showPostEditor when email confirmation is not required and user clicks "Add a post"', async () => {
+    jest.spyOn(selectors, 'selectShouldShowEmailConfirmation').mockReturnValue(false);
+
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    renderComponent(`/${courseId}/topics/ncwtopic-1/`);
+
+    const addPostButton = await screen.findByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(showPostEditor());
+  });
 });

src/discussions/empty-posts/EmptyTopics.test.jsx

@@ -1,6 +1,7 @@
 import {
   fireEvent, render, screen, waitFor, within,
 } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import { act } from 'react-dom/test-utils';
 import { IntlProvider } from 'react-intl';
@@ -18,6 +19,7 @@ import { Routes as ROUTES } from '../../data/constants';
 import { initializeStore } from '../../store';
 import executeThunk from '../../test-utils';
 import DiscussionContext from '../common/context';
+import * as selectors from '../data/selectors';
 import { getThreadsApiUrl } from '../posts/data/api';
 import { fetchThreads } from '../posts/data/thunks';
 import { getCourseTopicsApiUrl } from './data/api';
@@ -302,4 +304,18 @@ describe('InContext Topic Posts View', () => {
       expect(container.querySelectorAll('.discussion-topic')).toHaveLength(3);
     });
   });
+
+  it('should dispatch showPostEditor when email confirmation is not required and user clicks "Add a post"', async () => {
+    jest.spyOn(selectors, 'selectShouldShowEmailConfirmation').mockReturnValue(true);
+    jest.spyOn(selectors, 'selectConfigLoadingStatus').mockReturnValue('successful');
+
+    await setupTopicsMockResponse();
+    await renderComponent();
+
+    const addPostButton = await screen.findByText('Add a post');
+    await userEvent.click(addPostButton);
+
+    const confirmationText = await screen.findByText(/send confirmation link/i);
+    expect(confirmationText).toBeInTheDocument();
+  });
 });

src/discussions/in-context-topics/TopicPostsView.test.jsx

@@ -19,6 +19,8 @@ import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeStore } from '../../store';
 import executeThunk from '../../test-utils';
 import DiscussionContext from '../common/context';
+import * as selectors from '../data/selectors';
+import { showPostEditor } from '../posts';
 import EmptyTopics from './components/EmptyTopics';
 import { getCourseTopicsApiUrl } from './data/api';
 import { selectCoursewareTopics, selectNonCoursewareTopics } from './data/selectors';
@@ -270,4 +272,17 @@ describe('InContext Topics View', () => {
     const confirmationText = await screen.findByText(/send confirmation link/i);
     expect(confirmationText).toBeInTheDocument();
   });
+
+  it('should dispatch showPostEditor when email confirmation is not required and user clicks "Add a post"', async () => {
+    jest.spyOn(selectors, 'selectShouldShowEmailConfirmation').mockReturnValue(false);
+
+    const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+    renderEmptyTopicComponent();
+
+    const addPostButton = await screen.findByRole('button', { name: 'Add a post' });
+    await userEvent.click(addPostButton);
+
+    expect(dispatchSpy).toHaveBeenCalledWith(showPostEditor());
+  });
 });