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,112 +19,124 @@ import {
         uploadText="UPLOAD"
     }}
 **/
-export default Component.extend(
+export default Component.extend({
-  bufferedRender({
+  tagName: "button",
-    tagName: "button",
+  classNames: ["btn", "ru"],
-    classNames: ["btn", "ru"],
+  classNameBindings: ["isUploading"],
-    classNameBindings: ["isUploading"],
+  attributeBindings: ["translatedTitle:title"],
-    attributeBindings: ["translatedTitle:title"],
+  resumable: null,
-    resumable: null,
+  isUploading: false,
-    isUploading: false,
+  progress: 0,
-    progress: 0,
+  rerenderTriggers: ["isUploading", "progress"],
-    rerenderTriggers: ["isUploading", "progress"],
+  uploadingIcon: null,
+  progressBar: null,
 
-    @on("init")
+  @on("init")
-    _initialize() {
+  _initialize() {
-      this.resumable = new Resumable({
+    this.resumable = new Resumable({
-        target: Discourse.getURL(this.target),
+      target: Discourse.getURL(this.target),
-        maxFiles: 1, // only 1 file at a time
+      maxFiles: 1, // only 1 file at a time
-        headers: {
+      headers: {
-          "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")
+        "X-CSRF-Token": document.querySelector("meta[name='csrf-token']")
-            .content
+          .content
-        }
-      });
-
-      this.resumable.on("fileAdded", () => {
-        // automatically upload the selected file
-        this.resumable.upload();
-
-        // mark as uploading
-        later(() => this.set("isUploading", true));
-      });
-
-      this.resumable.on("fileProgress", file => {
-        // update progress
-        later(() => this.set("progress", parseInt(file.progress() * 100, 10)));
-      });
-
-      this.resumable.on("fileSuccess", file => {
-        later(() => {
-          // mark as not uploading anymore
-          this._reset();
-
-          // fire an event to allow the parent route to reload its model
-          this.success(file.fileName);
-        });
-      });
-
-      this.resumable.on("fileError", (file, message) => {
-        later(() => {
-          // mark as not uploading anymore
-          this._reset();
-
-          // fire an event to allow the parent route to display the error message
-          this.error(file.fileName, message);
-        });
-      });
-    },
-
-    @on("didInsertElement")
-    _assignBrowse() {
-      schedule("afterRender", () =>
-        this.resumable.assignBrowse($(this.element))
-      );
-    },
-
-    @on("willDestroyElement")
-    _teardown() {
-      if (this.resumable) {
-        this.resumable.cancel();
-        this.resumable = null;
       }
-    },
+    });
 
-    @discourseComputed("title", "text")
+    this.resumable.on("fileAdded", () => {
-    translatedTitle(title, text) {
+      // automatically upload the selected file
-      return title ? I18n.t(title) : text;
+      this.resumable.upload();
-    },
 
-    @discourseComputed("isUploading", "progress")
+      // mark as uploading
-    text(isUploading, progress) {
+      later(() => {
-      if (isUploading) {
+        this.set("isUploading", true);
-        return progress + " %";
+        this._updateIcon();
-      } else {
+      });
-        return this.uploadText;
+    });
-      }
-    },
 
-    buildBuffer(buffer) {
+    this.resumable.on("fileProgress", file => {
-      const icon = this.isUploading ? "times" : "upload";
+      // update progress
-      buffer.push(iconHTML(icon));
+      later(() => {
-      buffer.push("<span class='ru-label'>" + this.text + "</span>");
+        this.set("progress", parseInt(file.progress() * 100, 10));
-      buffer.push(
+        this._updateProgressBar();
-        "<span class='ru-progress' style='width:" + this.progress + "%'></span>"
+      });
-      );
+    });
-    },
 
-    click() {
+    this.resumable.on("fileSuccess", file => {
-      if (this.isUploading) {
+      later(() => {
-        this.resumable.cancel();
+        // mark as not uploading anymore
-        later(() => this._reset());
+        this._reset();
-        return false;
-      } else {
-        return true;
-      }
-    },
 
-    _reset() {
+        // fire an event to allow the parent route to reload its model
-      this.setProperties({ isUploading: false, progress: 0 });
+        this.success(file.fileName);
+      });
+    });
+
+    this.resumable.on("fileError", (file, message) => {
+      later(() => {
+        // mark as not uploading anymore
+        this._reset();
+
+        // fire an event to allow the parent route to display the error message
+        this.error(file.fileName, message);
+      });
+    });
+  },
+
+  @on("didInsertElement")
+  _assignBrowse() {
+    schedule("afterRender", () => this.resumable.assignBrowse($(this.element)));
+  },
+
+  @on("willDestroyElement")
+  _teardown() {
+    if (this.resumable) {
+      this.resumable.cancel();
+      this.resumable = null;
     }
-  })
+  },
-);
+
+  @discourseComputed("title", "text")
+  translatedTitle(title, text) {
+    return title ? I18n.t(title) : text;
+  },
+
+  @discourseComputed("isUploading", "progress")
+  text(isUploading, progress) {
+    if (isUploading) {
+      return progress + " %";
+    } else {
+      return this.uploadText;
+    }
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this._updateIcon();
+  },
+
+  click() {
+    if (this.isUploading) {
+      this.resumable.cancel();
+      later(() => this._reset());
+      return false;
+    } else {
+      return true;
+    }
+  },
+
+  _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>