MM-60224 - disable upgrade app button once download starts (#3164)

* MM-60224 - disable upgrade app btn once download starts * add translations * fix styles for update available in dark-mode
mattermost · Oct 21, 2024 · 9de4f6c · 9de4f6c
1 parent 92f88f0
commit 9de4f6c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -278,6 +278,7 @@
   "renderer.downloadsDropdown.Downloads": "Downloads",
   "renderer.downloadsDropdown.remaining": "remaining",
   "renderer.downloadsDropdown.Update.ANewVersionIsAvailableToInstall": "A new version of the {appName} Desktop App (version {version}) is available to install.",
+  "renderer.downloadsDropdown.Update.Downloading": "Downloading",
   "renderer.downloadsDropdown.Update.DownloadUpdate": "Download Update",
   "renderer.downloadsDropdown.Update.MattermostVersionX": "{appName} version {version}",
   "renderer.downloadsDropdown.Update.NewDesktopVersionAvailable": "New Desktop version available",

diff --git a/src/renderer/components/DownloadsDropdown/Update/UpdateAvailable.tsx b/src/renderer/components/DownloadsDropdown/Update/UpdateAvailable.tsx
@@ -1,10 +1,12 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
+import React, {useState} from 'react';
 import {Button} from 'react-bootstrap';
 import {FormattedMessage} from 'react-intl';
 
+import LoadingWrapper from 'renderer/components/SaveButton/LoadingWrapper';
+
 import type {DownloadedItem} from 'types/downloads';
 
 import Thumbnail from '../Thumbnail';
@@ -15,7 +17,12 @@ type OwnProps = {
 }
 
 const UpdateAvailable = ({item, appName}: OwnProps) => {
+    const [isProcessing, setIsProcessing] = useState(false);
     const onButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (isProcessing) {
+            return;
+        }
+        setIsProcessing(true);
         e?.preventDefault?.();
         window.desktop.downloadsDropdown.startUpdateDownload();
     };
@@ -42,13 +49,25 @@ const UpdateAvailable = ({item, appName}: OwnProps) => {
                 </div>
                 <Button
                     id='downloadUpdateButton'
-                    className='primary-button'
+                    className='primary-button DownloadsDropdown__Update__Details__Button'
+                    variant='primary'
                     onClick={onButtonClick}
+                    disabled={isProcessing}
                 >
-                    <FormattedMessage
-                        id='renderer.downloadsDropdown.Update.DownloadUpdate'
-                        defaultMessage='Download Update'
-                    />
+                    <LoadingWrapper
+                        loading={isProcessing}
+                        text={(
+                            <FormattedMessage
+                                id='renderer.downloadsDropdown.Update.Downloading'
+                                defaultMessage='Downloading'
+                            />
+                        )}
+                    >
+                        <FormattedMessage
+                            id='renderer.downloadsDropdown.Update.DownloadUpdate'
+                            defaultMessage='Download Update'
+                        />
+                    </LoadingWrapper>
                 </Button>
             </div>
         </div>

diff --git a/src/renderer/css/downloadsDropdown.scss b/src/renderer/css/downloadsDropdown.scss
@@ -383,7 +383,7 @@ body {
                         }
                         &.disabled {
                             background: transparent;
-                            color: rgba(63, 67, 80, 0.52);
+                            color: rgba(221, 223, 228, 0.32);
                         }
                     }
                     .DownloadsDropdown__Downloads {
@@ -459,6 +459,14 @@ body {
                         .DownloadsDropdown__Update__Details__Description {
                             color: rgba(221, 223, 228, 0.64);
                         }
+
+                        .DownloadsDropdown__Update__Details__Button {
+                            &:disabled {
+                                background: rgba(221, 223, 228, 0.08);
+                                color: rgba(221, 223, 228, 0.32) !important;
+                                opacity: 1;
+                            }
+                        }
                     }
                 }
             }