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

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/ak-nav-buttons.ts
View File

@ -142,7 +142,11 @@ export class NavigationButtons extends AKElement {
}
return html`<div class="pf-c-page__header-tools-item">
<a class="pf-c-button pf-m-plain" type="button" href="#/settings">
<a
class="pf-c-button pf-m-plain"
type="button"
href="${globalAK().api.base}if/user/#/settings"
>
<pf-tooltip position="top" content=${msg("Settings")}>
<i class="fas fa-cog" aria-hidden="true"></i>
</pf-tooltip>

2
web/src/elements/oauth/UserAccessTokenList.ts
View File

@ -96,7 +96,7 @@ export class UserOAuthAccessTokenList extends Table<TokenModel> {
<small>${item.expires.toLocaleString()}</small>`
: msg("-")}`,
html`<ak-chip-group>
${item.scope.map((scope) => {
${item.scope.sort().map((scope) => {
return html`<ak-chip .removable=${false}>${scope}</ak-chip>`;
})}
</ak-chip-group>`,

2
web/src/elements/oauth/UserRefreshTokenList.ts
View File

@ -97,7 +97,7 @@ export class UserOAuthRefreshTokenList extends Table<TokenModel> {
<small>${item.expires.toLocaleString()}</small>`
: msg("-")}`,
html`<ak-chip-group>
${item.scope.map((scope) => {
${item.scope.sort().map((scope) => {
return html`<ak-chip .removable=${false}>${scope}</ak-chip>`;
})}
</ak-chip-group>`,

6
web/src/flow/FlowExecutor.ts
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;

70
web/src/flow/FlowInspector.ts
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">

3
web/src/user/UserInterface.ts
View File

@ -4,6 +4,7 @@ import {
EVENT_NOTIFICATION_DRAWER_TOGGLE,
EVENT_WS_MESSAGE,
} from "@goauthentik/common/constants";
import { globalAK } from "@goauthentik/common/global";
import { configureSentry } from "@goauthentik/common/sentry";
import { UIConfig } from "@goauthentik/common/ui/config";
import { me } from "@goauthentik/common/users";
@ -165,7 +166,7 @@ class UserInterfacePresentation extends AKElement {
return html`<a
class="pf-c-button pf-m-secondary pf-m-small pf-u-display-none pf-u-display-block-on-md"
href="/if/admin/"
href="${globalAK().api.base}if/admin/"
slot="extra"
>
${msg("Admin interface")}