* 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: restore testability to search-select
I don't know how this disappeared, but the 'data-managed-for' tag here helps the test harness
find the right button to click when running the application wizard tests, among others. :wq.
* prettier has opinions
* 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.
* web: clear "blanked" placeholder when present (#15)
- Renames "SearchSelect.ts" to "ak-search-select.ts", the better to reflect that it is a web
component.
- Moves it into an independent folder named "SearchSelect" so that all existing folders that use it
don't need any renaming or manipulation.
- Refactors SearchSelect.ts in the following ways:
- Re-arranges the properties declaration so the seven properties actually used by callers are at
the top; comments and documents every property.
- Separates out the `renderItem` and `renderEmptyItem` HTML blocks into their own templates.
- Separates `renderItem` further into `renderItemWithDescription` and
`RenderItemWithoutDescription`; prior to this, there were multiple conditionals handling the
description issue
- Separates `renderItems` into `renderItemsAsGroups` and `renderItems`; this documents what each
function does and removes multiple conditionals
- Isolates the `groupedItems()` logic into a single method, moving the *how* away from the *what*.
- Replaces the manual styling of `renderMenu()` into a lit-element `styleMap()`. This makes the
actual render a lot more readable!
- Refactors the `value` logic into its own method, as a _getter_.
- Refactors the ad-hoc handlers for `focus`, `input`, and `blur` into functions on the `render()`
method itself.
- Alternatively, I could have put the handlers as methods on the ak-search-select Node itself;
Lit would automatically bind `this` correctly if referenced through the `@event` syntax.
Moving them *out* of the `render()` method would require significantly more testing, however,
as that would change the code flow enough it might have risked the original behavior. By
leaving them in the `render()` scope, this guarantees their original behavior -- whether that
behavior is correct or not.
- FIXES#15
- Having isolated as much functionality as was possible, it was easy to change the `onFocus()`
event so that when the user focuses on the `<input>` object, if it's currently populated with
the empty option and the user specified `isBlankable`, clear it.
- **Notice**: This creates a new, possibly undesirable behavior; since it's not possible to know
*why* the input object is currently empty, in the event that it is currently empty as a result
of this clearing there is no way to know when the "empty option" marker needs to be put back.
This is an incredibly complex bit of code, the sort that really shouldn't be written by application
teams. The behavior is undefined in a number of cases, and although none of those cases are fatal,
some of them are quite annoying. I recommend that we seriously consider adopting a third-party
solution.
Selects (and DataLists) are notoriously difficult to get right on the desktop; they are almost
impossible to get right on mobile. Every responsible implementation of Selects has a
"default-to-native" experience on mobile because, for the most part, the mobile native experience is
excellent -- delta wanting two-line `<option>` blocks and `<optiongroup>`s, both of which we do
want.
This component implements:
- Rendering the `<input>` element and handling its behavior
- Rendering the `<select>` element and handling its behavior
- Mediating between these two components
- Fetching the data for the `<select>` component from the back-end
- Filtering the data via a partial-match search through the `<input>` element
- Distinguishing between hard-affirm and soft-affirm "No choice" options
- Dispatching the `<select>` element via a portal, the better to control rendering.
That's a *lot* of responsibilities! And it makes Storybooking this component non-viable. I recommend
breaking this up further, but I've already spent a lot of time just doing the refactoring and
getting the new behavior as right as possible, so for now I'm just going to submit the clean-up and
come back to this later.
* web: refactor search-select and fix placeholder
* web: refactor search-select and fix placeholder; fix misleading comment
* backport changes
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* Fix display issue when using "grouped" select lists
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* 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.
This commit adds "Polish" and "Korean" to the list of languages recognized by the
web-UI, and updates the XLIFF files to include a few new strings from the RAC
project.
By adding 'grow' but not 'shrink' to the header section, the page was allowed to allocate
as much width as was available when the window opened, but not allowed to resize the width
if it was pushed closed by zoom, page resize, or summon sidebar.
This commit adds 'shrink' to the capabilities of the header.
* web: break circular dependency between AKElement & Interface.
This commit changes the way the root node of the web application shell is
discovered by child components, such that the base class shared by both
no longer results in a circular dependency between the two models.
I've run this in isolation and have seen no failures of discovery; the identity
token exists as soon as the Interface is constructed and is found by every item
on the page.
* web: fix broken typescript references
This built... and then it didn't? Anyway, the current fix is to
provide type information the AkInterface for the data that consumers
require.
* web: description lists as functions
One thing I hate is clutter. Just tell me what you're going to do. "Description Lists" in our code are
renderings of Patternfly's DescriptionList; we use only four of
their idioms: horizontal, compact, 2col, and 3col. With that in mind, I've stripped out the DescriptionList
rendering code from UserViewPage and replaced it with a list of "Here's what to render" and a function call
to render them. The calling code is still responsible for having the right styles available, as this is
not a component or an attempt at isolation; it is *just* a function (at this point).
* web: fix issue that prevented the classMap from being rendered properly
* web: added comments to the description list.
* web: analyze & prettier had opinions
* web: Fix description-list demo
This commit re-instals the demo for the "description list" of user fields.
* web: prettier had opinions.
* any -> unknown
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* web: expressing success
Ever see an idiom that just, I dunno, *annoyed* you?
Automated tools for the win.
* web: repetition, repetition, repetition! [throws chair]
* web: giving the de-duplication treatment to policy mappings.
* Created a BaseStageForm with success message and canonical primary key type for for Providers, Sources, and Stages.
* web: fix turnstile types after update
After running 'npm update' on the dev tree, the build started to
fail with these options and types no longer being set correctly in
the source tree.
I have explicitly included the Turnstile object as a sub-component
of Window, and modified the CaptchaStage to understand the
TurnstileObject and TurnstileOptions, and the build now completes.
* eslint says to prefer this format
* Google recaptcha (aka Turnstile) doesn't understand the "invisible" setting; that's purely
an HCaptcha thing.
* web: removing the typecast means I no longer need the type.
* Locking pyright to 1.1.338 and maintaining it.
* web: locking down hard
After reading [this
guide](https://medium.com/@anjusha.khandavalli/decoding-commonly-used-symbols-in-package-json-file-e08f3939c9e4),
I've locked down the version of pyright to a specific and immovable
version until we can get a better read on how the Pyright upgrade
breaks things.
* Update is specific to package-lock.json.
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: break circular dependency between AKElement & Interface.
This commit changes the way the root node of the web application shell is
discovered by child components, such that the base class shared by both
no longer results in a circular dependency between the two models.
I've run this in isolation and have seen no failures of discovery; the identity
token exists as soon as the Interface is constructed and is found by every item
on the page.
* web: fix broken typescript references
This built... and then it didn't? Anyway, the current fix is to
provide type information the AkInterface for the data that consumers
require.
* Refactor the Table component for legiibility.
This commit does not change the functionality of the Table, nor does it require any changes to
existing uses of the Table.
It will probably be easier to review this by looking at the `View Code` in the upper-right-hand
corner of GitHub's reviewer; that or side-by-side, if your monitor is wide-enough.
The existing Table component is used 49 times (at last count) in authentik, and those uses are
wide-ranging and complex, but they all come down to a couple of entries:
- Displaying a row of summary information
- Permitting the display of more complex ("expanded") information
- Displaying a collection of rows
- Displaying a collection of rows grouped by some header
- Pagination of many rows
- Permitting an action on the visible rows
- *Not* blocking events that may happen on a cell or expansion
- Providing a toolbar
- Providing a display of "selected items" when using the table as a multi-select with many pages of
items (chips display)
- Providing sort functionality on columns
- Providing the ability to filter the table from the back-end
This commit changes none of that.
What this commit does is re-arrange the innards of Table.ts into smaller units:
- The RowGroup's "checkbox" and "expansion" segments are pulled out into their own functions, which
makes the RowGroup's actual functionality much easier to see and understand. The same is true of
the rowGroup's selection and expansion handlers.
- Almost all in-line decisions and event handlers have been extracted and named, to make it easier
to see and understand what's happening inside what is otherwise a jumble of HTML.
- The TablePagination code was duplicated-- and one of the duplicates was wrong! So I've
deduplicated it and fixed the bug.
- In many cases, the conditional code grew organically, resulting in some pretty hard-to-understand
conditions.
- A really good example is the `itemSelectHandler`; there are two possible events that result in a
change, and the consequences of that change may be that *all* checkboxes are unchecked. In all
cases where there's an add/remove option, I've opted to remove the specific object always (even
if it's not present!), and then add it if it's actually an add. Logically coherent as long as
the accessors are not also mutators.
It was not possible to redefine the `columns()` function to take anything other than a TableColumn
object; I wanted to be able to replace all of the `new TableColumn("Foo")` with just `"Foo"`,
building the TableColumn dynamically at construction time. Unfortunately, some of our most complex
tables dynamically re-arrange the columns (RBAC, for example, draws an empty table, fetches the
content, then redraws with the columns based on what was retrieved), and detecting that change and
rebuilding those columns proved more difficult than anticipated. I may contemplate an alternative
column specification if I find myself building a lot of tables.
Likewise, it was not possible to replace all of our uses of the empty `html` declaration with the
Lit-preferred `nothing` sigil; hard-coded `TemplateResult` entries scattered throughout the code
caused massive type inconsistencies, since a type of `TemplateResult | nothing` is unique thanks to
`nothing`'s underlying Symbol. It is for this issue that Typescript itself recommends you "prefer
allowing Typescript infer the return type." I may revisit this issue later.
I've added a `prequick` command to `package.json`; this one runs *only* the Typescript type checker,
lit-analyse, and `eslint:precommit`, the last of which lints only the files touched since the last
commit. This is fast, intended to support quick checks of code quality not normally displayed in the
IDE.
* web: refactor table
After talking to Jens, I've put back the positional variable and eslint escape; it's better
to document existing practices than try to force something.
I also misunderstood the role of `inner` in one bit of code, and have restored its functionality.
Looking through the code, though, I can see a case where it will fail; it's expecting `inner` to
be either undefined or a TemplateResult; if there's no error message, the error message defaults
to a blank TemplateResult, which is _not_ undefined, and will result in a blank table.
This will only happen under very weird network failures, but...
web/user: fix app not updating
so when using two classes in a classMap directive, the update fails (basically saying that each class must be separated), however this error only shows when directly calling requestUpdate and is swallowed somewhere when relying on the default render cycle
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: break circular dependency between AKElement & Interface.
This commit changes the way the root node of the web application shell is
discovered by child components, such that the base class shared by both
no longer results in a circular dependency between the two models.
I've run this in isolation and have seen no failures of discovery; the identity
token exists as soon as the Interface is constructed and is found by every item
on the page.
* web: fix broken typescript references
This built... and then it didn't? Anyway, the current fix is to
provide type information the AkInterface for the data that consumers
require.
* web: extract the form processing from the form submission process
Our forms have a lot of customized value handling, and the function `serializeForm` takes
our input structures and creates a JSON object ready for submission across the wire for
the various models provided by the API.
That function was embedded in the `ak-form` object, but it has no actual dependencies on
the state of that object; aside from identifying the input elements, which is done at the
very start of processing, this large block of code stands alone. Separating out the
"processing the form" from "identifying the form" allows us to customize our form handling
and preserve form information on the client for transactional purposes such as our wizard.
w
* web: multi-select, but there's a styling issue.
* web: provide a closed control for multi-select
This commit creates a new control, using the ak-form-element-horizontal as a *CLOSED*
object, for our multi-select. This control right now is limited to what we expect to
be using in the wizard, but that doesn't mean it can't be smarter in the future.
* web: hung up by a silly spelling error
* web: update the form-handling method
With the `serializeForm` method extracted, it's much easier to examine and parse
every *form* with every keystroke, preserving them against the changes that
happen as the customer navigates the Wizard. With that in place, it became
straightforward to retrofit the "handle changes to the application, to the provider, and to the providerType"
into the three pages of the wizard, and to provide *all* of the form elements in a base class
such that no specialized handling needs to happen to any of the child pages.
Fixed an ugly typo in the oauth2 provider, as well.
* web: wizard should work with multi-select and should reflect default values
(Note: This commit is predicated on both the "Extract serializeForm function from Form.ts" and
"Provide a controlled multi-select input control" PRs.)
The initial attempt at the wizard was woefully naive in its implementation, missing some critical
details along the way. This revision starts off with one stronger assumption: trust that Jens knows
what he's doing, and knew what he was building when he wrote the initial `Form` handler.
The problem with the `Form` handler, and the reason I avoided it, was simply that it does too many
things, especially in its ModelForm variant: it receives a model from the back-end, renders a
(hand-written) form for that model, allows the user to interact with that model, and facilitates
saving it to the back-end again, complete with on-page notifications of success or failure.
The Wizard could not use all of that. It needs to gather the information for *two* models (an
Application and a Provider, plus the ProviderType) and has a new and specialized end-point for a
transaction that allows the committing or roll back of both models to happen simultaneously,
predicated on success or failure respectively.
With "Extract `serializeForm` completed, it was possible to repurpose the forms that already
existed, stripping them down to just their input components, and eventing the entire thing in a
single event loop of "events flow up, data flows down." In this case, the *entire form* is
serialized on a per-event basis and pushed up the to the orchestration layer, which saves them off.
Writing a parent `BasePanel` class that has accessors for `formValues` and `valid` means that the
state of every page is accessible with a simple query. This simplified the `BaseProviderPanel` class
to just specialize the `dispatchUpdate` method to send the wizard update with the new provider
information filled out.
Because the *form* is being treated as the source of truth about the state of a `Partial<Application>`
or `Partial<*Provider>` object, the defaults are now being captured as expected.
Likewise, this simplified the `providerCache` layer which preserves customer input in the event that
the customer starts filling out the wrong provider to a simple conditional clause in the
orchestrator. The Wizard has much fewer smarts because it doesn't (and probably never did) need
them.
Along with the above changes, the following has also been done:
For SAML and SCIM, the providerMappings now works. They weren't being managed as `state` objects,
so they weren't receiving updates when the update event retrieved the information from the back-end.
In order to make clear what's happening, I have extracted the loops from the original definition and
built them as named objects: `propertyMappings`, `pmUserValues`, `pmGroupValues` and so on, which I
then pass into the new multi-select component.
I fixed a really embarrassing typo in Oauth2's "advanced settings" block.
I have extracted the CoreGroup search-select into a custom component.
I deleted the `merge` function. That was a faulty experiment with non-deterministic outcomes, and I
was never happy with it. I'm glad its gone.
I've added a title header to each of the providers, so the user can be sure that they're looking
at the right provider type when they start filling out the form.
I've created a new token, `data-ak-control`, with which we can mark all objects that we can treat as
Authentik value-producing components, the form value of which is available through a `json()`
method. I've added this bit of intelligence to the `serializeForm` function, short-circuiting the
complex processing and putting the "this is the shape of the value we expect from this input" *onto
the input itself*. Which is where it belongs.
* web: add error handling to wizard.
* web: improve error handling in light components
Rather than reproduce the error handling across all of the LightComponents,
I've made a parent class that takes the common fields to distribute between
the ak-form-element-horizontal and the input object itself. This made it
much easier to properly display errors in freeform input fields in the
wizard, as well as working with the routine error handling in Form.ts
* Added the radio control to the list of LightComponents.
* Fix bug where event was recorded twice.
* Fixed merge bug (?) that somehow deleted the Authorization Select block in OAuth2.
* web: prettier had opinions
* web: added error handling and display
* web: bump @lit-labs/context from 0.4.1 to 0.5.1 in /web
Bumps [@lit-labs/context](https://github.com/lit/lit/tree/HEAD/packages/labs/context) from 0.4.1 to 0.5.1.
- [Release notes](https://github.com/lit/lit/releases)
- [Changelog](https://github.com/lit/lit/blob/main/packages/labs/context/CHANGELOG.md)
- [Commits](https://github.com/lit/lit/commits/@lit-labs/context@0.5.1/packages/labs/context)
---
updated-dependencies:
- dependency-name: "@lit-labs/context"
dependency-type: direct:production
update-type: version-update:semver-minor
...
Signed-off-by: dependabot[bot] <support@github.com>
* web: updated wizard to run with latest package.json configuration
Apparently, there were stale dependencies in package-lock.json that were conflicting
with the requests in our package.json. By running `npm update`, I was able to resolve
the conflict.
I have also removed the default names from the context names collection; they weren't doing
any good, and they permit frictionless renaming of dependencies, which is never a good
idea.
* web: schlepping on the errors messages
During testing, I realized I was unhappy with the error messages. They're not very helpful.
By adding links to navigate back to the place where the error occurred, and providing better
context for what the error could have been, I hope to help the use correct their errors.
* make package the same as main
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* web: break circular dependency between AKElement & Interface.
This commit changes the way the root node of the web application shell is
discovered by child components, such that the base class shared by both
no longer results in a circular dependency between the two models.
I've run this in isolation and have seen no failures of discovery; the identity
token exists as soon as the Interface is constructed and is found by every item
on the page.
* web: fix broken typescript references
This built... and then it didn't? Anyway, the current fix is to
provide type information the AkInterface for the data that consumers
require.
* web: rollback dependabot's upgrade of context
The most frustrating part of this is that I RAN THIS, dammit, with the updated
context and the current Wizard, and it finished the End-to-End tests without
complaint.
* web: fix labels on group view page
This is a wild bug, because what caused it and how it manifested are seemingly
unrelated as to be hallcinatory.
