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