web: Fix issues surrounding wizard step behavior. (#12779)

This resolves a few stateful situations which may arise when opening and
closing wizard pages.

Author: GirlBossRush

web/src/admin/policies/PolicyWizard.ts

@@ -52,6 +52,21 @@ export class PolicyWizard extends AKElement {
         });
     }
 
+    selectListener = ({ detail }: CustomEvent<TypeCreate>) => {
+        if (!this.wizard) return;
+
+        const { component, modelName } = detail;
+        const idx = this.wizard.steps.indexOf("initial") + 1;
+
+        // Exclude all current steps starting with type-,
+        // this happens when the user selects a type and then goes back
+        this.wizard.steps = this.wizard.steps.filter((step) => !step.startsWith("type-"));
+
+        this.wizard.steps.splice(idx, 0, `type-${component}-${modelName}`);
+
+        this.wizard.isValid = true;
+    };
+
     render(): TemplateResult {
         return html`
             <ak-wizard
@@ -62,23 +77,10 @@ export class PolicyWizard extends AKElement {
                 <ak-wizard-page-type-create
                     slot="initial"
                     .types=${this.policyTypes}
-                    @select=${(ev: CustomEvent<TypeCreate>) => {
-                        if (!this.wizard) return;
-                        const idx = this.wizard.steps.indexOf("initial") + 1;
-                        // Exclude all current steps starting with type-,
-                        // this happens when the user selects a type and then goes back
-                        this.wizard.steps = this.wizard.steps.filter(
-                            (step) => !step.startsWith("type-"),
-                        );
-                        this.wizard.steps.splice(
-                            idx,
-                            0,
-                            `type-${ev.detail.component}-${ev.detail.modelName}`,
-                        );
-                        this.wizard.isValid = true;
-                    }}
+                    @select=${this.selectListener}
                 >
                 </ak-wizard-page-type-create>
+
                 ${this.policyTypes.map((type) => {
                     return html`
                         <ak-wizard-page-form

web/src/elements/wizard/ActionWizardPage.ts

@@ -41,16 +41,20 @@ export class ActionWizardPage extends WizardPage {
 
     activeCallback = async (): Promise<void> => {
         this.states = [];
+
         this.host.actions.map((act, idx) => {
             this.states.push({
                 action: act,
                 state: ActionState.pending,
                 idx: idx,
             });
         });
+
         this.host.canBack = false;
         this.host.canCancel = false;
+
         await this.run();
+
         // Ensure wizard is closable, even when run() failed
         this.host.isValid = true;
     };
@@ -59,28 +63,37 @@ export class ActionWizardPage extends WizardPage {
 
     async run(): Promise<void> {
         this.currentStep = this.states[0];
+
         await new Promise((r) => setTimeout(r, 500));
+
         for await (const bundle of this.states) {
             this.currentStep = bundle;
             this.currentStep.state = ActionState.running;
             this.requestUpdate();
             try {
                 await bundle.action.run();
+
                 await new Promise((r) => setTimeout(r, 500));
+
                 this.currentStep.state = ActionState.done;
+
                 this.requestUpdate();
             } catch (exc) {
                 if (exc instanceof ResponseError) {
                     this.currentStep.action.subText = await exc.response.text();
                 } else {
                     this.currentStep.action.subText = (exc as Error).toString();
                 }
+
                 this.currentStep.state = ActionState.failed;
                 this.requestUpdate();
+
                 return;
             }
         }
+
         this.host.isValid = true;
+
         this.dispatchEvent(
             new CustomEvent(EVENT_REFRESH, {
                 bubbles: true,

web/src/elements/wizard/TypeCreateWizardPage.ts

@@ -5,6 +5,7 @@ import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
 import { msg, str } from "@lit/localize";
 import { CSSResult, TemplateResult, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { Ref, createRef, ref } from "lit/directives/ref.js";
 
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFForm from "@patternfly/patternfly/components/Form/form.css";
@@ -21,6 +22,8 @@ export enum TypeCreateWizardPageLayouts {
 
 @customElement("ak-wizard-page-type-create")
 export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
+    //#region Properties
+
     @property({ attribute: false })
     types: TypeCreate[] = [];
 
@@ -30,6 +33,8 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
     @property({ type: String })
     layout: TypeCreateWizardPageLayouts = TypeCreateWizardPageLayouts.list;
 
+    //#endregion
+
     static get styles(): CSSResult[] {
         return [
             PFBase,
@@ -49,10 +54,25 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
         ];
     }
 
-    sidebarLabel = () => msg("Select type");
+    //#region Refs
+
+    formRef: Ref<HTMLFormElement> = createRef();
+
+    //#endregion
+
+    public sidebarLabel = () => msg("Select type");
+
+    public reset = () => {
+        super.reset();
+        this.selectedType = undefined;
+        this.formRef.value?.reset();
+    };
+
+    activeCallback = (): void => {
+        const form = this.formRef.value;
+
+        this.host.isValid = form?.checkValidity() ?? false;
 
-    activeCallback: () => Promise<void> = async () => {
-        this.host.isValid = false;
         if (this.selectedType) {
             this.selectDispatch(this.selectedType);
         }
@@ -92,9 +112,8 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
                     data-ouid-component-type="ak-type-create-grid-card"
                     data-ouid-component-name=${componentName}
                     @click=${() => {
-                        if (requiresEnterprise) {
-                            return;
-                        }
+                        if (requiresEnterprise) return;
+
                         this.selectDispatch(type);
                         this.selectedType = type;
                     }}
@@ -120,11 +139,13 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
 
     renderList(): TemplateResult {
         return html`<form
+            ${ref(this.formRef)}
             class="pf-c-form pf-m-horizontal"
             data-ouid-component-type="ak-type-create-list"
         >
             ${this.types.map((type) => {
                 const requiresEnterprise = type.requiresEnterprise && !this.hasEnterpriseLicense;
+
                 return html`<div
                     class="pf-c-radio"
                     data-ouid-component-type="ak-type-create-list-card"
@@ -160,6 +181,8 @@ export class TypeCreateWizardPage extends WithLicenseSummary(WizardPage) {
                 return this.renderGrid();
             case TypeCreateWizardPageLayouts.list:
                 return this.renderList();
+            default:
+                throw new Error(`Unknown layout: ${this.layout}`) as never;
         }
     }
 }