FEATURE: Add highlight to dropdown options (#18)

* FEATURE: Add highlight to dropdown options

* FEATURE: Add highlight to dropdown when it matches highlight url property

* DEV: refactor new-topic-dropdown to highlight the correct button

* DEV: move functions to service

* DEV: lint schema.rb and remove unsed import in js

* DEV: Add tests to ensure that the dropdown button is highlighted

assets/javascripts/discourse/components/new-topic-dropdown.js

@@ -1,4 +1,3 @@
-import { computed } from "@ember/object";
 import { getOwner } from "@ember/owner";
 import { inject as service } from "@ember/service";
 import Composer from "discourse/models/composer";
@@ -8,6 +7,7 @@ export default DropdownSelectBoxComponent.extend({
   classNames: ["new-topic-dropdown"],
   siteSettings: service(),
   historyStore: service(),
+  dropdownButtons: service(),
 
   selectKitOptions: {
     icon: "plus",
@@ -18,10 +18,9 @@ export default DropdownSelectBoxComponent.extend({
     none: "topic.create",
   },
 
-  content: computed("new-topic", function () {
-    return this.currentUser.topic_preset_buttons;
-  }),
-
+  get content() {
+    return this.dropdownButtons.buttons;
+  },
   actions: {
     onChange(selectedAction) {
       const composerController = getOwner(this).lookup("controller:composer");

assets/javascripts/discourse/initializers/initializer_composer_tag_groups.js

@@ -7,6 +7,10 @@ export default {
     Composer.serializeOnCreate("tags_to_add");
 
     withPluginApi("0.8.12", (api) => {
+      api.onPageChange(() =>
+        api.container.lookup("service:dropdown-buttons").refreshButtons()
+      );
+
       api.modifyClass("model:composer", {
         pluginId: "preset-topic-composer-initializer",
         tag_groups: {},

assets/javascripts/discourse/services/dropdown-buttons.js

@@ -0,0 +1,78 @@
+import { tracked } from "@glimmer/tracking";
+import Service, { service } from "@ember/service";
+import { TrackedArray } from "@ember-compat/tracked-built-ins";
+
+export default class DropdownButtonsService extends Service {
+  @service router;
+  @service currentUser;
+  @tracked buttons = new TrackedArray();
+
+  constructor() {
+    super(...arguments);
+    this.refreshButtons();
+  }
+
+  refreshButtons() {
+    this.buttons = new TrackedArray(
+      this.currentUser.topic_preset_buttons
+        .map((b) => ({
+          ...b,
+          highlightUrls: b.highlightUrls || [],
+        }))
+        .map((button) => {
+          if (
+            this.#shouldHighlightByCategoryID(button.categoryId) ||
+            button.highlightUrls.some((url) => this.#shouldHighlightByURL(url))
+          ) {
+            button.classNames = "is-highlighted";
+          }
+          return button;
+        })
+    );
+  }
+
+  #shouldHighlightByURL(url) {
+    // case 1 - url does not contain *, e.g. example, it should match exact url "example"
+    // case 2 - url starts and ends with *, e.g. *example*, it should match any url containing "example"
+    // case 3 - url starts with *, e.g. *example, it should match any url ending with "example"
+    // case 4 - url ends with *, e.g. example*, it should match any url starting with "example"
+
+    const startsWithStar = url.startsWith("*");
+    const endsWithStar = url.endsWith("*");
+    const exactMatch = !startsWithStar && !endsWithStar;
+
+    if (exactMatch) {
+      return url === this.router.currentURL;
+    }
+
+    if (startsWithStar && endsWithStar) {
+      return this.router.currentURL.includes(url.replace(/\*/g, ""));
+    }
+
+    if (startsWithStar) {
+      return this.router.currentURL.endsWith(url.replace(/\*/g, ""));
+    }
+
+    if (endsWithStar) {
+      return this.router.currentURL.startsWith(url.replace(/\*/g, ""));
+    }
+
+    return false;
+  }
+
+  #shouldHighlightByCategoryID(categoryId) {
+    const isCategoryRoute =
+      this.router.currentRoute.localName === "category" &&
+      this.router.currentURL.startsWith("/c/");
+    if (!isCategoryRoute) {
+      return false;
+    }
+
+    const currentCategory = Number(this.router.currentURL.split("/").at(-1));
+    if (isNaN(currentCategory)) {
+      return false;
+    }
+
+    return categoryId === currentCategory;
+  }
+}

lib/discourse_preset_topic_composer/site_settings/button_types_json_schema.rb

@@ -37,9 +37,19 @@ def self.schema
                 title: "Category ID",
                 type: "number",
                 description:
-                  "Enter the category ID this topic should be created in. Set to 0 to enable all categories.",
+                  "Enter the category ID this topic should be created in, it will highlight button if in category. Set to 0 to enable all categories.",
                 minimum: 0,
               },
+              highlightUrls: {
+                title: "Url patterns to highlight button",
+                type: "array",
+                uniqueItems: true,
+                items: {
+                  type: "string",
+                  description:
+                    "Use * as wildcard, i.e. /tag/food* to match all urls that start with /tag/food* or *pizza* to match all urls with pizza in the url.",
+                },
+              },
               tags: {
                 title: "Tags",
                 type: "string",

spec/system/page_objects/components/preset_topic_dropdown.rb

@@ -9,7 +9,10 @@ def select(title)
       end
 
       def button
-        @button ||= find(".select-kit.single-select.dropdown-select-box .select-kit-header")
+        @button ||=
+          find(".new-topic-dropdown").find(
+            ".select-kit.single-select.dropdown-select-box .select-kit-header",
+          )
       end
     end
   end

spec/system/preset_topic_composer_spec.rb

@@ -35,6 +35,7 @@ def self.add_new_json(json)
         "showTags" => false,
         "tags" => "",
         "access" => "",
+        :highlightUrls => %w[/tag/*],
       },
     )
     SiteSettingHelper.add_new_json(
@@ -212,5 +213,24 @@ def self.add_new_json(json)
 
       expect(preset_input.get_first_label).to eq(tag1.name)
     end
+
+    it "should add is-highlighted class to the button when in matching url" do
+      visit "/tag/#{tag1.name}"
+      PageObjects::Components::PresetTopicDropdown.new.button.click
+
+      button = find(:css, ".is-highlighted")
+      expect(button).to have_text("New Question2")
+    end
+
+    it "should add is-highlighted class to the button when in categoryId" do
+      visit "/c/#{cat.slug}"
+      PageObjects::Components::PresetTopicDropdown.new.button.click
+
+      button = find("li[title='New Question2']")
+      expect(button[:class]).to include("is-highlighted")
+
+      button = find("li[title='New Question3']")
+      expect(button[:class]).to include("is-highlighted")
+    end
   end
 end