From de5b142b743ecd96d7525fafbbd6566a6224ee0f Mon Sep 17 00:00:00 2001
From: Alina Derkach <alina.derkach@percona.com>
Date: Fri, 31 Oct 2025 16:30:19 +0100
Subject: [PATCH] PS-10248 Test and implement the feedback form (8.4) 
 modified:   _resourcepdf/overrides/main.html 	new file:  
 _resourcepdf/overrides/partials/rating.html 	new file:  
 docs/css/rating.css 	new file:   docs/js/rating.js 	modified:  
 mkdocs-base.yml 	modified:   mkdocs.yml

---
 _resourcepdf/overrides/main.html            |   3 +
 _resourcepdf/overrides/partials/rating.html | 191 ++++++++++++++++++++
 docs/css/rating.css                         |  43 +++++
 docs/js/rating.js                           | 168 +++++++++++++++++
 mkdocs-base.yml                             |   2 +
 mkdocs.yml                                  |  13 --
 6 files changed, 407 insertions(+), 13 deletions(-)
 create mode 100644 _resourcepdf/overrides/partials/rating.html
 create mode 100644 docs/css/rating.css
 create mode 100644 docs/js/rating.js

diff --git a/_resourcepdf/overrides/main.html b/_resourcepdf/overrides/main.html
index c8a27d1ea40..785594c5b48 100644
--- a/_resourcepdf/overrides/main.html
+++ b/_resourcepdf/overrides/main.html
@@ -49,6 +49,9 @@
                 {% endif %}
                 <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
                   <div class="md-sidebar__scrollwrap">
+                    <div class="md-sidebar__inner">
+                      {% include "partials/rating.html" %}
+                    </div> 
                     <div class="md-sidebar__inner">
                       {% include "partials/edit.html" %}
                     </div>
