Introduce new 'Block request' button in timeline

This commit is contained in:
Scott Nonnenberg 2022-03-15 17:11:28 -07:00 committed by GitHub
parent 536dd0c7b0
commit 703bb8a3a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 1088 additions and 157 deletions

View file

@ -70,6 +70,11 @@ export class Intl extends React.Component<Props> {
public override render() {
const { components, id, i18n, renderText } = this.props;
if (!id) {
log.error('Error: Intl id prop not provided');
return null;
}
const text = i18n(id);
const results: Array<
string | JSX.Element | Array<string | JSX.Element> | null

View file

@ -3,10 +3,12 @@
/* eslint-disable-next-line max-classes-per-file */
import * as React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { setupI18n } from '../../util/setupI18n';
import { UUID } from '../../types/UUID';
import type { UUIDStringType } from '../../types/UUID';
import enMessages from '../../../_locales/en/messages.json';
import type { GroupV2ChangeType } from '../../groups';
import { SignalService as Proto } from '../../protobuf';
@ -34,9 +36,29 @@ const renderContact: SmartContactRendererType<FullJSXType> = (
</React.Fragment>
);
const renderChange = (change: GroupV2ChangeType, groupName?: string) => (
const renderChange = (
change: GroupV2ChangeType,
{
groupBannedMemberships,
groupMemberships,
groupName,
areWeAdmin = true,
}: {
groupMemberships?: Array<{
uuid: UUIDStringType;
isAdmin: boolean;
}>;
groupBannedMemberships?: Array<UUIDStringType>;
groupName?: string;
areWeAdmin?: boolean;
} = {}
) => (
<GroupV2Change
areWeAdmin={areWeAdmin ?? true}
blockGroupLinkRequests={action('blockGroupLinkRequests')}
change={change}
groupBannedMemberships={groupBannedMemberships}
groupMemberships={groupMemberships}
groupName={groupName}
i18n={i18n}
ourUuid={OUR_ID}
@ -1176,15 +1198,22 @@ storiesOf('Components/Conversation/GroupV2Change', module)
},
],
})}
{renderChange({
from: CONTACT_A,
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
})}
Should show button:
{renderChange(
{
from: CONTACT_A,
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
},
{
groupMemberships: [{ uuid: CONTACT_C, isAdmin: false }],
groupBannedMemberships: [CONTACT_B],
}
)}
{renderChange({
from: ADMIN_A,
details: [
@ -1194,14 +1223,62 @@ storiesOf('Components/Conversation/GroupV2Change', module)
},
],
})}
{renderChange({
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
})}
Should show button:
{renderChange(
{
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
},
{
groupMemberships: [{ uuid: CONTACT_C, isAdmin: false }],
groupBannedMemberships: [CONTACT_B],
}
)}
Would show button, but we&apos;re not admin:
{renderChange(
{
from: CONTACT_A,
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
},
{ areWeAdmin: false, groupName: 'Group 1' }
)}
Would show button, but user is a group member:
{renderChange(
{
from: CONTACT_A,
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
},
{ groupMemberships: [{ uuid: CONTACT_A, isAdmin: false }] }
)}
Would show button, but user is already banned:
{renderChange(
{
from: CONTACT_A,
details: [
{
type: 'admin-approval-remove-one',
uuid: CONTACT_A,
},
],
},
{ groupBannedMemberships: [CONTACT_A] }
)}
</>
);
})
@ -1367,7 +1444,7 @@ storiesOf('Components/Conversation/GroupV2Change', module)
},
],
},
'We do hikes 🌲'
{ groupName: 'We do hikes 🌲' }
)}
{renderChange(
{
@ -1380,7 +1457,7 @@ storiesOf('Components/Conversation/GroupV2Change', module)
},
],
},
'We do hikes 🌲'
{ groupName: 'We do hikes 🌲' }
)}
{renderChange(
{
@ -1392,7 +1469,7 @@ storiesOf('Components/Conversation/GroupV2Change', module)
},
],
},
'We do hikes 🌲'
{ groupName: 'We do hikes 🌲' }
)}
</>
);

View file

