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

@ -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}
/>
);
})}
</>
);
}