feat: added soft delete functionality

Author: Alam-2U

src/components/FilterBar.jsx

@@ -241,6 +241,7 @@ FilterBar.propTypes = {
   selectedFilters: PropTypes.shape({
     postType: ThreadType,
     status: PostsStatusFilter,
+    contentStatus: PostsStatusFilter,
     orderBy: ThreadOrdering,
     cohort: PropTypes.string,
   }).isRequired,

src/discussions/learners/LearnerActionsDropdown.jsx

@@ -1,16 +1,17 @@
 import React, {
   useCallback, useRef, useState,
 } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 import {
   Button, Dropdown, Icon, IconButton, ModalPopup, useToggle,
 } from '@openedx/paragon';
-import { MoreHoriz } from '@openedx/paragon/icons';
+import { ChevronRight, MoreHoriz } from '@openedx/paragon/icons';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { useLearnerActions } from './utils';
+import { useLearnerActionsMenu } from './utils';
 
 const LearnerActionsDropdown = ({
   actionHandlers,
@@ -21,14 +22,16 @@ const LearnerActionsDropdown = ({
   const intl = useIntl();
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = useState(null);
-  const actions = useLearnerActions(userHasBulkDeletePrivileges);
+  const [activeSubmenu, setActiveSubmenu] = useState(null);
+  const menuItems = useLearnerActionsMenu(intl, userHasBulkDeletePrivileges);
 
   const handleActions = useCallback((action) => {
     const actionFunction = actionHandlers[action];
     if (actionFunction) {
       actionFunction();
+      close();
     }
-  }, [actionHandlers]);
+  }, [actionHandlers, close]);
 
   const onClickButton = useCallback((event) => {
     event.preventDefault();
@@ -39,6 +42,7 @@ const LearnerActionsDropdown = ({
   const onCloseModal = useCallback(() => {
     close();
     setTarget(null);
+    setActiveSubmenu(null);
   }, [close]);
 
   return (
@@ -53,41 +57,86 @@ const LearnerActionsDropdown = ({
         iconClassNames={dropDownIconSize ? 'dropdown-icon-dimensions' : ''}
       />
       <div className="actions-dropdown">
-        <ModalPopup
-          onClose={onCloseModal}
-          positionRef={target}
-          isOpen={isOpen}
-          placement="bottom-start"
-        >
-          <div
-            className="bg-white shadow d-flex flex-column mt-1"
-            data-testid="learner-actions-dropdown-modal-popup"
+        {isOpen && ReactDOM.createPortal(
+          <ModalPopup
+            onClose={onCloseModal}
+            positionRef={target}
+            isOpen={isOpen}
+            placement="bottom-start"
+            style={{ zIndex: 9998 }}
           >
-            {actions.map(action => (
-              <React.Fragment key={action.id}>
-                <Dropdown.Item
-                  as={Button}
-                  variant="tertiary"
-                  size="inline"
-                  onClick={() => {
-                    close();
-                    handleActions(action.action);
-                  }}
-                  className="d-flex justify-content-start actions-dropdown-item"
-                  data-testId={action.id}
+            <div
+              className="bg-white shadow d-flex flex-column mt-1"
+              data-testid="learner-actions-dropdown-modal-popup"
+              style={{ position: 'relative', zIndex: 9998 }}
+            >
+              {menuItems.map(item => (
+                <div
+                  key={item.id}
+                  className="position-relative"
+                  onMouseEnter={() => setActiveSubmenu(item.id)}
+                  onMouseLeave={() => setActiveSubmenu(null)}
+                  style={{ zIndex: 2 }}
                 >
-                  <Icon
-                    src={action.icon}
-                    className="icon-size-24"
-                  />
-                  <span className="font-weight-normal ml-2">
-                    {action.label.defaultMessage}
-                  </span>
-                </Dropdown.Item>
-              </React.Fragment>
-            ))}
-          </div>
-        </ModalPopup>
+                  <Dropdown.Item
+                    as={Button}
+                    variant="tertiary"
+                    size="inline"
+                    className="d-flex justify-content-between align-items-center actions-dropdown-item"
+                    data-testid={item.id}
+                  >
+                    <div className="d-flex align-items-center">
+                      <Icon
+                        src={item.icon}
+                        className="icon-size-24"
+                      />
+                      <span className="font-weight-normal ml-2">
+                        {item.label}
+                      </span>
+                    </div>
+                    <Icon
+                      src={ChevronRight}
+                      className="icon-size-16"
+                    />
+                  </Dropdown.Item>
+                  {activeSubmenu === item.id && (
+                    <div
+                      className="bg-white learner-submenu-container"
+                      style={{
+                        position: 'absolute',
+                        left: '100%',
+                        top: 0,
+                        minWidth: 300,
+                        maxWidth: 360,
+                        zIndex: 9999,
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+                        border: '1px solid var(--pgn-color-light-400)',
+                        overflow: 'visible',
+                      }}
+                    >
+                      {item.submenu.map(subItem => (
+                        <Dropdown.Item
+                          key={subItem.id}
+                          as={Button}
+                          variant="tertiary"
+                          size="inline"
+                          onClick={() => handleActions(subItem.action)}
+                          className="d-flex justify-content-start actions-dropdown-item"
+                          data-testid={subItem.id}
+                        >
+                          <span className="font-weight-normal">
+                            {subItem.label}
+                          </span>
+                        </Dropdown.Item>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </ModalPopup>,
+          document.body,
+        )}
       </div>
     </>
   );

src/discussions/learners/LearnerPostsView.jsx

@@ -86,6 +86,8 @@ const LearnerPostsView = () => {
 
   const handleDeletePosts = useCallback(async (courseOrOrg) => {
     await dispatchDelete(deleteUserPosts(courseId, username, courseOrOrg, true));
+    dispatch(clearPostsPages());
+    loadMorePosts();
     hideDeleteConfirmation();
     // Navigate back to learners list after deletion
     navigate({ ...discussionsPath(Routes.LEARNERS.PATH, { courseId })(location) });
@@ -101,10 +103,9 @@ const LearnerPostsView = () => {
 
   const handleRestorePosts = useCallback(async (courseOrOrg) => {
     await dispatch(undeleteUserPosts(courseId, username, courseOrOrg, true));
-    hideRestoreConfirmation();
-    // Clear and reload the posts to reflect restored content
     dispatch(clearPostsPages());
     loadMorePosts();
+    hideRestoreConfirmation();
   }, [courseId, username, hideRestoreConfirmation, dispatch, loadMorePosts]);
 
   const actionHandlers = useMemo(() => ({

src/discussions/learners/data/slices.js

@@ -20,7 +20,8 @@ const learnersSlice = createSlice({
     sortedBy: LearnersOrdering.BY_LAST_ACTIVITY,
     postFilter: {
       postType: ThreadType.ALL,
-      status: PostsStatusFilter.ACTIVE,
+      status: PostsStatusFilter.ALL, // secondary status (Unread, etc.)
+      contentStatus: PostsStatusFilter.ACTIVE, // main content status (Active/Deleted)
       orderBy: ThreadOrdering.BY_LAST_ACTIVITY,
       cohort: '',
     },
@@ -85,7 +86,10 @@ const learnersSlice = createSlice({
       {
         ...state,
         pages: [],
-        postFilter: payload,
+        postFilter: {
+          ...state.postFilter,
+          ...payload,
+        },
       }
     ),
     deleteUserPostsRequest: (state) => (

src/discussions/learners/data/thunks.js

@@ -94,6 +94,14 @@ export function fetchUserPosts(courseId, {
     author,
     countFlagged,
   };
+  // Main content status: Active/Deleted
+  if (filters.contentStatus === PostsStatusFilter.DELETED) {
+    options.showDeleted = true;
+  } else if (filters.contentStatus === PostsStatusFilter.ACTIVE) {
+    options.showDeleted = false;
+  }
+
+  // Secondary status filters (independent)
   if (filters.status === PostsStatusFilter.UNREAD) {
     options.status = 'unread';
   }
@@ -106,6 +114,7 @@ export function fetchUserPosts(courseId, {
   if (filters.status === PostsStatusFilter.UNRESPONDED) {
     options.status = 'unresponded';
   }
+
   if (filters.postType !== ThreadType.ALL) {
     options.threadType = filters.postType;
   }
@@ -115,9 +124,6 @@ export function fetchUserPosts(courseId, {
   if (filters.cohort) {
     options.cohort = filters.cohort;
   }
-  if (filters.status === PostsStatusFilter.DELETED) {
-    options.showDeleted = true;
-  }
   return async (dispatch) => {
     try {
       dispatch(fetchLearnerThreadsRequest({ courseId, author }));

src/discussions/learners/learner-post-filter-bar/LearnerPostFilterBar.jsx

@@ -7,18 +7,18 @@ import { useParams } from 'react-router-dom';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 
 import FilterBar from '../../../components/FilterBar';
-import { PostsStatusFilter, ThreadType } from '../../../data/constants';
+// import { PostsStatusFilter, ThreadType } from '../../../data/constants';
 import selectCourseCohorts from '../../cohorts/data/selectors';
 import fetchCourseCohorts from '../../cohorts/data/thunks';
-import { selectUserHasModerationPrivileges, selectUserIsGroupTa, selectUserIsStaff } from '../../data/selectors';
+import { selectUserHasModerationPrivileges, selectUserIsGroupTa } from '../../data/selectors';
 import { setPostFilter } from '../data/slices';
 
 const LearnerPostFilterBar = () => {
   const dispatch = useDispatch();
   const { courseId } = useParams();
   const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges);
   const userIsGroupTa = useSelector(selectUserIsGroupTa);
-  const userIsStaff = useSelector(selectUserIsStaff);
+  // const userIsStaff = useSelector(selectUserIsStaff);
   const cohorts = useSelector(selectCourseCohorts);
   const postFilter = useSelector(state => state.learners.postFilter);
 
@@ -28,24 +28,23 @@ const LearnerPostFilterBar = () => {
       filters: ['type-all', 'type-discussions', 'type-questions'],
     },
     {
-      name: 'status',
+      name: 'status', // secondary status
       filters: ['status-any', 'status-unread', 'status-unanswered', 'status-unresponded'],
     },
     {
       name: 'orderBy',
       filters: ['sort-activity', 'sort-comments', 'sort-votes'],
     },
+    {
+      name: 'contentStatus', // main content status
+      filters: ['status-active', 'status-deleted'],
+      hasSeparator: true,
+    },
   ];
 
-  if (userHasModerationPrivileges || userIsGroupTa || userIsStaff) {
-    // Add reported filter to the regular status filters
+  if (userHasModerationPrivileges || userIsGroupTa) {
+    // Add reported filter only for group TA and moderators
     filtersToShow[1].filters.splice(2, 0, 'status-reported');
-    // Add Active/Deleted as a separate filter section at the bottom with a separator
-    filtersToShow.push({
-      name: 'status',
-      filters: ['status-active', 'status-deleted'],
-      hasSeparator: true, // Add visual separator before this section
-    });
   }
 
   const handleFilterChange = (event) => {
@@ -59,40 +58,27 @@ const LearnerPostFilterBar = () => {
     };
     if (name === 'postType') {
       if (postFilter.postType !== value) {
-        dispatch(setPostFilter({
-          ...postFilter,
-          postType: value,
-        }));
+        dispatch(setPostFilter({ postType: value }));
         filterContentEventProperties.threadTypeFilter = value;
       }
     } else if (name === 'status') {
       if (postFilter.status !== value) {
-        const postType = (value === PostsStatusFilter.UNANSWERED && ThreadType.QUESTION)
-        || (value === PostsStatusFilter.UNRESPONDED && ThreadType.DISCUSSION)
-        || postFilter.postType;
-
-        dispatch(setPostFilter({
-          ...postFilter,
-          postType,
-          status: value,
-        }));
-
+        dispatch(setPostFilter({ status: value }));
         filterContentEventProperties.statusFilter = value;
       }
+    } else if (name === 'contentStatus') {
+      if (postFilter.contentStatus !== value) {
+        dispatch(setPostFilter({ contentStatus: value }));
+        filterContentEventProperties.contentStatusFilter = value;
+      }
     } else if (name === 'orderBy') {
       if (postFilter.orderBy !== value) {
-        dispatch(setPostFilter({
-          ...postFilter,
-          orderBy: value,
-        }));
+        dispatch(setPostFilter({ orderBy: value }));
         filterContentEventProperties.sortFilter = value;
       }
     } else if (name === 'cohort') {
       if (postFilter.cohort !== value) {
-        dispatch(setPostFilter({
-          ...postFilter,
-          cohort: value,
-        }));
+        dispatch(setPostFilter({ cohort: value }));
         filterContentEventProperties.cohortFilter = value;
       }
     }

src/discussions/learners/messages.js

@@ -68,6 +68,26 @@ const messages = defineMessages({
     defaultMessage: 'Deleted activity',
     description: 'Tooltip text for deleted activity icon',
   },
+  deleteActivity: {
+    id: 'discussions.learner.actions.deleteActivity',
+    defaultMessage: 'Delete activity',
+    description: 'Main menu option for deleting user activity',
+  },
+  restoreActivity: {
+    id: 'discussions.learner.actions.restoreActivity',
+    defaultMessage: 'Restore activity',
+    description: 'Main menu option for restoring user activity',
+  },
+  withinCourse: {
+    id: 'discussions.learner.actions.withinCourse',
+    defaultMessage: 'Within course',
+    description: 'Submenu option for actions within the current course',
+  },
+  withinOrg: {
+    id: 'discussions.learner.actions.withinOrg',
+    defaultMessage: 'Within organization',
+    description: 'Submenu option for actions within the organization',
+  },
   deleteCoursePosts: {
     id: 'discussions.learner.actions.deleteCoursePosts',
     defaultMessage: 'Delete user posts within this course',