REFACTOR: changes from tag synonym feedback

app/assets/javascripts/discourse/components/tag-info.js.es6

@@ -1,10 +1,7 @@
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import showModal from "discourse/lib/show-modal";
-import {
+import { default as discourseComputed } from "discourse-common/utils/decorators";
-  default as discourseComputed,
-  observes
-} from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import { reads, and } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
@@ -43,11 +40,9 @@ export default Component.extend({
     return isEmpty(tagGroupNames) && isEmpty(categories) && isEmpty(synonyms);
   },
 
-  @observes("expanded")
+  didInsertElement() {
-  toggleExpanded() {
+    this._super(...arguments);
-    if (this.expanded && !this.tagInfo) {
+    this.loadTagInfo();
-      this.loadTagInfo();
-    }
   },
 
   loadTagInfo() {
@@ -68,7 +63,8 @@ export default Component.extend({
           result.category_ids.map(id => Category.findById(id))
         );
       })
-      .finally(() => this.set("loading", false));
+      .finally(() => this.set("loading", false))
+      .catch(popupAjaxError);
   },
 
   actions: {
@@ -89,7 +85,7 @@ export default Component.extend({
         type: "DELETE"
       })
         .then(() => this.tagInfo.synonyms.removeObject(tag))
-        .catch(() => bootbox.alert(I18n.t("generic_error")));
+        .catch(popupAjaxError);
     },
 
     deleteSynonym(tag) {
@@ -101,7 +97,7 @@ export default Component.extend({
           tag
             .destroyRecord()
             .then(() => this.tagInfo.synonyms.removeObject(tag))
-            .catch(() => bootbox.alert(I18n.t("generic_error")));
+            .catch(popupAjaxError);
         }
       );
     },

app/assets/javascripts/discourse/templates/components/tag-info.hbs

@@ -1,73 +1,70 @@
-{{#if expanded}}
+<section class="tag-info">
-  <section class="tag-info">
+  {{#if tagInfo}}
-    {{#if tagInfo}}
+    <div class="tag-name">
-      <div class="tag-name">
+      {{discourse-tag tagInfo.name tagName="div" size="large"}}
-        {{discourse-tag tagInfo.name tagName="div" size="large"}}
+      {{#if canAdminTag}}
-        {{#if canAdminTag}}
+        {{d-button class="btn-default" action=(action "renameTag") icon="pencil-alt" label="tagging.rename_tag" id="rename-tag"}}
-          {{d-button class="btn-default" action=(action "renameTag") icon="pencil-alt" label="tagging.rename_tag" id="rename-tag"}}
+        {{d-button class="btn-default" action=(action "toggleEditControls") icon="cog" label="tagging.edit_synonyms" id="edit-synonyms"}}
-          {{d-button class="btn-default" action=(action "toggleEditControls") icon="cog" label="tagging.edit_synonyms" id="edit-synonyms"}}
+        {{#if deleteAction}}
-          {{#if deleteAction}}
+          {{d-button class="btn-danger delete-tag" action=(action "deleteTag") icon="far-trash-alt" label="tagging.delete_tag" id="delete-tag"}}
-            {{d-button class="btn-danger delete-tag" action=(action "deleteTag") icon="far-trash-alt" label="tagging.delete_tag" id="delete-tag"}}
-          {{/if}}
         {{/if}}
-      </div>
+      {{/if}}
-      <div class="tag-associations">
+    </div>
-        {{#if tagInfo.tag_group_names}}
+    <div class="tag-associations">
-          {{tagGroupsInfo}}
+      {{#if tagInfo.tag_group_names}}
-        {{/if}}
+        {{tagGroupsInfo}}
-        {{#if tagInfo.categories}}
+      {{/if}}
-          {{categoriesInfo}}
+      {{#if tagInfo.categories}}
-          <br/>
+        {{categoriesInfo}}
-          {{#each tagInfo.categories as |category|}}
+        <br/>
-            {{category-link category}}
+        {{#each tagInfo.categories as |category|}}
+          {{category-link category}}
+        {{/each}}
+      {{/if}}
+      {{#if nothingToShow}}
+        {{i18n "tagging.default_info"}}
+      {{/if}}
+    </div>
+    {{#if tagInfo.synonyms}}
+      <div class="synonyms-list">
+        <h3>{{i18n "tagging.synonyms"}}</h3>
+        <div>{{{i18n "tagging.synonyms_description" base_tag_name=tagInfo.name}}}</div>
+        <div class="tag-list">
+          {{#each tagInfo.synonyms as |tag|}}
+            <div class='tag-box'>
+              {{discourse-tag tag.id pmOnly=tag.pmOnly tagName="div"}}
+              {{#if editSynonymsMode}}
+                <a {{action "unlinkSynonym" tag}} class="unlink-synonym">
+                  {{d-icon "unlink" title="tagging.remove_synonym"}}
+                </a>
+                <a {{action "deleteSynonym" tag}} class="delete-synonym">
+                  {{d-icon "far-trash-alt" title="tagging.delete_tag"}}
+                </a>
+              {{/if}}
+            </div>
           {{/each}}
-        {{/if}}
-        {{#if nothingToShow}}
-          {{i18n "tagging.default_info"}}
-        {{/if}}
-      </div>
-      {{#if tagInfo.synonyms}}
-        <div class="synonyms-list">
-          <h3>{{i18n "tagging.synonyms"}}</h3>
-          <div>{{{i18n "tagging.synonyms_description" base_tag_name=tagInfo.name}}}</div>
-          <div class="tag-list">
-            {{#each tagInfo.synonyms as |tag|}}
-              <div class='tag-box'>
-                {{discourse-tag tag.id pmOnly=tag.pmOnly tagName="div"}}
-                {{#if editSynonymsMode}}
-                  <a {{action "unlinkSynonym" tag}} class="unlink-synonym">
-                    {{d-icon "unlink" title="tagging.remove_synonym"}}
-                  </a>
-                  <a {{action "deleteSynonym" tag}} class="delete-synonym">
-                    {{d-icon "far-trash-alt" title="tagging.delete_tag"}}
-                  </a>
-                {{/if}}
-              </div>
-            {{/each}}
-          </div>
-          <div class="clearfix" />
         </div>
-      {{/if}}
+      </div>
-      {{#if editSynonymsMode}}
-        <section class="add-synonyms field">
-          <label for="add-synonyms">{{i18n 'tagging.add_synonyms_label'}}</label>
-          {{tag-chooser
-            id="add-synonyms"
-            tags=newSynonyms
-            everyTag=true
-            excludeSynonyms=true
-            excludeHasSynonyms=true
-            unlimitedTagCount=true}}
-        </section>
-        {{d-button
-          class="btn-default"
-          action=(action "addSynonyms")
-          disabled=addSynonymsDisabled
-          label="tagging.add_synonyms"}}
-      {{/if}}
     {{/if}}
-    {{#if loading}}
+    {{#if editSynonymsMode}}
-      <div>{{i18n 'loading'}}</div>
+      <section class="add-synonyms field">
+        <label for="add-synonyms">{{i18n 'tagging.add_synonyms_label'}}</label>
+        {{tag-chooser
+          id="add-synonyms"
+          tags=newSynonyms
+          everyTag=true
+          excludeSynonyms=true
+          excludeHasSynonyms=true
+          unlimitedTagCount=true}}
+      </section>
+      {{d-button
+        class="btn-default"
+        action=(action "addSynonyms")
+        disabled=addSynonymsDisabled
+        label="tagging.add_synonyms"}}
     {{/if}}
-  </section>
+  {{/if}}
-{{/if}}
+  {{#if loading}}
+    <div>{{i18n 'loading'}}</div>
+  {{/if}}
+</section>

app/assets/javascripts/discourse/templates/tags/show.hbs

@@ -46,8 +46,8 @@
   </div>
 </div>
 
-{{#if showToggleInfo}}
+{{#if showInfo}}
-  {{tag-info tag=tag expanded=showInfo list=list deleteAction=(action "deleteTag")}}
+  {{tag-info tag=tag list=list deleteAction=(action "deleteTag")}}
 {{/if}}
 
 {{plugin-outlet name="discovery-list-container-top"}}

app/assets/stylesheets/common/base/tagging.scss

@@ -280,6 +280,7 @@ header .discourse-tag {
   .add-synonyms,
   .tag-associations {
     margin-top: 1em;
+    clear: both;
   }
   .tag-list {
     border: none;