Merge pull request #6462 from akatsoulas/survey-tabs-ui

Remove containers from other tabs if user has voted

kitsune/sumo/static/sumo/js/survey_form.js

@@ -1,3 +1,32 @@
+const channel = new BroadcastChannel('closeSurveyWidgets');
+
+document.addEventListener('closeSurveyWidgets', (event) => {
+    const post_message = {
+        url: event.detail.url,
+        message: 'closeSurveyWidgets'
+    }
+    channel.postMessage(post_message);
+
+});
+
+channel.onmessage = (event) => {
+    // remove all survey containers from non active tabs if the url matches with active tab
+    if (event.data.message === 'closeSurveyWidgets') {
+        const elements = document.querySelectorAll('.document-vote');
+        const matchAny = Array.from(elements).some(element => {
+            // Extract the KB slug from both URLs
+            const elementKbSlug = element.dataset.pageUrl.match(/kb\/([^/]+)/)?.[1];
+            const eventKbSlug = event.data.url.match(/kb\/([^/]+)/)?.[1];
+
+            return elementKbSlug?.toLowerCase() === eventKbSlug?.toLowerCase();
+        });
+        if (matchAny) {
+            elements.forEach(element => element.remove());
+        }
+    }
+}
+
+
 document.addEventListener('alpine:init', () => {
     Alpine.data('surveyForm', () => ({
         selectedReason: '',

kitsune/wiki/jinja2/wiki/includes/document_macros.html

@@ -352,7 +352,7 @@ <h3 class="{% if close_button %}sumo-card-heading{% else %}sidebar-subheading fo
     {% set header = _('Was this article helpful?') %}
   {% endif %}
   {% if document.allows_vote(request) and not document.current_revision.has_voted(request) %}
-    <div class="document-vote elevation-02 text-center">
+    <div class="document-vote elevation-02 text-center" data-page-url="{{ request.path }}">
       <form class="document-vote--form helpful"
             hx-post="{{ url('wiki.document_vote', document_slug=document.slug) }}"
             hx-indicator=".wait"

kitsune/wiki/views.py

@@ -1360,7 +1360,9 @@ def handle_vote(request, document_slug):
 
     if request.headers.get("HX-Request") and survey_context:
         survey_html = render_to_string("wiki/includes/survey_form.html", survey_context, request)
-        return HttpResponse(survey_html)
+        response = HttpResponse(survey_html)
+        response["HX-Trigger"] = json.dumps({"closeSurveyWidgets": {"url": request.path}})
+        return response
     return HttpResponseRedirect(revision.document.get_absolute_url())