DEV: Remove buffered rendering from backup upload progress

This is another refactoring in the multi-step process to remove all uses
of our custom Render Buffer.

Previous commit: 54e4559aea in this
series.

This commit affects the display of the backup upload progress bar. It is
just a refactor and does not change any functionality.

app/assets/javascripts/admin/components/resumable-upload.js.es6

@@ -2,7 +2,6 @@ import { schedule } from "@ember/runloop";
 import { later } from "@ember/runloop";
 import Component from "@ember/component";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 import {
   default as discourseComputed,
   on
@@ -20,8 +19,7 @@ import {
         uploadText="UPLOAD"
     }}
 **/
-export default Component.extend(
+export default Component.extend({
-  bufferedRender({
   tagName: "button",
   classNames: ["btn", "ru"],
   classNameBindings: ["isUploading"],
@@ -30,6 +28,8 @@ export default Component.extend(
   isUploading: false,
   progress: 0,
   rerenderTriggers: ["isUploading", "progress"],
+  uploadingIcon: null,
+  progressBar: null,
 
   @on("init")
   _initialize() {
@@ -47,12 +47,18 @@ export default Component.extend(
       this.resumable.upload();
 
       // mark as uploading
-        later(() => this.set("isUploading", true));
+      later(() => {
+        this.set("isUploading", true);
+        this._updateIcon();
+      });
     });
 
     this.resumable.on("fileProgress", file => {
       // update progress
-        later(() => this.set("progress", parseInt(file.progress() * 100, 10)));
+      later(() => {
+        this.set("progress", parseInt(file.progress() * 100, 10));
+        this._updateProgressBar();
+      });
     });
 
     this.resumable.on("fileSuccess", file => {
@@ -78,9 +84,7 @@ export default Component.extend(
 
   @on("didInsertElement")
   _assignBrowse() {
-      schedule("afterRender", () =>
+    schedule("afterRender", () => this.resumable.assignBrowse($(this.element)));
-        this.resumable.assignBrowse($(this.element))
-      );
   },
 
   @on("willDestroyElement")
@@ -105,13 +109,9 @@ export default Component.extend(
     }
   },
 
-    buildBuffer(buffer) {
+  didReceiveAttrs() {
-      const icon = this.isUploading ? "times" : "upload";
+    this._super(...arguments);
-      buffer.push(iconHTML(icon));
+    this._updateIcon();
-      buffer.push("<span class='ru-label'>" + this.text + "</span>");
-      buffer.push(
-        "<span class='ru-progress' style='width:" + this.progress + "%'></span>"
-      );
   },
 
   click() {
@@ -124,8 +124,19 @@ export default Component.extend(
     }
   },
 
+  _updateIcon() {
+    const icon = this.isUploading ? "times" : "upload";
+    this.set("uploadingIcon", `${iconHTML(icon)}`.htmlSafe());
+  },
+
+  _updateProgressBar() {
+    const pb = `${"width:" + this.progress + "%"}`.htmlSafe();
+    this.set("progressBar", pb);
+  },
+
   _reset() {
     this.setProperties({ isUploading: false, progress: 0 });
+    this._updateIcon();
+    this._updateProgressBar();
   }
-  })
+});
-);

app/assets/javascripts/admin/templates/components/resumable-upload.hbs

@@ -0,0 +1,3 @@
+{{uploadingIcon}}
+<span class='ru-label'>{{text}}</span>
+<span class='ru-progress' style={{progressBar}}></span>