reactivity broke focus by, basically, removing the reactivity and
managing the first-time-through lifecycle to prevent the update
from causing refocus. It works well! Now I just need to test it.
The idea is simple. Let's start with this picture:
```
<application-wizard .steps=${[... a collection of step objects ...]}>
<wizard-main .steps=${(steps from above)}>
<application-current-panel>
<current-form>
```
- ApplicationWizard has a Context for the ApplicationProviderPair (or whatever it's going to be).
This context does not know about the steps; it just knows about: the "application" object, the
"provider" object, and a discriminator to know *which* provider the user has selected.
- ApplicationWizard has Steps that, among other things, provides Panels for:
- Application
- Pick Provider
- Configure Provider
- Submit ApplicationProviderPair to the back-end
- The WizardFrame renders the CurrentPanel for the CurrentStep
The CurrentPanel gets its data from the ApplicationWizard in the form of a Context. It then sends
messages (events) to ApplicationWizard about the contents of each field as the user is filling out
the form, so that the ApplicationWizard can record those in the ApplicationProviderPair for later
submission.
When a CurrentForm is valid, the ApplicationWizard updates the Steps object to show that the "Next
button" on the Wizard is now available.
In this way, the user can progress through the system. When they get to the last page, we can
provide in the ApplicationWizard with the means to submit the form and/or send the user back to
the page with the validation failure.
Problem: The context is being updated in real-time, which is triggering re-renders of the form. This
leads to focus problems as the fields that are not yet valid are triggering "focus grab" behavior.
This is a classic problem with "controlled" inputs. What we really want is for the CurrentPanel to
not re-render at all, but to behave like a normal, uncontrolled form, and let the browser do most of
the work. We still want the [Next] button to enable when the form is valid enough to permit that.
---
Other details: I've ripped out a lot of Jen's work, which is probably a mistake. It's still
preserved elsewhere. I've also cleaned up the various wizardly things to try and look organized.
It *looks* like it should work, it just... doesn't. Not yet.
Found where the hook for form validity should go. Excellent! Now I just need to incorporate
that basic validation into the business logic and we're good to go.
This commit includes the first three pages of the wizard, the
completion of the wizard framework with evented handling, and control
over progression.
Some shortcomings of this design have become evident: it isn't
possible to communicate between the steps' wrappers, as they are
POJOs without access to the context. An imperative decision-making
process has to be inserted in the orchestration layer,
which is kinda annoying.
But it looks good and it behaves correctly, to the extent that I've
given it behavior. It's an excellent foundation.
Added a 'design document' that just kinda describes what I'm trying
to do, in case I don't get this done by Friday Aug 11, 2023.
I had two tables doing the same thing, so I merged them and then
wrote a few map/filters to specialize them for those two use cases.
Along the way I had to fiddle with the ESLint settings so that
underscore-prefixed unused variables would be ignored.
I cleaned up the visual appeal of the forms in the LDAP application.
I was copy/pasting the "handleProviderEvent" function, so I pulled
it out into ApplicationWizardProviderPageBase. Not so much a matter
of abstraction as just disliking that kind of duplication; it served
no purpose.
* ak-toggle-group:
Bugs found by CI/CD.
web: adding a storybook for the ak-toggle-group component
web: minor code formatting issue.
web: Replace ad-hoc toggle control with ak-toggle-group
preventing the radio from reflecting the default correctly.
The observed behavior was that the radio wouldn't "activate"
until the item selected during the render pass was clicked on
first.
* main:
web/flows: fix identification stage band color (#6489)
providers/proxy: only intercept auth header when a value is set (#6488)
web: bump @goauthentik/api from 2023.6.1-1691242648 to 2023.6.1-1691266058 in /web (#6486)
providers/proxy: set outpost session cookie to httponly and secure wh… (#6482)
web: bump @esbuild/linux-arm64 from 0.18.17 to 0.18.18 in /web (#6483)
web/admin: fix user sorting by active field (#6485)
web: bump @esbuild/darwin-arm64 from 0.18.17 to 0.18.18 in /web (#6484)
web: bump storybook (#6481)
web: bump the sentry group in /web with 2 updates (#6480)
web: bump API Client version (#6479)
api: optimise pagination in API schema (#6478)
website/dev-docs: tweaks to template (#6474)
website: bump react-tooltip from 5.19.0 to 5.20.0 in /website (#6471)
website: bump prettier from 3.0.0 to 3.0.1 in /website (#6472)
* providers/proxy: set outpost session cookie to httponly and secure when possible
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* set samesite too
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
This adds a Storybook for the CryptoCertificateKeypair search, including
a mock fetch of the data. In the course of running the tests, we discovered
that including the SearchSelect _class_ won't include the customElement declaration
unless you include the whole file! Other bugs found: including the CSS from
Storybook is different from that of LitElement native, so much so that the
adapter needed to be included. FlowSearch had a similar bug. The problem
only manifests when building via Webpack (which Storybook uses) and not
Rollup, but we should support both in distribution.
This commit replaces various ad-hoc implementations of `search-select` for CryptoCertificateKeyPairs
with a web component that encapsulates all of the needed behavior and exposes a single API.
The results are: Lots of visual clutter is eliminated. A single search of:
```HTML
<ak-search-select
.fetchObjects=${async (query?: string): Promise<CertificateKeyPair[]> => {
const args: CryptoCertificatekeypairsListRequest = {
ordering: "name",
hasKey: true,
includeDetails: false,
};
if (query !== undefined) {
args.search = query;
}
const certificates = await new CryptoApi(
DEFAULT_CONFIG,
).cryptoCertificatekeypairsList(args);
return certificates.results;
}}
.renderElement=${(item: CertificateKeyPair): string => {
return item.name;
}}
.value=${(item: CertificateKeyPair | undefined): string | undefined => {
return item?.pk;
}}
.selected=${(item: CertificateKeyPair): boolean => {
return this.instance?.tlsVerification === item.pk;
}}
?blankable=${true}
>
</ak-search-select>
```
Now looks like:
```HTML
<ak-crypto-certificate-search certificate=${this.instance?.tlsVerification}>
</ak-crypto-certificate-search>
```
There are three searches that do not require there to be a valid key with the certificate; these are
supported with the boolean property `nokey`; likewise, there is one search (in SAMLProviderForm)
that states that if there is no current certificate in the SAMLProvider and only one certificate can
be found in the Authentik database, use that one; this is supported with the boolean property
`singleton`.
These changes replace 382 lines of object-oriented invocations with 36 lines of declarative
configuration, and 98 lines for the class. Overall, the code for "find a crypto certificate" has
been reduced by 46%.
Suggestions for a better word than `singleton` are welcome!
This commit replaces various ad-hoc implementations of the Patternfly Toggle Group HTML with a web
component that encapsulates all of the needed behavior and exposes a single API with a single event
handler, return the value of the option clicked.
The results are: Lots of visual clutter is eliminated. A single link of:
```
<div class="pf-c-toggle-group__item">
<button
class="pf-c-toggle-group__button ${this.mode === ProxyMode.Proxy
? "pf-m-selected"
: ""}"
type="button"
@click=${() => {
this.mode = ProxyMode.Proxy;
}}>
<span class="pf-c-toggle-group__text">${msg("Proxy")}</span>
</button>
</div>
<div class="pf-c-divider pf-m-vertical" role="separator"></div>
```
Now looks like:
```
<option value=${ProxyMode.Proxy}>${msg("Proxy")}</option>
```
This also means that the three pages that used the Patternfly Toggle Group could eliminate all of
their Patternfly PFToggleGroup needs, as well as the `justify-content: center` extension, which also
eliminated the `css` import.
The savings aren't as spectacular as I'd hoped: removed 178 lines, but added 123; total savings 55
lines of code. I still count this a win: we need never write another toggle component again, and
any bugs, extensions or features we may want to add can be centralized or forked without risking the
whole edifice.
* main: (36 commits)
website/blog: add github user name links (#6468)
website/developer-docs: add new template for procedures (#6390)
website/blogs: blog to celebrate hackathon (#6457)
web/flows: add more stories (#6444)
web: bump prettier from 3.0.0 to 3.0.1 in /web (#6465)
core: bump debugpy from 1.6.7 to 1.6.8 (#6458)
ci: bump peter-evans/create-pull-request from 4 to 5 (#6459)
web: bump lit from 2.7.6 to 2.8.0 in /web (#6460)
web: bump @fortawesome/fontawesome-free from 6.4.0 to 6.4.2 in /web (#6461)
web: bump chart.js from 4.3.2 to 4.3.3 in /web (#6462)
web: bump @lit-labs/task from 2.1.2 to 3.0.0 in /web (#6463)
web, website: compress images (#6121)
core: bump cryptography from 41.0.2 to 41.0.3 (#6456)
root: replace builtin psycopg libpq binary implementation with distro… (#6448)
website: fix broken links in NewsBar
core: bump github.com/getsentry/sentry-go from 0.22.0 to 0.23.0 (#6449)
core: bump goauthentik.io/api/v3 from 3.2023061.6 to 3.2023061.7 (#6450)
web: bump pyright from 1.1.319 to 1.1.320 in /web (#6451)
core: bump ruff from 0.0.281 to 0.0.282 (#6453)
core: bump golang from 1.20.6-bullseye to 1.20.7-bullseye (#6454)
...
remove default example stories that were broken
currently only the dark theme works due to the way storybook includes CSS files in the iframe
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Ken Sternberg
Jens L
dependabot[bot]
authentik-automation[bot]
Tana M Berry