From b7ea6d163bb71b39db38124f1fedda7147d430c9 Mon Sep 17 00:00:00 2001 From: Ken Sternberg Date: Sat, 2 Sep 2023 10:16:17 -0700 Subject: [PATCH] web: reset As I said, I greatly dislike having to be dependent upon "resets"; I prefer my data to be de novo going into a "new" transaction. That said, we work with what we've got; I've created an event generated by the wizard that says the modal just closed; anything wrapping and implementing the wizard can then capture that event and reset the data. I've also added a pair of functions that create the two states (what step, what form data) anew, so that resetting is as trivial as initializing (and is exactly the same, code-wise). --- .../admin/applications/wizard/ak-application-wizard.ts | 9 +++++++++ .../ak-application-wizard-application-details.ts | 2 +- .../commit/ak-application-wizard-commit-application.ts | 3 +-- .../applications/wizard/methods/BaseProviderPanel.ts | 7 +------ web/src/admin/applications/wizard/types.ts | 4 ++-- web/src/components/ak-wizard-main/ak-wizard-frame.ts | 4 +--- web/src/components/ak-wizard-main/ak-wizard-main.ts | 5 +++-- web/src/components/ak-wizard-main/commonWizardButtons.ts | 2 +- .../components/ak-wizard-main/stories/ak-demo-wizard.ts | 4 ++-- web/src/components/ak-wizard-main/types.ts | 4 +--- web/src/elements/buttons/ModalButton.ts | 6 +++--- 11 files changed, 25 insertions(+), 25 deletions(-) diff --git a/web/src/admin/applications/wizard/ak-application-wizard.ts b/web/src/admin/applications/wizard/ak-application-wizard.ts index a6e74b608..e844e0be2 100644 --- a/web/src/admin/applications/wizard/ak-application-wizard.ts +++ b/web/src/admin/applications/wizard/ak-application-wizard.ts @@ -55,6 +55,7 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { constructor() { super(); this.handleUpdate = this.handleUpdate.bind(this); + this.handleClosed = this.handleClosed.bind(this); } get step() { @@ -65,10 +66,12 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { super.connectedCallback(); new ContextRoot().attach(this.parentElement!); this.addCustomListener("ak-application-wizard-update", this.handleUpdate); + this.addCustomListener("ak-wizard-closed", this.handleClosed); } disconnectedCallback() { this.removeCustomListener("ak-application-wizard-update", this.handleUpdate); + this.removeCustomListener("ak-wizard-closed", this.handleClosed); super.disconnectedCallback(); } @@ -124,6 +127,12 @@ export class ApplicationWizard extends CustomListenerElement(AKElement) { this.wizardStateProvider.setValue(this.wizardState); } + handleClosed() { + this.steps = newSteps(); + this.wizardState = freshWizardState(); + this.wizardStateProvider.setValue(this.wizardState); + } + render() { return html` ): ApplicationRequest { return { @@ -116,7 +115,7 @@ export class ApplicationWizardCommitApplication extends BasePanel { } this.response = network_resolution.value; this.dispatchCustomEvent(EVENT_REFRESH); - this.dispatchWizardUpdate({ status: "submitted"}); + this.dispatchWizardUpdate({ status: "submitted" }); this.commitState = doneState; } }); diff --git a/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts b/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts index 22ad94413..ce60213e1 100644 --- a/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts +++ b/web/src/admin/applications/wizard/methods/BaseProviderPanel.ts @@ -14,15 +14,10 @@ export class ApplicationWizardProviderPageBase extends BasePanel { [target.name]: value, }, }, - status: this.form.checkValidity() ? "valid" : "invalid" + status: this.form.checkValidity() ? "valid" : "invalid", }); } - shouldUpdate(changed: Map) { - console.log("CHANGED:", JSON.stringify(Array.from(changed.entries()), null, 2)); - return true; - } - validator() { return this.form.reportValidity(); } diff --git a/web/src/admin/applications/wizard/types.ts b/web/src/admin/applications/wizard/types.ts index fd516bfe8..696def61a 100644 --- a/web/src/admin/applications/wizard/types.ts +++ b/web/src/admin/applications/wizard/types.ts @@ -25,6 +25,6 @@ export interface WizardState { type StatusType = "invalid" | "valid" | "submitted" | "failed"; export type WizardStateUpdate = { - update?: Partial, - status?: StatusType, + update?: Partial; + status?: StatusType; }; diff --git a/web/src/components/ak-wizard-main/ak-wizard-frame.ts b/web/src/components/ak-wizard-main/ak-wizard-frame.ts index 6c27c7e1f..c950631d5 100644 --- a/web/src/components/ak-wizard-main/ak-wizard-frame.ts +++ b/web/src/components/ak-wizard-main/ak-wizard-frame.ts @@ -71,13 +71,11 @@ export class AkWizardFrame extends CustomEmitterElement(ModalButton) { } renderModalInner() { - // prettier-ignore return html`
${this.renderHeader()}
- ${this.renderNavigation()} - ${this.renderMainSection()} + ${this.renderNavigation()} ${this.renderMainSection()}
${this.renderFooter()}
diff --git a/web/src/components/ak-wizard-main/ak-wizard-main.ts b/web/src/components/ak-wizard-main/ak-wizard-main.ts index 526aa7a86..9db54cf43 100644 --- a/web/src/components/ak-wizard-main/ak-wizard-main.ts +++ b/web/src/components/ak-wizard-main/ak-wizard-main.ts @@ -1,5 +1,5 @@ import { AKElement } from "@goauthentik/elements/Base"; -import { CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; +import { CustomEmitterElement, CustomListenerElement } from "@goauthentik/elements/utils/eventEmitter"; import { html } from "lit"; import { customElement, property, query, state } from "lit/decorators.js"; @@ -45,7 +45,7 @@ const hasValidator = (v: any): v is Required> => */ @customElement("ak-wizard-main") -export class AkWizardMain extends CustomListenerElement(AKElement) { +export class AkWizardMain extends CustomEmitterElement(CustomListenerElement(AKElement)) { static get styles() { return [PFBase, PFButton, PFRadio]; } @@ -167,6 +167,7 @@ export class AkWizardMain extends CustomListenerElement(AKElement) { case "close": { this.currentStep = 0; this.frame.open = false; + this.dispatchCustomEvent('ak-wizard-closed'); } } } diff --git a/web/src/components/ak-wizard-main/commonWizardButtons.ts b/web/src/components/ak-wizard-main/commonWizardButtons.ts index 402c20178..7bd302754 100644 --- a/web/src/components/ak-wizard-main/commonWizardButtons.ts +++ b/web/src/components/ak-wizard-main/commonWizardButtons.ts @@ -1,4 +1,5 @@ import { msg } from "@lit/localize"; + import { WizardButton } from "./types"; export const NextStep: WizardButton = [msg("Next"), "next"]; @@ -10,4 +11,3 @@ export const SubmitStep: WizardButton = [msg("Submit"), "next"]; export const CancelWizard: WizardButton = [msg("Cancel"), "close"]; export const CloseWizard: WizardButton = [msg("Close"), "close"]; - diff --git a/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts b/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts index d4551e9a3..d28b38d53 100644 --- a/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts +++ b/web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts @@ -36,8 +36,8 @@ export class AkDemoWizard extends AKElement { diff --git a/web/src/components/ak-wizard-main/types.ts b/web/src/components/ak-wizard-main/types.ts index 8645580fd..6d09ba9fd 100644 --- a/web/src/components/ak-wizard-main/types.ts +++ b/web/src/components/ak-wizard-main/types.ts @@ -2,15 +2,13 @@ import { TemplateResult } from "lit"; export type WizardNavCommand = "next" | "back" | "close" | ["goto", number]; - // The label of the button, the command the button should execute, and if the button // should be marked "disabled." export type WizardButton = [string, WizardNavCommand, boolean?]; - export interface WizardStep { // The name of the step, as shown in the navigation. - label: string; + label: string; // A function which returns the html for rendering the actual content of the step, its form and // such. diff --git a/web/src/elements/buttons/ModalButton.ts b/web/src/elements/buttons/ModalButton.ts index 9a2b4fd0d..dfc594e2c 100644 --- a/web/src/elements/buttons/ModalButton.ts +++ b/web/src/elements/buttons/ModalButton.ts @@ -1,7 +1,7 @@ import { AKElement } from "@goauthentik/elements/Base"; import { PFSize } from "@goauthentik/elements/Spinner"; -import { CSSResult, TemplateResult, css, html } from "lit"; +import { CSSResult, TemplateResult, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators.js"; import PFBackdrop from "@patternfly/patternfly/components/Backdrop/backdrop.css"; @@ -100,7 +100,7 @@ export class ModalButton extends AKElement { }); } - renderModalInner(): TemplateResult { + renderModalInner(): TemplateResult | typeof nothing { return html``; } @@ -136,6 +136,6 @@ export class ModalButton extends AKElement { render(): TemplateResult { return html` this.onClick()}> - ${this.open ? this.renderModal() : ""}`; + ${this.open ? this.renderModal() : nothing}`; } }