web: cleanup/loading attribute always true (#14288)

* web: Add InvalidationFlow to Radius Provider dialogues ## What - Bugfix: adds the InvalidationFlow to the Radius Provider dialogues - Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated to the Notification. - Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/` ## Note Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current dialogues at the moment. * This (temporary) change is needed to prevent the unit tests from failing. \# What \# Why \# How \# Designs \# Test Steps \# Other Notes * Revert "This (temporary) change is needed to prevent the unit tests from failing." This reverts commit dddde09be5. * web: remove Lit syntax from always true attributes ## What Replaces instances of `?loading=${true}` and `?loading="${true}"` with `loading` ## Why The Lit syntax is completely unnecessary when the attribute's state is constant, and it's a few (just a few) extra CPU cycles for Lit to process that. More to the point, it annoys me. ## How ``` $ perl -pi.bak -e 's/\?loading=\$\{true\}/loading/' $(rg -l '\?loading=\$\{true\}') $ find . -name '*.bak' -exec rm {} \; $ perl -pi.bak -e 's/\?loading="\$\{true\}"/loading/' $(rg -l '\?loading="\$\{true\}"') $ find . -name '*.bak' -exec rm {} \; ``` * Prettier had opinions * Trigger Build
2025-05-06 08:49:48 -07:00
parent b4a6189bfa
commit be9ae7d4f7
16 changed files with 17 additions and 25 deletions
--- a/web/src/admin/applications/ApplicationViewPage.ts
+++ b/web/src/admin/applications/ApplicationViewPage.ts
@ -113,8 +113,7 @@ export class ApplicationViewPage extends AKElement {

    renderApp(): TemplateResult {
        if (!this.application) {
-            return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
-            </ak-empty-state>`;
+            return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
        }
        return html`<ak-tabs>
            ${this.missingOutpost
--- a/web/src/admin/providers/ProviderViewPage.ts
+++ b/web/src/admin/providers/ProviderViewPage.ts
@ -42,7 +42,7 @@ export class ProviderViewPage extends AKElement {

    renderProvider(): TemplateResult {
        if (!this.provider) {
-            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
+            return html`<ak-empty-state loading ?fullHeight=${true}></ak-empty-state>`;
        }
        switch (this.provider?.component) {
            case "ak-provider-saml-form":
--- a/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
+++ b/web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
@ -432,7 +432,7 @@ export class OAuth2ProviderViewPage extends AKElement {
                <div class="pf-c-card__body">
                    ${this.preview
                        ? html`<pre>${JSON.stringify(this.preview?.preview, null, 4)}</pre>`
-                        : html` <ak-empty-state ?loading=${true}></ak-empty-state> `}
+                        : html` <ak-empty-state loading></ak-empty-state> `}
                </div>
            </div>
        </div>`;
--- a/web/src/admin/providers/saml/SAMLProviderViewPage.ts
+++ b/web/src/admin/providers/saml/SAMLProviderViewPage.ts
@ -502,7 +502,7 @@ export class SAMLProviderViewPage extends AKElement {

    renderTabPreview(): TemplateResult {
        if (!this.preview) {
-            return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
+            return html`<ak-empty-state loading></ak-empty-state>`;
        }
        return html` <div
            class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
--- a/web/src/admin/sources/SourceViewPage.ts
+++ b/web/src/admin/sources/SourceViewPage.ts
@ -34,7 +34,7 @@ export class SourceViewPage extends AKElement {

    renderSource(): TemplateResult {
        if (!this.source) {
-            return html`<ak-empty-state ?loading=${true} ?fullHeight=${true}></ak-empty-state>`;
+            return html`<ak-empty-state loading ?fullHeight=${true}></ak-empty-state>`;
        }
        switch (this.source?.component) {
            case "ak-source-kerberos-form":
--- a/web/src/elements/Diagram.ts
+++ b/web/src/elements/Diagram.ts
@ -83,7 +83,7 @@ export class Diagram extends AKElement {
            }
        });
        if (!this.diagram) {
-            return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
+            return html`<ak-empty-state loading></ak-empty-state>`;
        }
        return html`${until(
            mermaid.render("graph", this.diagram).then((r) => {
--- a/web/src/elements/charts/Chart.ts
+++ b/web/src/elements/charts/Chart.ts
@ -230,9 +230,7 @@ export abstract class AKChart<T> extends AKElement {
                              <p slot="body">${pluckErrorDetail(this.error)}</p>
                          </ak-empty-state>
                      `
-                    : html`${this.chart
-                          ? html``
-                          : html`<ak-empty-state ?loading="${true}"></ak-empty-state>`}`}
+                    : html`${this.chart ? html`` : html`<ak-empty-state loading></ak-empty-state>`}`}
                ${this.centerText ? html` <span>${this.centerText}</span> ` : html``}
                <canvas style="${this.chart === undefined ? "display: none;" : ""}"></canvas>
            </div>
--- a/web/src/elements/forms/ModelForm.ts
+++ b/web/src/elements/forms/ModelForm.ts
@ -71,7 +71,7 @@ export abstract class ModelForm<T, PKT extends string | number> extends Form<T>

    renderVisible(): TemplateResult {
        if ((this._instancePk && !this.instance) || !this._initialDataLoad) {
-            return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
+            return html`<ak-empty-state loading></ak-empty-state>`;
        }
        return super.renderVisible();
    }
--- a/web/src/elements/router/Route.ts
+++ b/web/src/elements/router/Route.ts
@ -51,7 +51,7 @@ export class Route {
        if (this.callback) {
            return html`${until(
                this.callback(args),
-                html`<ak-empty-state ?loading=${true}></ak-empty-state>`,
+                html`<ak-empty-state loading></ak-empty-state>`,
            )}`;
        }
        if (this.element) {
--- a/web/src/elements/sync/SyncStatusCard.ts
+++ b/web/src/elements/sync/SyncStatusCard.ts
@ -121,7 +121,7 @@ export class SyncStatusCard extends AKElement {

    renderSyncStatus(): TemplateResult {
        if (this.loading) {
-            return html`<ak-empty-state ?loading=${true}></ak-empty-state>`;
+            return html`<ak-empty-state loading></ak-empty-state>`;
        }
        if (!this.syncState) {
            return html`${msg("No sync status.")}`;
--- a/web/src/elements/tests/EmptyState.test.ts
+++ b/web/src/elements/tests/EmptyState.test.ts
@ -19,7 +19,7 @@ describe("ak-empty-state", () => {
    });

    it("should render the default loader", async () => {
-        render(html`<ak-empty-state ?loading=${true} header=${msg("Loading")}> </ak-empty-state>`);
+        render(html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`);

        const empty = await $("ak-empty-state").$(">>>.pf-c-empty-state__icon");
        await expect(empty).toExist();
--- a/web/src/elements/user/sources/SourceSettings.ts
+++ b/web/src/elements/user/sources/SourceSettings.ts
@ -139,8 +139,7 @@ export class UserSourceSettingsPage extends AKElement {
                                })}
                            `}
                  `
-                : html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
-                  </ak-empty-state>`}
+                : html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`}
        </ul>`;
    }
 }
--- a/web/src/flow/providers/SessionEnd.ts
+++ b/web/src/flow/providers/SessionEnd.ts
@ -24,8 +24,7 @@ export class SessionEnd extends BaseStage<SessionEndChallenge, unknown> {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
-            </ak-empty-state>`;
+            return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
        }
        return html`<header class="pf-c-login__main-header">
                <h1 class="pf-c-title pf-m-3xl">${this.challenge.flowInfo?.title}</h1>
--- a/web/src/user/LibraryPage/ak-library.ts
+++ b/web/src/user/LibraryPage/ak-library.ts
@ -102,7 +102,7 @@ export class LibraryPage extends AKElement {
    }

    loading() {
-        return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}> </ak-empty-state>`;
+        return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
    }

    running() {
--- a/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
+++ b/web/src/user/user-settings/details/UserSettingsFlowExecutor.ts
@ -173,8 +173,7 @@ export class UserSettingsFlowExecutor
                    level: MessageLevel.success,
                    message: msg("Successfully updated details"),
                });
-                return html`<ak-empty-state ?loading=${true} header=${msg("Loading")}>
-                </ak-empty-state>`;
+                return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
            default:
                console.debug(
                    `authentik/user/flows: unsupported stage type ${this.challenge.component}`,
@ -195,8 +194,7 @@ export class UserSettingsFlowExecutor
            return html`<p>${msg("No settings flow configured.")}</p> `;
        }
        if (!this.challenge || this.loading) {
-            return html`<ak-empty-state ?loading=${true} header=${msg("Loading")}>
-            </ak-empty-state>`;
+            return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
        }
        return html` ${this.renderChallenge()} `;
    }
--- a/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
+++ b/web/src/user/user-settings/details/stages/prompt/PromptStage.ts
@ -64,8 +64,7 @@ export class UserSettingsPromptStage extends PromptStage {

    render(): TemplateResult {
        if (!this.challenge) {
-            return html`<ak-empty-state ?loading="${true}" header=${msg("Loading")}>
-            </ak-empty-state>`;
+            return html`<ak-empty-state loading header=${msg("Loading")}> </ak-empty-state>`;
        }
        return html`<div class="pf-c-login__main-body">
                <form