0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 01:22:07 +01:00

Replace UpgradeController hiddenClass with the HTML hidden attribute

This commit is contained in:
Sage Abdullah 2024-10-16 11:27:19 +01:00 committed by Thibaud Colas
parent 0dd7d12aaf
commit 0f0d871c5e
3 changed files with 9 additions and 17 deletions

View File

@ -10,12 +10,12 @@ describe('UpgradeController', () => {
beforeEach(() => { beforeEach(() => {
document.body.innerHTML = ` document.body.innerHTML = `
<div <div
class="panel w-hidden" class="panel"
id="panel" id="panel"
data-controller="w-upgrade" data-controller="w-upgrade"
data-w-upgrade-current-version-value="${version}" data-w-upgrade-current-version-value="${version}"
data-w-upgrade-hidden-class="w-hidden"
data-w-upgrade-url-value="${url}" data-w-upgrade-url-value="${url}"
hidden
> >
<div class="help-block help-warning"> <div class="help-block help-warning">
Your version: <strong>${version}</strong>. Your version: <strong>${version}</strong>.
@ -30,7 +30,7 @@ describe('UpgradeController', () => {
application.stop(); 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 = { const data = {
version: '5.15.1', version: '5.15.1',
url: 'https://docs.wagtail.org/latest/url', url: 'https://docs.wagtail.org/latest/url',
@ -58,16 +58,12 @@ describe('UpgradeController', () => {
{ referrerPolicy: 'strict-origin-when-cross-origin' }, { referrerPolicy: 'strict-origin-when-cross-origin' },
); );
expect( expect(document.getElementById('panel').hidden).toBe(true);
document.getElementById('panel').classList.contains('w-hidden'),
).toBe(true);
await new Promise(requestAnimationFrame); await new Promise(requestAnimationFrame);
// should remove the hidden class on success // should remove the hidden class on success
expect( expect(document.getElementById('panel').hidden).toBe(false);
document.getElementById('panel').classList.contains('w-hidden'),
).toBe(false);
// should update the latest version number in the text // should update the latest version number in the text
expect(document.getElementById('latest-version').textContent).toBe( expect(document.getElementById('latest-version').textContent).toBe(
@ -103,9 +99,7 @@ describe('UpgradeController', () => {
// trigger next browser render cycle // trigger next browser render cycle
await Promise.resolve(); await Promise.resolve();
expect( expect(document.getElementById('panel').hidden).toBe(true);
document.getElementById('panel').classList.contains('w-hidden'),
).toBe(true);
}); });
it('should throw an error if the fetch fails', async () => { it('should throw an error if the fetch fails', async () => {

View File

@ -20,7 +20,6 @@ import { VersionNumber, VersionDeltaType } from '../utils/version';
* } * }
*/ */
export class UpgradeController extends Controller<HTMLElement> { export class UpgradeController extends Controller<HTMLElement> {
static classes = ['hidden'];
static targets = ['latestVersion', 'link']; static targets = ['latestVersion', 'link'];
static values = { static values = {
currentVersion: String, currentVersion: String,
@ -29,7 +28,6 @@ export class UpgradeController extends Controller<HTMLElement> {
}; };
declare currentVersionValue: string; declare currentVersionValue: string;
declare hiddenClass: string;
declare latestVersionTarget: HTMLElement; declare latestVersionTarget: HTMLElement;
declare linkTarget: HTMLElement; declare linkTarget: HTMLElement;
declare ltsOnlyValue: any; declare ltsOnlyValue: any;
@ -87,7 +85,7 @@ export class UpgradeController extends Controller<HTMLElement> {
if (this.linkTarget instanceof HTMLElement) { if (this.linkTarget instanceof HTMLElement) {
this.linkTarget.setAttribute('href', releaseNotesUrl || ''); this.linkTarget.setAttribute('href', releaseNotesUrl || '');
} }
this.element.classList.remove(this.hiddenClass); this.element.hidden = false;
} }
}) })
.catch((err) => { .catch((err) => {

View File

@ -1,10 +1,10 @@
{% load i18n wagtailcore_tags wagtailadmin_tags %} {% load i18n wagtailcore_tags wagtailadmin_tags %}
{% wagtail_version as current_version %} {% 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-controller="w-upgrade"
data-w-upgrade-current-version-value="{{ current_version }}" data-w-upgrade-current-version-value="{{ current_version }}"
{% if lts_only %}data-w-upgrade-lts-only-value="true"{% endif %} {% 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' %} {% 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> <div>
<p class="w-mb-1"><strong>{% trans "Wagtail upgrade available" %}</strong></p> <p class="w-mb-1"><strong>{% trans "Wagtail upgrade available" %}</strong></p>