diff --git a/web/src/common/constants.ts b/web/src/common/constants.ts index 0ab2e219f..538d73597 100644 --- a/web/src/common/constants.ts +++ b/web/src/common/constants.ts @@ -10,6 +10,7 @@ export const ROUTE_SEPARATOR = ";"; export const EVENT_REFRESH = "ak-refresh"; export const EVENT_NOTIFICATION_DRAWER_TOGGLE = "ak-notification-toggle"; export const EVENT_API_DRAWER_TOGGLE = "ak-api-drawer-toggle"; +export const EVENT_FLOW_INSPECTOR_TOGGLE = "ak-flow-inspector-toggle"; export const EVENT_SIDEBAR_TOGGLE = "ak-sidebar-toggle"; export const EVENT_WS_MESSAGE = "ak-ws-message"; export const EVENT_FLOW_ADVANCE = "ak-flow-advance"; diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts index 1c39bd01e..8e648479c 100644 --- a/web/src/flow/FlowExecutor.ts +++ b/web/src/flow/FlowExecutor.ts @@ -1,5 +1,9 @@ import { DEFAULT_CONFIG, tenant } from "@goauthentik/common/api/config"; -import { EVENT_FLOW_ADVANCE, TITLE_DEFAULT } from "@goauthentik/common/constants"; +import { + EVENT_FLOW_ADVANCE, + EVENT_FLOW_INSPECTOR_TOGGLE, + TITLE_DEFAULT, +} from "@goauthentik/common/constants"; import { globalAK } from "@goauthentik/common/global"; import { configureSentry } from "@goauthentik/common/sentry"; import { first } from "@goauthentik/common/utils"; @@ -160,6 +164,9 @@ export class FlowExecutor extends AKElement implements StageHost { if (window.location.search.includes("inspector")) { this.inspectorOpen = !this.inspectorOpen; } + this.addEventListener(EVENT_FLOW_INSPECTOR_TOGGLE, () => { + this.inspectorOpen = !this.inspectorOpen; + }); tenant().then((tenant) => (this.tenant = tenant)); } diff --git a/web/src/flow/FlowInspector.ts b/web/src/flow/FlowInspector.ts index bf2eb2278..bd2b3468e 100644 --- a/web/src/flow/FlowInspector.ts +++ b/web/src/flow/FlowInspector.ts @@ -1,5 +1,5 @@ import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; -import { EVENT_FLOW_ADVANCE } from "@goauthentik/common/constants"; +import { EVENT_FLOW_ADVANCE, EVENT_FLOW_INSPECTOR_TOGGLE } from "@goauthentik/common/constants"; import { AKElement } from "@goauthentik/elements/Base"; import "@goauthentik/elements/Expand"; @@ -9,6 +9,7 @@ import { CSSResult, TemplateResult, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import AKGlobal from "@goauthentik/common/styles/authentik.css"; +import PFButton from "@patternfly/patternfly/components/Button/button.css"; import PFCard from "@patternfly/patternfly/components/Card/card.css"; import PFDescriptionList from "@patternfly/patternfly/components/DescriptionList/description-list.css"; import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css"; @@ -31,6 +32,7 @@ export class FlowInspector extends AKElement { static get styles(): CSSResult[] { return [ PFBase, + PFButton, PFStack, PFCard, PFNotificationDrawer, @@ -112,6 +114,25 @@ export class FlowInspector extends AKElement {

${t`Flow inspector`}

+
+
+ +
+