This commit is a hodge-podge of updates and changes to the web. Functional changes:
- Makefile: Fixed a bug in the `help` section that prevented the WIDTH from being accurately
calculated if `help` was included rather than in-lined.
- ESLint: Modified the "unused vars" rule so that variables starting with an underline are not
considered by the rule. This allows for elided variables in event handlers. It's not a perfect
solution-- a better one would be to use Typescript's function-specialization typing, but there are
too many places where we elide or ignore some variables in a function's usage that switching over
to specialization would be a huge lift.
- locale: It turns out, lit-locale does its own context management. We don't need to have a context
at all in this space, and that's one less listener we need to attach t othe DOM.
- ModalButton: A small thing, but using `nothing` instead of "html``" allows lit better control over
rendering and reduces the number of actual renders of the page.
- FormGroup: Provided a means to modify the aria-label, rather than stick with the just the word
"Details." Specializing this field will both help users of screen readers in the future, and will
allow test suites to find specific form groups now.
- RadioButton: provide a more consistent interface to the RadioButton. First, we dispatch the
events to the outside world, and we set the value locally so that the current `Form.ts` continues
to behave as expected. We also prevent the "button lost value" event from propagating; this
presents a unified select-like interface to users of the RadioButtonGroup. The current value
semantics are preserved; other clients of the RadioButton do not see a change in behavior.
- EventEmitter: If the custom event detail is *not* an object, do not use the object-like semantics
for forwarding it; just send it as-is.
- Comments: In the course of laying the groundwork for the application wizard, I throw a LOT of
comments into the code, describing APIs, interfaces, class and function signatures, to better
document the behavior inside and as signposts for future work.
* web/wdio-2:
remove hooks
add basic CI
prettier run
add dependabot
update package name
fix blueprints
web: improve testing by adding test admin user via blueprint
* main: (23 commits)
web/admin: use <pre> for order field on bound elements (#7031)
blueprints: fix mismatched user-login stage order (#7030)
stages/email: rework email templates (#7029)
website/docs: add notice for nginx ingress configuration requirement (#7027)
translate: Updates for web/xliff/en.xlf in fr
web: locales: rename fr_FR to fr to match transifex
events: fix error when storing events with date/time/datetime/etc (#7028)
stages/invitation: fix mis-matched serializer class for invitation (#7018)
web: bump mermaid from 10.4.0 to 10.5.0 in /web (#7026)
web: bump core-js from 3.32.2 to 3.33.0 in /web (#7020)
core: bump webauthn from 1.10.1 to 1.11.0 (#7021)
core: bump pylint from 2.17.6 to 2.17.7 (#7022)
core: bump django-redis from 5.3.0 to 5.4.0 (#7023)
core: bump packaging from 23.1 to 23.2 (#7024)
web/admin: invitation stage: default "continue without invitation" to false
core: bump pydantic from 2.4.1 to 2.4.2 (#7014)
website: bump postcss from 8.4.30 to 8.4.31 in /website (#7015)
internal: fix redis session store (#7011)
web: bump rollup from 3.29.3 to 3.29.4 in /web (#7009)
core: bump github.com/prometheus/client_golang from 1.16.0 to 1.17.0 (#7007)
...
* web/add webdriverIO testing layer
This commit adds WebdriverIO as an end-to-end solution to unit testing. WebdriverIO can be run both
locally and remotely, supports strong integration with web components, and is generally robust for
use in pipelines. I'll confess to working through a tutorial on how to do this for web components,
and this is just chapter 2 (I think there are 5 or so chapters...).
There's a makefile, with help! If you just run `make` it tells you:
```
Specify a command. The choices are:
help Show this help
node_modules Runs `npm install` to prepare this feature
precommit Run the precommit: spell check all comments, eslint with sonarJS, prettier-write
test-good-login Test that we can log into the server. Requires a running instance of the server.
test-bad-login Test that bad usernames and passwords create appropriate error messages
```
... because Makefiles are documentation, and documentation belongs in Makefiles.
I've chosen to go with a PageObject-oriented low-level DSL; what that means is that for each major
components (a page, a form, a wizard), there's a class that provides human-readable names for
human-interactable and human-viewable objects on the page. The LoginPage object, for example, has
selectors for the username, password, submit button, and the failure alert; accessing those allows
us to test for items as expected., and to write a DSL for "a good login" that's as straightforward
as:
```
await LoginPage.open();
await LoginPage.login("ken@goauthentik.io", "eat10bugs");
await expect(UserLibraryPage.pageHeader).toHaveText("My applications");
```
There was a *lot* of messing around with the LoginPage to get the username and password into the
system. For example, I had to do this with all the `waitForClickable` and `waitForEnable` because
we both keep the buttons inaccessible until the form has something and we "black out" the page (put
a darkening filter over it) while accessing the flow, meaning there was a race condition such that
the test would attempt to interact with the username or password field before it was accessible.
But this works now, which is very nice.
``` JavaScript
get inputUsername() {
return $('>>>input[name="uidField"]');
}
get btnSubmit() {
return $('>>>button[type="submit"]');
}
async username(username: string) {
await this.inputUsername.waitForClickable();
await this.inputUsername.setValue(username);
await this.btnSubmit.waitForEnabled();
await this.btnSubmit.click();
}
```
The bells & whistles of *Prettier*, *Eslint*, and *Codespell* have also been enabled. I do like my
guardrails.
* web/adding tests: added comments and cleaned up some administrative features.
* web/test: changed the name of one test to reflect it's 'good' status
* web: improve testing by adding test admin user via blueprint
* fix blueprints
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* update package name
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add dependabot
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* prettier run
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add basic CI
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* remove hooks
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
* main:
web/admin: use <pre> for order field on bound elements (#7031)
blueprints: fix mismatched user-login stage order (#7030)
stages/email: rework email templates (#7029)
website/docs: add notice for nginx ingress configuration requirement (#7027)
translate: Updates for web/xliff/en.xlf in fr
web: locales: rename fr_FR to fr to match transifex
events: fix error when storing events with date/time/datetime/etc (#7028)
stages/invitation: fix mis-matched serializer class for invitation (#7018)
web: bump mermaid from 10.4.0 to 10.5.0 in /web (#7026)
web: bump core-js from 3.32.2 to 3.33.0 in /web (#7020)
core: bump webauthn from 1.10.1 to 1.11.0 (#7021)
core: bump pylint from 2.17.6 to 2.17.7 (#7022)
core: bump django-redis from 5.3.0 to 5.4.0 (#7023)
core: bump packaging from 23.1 to 23.2 (#7024)
* main: (50 commits)
web/admin: invitation stage: default "continue without invitation" to false
core: bump pydantic from 2.4.1 to 2.4.2 (#7014)
website: bump postcss from 8.4.30 to 8.4.31 in /website (#7015)
internal: fix redis session store (#7011)
web: bump rollup from 3.29.3 to 3.29.4 in /web (#7009)
core: bump github.com/prometheus/client_golang from 1.16.0 to 1.17.0 (#7007)
web: bump the esbuild group in /web with 2 updates (#7005)
website: bump react-tooltip from 5.21.4 to 5.21.5 in /website (#7006)
core: bump github.com/redis/go-redis/v9 from 9.2.0 to 9.2.1 (#7008)
root: fix missing /lifecycle in path
website/blog: add info-block to blog about m2m (#7002)
root: handle SIGHUP and SIGUSR2, healthcheck gunicorn (#6630)
flows: stage_invalid() makes flow restart depending on invalid_response_action setting (#6780)
core: bump psycopg from 3.1.11 to 3.1.12 (#6997)
core: bump pydantic from 2.4.0 to 2.4.1 (#6998)
web: bump the sentry group in /web with 2 updates (#6999)
web: bump pyright from 1.1.328 to 1.1.329 in /web (#7000)
website/blog: improved sentence (#6995)
website/blog: fix missing link in m2m post (#6994)
web/user: fix incorrect link to admin interface (#6993)
...
This commit refactors the various components of the Wizard and ApplicationWizard, creating a much
more maintainable and satisfying Wizard experience for both developers (i.e, *me* and *Jens* so
far), and for the customer.
The Wizard base has been refactored into three components:
**AkWizardController**
The `AkWizardController` provides the event listenters for the wizard; it hooks them up, recevies the
events, and forwards them to the wizard. It unwraps the event objects and forwards the relevant
messages contained in the events. It knows of three event categories:
- Navigation requests (move to a different step)
- Update requests (the current step has updated the business content)
- Close requests (close or cancel the wizard).
**ak-wizard-frame**
The `ak-wizard-frame` is the ModalButton interface. It provides the Header, Breadcrumbs (nee`
"navigation block"), Buttons, and a DIV into which the main content is rendered.
**AkWizard**
`AkWizard` is an *incomplete* implementation of the wizard. It's meant to be inherited by a child
class, which will implement the rest. It extends `AKElement`. It provides the basic content needed,
such as steps, currentStep (as an index), an accessor for the step itself, an accessor for the
frame, and the interface to the `AkWizardController`.
**ApplicationWizard**
The `ApplicationWizard` itself has been refactored to accommodate these changes. It inherits from
`AkWizard` and provides the business logic for what to do when a form updates, some custom logic for
preventing moving through the wizard when the forms are incomplete, and a persistence layer for
filling out different providers in the same session. It's simplified a *lot*.
The types specified for `AkWizard` are pretty nifty, I think. I could wish the types being passed
via the custom events were more robust, but [strongly typed custom
events](https://github.com/lit/lit-element/issues/808) turn out to be quite the pain in the, er,
neck. As it is, the `precommit` pass did very good at preventing the worst disasters.
The steps themselves were re-written as objects so that they could take advantage of their `valid`
and `disabled` states and provide more meaningful buttons and labels. I think it's a solid
compromise, and it moved a lot of display logic out of the core `handleUpdate()` business method.
The tests, such as they are, are passing.
