* Holding for a moment...
* web: replace rollup with esbuild
This commit replaces rollup with esbuild.
The biggest fix was to alter the way CSS is imported into our system;
esbuild delivers it to the browser as text, rather than as a bundle
with metadata that, frankly, we never use. ESBuild will bundle the
CSS for us just fine, and interpreting those strings *as* CSS turned
out to be a small hurdle. Code has been added to AKElement and
Interface to ensure that all CSS referenced by an element has been
converted to a Browser CSSStyleSheet before being presented to the
browser.
A similar fix has been provided for the markdown imports. The
biggest headache there was that the re-arrangement of our documentation
broke Jen's existing parser for fixing relative links. I've provided
a corresponding hack that provides the necessary detail, but since
the Markdown is being presented to the browser as text, we have to
provide a hint in the markdown component for where any relative
links should go, and we're importing and processing the markdown
at runtime. This doesn't seem to be a big performance hit.
The entire build process is driven by the new build script, `build.mjs`,
which starts the esbuild process as a service connected to the build
script and then runs the commands sent to it as fast as possible.
The biggest "hack" in it is actually the replacement for rollup's
`rollup-copy-plugin`, which is clever enough I'm surprised it doesn't
exist as a standalone file-copy package in its own right.
I've also used a filesystem watch library to encode a "watcher"
mechanism into the build script. `node build.mjs --watch` will
work on MacOS; I haven't tested it elsewhere, at least not yet.
`node build.mjs --proxy` does what the old rollup.proxy.js script
did.
The savings are substantial. It takes less than two seconds to build
the whole UI, a huge savings off the older ~45-50 seconds I routinely
saw on my old Mac. It's also about 9% smaller.
The trade-offs appear to be small: processing the CSS as StyleSheets,
and the Markdown as HTML, at run-time is a small performance hit,
but I didn't notice it in amongst everything else the UI does as
it starts up.
Manual chunking is gone; esbuild's support for that is quite difficult
to get right compared to Rollup's, although there's been a bit of
yelling at ESbuild over it. Codemirror is built into its own chunk;
it's just not _named_ distinctly anymore.
The one thing I haven't been able to test yet is whether or not the
polyfills and runtim shims work as expected on older browsers.
* web: continue with performance and build fixes
This commit introduces a couple of fixes enabled by esbuild and other
features.
1. build-locales
`build-locales` is a new NodeJS script in the `./scripts` folder
that does pretty much what it says in the name: it translates Xliff
files into `.ts` files. It has two DevExp advantages over the old
build system.
First, it will check the build times of the xlf files and
their ts equivalents, and will only run the actual build-locales
command if the XLF files are newer than their TS equivalents.
Second, it captures the stderr output from the build-locales command
and summarizes it. Instead of the thousands of lines of "this
string has no translation equivalent," now it just reports the
number of missed translations per locale.
2. check-spelling
This is a simple wrapper around the `codespell` command, mostly
just to reduce the visual clutter of `package.json`, but also to
permit it to run just about anywhere without needed hard-coded
paths to the dictionaries, using a fairly classic trick with git.
3. pseudolocalize and import-maps
These scripts were in TypeScript, but for our purposes I've
saved their constructed equivalents instead. This saves on
visual clutter in the `package.json` script, and reduced the
time they have to run during full builds. They're small enough
I feel confident they won't need too much looking over.
Also, two lint bugs in Markdown.ts have been fixed.
* Removed a few lines that weren't in use.
* build-locales was sufficiently complex it needed some comments.
* web: formalize that horrible unixy git status checker into a proper function.
* Added types for , the Markdown processor for in-line documentation.
* re-add dependencies required for storybook
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix optional deps
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* fix relative links for docs
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* only build once on startup
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
* prevent crash when build fails in watch mode, improve console output
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/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>
* 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>
