Commit Graph

17 Commits

Author SHA1 Message Date
b6442c233d web: Fix inline documentation rendering (#13379)
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.
2025-03-19 17:09:47 +01:00
242546e621 web: simplify ?inline handler for Storybook (#12246)
* 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: simplify `?inline` handler for Storybook

# What

- Revise the `?inline` handler for Storybook
- Enable headless test runs of E2E
- Reduce headless testing to single instances

# Why

## `?inline` handling

Vite-for-Storybook-for-Web-Components has a requirement that all component CSS imports be
suffixed with an `?inline` argument so Vite knows to put the CSS into the component and
not inject it into the document head.

This `?inline` argument is an implementation detail of Storybook. It would be irrelevant clutter
added to our codebase. We were using `rollup-plugin-modify` to find every instance of an
import-to-component, but the implementation was clunky and involved scanning the source code
manually.

`rollup-plugin-modify` version 3 has regular expressions and takes a function as an argument. This
allows us to generate the CSS import maps on-the-fly when Storybook is run, eliminating a fragile
build step.  We can also remove the source code scanner for those imports.

## Changes to testing

It's just nice to be able to run the E2E tests headlessly, without them eating up your screen real
estate, flashing, or grabbing your mouse.

WebdriverIO's testing of Web Components is new and, as we've seen, a bit cranky. The WebdriverIO
team currently recommends not running the tests in parallel. We only have about 70 tests so far, and
they're fairly speedy, especially when you don't have to invoke a browser session for every test.
2024-12-05 10:16:10 -08:00
9e2620a5b9 web: provide simple tables for API-less displays (#11028)
* 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.
2024-10-07 08:21:13 -07:00
dec8cfbb39 web: audit and update package.json and associated test harness, with upgrade to WebdriverIO 9 (#11596)
* Just cleaning up.

* web: removing sonarjs from yet another branch.

* web: everything except the tests are up-to-date.  There was a lot, it turns out, we simply weren't using.

* web: update package.json to support WebdriverIO 9

This commit:

- Upgrades to WebdriverIO 9.1.2
- Resets our `devDependencies` collection to remove all imports that we either were not using or
  were duplicates of existing dependencies:
  - *Babel*, of all things
  - Storybook addon css user preferences, now native to Storybook 8
  - SonarJS, *again*, sigh.
  - React

- Fixes a bug where ESLint would report missing features in our build scripts
- Fixes a bug where Wdio might not reach a headless browser before timeout
- Replaces Rollup's CSSLit with Vite's CSSLit, which actually works without hacks, for testing.
- Moves the package-lock scanner to its own script, with better reporting and tool verification,
  which also cleans up the package.lock file a little.

* Prettier just havin' all the opinions.
2024-10-03 08:11:05 -07:00
133181f7d6 web: Provide tests for the aggregate cards, fix a few minor things (#9744)
* 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.

* web: provide a test framework

As is typical of a system where a new build engine is involved, this thing is sadly fragile. Use the
wrong import style in wdio.conf.js and it breaks; there are several notes in tsconfig.test.conf and
wdio.conf.ts to tell eslint or tsc not to complain, it's just a different build with different
criteria, the native criteria don't apply.

On the other hand, writing tests is easy and predictable. We can test behaviors at the unit and
component scale in a straightforward manner, and validate our expectations that things work the way
we believe they should.

* Rolling back a reversion.

* web: update storybook, storybook a few things, fix a few things

After examining how people like Adobe and Salesforce do things, I have updated the storybook
configuration to provide run-time configuration of light/dark mode (although right now nothing
happens), inject the correct styling into the page, and update the preview handling so that we can
see the components better.  We'll see how this pans out.

I have provided stories for the AggregateCard, AggregatePromiseCard, and a new QuickActionsCard. I
also fixed a bug in AggregatePromiseCard where it would fail to report a fetch error. It will only
report that "the operation falied," but it will give the full error into the console.

**As an experiment**, I have changed the interpreter for `lint:precommit` and `build:watch` to use
[Bun](https://bun.sh/) instead of NodeJS. We have observed significant speed-ups and much better
memory management with Bun for these two operations. Those are both developer-facing operations, the
behavior of the system undur current CI/CD should not change.

And finally, I've switched the QuickActionsCard view in Admin-Overview to use the new component.
Looks the same.  Reads *way* easier.  :-)

* Slight revision in exception logic.

* Added a ton of documentation; made the failure message configurable.

* A few documentation changes.

* Adjusting paths to work with tests.

* web: Provide tests for the aggregate cards, fix a few minor things

This commit provides tests alongside the stories for the aggregate cards. The tests are fairly
basic, but they're good enough for starting *and* they provide a pretty good example of how to test
when a promise with a delay is involved.

Two minor fixes in this code:

- The subtext was given a small amount of whitespace above, to remove the crowding that happened.
  It looks much better with a half-rem of space.
- In the rare case that we have a card header with no icon, the '&nbsp;' symbol that separates the
  icon from the header is now not rendered. In the previous form, it would push the header to the
  left, making it "hang in space" one rem to the right of the visual line formed by the rightmost
  content border.  The padding between the header, body, and footer is odd; body is 1 rem, the
  header and footer 2rems. This looks good for the graphs, but for the text, not so much.

* Prettier had opinions.

* Merge and catching up with the evolution of our test framework.
2024-08-24 14:23:49 +02:00
261133aee3 web: move to wireit as the build runner language (#10440)
* 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>
2024-08-08 11:09:37 -07:00
1f2654f25f web: replace handmade list in Admin Overview with generator, storybook generator, fix storybook, fix bug in list's parent component (#9726)
* 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.

* web: provide a test framework

As is typical of a system where a new build engine is involved, this thing is sadly fragile. Use the
wrong import style in wdio.conf.js and it breaks; there are several notes in tsconfig.test.conf and
wdio.conf.ts to tell eslint or tsc not to complain, it's just a different build with different
criteria, the native criteria don't apply.

On the other hand, writing tests is easy and predictable. We can test behaviors at the unit and
component scale in a straightforward manner, and validate our expectations that things work the way
we believe they should.

* Rolling back a reversion.

* web: update storybook, storybook a few things, fix a few things

After examining how people like Adobe and Salesforce do things, I have updated the storybook
configuration to provide run-time configuration of light/dark mode (although right now nothing
happens), inject the correct styling into the page, and update the preview handling so that we can
see the components better.  We'll see how this pans out.

I have provided stories for the AggregateCard, AggregatePromiseCard, and a new QuickActionsCard. I
also fixed a bug in AggregatePromiseCard where it would fail to report a fetch error. It will only
report that "the operation falied," but it will give the full error into the console.

**As an experiment**, I have changed the interpreter for `lint:precommit` and `build:watch` to use
[Bun](https://bun.sh/) instead of NodeJS. We have observed significant speed-ups and much better
memory management with Bun for these two operations. Those are both developer-facing operations, the
behavior of the system undur current CI/CD should not change.

And finally, I've switched the QuickActionsCard view in Admin-Overview to use the new component.
Looks the same.  Reads *way* easier.  :-)

* Slight revision in exception logic.

* Added a ton of documentation; made the failure message configurable.

* A few documentation changes.

* Adjusting paths to work with tests.

* add ci to test

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* linting shenanigans

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: patch spotlight on the fly to fix syntax issue that blocked storybook build

This should be a temporary hack.  I have an [open
issue](https://github.com/getsentry/spotlight/issues/419) and [pull
request](https://github.com/getsentry/spotlight/pull/420) with the
Spotlight people already to fix the issue.

* Somehow missed these in the merge.

* Merge missed something.

* Fix for incorrect path to patch file; fix for running patch multiple times.

* Prettier is still havin' opinions.

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2024-07-15 10:54:09 -07:00
11ca358242 web/admin: revamped rbac and user settings tabs (#8299)
* web/admin: fix duplicate RBAC preview banner on permission modal

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* switch non-embedded permission page to use vertical tabs

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix some leftover html?

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* move stuff into vertical subtab

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* show all of users permission tabs on one main tab

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* rework role page to match user page

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* use separate tabs

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* rename role permission tables to match user tables

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* rename to credentials and tokens

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add country icon to session list

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add oauth access token list

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add helper to get relative time

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* use pfdivider

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* replace plain hr with pf-c-divider

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* use new logic for showing relative time in charts

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* use consistent relative time for event display

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* remove more leftovers

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix some alignment issues on the admin dashboard

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update storybook map

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add sanity check to event app lookup

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* make api drawer header fixed

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix table padding for toggle

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix notification drawer for user interface

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* enable system task search

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix formatting, exclude generated script from formatting

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: minor fixes

There's a renderer (it's not a component, not yet) for producing definition lists without
the risk of missing a class or tag.

Breaking conditionally rendered components out to make their use easier to identify.

* fix prettier

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix outpost form

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix more flaky tests

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* re-create locale

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add some description for different permission views

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix system task search

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update docs

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Ken Sternberg <ken@goauthentik.io>
2024-01-26 18:01:03 +01:00
5f1ba45966 web: provide dual-list multiselect with pagination (#8004)
* web: revise css-import-maps to need only a single entry, rather than dual-entry

Given that the difference Vite/Storybook cares about is whether or not there's a
sigil at the end of the CSS string, it seemed silly to require devs to enter
both the raw and sigiled string; just do an in-line text-and-replace.

* web: provide a "select / select all" tool for the dual list multiselect

**This commit**

Provides one of several of the sub-controls needed to make the multi-list multi-select thing work.
This is the simplest control, and I decided to go with it first because it's all presentation; all
it does is show the buttons and send events from those buttons.

A Storybook component is provided to show how well it works.

* web: provide a "select / select all" tool for the dual list multiselect

**This commit**

This commit provides the following new features for dual list multiselect:

- The "available" pane, which has all of the entries that are available to be selected.  Items that
  are already selected will remain, but they're marked with a checkmark and can neither be selected
  or moved.
- The "selected" pane, which has *all* of the entries that have been selected.
- The Pagination control, which in this case only sends an event upstream.

**Plan**:

The plan is to have a master control that marries the available-pane, selected-pane,
select-controls, and pagination-controls into a single component that receives the list of
"currently visible" available entries and keeps the list of "currently selected" entries, as well as
a pass-through for the pagination value that allows it to hide the pagination control if there is
only one page.

A master component *above that* will provide the list of currently visible entries and, at need,
read the value of the master control object for the "selected" list. That component will mostly be
data-only; it's render will probably just be `<slot></slot>`; its duty will be only to map entries
to string keys Lit can use, and to provide the lists we want to provide and the pagination ranges we
want to show.

Some judicious use of grid will allow me size the controls properly with/without the pagination
control.

Status and Title are going to be in the master control.

A <slot> will be provided for Search, but I have no plans to integrate that into this control as of
yet.

There is already a planned fallback control; the multi-select experience on mobile is actually
excellent, and we should exploit that appropriately.

* web: provide a "select / select all" tool for the dual list multiselect

**This commit**

1. Re-arrange the contents of the folder so that the sub-components are in their own folder. This
   reduces the clutter and makes it easier to understand where to look for certain things.
2. Re-arranges the contents of the folder so that all the Storybook stories are in their own folder.
   Again, this reduces the clutter; it also helps the compiler understand what not to compile.
3. Strips down the "Available items pane" to a minimal amount of interactivity and annotates the
   passed-in properties as `readonly`, since the purpose of this component is to display those. The
   only internal state kept is the list of items marked-to-move.
4. Does the same thing with the "Selected items pane".
5. Added comments to help guide future maintainers.
6. Restructured the CSS, taking a _lot_ of it into our own hands. Patternfly continues to act as if
   all components are fully available all the time, and that's simply not true in a shadowDOM
   environment. By separating out the global CSS Custom Properties from the grid and style
   definitions of `pf-c-dual-list-selector`, I was able to construct a more simple and
   straightforward grid (with nested grids for the columns inside).
7. Added "Delete ALL Selected" to the controls
8. Added "double-click" as a "move this one NOW" feature.

* web: provide a "select / select all" tool for the dual list multiselect

**This commit**

- Fixes the bug whereby pagination would leave the 'some moves available' state visible by clearing
  the 'to-move' state when the list of options changes.
- Fixes the bug whereby a change of 'options' in available would also cause an update to
  `selectedKeys`, causing the entire selected field to clear. Fixed by making `selectedKeys` a
  static object updated only when `selected` is generated rather than generating it anew with each
  re-rerender. (Hey, kids, can you say "functional programming and immutability" five time fast? I
  knew you could!)
- Fixes the bug whereby the change of outpost type would not cause an update of the `options`
  collection.
- Fixes the bug whereby the CSS was not creating enough whitespace separation between the whole
  component and its siblings. Host components are coded `span:static` unless otherwise styled to be
  `block`; we want `block` most of the time.
- Fixes the bug whereby the list of existing objects wasn't being passed to the handler correctly.
- Updates the Form Handler to recognize this new input object.
- Fixes the bug whereby changing outpost type doesn't handle the list of selected applications well.
- Fixes the bug whereby the identity of the outpost type's associated `fetch()` function loses
  identity -- necessary to maintain the selected outpost type switch.
- Fixes the CSS bug whereby horizontal scrolling would not enable correctly when the application's
  name overflows the listbox.
- Completes this assignment.  :-)

* web: last-minute pre-commit cleanup.

* running localize extract

* web: codeql found an issue with one of my tests.

* web: multi-select

Modified the display so that if it's a template we display it
correctly opposite the text, and provide classes that can be used
in the display to differentiate between the main label and the
descriptive label.

Added a sort key, so the select can sort the right-hand pane correctly.

Fixed the `this.selected` setters to use Arrays instead of maps.
Theoretically, this is terribly inefficient, as it makes it
theoretically O(n^2) rather than O(1), but in practice even if both
lists were 10,000 elements long a modern desktop could perform the
entire scan in 150ms or so.

* fix lint error

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* update strings slightly

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* start on dark theme support

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: Add searchbar and enable it for "selected"

"Available" requires a round-trip to the provider level, so that's next.

* web: provide a search for the dual list multiselect

**This commit**

- Includes a new widget that represents the basic, Patternfly-designed search bar.  It just emits
  events of search request updates.
- Changes the definition of a data provider to take an optional search string.
- Changes the handler in the *independent* layer so that it catches search requests and those
  requests work on the "selected" collection.
- Changes the handler of the `authentik` interface layer so that it catches search requests and
  those requests are sent to the data provider.
- Provides a debounce function for the `authentik` interface layer to not hammer the Django instance
  too much.
- Updates the data providers in the example for `OutpostForm` to handle search requests.
- Provides a property in the `authentik` interface layer so that the debounce can be tuned.

* web: always trim the search string passed.

* web: code quality pass, extra comments, pre-commit check.

* Serious (and bizarre) merge bug.  I guess it doesn't like XML that much.

* Attempting to reason with whatever eslint GitHub is using.

* Prettier has opinions.

* Enable better dark mode.

There were two issues: the dark mode didn't reach into the "search"
bar, and there were several hover states that weren't handled well.

This commit handles both.  The color scheme mirrors the one we
currently use, but it's a bit backwards from Patternfly 5.  Dunno
how we're gonna reconcile all that.

* Prettier fixes and locale extraction

* web: update pagination type to use generic, provided type

* web: fixed a few comment typos

* Discordant version numbers for @go-authentik/api were causing build failures.

* What is up with CI/CD?

* web: missed a lint issue that prevented the build from running successfully

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2024-01-25 10:08:00 -08:00
830689f1cb web: bad default in select (#8258)
* web: fix event propogation in search-select wrappers

Two different patches, an older one that extracted long search
blocks that were cut-and-pasted into a standalone component, and a
newer one that fixed displaying placeholder values properly,
conflicted and broke a relationship that allowed for the values to
be propagated through those standalone components correctly.

This restores the event handling and updates the listener set-ups
with more idiomatic hooks into Lit's event system.

* Updated search-select to properly render with Storybook, and provided a
foundation for testing the Search-Select component with Storybook.

* Accidentally deleted this line while making Sonar accept my test data.

* Fixing a small issue that's bugged me for awhile: there's no reason to manually duplicate what code can duplicate.

* Provided a storybook for testing out the flow search.

Discovered along the way that I'd mis-used a prop-drilling technique which caused the currentFlow
to be "undefined" when pass forward, giving rise to Marc's bug.

I *think* this shakes out the last of the bugs.  Events are passed up correctly and the initial value
is recorded correctly.

* Added comments and prettier had opinions.

* Restoring old variable names; they didn't have to change after all.

* 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>
2024-01-23 08:54:34 -08:00
d3cbe26106 web: fix storybook build after npm update (#7855)
* 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.
2023-12-18 15:57:39 +01:00
6792bf8876 web: package up horizontal elements into their own components (#7053)
* web: laying the groundwork for future expansion

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: permit arrays to be sent in custom events without interpolation.

* actually use assignValue or rather serializeFieldRecursive

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: package up horizontal elements into their own components.

This commit introduces a number of "components."  Jens has this idiom:

```
   <ak-form-element-horizontal label=${msg("Name")} name="name" ?required=${true}>
       <input
           type="text"
           value="${ifDefined(this.instance?.name)}"
           class="pf-c-form-control"
           required
       />
   </ak-form-element-horizontal>
```

It's a very web-oriented idiom in that it's built out of two building blocks, the "element-horizontal" descriptor,
and the input object itself.  This idiom is repeated a lot throughout the code.  As an alternative, let's wrap
everything into an inheritable interface:

```
  <ak-text-input
      name="name"
      label=${msg("Name")}
      value="${ifDefined(this.instance?.name)}
      required
  >
  </ak-text-input>
```

This preserves all the information of the above, makes it much clearer what kind of interaction we're having
(sometimes the `type=` information in an input is lost or easily missed), and while it does require you know
that there are provided components rather than the pair of layout-behavior as in the original it also gives
the developer more precision over the look and feel of the components.

*Right now* these components are placed into the LightDOM, as they are in the existing source code, because
the Form handler has a need to be able to "peer into" the "element-horizontal" component to find the values
of the input objects.  In a future revision I hope to place the burden of type/value processing onto the
input objects themselves such that the form handler will need only look for the `.value` of the associated
input control.

Other fixes:

- update the FlowSearch() such that it actually emits an input event when its value changes.
- Disable the storybook shortcuts; on Chrome, at least, they get confused with simple inputs
- Fix an issue with precommit to not scan any Python with ESLint!  :-)

* web: provide storybook stories for the components

This commit provides storybook stories for the ak-horizontal-element wrappers.  A few
bugs were found along the way, including one rather nasty one from Radio where we
were still getting the "set/unset" pair in the wrong order, so I had to knuckle down
and fix the event handler properly.

* web: test oauth2 provider "guinea pig" for new components

I used the Oauth2 provider page as my experiment in seeing if the
horizontal-element wrappers could be used instead of the raw wrappers
themselves, and I wanted to make sure a test existed that asserts
that filling out THAT form in the ProvidersList and ProvidersForm
didn't break anything.

This commit updates the WDIO tests to do just that; the test is
simple, but it does exercise the `name` field of the Provider,
something not needed in the Wizard because it's set automatically
based on the Application name, and it even asserts that the new
Provider exists in the list of available Providers when it's done.

* web: making sure ESlint and Prettier are happy

* "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>
2023-10-04 13:07:52 -07:00
1451f3757d web/flows: add more stories (#6444)
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>
2023-08-03 17:27:58 +02:00
12c4ac704f web: basic cleanup of buttons (#6107)
* web: basic cleanup of buttons

This commit adds Storybook features to the Authentik four-stage button.
The four-stage button is used to:

- trigger an action
- show that the action is running
- show when the action has succeeded, then reset
- show when the action has failed, then reset

It is used mostly for fetching data from the server.  The variants are:

- ak-spinner-button: The basic form takes a single property argument, `callAction` a function that
  returns a Promise (an asynchronous function).
- ak-action-button: Takes an API request function (which are all asynchronous) and adapts it to the
  `callAction`. The only difference in behavior with the Spinner button is that on failure the error
  message will be displayed by a notification.
- ak-token-copy-button: A specialized button that, on success, pushes the content of the retrieved
  object into the clipboard.

Cleanup consisted of:

- removing a lot of the in-line code from the HTML, decluttering it and making more explicit what
  the behaviors of each button type are on success and on failure.
- Replacing the ad-hoc Promise management with Lit's own `Task` handler. The `Task` handler knows
  how to notify a Lit-Element of its own internal state change, making it ideal for objects like
  this button that need to change their appearance as a Promise'd task progresses from idle →
  running → (success or failure).
- Providing JSDoc strings for all of the properties, slots, attributes, elements, and events.
- Adding 'pointer-events: none' during the running phases of the action, to prevent the user from
  clicking the button multiple times and launching multiple queries.
- Emitting an event for every stage of the operation:
  - `ak-button-click` when the button is clicked.
  - `ak-button-success` when the action completes. The payload is included in `Event.detail.result`
  - `ak-button-failure` when the action fails. The error message is included in `Event.detail.error`
  - `ak-button-reset` when the button completes a notification and goes back to idle

**Storybook**

Since the API requests for both `ak-spinner-button` and `ak-action-button` require only that a
promise be returned, Storybooking them was straightforward. `ak-token-copy-button` is a
special-purpose derivative with an internal functionality that can't be easily mocked (yet), so
there's no Storybook for it.

All of the stories provide the required asynchronous function, in this cose one that waits three
seconds before emitting either a `response` or `reject` Promise.

`ak-action-button`'s Story has event handler code so that pressing on the button will result in a
message being written to a display block under the button.

I've added a new pair of class mixins, `CustomEmitterElement` and `CustomListenerElement`. These
each add an additional method to the classes they're mixed into; one provides a very easy way to
emit a custom event and one provides a way to receive the custom event while sweeping all of the
custom event type handling under the rug.

`emitCustomEvent` replaces this:

``` JavaScript
this.dispatchEvent(
  new CustomEvent('ak-button-click', {
    composed: true,
    bubbles: true,
    detail: {
      target: this,
      result: "Some result, huh?"
    },
  })
);
```

... with this:

``` JavaScript
this.dispatchCustomEvent('ak-button-click', { result: "Some result, huh?" });
```

The `CustomListenerElement` handler just ensures that the handler being passed to it takes a
CustomEvent, and then makes sure that any actual event passed to the handler has been type-guarded
to ensure it is a custom event.

**Observations**

*Composition vs Inheritance, Part 1*

The four-state button has three implementations.  All three inherit from `BaseTaskButton`:

- `spinner`
  - provides a default `callAction()`
- `action`
  - provides a different name for `callAction`
  - overrides `onError` to display a Notification.
- `token-copy`
  - provides a custom `callAction`
  - overrides `onSuccess` to copy the results to the keyboard
  - overrides `onError` to display a Notification, with special handling for asynchronous
    processing.

The *results* of all of these could be handled higher up as event handlers, and the button could be
just a thing that displays the states.  As it is, the BaseStateToken has only one reason to change
(the Promise changes its state), so I'm satisfied that this is a suitable evolution of the product,
and that it does what it says it does.

*Developer Ergonomics*

The one thing that stands out to me time and again is just how *confusing* all of the Patternfly
stuff tends to be; not because it's not logical, but because it overwhelms the human 7±2 ability to
remember details like this without any imperative to memorize all of them. I would like to get them
under control by marshalling them under a semantic CSS regime, but I'm blocked by some basic
disconnects in the current development environment.  We can't shake out the CSS as much as we'd like
because there's no ESPrima equivalent for Typescript, and the smallest bundle purgeCSS is capable of
making for just *one* button is about 55KB.  That's a bit too much.  It's a great system for getting
off the ground, but long-term it needs more love than we (can) give it.

* Prettier has opinions.

* Removed extraneous debugging code.

* Added comments to the BaseTaskButton parent class.

* web: fixed two build errors (typing) in the stories.

* web: prettier's got opinions

* web: refactor the buttons

This commit adds URL mocking to Storybook, which in turn allows us to
commit a Story for ak-token-copy-button.

I have confirmed that the button's algorithm for writing to the
clipboard works on Safari, Chrome, and Firefox.  I don't know
what's up with IE.

* ONE BYTE in .storybook/main blocked integration.

With the repair of lit-analyze, it's time to fix the rule set
to at least let us pass for the moment.

* Still looking for the list of exceptions in lit-analyze that will let us pass once more.

* web: repair error in EnterpriseLicenseForm

This commit continues to find the right configuration for
lit-analyze.  During the course of this repair, I discovered
a bug in the EnterpriseLicenseForm; the original usage could
result in the _string_ `undefined` being passed back as a
value.  To handle the case where the value truly is undefined,
the `ifDefined()` directive must be used in the HTML template.

I have also instituted a case-by-case stylistic decision to allow
the HTML, and only the HTML, to be longer that 100 characters
when doing so reduces the visual "noise" of a function.
2023-07-18 08:29:42 -07:00
6741439367 website/integrations: add account linking note for WriteFreely (#5804)
* Update index.md

Added account linking in WriteFreely's backend

Signed-off-by: Oliver Pifferi <oliver@pifferi.info>

* minor copy changes

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* Update website/integrations/services/writefreely/index.md

Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com>

* Update website/integrations/services/writefreely/index.md

Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Oliver Pifferi <oliver@pifferi.info>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Signed-off-by: Tana M Berry <tanamarieberry@yahoo.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Tana M Berry <tanamarieberry@yahoo.com>
2023-06-08 13:27:35 +02:00
e424fa56d1 web: bump storybook from 7.0.18 to 7.0.20 in /web (#5896)
* web: bump storybook from 7.0.18 to 7.0.20 in /web

Bumps [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/cli) from 7.0.18 to 7.0.20.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/v7.0.20/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v7.0.20/code/lib/cli)

---
updated-dependencies:
- dependency-name: storybook
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* web: add storybook theme

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-06-08 11:08:07 +02:00
d0f0f9b29e web: Add storybook (#5865)
* \#\# Details

web: replace lingui with lit/localize

\#\# Changes

This rather massive shift replaces the lingui and `t()` syntax with lit-localize, XLIFF, and the `msg()`
syntax used by lit-localize.  90% of this work was mechanized; simple perl scripts found and replaced
all uses of `t()` with the appropriate corresponding syntax for `msg()` and `msg(str())`.

The XLIFF files were auto-generated from the PO files.  They have not been audited, and they should be
checked over by professional translators.  The actual _strings_ have not been changed, but as this was
a mechanized change there is always the possibility of mis-translation-- not by the translator, but by
the script.

* web: revise lit/localize: fix two installation issues.

* web: revise localization

TL;DR:

- Replaced all of Lingui's `t()` syntax with `msg()` syntax.
- Mechanically (i.e with a script) converted all of the PO files to XLIFF files
- Refactored the localization code to be a bit smarter:
  - the function `getBestMatchLocale` takes the locale lists and a requested locale, and returns the
    first match of:
    - The locale's code exactly matches the requested locale
    - The locale code exactly matches the prefix of the requested locale (i.e the "en" part of "en-US")
    - the locale code's prefix exactly matches the prefix of the requested locale
    This function is passed to lit-locate's `loadLocale()`.
  - `activateLocale()` just calls `loadLocale()` now.
  - `autodetectLanguage` searches the following, and picks the first that returns a valid locale
    object, before passing it to `loadLocale()`:
    - The User's settings
    - A `?locale=` component found in `window.location.search`
    - The `window.navigator.language` field
    - English

The `msg()` only runs when it's run.  This seems obvious, but it means that you cannot cache
strings at load time; they must be kept inside functions that are re-run so that the `msg()` engine
can look up the strings in the preferred language of the user at that moment.

You can use thunks-of-strings if you really need them that way.

* Including the 'xliff-converter' in case anyone wants to review it.

* The xliff-converter is tagged as 'xliff-converter', but has been
deleted.

\#\# Details

-   Resolves #5171

\#\# Changes

\#\#\# New Features

-   Adds a "Add an Application" to the LibraryView if there are no applications and the user is an administrator.

\#\#\# Breaking Changes

-   Adds breaking change which causes \<issue\>.

\#\# Checklist

-   [ ] Local tests pass (`ak test authentik/`)
-   [ ] The code has been formatted (`make lint-fix`)

If an API change has been made

-   [ ] The API schema has been updated (`make gen-build`)

If changes to the frontend have been made

-   [ ] The code has been formatted (`make web`)
-   [ ] The translation files have been updated (`make i18n-extract`)

If applicable

-   [ ] The documentation has been updated
-   [ ] The documentation has been formatted (`make website`)

* web: fix redundant locales for zh suite.

* web: prettier pass for locale update

* web: localization moderization

Changed the names of the lit-localize commands to make it clear they're
part of the localization effort, and not just "build" and "extract".

* web: add storybook to test components

* update transifex config

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix package lock?

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* use build not compile

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* web: conversion to lit-localize

The CI produced a list of problems that I hadn't caught earlier,
due to a typo ("localize build" is correct, "localize compile" is
not) I had left in package.json.  They were minor and linty, but
it was still wise to fix them.

* web: replace lingui with lit/locale

This commit fixes some minor linting issues that were hidden by a typo in package.json.  The
issues were not apparently problematic from a Javascript point of view, but they pointed
to sloppy thinking in the progression of types through the system, so I cleaned them
up and formalized the types from LocaleModule to AkLocale.

* web: replace lingui with lit/localize

One problem that has repeatedly come up is that localize's templates do not produce
JavaScript that conforms with our shop style.  I've replaced `build-locale` with
a two-step that builds the locale *and* ensures that it conforms to the shop style
via `prettier` every time.

* web: replace lingui with lit-locale

This commit applies the most recent bundle of translations to the
new lit-locale aspect component.  It also revises the algorithm
for *finding* the correct locale, replacing the complex fall-back
with some rather straightforward regular expressions.

In the case of Chinese, the fallback comes at the end of the
selection list, which may not be, er, politically valuable
(since Taiwan and Hong Kong come before, being exceptions that
need to be tested).  If we need a different order for presentation,
that'll be a future feature.

* web: replace lingui with lit/locale

Well, that was embarassing.

* web: add storybook

The delta on this didn't make any sense; putting it back causes no behavioral
changes.

* web: add Storybook

Fixed a typo in the package.json that prevented the TSC check
from passing.

* web: incorporate storybook

This commit includes a number of type and definitional changes needed to make lit-analyze pass. In
most cases, it was a matter of reassuring Lit that we were using the right type and the right type
converter, or configuring the property such that it should never be called as an attribute.

The most controversial change is adding the 'no-incompatible-type-binding' to the LIT analyzer
configuration (found in `tsconfig.json`). This "routes around" lit-analyzer not doing very well
understanding that some HTML objects can have generic property types, as long as the renderer is
configured correctly.

The 'no-missing-import: off' setting is required as lit-analyzer also does not use the tsconfig
`paths` setting correctly and cannot find objects defined via aliases.

It's a shame JSON can't support comments; these should be in the tsconfig.json file directly.  As it
is, I've started a README file that includes a section to record configuration decisions.

Deleted the lingui.config file as we're not using it anymore

* ignore storybook build in git

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-06-07 13:05:33 +02:00