New state for Update Dialog

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