From 0f0d871c5e560521c59c3f82d33ac6ec9188a5ad Mon Sep 17 00:00:00 2001
From: Sage Abdullah <sage.abdullah@torchbox.com>
Date: Wed, 16 Oct 2024 11:27:19 +0100
Subject: [PATCH] Replace UpgradeController hiddenClass with the HTML hidden
 attribute

---
 .../src/controllers/UpgradeController.test.js  | 18 ++++++------------
 client/src/controllers/UpgradeController.ts    |  4 +---
 .../home/upgrade_notification.html             |  4 ++--
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/client/src/controllers/UpgradeController.test.js b/client/src/controllers/UpgradeController.test.js
index 796de97992..4f57e5e818 100644
--- a/client/src/controllers/UpgradeController.test.js
+++ b/client/src/controllers/UpgradeController.test.js
@@ -10,12 +10,12 @@ describe('UpgradeController', () => {
   beforeEach(() => {
     document.body.innerHTML = `
     <div
-      class="panel w-hidden"
+      class="panel"
       id="panel"
       data-controller="w-upgrade"
       data-w-upgrade-current-version-value="${version}"
-      data-w-upgrade-hidden-class="w-hidden"
       data-w-upgrade-url-value="${url}"
+      hidden
     >
       <div class="help-block help-warning">
         Your version: <strong>${version}</strong>.
@@ -30,7 +30,7 @@ describe('UpgradeController', () => {
     application.stop();
   });
 
-  it('should keep the hidden class by default & then show a message when version is out of date', async () => {
+  it('should keep the hidden attribute by default & then show a message when version is out of date', async () => {
     const data = {
       version: '5.15.1',
       url: 'https://docs.wagtail.org/latest/url',
@@ -58,16 +58,12 @@ describe('UpgradeController', () => {
       { referrerPolicy: 'strict-origin-when-cross-origin' },
     );
 
-    expect(
-      document.getElementById('panel').classList.contains('w-hidden'),
-    ).toBe(true);
+    expect(document.getElementById('panel').hidden).toBe(true);
 
     await new Promise(requestAnimationFrame);
 
     // should remove the hidden class on success
-    expect(
-      document.getElementById('panel').classList.contains('w-hidden'),
-    ).toBe(false);
+    expect(document.getElementById('panel').hidden).toBe(false);
 
     // should update the latest version number in the text
     expect(document.getElementById('latest-version').textContent).toBe(
@@ -103,9 +99,7 @@ describe('UpgradeController', () => {
     // trigger next browser render cycle
     await Promise.resolve();
 
-    expect(
-      document.getElementById('panel').classList.contains('w-hidden'),
-    ).toBe(true);
+    expect(document.getElementById('panel').hidden).toBe(true);
   });
 
   it('should throw an error if the fetch fails', async () => {
diff --git a/client/src/controllers/UpgradeController.ts b/client/src/controllers/UpgradeController.ts
index f2c603748e..df6a796323 100644
--- a/client/src/controllers/UpgradeController.ts
+++ b/client/src/controllers/UpgradeController.ts
@@ -20,7 +20,6 @@ import { VersionNumber, VersionDeltaType } from '../utils/version';
  * }
  */
 export class UpgradeController extends Controller<HTMLElement> {
-  static classes = ['hidden'];
   static targets = ['latestVersion', 'link'];
   static values = {
     currentVersion: String,
@@ -29,7 +28,6 @@ export class UpgradeController extends Controller<HTMLElement> {
   };
 
   declare currentVersionValue: string;
-  declare hiddenClass: string;
   declare latestVersionTarget: HTMLElement;
   declare linkTarget: HTMLElement;
   declare ltsOnlyValue: any;
@@ -87,7 +85,7 @@ export class UpgradeController extends Controller<HTMLElement> {
           if (this.linkTarget instanceof HTMLElement) {
             this.linkTarget.setAttribute('href', releaseNotesUrl || '');
           }
-          this.element.classList.remove(this.hiddenClass);
+          this.element.hidden = false;
         }
       })
       .catch((err) => {
diff --git a/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html b/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html
index eb0ca28c25..a358ad245d 100644
--- a/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html
+++ b/wagtail/admin/templates/wagtailadmin/home/upgrade_notification.html
@@ -1,10 +1,10 @@
 {% load i18n wagtailcore_tags wagtailadmin_tags %}
 {% wagtail_version as current_version %}
-<div class="w-panel-upgrade w-hidden w-flex w-mb-[-2rem] sm:w-mb-0 w-gap-5 w-items-center w-pl-slim-header w-pr-5 sm:w-px-[3.5rem] w-py-5 w-text-text-context w-bg-surface-info-panel w-border-b w-border-transparent"
+<div class="w-panel-upgrade w-flex w-mb-[-2rem] sm:w-mb-0 w-gap-5 w-items-center w-pl-slim-header w-pr-5 sm:w-px-[3.5rem] w-py-5 w-text-text-context w-bg-surface-info-panel w-border-b w-border-transparent"
      data-controller="w-upgrade"
      data-w-upgrade-current-version-value="{{ current_version }}"
      {% if lts_only %}data-w-upgrade-lts-only-value="true"{% endif %}
-     data-w-upgrade-hidden-class="w-hidden">
+     hidden>
     {% icon name='info-circle' classname='w-w-5 w-h-5 w-shrink-0 w-text-text-link-info w-ml-5 sm:w-ml-0' %}
     <div>
         <p class="w-mb-1"><strong>{% trans "Wagtail upgrade available" %}</strong></p>