Replace deprecated dropdown-button with DropdownSelectBoxComponent (#6451)

app/assets/javascripts/application.js

@@ -73,7 +73,6 @@
 //= require ./discourse/controllers/discovery-sortable
 //= require ./discourse/controllers/navigation/default
 //= require ./discourse/components/edit-category-panel
-//= require ./discourse/components/dropdown-button
 //= require ./discourse/lib/link-mentions
 //= require ./discourse/components/site-header
 //= require ./discourse/components/d-editor

app/assets/javascripts/discourse/components/dropdown-button.js.es6

@@ -1,78 +0,0 @@
-import { iconHTML } from "discourse-common/lib/icon-library";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
-
-export default Ember.Component.extend(
-  bufferedRender({
-    classNameBindings: [":btn-group", "hidden"],
-    rerenderTriggers: ["text", "longDescription"],
-
-    _bindClick: function() {
-      // If there's a click handler, call it
-      if (this.clicked) {
-        const self = this;
-        this.$().on("click.dropdown-button", "ul li", function(e) {
-          e.preventDefault();
-          if ($(e.currentTarget).data("id") !== self.get("activeItem")) {
-            self.clicked($(e.currentTarget).data("id"));
-          }
-          self.$(".dropdown-toggle").dropdown("toggle");
-          return false;
-        });
-      }
-    }.on("didInsertElement"),
-
-    _unbindClick: function() {
-      this.$().off("click.dropdown-button", "ul li");
-    }.on("willDestroyElement"),
-
-    buildBuffer(buffer) {
-      const title = this.get("title");
-      if (title) {
-        buffer.push("<h4 class='title'>" + title + "</h4>");
-      }
-
-      buffer.push(
-        `<button class='btn standard dropdown-toggle ${this.get(
-          "buttonExtraClasses"
-        ) || ""}' data-toggle='dropdown'>${this.get("text")}</button>`
-      );
-      buffer.push("<ul class='dropdown-menu'>");
-
-      const contents = this.get("dropDownContent");
-      if (contents) {
-        const self = this;
-        contents.forEach(function(row) {
-          const id = row.id,
-            className = self.get("activeItem") === id ? "disabled" : "";
-
-          buffer.push(
-            '<li data-id="' + id + '" class="' + className + '"><a href>'
-          );
-
-          if (row.icon) {
-            let iconClass = "icon";
-            if (row.iconClass) {
-              iconClass += ` ${row.iconClass}`;
-            }
-            buffer.push(
-              iconHTML(row.icon, { tagName: "span", class: iconClass })
-            );
-          }
-
-          buffer.push("<div><span class='title'>" + row.title + "</span>");
-          buffer.push("<span>" + row.description + "</span></div>");
-          buffer.push("</a></li>");
-        });
-      }
-
-      buffer.push("</ul>");
-
-      const desc = this.get("longDescription");
-      if (desc) {
-        buffer.push("<p>");
-        buffer.push(desc);
-        buffer.push("</p>");
-      }
-    }
-  })
-);

app/assets/javascripts/discourse/components/group-member-dropdown.js.es6

@@ -1,19 +1,22 @@
-import { iconHTML } from "discourse-common/lib/icon-library";
-import DropdownButton from "discourse/components/dropdown-button";
 import computed from "ember-addons/ember-computed-decorators";
+import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
 
-export default DropdownButton.extend({
+export default DropdownSelectBoxComponent.extend({
-  buttonExtraClasses: "no-text",
+  pluginApiIdentifiers: ["group-member-dropdown"],
-  title: "",
+  classNames: "group-member-dropdown",
-  text: iconHTML("wrench"),
+  showFullTitle: false,
-  classNames: ["group-member-dropdown"],
+  allowInitialValueMutation: false,
+  allowAutoSelectFirst: false,
+  headerIcon: ["wrench"],
+
+  autoHighlight() {},
 
   @computed("member.owner")
-  dropDownContent(isOwner) {
+  content(isOwner) {
     const items = [
       {
         id: "removeMember",
-        title: I18n.t("groups.members.remove_member"),
+        name: I18n.t("groups.members.remove_member"),
         description: I18n.t("groups.members.remove_member_description", {
           username: this.get("member.username")
         }),
@@ -25,7 +28,7 @@ export default DropdownButton.extend({
       if (isOwner) {
         items.push({
           id: "removeOwner",
-          title: I18n.t("groups.members.remove_owner"),
+          name: I18n.t("groups.members.remove_owner"),
           description: I18n.t("groups.members.remove_owner_description", {
             username: this.get("member.username")
           }),
@@ -34,7 +37,7 @@ export default DropdownButton.extend({
       } else {
         items.push({
           id: "makeOwner",
-          title: I18n.t("groups.members.make_owner"),
+          name: I18n.t("groups.members.make_owner"),
           description: I18n.t("groups.members.make_owner_description", {
             username: this.get("member.username")
           }),
@@ -46,7 +49,7 @@ export default DropdownButton.extend({
     return items;
   },
 
-  clicked(id) {
+  mutateValue(id) {
     switch (id) {
       case "removeMember":
         this.sendAction("removeMember", this.get("member"));

app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6

@@ -1,23 +1,24 @@
-import { iconHTML } from "discourse-common/lib/icon-library";
+import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import DropdownButton from "discourse/components/dropdown-button";
-import computed from "ember-addons/ember-computed-decorators";
 
-export default DropdownButton.extend({
+export default DropdownSelectBoxComponent.extend({
-  buttonExtraClasses: "no-text",
+  pluginApiIdentifiers: ["tags-admin-dropdown"],
-  title: "",
+  classNames: "tags-admin-dropdown",
-  text: iconHTML("bars") + " " + iconHTML("caret-down"),
+  showFullTitle: false,
-  classNames: ["tags-admin-menu"],
+  allowInitialValueMutation: false,
+  headerIcon: ["bars", "caret-down"],
 
-  @computed()
+  autoHighlight() {},
-  dropDownContent() {
+
+  computeContent() {
     const items = [
       {
         id: "manageGroups",
-        title: I18n.t("tagging.manage_groups"),
+        name: I18n.t("tagging.manage_groups"),
         description: I18n.t("tagging.manage_groups_description"),
         icon: "wrench"
       }
     ];
+
     return items;
   },
 
@@ -25,7 +26,7 @@ export default DropdownButton.extend({
     manageGroups: "showTagGroups"
   },
 
-  clicked(id) {
+  mutateValue(id) {
-    this.sendAction("actionNames." + id);
+    this.sendAction(`actionNames.${id}`);
   }
 });

app/assets/stylesheets/common/base/_topic-list.scss

@@ -33,6 +33,7 @@
       }
     }
     &.categories-admin-dropdown,
+    &.tags-admin-dropdown,
     &.category-notifications-button,
     &.tag-notifications-button {
       float: right;

app/assets/stylesheets/common/components/group-member-dropdown.scss

@@ -0,0 +1,3 @@
+.group-member-dropdown {
+  text-align: left;
+}

app/assets/stylesheets/desktop/components/group-member-dropdown.scss

@@ -1,9 +0,0 @@
-.group-member-dropdown {
-  ul {
-    width: 250px;
-    top: 27px;
-    bottom: auto;
-    left: -217px;
-    text-align: left;
-  }
-}

app/assets/stylesheets/mobile/components/group-member-dropdown.scss

@@ -1,9 +0,0 @@
-.group-member-dropdown {
-  ul {
-    position: absolute;
-    top: 27px;
-    width: 250px;
-    bottom: auto;
-    text-align: left;
-  }
-}