From 10c6211cdf06257d89e2cfb594537d293b161f1f Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Mon, 12 Nov 2018 15:55:56 +0800
Subject: [PATCH] UX: Trash icon displaying when there is no upload.

---
 .../discourse/components/image-uploader.js.es6     |  6 ++++++
 .../javascripts/discourse/mixins/upload.js.es6     |  9 +++++----
 .../templates/components/image-uploader.hbs        |  2 +-
 .../components/image-uploader-test.js.es6          | 14 ++++++++++++++
 4 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 test/javascripts/components/image-uploader-test.js.es6

diff --git a/app/assets/javascripts/discourse/components/image-uploader.js.es6 b/app/assets/javascripts/discourse/components/image-uploader.js.es6
index dd5c0afda20..4abcc3ee5b1 100644
--- a/app/assets/javascripts/discourse/components/image-uploader.js.es6
+++ b/app/assets/javascripts/discourse/components/image-uploader.js.es6
@@ -9,9 +9,15 @@ export default Em.Component.extend(UploadMixin, {
     if (Em.isNone(imageUrl)) {
       return "".htmlSafe();
     }
+
     return `background-image: url(${imageUrl})`.htmlSafe();
   },
 
+  @computed("backgroundStyle")
+  hasBackgroundStyle(backgroundStyle) {
+    Ember.isEmpty(backgroundStyle);
+  },
+
   validateUploadedFilesOptions() {
     return { imagesOnly: true };
   },
diff --git a/app/assets/javascripts/discourse/mixins/upload.js.es6 b/app/assets/javascripts/discourse/mixins/upload.js.es6
index d3e37021871..5937135b31a 100644
--- a/app/assets/javascripts/discourse/mixins/upload.js.es6
+++ b/app/assets/javascripts/discourse/mixins/upload.js.es6
@@ -18,9 +18,8 @@ export default Em.Mixin.create({
 
   calculateUploadUrl() {
     return (
-      getUrl(this.getWithDefault("uploadUrl", "/uploads")) +
-      ".json?client_id=" +
-      this.messageBus.clientId +
+      +".json?client_id=" +
+      (this.messageBus && this.messageBus.clientId) +
       "&authenticity_token=" +
       encodeURIComponent(Discourse.Session.currentProp("csrfToken"))
     );
@@ -99,7 +98,9 @@ export default Em.Mixin.create({
   }.on("didInsertElement"),
 
   _destroy: function() {
-    this.messageBus.unsubscribe("/uploads/" + this.get("type"));
+    this.messageBus &&
+      this.messageBus.unsubscribe("/uploads/" + this.get("type"));
+
     const $upload = this.$();
     try {
       $upload.fileupload("destroy");
diff --git a/app/assets/javascripts/discourse/templates/components/image-uploader.hbs b/app/assets/javascripts/discourse/templates/components/image-uploader.hbs
index 938be5c503c..977b4c67319 100644
--- a/app/assets/javascripts/discourse/templates/components/image-uploader.hbs
+++ b/app/assets/javascripts/discourse/templates/components/image-uploader.hbs
@@ -4,7 +4,7 @@
       {{d-icon "picture-o"}}
       <input class="hidden-upload-field" disabled={{uploading}} type="file" accept="image/*" />
     </label>
-    {{#if backgroundStyle}}
+    {{#if hasBackgroundStyle}}
       <button {{action "trash"}} class="btn btn-danger pad-left no-text">{{d-icon "trash-o"}}</button>
     {{/if}}
     <span class="btn {{unless uploading 'hidden'}}">{{i18n 'upload_selector.uploading'}} {{uploadProgress}}%</span>
diff --git a/test/javascripts/components/image-uploader-test.js.es6 b/test/javascripts/components/image-uploader-test.js.es6
new file mode 100644
index 00000000000..223fe39c8d8
--- /dev/null
+++ b/test/javascripts/components/image-uploader-test.js.es6
@@ -0,0 +1,14 @@
+import componentTest from "helpers/component-test";
+moduleForComponent("image-uploader", { integration: true });
+
+componentTest("without image", {
+  template: "{{image-uploader}}",
+
+  test(assert) {
+    assert.equal(
+      this.$(".d-icon-trash-o").length,
+      0,
+      "it does not display trash icon"
+    );
+  }
+});