* web: much better focus discipline
Fix the way focus is handled in SearchSelect so that the drop-down isn't grabbing the focus away
from the Input when the user wants to type in their selection.
Because it was broken otherwise!
There's still a bug where it's possible to type in a complete value
*Label*, then leave the component's focus (input and menu) completely,
in which case the Label remains, looking innocent and correct, but
it is *not* reflective of the value as understood by the SearchSelect
API controller.
Gonna try to fix that next. But I'm saving this as a useful checkpoint.
* .
* root: insert daphne app in correct order
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: implement ak-list-select
Creates a new element, ak-list-select, which is a scrollable list that reports when an element is clicked or
selected by the keyboard.
I was hideously over-engineering ak-search-select-menu, and I decided to try something simpler. This is
that something. The events we care about are just "change" and "lost focus", and both of those can be
attached by the parent regardless of portaling.
* web: ak-list-select is complete
An extraction of the "menu" and "list" features from SearchSelect
and DualSelect, this is a very simplified version of a visible list
that emulates the Radio/Select behavior (i.e only one from the
collection may be "valued" at the time). It has no visible indicators
of selection (aside from some highlighting), as it's meant to be
used to present the list rather than be indicative of any state of
the list.
I was seriously over-engineering the menu. It turns out, it's just
not that difficult after all. The only things we care about, really,
are "did the user change the selection," "did the user click out
of the list," and "did the user press the escape key." Those are
pre-existing events (click w/value, blur, and keydown w/keycode,
respectively), so there was no need for me to introduce new custom
events to handler them.
* web: downgrade sonarjs again, because dependabot
Dammit, really need to tell that machine to leave our versions alone.
* web: search select
After a lot of testing and experimenting, it's finally starting to look stable.
What a pain in the neck this has all been.
* web: hold
* web: search select with focus and progressive search
- New component: ak-list-select, which allows you to select from a list of elements, with keyboard
control.
- New component: ak-portal, which manages elements by moving "slotted" content into a distant
component, usually one attached to the body, and positions it relative to an existing element.
- ak-search-select-view has been revamped to handle focus, change, input, and blur using
the browser native event handlers, rather than inventing my own.
- ak-search-select has been turned into a simple driver that manages the view.
- ak-search-select has a new declarative syntax for the most common use case.
I seriously over-engineered this thing, leaning too heavily on outdated knowledge or assumptions
about how the browser works. The native event handlers attached at the component's borders works
more than fine, and by attaching the event handlers to the portaled component before sending it
off to the slots, the correct handlers get the message. This revision leverages the browser
a *lot* more, and gets much more effective interaction with much less code.
`<ak-list-select>` is a new component that replaces the ad-hoc menu object of the old SearchSelect.
It is a standalone component that just shows a list, allows someone to navigate that list with the
keyboard or the mouse. By default, it is limited to half the height of the viewport.
The list does not have an indicator of "selected" at this time. That's just a side effect of it
being developed as an adjunct to search-select. Its design does not preclude extension.
It has a *lot* of CSS components that can be customized. The properties and events are documented,
but there is only one event: `change`. Consistent with HTML, the value is not sent with the `change`
event; clients are expected to extract it with `change:event.target.value`.
Like all HTML components, it is completely stringly defined; the value is either a string or
undefined.
`<ak-portal>` is a somewhat specialized "portal" component that places an `ak-list-select` in an
object on top of the existing DOM content. It can generalized to do this with any component, though,
and can be extended. It has no events or CSS, since it's "just" managing the portaling relationship.
`<ak-search-select-view>` is the heart of the system. It takes a collection options and behaves
like an autocomplete component for them. The only unique event it sends out is `change`, and like
`ak-list-select`, it expects the client to retrieve the value.
Like all HTML components, it is completely stringly defined; the value is either a string or
undefined.
This is the SearchSelect component we've all known to come and love, but with a better pop-up and
cleaner keyboard interaction. It emits only one event, `ak-change`, which *does* carry the value
with it.
The Storybooks have been updated to show the current version of Search Select, with a (simulated)
API layer as well as more blunt stringly-typed tests for the View layer. A handful of tests have
been provided to cover a number of edge cases that I discovered during testing. These run fine
with the `npx` command, and I would love to see them integrated into CI/CD.
The search select fields `renderElement`, `renderDescription`, and `value` properties of
`ak-search-select` have been modified to take a string. For example, the search for the
list of user looks like this:
```
<ak-search-select
.fetchObjects=${async (query?: string): Promise<User[]> => {
const args: CoreUsersListRequest = { ordering: "username" };
if (query !== undefined) {
args.search = query;
}
const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args);
return users.results;
}}
.renderElement=${(user: User): string => {
return user.username;
}}
.renderDescription=${(user: User): TemplateResult => {
return html`${user.name}`;
}}
.value=${(user: User | undefined): string | undefined => {
return user?.username;
}}
></ak-search-select>
```
The most common syntax for the these three fields is "just return the string contents of a field by
name," in the case of the description wrapped in a TemplateResult with no DOM components. By
automating that initialization in the `connectedCallback` of the `ak-search-select` component,
this object would look like:
<ak-search-select
.fetchObjects=${async (query?: string): Promise<User[]> => {
const args: CoreUsersListRequest = { ordering: "username" };
if (query !== undefined) {
args.search = query;
}
const users = await new CoreApi(DEFAULT_CONFIG).coreUsersList(args);
return users.results;
}}
.renderElement=${"username"}
.renderDescription=${"name"}
.value=${"username"}
></ak-search-select>
```
Due to a limitation in the way properties (such as functions) are interpreted, the syntax
`renderElement="username"` is invalid; it has to be a property expression. Sorry; best I could do.
The old syntax works just fine. This is a "detect and extend at runtime" enhancement.
* Added comments to the Component Driver Harness.
* Added more safety and comments.
* web: remove string-based access to API; replace with a consolidated "adapter" layer.
Clean out the string-based API layer in SearchSelect. Break SearchSelect into a
"Base" that does all the work, and then wrap it in two different front-ends:
one that conforms to the old WCAPI, and one with a slightly new WCAPI:
```
<ak-search-select-ez
.config=${{
fetchObjects: async (query?: string): Promise<Group[]> => {
const args: CoreGroupsListRequest = {
ordering: "name",
includeUsers: false,
};
if (query !== undefined) {
args.search = query;
}
const groups = await new CoreApi(DEFAULT_CONFIG).coreGroupsList(
args,
);
return groups.results;
},
renderElement: (group: Group): string => group.name,
value: (group: Group | undefined): string | undefined => group?.pk,
selected: (group: Group): boolean => group.pk === this.instance?.group
}}
blankable
>
</ak-search-select-ez>
```
* Prettier had opinions. In one case, an important opinion.
* Rename test and fix lint error.
* 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>
* web: bug / licenseStatus is not defined on initial render
- Test if the licenseStatus is available before rendering the banner
- The banner is rendered correctly when the status becomes available.
The loading sequence is such that if the user reloads the page, the
first attempt to render the license banner fails because the
licenseStatus field is not yet populated; the result is an ugly
`licenseStatus is undefined` on the console.
Because the licenseStatus is a live context, when it is updated
any objects that subscribe to it are scheduled for a re-render.
This is why the system appears to behave correctly now.
While this is invisible to the user, it's still undesirable behavior.
Returning `nothing` requires that we remove the type declarations
as return values from the renderers. Typescript's inferers do
just fine.
* fix some other small things
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: 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.
* root: fix migrations missing using db_alias
Signed-off-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
* more
Signed-off-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
* web: add wireit as a dependency and move SFE into an independent package
* web: make `sfe` a legitimite subpackage and use `wireit` to control the build
- Move sfe to a `packages` subfolder: this is a more standard format for subpackages
- `Move sfe/index.ts` to `sfe/src/index.ts`: this is a more standard layout for a package
- Adjusted paths is `package.json` and `sfe/rollup.config.js` accordingly.
- Add prettier and safety linting to `sfe`.
- fix a naming issues in `build-locales`, highlighted by eslint
- fix some minor linting issues is `build-locales`
- add comments to `build-locales`, to make it clear what it does
- updated the README and LICENSE files
- start using `wireit` heavily as the task-runner definition language
Primarily, to look professional and pave the way for future enhancements.
Aside from the standardization and so forth, the primary goal here is to move our task runner to
wireit. Wireit offers a number of intriguing abilities with respect to caching, building, and
testing, such as an ability to `watch` our folders and files and automatically re-run the build when
the relevant code changes, without having to rebuild the copied content or sub-packages such as
`sfe`.
The ability to pass in environment variables without needed `cross-env` makes code that required it
much easier to read.
Commands that take a long time can be prefixed with the environment variable `${NODE_RUNNER} `,
which then would allow you to default to using `node`, but by setting `NODE_RUNNER` in your shell
you could specify `bun` (or `deno`, maybe, but I haven't tested it with `deno`). `bun` runs the
`eslint` pass in about three-quarters the time `node` takes.
This commit exists primarily to ensure that the build runs as expected under CI, and the result is
as expected under CI.
Wireit was produced by Google and is used by Adobe Spectrum Components, Patternfly Components,
Material Web, Red Hat Design, and the Lit-Element teams, so I'm confident that it's robust and
reliable as a build runner.
* Merge failed to account for this.
* web: fix bad reference to lint command
* Adding sfe to workspaces means its install is run automatically.
* sfe build is now orchestrated by the web build process
* web: slowly tracking down the old ways.
* Trying to fix lit-analyze pass.
* Still struggling with the build.
* Monorepo, please.
* Still trying to solve swc binding issue.
* Reformat package.json so that scripts and wireit are closer to one another.
* Use the right formatter for packagefiles.
* Retarget dockerfile to have the right paths to sfe during build.
* Comment to explain gitignore update.
* Add lint correcting to package.json as well as package-lock
* Restored lost package-lock.json
* Updating the authentik version.
* Trying to force version consistency.
---------
Signed-off-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
* web: update to ESLint 9
ESLint 9 has been out for awhile now, and all of the plug-ins that we use have caught up, so it is
time to bite the bullet and upgrade. This commit:
- upgrades to ESLint 9, and upgrades all associated plugins
- Replaces the `.eslintrc` and `.eslintignore` files with the new, "flat" configuration file,
"eslint.config.mjs".
- Places the previous "precommit" and "nightmare" rules in `./scripts/eslint.precommit.mjs` and
`./scripts/eslint.nightmare.mjs`, respectively
- Replaces the scripted wrappers for eslint (`eslint`, `eslint-precommit`) with a single executable
that takes the arguments `--precommit`, which applies a stricter set of rules, and `--nightmare`,
which applies an even more terrifyingly strict set of rules.
- Provides the scripted wrapper `./scripts/eslint.mjs` so that eslint can be run from `bun`, if one
so chooses.
- Fixes *all* of the lint `eslint.config.mjs` now finds, including removing all of the `eslint`
styling rules and overrides because Eslint now proudly leaves that entirely up to Prettier.
To shut Dependabot up about ESLint.
* Added explanation for no-console removal.
* web: did not need the old and unmaintained nightmare mode; it can be configured directly.
