New state for Update Dialog

_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."

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 {

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}>

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 (

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')}

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(

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',
 }

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'