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

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",

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>

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