Merge branch 'prevent-engagement' into 'develop'

Prevent engagement on statuses current "in review"

See merge request soapbox-pub/soapbox!1877

app/soapbox/components/__tests__/status.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { render, screen, rootState } from '../../jest/test-helpers';
+import { normalizeStatus, normalizeAccount } from '../../normalizers';
+import Status from '../status';
+
+import type { ReducerStatus } from 'soapbox/reducers/statuses';
+
+const account = normalizeAccount({
+  id: '1',
+  acct: 'alex',
+});
+
+const status = normalizeStatus({
+  id: '1',
+  account,
+  content: 'hello world',
+  contentHtml: 'hello world',
+}) as ReducerStatus;
+
+describe('<Status />', () => {
+  const state = rootState.setIn(['accounts', '1'], account);
+
+  it('renders content', () => {
+    render(<Status status={status} />, undefined, state);
+    screen.getByText(/hello world/i);
+    expect(screen.getByTestId('status')).toHaveTextContent(/hello world/i);
+  });
+
+  describe('the Status Action Bar', () => {
+    it('is rendered', () => {
+      render(<Status status={status} />, undefined, state);
+      expect(screen.getByTestId('status-action-bar')).toBeInTheDocument();
+    });
+
+    it('is not rendered if status is under review', () => {
+      const inReviewStatus = normalizeStatus({ ...status, visibility: 'self' });
+      render(<Status status={inReviewStatus as ReducerStatus} />, undefined, state);
+      expect(screen.queryAllByTestId('status-action-bar')).toHaveLength(0);
+    });
+  });
+});

app/soapbox/components/status-action-bar.tsx

@@ -279,12 +279,12 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   };
 
   const handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
-    const { uri }  = status;
+    const { uri } = status;
     const textarea = document.createElement('textarea');
 
     e.stopPropagation();
 
-    textarea.textContent    = uri;
+    textarea.textContent = uri;
     textarea.style.position = 'fixed';
 
     document.body.appendChild(textarea);
@@ -552,6 +552,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
   return (
     <div
+      data-testid='status-action-bar'
       className={classNames('flex flex-row', {
         'justify-between': space === 'expand',
         'space-x-2': space === 'compact',

app/soapbox/components/status.tsx

@@ -296,7 +296,7 @@ const Status: React.FC<IStatus> = (props) => {
 
   const accountAction = props.accountAction || reblogElement;
 
-  const inReview = actualStatus.visibility === 'self';
+  const isUnderReview = actualStatus.visibility === 'self';
   const isSensitive = actualStatus.hidden;
 
   return (
@@ -354,11 +354,11 @@ const Status: React.FC<IStatus> = (props) => {
             <Stack
               className={
                 classNames('relative', {
-                  'min-h-[220px]': inReview || isSensitive,
+                  'min-h-[220px]': isUnderReview || isSensitive,
                 })
               }
             >
-              {(inReview || isSensitive) && (
+              {(isUnderReview || isSensitive) && (
                 <SensitiveContentOverlay
                   status={status}
                   visible={showMedia}
@@ -392,7 +392,7 @@ const Status: React.FC<IStatus> = (props) => {
               </Stack>
             </Stack>
 
-            {!hideActionBar && (
+            {(!hideActionBar && !isUnderReview) && (
               <div className='pt-4'>
                 <StatusActionBar status={actualStatus} withDismiss={withDismiss} />
               </div>

app/soapbox/features/status/index.tsx

@@ -134,6 +134,7 @@ const Thread: React.FC<IThread> = (props) => {
   const me = useAppSelector(state => state.me);
   const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
   const displayMedia = settings.get('displayMedia') as DisplayMedia;
+  const isUnderReview = status?.visibility === 'self';
 
   const { ancestorsIds, descendantsIds } = useAppSelector(state => {
     let ancestorsIds = ImmutableOrderedSet<string>();
@@ -412,7 +413,7 @@ const Thread: React.FC<IThread> = (props) => {
     if (next && status) {
       dispatch(fetchNext(status.id, next)).then(({ next }) => {
         setNext(next);
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }, 300, { leading: true }), [next, status]);
 
@@ -475,14 +476,18 @@ const Thread: React.FC<IThread> = (props) => {
             onOpenCompareHistoryModal={handleOpenCompareHistoryModal}
           />
 
-          <hr className='mb-2 border-t-2 dark:border-primary-800' />
+          {!isUnderReview ? (
+            <>
+              <hr className='mb-2 border-t-2 dark:border-primary-800' />
 
-          <StatusActionBar
-            status={status}
-            expandable={false}
-            space='expand'
-            withLabels
-          />
+              <StatusActionBar
+                status={status}
+                expandable={false}
+                space='expand'
+                withLabels
+              />
+            </>
+          ) : null}
         </div>
       </HotKeys>