diff --git a/_resourcepdf/overrides/partials/rating.html b/_resourcepdf/overrides/partials/rating.html
new file mode 100644
index 00000000000..ff6a2cd9642
--- /dev/null
+++ b/_resourcepdf/overrides/partials/rating.html
@@ -0,0 +1,191 @@
+<!-- Feedback Widget -->
+<div class="rating-widget" style="
+  background: var(--md-default-bg-color);
+  border: 0.05rem solid var(--md-default-fg-color--lightest);
+  padding: 10px 15px;
+  border-radius: 0.2rem;
+  margin-bottom: 16px;
+  font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+  font-size: 16px;
+  text-align: center;
+  transition: all 0.2s ease-out;
+">
+
+  <div class="rating-title" style="
+    margin-bottom: 4px;
+    font-size: 15px;
+    font-weight: bold;
+    /* Removed inline color to use CSS */
+  ">
+    Rate this page
+  </div>
+
+  <div class="rating-stars" style="display: inline-block;">
+    {% for i in range(1,6) %}
+      <span class="star" data-rating="{{ i }}" style="
+        font-size: 24px;
+        cursor: pointer;
+        margin: 0 2px;
+        display: inline-block;
+      ">☆</span>
+    {% endfor %}
+  </div>
+
+  <div id="feedback-notification" style="
+    display: none;
+    margin-top: 10px;
+    color: var(--md-typeset-a-color);
+    font-weight: 500;
+    font-size: 14px;
+  ">Thanks for your feedback</div>
+
+<div id="feedback-submit-notification" style="
+display: none;
+margin-top: 10px;
+color: var(--md-typeset-a-color);
+font-weight: 500;
+font-size: 14px;
+">Thank you! The feedback has been submitted.</div>
+
+  <div id="feedback-form" style="
+    display: none;
+    margin-top: 12px;
+    text-align: left;
+    position: relative;
+    border: 0.05rem solid var(--md-default-fg-color--lightest);
+    padding: 12px;
+    border-radius: 6px;
+    background: var(--md-default-bg-color);
+    width: 100%;
+    box-sizing: border-box;
+    transition: all 0.2s ease-out;
+  ">
+<button id="close-feedback" title="Close" style="
+position: absolute;
+top: -10px;
+right: -10px;
+background: var(--md-default-bg-color);
+border: 0.05rem solid var(--md-default-fg-color--lightest);
+border-radius: 50%;
+width: 24px;
+height: 24px;
+font-size: 18px;
+font-weight: bold;
+cursor: pointer;
+color: var(--md-default-fg-color--light);
+line-height: 1;
+display: flex;
+align-items: center;
+justify-content: center;
+box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+">
+×
+</button>
+
+    <textarea id="feedback-text" rows="3" placeholder="Write your feedback here..." style="
+      width: 100%;
+      font-size: 14px;
+      padding: 6px;
+      margin-bottom: 12px;
+      resize: vertical;
+      font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+      color: var(--md-default-fg-color);
+      background: var(--md-default-bg-color);
+      border: 0.05rem solid var(--md-default-fg-color--lightest);
+    "></textarea>
+
+    <label for="feedback-email" style="
+      display: block;
+      font-size: 15px;
+      margin-bottom: 4px;
+    ">
+      Email <span style="color: var(--md-default-fg-color--light);">(optional)</span>
+    </label>
+
+    <input type="email" id="feedback-email" placeholder="you@example.com" style="
+      width: 100%;
+      font-size: 14px;
+      padding: 6px;
+      margin-bottom: 12px;
+      font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+      color: var(--md-default-fg-color);
+      background: var(--md-default-bg-color);
+      border: 0.05rem solid var(--md-default-fg-color--lightest);
+    " />
+
+<button id="submit-feedback" style="
+  padding: 5px 10px;
+  font-size: 14px;
+  background-color: var(--md-typeset-a-color);
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+">
+  Send
+</button>
+
+    <div id="feedback-status" style="
+      margin-top: 8px;
+      font-size: 13px;
+    "></div>
+  </div>
+</div>
+
+<style>
+  /* Hover shadow like data-banner */
+  .rating-widget:hover,
+  #feedback-form:hover {
+    box-shadow:
+      0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+      0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+  }
+
+  /* Default star colors */
+  .rating-stars .star {
+    color: var(--md-default-fg-color);
+    transition: color 0.2s ease-out;
+  }
+
+  /* Active/hovered stars */
+  .rating-stars .star.active,
+  .rating-stars .star.hovered {
+    color: var(--md-typeset-a-color, #0E5FB5);
+  }
+
+  /* Rate this page text color matches stars in light mode */
+  .rating-widget .rating-title {
+    color: var(--md-typeset-a-color, #0E5FB5);
+  }
+
+  /* Dark mode */
+  @media (prefers-color-scheme: dark) {
+    /* Rate this page text */
+    .rating-widget .rating-title {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+    }
+    /* Stars active and hovered fill color */
+    .rating-stars .star.active,
+    .rating-stars .star.hovered {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+    }
+
+    /* Feedback form text */
+    #feedback-form,
+    #feedback-form textarea,
+    #feedback-form input,
+    #feedback-form label,
+    #feedback-form button,
+    #feedback-form div {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+      border-color: #666 !important;
+      background: var(--md-default-bg-color) !important;
+    }
+
+    /* Close button color */
+    #close-feedback {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+    }
+  }
+</style>
diff --git a/docs/css/rating.css b/docs/css/rating.css
new file mode 100644
index 00000000000..889367b8008
--- /dev/null
+++ b/docs/css/rating.css
@@ -0,0 +1,43 @@
+.rating-widget:hover,
+#feedback-form:hover {
+  box-shadow:
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+}
+
+/* Title color */
+.rating-widget .rating-title {
+  color: var(--md-typeset-a-color, #0E5FB5);
+}
+
+/* Dark mode title */
+@media (prefers-color-scheme: dark) {
+  .rating-widget .rating-title {
+    color: var(--md-typeset-a-color, #93C7FF) !important;
+  }
+}
+
+/* Feedback status */
+#feedback-status {
+  color: var(--md-typeset-a-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  #feedback-status {
+    color: var(--md-typeset-a-color, #93C7FF) !important;
+  }
+}
+
+/* Light mode: Send button */
+#submit-feedback {
+  color: white !important;
+}
+
+/* Dark mode: Send button */
+@media (prefers-color-scheme: dark) {
+  #submit-feedback {
+    background-color: var(--md-typeset-a-color, #93C7FF) !important;
+    color: #999 !important;
+  }
+}
diff --git a/docs/js/rating.js b/docs/js/rating.js
new file mode 100644
index 00000000000..75387fd9c89
--- /dev/null
+++ b/docs/js/rating.js
@@ -0,0 +1,168 @@
+function initFeedbackWidget() {
+  const stars = document.querySelectorAll(".rating-stars .star");
+  const feedbackForm = document.getElementById("feedback-form");
+  const feedbackTextarea = document.getElementById("feedback-text");
+  const emailInput = document.getElementById("feedback-email");
+  const submitButton = document.getElementById("submit-feedback");
+  const statusDiv = document.getElementById("feedback-status");
+  const closeButton = document.getElementById("close-feedback");
+  const notification = document.getElementById("feedback-notification");
+  const submitNotification = document.getElementById("feedback-submit-notification");
+
+  if (!stars.length || !feedbackForm) return;
+
+  const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSdXWLhl1oKQqq9AgG_Ugxs5EbF3NMAiddWswL4ITyaQZZr5BA/formResponse";
+  const fieldIds = {
+    rating: "entry.303027158",
+    pageUrl: "entry.295622433",
+    feedback: "entry.2131350495",
+    email: "entry.1689727303"
+  };
+
+  let selectedRating = 0;
+  let notificationTimeout;
+
+  function showNotification(msg) {
+    notification.textContent = msg;
+    notification.style.display = "block";
+    clearTimeout(notificationTimeout);
+    notificationTimeout = setTimeout(() => {
+      notification.style.display = "none";
+    }, 3000);
+  }
+
+  function sendRatingOnly(rating) {
+    const formData = new FormData();
+    formData.append(fieldIds.rating, rating);
+    formData.append(fieldIds.pageUrl, window.location.href);
+
+    fetch(formURL, {
+      method: "POST",
+      mode: "no-cors",
+      body: formData
+    }).catch(() => {
+      console.warn("Rating failed to submit silently.");
+    });
+  }
+
+  function submitFeedback(rating, feedbackText = "", email = "") {
+    const formData = new FormData();
+    formData.append(fieldIds.rating, rating);
+    formData.append(fieldIds.pageUrl, window.location.href);
+    formData.append(fieldIds.feedback, feedbackText);
+    if (email) formData.append(fieldIds.email, email);
+
+    fetch(formURL, {
+      method: "POST",
+      mode: "no-cors",
+      body: formData
+    }).then(() => {
+      statusDiv.style.color = "";
+      feedbackTextarea.value = "";
+      emailInput.value = "";
+      feedbackForm.style.display = "none";
+      selectedRating = 0;
+
+      stars.forEach((s) => {
+        s.textContent = "☆";
+        s.classList.remove("active");
+        s.classList.remove("hovered");
+      });
+
+  // ✅ Show post-submit thank-you notification
+  submitNotification.style.display = "block";
+  clearTimeout(notificationTimeout);
+  notificationTimeout = setTimeout(() => {
+    submitNotification.style.display = "none";
+  }, 4000);
+    }).catch(() => {
+      statusDiv.style.color = "";
+      statusDiv.textContent = "Error sending feedback.";
+    });
+  }
+
+  stars.forEach((star) => {
+    const rating = parseInt(star.dataset.rating, 10);
+
+    star.addEventListener("mouseover", () => {
+      stars.forEach((s, index) => {
+        s.textContent = index < rating ? "★" : "☆";
+        if(index < rating) {
+          s.classList.add("hovered");
+          s.classList.remove("active");
+        } else {
+          s.classList.remove("hovered");
+          s.classList.remove("active");
+        }
+      });
+    });
+
+    star.addEventListener("mouseleave", () => {
+      stars.forEach((s, index) => {
+        s.textContent = index < selectedRating ? "★" : "☆";
+        if(index < selectedRating) {
+          s.classList.add("active");
+        } else {
+          s.classList.remove("active");
+        }
+        s.classList.remove("hovered");
+      });
+    });
+
+    star.addEventListener("click", () => {
+      selectedRating = rating;
+
+      stars.forEach((s, index) => {
+        s.textContent = index < rating ? "★" : "☆";
+        if(index < rating) {
+          s.classList.add("active");
+        } else {
+          s.classList.remove("active");
+        }
+        s.classList.remove("hovered");
+      });
+
+      sendRatingOnly(rating);
+      feedbackForm.style.display = "block";
+      statusDiv.textContent = "";
+    });
+  });
+
+  submitButton.addEventListener("click", () => {
+    if (!selectedRating) return;
+    const feedbackText = feedbackTextarea.value.trim();
+    const email = emailInput.value.trim();
+
+    if (selectedRating < 5 && !feedbackText) {
+      statusDiv.style.color = "";
+      statusDiv.textContent = "Write feedback before sending.";
+      return;
+    }
+
+    submitFeedback(selectedRating, feedbackText, email);
+  });
+
+  closeButton.addEventListener("click", () => {
+    feedbackForm.style.display = "none";
+    feedbackTextarea.value = "";
+    emailInput.value = "";
+    statusDiv.textContent = "";
+    selectedRating = 0;
+
+    stars.forEach((s) => {
+      s.textContent = "☆";
+      s.classList.remove("active");
+      s.classList.remove("hovered");
+    });
+  });
+}
+
+// Init on load
+document.addEventListener("DOMContentLoaded", initFeedbackWidget);
+
+// Re-init on page change (MkDocs Material support)
+if (typeof document$ !== 'undefined') {
+  document$.subscribe(() => {
+    initFeedbackWidget();
+  });
+}
diff --git a/mkdocs-base.yml b/mkdocs-base.yml
index a46dc5a4d9e..21fb01b2910 100644
--- a/mkdocs-base.yml
+++ b/mkdocs-base.yml
@@ -70,11 +70,13 @@ extra_css:
   - css/extra.css
   - css/nocopy.css
   - css/mysql.css
+  - css/rating.css
 
 extra_javascript:
   - js/version-select.js
   - js/promptremover.js
   - js/consent.js
+  - js/rating.js
 
 markdown_extensions:
   attr_list: {}
diff --git a/mkdocs.yml b/mkdocs.yml
index d720b51c442..6509e6ca06f 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -15,16 +15,3 @@ extra:
   analytics:
     provider: google
     property: G-J4J70BNH0G
-    feedback:
-      title: Was this page helpful?
-      ratings:
-        - icon: material/emoticon-happy-outline
-          name: This page was helpful
-          data: 1
-          note: >-
-            Thanks for your feedback!
-        - icon: material/emoticon-sad-outline
-          name: This page could be improved
-          data: 0
-          note: >- 
-            Thanks for your feedback! Want to improve this page? Click <strong>Edit this page on GitHub</strong> above to submit a pull request.