web: provide better feedback on Application Library page about search results

[kensternberg-authentik]

Details

web: improve state management of Fuze application search

This commit rewrites a bit (just a bit, really!) of the relationship between ak-library-application-impl and ak-library-application-search.

The “show only apps with launch URLs filter” has been moved up to the retrieval layer; there was no reason for the renderer to repeatedly call a required filter; just call it on the list of applications once and be done.

The search component exchanges the two-state guesswork and custom events for a concrete three-state solution and private events. The search handler now sends the events “reset,” “updated,” and the new “updated and empty,” which we could not previously track.

By limiting the Impl layer to only those apps with launchUrls, we can now distinguish between “all apps,” and “filtered apps,” and understand that when “all apps” is empty we have no apps, and when “filtered apps” is empty the search has returned nothing.

I also tried to add a lot more comments.

In keeping with ES2020, I’ve put .js extensions on all the local imports.

In keeping with a variety of best practice recommendations, I’ve renamed web component files to match the custom element they deploy:

ak-library-application-search-empty.ts
19:@customElement("ak-library-application-search-empty")

ak-library-impl.ts
44:@customElement("ak-library-impl")

ak-library.ts
30:@customElement("ak-library")

ak-library-application-list.ts
34:@customElement("ak-library-application-list")

ak-library-application-empty-list.ts
22:@customElement("ak-library-application-empty-list")

ak-library-application-search.ts
46:@customElement("ak-library-application-search")

The only effect(s) external to the changes in this vertical is that the Route() had to be updated, and I have done that.

• The code has been formatted (make web)

[netlify]

✅ Deploy Preview for authentik-storybook ready!

Name	Link
🔨 Latest commit	db67d36
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-storybook/deploys/667c50aca6c53c00082c612c
😎 Deploy Preview	https://deploy-preview-9386--authentik-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for authentik-docs ready!

Name	Link
🔨 Latest commit	db67d36
🔍 Latest deploy log	https://app.netlify.com/sites/authentik-docs/deploys/667c50ac1a52710008581f2f
😎 Deploy Preview	https://deploy-preview-9386--authentik-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 92.63%. Comparing base (632f098) to head (db67d36).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9386      +/-   ##
==========================================
- Coverage   92.65%   92.63%   -0.03%     
==========================================
  Files         713      713              
  Lines       34970    34970              
==========================================
- Hits        32401    32393       -8     
- Misses       2569     2577       +8     

Flag	Coverage Δ
e2e	49.52% <ø> (-0.04%)	⬇️
integration	25.39% <ø> (ø)
unit	90.12% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[BeryJu]

should be we importing these files are .js? If anything we probably shouldn't for consistency

[kensternberg-authentik]

The standard is quickly becoming "If it's going to be a JS file, always use a .js extension." I'd like to keep doing that from now on. Typescript has extensive documentation on it. Browser stuff should be ES2020 and beyond.

[github-actions]

authentik PR Installation instructions

Instructions for docker-compose

Add the following block to your .env file:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-ghcr.io/goauthentik/dev-server:gh-db67d36ca363df343be7e9ec9be611c16ac731b9
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

For arm64, use these values:

AUTHENTIK_IMAGE=ghcr.io/goauthentik/dev-server
AUTHENTIK_TAG=gh-ghcr.io/goauthentik/dev-server:gh-db67d36ca363df343be7e9ec9be611c16ac731b9-arm64
AUTHENTIK_OUTPOSTS__CONTAINER_IMAGE_BASE=ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s

Afterwards, run the upgrade commands from the latest release notes.

Instructions for Kubernetes

Add the following block to your values.yml file:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-ghcr.io/goauthentik/dev-server:gh-db67d36ca363df343be7e9ec9be611c16ac731b9

For arm64, use these values:

authentik:
    outposts:
        container_image_base: ghcr.io/goauthentik/dev-%(type)s:gh-%(build_hash)s
image:
    repository: ghcr.io/goauthentik/dev-server
    tag: gh-ghcr.io/goauthentik/dev-server:gh-db67d36ca363df343be7e9ec9be611c16ac731b9-arm64

Afterwards, run the upgrade commands from the latest release notes.