Compare commits

...

13 Commits

Author SHA1 Message Date
00c1e17b52 Merge branch 'main' into web/add-command-palette
Signed-off-by: Jens Langhammer <jens@goauthentik.io>

# Conflicts:
#	web/package-lock.json
#	web/package.json
#	web/src/admin/AdminInterface/AdminInterface.ts
2025-06-14 02:17:24 +02:00
cba8e84bbe fix accent color
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2024-03-17 03:18:50 +01:00
d313fd7fb4 set dark theme
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2024-03-17 03:10:02 +01:00
102811508f fix z-index
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
2024-03-17 03:09:53 +01:00
16b3ca3715 web: add command palette
Adds [Ninja Keys](https://github.com/ssleptsov/ninja-keys) (MIT License) to the Admin Interface.
This is a trivial demo. Start the UI and begin by pressing CMD-K or CTRL-K in the Admin Interface.

- Because a lot of the Create and Update operations are accessible as activations-on-modals rather
  than navigable components in their own right, we don't have a way to encode commands like "Start
  the Application Wizard" or "Add a new Policy."
- Our search isn't very quick, so "Edit Application Foo" would have intolerable delays while we
  looked up a list of applications that could be edited.
- The `icon` feature is relatively difficult to exploit because it's a web component and its inner
  styles are inacessible.
- There seem to be cases where the modal-popup and charts conflict.

If we want to move forward with this, we have the challenge of finding activation means for the
various Create and Edit features, and whether or not Search can be meaningfully integrated into the
results.

It would also be nifty if the User and Admin palettes treated each other as peers; you could just go
"CMD-K My User Page" and it would just *take* you there, and "CMD-K Admin Applications" to go back,
creating an illusion of seamlessness.
2024-03-15 15:21:51 -07:00
8b4e0361c4 Merge branch 'main' into dev
* main:
  web: clean up and remove redundant alias '@goauthentik/app' (#8889)
  web/admin: fix markdown table rendering (#8908)
2024-03-14 10:35:46 -07:00
22cb5b7379 Merge branch 'main' into dev
* main:
  web: bump chromedriver from 122.0.5 to 122.0.6 in /tests/wdio (#8902)
  web: bump vite-tsconfig-paths from 4.3.1 to 4.3.2 in /web (#8903)
  core: bump google.golang.org/protobuf from 1.32.0 to 1.33.0 (#8901)
  web: provide InstallID on EnterpriseListPage (#8898)
2024-03-14 08:14:43 -07:00
2d0117d096 Merge branch 'main' into dev
* main:
  api: capabilities: properly set can_save_media when s3 is enabled (#8896)
  web: bump the rollup group in /web with 3 updates (#8891)
  core: bump pydantic from 2.6.3 to 2.6.4 (#8892)
  core: bump twilio from 9.0.0 to 9.0.1 (#8893)
2024-03-13 14:05:11 -07:00
035bda4eac Merge branch 'main' into dev
* main:
  Update _envoy_istio.md (#8888)
  website/docs: new landing page for Providers (#8879)
  web: bump the sentry group in /web with 1 update (#8881)
  web: bump chromedriver from 122.0.4 to 122.0.5 in /tests/wdio (#8884)
  web: bump the eslint group in /tests/wdio with 2 updates (#8883)
  web: bump the eslint group in /web with 2 updates (#8885)
  website: bump @types/react from 18.2.64 to 18.2.65 in /website (#8886)
2024-03-12 13:31:35 -07:00
50906214e5 Merge branch 'main' into dev
* main:
  web: upgrade to lit 3 (#8781)
2024-03-11 11:03:04 -07:00
e505f274b6 Merge branch 'main' into dev
* main:
  web: fix esbuild issue with style sheets (#8856)
2024-03-11 10:28:05 -07:00
fe52f44dca Merge branch 'main' into dev
* main:
  tenants: really ensure default tenant cannot be deleted (#8875)
  core: bump github.com/go-openapi/runtime from 0.27.2 to 0.28.0 (#8867)
  core: bump pytest from 8.0.2 to 8.1.1 (#8868)
  core: bump github.com/go-openapi/strfmt from 0.22.2 to 0.23.0 (#8869)
  core: bump bandit from 1.7.7 to 1.7.8 (#8870)
  core: bump packaging from 23.2 to 24.0 (#8871)
  core: bump ruff from 0.3.1 to 0.3.2 (#8873)
  web: bump the wdio group in /tests/wdio with 3 updates (#8865)
  core: bump requests-oauthlib from 1.3.1 to 1.4.0 (#8866)
  core: bump uvicorn from 0.27.1 to 0.28.0 (#8872)
  core: bump django-filter from 23.5 to 24.1 (#8874)
2024-03-11 10:27:43 -07:00
3146e5a50f web: fix esbuild issue with style sheets
Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.
2024-03-08 14:15:55 -08:00
4 changed files with 293 additions and 0 deletions

109
web/package-lock.json generated
View File

@ -51,6 +51,7 @@
"lit": "^3.2.0",
"md-front-matter": "^1.0.4",
"mermaid": "^11.6.0",
"ninja-keys": "^1.2.2",
"rapidoc": "^9.3.8",
"react": "^19.1.0",
"react-dom": "^19.1.0",
@ -2587,6 +2588,57 @@
"@lit/reactive-element": "^1.0.0 || ^2.0.0"
}
},
"node_modules/@material/mwc-icon": {
"version": "0.25.3",
"resolved": "https://registry.npmjs.org/@material/mwc-icon/-/mwc-icon-0.25.3.tgz",
"integrity": "sha512-36076AWZIRSr8qYOLjuDDkxej/HA0XAosrj7TS1ZeLlUBnLUtbDtvc1S7KSa0hqez7ouzOqGaWK24yoNnTa2OA==",
"deprecated": "MWC beta is longer supported. Please upgrade to @material/web",
"license": "Apache-2.0",
"dependencies": {
"lit": "^2.0.0",
"tslib": "^2.0.1"
}
},
"node_modules/@material/mwc-icon/node_modules/@lit/reactive-element": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.0.0"
}
},
"node_modules/@material/mwc-icon/node_modules/lit": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
"integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit/reactive-element": "^1.6.0",
"lit-element": "^3.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/@material/mwc-icon/node_modules/lit-element": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/@material/mwc-icon/node_modules/lit-html": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
"license": "BSD-3-Clause",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
},
"node_modules/@mdx-js/mdx": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.0.tgz",
@ -16940,6 +16992,12 @@
"integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
"dev": true
},
"node_modules/hotkeys-js": {
"version": "3.8.7",
"resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.7.tgz",
"integrity": "sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==",
"license": "MIT"
},
"node_modules/html-escaper": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@ -21632,6 +21690,57 @@
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
"dev": true
},
"node_modules/ninja-keys": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/ninja-keys/-/ninja-keys-1.2.2.tgz",
"integrity": "sha512-ylo8jzKowi3XBHkgHRjBJaKQkl32WRLr7kRiA0ajiku11vHRDJ2xANtTScR5C7XlDwKEOYvUPesCKacUeeLAYw==",
"license": "MIT",
"dependencies": {
"@material/mwc-icon": "0.25.3",
"hotkeys-js": "3.8.7",
"lit": "2.2.6"
}
},
"node_modules/ninja-keys/node_modules/@lit/reactive-element": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
"integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.0.0"
}
},
"node_modules/ninja-keys/node_modules/lit": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.6.tgz",
"integrity": "sha512-K2vkeGABfSJSfkhqHy86ujchJs3NR9nW1bEEiV+bXDkbiQ60Tv5GUausYN2mXigZn8lC1qXuc46ArQRKYmumZw==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit/reactive-element": "^1.3.0",
"lit-element": "^3.2.0",
"lit-html": "^2.2.0"
}
},
"node_modules/ninja-keys/node_modules/lit-element": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
"integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
"license": "BSD-3-Clause",
"dependencies": {
"@lit-labs/ssr-dom-shim": "^1.1.0",
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.8.0"
}
},
"node_modules/ninja-keys/node_modules/lit-html": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
"integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
"license": "BSD-3-Clause",
"dependencies": {
"@types/trusted-types": "^2.0.2"
}
},
"node_modules/node-abort-controller": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz",

View File

@ -122,6 +122,7 @@
"lit": "^3.2.0",
"md-front-matter": "^1.0.4",
"mermaid": "^11.6.0",
"ninja-keys": "^1.2.2",
"rapidoc": "^9.3.8",
"react": "^19.1.0",
"react-dom": "^19.1.0",

View File

@ -0,0 +1,172 @@
import { navigate } from "@goauthentik/elements/router/RouterOutlet";
import { INinjaAction } from "ninja-keys/dist/interfaces/ininja-action.js";
import { msg } from "@lit/localize";
export const adminCommands: INinjaAction[] = [
{
id: msg("Overview"),
title: msg("Dashboard"),
handler: () => navigate("/administration/overview"),
section: msg("Dashboards"),
},
{
handler: () => navigate("/administration/dashboard/users"),
id: msg("User Statistics"),
title: msg("User Statistics"),
icon: '<i class="pf-icon pf-icon-user"></i>',
section: msg("Dashboards"),
},
{
handler: () => navigate("/administration/system-tasks"),
id: msg("System Tasks"),
title: msg("System Tasks"),
section: msg("Dashboards"),
},
{
handler: () => navigate("/core/applications"),
id: msg("Applications"),
title: msg("Applications"),
section: msg("Applications"),
},
{
handler: () => navigate("/core/providers"),
id: msg("Providers"),
title: msg("Providers"),
section: msg("Applications"),
},
{
handler: () => navigate("/outpost/outposts"),
id: msg("Outposts"),
title: msg("Outposts"),
section: msg("Applications"),
},
{
handler: () => navigate("/events/log"),
id: msg("Logs"),
title: msg("Logs"),
section: msg("Events"),
},
{
handler: () => navigate("/events/rules"),
id: msg("Notification Rules"),
title: msg("Notification Rules"),
section: msg("Events"),
},
{
handler: () => navigate("/events/transports"),
id: msg("Notification Transports"),
title: msg("Notification Transports"),
section: msg("Events"),
},
{
handler: () => navigate("/policy/policies"),
id: msg("Policies"),
title: msg("Policies"),
section: msg("Customization"),
},
{
handler: () => navigate("/core/property-mappings"),
id: msg("Property Mappings"),
title: msg("Property Mappings"),
section: msg("Customization"),
},
{
handler: () => navigate("/blueprints/instances"),
id: msg("Blueprints"),
title: msg("Blueprints"),
section: msg("Customization"),
},
{
handler: () => navigate("/policy/reputation"),
id: msg("Reputation scores"),
title: msg("Reputation scores"),
section: msg("Customization"),
},
{
handler: () => navigate("/flow/flows"),
id: msg("Flows"),
title: msg("Flows"),
section: msg("Flows"),
},
{
handler: () => navigate("/flow/stages"),
id: msg("Stages"),
title: msg("Stages"),
section: msg("Flows"),
},
{
handler: () => navigate("/flow/stages/prompts"),
id: msg("Prompts"),
title: msg("Prompts"),
section: msg("Flows"),
},
{
handler: () => navigate("/identity/users"),
id: msg("Users"),
title: msg("Users"),
section: msg("Directory"),
},
{
handler: () => navigate("/identity/groups"),
id: msg("Groups"),
title: msg("Groups"),
section: msg("Directory"),
},
{
handler: () => navigate("/identity/roles"),
id: msg("Roles"),
title: msg("Roles"),
section: msg("Directory"),
},
{
handler: () => navigate("/core/sources"),
id: msg("Federation and Social login"),
title: msg("Federation and Social login"),
section: msg("Directory"),
},
{
handler: () => navigate("/core/tokens"),
id: msg("Tokens and App passwords"),
title: msg("Tokens and App passwords"),
section: msg("Directory"),
},
{
handler: () => navigate("/flow/stages/invitations"),
id: msg("Invitations"),
title: msg("Invitations"),
section: msg("Directory"),
},
{
handler: () => navigate("/core/brands"),
id: msg("Brands"),
title: msg("Brands"),
section: msg("System"),
},
{
handler: () => navigate("/crypto/certificates"),
id: msg("Certificates"),
title: msg("Certificates"),
section: msg("System"),
},
{
handler: () => navigate("/outpost/integrations"),
id: msg("Outpost Integrations"),
title: msg("Outpost Integrations"),
section: msg("System"),
},
{
handler: () => navigate("/admin/settings"),
id: msg("Settings"),
title: msg("Settings"),
section: msg("System"),
},
{
handler: () => window.location.assign("/if/user/"),
id: msg("User interface"),
title: msg("Go to my User page"),
},
];

View File

@ -1,5 +1,6 @@
import "#admin/AdminInterface/AboutModal";
import type { AboutModal } from "#admin/AdminInterface/AboutModal";
import { adminCommands } from "#admin/AdminInterface/AdminCommands";
import { ROUTES } from "#admin/Routes";
import { EVENT_API_DRAWER_TOGGLE, EVENT_NOTIFICATION_DRAWER_TOGGLE } from "#common/constants";
import { configureSentry } from "#common/sentry/index";
@ -21,6 +22,7 @@ import { getURLParam, updateURLParams } from "#elements/router/RouteMatch";
import "#elements/router/RouterOutlet";
import "#elements/sidebar/Sidebar";
import "#elements/sidebar/SidebarItem";
import "ninja-keys";
import { CSSResult, TemplateResult, css, html, nothing } from "lit";
import { customElement, eventOptions, property, query } from "lit/decorators.js";
@ -119,6 +121,10 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
.pf-c-drawer__panel {
z-index: var(--pf-global--ZIndex--xl);
}
ninja-keys {
--ninja-z-index: 99999;
--ninja-accent-color: var(--ak-accent);
}
`,
];
@ -190,6 +196,11 @@ export class AdminInterface extends WithCapabilitiesConfig(AuthenticatedInterfac
};
return html` <ak-locale-context>
<ninja-keys
.data=${adminCommands}
noAutoLoadMdicons
class="${this.activeTheme === UiThemeEnum.Dark ? "dark" : ""}"
></ninja-keys>
<div class="pf-c-page">
<ak-page-navbar ?open=${this.sidebarOpen} @sidebar-toggle=${this.sidebarListener}>
<ak-version-banner></ak-version-banner>