From abb65d26820a1b0732ba3cf0062ff8cdaad52e46 Mon Sep 17 00:00:00 2001 From: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> Date: Thu, 16 Apr 2026 15:01:35 +0200 Subject: [PATCH] web: Normalize use of `.toJSON()` over `.json()` (#21621) * web: Normalize use of toJSON. * fix checkbox group Signed-off-by: Jens Langhammer --------- Signed-off-by: Jens Langhammer Co-authored-by: Jens Langhammer --- .../admin/admin-settings/AdminSettingsFooterLinks.ts | 2 +- .../stories/AdminSettingsFooterLinks.stories.ts | 2 +- .../admin-settings/stories/ak-array-input.stories.ts | 2 +- .../steps/ak-application-wizard-bindings-step.ts | 2 +- web/src/components/ak-multi-select.ts | 2 +- web/src/components/stories/ak-multi-select.stories.ts | 2 +- web/src/elements/ControlElement.ts | 11 +---------- web/src/elements/ak-array-input.ts | 7 ++++--- .../ak-checkbox-group/ak-checkbox-group.stories.ts | 2 +- .../elements/ak-checkbox-group/ak-checkbox-group.ts | 2 +- web/src/elements/ak-table/ak-select-table.ts | 2 +- web/src/elements/dialogs/dialog.css | 3 +-- web/src/elements/forms/SearchSelect/SearchSelect.ts | 2 +- 13 files changed, 16 insertions(+), 25 deletions(-) diff --git a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts index eb36949fb5..bd0f96f67c 100644 --- a/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts +++ b/web/src/admin/admin-settings/AdminSettingsFooterLinks.ts @@ -53,7 +53,7 @@ export class FooterLinkInput extends AKControlElement { } get valid() { - const href = this.json()?.href ?? ""; + const href = this.toJSON()?.href ?? ""; return hasLegalScheme(href) && URL.canParse(href); } diff --git a/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts index 79ecccdcbc..5776c1454d 100644 --- a/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts +++ b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts @@ -34,7 +34,7 @@ const metadata: Meta = { return; } const target = event.target as FooterLinkInput; - messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`; + messages!.innerText = `${JSON.stringify(target.toJSON(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`; }); }, 250); diff --git a/web/src/admin/admin-settings/stories/ak-array-input.stories.ts b/web/src/admin/admin-settings/stories/ak-array-input.stories.ts index c3375bd89a..da9c995d8b 100644 --- a/web/src/admin/admin-settings/stories/ak-array-input.stories.ts +++ b/web/src/admin/admin-settings/stories/ak-array-input.stories.ts @@ -40,7 +40,7 @@ const metadata: Meta> = { return; } const target = event.target as FooterLinkInput; - messages!.innerText = `${JSON.stringify(target.json(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`; + messages!.innerText = `${JSON.stringify(target.toJSON(), null, 2)}\n\nValid: ${target.valid ? "Yes" : "No"}`; }); }, 250); diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts index ad874f1e1e..ba5c947a56 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-bindings-step.ts @@ -96,7 +96,7 @@ export class ApplicationWizardBindingsStep extends ApplicationWizardStep { protected onDeleteBindings() { const toDelete = this.selectTable - .json() + .toJSON() .map((i) => (typeof i === "string" ? parseInt(i, 10) : i)); const bindings = this.wizard.bindings.filter((binding, index) => !toDelete.includes(index)); diff --git a/web/src/components/ak-multi-select.ts b/web/src/components/ak-multi-select.ts index c854812024..447c187899 100644 --- a/web/src/components/ak-multi-select.ts +++ b/web/src/components/ak-multi-select.ts @@ -83,7 +83,7 @@ export class AkMultiSelect extends AKControlElement { * control that produces values of specific interest to our REST API. This is our modern * accessor name. */ - json() { + toJSON() { return this.values; } diff --git a/web/src/components/stories/ak-multi-select.stories.ts b/web/src/components/stories/ak-multi-select.stories.ts index ef26b5d2c6..4f76d5064b 100644 --- a/web/src/components/stories/ak-multi-select.stories.ts +++ b/web/src/components/stories/ak-multi-select.stories.ts @@ -60,7 +60,7 @@ export const RadioInput = () => {

Results from component:

    - ${component!.json().map((v: string) => html`
  • ${v}
    • `)} + ${component!.toJSON().map((v: string) => html`
  • ${v}
    • `)}
`; diff --git a/web/src/elements/ControlElement.ts b/web/src/elements/ControlElement.ts index b81bb45e46..1457647527 100644 --- a/web/src/elements/ControlElement.ts +++ b/web/src/elements/ControlElement.ts @@ -21,19 +21,10 @@ export abstract class AKControlElement public abstract name: string | null; - /** - * @deprecated Rename to `toJSON` - */ - public json(): T { - throw new Error("Controllers using this protocol must override this method"); - } - /** * Convert the value of the control to a JSON-serializable format. */ - public toJSON(): T { - return this.json(); - } + public abstract toJSON(): T; public get valid(): boolean { return true; diff --git a/web/src/elements/ak-array-input.ts b/web/src/elements/ak-array-input.ts index da1b95e652..07651a3393 100644 --- a/web/src/elements/ak-array-input.ts +++ b/web/src/elements/ak-array-input.ts @@ -90,7 +90,7 @@ export class ArrayInput extends AKControlElement implements IArrayInput< @queryAll("div.ak-input-group") inputGroups?: HTMLDivElement[]; - json() { + toJSON() { if (!this.inputGroups) { throw new Error("Could not find input group collection in ak-array-input"); } @@ -112,8 +112,9 @@ export class ArrayInput extends AKControlElement implements IArrayInput< return Array.from(this.inputGroups ?? []) .map( (group) => - group.querySelector>("[name]")?.json() ?? - null, + group + .querySelector>("[name]") + ?.toJSON() ?? null, ) .filter((i) => i !== null); } diff --git a/web/src/elements/ak-checkbox-group/ak-checkbox-group.stories.ts b/web/src/elements/ak-checkbox-group/ak-checkbox-group.stories.ts index bf913f4660..041757f6a0 100644 --- a/web/src/elements/ak-checkbox-group/ak-checkbox-group.stories.ts +++ b/web/src/elements/ak-checkbox-group/ak-checkbox-group.stories.ts @@ -55,7 +55,7 @@ export const CheckboxGroup = () => { Values sent in event: ${event.detail.join(", ")}

- Values present as data-ak-control: ${JSON.stringify(target.json(), null)} + Values present as data-ak-control: ${JSON.stringify(target.toJSON(), null)}

`; }; diff --git a/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts b/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts index 151e1c9537..fe6a42e408 100644 --- a/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts +++ b/web/src/elements/ak-checkbox-group/ak-checkbox-group.ts @@ -115,7 +115,7 @@ export class CheckboxGroup extends AkElementWithCustomEvents { internals?: ElementInternals; doneFirstUpdate = false; - json() { + toJSON() { return this.values; } diff --git a/web/src/elements/ak-table/ak-select-table.ts b/web/src/elements/ak-table/ak-select-table.ts index 25c45ba694..0d36871f42 100644 --- a/web/src/elements/ak-table/ak-select-table.ts +++ b/web/src/elements/ak-table/ak-select-table.ts @@ -124,7 +124,7 @@ export class SelectTable extends SimpleTable { return this._selected; } - public json() { + public toJSON() { return this._selected; } diff --git a/web/src/elements/dialogs/dialog.css b/web/src/elements/dialogs/dialog.css index 42576de17e..28a7697311 100644 --- a/web/src/elements/dialogs/dialog.css +++ b/web/src/elements/dialogs/dialog.css @@ -9,6 +9,7 @@ --ak-c-dialog--WidthBasis: 100%; --ak-c-dialog--HeightBasis: 75dvh; + --ak-c-dialog--HeightBasis: clamp(75dvh, 40rem, 95dvh); --ak-c-dialog--MarginBlock: var(--pf-global--spacer--xl); --ak-c-dialog--MarginInline: var(--pf-global--spacer--4xl); @@ -221,7 +222,6 @@ @media (width <= 768px) or (height <= 600px) { --ak-c-dialog--MaxHeight: 100dvh; - --ak-c-dialog--AspectRatioHeight: none; /* Note that a unit is required for to perform the calculation. */ --ak-c-dialog--MarginBlock: 0em; --ak-c-dialog--MarginInline: 0em; @@ -231,7 +231,6 @@ .ak-m-dialog--full-screen { --ak-c-dialog--MaxHeight: 100dvh; - --ak-c-dialog--AspectRatioHeight: none; /* Note that a unit is required for to perform the calculation. */ --ak-c-dialog--MarginBlock: 0em; --ak-c-dialog--MarginInline: 0em; diff --git a/web/src/elements/forms/SearchSelect/SearchSelect.ts b/web/src/elements/forms/SearchSelect/SearchSelect.ts index 4f54fb0667..11c4d8d5de 100644 --- a/web/src/elements/forms/SearchSelect/SearchSelect.ts +++ b/web/src/elements/forms/SearchSelect/SearchSelect.ts @@ -207,7 +207,7 @@ export abstract class SearchSelectBase return String(this.value(this.selectedObject ?? null) ?? ""); } - public json() { + public toJSON() { return this.toForm(); }