Add links to tags (#6392)

mozilla · Dec 5, 2024 · 6356696 · 6356696
1 parent d9aa9b1
commit 6356696
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/kitsune/questions/jinja2/questions/question_details.html b/kitsune/questions/jinja2/questions/question_details.html
@@ -402,7 +402,9 @@ <h3 class="sumo-card-heading">{{ _('Post a Reply') }}</h3>
                               data-add-url="{{ url('questions.add_tag_async', question.id) }}"
                               data-remove-url="{{ url('questions.remove_tag_async', question.id) }}">
                         {% for tag in all_tags %}
-                          <option value="{{ tag.id }}" {% if tag in tags %}selected{% endif %}>
+                          <option value="{{ tag.id }}" 
+                                  data-url="{{ url('questions.list', product.slug if product else 'all')|urlparams(tagged=tag.slug) }}"
+                                  {% if tag in question.tags.all() %}selected{% endif %}>
                             {{ tag.name }}
                           </option>
                         {% endfor %}

diff --git a/kitsune/sumo/static/sumo/js/tags.js b/kitsune/sumo/static/sumo/js/tags.js
@@ -30,7 +30,37 @@ document.addEventListener('DOMContentLoaded', () => {
           },
           body: JSON.stringify({ tagId })
         });
+      },
+      render: {
+        item: (data, escape) => {
+          const url = data.url || '#';
+          return `<div>
+                    <a href="${escape(url)}" class="tag-name">${escape(data.text)}</a>
+                  </div>`;
+        },
+        option: (data, escape) => {
+          return `<div>${escape(data.text)}</div>`;
+        }
+      },
+      onInitialize() {
+        Array.from(dropdown.options).forEach(option => {
+          if (!this.options[option.value]) {
+            this.addOption({
+              value: option.value,
+              text: option.text,
+              url: option.dataset.url || '#'
+            });
+          }
+        });
+
+        const container = this.control; // The container for selected items
+        container.addEventListener('click', (event) => {
+          if (event.target.tagName === 'A' && event.target.classList.contains('tag-name')) {
+            event.stopPropagation(); // Prevent Tom Select from intercepting
+            window.location.href = event.target.href;
+          }
+        });
       }
     });
   });
-});
+});
diff --git a/kitsune/sumo/static/sumo/scss/layout/_forum.scss b/kitsune/sumo/static/sumo/scss/layout/_forum.scss
@@ -714,4 +714,16 @@
   &.show~.details {
     display: none;
   }
+}
+
+.item .tag-name {
+  color: rgb(255, 255, 255);
+
+  &:hover {
+    color: rgb(255, 255, 255);
+  }
+
+  &:visited {
+    color: rgb(255, 255, 255);
+  }
 }