habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/flows: add close button to flow inspector

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2023-01-01 21:26:21 +01:00
parent 9fdfb8c99b
commit d6d72489a7
3 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/common/constants.ts
View File

@ -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";

9
web/src/flow/FlowExecutor.ts
View File

@ -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));
}

23
web/src/flow/FlowInspector.ts
View File

@ -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 {
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">${t`Flow inspector`}</h1>
</div>
<div class="pf-c-notification-drawer__header-action">
<div class="pf-c-notification-drawer__header-action-close">
<button
@click=${() => {
this.dispatchEvent(
new CustomEvent(EVENT_FLOW_INSPECTOR_TOGGLE, {
bubbles: true,
composed: true,
}),
);
}}
class="pf-c-button pf-m-plain"
type="button"
aria-label=${t`Close`}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="pf-c-notification-drawer__body">
<div class="pf-l-stack pf-m-gutter">