web: misc fixes for admin and flow inspector (#12461)

* fix flow inspector not closable on error

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

# Conflicts:
#	authentik/enterprise/providers/ssf/views/configuration.py

* unrelated: fix flow inspector for in memory stages

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

* only open inspector when there's size

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

* fix relative links

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

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Jens L.
2024-12-23 14:08:42 +01:00
committed by GitHub
parent c82b79f10f
commit d17f781d11
8 changed files with 62 additions and 40 deletions

View File

@ -231,7 +231,11 @@ export class FlowExecutor extends Interface implements StageHost {
async firstUpdated(): Promise<void> {
configureSentry();
if (this.config?.capabilities.includes(CapabilitiesEnum.CanDebug)) {
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;
}
this.loading = true;

View File

@ -87,16 +87,37 @@ export class FlowInspector extends AKElement {
return stage;
}
renderHeader() {
return html` <div class="pf-c-notification-drawer__header">
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">${msg("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=${msg("Close")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>`;
}
renderAccessDenied(): TemplateResult {
return html`<div class="pf-c-drawer__body pf-m-no-padding">
<div class="pf-c-notification-drawer">
<div class="pf-c-notification-drawer__header">
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">
${msg("Flow inspector")}
</h1>
</div>
</div>
${this.renderHeader()}
<div class="pf-c-notification-drawer__body">
<div class="pf-l-stack pf-m-gutter">
<div class="pf-l-stack__item">
@ -116,36 +137,17 @@ export class FlowInspector extends AKElement {
}
if (!this.state) {
this.advanceHandler();
return html`<ak-empty-state loading> </ak-empty-state>`;
return html`<div class="pf-c-drawer__body pf-m-no-padding">
<div class="pf-c-notification-drawer">
${this.renderHeader()}
<div class="pf-c-notification-drawer__body"></div>
<ak-empty-state loading> </ak-empty-state>
</div>
</div>`;
}
return html`<div class="pf-c-drawer__body pf-m-no-padding">
<div class="pf-c-notification-drawer">
<div class="pf-c-notification-drawer__header">
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">
${msg("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=${msg("Close")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
${this.renderHeader()}
<div class="pf-c-notification-drawer__body">
<div class="pf-l-stack pf-m-gutter">
<div class="pf-l-stack__item">