* 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: 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>
