feat: implement discussion mute/unmute feature with user and staff-level controls

Author: naincy128

src/discussions/common/ActionsDropdown.jsx

@@ -47,10 +47,11 @@ const ActionsDropdown = ({
   }, [actionHandlers]);
 
   // Find and remove edit action if in Posting is disabled.
-  useMemo(() => {
+  const filteredActions = useMemo(() => {
     if (!isPostingEnabled) {
-      actions.splice(actions.findIndex(action => action.id === 'edit'), 1);
+      return actions.filter(action => action.id !== 'edit');
     }
+    return actions;
   }, [actions, isPostingEnabled]);
 
   const onClickButton = useCallback((event) => {
@@ -69,7 +70,7 @@ const ActionsDropdown = ({
       className="bg-white shadow d-flex flex-column mt-1"
       data-testid="actions-dropdown-modal-popup"
     >
-      {actions.map(action => (
+      {filteredActions.map(action => (
         <React.Fragment key={action.id}>
           {(action.action === ContentActions.DELETE) && <Dropdown.Divider />}
           <Dropdown.Item

src/discussions/common/ActionsDropdown.test.jsx

@@ -33,6 +33,19 @@ jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
 }));
 
+beforeAll(() => {
+  jest.spyOn(console, 'warn').mockImplementation((msg) => {
+    if (msg?.includes?.('Missing locale')) {
+      return undefined;
+    }
+    return undefined;
+  });
+});
+
+afterAll(() => {
+  jest.restoreAllMocks();
+});
+
 let store;
 let axiosMock;
 const commentsApiUrl = getCommentsApiUrl();
@@ -272,7 +285,27 @@ describe('ActionsDropdown', () => {
   }) => {
     describe(`for ${testFor}`, () => {
       it(`can "${label}" when allowed`, async () => {
+        const updatedCommentOrPost = action === 'mute_user' || action === 'unmute_user'
+          ? { ...commentOrPost, authorLabel: null }
+          : commentOrPost;
+
+        // For unmute tests, add the post author to muted users
+        if (action === 'unmute_user') {
+          store.dispatch({
+            type: 'learner/fetchMutedUsersSuccess',
+            payload: {
+              mutedUsers: [
+                {
+                  username: updatedCommentOrPost.author,
+                  scope: 'personal',
+                },
+              ],
+            },
+          });
+        }
+
         await mockThreadAndComment(commentOrPost);
+
         const mockHandler = jest.fn();
         renderComponent({ ...commentOrPost, actionHandlers: { [action]: mockHandler } });
 

src/discussions/common/MuteModalManager.jsx

@@ -148,8 +148,7 @@ const MuteModalManager = ({
 
   // Staff option selection handler
   const handleStaffOptionSelect = useCallback((option) => {
-    // Close staff options modal first
-    onCloseStaffMuteModal();
+    // Note: StaffMuteOptionsModal handles closing itself when option is selected
 
     // Map option to confirmation modal type
     const modalTypeMap = {
@@ -164,7 +163,7 @@ const MuteModalManager = ({
       setConfirmModalType(modalType);
       openConfirmModal();
     }
-  }, [onCloseStaffMuteModal, openConfirmModal]);
+  }, [openConfirmModal]);
 
   // Staff confirmation handler
   const handleStaffConfirm = useCallback(async () => {
@@ -200,7 +199,7 @@ const MuteModalManager = ({
       <ModalDialog
         title={intl.formatMessage(messages.learnerMuteTitle)}
         isOpen={showLearnerMuteModal}
-        onClose={onCloseLearnerMuteModal}
+        onClose={() => {}}
         hasCloseButton={false}
         zIndex={5000}
       >
@@ -248,7 +247,7 @@ const MuteModalManager = ({
       <ModalDialog
         title={intl.formatMessage(messages.unmuteTitle)}
         isOpen={showUnmuteModal}
-        onClose={onCloseUnmuteModal}
+        onClose={() => {}}
         hasCloseButton={false}
         zIndex={5000}
       >

src/discussions/common/MuteModalManager.test.jsx

@@ -1,22 +1,44 @@
 import React from 'react';
 
-import { fireEvent, render, screen } from '@testing-library/react';
+import {
+  fireEvent, render, screen, waitFor,
+} from '@testing-library/react';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { applyMiddleware, createStore } from 'redux';
+import thunk from 'redux-thunk';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import MuteModalManager from './MuteModalManager';
 
-// Mock the thunks
-const mockMuteUserThunk = jest.fn(() => ({ type: 'MUTE_USER' }));
-const mockUnmuteUserThunk = jest.fn(() => ({ type: 'UNMUTE_USER' }));
-const mockMuteAndReportUserThunk = jest.fn(() => ({ type: 'MUTE_AND_REPORT_USER' }));
+const mockMuteUserThunk = jest.fn();
+const mockUnmuteUserThunk = jest.fn();
+const mockMuteAndReportUserThunk = jest.fn();
+const mockFetchMutedUsersThunk = jest.fn();
 
+// Mock functions should return Redux action creators that return Promises for async behavior
 jest.mock('../data/thunks', () => ({
-  muteUserThunk: mockMuteUserThunk,
-  unmuteUserThunk: mockUnmuteUserThunk,
-  muteAndReportUserThunk: mockMuteAndReportUserThunk,
+  muteUserThunk: (...args) => () => {
+    mockMuteUserThunk(...args);
+    return Promise.resolve({ type: 'MOCK_MUTE_USER', payload: args });
+  },
+  unmuteUserThunk: (...args) => () => {
+    mockUnmuteUserThunk(...args);
+    return Promise.resolve({ type: 'MOCK_UNMUTE_USER', payload: args });
+  },
+  muteAndReportUserThunk: (...args) => () => {
+    mockMuteAndReportUserThunk(...args);
+    return Promise.resolve({ type: 'MOCK_MUTE_AND_REPORT_USER', payload: args });
+  },
+  fetchMutedUsersThunk: (...args) => () => {
+    mockFetchMutedUsersThunk(...args);
+    return Promise.resolve({ type: 'MOCK_FETCH_MUTED_USERS', payload: args });
+  },
+}));
+
+// Mock posts thunks to prevent logError issues
+jest.mock('../posts/data/thunks', () => ({
+  fetchThreads: () => () => Promise.resolve({ type: 'MOCK_FETCH_THREADS' }),
 }));
 
 const mockStore = createStore(() => ({
@@ -26,36 +48,43 @@ const mockStore = createStore(() => ({
     userIsStaff: true,
     userHasModerationPrivileges: true,
   },
-}));
+}), applyMiddleware(thunk));
 
 const mockMessages = {
   learnerMuteTitle: {
     id: 'test.learnerMuteTitle',
     defaultMessage: 'Mute this user?',
+    description: 'Title for learner mute modal',
   },
   learnerMuteDescription: {
     id: 'test.learnerMuteDescription',
     defaultMessage: 'Are you sure you want to mute {username}?',
+    description: 'Description for learner mute modal',
   },
   learnerMuteButton: {
     id: 'test.learnerMuteButton',
     defaultMessage: 'Mute',
+    description: 'Button text for mute action',
   },
   learnerMuteAndReportButton: {
     id: 'test.learnerMuteAndReportButton',
     defaultMessage: 'Mute and report',
+    description: 'Button text for mute and report action',
   },
   unmuteTitle: {
     id: 'test.unmuteTitle',
     defaultMessage: 'Unmute this user?',
+    description: 'Title for unmute modal',
   },
   unmuteDescription: {
     id: 'test.unmuteDescription',
     defaultMessage: 'Are you sure you want to unmute {username}?',
+    description: 'Description for unmute modal',
   },
   unmuteButton: {
     id: 'test.unmuteButton',
     defaultMessage: 'Unmute',
+    description: 'Button text for unmute action',
   },
 };
 
@@ -112,7 +141,7 @@ describe('MuteModalManager', () => {
       expect(mockProps.onCloseLearnerMuteModal).toHaveBeenCalledTimes(1);
     });
 
-    it('handles learner mute action correctly', () => {
+    it('handles learner mute action correctly', async () => {
       renderWithProvider(
         <MuteModalManager
           {...mockProps}
@@ -122,10 +151,13 @@ describe('MuteModalManager', () => {
 
       fireEvent.click(screen.getByRole('button', { name: 'Mute' }));
       expect(mockMuteUserThunk).toHaveBeenCalledWith('testuser', false);
-      expect(mockProps.onCloseLearnerMuteModal).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(mockProps.onCloseLearnerMuteModal).toHaveBeenCalledTimes(1);
+      });
     });
 
-    it('handles learner mute and report action correctly', () => {
+    it('handles learner mute and report action correctly', async () => {
       renderWithProvider(
         <MuteModalManager
           {...mockProps}
@@ -135,7 +167,10 @@ describe('MuteModalManager', () => {
 
       fireEvent.click(screen.getByRole('button', { name: 'Mute and report' }));
       expect(mockMuteAndReportUserThunk).toHaveBeenCalledWith('testuser', 'test-content-id');
-      expect(mockProps.onCloseLearnerMuteModal).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(mockProps.onCloseLearnerMuteModal).toHaveBeenCalledTimes(1);
+      });
     });
   });
 
@@ -200,7 +235,7 @@ describe('MuteModalManager', () => {
       expect(mockProps.onCloseUnmuteModal).toHaveBeenCalledTimes(1);
     });
 
-    it('handles unmute action correctly', () => {
+    it('handles unmute action correctly', async () => {
       renderWithProvider(
         <MuteModalManager
           {...mockProps}
@@ -210,7 +245,10 @@ describe('MuteModalManager', () => {
 
       fireEvent.click(screen.getByRole('button', { name: 'Unmute' }));
       expect(mockUnmuteUserThunk).toHaveBeenCalledWith('testuser', false);
-      expect(mockProps.onCloseUnmuteModal).toHaveBeenCalledTimes(1);
+
+      await waitFor(() => {
+        expect(mockProps.onCloseUnmuteModal).toHaveBeenCalledTimes(1);
+      });
     });
   });
 

src/discussions/common/StaffMuteOptionsModal.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { configureStore } from '@reduxjs/toolkit';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 
 import StaffMuteOptionsModal from './StaffMuteOptionsModal';
@@ -31,9 +32,11 @@ describe('StaffMuteOptionsModal', () => {
   it('renders with all four options', () => {
     const store = createMockStore();
     render(
-      <Provider store={store}>
-        <StaffMuteOptionsModal {...defaultProps} />
-      </Provider>,
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <StaffMuteOptionsModal {...defaultProps} />
+        </Provider>
+      </IntlProvider>,
     );
 
     expect(screen.getByText('Mute user (for me)')).toBeInTheDocument();
@@ -45,9 +48,11 @@ describe('StaffMuteOptionsModal', () => {
   it('disables unmute options when user is not muted', () => {
     const store = createMockStore([], []); // No muted users
     render(
-      <Provider store={store}>
-        <StaffMuteOptionsModal {...defaultProps} />
-      </Provider>,
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <StaffMuteOptionsModal {...defaultProps} />
+        </Provider>
+      </IntlProvider>,
     );
 
     const unmutePersonalBtn = screen.getByText('Unmute user (for me)');
@@ -60,9 +65,11 @@ describe('StaffMuteOptionsModal', () => {
   it('disables mute options when user is already muted', () => {
     const store = createMockStore(['testuser'], []); // User is personally muted
     render(
-      <Provider store={store}>
-        <StaffMuteOptionsModal {...defaultProps} />
-      </Provider>,
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <StaffMuteOptionsModal {...defaultProps} />
+        </Provider>
+      </IntlProvider>,
     );
 
     const mutePersonalBtn = screen.getByText('Mute user (for me)');
@@ -74,12 +81,14 @@ describe('StaffMuteOptionsModal', () => {
     const mockOnSelectOption = jest.fn();
 
     render(
-      <Provider store={store}>
-        <StaffMuteOptionsModal
-          {...defaultProps}
-          onSelectOption={mockOnSelectOption}
-        />
-      </Provider>,
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <StaffMuteOptionsModal
+            {...defaultProps}
+            onSelectOption={mockOnSelectOption}
+          />
+        </Provider>
+      </IntlProvider>,
     );
 
     const mutePersonalBtn = screen.getByText('Mute user (for me)');
@@ -91,9 +100,11 @@ describe('StaffMuteOptionsModal', () => {
   it('does not render when isOpen is false', () => {
     const store = createMockStore();
     render(
-      <Provider store={store}>
-        <StaffMuteOptionsModal {...defaultProps} isOpen={false} />
-      </Provider>,
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <StaffMuteOptionsModal {...defaultProps} isOpen={false} />
+        </Provider>
+      </IntlProvider>,
     );
 
     expect(screen.queryByText('Mute user (for me)')).not.toBeInTheDocument();
@@ -104,12 +115,14 @@ describe('StaffMuteOptionsModal', () => {
     const mockOnClose = jest.fn();
 
     render(
-      <Provider store={store}>
-        <StaffMuteOptionsModal
-          {...defaultProps}
-          onClose={mockOnClose}
-        />
-      </Provider>,
+      <IntlProvider locale="en">
+        <Provider store={store}>
+          <StaffMuteOptionsModal
+            {...defaultProps}
+            onClose={mockOnClose}
+          />
+        </Provider>
+      </IntlProvider>,
     );
 
     fireEvent.keyDown(document, { key: 'Escape' });

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

@@ -177,10 +177,15 @@ describe('InContext Topics View', () => {
 
     coursewareTopics.forEach(async (topic, index) => {
       await waitFor(async () => {
-        const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
+        // Find all icon-size elements in the section group
+        const allIconElements = sectionGroups[index].querySelectorAll('.icon-size');
+        // Find icon-size elements that are inside subsection groups
+        const subsectionIconElements = sectionGroups[index].querySelectorAll('[data-testid="subsection-group"] .icon-size');
+        // The stats should be only those icons that are NOT inside subsection groups
+        const stats = Array.from(allIconElements).filter(icon => !Array.from(subsectionIconElements).includes(icon));
         const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
 
-        expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
+        await within(sectionGroups[index]).findByText(topic.displayName);
         expect(stats).toHaveLength(0);
         expect(subsectionGroups).toHaveLength(2);
       });