Merge branch 'improve-moderated-post' into 'develop'

Improve 'In Review' UX

See merge request soapbox-pub/soapbox!1807

app/soapbox/components/media_gallery.js

@@ -7,7 +7,6 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { getSettings } from 'soapbox/actions/settings';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still_image';
@@ -264,14 +263,9 @@ class Item extends React.PureComponent {
 
 }
 
-const mapStateToMediaGalleryProps = state => {
-  const { links } = getSoapboxConfig(state);
-
-  return {
-    displayMedia: getSettings(state).get('displayMedia'),
-    links,
-  };
-};
+const mapStateToMediaGalleryProps = state => ({
+  displayMedia: getSettings(state).get('displayMedia'),
+});
 
 export default @connect(mapStateToMediaGalleryProps)
 @injectIntl
@@ -291,7 +285,6 @@ class MediaGallery extends React.PureComponent {
     onToggleVisibility: PropTypes.func,
     displayMedia: PropTypes.string,
     compact: PropTypes.bool,
-    links: ImmutablePropTypes.map,
   };
 
   static defaultProps = {
@@ -575,7 +568,7 @@ class MediaGallery extends React.PureComponent {
   }
 
   render() {
-    const { media, intl, sensitive, compact, inReview, links } = this.props;
+    const { media, intl, sensitive, compact } = this.props;
     const { visible } = this.state;
     const sizeData = this.getSizeData(media.size);
 
@@ -594,22 +587,14 @@ class MediaGallery extends React.PureComponent {
       />
     ));
 
-    let warning, summary;
+    let warning;
 
     if (sensitive) {
       warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
-    } else if (inReview) {
-      warning = <FormattedMessage id='status.in_review_warning' defaultMessage='Content Under Review' />;
     } else {
       warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
     }
 
-    if (inReview) {
-      summary = <FormattedMessage id='status.in_review_summary.summary' defaultMessage='This post has been sent to Moderation for review and is only visible to you.' />;
-    } else {
-      summary = <FormattedMessage id='status.sensitive_warning.subtitle' defaultMessage='This content may not be suitable for all audiences.' />;
-    }
-
     return (
       <div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.get('style')} ref={this.handleRef}>
         <div
@@ -619,7 +604,7 @@ class MediaGallery extends React.PureComponent {
             'left-1 top-1': visible || compact,
           })}
         >
