From 6356696689649f9f0d5f1b40ba664803f8394f80 Mon Sep 17 00:00:00 2001
From: Tasos Katsoulas <akatsoulas@gmail.com>
Date: Fri, 6 Dec 2024 00:07:18 +0200
Subject: [PATCH] Add links to tags (#6392)

---
 .../jinja2/questions/question_details.html    |  4 ++-
 kitsune/sumo/static/sumo/js/tags.js           | 32 ++++++++++++++++++-
 .../sumo/static/sumo/scss/layout/_forum.scss  | 12 +++++++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/kitsune/questions/jinja2/questions/question_details.html b/kitsune/questions/jinja2/questions/question_details.html
index af0ae25307e..f3dd264d2e4 100644
--- 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
index 119116c2bf9..4d5b64c9b0b 100644
--- 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;
+          }
+        });
       }
     });
   });
-});
+});
\ No newline at end of file
diff --git a/kitsune/sumo/static/sumo/scss/layout/_forum.scss b/kitsune/sumo/static/sumo/scss/layout/_forum.scss
index 3a0839aa957..eeffdcae3fc 100644
--- 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);
+  }
 }
\ No newline at end of file