web: Normalize use of .toJSON() over .json() (#21621)

* web: Normalize use of toJSON.

* fix checkbox group

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

web/src/admin/admin-settings/AdminSettingsFooterLinks.ts

@@ -53,7 +53,7 @@ export class FooterLinkInput extends AKControlElement<FooterLink> {
     }
 
     get valid() {
-        const href = this.json()?.href ?? "";
+        const href = this.toJSON()?.href ?? "";
         return hasLegalScheme(href) && URL.canParse(href);
     }
 

web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts

@@ -34,7 +34,7 @@ const metadata: Meta<FooterLinkInput> = {
                         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);
 

web/src/admin/admin-settings/stories/ak-array-input.stories.ts

@@ -40,7 +40,7 @@ const metadata: Meta<IArrayInput<unknown>> = {
                         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);
 

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));
 

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;
     }
 

web/src/components/stories/ak-multi-select.stories.ts

@@ -60,7 +60,7 @@ export const RadioInput = () => {
             </ul>
             <p>Results from component:</p>
             <ul style="list-style-type: disc">
-                ${component!.json().map((v: string) => html`<li>${v}</li>`)}
+                ${component!.toJSON().map((v: string) => html`<li>${v}</li>`)}
             </ul>
         `;
 

web/src/elements/ControlElement.ts

@@ -21,19 +21,10 @@ export abstract class AKControlElement<T = string | string[]>
 
     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;

web/src/elements/ak-array-input.ts

@@ -90,7 +90,7 @@ export class ArrayInput<T> extends AKControlElement<T[]> 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<T> extends AKControlElement<T[]> implements IArrayInput<
         return Array.from(this.inputGroups ?? [])
             .map(
                 (group) =>
-                    group.querySelector<HTMLInputElement & AKControlElement<T>>("[name]")?.json() ??
-                    null,
+                    group
+                        .querySelector<HTMLInputElement & AKControlElement<T>>("[name]")
+                        ?.toJSON() ?? null,
             )
             .filter((i) => i !== null);
     }

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(", ")}
         </p>
         <p>
-            Values present as data-ak-control: <kbd>${JSON.stringify(target.json(), null)}</kbd>
+            Values present as data-ak-control: <kbd>${JSON.stringify(target.toJSON(), null)}</kbd>
         </p>
     `;
     };

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;
     }
 

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;
     }
 

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;

web/src/elements/forms/SearchSelect/SearchSelect.ts

@@ -207,7 +207,7 @@ export abstract class SearchSelectBase<T>
         return String(this.value(this.selectedObject ?? null) ?? "");
     }
 
-    public json() {
+    public toJSON() {
         return this.toForm();
     }