-
-
Notifications
You must be signed in to change notification settings - Fork 572
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
web/admin: application wizard (part 1) (#2745)
* initial Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * remove log Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * start oauth Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * use form for all type wizard pages Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * more oauth Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * basic wizard actions Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * make resets work Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add hint in provider wizard Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * render correct icon in empty state in table page Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * improve empty state Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * more Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add more pages Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * fix Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * add group PK to service account creation response Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * use wizard-level isValid prop Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org> * re-add old buttons Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
- Loading branch information
Showing
36 changed files
with
1,275 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,147 @@ | ||
| import { t } from "@lingui/macro"; | ||
|
|
||
| import { CSSResult, TemplateResult, html } from "lit"; | ||
| import { customElement, property } from "lit/decorators.js"; | ||
|
|
||
| import AKGlobal from "../../authentik.css"; | ||
| import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css"; | ||
| import PFProgressStepper from "@patternfly/patternfly/components/ProgressStepper/progress-stepper.css"; | ||
| import PFTitle from "@patternfly/patternfly/components/Title/title.css"; | ||
| import PFBullseye from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"; | ||
| import PFBase from "@patternfly/patternfly/patternfly-base.css"; | ||
|
|
||
| import { ResponseError } from "@goauthentik/api"; | ||
|
|
||
| import { EVENT_REFRESH } from "../../constants"; | ||
| import { WizardAction } from "./Wizard"; | ||
| import { WizardPage } from "./WizardPage"; | ||
|
|
||
| export enum ActionState { | ||
| pending = "pending", | ||
| running = "running", | ||
| done = "done", | ||
| failed = "failed", | ||
| } | ||
|
|
||
| export interface ActionStateBundle { | ||
| action: WizardAction; | ||
| state: ActionState; | ||
| idx: number; | ||
| } | ||
|
|
||
| @customElement("ak-wizard-page-action") | ||
| export class ActionWizardPage extends WizardPage { | ||
| static get styles(): CSSResult[] { | ||
| return [PFBase, PFBullseye, PFEmptyState, PFTitle, PFProgressStepper, AKGlobal]; | ||
| } | ||
|
|
||
| @property({ attribute: false }) | ||
| states: ActionStateBundle[] = []; | ||
|
|
||
| @property({ attribute: false }) | ||
| currentStep?: ActionStateBundle; | ||
|
|
||
| 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; | ||
| }; | ||
|
|
||
| sidebarLabel = () => t`Apply changes`; | ||
|
|
||
| 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, | ||
| composed: true, | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| render(): TemplateResult { | ||
| return html`<div class="pf-l-bullseye"> | ||
| <div class="pf-c-empty-state pf-m-lg"> | ||
| <div class="pf-c-empty-state__content"> | ||
| <i class="fas fa- fa-cogs pf-c-empty-state__icon" aria-hidden="true"></i> | ||
| <h1 class="pf-c-title pf-m-lg">${this.currentStep?.action.displayName}</h1> | ||
| <div class="pf-c-empty-state__body"> | ||
| <ol class="pf-c-progress-stepper pf-m-vertical"> | ||
| ${this.states.map((state) => { | ||
| let cls = ""; | ||
| switch (state.state) { | ||
| case ActionState.pending: | ||
| cls = "pf-m-pending"; | ||
| break; | ||
| case ActionState.done: | ||
| cls = "pf-m-success"; | ||
| break; | ||
| case ActionState.running: | ||
| cls = "pf-m-info"; | ||
| break; | ||
| case ActionState.failed: | ||
| cls = "pf-m-danger"; | ||
| break; | ||
| } | ||
| if (state.idx === this.currentStep?.idx) { | ||
| cls += " pf-m-current"; | ||
| } | ||
| return html` <li class="pf-c-progress-stepper__step ${cls}"> | ||
| <div class="pf-c-progress-stepper__step-connector"> | ||
| <span class="pf-c-progress-stepper__step-icon"> | ||
| <i class="fas fa-check-circle" aria-hidden="true"></i> | ||
| </span> | ||
| </div> | ||
| <div class="pf-c-progress-stepper__step-main"> | ||
| <div class="pf-c-progress-stepper__step-title"> | ||
| ${state.action.displayName} | ||
| </div> | ||
| ${state.action.subText | ||
| ? html`<div | ||
| class="pf-c-progress-stepper__step-description" | ||
| > | ||
| ${state.action.subText} | ||
| </div>` | ||
| : html``} | ||
| </div> | ||
| </li>`; | ||
| })} | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div>`; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.