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

flows/inspector: add button to open flow inspector (#12656)

Browse Source 
* flows: differentiate between flow inspector being available and open

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add overlay button to open inspector

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update docs

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* Apply suggestions from code review

Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com>
Signed-off-by: Jens L. <jens@beryju.org>

* fix perm check

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix tests

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* rewrite docs

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Signed-off-by: Jens L. <jens@beryju.org>
Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com>
This commit is contained in:
Jens L.
2025-01-13 19:55:34 +01:00
committed by GitHub
parent 3098313981
commit 629d5df763
8 changed files with 62 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/admin/flows/FlowViewPage.ts
View File

@ -191,7 +191,7 @@ export class FlowViewPage extends AKElement {
const finalURL = `${
link.link
}?${encodeURI(
`inspector&next=/#${window.location.hash}`,
`inspector=open&next=/#${window.location.hash}`,
)}`;
window.open(finalURL, "_blank");
})

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

@ -77,6 +77,9 @@ export class FlowExecutor extends Interface implements StageHost {
@state()
inspectorOpen = false;
@state()
inspectorAvailable = false;
@state()
flowInfo?: ContextualFlowInfo;
@ -160,14 +163,24 @@ export class FlowExecutor extends Interface implements StageHost {
padding: 0 2rem;
max-height: inherit;
}
.inspector-toggle {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 100;
}
`);
}
constructor() {
super();
this.ws = new WebsocketClient();
if (window.location.search.includes("inspector")) {
const inspector = new URL(window.location.toString()).searchParams.get("inspector");
if (inspector === "" || inspector === "open") {
this.inspectorOpen = true;
this.inspectorAvailable = true;
} else if (inspector === "available") {
this.inspectorAvailable = true;
}
this.addEventListener(EVENT_FLOW_INSPECTOR_TOGGLE, () => {
this.inspectorOpen = !this.inspectorOpen;
@ -231,12 +244,8 @@ export class FlowExecutor extends Interface implements StageHost {
async firstUpdated(): Promise<void> {
configureSentry();
if (
this.config?.capabilities.includes(CapabilitiesEnum.CanDebug) &&
// Only open inspector automatically in debug when we have enough space for it
window.innerWidth >= 768
) {
this.inspectorOpen = true;
if (this.config?.capabilities.includes(CapabilitiesEnum.CanDebug)) {
this.inspectorAvailable = true;
}
this.loading = true;
try {
@ -545,6 +554,16 @@ export class FlowExecutor extends Interface implements StageHost {
</div>
</div>
</div>
${(this.inspectorAvailable ?? !this.inspectorOpen)
? html`<button
class="inspector-toggle pf-c-button pf-m-primary"
@click=${() => {
this.inspectorOpen = true;
}}
>
<i class="fa fa-search-plus" aria-hidden="true"></i>
</button>`
: nothing}
${until(this.renderInspector())}
</div>
</div>