Message Requests: Add new "Report spam and block" button

_locales/en/messages.json

@@ -2956,9 +2956,13 @@
       }
     }
   },
-  "MessageRequests--block-and-delete": {
-    "message": "Block and Delete",
-    "description": "Shown as a button to let the user block and delete a message request"
+  "MessageRequests--block-and-report-spam": {
+    "message": "Report Spam and Block",
+    "description": "Shown as a button to let the user block a message request and report spam"
+  },
+  "MessageRequests--block-and-report-spam-success-toast": {
+    "message": "Reported as spam and blocked.",
+    "description": "Shown in a toast when you successfully block a user and report them as spam"
   },
   "MessageRequests--block-direct-confirm-title": {
     "message": "Block $name$?",

stylesheets/components/Modal.scss

@@ -101,6 +101,11 @@
       margin-left: 8px;
       margin-top: 8px;
     }
+
+    &--one-button-per-line {
+      flex-direction: column;
+      align-items: flex-end;
+    }
   }
 
   // Overrides for a modal with important message

test/backup_test.js

@@ -636,7 +636,7 @@ describe('Backup', () => {
           'Backup test: Check that all attachments were successfully imported'
         );
         const messageWithAttachmentsFromDB = await loadAllFilesFromDisk(
-          messageFromDB
+          omitUndefinedKeys(messageFromDB)
         );
         const expectedMessageWithAttachments = await loadAllFilesFromDisk(
           omitUndefinedKeys(message)

ts/RemoteConfig.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { get, throttle } from 'lodash';
-import { WebAPIType } from './textsecure/WebAPI';
+import { connectToServerWithStoredCredentials } from './util/connectToServerWithStoredCredentials';
 
 export type ConfigKeyType =
   | 'desktop.clientExpiration'
@@ -29,17 +29,6 @@ type ConfigListenersMapType = {
   [key: string]: Array<ConfigListenerType>;
 };
 
-function getServer(): WebAPIType {
-  const OLD_USERNAME = window.storage.get<string>('number_id');
-  const USERNAME = window.storage.get<string>('uuid_id');
-  const PASSWORD = window.storage.get<string>('password');
-
-  return window.WebAPI.connect({
-    username: (USERNAME || OLD_USERNAME) as string,
-    password: PASSWORD as string,
-  });
-}
-
 let config: ConfigMapType = {};
 const listeners: ConfigListenersMapType = {};
 
@@ -63,7 +52,10 @@ export function onChange(
 
 export const refreshRemoteConfig = async (): Promise<void> => {
   const now = Date.now();
-  const server = getServer();
+  const server = connectToServerWithStoredCredentials(
+    window.WebAPI,
+    window.storage
+  );
   const newConfig = await server.getConfig();
 
   // Process new configuration in light of the old configuration

ts/background.ts

@@ -22,6 +22,7 @@ import { ourProfileKeyService } from './services/ourProfileKey';
 import { shouldRespondWithProfileKey } from './util/shouldRespondWithProfileKey';
 import { setToExpire } from './services/MessageUpdater';
 import { LatestQueue } from './util/LatestQueue';
+import { connectToServerWithStoredCredentials } from './util/connectToServerWithStoredCredentials';
 
 const MAX_ATTACHMENT_DOWNLOAD_AGE = 3600 * 72 * 1000;
 
@@ -2006,10 +2007,10 @@ export async function startApp(): Promise<void> {
 
       const udSupportKey = 'hasRegisterSupportForUnauthenticatedDelivery';
       if (!window.storage.get(udSupportKey)) {
-        const server = window.WebAPI.connect({
-          username: USERNAME || OLD_USERNAME,
-          password: PASSWORD,
-        });
+        const server = connectToServerWithStoredCredentials(
+          window.WebAPI,
+          window.storage
+        );
         try {
           await server.registerSupportForUnauthenticatedDelivery();
           window.storage.put(udSupportKey, true);
@@ -2050,10 +2051,10 @@ export async function startApp(): Promise<void> {
       }
 
       if (connectCount === 1) {
-        const server = window.WebAPI.connect({
-          username: USERNAME || OLD_USERNAME,
-          password: PASSWORD,
-        });
+        const server = connectToServerWithStoredCredentials(
+          window.WebAPI,
+          window.storage
+        );
         try {
           // Note: we always have to register our capabilities all at once, so we do this
           //   after connect on every startup
@@ -3151,6 +3152,7 @@ export async function startApp(): Promise<void> {
       sourceUuid: data.sourceUuid,
       sourceDevice: data.sourceDevice,
       sent_at: data.timestamp,
+      serverGuid: data.serverGuid,
       serverTimestamp: data.serverTimestamp,
       received_at: data.receivedAtCounter,
       received_at_ms: data.receivedAtDate,

ts/components/CompositionArea.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -61,7 +61,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   conversationType: 'direct',
   onAccept: action('onAccept'),
   onBlock: action('onBlock'),
-  onBlockAndDelete: action('onBlockAndDelete'),
+  onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('onDelete'),
   onUnblock: action('onUnblock'),
   messageRequestsEnabled: boolean(

ts/components/CompositionArea.tsx

@@ -1,4 +1,4 @@
-// Copyright 2019-2020 Signal Messenger, LLC
+// Copyright 2019-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -147,7 +147,7 @@ export const CompositionArea = ({
   name,
   onAccept,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onDelete,
   onUnblock,
   phoneNumber,
@@ -374,7 +374,7 @@ export const CompositionArea = ({
         conversationType={conversationType}
         isBlocked={isBlocked}
         onBlock={onBlock}
-        onBlockAndDelete={onBlockAndDelete}
+        onBlockAndReportSpam={onBlockAndReportSpam}
         onUnblock={onUnblock}
         onDelete={onDelete}
         onAccept={onAccept}
@@ -428,7 +428,7 @@ export const CompositionArea = ({
         i18n={i18n}
         conversationType={conversationType}
         onBlock={onBlock}
-        onBlockAndDelete={onBlockAndDelete}
+        onBlockAndReportSpam={onBlockAndReportSpam}
         onDelete={onDelete}
         onAccept={onAccept}
         name={name}

ts/components/Modal.tsx

@@ -9,6 +9,7 @@ import { LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
 import { Theme } from '../util/theme';
 import { getClassNamesFor } from '../util/getClassNamesFor';
+import { useHasWrapped } from '../util/hooks';
 
 type PropsType = {
   children: ReactNode;
@@ -85,19 +86,29 @@ export function Modal({
   );
 }
 
-Modal.ButtonFooter = ({
+Modal.ButtonFooter = function ButtonFooter({
   children,
   moduleClassName,
 }: Readonly<{
   children: ReactNode;
   moduleClassName?: string;
-}>): ReactElement => (
-  <div
-    className={getClassNamesFor(
-      BASE_CLASS_NAME,
-      moduleClassName
-    )('__button-footer')}
-  >
-    {children}
-  </div>
-);
+}>): ReactElement {
+  const [ref, hasWrapped] = useHasWrapped<HTMLDivElement>();
+
+  const className = getClassNamesFor(
+    BASE_CLASS_NAME,
+    moduleClassName
+  )('__button-footer');
+
+  return (
+    <div
+      className={classNames(
+        className,
+        hasWrapped ? `${className}--one-button-per-line` : undefined
+      )}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+};

ts/components/conversation/ContactSpoofingReviewDialog.stories.tsx

@@ -21,7 +21,7 @@ story.add('Default', () => (
   <ContactSpoofingReviewDialog
     i18n={i18n}
     onBlock={action('onBlock')}
-    onBlockAndDelete={action('onBlockAndDelete')}
+    onBlockAndReportSpam={action('onBlockAndReportSpam')}
     onClose={action('onClose')}
     onDelete={action('onDelete')}
     onShowContactModal={action('onShowContactModal')}

ts/components/conversation/ContactSpoofingReviewDialog.tsx

@@ -18,7 +18,7 @@ import { assert } from '../../util/assert';
 type PropsType = {
   i18n: LocalizerType;
   onBlock: () => unknown;
-  onBlockAndDelete: () => unknown;
+  onBlockAndReportSpam: () => unknown;
   onClose: () => void;
   onDelete: () => unknown;
   onShowContactModal: (contactId: string) => unknown;
@@ -30,7 +30,7 @@ type PropsType = {
 export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> = ({
   i18n,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onClose,
   onDelete,
   onShowContactModal,
@@ -56,7 +56,7 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> = ({
       <MessageRequestActionsConfirmation
         i18n={i18n}
         onBlock={onBlock}
-        onBlockAndDelete={onBlockAndDelete}
+        onBlockAndReportSpam={onBlockAndReportSpam}
         onUnblock={onUnblock}
         onDelete={onDelete}
         name={possiblyUnsafeConversation.name}

ts/components/conversation/MandatoryProfileSharingActions.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -28,7 +28,7 @@ const getBaseProps = (
     ? text('name', 'NYC Rock Climbers')
     : text('name', 'Cayce Bollard'),
   onBlock: action('block'),
-  onBlockAndDelete: action('onBlockAndDelete'),
+  onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('delete'),
   onAccept: action('accept'),
 });

ts/components/conversation/MandatoryProfileSharingActions.tsx

@@ -19,7 +19,7 @@ export type Props = {
 } & Omit<ContactNameProps, 'module' | 'i18n'> &
   Pick<
     MessageRequestActionsConfirmationProps,
-    'conversationType' | 'onBlock' | 'onBlockAndDelete' | 'onDelete'
+    'conversationType' | 'onBlock' | 'onBlockAndReportSpam' | 'onDelete'
   >;
 
 export const MandatoryProfileSharingActions = ({
@@ -29,7 +29,7 @@ export const MandatoryProfileSharingActions = ({
   name,
   onAccept,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onDelete,
   phoneNumber,
   profileName,
@@ -43,7 +43,7 @@ export const MandatoryProfileSharingActions = ({
         <MessageRequestActionsConfirmation
           i18n={i18n}
           onBlock={onBlock}
-          onBlockAndDelete={onBlockAndDelete}
+          onBlockAndReportSpam={onBlockAndReportSpam}
           onUnblock={() => {
             throw new Error(
               'Should not be able to unblock from MandatoryProfileSharingActions'

ts/components/conversation/MessageRequestActions.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -27,7 +27,7 @@ const getBaseProps = (isGroup = false): MessageRequestActionsProps => ({
     : text('name', 'Cayce Bollard'),
   onBlock: action('block'),
   onDelete: action('delete'),
-  onBlockAndDelete: action('blockAndDelete'),
+  onBlockAndReportSpam: action('blockAndReportSpam'),
   onUnblock: action('unblock'),
   onAccept: action('accept'),
 });

ts/components/conversation/MessageRequestActions.tsx

@@ -30,7 +30,7 @@ export const MessageRequestActions = ({
   name,
   onAccept,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onDelete,
   onUnblock,
   phoneNumber,
@@ -45,7 +45,7 @@ export const MessageRequestActions = ({
         <MessageRequestActionsConfirmation
           i18n={i18n}
           onBlock={onBlock}
-          onBlockAndDelete={onBlockAndDelete}
+          onBlockAndReportSpam={onBlockAndReportSpam}
           onUnblock={onUnblock}
           onDelete={onDelete}
           name={name}

ts/components/conversation/MessageRequestActionsConfirmation.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -19,7 +19,7 @@ export type Props = {
   conversationType: 'group' | 'direct';
   isBlocked?: boolean;
   onBlock(): unknown;
-  onBlockAndDelete(): unknown;
+  onBlockAndReportSpam(): unknown;
   onUnblock(): unknown;
   onDelete(): unknown;
   state: MessageRequestState;
@@ -31,7 +31,7 @@ export const MessageRequestActionsConfirmation = ({
   i18n,
   name,
   onBlock,
-  onBlockAndDelete,
+  onBlockAndReportSpam,
   onChangeState,
   onDelete,
   onUnblock,
@@ -64,16 +64,20 @@ export const MessageRequestActionsConfirmation = ({
           />
         }
         actions={[
+          ...(conversationType === 'direct'
+            ? [
+                {
+                  text: i18n('MessageRequests--block-and-report-spam'),
+                  action: onBlockAndReportSpam,
+                  style: 'negative' as const,
+                },
+              ]
+            : []),
           {
             text: i18n('MessageRequests--block'),
             action: onBlock,
             style: 'negative',
           },
-          {
-            text: i18n('MessageRequests--block-and-delete'),
-            action: onBlockAndDelete,
-            style: 'negative',
-          },
         ]}
       >
         {i18n(`MessageRequests--block-${conversationType}-confirm-body`)}

ts/components/conversation/Timeline.stories.tsx

@@ -280,7 +280,7 @@ const actions = () => ({
   ),
 
   onBlock: action('onBlock'),
-  onBlockAndDelete: action('onBlockAndDelete'),
+  onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('onDelete'),
   onUnblock: action('onUnblock'),