Iterate rageshake download styling

res/css/_components.scss

@@ -59,6 +59,7 @@
 @import "./views/context_menus/_WidgetContextMenu.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";

res/css/views/dialogs/_BugReportDialog.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BugReportDialog {
+    .mx_BugReportDialog_download {
+        .mx_AccessibleButton_kind_link {
+            padding-left: 0;
+        }
+    }
+}

src/components/views/dialogs/BugReportDialog.js

@@ -36,6 +36,8 @@ export default class BugReportDialog extends React.Component {
             issueUrl: "",
             text: "",
             progress: null,
+            downloadBusy: false,
+            downloadProgress: null,
         };
         this._unmounted = false;
         this._onSubmit = this._onSubmit.bind(this);
@@ -44,6 +46,7 @@ export default class BugReportDialog extends React.Component {
         this._onIssueUrlChange = this._onIssueUrlChange.bind(this);
         this._onSendLogsChange = this._onSendLogsChange.bind(this);
         this._sendProgressCallback = this._sendProgressCallback.bind(this);
+        this._downloadProgressCallback = this._downloadProgressCallback.bind(this);
     }
 
     componentWillUnmount() {
@@ -97,26 +100,25 @@ export default class BugReportDialog extends React.Component {
     }
 
     _onDownload = async (ev) => {
-        this.setState({ busy: true, progress: null, err: null });
+        this.setState({ downloadBusy: true });
-        this._sendProgressCallback(_t("Preparing to download logs"));
+        this._downloadProgressCallback(_t("Preparing to download logs"));
 
         try {
             await downloadBugReport({
                 sendLogs: true,
-                progressCallback: this._sendProgressCallback,
+                progressCallback: this._downloadProgressCallback,
                 label: this.props.label,
             });
 
             this.setState({
-                busy: false,
+                downloadBusy: false,
-                progress: null,
+                downloadProgress: null,
             });
         } catch (err) {
             if (!this._unmounted) {
                 this.setState({
-                    busy: false,
+                    downloadBusy: false,
-                    progress: null,
+                    downloadProgress: _t("Failed to send logs: ") + `${err.message}`,
-                    err: _t("Failed to send logs: ") + `${err.message}`,
                 });
             }
         }
@@ -141,6 +143,13 @@ export default class BugReportDialog extends React.Component {
         this.setState({progress: progress});
     }
 
+    _downloadProgressCallback(downloadProgress) {
+        if (this._unmounted) {
+            return;
+        }
+        this.setState({ downloadProgress });
+    }
+
     render() {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -201,9 +210,12 @@ export default class BugReportDialog extends React.Component {
                         ) }
                     </b></p>
 
-                    <AccessibleButton onClick={this._onDownload} kind="link">
+                    <div className="mx_BugReportDialog_download">
-                        { _t("Download logs") }
+                        <AccessibleButton onClick={this._onDownload} kind="link" disabled={this.state.downloadBusy}>
-                    </AccessibleButton>
+                            { _t("Download logs") }
+                        </AccessibleButton>
+                        {this.state.downloadProgress && <span>{this.state.downloadProgress} ...</span>}
+                    </div>
 
                     <Field
                         type="text"