@ -1,10 +1,11 @@
// Copyright 2020-2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactElement } from 'react';
import type { ReactElement, ReactNode } from 'react';
import React, { useState } from 'react';
import { get } from 'lodash';
import * as log from '../../logging/log';
import type { ReplacementValuesType } from '../../types/I18N';
import type { FullJSXType } from '../Intl';
import { Intl } from '../Intl';
@ -19,19 +20,32 @@ import type { GroupV2ChangeType, GroupV2ChangeDetailType } from '../../groups';
import type { SmartContactRendererType } from '../../groupChange';
import { renderChange } from '../../groupChange';
import { Modal } from '../Modal';
import { ConfirmationDialog } from '../ConfirmationDialog';
export type PropsDataType = {
areWeAdmin: boolean;
groupMemberships?: Array<{
uuid: UUIDStringType;
isAdmin: boolean;
}>;
groupBannedMemberships?: Array<UUIDStringType>;
groupName?: string;
ourUuid?: UUIDStringType;
change: GroupV2ChangeType;
};
export type PropsActionsType = {
blockGroupLinkRequests: (uuid: UUIDStringType) => unknown;
};
export type PropsHousekeepingType = {
i18n: LocalizerType;
renderContact: SmartContactRendererType<FullJSXType>;
};
export type PropsType = PropsDataType & PropsHousekeepingType;
export type PropsType = PropsDataType &
PropsActionsType &
PropsHousekeepingType;
function renderStringToIntl(
id: string,
@ -41,6 +55,12 @@ function renderStringToIntl(
return <Intl id={id} i18n={i18n} components={components} />;
}
enum ModalState {
None = 'None',
ViewingGroupDescription = 'ViewingGroupDescription',
ConfirmingblockGroupLinkRequests = 'ConfirmingblockGroupLinkRequests',
}
type GroupIconType =
| 'group'
| 'group-access'
@ -58,6 +78,7 @@ const changeToIconMap = new Map<string, GroupIconType>([
['access-members', 'group-access'],
['admin-approval-add-one', 'group-add'],
['admin-approval-remove-one', 'group-decline'],
['admin-approval-bounce', 'group-decline'],
['announcements-only', 'group-access'],
['avatar', 'group-avatar'],
['description', 'group-edit'],
@ -79,6 +100,7 @@ const changeToIconMap = new Map<string, GroupIconType>([
function getIcon(
detail: GroupV2ChangeDetailType,
isLastText = true,
fromId?: UUIDStringType
): GroupIconType {
const changeType = detail.type;
@ -92,52 +114,170 @@ function getIcon(
possibleIcon = 'group-approved';
}
}
// Use default icon for "... requested to join via group link" added to
// bounce notification.
if (changeType === 'admin-approval-bounce' && isLastText) {
possibleIcon = undefined;
}
return possibleIcon || 'group';
}
function GroupV2Detail({
areWeAdmin,
blockGroupLinkRequests,
detail,
i18n,
isLastText,
fromId,
onButtonClick,
groupMemberships,
groupBannedMemberships,
groupName,
i18n,
ourUuid,
renderContact,
text,
}: {
areWeAdmin: boolean;
blockGroupLinkRequests: (uuid: UUIDStringType) => unknown;
detail: GroupV2ChangeDetailType;
isLastText: boolean;
groupMemberships?: Array<{
uuid: UUIDStringType;
isAdmin: boolean;
}>;
groupBannedMemberships?: Array<UUIDStringType>;
groupName?: string;
i18n: LocalizerType;
fromId?: UUIDStringType;
onButtonClick: (x: string) => unknown;
ourUuid?: UUIDStringType;
renderContact: SmartContactRendererType<FullJSXType>;
text: FullJSXType;
}): JSX.Element {
const icon = getIcon(detail, fromId);
const icon = getIcon(detail, isLastText, fromId);
let buttonNode: ReactNode;
const newGroupDescription =
detail.type === 'description' && get(detail, 'description');
const [modalState, setModalState] = useState<ModalState>(ModalState.None);
let modalNode: ReactNode;
switch (modalState) {
case ModalState.None:
modalNode = undefined;
break;
case ModalState.ViewingGroupDescription:
if (detail.type !== 'description' || !detail.description) {
log.warn(
'GroupV2Detail: ViewingGroupDescription but missing description or wrong change type'
);
modalNode = undefined;
break;
}
modalNode = (
<Modal
hasXButton
i18n={i18n}
title={groupName}
onClose={() => setModalState(ModalState.None)}
>
<GroupDescriptionText text={detail.description} />
</Modal>
);
break;
case ModalState.ConfirmingblockGroupLinkRequests:
if (
!isLastText ||
detail.type !== 'admin-approval-bounce' ||
!detail.uuid
) {
log.warn(
'GroupV2Detail: ConfirmingblockGroupLinkRequests but missing uuid or wrong change type'
);
modalNode = undefined;
break;
}
modalNode = (
<ConfirmationDialog
title={i18n('PendingRequests--block--title')}
actions={[
{
action: () => blockGroupLinkRequests(detail.uuid),
text: i18n('PendingRequests--block--confirm'),
},
]}
i18n={i18n}
onClose={() => setModalState(ModalState.None)}
>
<Intl
id="PendingRequests--block--contents"
i18n={i18n}
components={{
name: renderContact(detail.uuid),
}}
/>
</ConfirmationDialog>
);
break;
default: {
const state: never = modalState;
log.warn(`GroupV2Detail: unexpected modal state ${state}`);
modalNode = undefined;
break;
}
}
if (detail.type === 'description' && detail.description) {
buttonNode = (
<Button
onClick={() => setModalState(ModalState.ViewingGroupDescription)}
size={ButtonSize.Small}
variant={ButtonVariant.SystemMessage}
>
{i18n('view')}
</Button>
);
} else if (
isLastText &&
detail.type === 'admin-approval-bounce' &&
areWeAdmin &&
detail.uuid &&
detail.uuid !== ourUuid &&
(!fromId || fromId === detail.uuid) &&
!groupMemberships?.some(item => item.uuid === detail.uuid) &&
!groupBannedMemberships?.some(uuid => uuid === detail.uuid)
) {
buttonNode = (
<Button
onClick={() =>
setModalState(ModalState.ConfirmingblockGroupLinkRequests)
}
size={ButtonSize.Small}
variant={ButtonVariant.SystemMessage}
>
{i18n('PendingRequests--block--button')}
</Button>
);
}
return (
<SystemMessage
icon={icon}
contents={text}
button={
newGroupDescription ? (
<Button
onClick={() => onButtonClick(newGroupDescription)}
size={ButtonSize.Small}
variant={ButtonVariant.SystemMessage}
>
{i18n('view')}
</Button>
) : undefined
}
/>
<>
<SystemMessage icon={icon} contents={text} button={buttonNode} />
{modalNode}
</>
);
}
export function GroupV2Change(props: PropsType): ReactElement {
const { change, groupName, i18n, ourUuid, renderContact } = props;
const [groupDescription, setGroupDescription] = useState<
string | undefined
>();
const {
areWeAdmin,
blockGroupLinkRequests,
change,
groupBannedMemberships,
groupMemberships,
groupName,
i18n,
ourUuid,
renderContact,
} = props;
return (
<>
@ -146,30 +286,27 @@ export function GroupV2Change(props: PropsType): ReactElement {
ourUuid,
renderContact,
renderString: renderStringToIntl,
}).map((text: FullJSXType, index: number) => (
<GroupV2Detail
detail={change.details[index]}
fromId={change.from}
i18n={i18n}
// Difficult to find a unique key for this type
// eslint-disable-next-line react/no-array-index-key
key={index}
onButtonClick={nextGroupDescription =>
setGroupDescription(nextGroupDescription)
}
text={text}
/>
))}
{groupDescription ? (
<Modal
hasXButton
i18n={i18n}
title={groupName}
onClose={() => setGroupDescription(undefined)}
>
<GroupDescriptionText text={groupDescription} />
</Modal>
) : null}
}).map(({ detail, isLastText, text }, index) => {
return (
<GroupV2Detail
areWeAdmin={areWeAdmin}
blockGroupLinkRequests={blockGroupLinkRequests}
detail={detail}
isLastText={isLastText}
fromId={change.from}
groupBannedMemberships={groupBannedMemberships}
groupMemberships={groupMemberships}
groupName={groupName}
i18n={i18n}
// Difficult to find a unique key for this type
// eslint-disable-next-line react/no-array-index-key
key={index}
ourUuid={ourUuid}
renderContact={renderContact}
text={text}
/>
);
})}
</>
);
}

