web/flows: add close button to flow inspector

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

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

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

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 {
                     <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">