* 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.
* web: clean up and remove redundant alias '@goauthentik/app'
The path alias `@goauthentik/app` has been a thorn in our side for a long time, as it conflicts with
or is redundant with all the *other* aliases in `tsconfig.json`, such as `@goauthentik/elements` and
`@goauthentik/locales`.
This commit *replaces* `@goauthentik/app` with `@goauthentik/authentik` for a single use case: the
locale codes file in the project root. That also helps reserve the subproject name `authentik` in
case we ever do go the monorepo root.
Other than that, all the rest have been removed with the following mechanical refactor:
```
perl -pi.bak -e 's{\@goauthentik/app/}{\@goauthentik/}' $(rg -l '@goauthentik/app/' ./src/)
```
* web: separate the sizing enum from a specific component implementation (#8890)
The PFSizes enum is used by more than just the Spinner, but has been left inside the Spinner for all
this time, making refactoring the Spinner for Patternfly 5 a little harder (okay, an annoying amount
harder) than it should be.
This commit moves this UI-specific, widely-use enum into its own folder in `common`, and refactors
everything else to use it. As is often the case, the refactor is mechanical:
```
perl -pi.bak -e 's{import \{ PFSize \} from "\@goauthentik/elements/Spinner";}{import \{ PFSize \}
from "\@goauthentik/common/enums.js";}' \\
$(rg -l 'import.*PFSize')
```
**Note:** This commit is dependent upon the ["clean up and remove redundant alias `@goauthentik/app`" PR](https://github.com/goauthentik/authentik/pull/8889)
* 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.
* web: provide InstallID on EnterpriseListPage
Changes the appearance of the "Get a License" card on the EnterpriseLicenseListPage to include
a view of the InstallID.
* web: restore line accidentally deleted by fatfinger error
* Holding for a moment...
* web: replace rollup with esbuild
This commit replaces rollup with esbuild.
The biggest fix was to alter the way CSS is imported into our system;
esbuild delivers it to the browser as text, rather than as a bundle
with metadata that, frankly, we never use. ESBuild will bundle the
CSS for us just fine, and interpreting those strings *as* CSS turned
out to be a small hurdle. Code has been added to AKElement and
Interface to ensure that all CSS referenced by an element has been
converted to a Browser CSSStyleSheet before being presented to the
browser.
A similar fix has been provided for the markdown imports. The
biggest headache there was that the re-arrangement of our documentation
broke Jen's existing parser for fixing relative links. I've provided
a corresponding hack that provides the necessary detail, but since
the Markdown is being presented to the browser as text, we have to
provide a hint in the markdown component for where any relative
links should go, and we're importing and processing the markdown
at runtime. This doesn't seem to be a big performance hit.
The entire build process is driven by the new build script, `build.mjs`,
which starts the esbuild process as a service connected to the build
script and then runs the commands sent to it as fast as possible.
The biggest "hack" in it is actually the replacement for rollup's
`rollup-copy-plugin`, which is clever enough I'm surprised it doesn't
exist as a standalone file-copy package in its own right.
I've also used a filesystem watch library to encode a "watcher"
mechanism into the build script. `node build.mjs --watch` will
work on MacOS; I haven't tested it elsewhere, at least not yet.
`node build.mjs --proxy` does what the old rollup.proxy.js script
did.
The savings are substantial. It takes less than two seconds to build
the whole UI, a huge savings off the older ~45-50 seconds I routinely
saw on my old Mac. It's also about 9% smaller.
The trade-offs appear to be small: processing the CSS as StyleSheets,
and the Markdown as HTML, at run-time is a small performance hit,
but I didn't notice it in amongst everything else the UI does as
it starts up.
Manual chunking is gone; esbuild's support for that is quite difficult
to get right compared to Rollup's, although there's been a bit of
yelling at ESbuild over it. Codemirror is built into its own chunk;
it's just not _named_ distinctly anymore.
The one thing I haven't been able to test yet is whether or not the
polyfills and runtim shims work as expected on older browsers.
* web: continue with performance and build fixes
This commit introduces a couple of fixes enabled by esbuild and other
features.
1. build-locales
`build-locales` is a new NodeJS script in the `./scripts` folder
that does pretty much what it says in the name: it translates Xliff
files into `.ts` files. It has two DevExp advantages over the old
build system.
First, it will check the build times of the xlf files and
their ts equivalents, and will only run the actual build-locales
command if the XLF files are newer than their TS equivalents.
Second, it captures the stderr output from the build-locales command
and summarizes it. Instead of the thousands of lines of "this
string has no translation equivalent," now it just reports the
number of missed translations per locale.
2. check-spelling
This is a simple wrapper around the `codespell` command, mostly
just to reduce the visual clutter of `package.json`, but also to
permit it to run just about anywhere without needed hard-coded
paths to the dictionaries, using a fairly classic trick with git.
3. pseudolocalize and import-maps
These scripts were in TypeScript, but for our purposes I've
saved their constructed equivalents instead. This saves on
visual clutter in the `package.json` script, and reduced the
time they have to run during full builds. They're small enough
I feel confident they won't need too much looking over.
Also, two lint bugs in Markdown.ts have been fixed.
* Removed a few lines that weren't in use.
* build-locales was sufficiently complex it needed some comments.
* web: formalize that horrible unixy git status checker into a proper function.
* Added types for , the Markdown processor for in-line documentation.
* web: upgrade to Lit3
This commit replaces our Lit2 implementation with a Lit3 implementation.
This upgrade required two major shifts within our code, both of them consequential.
First, the restructuring of the way the get/set decorators for properties and states meant that a
lot of the code we were using needed to be refactored. More than that, a lot of those custom
accessors were implemented to trigger side-effects, such as when a providerID is set or changed
triggering the ProviderView to fetch the requsted Provider. The Lit2 and Lit3 documentation both say
[there is a better way to handle
this](https://lit.dev/docs/v2/components/properties/#:~:text=In%20most%20cases%2C%20you%20do%20not%20need%20to%20create%20custom%20property%20accessors)
by detecting the change in the `willUpdate()` point of an elements Lifecycle and triggering the side
effect there instead. I've done this in several places with a pattern of detecting the change, and
then naming the corresponding change as `fetchRequestedThing()`. The resulting code is cleaner and
uses fewer controversial features.
The other is that the type signature for `LitElement.createRenderRoot()` has changed to be either an
HTMLElement or a DocumentFragment. This required some serious refactoring of type changes through
Base and Interface codes. Noteably, the custom `AdoptedStyleSheetsElement` interface has been
superseded by the supplied and standardized
[DocumentOrShadowRoot](aa2b2352e1/src/lib/dom.generated.d.ts (L4715))
interface. Unfortunately, that interface is a mixin, and casting or instance checking are still in
place to make sure the objects being manipulated are typed "correctly."
Three files I touched during the course of this triggered SonarJS, so there are some minor fixes,
replacing some awkward syntax with more idiomatic code. These are very minor, such as replacing:
```
const result = someFunction();
return result;
/* with */
return someFunction();
```
and
```
const result = x();
if (!result) { return true } else { return false }
/* with */
return !x();
```
* fix package lock
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* don't use hardcoded magic values
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* Holding for a moment...
* web: replace rollup with esbuild
This commit replaces rollup with esbuild.
The biggest fix was to alter the way CSS is imported into our system;
esbuild delivers it to the browser as text, rather than as a bundle
with metadata that, frankly, we never use. ESBuild will bundle the
CSS for us just fine, and interpreting those strings *as* CSS turned
out to be a small hurdle. Code has been added to AKElement and
Interface to ensure that all CSS referenced by an element has been
converted to a Browser CSSStyleSheet before being presented to the
browser.
A similar fix has been provided for the markdown imports. The
biggest headache there was that the re-arrangement of our documentation
broke Jen's existing parser for fixing relative links. I've provided
a corresponding hack that provides the necessary detail, but since
the Markdown is being presented to the browser as text, we have to
provide a hint in the markdown component for where any relative
links should go, and we're importing and processing the markdown
at runtime. This doesn't seem to be a big performance hit.
The entire build process is driven by the new build script, `build.mjs`,
which starts the esbuild process as a service connected to the build
script and then runs the commands sent to it as fast as possible.
The biggest "hack" in it is actually the replacement for rollup's
`rollup-copy-plugin`, which is clever enough I'm surprised it doesn't
exist as a standalone file-copy package in its own right.
I've also used a filesystem watch library to encode a "watcher"
mechanism into the build script. `node build.mjs --watch` will
work on MacOS; I haven't tested it elsewhere, at least not yet.
`node build.mjs --proxy` does what the old rollup.proxy.js script
did.
The savings are substantial. It takes less than two seconds to build
the whole UI, a huge savings off the older ~45-50 seconds I routinely
saw on my old Mac. It's also about 9% smaller.
The trade-offs appear to be small: processing the CSS as StyleSheets,
and the Markdown as HTML, at run-time is a small performance hit,
but I didn't notice it in amongst everything else the UI does as
it starts up.
Manual chunking is gone; esbuild's support for that is quite difficult
to get right compared to Rollup's, although there's been a bit of
yelling at ESbuild over it. Codemirror is built into its own chunk;
it's just not _named_ distinctly anymore.
The one thing I haven't been able to test yet is whether or not the
polyfills and runtim shims work as expected on older browsers.
* web: continue with performance and build fixes
This commit introduces a couple of fixes enabled by esbuild and other
features.
1. build-locales
`build-locales` is a new NodeJS script in the `./scripts` folder
that does pretty much what it says in the name: it translates Xliff
files into `.ts` files. It has two DevExp advantages over the old
build system.
First, it will check the build times of the xlf files and
their ts equivalents, and will only run the actual build-locales
command if the XLF files are newer than their TS equivalents.
Second, it captures the stderr output from the build-locales command
and summarizes it. Instead of the thousands of lines of "this
string has no translation equivalent," now it just reports the
number of missed translations per locale.
2. check-spelling
This is a simple wrapper around the `codespell` command, mostly
just to reduce the visual clutter of `package.json`, but also to
permit it to run just about anywhere without needed hard-coded
paths to the dictionaries, using a fairly classic trick with git.
3. pseudolocalize and import-maps
These scripts were in TypeScript, but for our purposes I've
saved their constructed equivalents instead. This saves on
visual clutter in the `package.json` script, and reduced the
time they have to run during full builds. They're small enough
I feel confident they won't need too much looking over.
Also, two lint bugs in Markdown.ts have been fixed.
* Removed a few lines that weren't in use.
* build-locales was sufficiently complex it needed some comments.
* web: formalize that horrible unixy git status checker into a proper function.
* Added types for , the Markdown processor for in-line documentation.
* re-add dependencies required for storybook
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix optional deps
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix relative links for docs
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* only build once on startup
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* prevent crash when build fails in watch mode, improve console output
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* redirect Apps docs
* add new wizard and video link
* move in sidebar
* remove link to providers
* tweaks
* tweak
* improve wording
* kens edits
* removed duplicate content
* reworded
* further explain apps and providers
* more intro words
* more word tweaks
* ill stop now
* capitalization
* fix build
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* final surely
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* web: add RAC Provider to the list of providers understood by the wizard
This commit also creates a new, simple alert that knows how to look up the enterprise requirements
and chooses to fill itself in with a notice saying "A license is required for this provider," or
nothing. That harmonizes the display across both wizards, and reduces the demands on the wizards
themselves to "know" about enterprise features.
* web: remove console.log() from ak-license-notice
* web: fix inconsistencies in identity passing.
* web: move the license summary information into a top-level context.
Rather than repeatedly fetching the license summary, this commit
fetches it once at the top-level and keeps it until an EVENT_REFRESH
reaches the top level. This prevents the FOUC (Flash Of Unavailable
Content) while loading and awaiting the end of the load.
* Remove some debugging info, fix a misspelling.
* web: provide a context for enterprise license status
There are a few places (currently 5) in our code where we have checks for the current enterprise
licensing status of our product. While not particularly heavy or onerous, there's no reason to
repeat those same lines, and since our UI is always running in the context of authentik, may as well
make that status a client-side context in its own right. The status will update with an
EVENT_REFRESH request.
A context-aware custom alert has also been provided; it draws itself (or `nothing`) depending on the
state of the license, and the default message, "This feature requires an enterprise license," can be
overriden with the `notice` property.
These two changes reduce the amount of code needed to manage our license alerting from 67 to 38
lines code, and while removing 29 lines from a product with 54,145 lines of code (a savings of
0.05%, oh boy!) isn't a miracle, it does mean there's a single source of truth for "Is this instance
enterprise-licensed?" that's easy to access and use.
* web: [x] The translation files have been updated
* web: add RAC Provider to the list of providers understood by the wizard
This commit also creates a new, simple alert that knows how to look up the enterprise requirements
and chooses to fill itself in with a notice saying "A license is required for this provider," or
nothing. That harmonizes the display across both wizards, and reduces the demands on the wizards
themselves to "know" about enterprise features.
* web: fix inconsistencies in identity passing.
* web: move the license summary information into a top-level context.
Rather than repeatedly fetching the license summary, this commit
fetches it once at the top-level and keeps it until an EVENT_REFRESH
reaches the top level. This prevents the FOUC (Flash Of Unavailable
Content) while loading and awaiting the end of the load.
* Remove some debugging info, fix a misspelling.
* remmove endpoint fetch from both rac provider forms since its not used
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* i18n
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: RAC updates
- special case: disable RAC provider in the wizard if enterprise is not enabled
- remove `settings` YAML editor from the RAC provider in the wizard
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* web/admin: hide expiry time if item is set to not expire
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* format
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* core: show all applications a user can access in admin interface
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* minor adjustments
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add relative time
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* use relative time in most places
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* improve admin dashboard scaling
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web/admin: fix duplicate RBAC preview banner on permission modal
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* switch non-embedded permission page to use vertical tabs
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix some leftover html?
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* move stuff into vertical subtab
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* show all of users permission tabs on one main tab
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* rework role page to match user page
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* use separate tabs
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* rename role permission tables to match user tables
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* rename to credentials and tokens
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add country icon to session list
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add oauth access token list
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add helper to get relative time
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* use pfdivider
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* replace plain hr with pf-c-divider
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* use new logic for showing relative time in charts
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* use consistent relative time for event display
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* remove more leftovers
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix some alignment issues on the admin dashboard
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* update storybook map
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add sanity check to event app lookup
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* make api drawer header fixed
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix table padding for toggle
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix notification drawer for user interface
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* enable system task search
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix formatting, exclude generated script from formatting
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: minor fixes
There's a renderer (it's not a component, not yet) for producing definition lists without
the risk of missing a class or tag.
Breaking conditionally rendered components out to make their use easier to identify.
* fix prettier
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix outpost form
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix more flaky tests
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* re-create locale
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add some description for different permission views
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix system task search
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* update docs
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Ken Sternberg <ken@goauthentik.io>
* web: clear out selecteds list after an API event to ensure a fresh copy of the policies-to-delete list
* Prettier had opinions.
* web: A better fix
This fix creates a new property of Table, 'clearOnRefresh', which
automatically empties the `selectedElements` list when an EVENT_REFRESH
event completes. Set this flag on any table that uses the
`selectedElements` list for bulk deletion; this ensures that stale
data in the `selectedElements` list will not persist and interfere
with future deletion events.
* web: revise css-import-maps to need only a single entry, rather than dual-entry
Given that the difference Vite/Storybook cares about is whether or not there's a
sigil at the end of the CSS string, it seemed silly to require devs to enter
both the raw and sigiled string; just do an in-line text-and-replace.
* web: provide a "select / select all" tool for the dual list multiselect
**This commit**
Provides one of several of the sub-controls needed to make the multi-list multi-select thing work.
This is the simplest control, and I decided to go with it first because it's all presentation; all
it does is show the buttons and send events from those buttons.
A Storybook component is provided to show how well it works.
* web: provide a "select / select all" tool for the dual list multiselect
**This commit**
This commit provides the following new features for dual list multiselect:
- The "available" pane, which has all of the entries that are available to be selected. Items that
are already selected will remain, but they're marked with a checkmark and can neither be selected
or moved.
- The "selected" pane, which has *all* of the entries that have been selected.
- The Pagination control, which in this case only sends an event upstream.
**Plan**:
The plan is to have a master control that marries the available-pane, selected-pane,
select-controls, and pagination-controls into a single component that receives the list of
"currently visible" available entries and keeps the list of "currently selected" entries, as well as
a pass-through for the pagination value that allows it to hide the pagination control if there is
only one page.
A master component *above that* will provide the list of currently visible entries and, at need,
read the value of the master control object for the "selected" list. That component will mostly be
data-only; it's render will probably just be `<slot></slot>`; its duty will be only to map entries
to string keys Lit can use, and to provide the lists we want to provide and the pagination ranges we
want to show.
Some judicious use of grid will allow me size the controls properly with/without the pagination
control.
Status and Title are going to be in the master control.
A <slot> will be provided for Search, but I have no plans to integrate that into this control as of
yet.
There is already a planned fallback control; the multi-select experience on mobile is actually
excellent, and we should exploit that appropriately.
* web: provide a "select / select all" tool for the dual list multiselect
**This commit**
1. Re-arrange the contents of the folder so that the sub-components are in their own folder. This
reduces the clutter and makes it easier to understand where to look for certain things.
2. Re-arranges the contents of the folder so that all the Storybook stories are in their own folder.
Again, this reduces the clutter; it also helps the compiler understand what not to compile.
3. Strips down the "Available items pane" to a minimal amount of interactivity and annotates the
passed-in properties as `readonly`, since the purpose of this component is to display those. The
only internal state kept is the list of items marked-to-move.
4. Does the same thing with the "Selected items pane".
5. Added comments to help guide future maintainers.
6. Restructured the CSS, taking a _lot_ of it into our own hands. Patternfly continues to act as if
all components are fully available all the time, and that's simply not true in a shadowDOM
environment. By separating out the global CSS Custom Properties from the grid and style
definitions of `pf-c-dual-list-selector`, I was able to construct a more simple and
straightforward grid (with nested grids for the columns inside).
7. Added "Delete ALL Selected" to the controls
8. Added "double-click" as a "move this one NOW" feature.
* web: provide a "select / select all" tool for the dual list multiselect
**This commit**
- Fixes the bug whereby pagination would leave the 'some moves available' state visible by clearing
the 'to-move' state when the list of options changes.
- Fixes the bug whereby a change of 'options' in available would also cause an update to
`selectedKeys`, causing the entire selected field to clear. Fixed by making `selectedKeys` a
static object updated only when `selected` is generated rather than generating it anew with each
re-rerender. (Hey, kids, can you say "functional programming and immutability" five time fast? I
knew you could!)
- Fixes the bug whereby the change of outpost type would not cause an update of the `options`
collection.
- Fixes the bug whereby the CSS was not creating enough whitespace separation between the whole
component and its siblings. Host components are coded `span:static` unless otherwise styled to be
`block`; we want `block` most of the time.
- Fixes the bug whereby the list of existing objects wasn't being passed to the handler correctly.
- Updates the Form Handler to recognize this new input object.
- Fixes the bug whereby changing outpost type doesn't handle the list of selected applications well.
- Fixes the bug whereby the identity of the outpost type's associated `fetch()` function loses
identity -- necessary to maintain the selected outpost type switch.
- Fixes the CSS bug whereby horizontal scrolling would not enable correctly when the application's
name overflows the listbox.
- Completes this assignment. :-)
* web: last-minute pre-commit cleanup.
* running localize extract
* web: codeql found an issue with one of my tests.
* web: multi-select
Modified the display so that if it's a template we display it
correctly opposite the text, and provide classes that can be used
in the display to differentiate between the main label and the
descriptive label.
Added a sort key, so the select can sort the right-hand pane correctly.
Fixed the `this.selected` setters to use Arrays instead of maps.
Theoretically, this is terribly inefficient, as it makes it
theoretically O(n^2) rather than O(1), but in practice even if both
lists were 10,000 elements long a modern desktop could perform the
entire scan in 150ms or so.
* fix lint error
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* update strings slightly
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* start on dark theme support
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: Add searchbar and enable it for "selected"
"Available" requires a round-trip to the provider level, so that's next.
* web: provide a search for the dual list multiselect
**This commit**
- Includes a new widget that represents the basic, Patternfly-designed search bar. It just emits
events of search request updates.
- Changes the definition of a data provider to take an optional search string.
- Changes the handler in the *independent* layer so that it catches search requests and those
requests work on the "selected" collection.
- Changes the handler of the `authentik` interface layer so that it catches search requests and
those requests are sent to the data provider.
- Provides a debounce function for the `authentik` interface layer to not hammer the Django instance
too much.
- Updates the data providers in the example for `OutpostForm` to handle search requests.
- Provides a property in the `authentik` interface layer so that the debounce can be tuned.
* web: always trim the search string passed.
* web: code quality pass, extra comments, pre-commit check.
* Serious (and bizarre) merge bug. I guess it doesn't like XML that much.
* Attempting to reason with whatever eslint GitHub is using.
* Prettier has opinions.
* Enable better dark mode.
There were two issues: the dark mode didn't reach into the "search"
bar, and there were several hover states that weren't handled well.
This commit handles both. The color scheme mirrors the one we
currently use, but it's a bit backwards from Patternfly 5. Dunno
how we're gonna reconcile all that.
* Prettier fixes and locale extraction
* web: update pagination type to use generic, provided type
* web: fixed a few comment typos
* Discordant version numbers for @go-authentik/api were causing build failures.
* What is up with CI/CD?
* web: missed a lint issue that prevented the build from running successfully
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* web: provide a context for enterprise license status
There are a few places (currently 5) in our code where we have checks for the current enterprise
licensing status of our product. While not particularly heavy or onerous, there's no reason to
repeat those same lines, and since our UI is always running in the context of authentik, may as well
make that status a client-side context in its own right. The status will update with an
EVENT_REFRESH request.
A context-aware custom alert has also been provided; it draws itself (or `nothing`) depending on the
state of the license, and the default message, "This feature requires an enterprise license," can be
overriden with the `notice` property.
These two changes reduce the amount of code needed to manage our license alerting from 67 to 38
lines code, and while removing 29 lines from a product with 54,145 lines of code (a savings of
0.05%, oh boy!) isn't a miracle, it does mean there's a single source of truth for "Is this instance
enterprise-licensed?" that's easy to access and use.
* web: [x] The translation files have been updated
* web: fix event propogation in search-select wrappers
Two different patches, an older one that extracted long search
blocks that were cut-and-pasted into a standalone component, and a
newer one that fixed displaying placeholder values properly,
conflicted and broke a relationship that allowed for the values to
be propagated through those standalone components correctly.
This restores the event handling and updates the listener set-ups
with more idiomatic hooks into Lit's event system.
* Updated search-select to properly render with Storybook, and provided a
foundation for testing the Search-Select component with Storybook.
* Accidentally deleted this line while making Sonar accept my test data.
* Fixing a small issue that's bugged me for awhile: there's no reason to manually duplicate what code can duplicate.
* Provided a storybook for testing out the flow search.
Discovered along the way that I'd mis-used a prop-drilling technique which caused the currentFlow
to be "undefined" when pass forward, giving rise to Marc's bug.
I *think* this shakes out the last of the bugs. Events are passed up correctly and the initial value
is recorded correctly.
* Added comments and prettier had opinions.
* Restoring old variable names; they didn't have to change after all.
* fix lint
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* unrelated: remove deprecated sentry tracing package since its in the main package
no of course this does not fix the circular import, sigh
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix syntax error in group view page
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* improve error handling in search-select
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* remove requiredness from flow input for invitation
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix dark theme for date and datetime input fields' picker button
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* update locale
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
web: fix event propogation in search-select wrappers
Two different patches, an older one that extracted long search
blocks that were cut-and-pasted into a standalone component, and a
newer one that fixed displaying placeholder values properly,
conflicted and broke a relationship that allowed for the values to
be propagated through those standalone components correctly.
This restores the event handling and updates the listener set-ups
with more idiomatic hooks into Lit's event system.
* make rac blueprint only run when enterprise is active
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* make rac api same as other mappings
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* automatically scale size sent by device pixel ratio
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* actually always allow creation of rac mappings
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix missing application in flow context
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix wizard showing enterprise warning when license is installed
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* cleanup
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* This commit abstracts access to the object `rootInterface()?.config?` into a single accessor,
`authentikConfig`, that can be mixed into any AKElement object that requires access to it.
Since access to `rootInterface()?.config?` is _universally_ used for a single (and repetitive)
boolean check, a separate accessor has been provided that converts all calls of the form:
``` javascript
rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanImpersonate)
```
into:
``` javascript
this.can(CapabilitiesEnum.CanImpersonate)
```
It does this via a Mixin, `WithCapabilitiesConfig`, which understands that these calls only make
sense in the context of a running, fully configured authentik instance, and that their purpose is to
inform authentik components of a user’s capabilities. The latter is why I don’t feel uncomfortable
turning a function call into a method; we should make it explicit that this is a relationship
between components.
The mixin has a single single field, `[WCC.capabilitiesConfig]`, where its association with the
upper-level configuration is made. If that syntax looks peculiar to you, good! I’ve used an explict
unique symbol as the field name; it is inaccessable an innumerable in the object list. The debugger
shows it only as:
Symbol(): {
cacheTimeout: 300
cacheTimeoutFlows: 300
cacheTimeoutPolicies: 300
cacheTimeoutReputation: 300
capabilities: (5) ['can_save_media', 'can_geo_ip', 'can_impersonate', 'can_debug', 'is_enterprise']
}
Since you can’t reference it by identity, you can’t write to it. Until every browser supports actual
private fields, this is the best we can do; it does guarantee that field name collisions are
impossible, which is a win.
The mixin takes a second optional boolean; setting this to true will cause any web component using
the mixin to automatically schedule a re-render if the capabilities list changes.
The mixin is also generic; despite the "...into a Lit-Context" in the title, the internals of the
Mixin can be replaced with anything so long as the signature of `.can()` is preserved.
Because this work builds off the work I did to give the Sidebar access to the configuration without
ad-hoc retrieval or prop-drilling, it wasn’t necessary to create a new context for it. That will be
necessary for the following:
TODO:
``` javascript
rootInterface()?.uiConfig;
rootInterface()?.tenant;
me();
```
* This commit abstracts access to the object `rootInterface()?.tenant?` into a single accessor,
`tenant`, that can be mixed into any AKElement object that requires access to it.
Like `WithCapabilitiesConfig` and `WithAuthentikConfig`, this one is named `WithTenantConfig`.
TODO:
``` javascript
rootInterface()?.uiConfig;
me();
```
* web: Added a README with a description of the applications' "mental model," essentially an architectural description.
* web: prettier did a thing
* web: prettier had opinions about the README
* web: Jens requested that subscription be by default, and it's the right call.
* web: Jens requested that the default subscription state for contexts be , and it's the right call.
* web: prettier having opinions after merging with dependent branch
* web: prettier still having opinions.
* This commit abstracts access to the object `rootInterface()?.config?` into a single accessor,
`authentikConfig`, that can be mixed into any AKElement object that requires access to it.
Since access to `rootInterface()?.config?` is _universally_ used for a single (and repetitive)
boolean check, a separate accessor has been provided that converts all calls of the form:
``` javascript
rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanImpersonate)
```
into:
``` javascript
this.can(CapabilitiesEnum.CanImpersonate)
```
It does this via a Mixin, `WithCapabilitiesConfig`, which understands that these calls only make
sense in the context of a running, fully configured authentik instance, and that their purpose is to
inform authentik components of a user’s capabilities. The latter is why I don’t feel uncomfortable
turning a function call into a method; we should make it explicit that this is a relationship
between components.
The mixin has a single single field, `[WCC.capabilitiesConfig]`, where its association with the
upper-level configuration is made. If that syntax looks peculiar to you, good! I’ve used an explict
unique symbol as the field name; it is inaccessable an innumerable in the object list. The debugger
shows it only as:
Symbol(): {
cacheTimeout: 300
cacheTimeoutFlows: 300
cacheTimeoutPolicies: 300
cacheTimeoutReputation: 300
capabilities: (5) ['can_save_media', 'can_geo_ip', 'can_impersonate', 'can_debug', 'is_enterprise']
}
Since you can’t reference it by identity, you can’t write to it. Until every browser supports actual
private fields, this is the best we can do; it does guarantee that field name collisions are
impossible, which is a win.
The mixin takes a second optional boolean; setting this to true will cause any web component using
the mixin to automatically schedule a re-render if the capabilities list changes.
The mixin is also generic; despite the "...into a Lit-Context" in the title, the internals of the
Mixin can be replaced with anything so long as the signature of `.can()` is preserved.
Because this work builds off the work I did to give the Sidebar access to the configuration without
ad-hoc retrieval or prop-drilling, it wasn’t necessary to create a new context for it. That will be
necessary for the following:
TODO:
``` javascript
rootInterface()?.uiConfig;
rootInterface()?.tenant;
me();
```
* web: Added a README with a description of the applications' "mental model," essentially an architectural description.
* web: prettier had opinions about the README
* web: Jens requested that subscription be by default, and it's the right call.
* This commit abstracts access to the object `rootInterface()?.config?` into a single accessor,
`authentikConfig`, that can be mixed into any AKElement object that requires access to it.
Since access to `rootInterface()?.config?` is _universally_ used for a single (and repetitive)
boolean check, a separate accessor has been provided that converts all calls of the form:
``` javascript
rootInterface()?.config?.capabilities.includes(CapabilitiesEnum.CanImpersonate)
```
into:
``` javascript
this.can(CapabilitiesEnum.CanImpersonate)
```
It does this via a Mixin, `WithCapabilitiesConfig`, which understands that these calls only make
sense in the context of a running, fully configured authentik instance, and that their purpose is to
inform authentik components of a user’s capabilities. The latter is why I don’t feel uncomfortable
turning a function call into a method; we should make it explicit that this is a relationship
between components.
The mixin has a single single field, `[WCC.capabilitiesConfig]`, where its association with the
upper-level configuration is made. If that syntax looks peculiar to you, good! I’ve used an explict
unique symbol as the field name; it is inaccessable an innumerable in the object list. The debugger
shows it only as:
Symbol(): {
cacheTimeout: 300
cacheTimeoutFlows: 300
cacheTimeoutPolicies: 300
cacheTimeoutReputation: 300
capabilities: (5) ['can_save_media', 'can_geo_ip', 'can_impersonate', 'can_debug', 'is_enterprise']
}
Since you can’t reference it by identity, you can’t write to it. Until every browser supports actual
private fields, this is the best we can do; it does guarantee that field name collisions are
impossible, which is a win.
The mixin takes a second optional boolean; setting this to true will cause any web component using
the mixin to automatically schedule a re-render if the capabilities list changes.
The mixin is also generic; despite the "...into a Lit-Context" in the title, the internals of the
Mixin can be replaced with anything so long as the signature of `.can()` is preserved.
Because this work builds off the work I did to give the Sidebar access to the configuration without
ad-hoc retrieval or prop-drilling, it wasn’t necessary to create a new context for it. That will be
necessary for the following:
TODO:
``` javascript
rootInterface()?.uiConfig;
rootInterface()?.tenant;
me();
```
* web: Added a README with a description of the applications' "mental model," essentially an architectural description.
* web: prettier had opinions about the README
* web: Jens requested that subscription be by default, and it's the right call.
* web: adjust RAC to point to the (now independent) Interface.
- Also, removed redundant check.
