feat: added soft delete functionality

src/components/FilterBar.jsx

@@ -75,6 +75,16 @@ const FilterBar = ({
       label: intl.formatMessage(messages.filterUnresponded),
       value: PostsStatusFilter.UNRESPONDED,
     },
+    {
+      id: 'status-active',
+      label: intl.formatMessage(messages.filterActive),
+      value: PostsStatusFilter.ACTIVE,
+    },
+    {
+      id: 'status-deleted',
+      label: intl.formatMessage(messages.filterDeleted),
+      value: PostsStatusFilter.DELETED,
+    },
     {
       id: 'sort-activity',
       label: intl.formatMessage(messages.lastActivityAt),
@@ -124,7 +134,7 @@ const FilterBar = ({
       <Collapsible.Body className="collapsible-body px-4 pb-3 pt-0">
         <Form>
           <div className="d-flex flex-row py-2 justify-content-between">
-            {filters.map((value) => (
+            {filters.filter(f => !f.hasSeparator).map((value) => (
               <Form.RadioSet
                 key={value.name}
                 name={value.name}
@@ -150,6 +160,38 @@ const FilterBar = ({
               </Form.RadioSet>
             ))}
           </div>
+          {filters.some(f => f.hasSeparator) && (
+            <>
+              <div className="border-bottom my-2" />
+              <div className="d-flex flex-row py-2 justify-content-between">
+                {filters.filter(f => f.hasSeparator).map((value) => (
+                  <Form.RadioSet
+                    key={value.name}
+                    name={value.name}
+                    className="d-flex flex-column list-group list-group-flush"
+                    value={selectedFilters[value.name]}
+                    onChange={handleFilterToggle}
+                  >
+                    {value.filters.map(filterName => {
+                      const element = allFilters.find(obj => obj.id === filterName);
+                      if (element) {
+                        return (
+                          <ActionItem
+                            key={element.id}
+                            id={element.id}
+                            label={element.label}
+                            value={element.value}
+                            selected={selectedFilters[value.name]}
+                          />
+                        );
+                      }
+                      return false;
+                    })}
+                  </Form.RadioSet>
+                ))}
+              </div>
+            </>
+          )}
           {showCohortsFilter && (
             <>
               <div className="border-bottom my-2" />
@@ -199,6 +241,7 @@ FilterBar.propTypes = {
   selectedFilters: PropTypes.shape({
     postType: ThreadType,
     status: PostsStatusFilter,
+    contentStatus: PostsStatusFilter,
     orderBy: ThreadOrdering,
     cohort: PropTypes.string,
   }).isRequired,

src/data/constants.js

@@ -51,6 +51,7 @@ export const ContentActions = {
   COPY_LINK: 'copy_link',
   REPORT: 'abuse_flagged',
   DELETE: 'delete',
+  RESTORE: 'restore',
   FOLLOWING: 'following',
   CHANGE_GROUP: 'group_id',
   MARK_READ: 'read',
@@ -60,6 +61,8 @@ export const ContentActions = {
   VOTE: 'voted',
   DELETE_COURSE_POSTS: 'delete-course-posts',
   DELETE_ORG_POSTS: 'delete-org-posts',
+  RESTORE_COURSE_POSTS: 'restore-course-posts',
+  RESTORE_ORG_POSTS: 'restore-org-posts',
 };
 
 /**
@@ -109,6 +112,8 @@ export const PostsStatusFilter = {
   REPORTED: 'statusReported',
   UNANSWERED: 'statusUnanswered',
   UNRESPONDED: 'statusUnresponded',
+  ACTIVE: 'statusActive',
+  DELETED: 'statusDeleted',
 };
 
 /**
@@ -132,6 +137,7 @@ export const LearnersOrdering = {
   BY_FLAG: 'flagged',
   BY_LAST_ACTIVITY: 'activity',
   BY_RECENCY: 'recency',
+  BY_DELETED: 'deleted',
 };
 
 /**

src/discussions/common/ActionsDropdown.jsx

@@ -78,10 +78,13 @@ const ActionsDropdown = ({
             size="inline"
             onClick={() => {
               close();
-              handleActions(action.action);
+              if (!action.disabled) {
+                handleActions(action.action);
+              }
             }}
             className="d-flex justify-content-start actions-dropdown-item"
             data-testId={action.id}
+            disabled={action.disabled}
           >
             <Icon
               src={action.icon}

src/discussions/common/HoverCard.jsx

@@ -29,6 +29,7 @@ const HoverCard = ({
   voted,
   following,
   endorseIcons,
+  isDeleted,
 }) => {
   const intl = useIntl();
   const { enableInContextSidebar } = useContext(DiscussionContext);
@@ -50,9 +51,9 @@ const HoverCard = ({
               'px-2.5 py-2 border-0 font-style text-gray-700',
               { 'w-100': enableInContextSidebar },
             )}
-            onClick={() => handleResponseCommentButton()}
-            disabled={isClosed}
-            style={{ lineHeight: '20px' }}
+            onClick={() => !isDeleted && handleResponseCommentButton()}
+            disabled={isClosed || isDeleted}
+            style={{ lineHeight: '20px', ...(isDeleted ? { opacity: 0.3, cursor: 'not-allowed' } : {}) }}
           >
             {addResponseCommentButtonMessage}
           </Button>
@@ -72,12 +73,16 @@ const HoverCard = ({
               src={endorseIcons.icon}
               iconAs={Icon}
               onClick={() => {
-                const actionFunction = actionHandlers[endorseIcons.action];
-                actionFunction();
+                if (!isDeleted) {
+                  const actionFunction = actionHandlers[endorseIcons.action];
+                  actionFunction();
+                }
               }}
               className={['endorse', 'unendorse'].includes(endorseIcons.id) ? 'text-dark-500' : 'text-success-500'}
               size="sm"
               alt="Endorse"
+              disabled={isDeleted}
+              style={isDeleted ? { opacity: 0.3, cursor: 'not-allowed' } : {}}
             />
           </OverlayTrigger>
         </div>
@@ -95,11 +100,14 @@ const HoverCard = ({
             iconAs={Icon}
             size="sm"
             alt="Like"
-            disabled={!userHasLikePermission}
+            disabled={!userHasLikePermission || isDeleted}
             iconClassNames="like-icon-dimensions"
+            style={isDeleted ? { opacity: 0.3, cursor: 'not-allowed' } : {}}
             onClick={(e) => {
               e.preventDefault();
-              onLike();
+              if (!isDeleted) {
+                onLike();
+              }
             }}
           />
         </OverlayTrigger>
@@ -119,9 +127,13 @@ const HoverCard = ({
               size="sm"
               alt="Follow"
               iconClassNames="follow-icon-dimensions"
+              disabled={isDeleted}
+              style={isDeleted ? { opacity: 0.3, cursor: 'not-allowed' } : {}}
               onClick={(e) => {
                 e.preventDefault();
-                onFollow();
+                if (!isDeleted) {
+                  onFollow();
+                }
               }}
             />
           </OverlayTrigger>
@@ -165,12 +177,14 @@ HoverCard.propTypes = {
   )),
   onFollow: PropTypes.func,
   following: PropTypes.bool,
+  isDeleted: PropTypes.bool,
 };
 
 HoverCard.defaultProps = {
   onFollow: () => null,
   endorseIcons: null,
   following: undefined,
+  isDeleted: false,
 };
 
 export default React.memo(HoverCard);

src/discussions/data/constants.js

@@ -10,3 +10,8 @@ export const ContentTypes = {
   POST: 'POST',
   COMMENT: 'COMMENT',
 };
+
+export const THREAD_FILTER_TYPES = {
+  ACTIVE: 'active',
+  DELETED: 'deleted',
+};

src/discussions/data/selectors.js

@@ -67,7 +67,7 @@ export function selectAreThreadsFiltered(state) {
   }
 
   return !(
-    filters.status === PostsStatusFilter.ALL
+    (filters.status === PostsStatusFilter.ALL || filters.status === PostsStatusFilter.ACTIVE)
     && filters.postType === ThreadType.ALL
   );
 }