-          {(sensitive || inReview) && (
+          {sensitive && (
             (visible || compact) ? (
               <Button
                 text={intl.formatMessage(messages.toggle_visible)}
@@ -633,40 +618,15 @@ class MediaGallery extends React.PureComponent {
                 onClick={(e) => e.stopPropagation()}
                 className={
                   classNames({
-                    'cursor-default backdrop-blur-sm rounded-lg w-full h-full border-0 flex items-center justify-center': true,
-                    'bg-gray-800/75': !inReview,
-                    'bg-danger-600/75': inReview,
+                    'bg-gray-800/75 cursor-default backdrop-blur-sm rounded-lg w-full h-full border-0 flex items-center justify-center': true,
                   })
                 }
               >
                 <div className='text-center w-3/4 mx-auto space-y-4'>
                   <div className='space-y-1'>
                     <Text theme='white' weight='semibold'>{warning}</Text>
-                    <Text theme='white' size='sm' weight='medium'>
-                      {summary}
-
-                      {links.get('support') && (
-                        <>
-                          {' '}
-                          <FormattedMessage
-                            id='status.in_review_summary.contact'
-                            defaultMessage='If you believe this is in error please {link}.'
-                            values={{
-                              link: (
-                                <a
-                                  className='underline text-inherit'
-                                  href={links.get('support')}
-                                >
-                                  <FormattedMessage
-                                    id='status.in_review_summary.link'
-                                    defaultMessage='Contact Support'
-                                  />
-                                </a>
-                              ),
-                            }}
-                          />
-                        </>
-                      )}
+                    <Text size='sm'>
+                      <FormattedMessage id='status.sensitive_warning.subtitle' defaultMessage='This content may not be suitable for all audiences.' />
                     </Text>
                   </div>
 

app/soapbox/components/status-media.tsx

@@ -144,7 +144,6 @@ const StatusMedia: React.FC<IStatusMedia> = ({
             <Component
               media={status.media_attachments}
               sensitive={status.sensitive}
-              inReview={status.visibility === 'self'}
               height={285}
               onOpenMedia={openMedia}
               visible={showMedia}

app/soapbox/components/status.tsx

@@ -18,6 +18,7 @@ import StatusActionBar from './status-action-bar';
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusContent from './status_content';
+import ModerationOverlay from './statuses/moderation-overlay';
 import { Card, HStack, Text } from './ui';
 
 import type { Map as ImmutableMap } from 'immutable';
@@ -299,6 +300,8 @@ const Status: React.FC<IStatus> = (props) => {
 
   const accountAction = props.accountAction || reblogElement;
 
+  const inReview = status.visibility === 'self';
+
   return (
     <HotKeys handlers={handlers} data-testid='status'>
       <div
@@ -348,7 +351,15 @@ const Status: React.FC<IStatus> = (props) => {
             />
           </div>
 
-          <div className='status__content-wrapper'>
+          <div
+            className={classNames('status__content-wrapper relative', {
+              'min-h-[220px]': inReview,
+            })}
+          >
+            {inReview ? (
+              <ModerationOverlay />
+            ) : null}
+
             {!group && actualStatus.group && (
               <div className='status__meta'>
                 Posted in <NavLink to={`/groups/${actualStatus.getIn(['group', 'id'])}`}>{String(actualStatus.getIn(['group', 'title']))}</NavLink>
@@ -385,8 +396,8 @@ const Status: React.FC<IStatus> = (props) => {
             )}
           </div>
         </Card>
-      </div>
-    </HotKeys>
+      </div >
+    </HotKeys >
   );
 };
 

app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../../jest/test-helpers';
+import ModerationOverlay from '../moderation-overlay';
+
+describe('<ModerationOverlay />', () => {
+  it('defaults to enabled', () => {
+    render(<ModerationOverlay />);
+    expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Content Under Review');
+  });
+
+  it('can be toggled', () => {
+    render(<ModerationOverlay />);
+
+    fireEvent.click(screen.getByTestId('button'));
+    expect(screen.getByTestId('moderation-overlay')).not.toHaveTextContent('Content Under Review');
+    expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Hide');
+  });
+});

app/soapbox/components/statuses/moderation-overlay.tsx

@@ -0,0 +1,93 @@
+import classNames from 'clsx';
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import { Button, HStack, Text } from '../ui';
+
+const messages = defineMessages({
+  hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide' },
+  title: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
+  subtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' },
+  contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' },
+  show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
+});
+
+const ModerationOverlay = () => {
+  const intl = useIntl();
+
+  const { links } = useSoapboxConfig();
+
+  const [visible, setVisible] = useState<boolean>(false);
+
+  const toggleVisibility = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+
+    setVisible((prevValue) => !prevValue);
+  };
+
+  return (
+    <div
+      className={classNames('absolute z-40', {
+        'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center items-center': !visible,
+        'bg-gray-800/75 inset-0': !visible,
+        'top-1 left-1': visible,
+      })}
+      data-testid='moderation-overlay'
+    >
+      {visible ? (
+        <Button
+          text={intl.formatMessage(messages.hide)}
+          icon={require('@tabler/icons/eye-off.svg')}
+          onClick={toggleVisibility}
+          theme='transparent'
+          size='sm'
+        />
+      ) : (
+        <div className='text-center w-3/4 mx-auto space-y-4'>
+          <div className='space-y-1'>
+            <Text theme='white' weight='semibold'>
+              {intl.formatMessage(messages.title)}
+            </Text>
+
+            <Text theme='white' size='sm' weight='medium'>
+              {intl.formatMessage(messages.subtitle)}
+            </Text>
+          </div>
+
+          <HStack alignItems='center' justifyContent='center' space={2}>
+            {links.get('support') && (
+              <a
+                href={links.get('support')}
+                target='_blank'
+                onClick={(event) => event.stopPropagation()}
+              >
+                <Button
+                  type='button'
+                  theme='outline'
+                  size='sm'
+                  icon={require('@tabler/icons/headset.svg')}
+                >
+                  {intl.formatMessage(messages.contact)}
+                </Button>
+              </a>
+            )}
+
+            <Button
+              type='button'
+              theme='outline'
+              size='sm'
+              icon={require('@tabler/icons/eye.svg')}
+              onClick={toggleVisibility}
+            >
+              {intl.formatMessage(messages.show)}
+            </Button>
+          </HStack>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModerationOverlay;

app/soapbox/features/status/index.tsx

@@ -29,6 +29,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import StatusActionBar from 'soapbox/components/status-action-bar';
+import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import Tombstone from 'soapbox/components/tombstone';
 import { Column, Stack } from 'soapbox/components/ui';
@@ -134,6 +135,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 inReview = status?.visibility === 'self';
 
   const { ancestorsIds, descendantsIds } = useAppSelector(state => {
     let ancestorsIds = ImmutableOrderedSet<string>();
@@ -459,11 +461,19 @@ const Thread: React.FC<IThread> = (props) => {
       <HotKeys handlers={handlers}>
         <div
           ref={statusRef}
-          className='detailed-status__wrapper focusable'
+          className={
+            classNames('detailed-status__wrapper focusable relative', {
+              'min-h-[220px]': inReview,
+            })
+          }
           tabIndex={0}
           // FIXME: no "reblogged by" text is added for the screen reader
           aria-label={textForScreenReader(intl, status)}
         >
+          {inReview ? (
+            <ModerationOverlay />
+          ) : null}
+
           <DetailedStatus
             status={status}
             onOpenVideo={handleOpenVideo}

app/soapbox/utils/status.ts

@@ -11,9 +11,7 @@ export const defaultMediaVisibility = (status: StatusEntity | undefined | null,
     status = status.reblog;
   }
 
-  const isSensitive = status.sensitive || status.visibility === 'self';
-
-  return (displayMedia !== 'hide_all' && !isSensitive || displayMedia === 'show_all');
+  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
 };
 
 /** Grab the first external link from a status. */