UX: implements a new tags-intersection-chooser (#12139)

app/assets/javascripts/discourse/app/components/tag-heading.js

@@ -1,4 +0,0 @@
-import Component from "@ember/component";
-export default Component.extend({
-  tagName: "",
-});

app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs

@@ -15,12 +15,24 @@
 {{/each}}
 
 {{#if siteSettings.tagging_enabled}}
-  {{#unless additionalTags}}
-    {{!-- the tag filter doesn't work with tag intersections, so hide it --}}
-    {{#if siteSettings.show_filter_by_tag}}
-      {{tag-drop currentCategory=category noSubcategories=noSubcategories tagId=tag.id}}
+  {{#if siteSettings.show_filter_by_tag}}
+    {{#if additionalTags}}
+      {{tags-intersection-chooser
+        currentCategory=category
+        mainTag=tag.id
+        additionalTags=additionalTags
+        options=(hash
+          categoryId=category.id
+        )
+      }}
+    {{else}}
+      {{tag-drop
+        currentCategory=category
+        noSubcategories=noSubcategories
+        tagId=tag.id
+      }}
     {{/if}}
-  {{/unless}}
+  {{/if}}
 {{/if}}
 
 {{plugin-outlet name="bread-crumbs-right" connectorTagName="li" tagName=""}}

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

@@ -1,11 +0,0 @@
-<h2 class="tag-show-heading">
-  {{#link-to "tags"}}
-    {{i18n "tagging.tags"}}
-  {{/link-to}}
-  {{d-icon "angle-right"}}
-  {{discourse-tag-bound tagRecord=tag style="simple"}}
-  {{#each additionalTags as |tag|}}
-    <span>&amp;</span>
-    {{discourse-tag tag style="simple"}}
-  {{/each}}
-</h2>

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

@@ -7,15 +7,6 @@
     <div class="container">
       <section class="navigation-container tag-navigation">
 
-        {{#if showTagFilter}}
-          {{#if additionalTags}}
-            {{!-- Tag intersections don't work with the tag filter, so show the tag heading instead --}}
-            {{tag-heading tag=tag additionalTags=additionalTags}}
-          {{/if}}
-        {{else}}
-          {{tag-heading tag=tag additionalTags=additionalTags}}
-        {{/if}}
-
         {{d-navigation
           filterMode=filterMode
           canCreateTopic=canCreateTopic

app/assets/javascripts/select-kit/addon/components/tags-intersection-chooser.js

@@ -0,0 +1,43 @@
+import DiscourseURL from "discourse/lib/url";
+import MiniTagChooser from "select-kit/components/mini-tag-chooser";
+import { makeArray } from "discourse-common/lib/helpers";
+import { action } from "@ember/object";
+
+export default MiniTagChooser.extend({
+  pluginApiIdentifiers: ["tags-intersection-chooser"],
+  attributeBindings: ["selectKit.options.categoryId:category-id"],
+  classNames: ["tags-intersection-chooser"],
+
+  mainTag: null,
+  additionalTags: null,
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    this.set(
+      "value",
+      makeArray(this.mainTag).concat(makeArray(this.additionalTags))
+    );
+  },
+
+  @action
+  onChange(tags) {
+    if (tags.includes(this.mainTag)) {
+      const remainingTags = tags.filter((t) => t !== this.mainTag);
+
+      if (remainingTags.length >= 1) {
+        DiscourseURL.routeTo(
+          `/tags/intersection/${this.mainTag}/${remainingTags.join("/")}`
+        );
+      } else {
+        DiscourseURL.routeTo("/tags");
+      }
+    } else {
+      if (tags.length >= 2) {
+        DiscourseURL.routeTo(`/tags/intersection/${tags.join("/")}`);
+      } else {
+        DiscourseURL.routeTo("/tags");
+      }
+    }
+  },
+});

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

@@ -31,20 +31,6 @@
   }
 }
 
-.tag-show-heading {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: hidden;
-  width: 100%;
-  .d-icon,
-  span {
-    margin: 0 0.25em;
-  }
-}
-
 .topic-category {
   display: flex;
   flex-wrap: wrap;
@@ -315,3 +301,9 @@ section.tag-info {
     }
   }
 }
+
+.tag-navigation {
+  .mini-tag-chooser.tags-intersection-chooser {
+    margin: 0 0.5em 0 0;
+  }
+}