bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename to 'SensitiveContentOverlay'

Browse source
This commit is contained in:
Chewbacca 2022-10-20 12:15:37 -04:00
parent a639c789a4
commit 4a573270bd
5 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/soapbox/components/status.tsx
View file

@ -18,7 +18,7 @@ import StatusActionBar from './status-action-bar';
import StatusMedia from './status-media'; import StatusMedia from './status-media';
import StatusReplyMentions from './status-reply-mentions'; import StatusReplyMentions from './status-reply-mentions';
import StatusContent from './status_content'; import StatusContent from './status_content';
import ModerationOverlay from './statuses/moderation-overlay'; import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
import { Card, HStack, Stack, Text } from './ui'; import { Card, HStack, Stack, Text } from './ui';
import type { Map as ImmutableMap } from 'immutable'; import type { Map as ImmutableMap } from 'immutable';
@ -362,7 +362,7 @@ const Status: React.FC<IStatus> = (props) => {
} }
> >
{(inReview || isSensitive) ? ( {(inReview || isSensitive) ? (
<ModerationOverlay <SensitiveContentOverlay
status={status} status={status}
visible={showMedia} visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility} onToggleVisibility={handleToggleMediaVisibility}

20
app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx → app/soapbox/components/statuses/__tests__/sensitive-content-overlay.test.tsx
View file

@ -5,9 +5,9 @@ import { normalizeStatus } from 'soapbox/normalizers';
import { ReducerStatus } from 'soapbox/reducers/statuses'; import { ReducerStatus } from 'soapbox/reducers/statuses';
import { fireEvent, render, rootState, screen } from '../../../jest/test-helpers'; import { fireEvent, render, rootState, screen } from '../../../jest/test-helpers';
import ModerationOverlay from '../moderation-overlay'; import SensitiveContentOverlay from '../sensitive-content-overlay';
describe('<ModerationOverlay />', () => { describe('<SensitiveContentOverlay />', () => {
let status: ReducerStatus; let status: ReducerStatus;
describe('when the Status is marked as sensitive', () => { describe('when the Status is marked as sensitive', () => {
@ -16,12 +16,12 @@ describe('<ModerationOverlay />', () => {
}); });
it('displays the "Sensitive content" warning', () => { it('displays the "Sensitive content" warning', () => {
render(<ModerationOverlay status={status} />); render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content'); expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');
}); });
it('can be toggled', () => { it('can be toggled', () => {
render(<ModerationOverlay status={status} />); render(<SensitiveContentOverlay status={status} />);
fireEvent.click(screen.getByTestId('button')); fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content'); expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content');
@ -39,12 +39,12 @@ describe('<ModerationOverlay />', () => {
}); });
it('displays the "Under review" warning', () => { it('displays the "Under review" warning', () => {
render(<ModerationOverlay status={status} />); render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review'); expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
}); });
it('can be toggled', () => { it('can be toggled', () => {
render(<ModerationOverlay status={status} />); render(<SensitiveContentOverlay status={status} />);
fireEvent.click(screen.getByTestId('button')); fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review'); expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review');
@ -62,12 +62,12 @@ describe('<ModerationOverlay />', () => {
}); });
it('displays the "Under review" warning', () => { it('displays the "Under review" warning', () => {
render(<ModerationOverlay status={status} />); render(<SensitiveContentOverlay status={status} />);
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review'); expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Content Under Review');
}); });
it('can be toggled', () => { it('can be toggled', () => {
render(<ModerationOverlay status={status} />); render(<SensitiveContentOverlay status={status} />);
fireEvent.click(screen.getByTestId('button')); fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review'); expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Content Under Review');
@ -91,13 +91,13 @@ describe('<ModerationOverlay />', () => {
}); });
it('displays the "Under review" warning', () => { it('displays the "Under review" warning', () => {
render(<ModerationOverlay status={status} />, undefined, store); render(<SensitiveContentOverlay status={status} />, undefined, store);
expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content'); expect(screen.getByTestId('sensitive-overlay')).not.toHaveTextContent('Sensitive content');
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide'); expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Hide');
}); });
it('can be toggled', () => { it('can be toggled', () => {
render(<ModerationOverlay status={status} />, undefined, store); render(<SensitiveContentOverlay status={status} />, undefined, store);
fireEvent.click(screen.getByTestId('button')); fireEvent.click(screen.getByTestId('button'));
expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content'); expect(screen.getByTestId('sensitive-overlay')).toHaveTextContent('Sensitive content');

8
app/soapbox/components/statuses/moderation-overlay.tsx → app/soapbox/components/statuses/sensitive-content-overlay.tsx
View file

@ -18,13 +18,13 @@ const messages = defineMessages({
show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' }, show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
}); });
interface IModerationOverlay { interface ISensitiveContentOverlay {
status: StatusEntity status: StatusEntity
onToggleVisibility?(): void onToggleVisibility?(): void
visible?: boolean visible?: boolean
} }
const ModerationOverlay = (props: IModerationOverlay) => { const SensitiveContentOverlay = (props: ISensitiveContentOverlay) => {
const { onToggleVisibility, status } = props; const { onToggleVisibility, status } = props;
const isUnderReview = status.visibility === 'self'; const isUnderReview = status.visibility === 'self';
const isSensitive = status.sensitive; const isSensitive = status.sensitive;
@ -32,8 +32,6 @@ const ModerationOverlay = (props: IModerationOverlay) => {
const settings = useSettings(); const settings = useSettings();
const displayMedia = settings.get('displayMedia') as string | undefined; const displayMedia = settings.get('displayMedia') as string | undefined;
// under review ovverides displaymedia
const intl = useIntl(); const intl = useIntl();
const { links } = useSoapboxConfig(); const { links } = useSoapboxConfig();
@ -130,4 +128,4 @@ const ModerationOverlay = (props: IModerationOverlay) => {
); );
}; };
export default ModerationOverlay; export default SensitiveContentOverlay;

4
app/soapbox/features/status/components/detailed-status.tsx
View file

@ -6,7 +6,7 @@ import Icon from 'soapbox/components/icon';
import StatusMedia from 'soapbox/components/status-media'; import StatusMedia from 'soapbox/components/status-media';
import StatusReplyMentions from 'soapbox/components/status-reply-mentions'; import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
import StatusContent from 'soapbox/components/status_content'; import StatusContent from 'soapbox/components/status_content';
import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay'; import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay';
import { HStack, Stack, Text } from 'soapbox/components/ui'; import { HStack, Stack, Text } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container'; import AccountContainer from 'soapbox/containers/account_container';
import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container'; import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
@ -99,7 +99,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
} }
> >
{(inReview || isSensitive) ? ( {(inReview || isSensitive) ? (
<ModerationOverlay <SensitiveContentOverlay
status={status} status={status}
visible={showMedia} visible={showMedia}
onToggleVisibility={onToggleMediaVisibility} onToggleVisibility={onToggleMediaVisibility}

4
app/soapbox/features/status/index.tsx
View file

@ -29,7 +29,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
import PullToRefresh from 'soapbox/components/pull-to-refresh'; import PullToRefresh from 'soapbox/components/pull-to-refresh';
import ScrollableList from 'soapbox/components/scrollable_list'; import ScrollableList from 'soapbox/components/scrollable_list';
import StatusActionBar from 'soapbox/components/status-action-bar'; import StatusActionBar from 'soapbox/components/status-action-bar';
import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay'; import SensitiveContentOverlay from 'soapbox/components/statuses/sensitive-content-overlay';
import SubNavigation from 'soapbox/components/sub_navigation'; import SubNavigation from 'soapbox/components/sub_navigation';
import Tombstone from 'soapbox/components/tombstone'; import Tombstone from 'soapbox/components/tombstone';
import { Column, Stack } from 'soapbox/components/ui'; import { Column, Stack } from 'soapbox/components/ui';
@ -471,7 +471,7 @@ const Thread: React.FC<IThread> = (props) => {
aria-label={textForScreenReader(intl, status)} aria-label={textForScreenReader(intl, status)}
> >
{inReview ? ( {inReview ? (
<ModerationOverlay <SensitiveContentOverlay
status={status} status={status}
visible={showMedia} visible={showMedia}
onToggleVisibility={handleToggleMediaVisibility} onToggleVisibility={handleToggleMediaVisibility}