Merge branch 'improve-in-review-statuses' into 'develop'

Add dropdown-menu to SensitiveContentOverlay to allow status deletion

See merge request soapbox-pub/soapbox!1963

app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx

@@ -20,6 +20,11 @@ describe('<SensitiveContentOverlay />', () => {
       expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
     });
 
+    it('does not allow user to delete the status', () => {
+      render(<SensitiveContentOverlay status={status} />);
+      expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
+    });
+
     it('can be toggled', () => {
       render(<SensitiveContentOverlay status={status} />);
 
@@ -43,6 +48,11 @@ describe('<SensitiveContentOverlay />', () => {
       expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
     });
 
+    it('allows the user to delete the status', () => {
+      render(<SensitiveContentOverlay status={status} />);
+      expect(screen.getByTestId('icon-button')).toBeInTheDocument();
+    });
+
     it('can be toggled', () => {
       render(<SensitiveContentOverlay status={status} />);
 

app/soapbox/components/statuses/sensitive-content-overlay.tsx

@@ -1,8 +1,11 @@
 import classNames from 'clsx';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
+import { openModal } from 'soapbox/actions/modals';
+import { deleteStatus } from 'soapbox/actions/statuses';
+import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
+import { useAppDispatch, useOwnAccount, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import { Button, HStack, Text } from '../ui';
@@ -10,6 +13,10 @@ import { Button, HStack, Text } from '../ui';
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
+  delete: { id: 'status.delete', defaultMessage: 'Delete' },
+  deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+  deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
+  deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
   hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide content' },
   sensitiveTitle: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
   underReviewTitle: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
@@ -27,15 +34,17 @@ interface ISensitiveContentOverlay {
 
 const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveContentOverlay>((props, ref) => {
   const { onToggleVisibility, status } = props;
-  const isUnderReview = status.visibility === 'self';
-
-  const settings = useSettings();
-  const displayMedia = settings.get('displayMedia') as string;
 
+  const account = useOwnAccount();
+  const dispatch = useAppDispatch();
   const intl = useIntl();
-
+  const settings = useSettings();
   const { links } = useSoapboxConfig();
 
+  const isUnderReview = status.visibility === 'self';
+  const isOwnStatus = status.getIn(['account', 'id']) === account?.id;
+  const displayMedia = settings.get('displayMedia') as string;
+
   const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
   const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -48,6 +57,32 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
     }
   };
 
+  const handleDeleteStatus = () => {
+    const deleteModal = settings.get('deleteModal');
+    if (!deleteModal) {
+      dispatch(deleteStatus(status.id, false));
+    } else {
+      dispatch(openModal('CONFIRM', {
+        icon: require('@tabler/icons/trash.svg'),
+        heading: intl.formatMessage(messages.deleteHeading),
+        message: intl.formatMessage(messages.deleteMessage),
+        confirm: intl.formatMessage(messages.deleteConfirm),
+        onConfirm: () => dispatch(deleteStatus(status.id, false)),
+      }));
+    }
+  };
+
+  const menu = useMemo(() => {
+    return [
+      {
+        text: intl.formatMessage(messages.delete),
+        action: handleDeleteStatus,
+        icon: require('@tabler/icons/trash.svg'),
+        destructive: true,
+      },
+    ];
+  }, []);
+
   useEffect(() => {
     if (typeof props.visible !== 'undefined') {
       setVisible(!!props.visible);
@@ -122,6 +157,13 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
             >
               {intl.formatMessage(messages.show)}
             </Button>
+
+            {(isUnderReview && isOwnStatus) ? (
+              <DropdownMenu
+                items={menu}
+                src={require('@tabler/icons/dots.svg')}
+              />
+            ) : null}
           </HStack>
         </div>
       )}