From a1ab62f878e4868f3dd6ad50fc3c1ea65c63dc60 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Wed, 15 Mar 2023 09:57:27 -0700
Subject: [PATCH] New state for Update Dialog

---
 _locales/en/messages.json                  | 10 +++++-
 stylesheets/components/LeftPaneDialog.scss | 22 +++++++++---
 ts/components/DialogUpdate.stories.tsx     | 40 ++++++++++++++++++++--
 ts/components/DialogUpdate.tsx             | 29 ++++++++--------
 ts/components/LeftPane.stories.tsx         |  2 +-
 ts/state/selectors/updates.ts              |  4 ++-
 ts/types/Dialogs.ts                        |  3 +-
 ts/updater/common.ts                       | 12 +++++--
 8 files changed, 93 insertions(+), 29 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index bda64d2b832a..16326dafb376 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2196,7 +2196,7 @@
     "message": "Relink"
   },
   "autoUpdateNewVersionTitle": {
-    "message": "Update available"
+    "message": "Update Available"
   },
   "autoUpdateRetry": {
     "message": "Retry update"
@@ -5599,6 +5599,14 @@
     "message": "Update to version $version$ available",
     "description": "Tooltip for new update available"
   },
+  "icu:DialogUpdate__downloading": {
+    "messageformat": "Downloading Update...",
+    "description": "The title of update dialog when update download is in progress."
+  },
+  "icu:DialogUpdate__downloaded": {
+    "messageformat": "Update Downloaded",
+    "description": "The title of update dialog when update download is completed."
+  },
   "NSIS__retry-dialog--first-line": {
     "message": "Signal cannot be closed.",
     "description": "First line of the dialog displayed when Windows installer can't close application automatically and needs user intervention to complete the installation."
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index b577b434af6b..6b4aac24c030 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -24,10 +24,15 @@
   cursor: inherit;
   display: flex;
   min-height: 64px;
-  padding: 12px 18px;
+  padding: 12px 14px 12px 16px;
   user-select: none;
   width: 100%;
 
+  font-size: 13px;
+  line-height: 18px;
+  letter-spacing: -0.0025em;
+  font-weight: 400;
+
   .module-left-pane--width-narrow & {
     padding-left: 36px;
   }
@@ -108,6 +113,7 @@
   &__action-text {
     @include button-reset;
     text-decoration: none;
+    color: $color-white-alpha-80;
   }
 
   &__close-button {
@@ -115,8 +121,8 @@
 
     border-radius: 4px;
     float: right;
-    height: 24px;
-    width: 24px;
+    height: 20px;
+    width: 20px;
 
     &::before {
       -webkit-mask: url('../images/icons/v2/x-24.svg') no-repeat center;
@@ -174,7 +180,6 @@
       @include font-body-1-bold;
       padding: 0px;
       margin: 0px;
-      margin-bottom: 8px;
     }
     span {
       @include font-body-1;
@@ -193,6 +198,10 @@
     a {
       color: $error-text-color;
     }
+
+    .LeftPaneDialog__action-text {
+      color: $error-text-color;
+    }
   }
 
   &--warning {
@@ -218,6 +227,10 @@
         background-color: WindowText;
       }
     }
+
+    .LeftPaneDialog__action-text {
+      color: $warning-text-color;
+    }
   }
 
   &__progress {
@@ -228,6 +241,7 @@
       max-width: 210px;
       overflow: hidden;
       width: 100%;
+      margin: 10px 0 6px 0;
     }
 
     &--bar {
diff --git a/ts/components/DialogUpdate.stories.tsx b/ts/components/DialogUpdate.stories.tsx
index 808d05d2bb80..4e202cd5f9b3 100644
--- a/ts/components/DialogUpdate.stories.tsx
+++ b/ts/components/DialogUpdate.stories.tsx
@@ -37,7 +37,7 @@ export function KnobsPlayground(): JSX.Element {
     WidthBreakpoint,
     WidthBreakpoint.Wide
   );
-  const dialogType = select('dialogType', DialogType, DialogType.Update);
+  const dialogType = select('dialogType', DialogType, DialogType.AutoUpdate);
 
   return (
     <FakeLeftPaneContainer containerWidthBreakpoint={containerWidthBreakpoint}>
@@ -57,7 +57,7 @@ export function UpdateWide(): JSX.Element {
       <DialogUpdate
         {...defaultProps}
         containerWidthBreakpoint={WidthBreakpoint.Wide}
-        dialogType={DialogType.Update}
+        dialogType={DialogType.AutoUpdate}
         currentVersion="5.24.0"
       />
     </FakeLeftPaneContainer>
@@ -68,6 +68,23 @@ UpdateWide.story = {
   name: 'Update (Wide)',
 };
 
+export function DownloadedWide(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Wide}
+        dialogType={DialogType.DownloadedUpdate}
+        currentVersion="5.24.0"
+      />
+    </FakeLeftPaneContainer>
+  );
+}
+
+DownloadedWide.story = {
+  name: 'Downloaded (Wide)',
+};
+
 export function DownloadReadyWide(): JSX.Element {
   return (
     <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Wide}>
@@ -248,7 +265,7 @@ export function UpdateNarrow(): JSX.Element {
       <DialogUpdate
         {...defaultProps}
         containerWidthBreakpoint={WidthBreakpoint.Narrow}
-        dialogType={DialogType.Update}
+        dialogType={DialogType.AutoUpdate}
         currentVersion="5.24.0"
       />
     </FakeLeftPaneContainer>
@@ -259,6 +276,23 @@ UpdateNarrow.story = {
   name: 'Update (Narrow)',
 };
 
+export function DownloadedNarrow(): JSX.Element {
+  return (
+    <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
+      <DialogUpdate
+        {...defaultProps}
+        containerWidthBreakpoint={WidthBreakpoint.Narrow}
+        dialogType={DialogType.DownloadedUpdate}
+        currentVersion="5.24.0"
+      />
+    </FakeLeftPaneContainer>
+  );
+}
+
+DownloadedNarrow.story = {
+  name: 'Downloaded (Narrow)',
+};
+
 export function DownloadReadyNarrow(): JSX.Element {
   return (
     <FakeLeftPaneContainer containerWidthBreakpoint={WidthBreakpoint.Narrow}>
diff --git a/ts/components/DialogUpdate.tsx b/ts/components/DialogUpdate.tsx
index dab9b70c148d..ee4c72dca6d0 100644
--- a/ts/components/DialogUpdate.tsx
+++ b/ts/components/DialogUpdate.tsx
@@ -162,17 +162,6 @@ export function DialogUpdate({
     return null;
   }
 
-  let title = i18n('autoUpdateNewVersionTitle');
-
-  if (
-    downloadSize &&
-    (dialogType === DialogType.DownloadReady ||
-      dialogType === DialogType.FullDownloadReady ||
-      dialogType === DialogType.Downloading)
-  ) {
-    title += ` (${formatFileSize(downloadSize, { round: 0 })})`;
-  }
-
   const versionTitle = version
     ? i18n('DialogUpdate--version-available', [version])
     : undefined;
@@ -186,7 +175,7 @@ export function DialogUpdate({
       <LeftPaneDialog
         containerWidthBreakpoint={containerWidthBreakpoint}
         icon="update"
-        title={title}
+        title={i18n('icu:DialogUpdate__downloading')}
         hoverText={versionTitle}
       >
         <div className="LeftPaneDialog__progress--container">
@@ -199,15 +188,25 @@ export function DialogUpdate({
     );
   }
 
-  let clickLabel: string;
+  let title = i18n('autoUpdateNewVersionTitle');
+
+  if (
+    downloadSize &&
+    (dialogType === DialogType.DownloadReady ||
+      dialogType === DialogType.FullDownloadReady)
+  ) {
+    title += ` (${formatFileSize(downloadSize, { round: 0 })})`;
+  }
+
+  let clickLabel = i18n('autoUpdateNewVersionMessage');
   let type: 'warning' | undefined;
   if (dialogType === DialogType.DownloadReady) {
     clickLabel = i18n('downloadNewVersionMessage');
   } else if (dialogType === DialogType.FullDownloadReady) {
     clickLabel = i18n('downloadFullNewVersionMessage');
     type = 'warning';
-  } else {
-    clickLabel = i18n('autoUpdateNewVersionMessage');
+  } else if (dialogType === DialogType.DownloadedUpdate) {
+    title = i18n('icu:DialogUpdate__downloaded');
   }
 
   return (
diff --git a/ts/components/LeftPane.stories.tsx b/ts/components/LeftPane.stories.tsx
index 63821b359274..e7ddc3119a44 100644
--- a/ts/components/LeftPane.stories.tsx
+++ b/ts/components/LeftPane.stories.tsx
@@ -205,7 +205,7 @@ const useProps = (overrideProps: OverridePropsType = {}): PropsType => {
       <DialogUpdate
         i18n={i18n}
         dialogType={
-          isUpdateDownloaded ? DialogType.Update : DialogType.DownloadReady
+          isUpdateDownloaded ? DialogType.AutoUpdate : DialogType.DownloadReady
         }
         dismissDialog={action('dismissUpdate')}
         snoozeUpdate={action('snoozeUpdate')}
diff --git a/ts/state/selectors/updates.ts b/ts/state/selectors/updates.ts
index cee39aaac499..82a9e3304f29 100644
--- a/ts/state/selectors/updates.ts
+++ b/ts/state/selectors/updates.ts
@@ -33,7 +33,9 @@ export const isUpdateDialogVisible = createSelector(
 
 export const isUpdateDownloaded = createSelector(
   getUpdatesState,
-  ({ dialogType }) => dialogType === DialogType.Update
+  ({ dialogType }) =>
+    dialogType === DialogType.AutoUpdate ||
+    dialogType === DialogType.DownloadedUpdate
 );
 
 export const isOSUnsupported = createSelector(
diff --git a/ts/types/Dialogs.ts b/ts/types/Dialogs.ts
index 5adbf9b2f782..fdba452b8d64 100644
--- a/ts/types/Dialogs.ts
+++ b/ts/types/Dialogs.ts
@@ -3,7 +3,7 @@
 
 export enum DialogType {
   None = 'None',
-  Update = 'Update',
+  AutoUpdate = 'AutoUpdate',
   Cannot_Update = 'Cannot_Update',
   Cannot_Update_Require_Manual = 'Cannot_Update_Require_Manual',
   UnsupportedOS = 'UnsupportedOS',
@@ -11,4 +11,5 @@ export enum DialogType {
   DownloadReady = 'DownloadReady',
   FullDownloadReady = 'FullDownloadReady',
   Downloading = 'Downloading',
+  DownloadedUpdate = 'DownloadedUpdate',
 }
diff --git a/ts/updater/common.ts b/ts/updater/common.ts
index 98bdb738f0a6..7332fdba885c 100644
--- a/ts/updater/common.ts
+++ b/ts/updater/common.ts
@@ -260,9 +260,15 @@ export abstract class Updater {
       const mainWindow = this.getMainWindow();
       if (mainWindow) {
         logger.info('downloadAndInstall: showing update dialog...');
-        mainWindow.webContents.send('show-update-dialog', DialogType.Update, {
-          version: this.version,
-        });
+        mainWindow.webContents.send(
+          'show-update-dialog',
+          mode === DownloadMode.Automatic
+            ? DialogType.AutoUpdate
+            : DialogType.DownloadedUpdate,
+          {
+            version: this.version,
+          }
+        );
       } else {
         logger.warn(
           'downloadAndInstall: no mainWindow, cannot show update dialog'