Track if users has dismissed a version warning banner for a given ver…

…sion.

See pydata#1384

I think we all agree that if a user dismiss the banner it should apply
to all pages. One remaining questions is :
 - does it apply to all versions ?

This implement a  rough dismiss button and store in local storage
which version and **when** the user has dismissed it.

I think this is enough informations to refine the logic later with
what/when we want to show.

This also has a rough implementation of not showing banner for current
version for the next month following any banner dismissal.

We could do the same for announcement (not implemented here), but also
keep a hash of the announcement to re-show on new-announcement, but
that's for another PR.

CSS/HTML to refine, but I'll need help for that.

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -311,6 +311,28 @@ var setupSearchButtons = () => {
  * - DOCUMENTATION_OPTIONS.theme_switcher_url
  */
 
+/**
+ * The user has dismiss the warning tab about the current version,
+ * We will store the date and on which version this was dismissed to
+ * potentially not show it on future versions.
+ *
+ * We store the current date instead of until when to dismiss the banner
+ * as this allows us to change the logic later.
+ *
+ * @param {event} event the event that trigger the check
+ */
+async function DismissBannerAndStorePref(event) {
+  document.getElementById("version-warning-banner").remove();
+  let version = DOCUMENTATION_OPTIONS.VERSION;
+  let until = new Date();
+  let banner_pref = JSON.parse(localStorage.getItem("banner_pref") || "{}");
+  console.log(
+    `[PST] Remembering to not show the banner for ${version} until ${until}.`
+  );
+  banner_pref[version] = new Date();
+  localStorage.setItem("banner_pref", JSON.stringify(banner_pref));
+}
+
 /**
  * Check if corresponding page path exists in other version of docs
  * and, if so, go there instead of the homepage of the other docs version
@@ -475,14 +497,34 @@ function showVersionWarningBanner(data) {
   if (versionsAreComparable && compare(version, preferredVersion, "=")) {
     return;
   }
+
+  const dismiss_date_str = JSON.parse(
+    localStorage.getItem("banner_pref") || "{}"
+  )[version];
+  let a_month_ago = new Date();
+  // Add one month
+  a_month_ago.setMonth(a_month_ago.getMonth() - 1);
+
+  if (dismiss_date_str !== undefined) {
+    const dismiss_date = new Date(dismiss_date_str);
+    if (dismiss_date > a_month_ago) {
+      console.info(
+        "[PST] User have dismissed banner for this version less than a month ago, not showing"
+      );
+      return;
+    }
+  }
+
   // now construct the warning banner
   var outer = document.createElement("aside");
+  outer.id = "version-warning-banner";
   // TODO: add to translatable strings
   outer.setAttribute("aria-label", "Version warning");
   const middle = document.createElement("div");
   const inner = document.createElement("div");
   const bold = document.createElement("strong");
   const button = document.createElement("a");
+  const close_btn = document.createElement("a");
   // these classes exist since pydata-sphinx-theme v0.10.0
   // the init class is used for animation
   outer.classList = "bd-header-version-warning container-fluid init";
@@ -493,6 +535,10 @@ function showVersionWarningBanner(data) {
   button.href = `${preferredURL}${DOCUMENTATION_OPTIONS.pagename}.html`;
   button.innerText = "Switch to stable version";
   button.onclick = checkPageExistsAndRedirect;
+  close_btn.classList =
+    "sd-btn sd-btn-danger sd-shadow-sm sd-text-wrap font-weight-bold ms-3 my-1 align-baseline";
+  close_btn.innerText = "x";
+  close_btn.onclick = DismissBannerAndStorePref;
   // add the version-dependent text
   inner.innerText = "This is documentation for ";
   const isDev =
@@ -511,6 +557,7 @@ function showVersionWarningBanner(data) {
     bold.innerText = `version ${version}`;
   }
   outer.appendChild(middle);
+  outer.append(close_btn);
   middle.appendChild(inner);
   inner.appendChild(bold);
   inner.appendChild(document.createTextNode("."));