**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.
**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.
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.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
* Translate web/xliff/en.xlf in ko
100% translated source file: 'web/xliff/en.xlf'
on 'ko'.
---------
Co-authored-by: transifex-integration[bot] <43880903+transifex-integration[bot]@users.noreply.github.com>
* web: fix storybookbuild build after npm update
This commit follows the [patch for Turnstile](https://github.com/goauthentik/authentik/pull/7854) and
performs a similar operation for the Storybook build, which failed after the latest `npm audit` and
`npm update` passes.
[This patch to Vite](https://github.com/vitejs/vite/pull/10762) fixes a problem with the Vite build
in that Vite could not resolve if a CSS import was strictly at the module level or if it was
necessary to include the imported CSS at the document level. The fix is to hack a query, `?inline`,
to the end of the import string, to indicate that it's a module-only import.
The Storybook for Web Components build recommended by the Open Webcomponent Consortium is a
Storybook-Vite implementation. The latest update fully deprecated undecorated CSS imports, and
Storybook broke, unable to reconcile the CSS imports.
This patch inlines the inlining of the CSS automatically for Storybook by using the Rollup
`modify()` plug-in which performs string substitutions on the source code before it's presented to
the compiler and bundler; it recognizes the strings that require inlining, those that match the
regex:
``` JavaScript
/^(import \w+ from .*\.css)";/
```
... and replaces them with a version ending in `.css?inline`. Because the actual recognizer inside
`modify()` recognizes strings and not regular expressions, a script to build the strings has been
added to the `scripts` folder.
Just like locales, you will have to re-run and re-build `build-storybook-import-maps` script if you
add a new CSS file to the source tree.
* web: prettier had opinions
* web: apply eslint + sonarjs check to the scripts folder.
* 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.
* web: prettier is still having opinions, dammit.
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...
