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

@@ -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,6 +476,8 @@ const Thread: React.FC<IThread> = (props) => {
             onOpenCompareHistoryModal={handleOpenCompareHistoryModal}
           />
 
+          {!isUnderReview ? (
+            <>
               <hr className='mb-2 border-t-2 dark:border-primary-800' />
 
               <StatusActionBar
@@ -483,6 +486,8 @@ const Thread: React.FC<IThread> = (props) => {
                 space='expand'
                 withLabels
               />
+            </>
+          ) : null}
         </div>
       </HotKeys>