Show sender and device number in decryption error toast

.gitignore

@@ -11,7 +11,7 @@ config/local-*.json
 release/
 /dev-app-update.yml
 .nyc_output/
-*.sublime*
+
 /sql/
 /start.sh
 .eslintcache
@@ -24,6 +24,9 @@ libtextsecure/components.js
 libtextsecure/test/test.js
 stylesheets/*.css
 test/test.js
+/storybook-static/
+preload.bundle.*
+ts/sql/mainWorker.bundle.js.LICENSE.txt
 
 # React / TypeScript
 app/*.js
@@ -37,7 +40,7 @@ sticker-creator/**/*.js
 # Sticker Creator
 sticker-creator/dist/*
 
+# Editors
 /.idea
-/storybook-static/
-preload.bundle.*
-ts/sql/mainWorker.bundle.js.LICENSE.txt
+/.vscode
+*.sublime*

_locales/en/messages.json

@@ -623,7 +623,7 @@
     "message": "Thumbnail link preview for $domain$",
     "description": "Shown while Signal Desktop is fetching metadata for a url in composition area",
     "placeholders": {
-      "path": {
+      "domain": {
         "content": "$1",
         "example": "instagram.com"
       }
@@ -640,8 +640,18 @@
     }
   },
   "decryptionErrorToast": {
-    "message": "Desktop ran into a decryption error.",
-    "description": "An error popup when we haven't added an error for decryption error."
+    "message": "Desktop ran into a decryption error from $name$, device $deviceId$",
+    "description": "An error popup when we haven't added an in-timeline error for decryption error, only for beta/internal users.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "John"
+      },
+      "deviceId": {
+        "content": "$1",
+        "example": "2"
+      }
+    }
   },
   "decryptionErrorToastAction": {
     "message": "Submit log",

stylesheets/components/Toast.scss

@@ -17,6 +17,7 @@
   text-align: center;
   transform: translate(-50%, 0);
   user-select: none;
+  overflow: hidden;
   z-index: $z-index-toast;
 
   @include light-theme {
@@ -34,10 +35,9 @@
 
   &__button {
     @include font-body-2-bold;
-    border-top-right-radius: $border-radius-px;
-    border-bottom-right-radius: $border-radius-px;
     cursor: pointer;
     padding: 8px 12px;
+    white-space: nowrap;
 
     @include light-theme {
       border-left: 1px solid $color-gray-65;
@@ -46,6 +46,8 @@
       border-left: 1px solid $color-gray-60;
     }
 
+    outline: none;
+
     &:hover {
       @include light-theme {
         background-color: $color-gray-65;
@@ -54,5 +56,13 @@
         background-color: $color-gray-60;
       }
     }
+    &:focus {
+      @include keyboard-mode {
+        background-color: $color-gray-65;
+      }
+      @include dark-keyboard-mode {
+        background-color: $color-gray-60;
+      }
+    }
   }
 }

ts/components/ToastDecryptionError.stories.tsx

@@ -12,7 +12,9 @@ import enMessages from '../../_locales/en/messages.json';
 const i18n = setupI18n('en', enMessages);
 
 const defaultProps = {
+  deviceId: 3,
   i18n,
+  name: 'Someone Somewhere',
   onClose: action('onClose'),
   onShowDebugLog: action('onShowDebugLog'),
 };

ts/components/ToastDecryptionError.tsx

@@ -6,6 +6,8 @@ import type { LocalizerType } from '../types/Util';
 import { Toast } from './Toast';
 
 export type ToastPropsType = {
+  deviceId: number;
+  name: string;
   onShowDebugLog: () => unknown;
 };
 
@@ -15,7 +17,9 @@ type PropsType = {
 } & ToastPropsType;
 
 export const ToastDecryptionError = ({
+  deviceId,
   i18n,
+  name,
   onClose,
   onShowDebugLog,
 }: PropsType): JSX.Element => {
@@ -24,12 +28,16 @@ export const ToastDecryptionError = ({
       autoDismissDisabled
       className="decryption-error"
       onClose={onClose}
+      style={{ maxWidth: '500px' }}
       toastAction={{
         label: i18n('decryptionErrorToastAction'),
         onClick: onShowDebugLog,
       }}
     >
-      {i18n('decryptionErrorToast')}
+      {i18n('decryptionErrorToast', {
+        name,
+        deviceId,
+      })}
     </Toast>
   );
 };

ts/util/handleRetry.ts

@@ -151,13 +151,19 @@ export async function onRetryRequest(event: RetryRequestEvent): Promise<void> {
   log.info(`onRetryRequest/${logId}: Resend complete.`);
 }
 
-function maybeShowDecryptionToast(logId: string) {
+function maybeShowDecryptionToast(
+  logId: string,
+  name: string,
+  deviceId: number
+) {
   if (isProduction(window.getVersion())) {
     return;
   }
 
   log.info(`maybeShowDecryptionToast/${logId}: Showing decryption error toast`);
   showToast(ToastDecryptionError, {
+    deviceId,
+    name,
     onShowDebugLog: () => window.showDebugLog(),
   });
 }
@@ -189,7 +195,8 @@ export async function onDecryptionError(
     await conversation.getProfiles();
   }
 
-  maybeShowDecryptionToast(logId);
+  const name = conversation.getTitle();
+  maybeShowDecryptionToast(logId, name, senderDevice);
 
   if (
     conversation.get('capabilities')?.senderKey &&