web: Clean up error handling. Prep for permission checks.
- Add clearer reporting for API and network errors.
- Tidy error checking.
- Partial type safety for events.
The application wizard modal previously required two clicks of the cancel
button to close when opened from the User Interface.
This was caused by improper event handling where events
would propagate up the DOM tree potentially triggering multiple handlers.
web: Fix issues surrounding markdown rendering.
- Fix issue where Mermaid diagrams do not render.
- Fix link colors in dark mode.
- Fix anchored links triggering router.
- Fix issue where links occasionally link to missing page.
* web: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* This (temporary) change is needed to prevent the unit tests from failing.
\# What
\# Why
\# How
\# Designs
\# Test Steps
\# Other Notes
* Revert "This (temporary) change is needed to prevent the unit tests from failing."
This reverts commit dddde09be5.
* ## What
Replaces `moment.js` with `date-fns` as a runtime dependency for Chart.js and other features
requiring date manipulation libraries. `date-fns` (and `chartjs-adapter-date-fns`) provides a 1:1
compatible API with Moment.js, is significantly faster and smaller. Moment.js adds
74KB to our bundle; in constrast, using DateFns adds only 18KB.
## Why
[Because ChartJS recommends it](https://github.com/chartjs/chartjs-adapter-moment#overview), and
because DateFns are easier to import and use.
It's worth noting that chartjs-adapter-date-fns was last updated three years ago, but
chartjs-adapter-moment was last updated *four* years ago. Both can be considered stable at this
point, so this cannot be considered an untested swap.
## Testing
1. In the *built* version of the product, assert that in the `./dist/admin/*` folder, no instance of
`node_modules/moment` is included. `grep "node_modules/moment" ./dist/admin/*` is sufficient for
this. On the other hand, searching for `date-fns` will get you entries in the maps:
```
// ... many lines of date-fns inclusion; this is near the end, to show the chartjs adapter is
// also included.
admin/chunk-TRZMFVHL.js:// node_modules/date-fns/startOfSecond.js
admin/chunk-TRZMFVHL.js:// node_modules/date-fns/parseISO.js
admin/chunk-TRZMFVHL.js:// node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js
admin/chunk-TRZMFVHL.js: _id: "date-fns",
admin/chunk-TRZMFVHL.js:chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.esm.js:
```
2. Visually inspect and assert that the graphs in Dashboard➜Overview, User➜Statistics, and
Directory➜Users➜A User are functioning unchanged.
## Documentation Changes Required
None. No developer or user documentation changes are required.
---------
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
Determining the state of the caps-lock key can be tricky as we're
dependant on a user-provided input to set a value. Thus, our initial
state defaults to not display any warning until the first keystroke.
- Revise to better use lit-html.
web: Refine accordion headers for pressability.
- Allows user to click or tap anywhere on a accordion header to expand
or collapse.
- Adds transition to collapse.
* web: Fix issue where code mirror partially applies OneDark theme.
- Reported in #4622
- Partially fixed via fd9ce53
* update syntax highlight color when theme is changed
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* we dont really need to initialise these in the constructor tbh
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: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* This (temporary) change is needed to prevent the unit tests from failing.
\# What
\# Why
\# How
\# Designs
\# Test Steps
\# Other Notes
* Revert "This (temporary) change is needed to prevent the unit tests from failing."
This reverts commit dddde09be5.
* web: Update to OpenAPI 7.11.
This commit updates our Makefile to generate the Typescript api using OpenAPI 7.11, and updates
names (mostly of enum targets) in our product to correspond to the changes in how OpenAPI generates
enum source names.
1. Replaced `ProviderModelEnum.` (note terminal period) with `ProviderModelEnum.AuthentikProvider`.
For example:
```
- ProviderModelEnum.SamlSamlprovider
+ ProviderModelEnum.AuthentikProvidersSamlSamlprovider
```
2. Replaced `RbacPermissionsAssignedByUsersListModelEnum.` (note terminal period) with
`RbacPermissionsAssignedByUsersListModelEnum.Authentik`. For example:
```
- RbacPermissionsAssignedByUsersListModelEnum.ProvidersLdapLdapprovider.toString(),
+ RbacPermissionsAssignedByUsersListModelEnum.AuthentikProvidersLdapLdapprovider.toString(),
```
3. Replaced `SyncObjectModelEnum.` (note terminal period) with
`SyncObjectModelEnum.AuthentikCoreModels`. For example:
```
- model=${SyncObjectModelEnum.Group}
+ model=${SyncObjectModelEnum.AuthentikCoreModelsGroup}
```
4. Replaced `SignatureAlgorithmEnum._` (note terminal symbols) with
`SignatureAlgorithmEnum.HttpWwwW3Org`. For example:
```
- ["ECDSA-SHA256", SignatureAlgorithmEnum._200104XmldsigMoreecdsaSha256],
+ ["ECDSA-SHA256", SignatureAlgorithmEnum.HttpWwwW3Org200104XmldsigMoreecdsaSha256],
```
5. Replaced `DigestAlgorithmEnum._` (note terminal symbols) with `DigestAlgorithmEnum.HttpWwwW3Org`.
For example:
```
- ["SHA256", DigestAlgorithmEnum._200104Xmlencsha256, true],
+ ["SHA256", DigestAlgorithmEnum.HttpWwwW3Org200104Xmlencsha256, true],
```
6. Replaced `NameIdPolicyEnum._` (note terminal symbols) with
`NameIdPolicyEnum.UrnOasisNamesTcSaml`. This one is trickier than the others: If you look
closely, you'll see that how OpenAPI generates the names has changed, with `nameid` now being
`Nameid`, and `FormatemailAddress` now being `FormatEmailAddress`.
```
- value=${NameIdPolicyEnum._11nameidFormatemailAddress}
+ value=${NameIdPolicyEnum.UrnOasisNamesTcSaml11NameidFormatEmailAddress}
```
# How
After determining how the enum prefixes had changed, I just ran six of these, testing after each
step to ensure that `npm run lint:types` had fewer errors than the previous run, until the product
built without type errors.
``` sh
$ perl -pi.bak -e 's/DigestAlgorithmEnum\._/DigestAlgorithmEnum.HttpWwwW3Org/' $(rg -l 'DigestAlgorithmEnum\.' src/)
```
# Testing
You can validate that these items have changed by finding the prefixes in the source code and
assuring yourself that every option, checkbox, or radio associated with them is populated correctly.
# User documentation changes required.
None.
# Developer documentation changes required.
None.
* web/admin: migrate user interface and stop impersonation to nav bar
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* move version diff to banner
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* make click on backdrop close about modal
just for you @rissson
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: fix Flash of Unstructured Content while SearchSelect is loading from the backend
Provide an alternative, readonly, disabled, unindexed input object with the text "Loading...", to be
replaced with the _real_ input element after the content is loaded.
This provides the correct appearance and spacing so the content doesn't jiggle about between the
start of loading and the SearchSelect element being finalized. It was visually distracting and
unappealing.
* web: comment on state management in API layer, move file to point to correct component under test.
* web: test for flash of unstructured content
- Add a unit test to ensure the "Loading..." element is displayed correctly before data arrives
- Demo how to mock a `fetchObjects()` call in testing. Very cool.
- Make distinguishing rule sets for code, tests, and scripts in nightmare mode
- In SearchSelect, Move the `styles()` declaration to the top of the class for consistency.
- To test for the FLOUC issue in SearchSelect.
This is both an exercise in mocking @beryju's `fetchObjects()` protocol, and shows how we can unit
test generic components that render API objects.
* web: interim commit of the basic sortable & selectable table.
* web: added basic unit testing to API-free tables
Mostly these tests assert that the table renders and that the content we give it
is where we expect it to be after sorting. For select tables, it also asserts that
the overall value of the table is what we expect it to be when we click on a
single row, or on the "select all" button.
* web: finalize testing for tables
Includes documentation updates and better tests for select-table.
* Provide unit test accessibility to Firefox and Safari; wrap calls to manipulate test DOMs directly in a browser.exec call so they run in the proper context and be await()ed properly
* web: repeat is needed to make sure sub-elements move around correctly. Map does not do full tracking.
* web: Update HorizontalLightComponent to accurately convey its value "upwards."
* interim commit, gods, the CSS is finally working.
* web: update
Got the binding editor in. The tests complete. Removed sonarjs.
* web: fixed tests to complete.
* web: fixed round-trip between binding list and binding editor. Fixed 'delete'. TODO: Fix error reporting on home page, the edit button is ugly, and the height is off somehow, but I'm not yet sure how. I just know it bugs my eyes.
* core: add support to set policy bindings in transactional endpoint
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* improve permission checks
especially since we'll be using the wizard as default in the future, it shouldn't be superuser only
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web: update api-less tables
- Replace `th` with `td` in `thead` components. Because Patternfly.
- Add @beryju's styling to the tables, which make it much better looking
* web: wizard for applications, now with bindings!
- Add policy bindings to the application wizard
- Restructures the Wizard base code.
- ak-wizard-steps holds the steps and listens for NavigationRequest events to move
from one step to the next.
- WizardStep is a base class (no component registration provided) that provides the *whole frame*,
not just the form. It receives the navigation content for the sidebar from ak-wizard-steps,
and provides the styling for the header, footer, sidebar, and main form. It has abstractions
for `buttons`, `renderMain()`, `handleButton()`, `handleEnable()`, in a section well-marked as
"Public API". Steps inherit from this class.
Conceptually:
- A wizard is a series of pages ("steps") with a distinct beginning and end, linked in a series,
to complete a task.
- Later steps in the series are inaccessible until an earlier steps has granted access to it.
- Access is predicated on the earlier step being complete and valid. The developer is responsible
for determining what "complete and valid" means.
- The series is visible, giving the customer a sense of how much effort is needed to complete the
task.
- A parent object maintains (and can modify as needed) the list of steps. It *can* maintain the
information being collected from the user. Alternatively, that information can be kept in each
step.
Details:
- Keeping with the Lit paradigm, "requests to change the system flow up, information changed by
valid requests flows down."
- The information flows up using events: WizardNavigation, WizardUpdate, WizardClose.
- The information flows down using properties.
- ak-application-wizard-main holds the list of steps, providing a unique slot name for each.
- It maintains the ApplicationWizardState object.
- ApplicationWizardStep inherits from WizardStep and provides:
- A means of extraction information from forms
- A convenience method for updating the ApplicationWizardState object, enabling future steps, and
navigating to a future step, in the correct order.
- A method for cleaning error from the error reporting mechanism as the user navigates from an
error-handling state.
- The title, description, and cancelability of the wizard.
- Steps:
- step: Handles the application. A good starting point for understanding the point of
the Wizard. Check the `handleButton()` method to understand how we enable or disable access to
future steps.
- provider-choice: Just a list. Shows validation without the form.
- provider: Uses a *very* esoteric Lit feature, `unsafeStaticTag`, which enables
the display to show anything that conforms to the expectations of ApplicationWizardProviderForm.
- ApplicationWizardProviderForm repeats some of the base of ApplicationWizardStep, but allows us
to provide multiple variants on a single form without having to create separate steps for each
form.
- The forms (`provider-for-ldap`, `provider-for-radius`) are therefore *just* the form and any
fetchers needed to populate it.
- bindings: Shows the table of bindings. Has a custom display for "This table is empty."
- edit-binding: Showcase for the `SearchSelectEZ` configuration format. Has an override on the
`handleButton` feature to figure out which binding is about to be overridden. Is also a
`.hidden` page; it doesn't show up on the navigation sidebar, as is only navigable-to by buttons
not associated with the button bar at the bottom.
- submit: Has a lot of machinery of state: Reviewing with errors, reviewing without errors,
running submission, and success. Uses `ts-pattern` a lot to make sure the state/request pairs
make sense.
The key insight is that, even though a wizard is a series in order, that order can't be simply
maintained in a list. The parent needs various strategies for swapping pages in and out of the
sequence, while still maintaining a coherent idea of "flow" and providing the visual cues the user
needs to feel confident that the work can be completed and completed quickly. The entire mechanism
for using an array and index to navigate, with index numbering, blocked the implementation of the
bindings pages.
One thing led to another. *Sigh* Really wish this hadn't been as much of a mess as it turned out.
The end result is pretty good, though. Definitely re-usable.
One important feature to note is that the wizard is *not* tied to the ModalButton object; it's
simply embedded in a modal as-needed. This allows us to use wizards in other places, such as just
being in a DIV, or just a page on its own.
* web: rollback dependabot "upgrade" that broke testing
Dependabot rolled us into WebdriverIO 9. While that's probably the
right thing to do, right now it breaks out end-to-end tests badly.
Dependabot's mucking with infrastructure should not be taken lightly,
especially in cases when the infrastructure is for DX, not UX, and
doesn't create a bigger attack surface on the running product.
* web: small fixes for wdio and lint
- Roll back another dependabot breaking change, this time to WebdriverIO
- Remove the redundant scripts wrapping ESLint for Precommit mode. Access to those modes is
available through the flags to the `./web/scripts/eslint.mjs` script.
- Remove SonarJS checks until SonarJS is ESLint 9 compatible.
- Minor nitpicking.
* web: not sure where all these getElement() additions come from; did I add them? Anyway, they were breaking the tests, they're a Wdio9-ism.
* package-lock.json update
* web: small fixes for wdio and lint
**PLEASE** Stop trying to upgrade WebdriverIO following Dependabot's instructions. The changes
between wdio8 and wdio9 are extensive enough to require a lot more manual intervention. The unit
tests fail in wdio 9, with the testbed driver Wdio uses to compile content to push to the browser
([vite](https://vitejs.dev) complaining:
```
2024-09-27T15:30:03.672Z WARN @wdio/browser-runner:vite: warning: Unrecognized default export in file /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
Plugin: postcss-lit
File: /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
[0-6] 2024-09-27T15:30:04.083Z INFO webdriver: BIDI COMMAND script.callFunction {"functionDeclaration":"<Function[976 bytes]>","awaitPromise":true,"arguments":[],"target":{"context":"8E608E6D13E355DFFC28112C236B73AF"}}
[0-6] Error: Test failed due to following error(s):
- ak-search-select.test.ts: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default': SyntaxError: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default'
```
So until we can figure out why the Vite installation isn't liking our CSS import scheme, we'll
have to soldier on with what we have. At least with Wdio 8, we get:
```
Spec Files: 7 passed, 7 total (100% completed) in 00:00:19
```
* Forgot to run prettier.
* web: small fixes for elements and forms
- provides a new utility, `_isSlug_`, used to verify a user input
- extends the ak-horizontal-component wrapper to have a stronger identity and available value
- updates the types that use the wrapper to be typed more strongly
- (Why) The above are used in the wizard to get and store values
- fixes a bug in SearchSelectEZ that broke the display if the user didn't supply a `groupBy` field.
- Adds `@wdio/types` to the package file so eslint is satisfied wdio builds correctly
- updates the end-to-end test to understand the revised button identities on the login page
- Running the end-to-end tests verifies that changes to the components listed above did not break
the semantics of those components.
* Prettier had opinions
* Fix the oauth2 provider test.
* web: fix oauth2 provider. Fix resolutions in package-lock.json
* Provide an error field for the form errors on the OAuth2 form. Unfortunately, this does not solve the general problem that we have a UX issue with which stage bindings to show where now that we've introduced the Invalidation Stage.
* web: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* web/admin: provide default invalidation flows for LDAP provider.
* admin/web: the default invalidation flows for LDAP and Radius are different from the others.
* Updating the SAML Wizard page to correspond to the provider page. *This is an intermediate fix to get the tests passing. It will probably be mooted with the next revision.*
* Making progress...
* web/admin: provider formectomy complete
* fix minor issues
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* custom ordering for provider types
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix css
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix missing PFBase causing wrong font
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix missing card for type select
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix padding on last page
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* add card to bindings
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* web/element/wizard: fix the CSS cascade so the modifications to the title display don't affect the wiard header.
* web/elements/wizard: fix logic on unavailable / available / current indicators in nav bar.
* Debugging code is not needed.
* web: small visual fixes
As requested by reviewers:
- Fixed the height to 75% of the viewport
- Put 1rem of whitespace between the hint label and the Wizard startup button.
* web: disable lint check for cAsEfUnNy AtTrIbUtE nAmEs.
* Apply suggestions from code review
Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
Signed-off-by: Jens L. <jens@beryju.org>
* rework title
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* format
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Signed-off-by: Jens L. <jens@beryju.org>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Marc 'risson' Schmitt <marc.schmitt@risson.space>
* web: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* web: streamline CaptchaStage
# What
This commit:
1. Replaces the mass of `if () { if() { if() } }` with two state tables:
- One for `render()`
- One for `renderBody()`
2. Breaks each Captcha out into "interactive" and "executive" versions
3. Creates a handler table for each Captcha type
4. Replaces the `.forEach` expression with a `for` loop.
5. Move `updated` to the end of the class.
6. Make captchDocument and captchaFrame constructed-on-demand with a cache.
7. Remove a lot of `@state` handlers
8. Give IframeMessageEvent its own type.
9. Removed `this.scriptElement`
10. Replaced `window.removeEventListener` with an `AbortController()`
# Why
1. **Replacing `if` trees with a state table.** The logic of the original was really hard to follow.
With the state table, we can clearly see now that for the `render()` function, we care about the
Boolean flags `[embedded, challenged, interactive]` and have appropriate effects for each. With
`renderBody()`, we can see that we care about the Boolean flags `[hasError, challenged]`, and can
see the appropriate effects for each one.
2. (and 3.) **Breaking each Captcha clause into separate handlers.** Again, the logic was convoluted,
when what we really care about is "Does this captcha have a corresponding handler attached to
`window`, and, if so, should we run the interactive or executive version of it?" By putting all
of that into a table of `[name, challenge, execute]`, we can clearly see what's being handled
when.
4. **Replacing `foreach()` with `for()`**: [You cannot use a `forEach()` with async
expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#:~:text=does%20not%20wait%20for%20promises).
If you need asynchronous behavior in an ordered loop, `for()` is the safest way to handle it; if
you need asynchronous behavior from multiple promises, `Promise.allSettled(handlers.map())` is
the way to go.
I tried to tell if this function *meant* to run every handler it found simultaneously, or if it
meant to test them in order; I went with the second option, breaking and exiting the loop once a
handler had run successfully.
5. **Reordered the code a bit**. We're trying to evolve a pattern in our source code: styles,
properties, states, internal variables, constructor, getters & setters that are not `@property()`
or `@state()`, DOM-related lifecycle handlers, event handlers, pre-render lifecycle handlers,
renderers, and post-render lifecycle handlers. Helper methods (including subrenderers) go above
the method(s) they help.
6. **Constructing Elements on demand with a cache**. It is not guaranteed that we will actually need
either of those. Constructing them on demand with a cache is both performant and cleaner.
Likewise, I removed these from the Lit object's `state()` table, since they're constructed once
and never change over the lifetime of an instance of `ak-stage-captcha`.
9. **Remove `this.scriptElement`**: It was never referenced outside the one function where it was used.
10. **Remove `removeEventListener()`**: `AbortController()` is a bit more verbose for small event
handler collections, but it's considered much more reliable and much cleaner.
* Didn't save the extracted ListenerController.
* web: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* Start of dual select revision process.
* Progress.
* Made the RuleFormHelper's dualselect conform.
* Providers and Selectors harmonized for sources.
* web/bugfix/dual-select-full-options
# What
- Replaces the dual-select "selected" list mechanism with a more comprehensive (if computationally
expensive) version that is correct.
# How
In the previous iteration, each dual select controller gets a *provider* and a *selector*; the
latter keeps the keys of all the objects a specific instance may have, and marks those objects as
"selected" when they appear in the dual-selects "selected" panel.
In order to distinguish between "selected on the existing instance" and "selected by the user," the
*selector* only runs at construction time, creating a unified "selected" list; this is standard and
allows for a uniform experience of adding and deleting items. Unfortunately, this means that the
"selected" items, because their displays are crafted bespoke, are only chosen from those available
at construction. If there are selected items later in the paginated collection, they will not be
marked as selected.
This defeats the purpose of having a paginated multi-select!
The correct way to do this is to retrieve every item pased to the *selector* and use the same
algorithm to craft the views in both windows.
For every instance of Dual Select with dynamic selection, the *provider* and *selector* have been
put in a separate file (usually suffixed as a `*FormHelper.ts` file); the algorithm by which an item is
crafted for use by DualSelect has been broken out into a small function (usually named
`*toSelect()`). The *provider* works as before. The *selector* takes every instance key passed to it
and runs a `Promise.allSettled(...*Retrieve({ uuid: instanceId }))` on them, mapping them onto the
`selected` collection using the same `*toSelect()`, so they resemble the possibilities in every way.
# Lessons
This exercise emphasizes just how much sheer *repetition* the Django REST API creates on the client
side. Every Helper file is a copy-pasta of a sibling, with only a few minor changes:
- How the objects are turned into displays for DualSelect
- The type and calls being used;
- The field on which retrival is defined
- The defaulting rule.
There are 19 `*FormHelper` files, and each one is 50 lines long. That's 950 lines of code.
Of those 950 lines of code, 874 of those lines are *complete duplicates* of those in the other
FormHelper files. Only 76 lines are unique.
This language really needs macros. That, or I need to seriously level up my Typescript and figure
out how to make this whole thing a lot smarter.
* order fields by field_key and order
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: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* web: fix selector warnings in WebdriverIO
Despite the [promises made](https://webdriver.io/docs/selectors#deep-selectors) by the WebdriverIO
team, we are still getting a lot of warnings and "falling back to pre-BIDI behavior" messages
when we attempt to access ShadowDOM contexts without the "pierce" (`>>>`) syntax. So I've put
it back wherever it occurred and the system now uses the BIDI controllers correctly.
* web: update to Chromedriver 131 breaks a lot of stuff
This annoying bit of janitorial work cleans up the failure messages and resolution bugs
that arose when updating to the latest version of Chrome. Keeping track of all the
weakness and breakage while the in-browser testing teams figure out how to live with
the ShadowDOM is just really time-consuming.
* web: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* First things first: save the blueprint that initializes the test runner.
* Committing to having the PKs be a string, and streamlining an event handler. Type solidity needed for the footer control.
* web/admin/better-footer-links
# What
- A data control that takes two string fields and returns the JSON object for a FooterLink
- A data control that takes a control like the one above and assists the user in entering a
collection of such objects.
# Why
We're trying to move away from CodeMirror for the simple things, like tables of what is essentially
data entry. Jens proposed this ArrayInput thing, and I've simplified it so you define what "a row"
is as a small, lightweight custom Component that returns and validates the datatype for that row,
and ArrayInput creates a table of rows, and that's that.
We're still working out the details, but the demo is to replace the "Name & URL" table in
AdminSettingsForm with this, since it was silly to ask the customer to hand-write JSON or YAML,
getting the keys right every time, for an `Array<Record<{ name: string, href: string }>>`. And some
client-side validation can't hurt.
Storybook included. Tests to come.
* Not ready for prime time.
* One lint. Other lints are still in progress.
* web: lots of 'as unknown as Foo'
I know this is considered bad practice, but we use Lit and Lit.spread
to send initialization arguments to functions that create DOM
objects, and Lit's prefix convention of '.' for object, '?' for
boolean, and '@' for event handler doesn't map at all to the Interface
declarations of Typescript. So we have to cast these types when
sending them via functions to constructors.
* web/admin/better-footer-links
# What
- Remove the "JSON or YAML" language from the AdminSettings page for describing FooterLinks inputs.
- Add unit tests for ArrayInput and AdminSettingsFooterLinks.
- Provide a property for accessing a component's value
# Why
Providing a property by which the JSONified version of the value can be accessed enhances the
ability of tests to independently check that the value is in a state we desire, since properties can
easily be accessed across the wire protocol used by browser-based testing environments.
* Ensure the UI is built from _current_ before running tests.
* Added tests and refinements as tests indicate.
* Building out the test suite.
* web: test the simple things. Fix what the tests revealed.
- Move `EmptyState.test.ts` into the `./tests` folder.
- Provide unit tests for:
- Alert
- Divider
- Expand
- Label
- LoadingOverlay
- Give all tested items an Interface and a functional variant for rendering
- Give Label an alternative syntax for declaring alert levels
- Remove the slot name in LoadingOverlay
- Change the slot call in `./enterprise/rac/index.ts` to not need the slot name as well
- Change the attribute names `topMost`, `textOpen`, and `textClosed` to `topmost`, `text-open`, and
`text-closed`, respectively.
- Change locations in the code where those are used to correspond
** Why interfaces: **
Provides another check on the input/output boundaries of our elements, gives Storybook and
WebdriverIO another validation to check, and guarantees any rendering functions cannot be passed
invalid property names.
** Why functions for rendering: **
Providing functions for rendering gets us one step closer to dynamically defining our forms-in-code
at runtime without losing any type safety.
** Why rename the attributes: **
A *very* subtle bug:
[Element:setAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
automatically "converts an attribute name to all lower-case when called on an HTML element in an
HTML document." The three attributes renamed are all treated *as* attributes, either classic boolean
or stringly-typed attributes, and attempting to manipulate them with `setAttribute()` will fail.
All of these attributes are presentational; none of them end up in a transaction with the back-end,
so kebab-to-camel conversions are not a concern.
Also, ["topmost" is one word](https://www.merriam-webster.com/dictionary/topmost).
** Why remove the slot name: **
Because there was only one slot. A name is not needed.
* Fix minor spelling error.
* First pass at a custom, styled input object.
* .
* web: Demo the simple things. Fix things the Demo says need fixing.
- Move the Element's stories into a `./stories` folder
- Provide stories for (these are the same ones "provided tests for" in the [previous
PR](https://github.com/goauthentik/authentik/pull/11633))
- Alert
- Divider
- Expand
- Label
- LoadingOverlay
- Provide Storybook documentation for:
- AppIcon
- ActionButton
- AggregateCard
- AggregatePromiseCard
- QuickActionsCard
- Alert
- Divider
- EmptyState
- Expand
- Label
- LoadingOverlay
- ApplicationEmptyState
- Fix a bug in LoadingOverlay; naming error in nested slots caused any message attached to the
overlay to not sow up correctly.
- Revise AppIcon to be independent of authentik; it just cares if the data has a name or an icon
reference, it does not need to know about `Application` objects. As such, it's an *element*, not a
*component*, and I've moved it into the right location, and updated the few places it is used to
match.
* Prettier has opinions with which I sometimes diverge.
* Found a bug! Although pf-m-xl was defined as a legal size, there was no code to handle drawing something XL!
* Found a few typos and incorrect API descriptions.
* Added tests and refinements as tests indicate.
* Building out the test suite.
* web: test the simple things. Fix what the tests revealed.
- Move `EmptyState.test.ts` into the `./tests` folder.
- Provide unit tests for:
- Alert
- Divider
- Expand
- Label
- LoadingOverlay
- Give all tested items an Interface and a functional variant for rendering
- Give Label an alternative syntax for declaring alert levels
- Remove the slot name in LoadingOverlay
- Change the slot call in `./enterprise/rac/index.ts` to not need the slot name as well
- Change the attribute names `topMost`, `textOpen`, and `textClosed` to `topmost`, `text-open`, and
`text-closed`, respectively.
- Change locations in the code where those are used to correspond
** Why interfaces: **
Provides another check on the input/output boundaries of our elements, gives Storybook and
WebdriverIO another validation to check, and guarantees any rendering functions cannot be passed
invalid property names.
** Why functions for rendering: **
Providing functions for rendering gets us one step closer to dynamically defining our forms-in-code
at runtime without losing any type safety.
** Why rename the attributes: **
A *very* subtle bug:
[Element:setAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)
automatically "converts an attribute name to all lower-case when called on an HTML element in an
HTML document." The three attributes renamed are all treated *as* attributes, either classic boolean
or stringly-typed attributes, and attempting to manipulate them with `setAttribute()` will fail.
All of these attributes are presentational; none of them end up in a transaction with the back-end,
so kebab-to-camel conversions are not a concern.
Also, ["topmost" is one word](https://www.merriam-webster.com/dictionary/topmost).
** Why remove the slot name: **
Because there was only one slot. A name is not needed.
* Fix minor spelling error.
* Adding the aliases to Vite helped, but now why are the E2E tests failing?
* web: fix CSS loading with unit tests
- Fix the CSS loader and replace the cut-and-paste loader with a standardized one.
- Fix the aliasing for Wdio's "browser"-based unit testing (Vite)
- With the aliasing fixed, remove all of the dotted paths in tests.
- Update the End-to-End tests to run in Firefox and Safari.
- Put an (optional) pause at the end of each unit test so we can visually confirm the CSS works.
- Environment flag is `WDIO_LEMME_SEE=true`
- Reduce the verbosity of the tests to level `warn` or higher
* This change was due to a misunderstanding. It is not needed in 9.
* Fix the Oauth2 Provider test.
* web: fix Flash of Unstructured Content while SearchSelect is loading from the backend
Provide an alternative, readonly, disabled, unindexed input object with the text "Loading...", to be
replaced with the _real_ input element after the content is loaded.
This provides the correct appearance and spacing so the content doesn't jiggle about between the
start of loading and the SearchSelect element being finalized. It was visually distracting and
unappealing.
* web: comment on state management in API layer, move file to point to correct component under test.
* web: test for flash of unstructured content
- Add a unit test to ensure the "Loading..." element is displayed correctly before data arrives
- Demo how to mock a `fetchObjects()` call in testing. Very cool.
- Make distinguishing rule sets for code, tests, and scripts in nightmare mode
- In SearchSelect, Move the `styles()` declaration to the top of the class for consistency.
- To test for the FLOUC issue in SearchSelect.
This is both an exercise in mocking @beryju's `fetchObjects()` protocol, and shows how we can unit
test generic components that render API objects.
* web: interim commit of the basic sortable & selectable table.
* web: added basic unit testing to API-free tables
Mostly these tests assert that the table renders and that the content we give it
is where we expect it to be after sorting. For select tables, it also asserts that
the overall value of the table is what we expect it to be when we click on a
single row, or on the "select all" button.
* web: finalize testing for tables
Includes documentation updates and better tests for select-table.
* Provide unit test accessibility to Firefox and Safari; wrap calls to manipulate test DOMs directly in a browser.exec call so they run in the proper context and be await()ed properly
* web: repeat is needed to make sure sub-elements move around correctly. Map does not do full tracking.
* web: update api-less tables
- Replace `th` with `td` in `thead` components. Because Patternfly.
- Add @beryju's styling to the tables, which make it much better looking
* web: rollback dependabot "upgrade" that broke testing
Dependabot rolled us into WebdriverIO 9. While that's probably the
right thing to do, right now it breaks out end-to-end tests badly.
Dependabot's mucking with infrastructure should not be taken lightly,
especially in cases when the infrastructure is for DX, not UX, and
doesn't create a bigger attack surface on the running product.
* web: small fixes for wdio and lint
- Roll back another dependabot breaking change, this time to WebdriverIO
- Remove the redundant scripts wrapping ESLint for Precommit mode. Access to those modes is
available through the flags to the `./web/scripts/eslint.mjs` script.
- Remove SonarJS checks until SonarJS is ESLint 9 compatible.
- Minor nitpicking.
* web: not sure where all these getElement() additions come from; did I add them? Anyway, they were breaking the tests, they're a Wdio9-ism.
* package-lock.json update
* web: small fixes for wdio and lint
**PLEASE** Stop trying to upgrade WebdriverIO following Dependabot's instructions. The changes
between wdio8 and wdio9 are extensive enough to require a lot more manual intervention. The unit
tests fail in wdio 9, with the testbed driver Wdio uses to compile content to push to the browser
([vite](https://vitejs.dev) complaining:
```
2024-09-27T15:30:03.672Z WARN @wdio/browser-runner:vite: warning: Unrecognized default export in file /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
Plugin: postcss-lit
File: /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
[0-6] 2024-09-27T15:30:04.083Z INFO webdriver: BIDI COMMAND script.callFunction {"functionDeclaration":"<Function[976 bytes]>","awaitPromise":true,"arguments":[],"target":{"context":"8E608E6D13E355DFFC28112C236B73AF"}}
[0-6] Error: Test failed due to following error(s):
- ak-search-select.test.ts: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default': SyntaxError: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default'
```
So until we can figure out why the Vite installation isn't liking our CSS import scheme, we'll
have to soldier on with what we have. At least with Wdio 8, we get:
```
Spec Files: 7 passed, 7 total (100% completed) in 00:00:19
```
* Forgot to run prettier.
* web: small fixes for elements and forms
- provides a new utility, `_isSlug_`, used to verify a user input
- extends the ak-horizontal-component wrapper to have a stronger identity and available value
- updates the types that use the wrapper to be typed more strongly
- (Why) The above are used in the wizard to get and store values
- fixes a bug in SearchSelectEZ that broke the display if the user didn't supply a `groupBy` field.
- Adds `@wdio/types` to the package file so eslint is satisfied wdio builds correctly
- updates the end-to-end test to understand the revised button identities on the login page
- Running the end-to-end tests verifies that changes to the components listed above did not break
the semantics of those components.
* Prettier had opinions
* Some lint over-eagerness.
* Updated after build.
* web: small fixes for wdio and lint
- Roll back another dependabot breaking change, this time to WebdriverIO
- Remove the redundant scripts wrapping ESLint for Precommit mode. Access to those modes is
available through the flags to the `./web/scripts/eslint.mjs` script.
- Remove SonarJS checks until SonarJS is ESLint 9 compatible.
- Minor nitpicking.
* package-lock.json update
* web: small fixes for wdio and lint
**PLEASE** Stop trying to upgrade WebdriverIO following Dependabot's instructions. The changes
between wdio8 and wdio9 are extensive enough to require a lot more manual intervention. The unit
tests fail in wdio 9, with the testbed driver Wdio uses to compile content to push to the browser
([vite](https://vitejs.dev) complaining:
```
2024-09-27T15:30:03.672Z WARN @wdio/browser-runner:vite: warning: Unrecognized default export in file /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
Plugin: postcss-lit
File: /Users/ken/projects/dev/web/node_modules/@patternfly/patternfly/components/Dropdown/dropdown.css
[0-6] 2024-09-27T15:30:04.083Z INFO webdriver: BIDI COMMAND script.callFunction {"functionDeclaration":"<Function[976 bytes]>","awaitPromise":true,"arguments":[],"target":{"context":"8E608E6D13E355DFFC28112C236B73AF"}}
[0-6] Error: Test failed due to following error(s):
- ak-search-select.test.ts: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default': SyntaxError: The requested module '/src/common/styles/authentik.css' does not provide an export named 'default'
```
So until we can figure out why the Vite installation isn't liking our CSS import scheme, we'll
have to soldier on with what we have. At least with Wdio 8, we get:
```
Spec Files: 7 passed, 7 total (100% completed) in 00:00:19
```
* Forgot to run prettier.
* web: small fixes for elements and forms
- provides a new utility, `_isSlug_`, used to verify a user input
- extends the ak-horizontal-component wrapper to have a stronger identity and available value
- updates the types that use the wrapper to be typed more strongly
- (Why) The above are used in the wizard to get and store values
- fixes a bug in SearchSelectEZ that broke the display if the user didn't supply a `groupBy` field.
- Adds `@wdio/types` to the package file so eslint is satisfied wdio builds correctly
- updates the end-to-end test to understand the revised button identities on the login page
- Running the end-to-end tests verifies that changes to the components listed above did not break
the semantics of those components.
* Removing SonarJS comments.
* Reverting to log level for tests.
* web: fix dual-select with dynamic selection
For dynamic selection, the property name is `.selector` to message that it's a function the
API layer uses to select the elements.
A few bits of lint picked.
* web: added comment to clarify what the fallback selector does
* web: fix e2e tests to work with latest WebdriverIO and authentik 2024.8
- Adjust the ApplicationWizard "select provider type" typeslist to have the right OUIA tags when
running
- Add OUIA tags to TypeCreateWizard
- Provide default values for `.jwksSources` when needed.
- Upgrade E2E WebUI tests to use WebdriverIO 9.
- Upgrade the linters to include `package.json` and `package-lock.json`.
- Adjust a *lot* of the WebdriverIO selectors!
- Provide a driver for the TypeCreate card-based radio interface.
- Split `Bad Logins` into two separate files.
Aside from the obvious, "because testing needs this" or "because there were warnings on the console
when this was running," the real issue is that WebdriverIO 9 has changed the syntax and semantics of
its ShadowDOM-piercing `$` mechanism.
For Oauth2 and Proxy, the field `.jwksSources` may be undefined, but `undefined` is not a legal
value for ak-dual-select's `selected` field. Provide a default or use `ifDefined()`. I chose to
provide a default of `[]`.
In the previous iteration, `$(">>>ak-search-select input")` would be sufficient for WebdriverIO to
find an input inside a component. Now, it needs to be written as: `$("ak-search-select").$("input")`.
And in rare cases, when you have a floating component that is separated from its invocation (such as
Notification or SearchSelect), even that doesn't work well and you have to fall back to some
old-school hacking (see `./tests/wdio/test/pageobjects/page.ts` for an example) to find some child
elements.
Also, the monadic nature of `$` seems to have faded a bit. `$` used to wrap all child invocations in
promises, making the entire expression a single valid promise; it seems that it is now necessary to
unwrap the promises yourself under some circumstances, resulting in a lot of `await (await (await
... )))` blocks in the tests.
We've slightly changed the semantics of our login mechanism, and now the default behavior is to not
reveal when a username is invalid, but to treat the entire login as a single failure mechanism, so
as not to expose any details about the username database.
The problem arises that now, we (or Chrome) cache the username between roundtrips, and WebdriverIO's
second pass was becoming confused by its presence. By putting the Bad Logins into two separate
files, I get two separate browser instances with cleared caches, so each test can be run in the
pristine environment it needs to validate the behavior I'm expecting.
* web: added comment to explain the hack
* Add comment to TypeCreateWizardPage to explain the component name hack.
* web: fix some lint found by CI/CD
