Introduce new 'Block request' button in timeline

2022-03-15 17:11:28 -07:00 · 2022-03-15 17:11:28 -07:00 · 703bb8a3a3
commit 703bb8a3a3
parent 536dd0c7b0
22 changed files with 1088 additions and 157 deletions
--- a/ts/components/Intl.tsx
+++ b/ts/components/Intl.tsx
@ -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
--- a/ts/components/conversation/GroupV2Change.stories.tsx
+++ b/ts/components/conversation/GroupV2Change.stories.tsx
@ -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 🌲' }
        )}
      </>
    );
--- a/ts/components/conversation/GroupV2Change.tsx
+++ b/ts/components/conversation/GroupV2Change.tsx
@ -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}
+          />
+        );
+      })}
    </>
  );
 }
--- a/ts/components/conversation/Timeline.stories.tsx
+++ b/ts/components/conversation/Timeline.stories.tsx
@ -337,6 +337,7 @@ const actions = () => ({
  acknowledgeGroupMemberNameCollisions: action(
    'acknowledgeGroupMemberNameCollisions'
  ),
+  blockGroupLinkRequests: action('blockGroupLinkRequests'),
  checkForAccount: action('checkForAccount'),
  clearInvitedUuidsForNewlyCreatedGroup: action(
    'clearInvitedUuidsForNewlyCreatedGroup'
--- a/ts/components/conversation/Timeline.tsx
+++ b/ts/components/conversation/Timeline.tsx
@ -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',
--- a/ts/components/conversation/TimelineItem.stories.tsx
+++ b/ts/components/conversation/TimelineItem.stories.tsx
@ -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'),
--- a/ts/components/conversation/TimelineItem.tsx
+++ b/ts/components/conversation/TimelineItem.tsx
@ -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 = (