View file

@ -337,6 +337,7 @@ const actions = () => ({
acknowledgeGroupMemberNameCollisions: action(
'acknowledgeGroupMemberNameCollisions'
),
blockGroupLinkRequests: action('blockGroupLinkRequests'),
checkForAccount: action('checkForAccount'),
clearInvitedUuidsForNewlyCreatedGroup: action(
'clearInvitedUuidsForNewlyCreatedGroup'

View file

@ -21,6 +21,7 @@ import { WidthBreakpoint } from '../_util';
import type { PropsActions as MessageActionsType } from './Message';
import type { PropsActions as UnsupportedMessageActionsType } from './UnsupportedMessage';
import type { PropsActionsType as ChatSessionRefreshedNotificationActionsType } from './ChatSessionRefreshedNotification';
import type { PropsActionsType as GroupV2ChangeActionsType } from './GroupV2Change';
import { ErrorBoundary } from './ErrorBoundary';
import type { PropsActions as SafetyNumberActionsType } from './SafetyNumberNotification';
import { Intl } from '../Intl';
@ -167,6 +168,7 @@ export type PropsActionsType = {
} & MessageActionsType &
SafetyNumberActionsType &
UnsupportedMessageActionsType &
GroupV2ChangeActionsType &
ChatSessionRefreshedNotificationActionsType;
export type PropsType = PropsDataType &
@ -199,6 +201,7 @@ const getActions = createSelector(
(props: PropsType): PropsActionsType => {
const unsafe = pick(props, [
'acknowledgeGroupMemberNameCollisions',
'blockGroupLinkRequests',
'clearInvitedUuidsForNewlyCreatedGroup',
'closeContactSpoofingReview',
'setIsNearBottom',

View file

@ -65,6 +65,7 @@ const getDefaultProps = () => ({
replyToMessage: action('replyToMessage'),
retryDeleteForEveryone: action('retryDeleteForEveryone'),
retrySend: action('retrySend'),
blockGroupLinkRequests: action('blockGroupLinkRequests'),
deleteMessage: action('deleteMessage'),
deleteMessageForEveryone: action('deleteMessageForEveryone'),
kickOffAttachmentDownload: action('kickOffAttachmentDownload'),

View file

@ -45,7 +45,10 @@ import type { PropsData as VerificationNotificationProps } from './VerificationN
import { VerificationNotification } from './VerificationNotification';
import type { PropsData as GroupNotificationProps } from './GroupNotification';
import { GroupNotification } from './GroupNotification';
import type { PropsDataType as GroupV2ChangeProps } from './GroupV2Change';
import type {
PropsDataType as GroupV2ChangeProps,
PropsActionsType as GroupV2ChangeActionsType,
} from './GroupV2Change';
import { GroupV2Change } from './GroupV2Change';
import type { PropsDataType as GroupV1MigrationProps } from './GroupV1Migration';
import { GroupV1Migration } from './GroupV1Migration';
@ -161,6 +164,7 @@ type PropsLocalType = {
type PropsActionsType = MessageActionsType &
CallingNotificationActionsType &
DeliveryIssueActionProps &
GroupV2ChangeActionsType &
PropsChatSessionRefreshedActionsType &
UnsupportedMessageActionsType &
SafetyNumberActionsType;
@ -190,7 +194,6 @@ export class TimelineItem extends React.PureComponent<PropsType> {
theme,
nextItem,
previousItem,
renderContact,
renderUniversalTimerNotification,
returnToActiveCall,
selectMessage,
@ -294,11 +297,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
);
} else if (item.type === 'groupV2Change') {
notification = (
<GroupV2Change
renderContact={renderContact}
{...item.data}
i18n={i18n}
/>
<GroupV2Change {...this.props} {...item.data} i18n={i18n} />
);
} else if (item.type === 'groupV1Migration') {
notification = (