feat: add dismiss button to survey report banner

lms/templates/admin/base_site.html

@@ -1,5 +1,5 @@
 {% extends "admin/base.html" %}
-{% load i18n admin_urls %}
+{% load i18n admin_urls static %}
 {% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
 {% block branding %}
 <h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
@@ -21,6 +21,10 @@ <h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('D
 
 {% endblock %}
 
+{% block extrahead %}
+<script src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
+{% endblock %}
+
 {% block messages %}{{ block.super }}
     {% include "survey_report/admin_banner.html" %}
 {% endblock %}

openedx/features/survey_report/static/survey_report/js/admin_banner.js

@@ -0,0 +1,37 @@
+$(document).ready(function(){
+  $('#dismissButton').click(function() {
+    $('#originalContent').slideUp('slow', function() {
+      // If you want to do something after the slide-up, do it here.
+      // For example, you can hide the entire div:
+      // $(this).hide();
+    });
+  });
+  // When the form is submitted
+  $("#survey_report_form").submit(function(event){
+    event.preventDefault();  // Prevent the form from submitting traditionally
+
+    // Make the AJAX request
+    $.ajax({
+      url: $(this).attr("action"),
+      type: $(this).attr("method"),
+      data: $(this).serialize(),
+      success: function(response){
+        // Hide the original content block
+        $("#originalContent").slideUp(400, function() {
+          //$(this).css('display', 'none');
+          // Show the thank-you message block with slide down effect
+          $("#thankYouMessage").slideDown(400, function() {
+            // Wait for 3 seconds (3000 milliseconds) and then slide up the thank-you message
+            setTimeout(function() {
+              $("#thankYouMessage").slideUp(400);
+              }, 3000);
+          });
+        });
+        },
+      error: function(error){
+        // Handle any errors
+        console.error("Error sending report:", error);
+      }
+    });
+  });
+});

openedx/features/survey_report/templates/survey_report/admin_banner.html

@@ -1,4 +1,5 @@
 {% block survey_report_banner %}
+{% load static %}
 {% if show_survey_report_banner %}
 <div id="originalContent" style="border: 3px solid #06405d; margin-bottom: 50px; rgb(0 0 0 / 18%) 0px 3px 5px;">
   <div  style="background-color: #06405d;padding: 17px 37px;">
@@ -11,11 +12,25 @@ <h1 style="margin: 0; color: #FFFF; font-weight: 600;">Join the Open edX Data Sh
     <p>If you agree and want to send a report you can click the button below. You can always send reports and see the status of reports you have sent in the past at <a href="/admin/survey_report/surveyreport/">admin/survey_report/surveyreport/</a> .</p>
 </div>
 <div style="display: flex; justify-content: flex-end; padding: 0 37px 17px;">
-   <form id='survey_report_form' method="POST" action="/survey_report/generate_report" style="margin: 0; padding: 0;">
+   <button id="dismissButton" type="button" style="background-color:var(--close-button-bg); color: var(--button-fg); border: none; border-radius: 4px; padding: 10px 20px; margin-right: 10px; cursor: pointer;">Dismiss</button>
+    <form id='survey_report_form' method="POST" action="/survey_report/generate_report" style="margin: 0; padding: 0;">
         {% csrf_token %}
         <button type="submit" style="background-color: #377D4D; color: var(--button-fg); border: none; border-radius: 4px; padding: 10px 20px; cursor: pointer;">Send Report</button>
     </form>
 </div>
 </div>
+<div id="thankYouMessage" style="display: none; background-color: var(--darkened-bg); padding: 20px 40px; margin-bottom: 30px;box-shadow: rgb(0 0 0 / 18%) 0px 3px 5px;">
+    <div style="display: flex; align-items: center;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
+            <g fill="#377D4D"><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10Z"></path>
+                <path d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.236L14.97 8.97a.75.75 0 0 1 1.06 0Z" fill="#FFF"></path>
+            </g>
+        </svg>
+        <span style="font-size: 16px; margin-left: 15px;">Thank you for your collaboration and support! Your contribution is greatly appreciated and will help us continue to improve.</span>
+    </div>
+</div>
 {% endif %}
+
+<script src="{% static 'survey_report/js/admin_banner.js' %}"></script>
+
 {% endblock %}