authentik icon indicating copy to clipboard operation
authentik copied to clipboard

web: add HTMLTagNameElementMaps to everything to activate lit analyzer

Open kensternberg-authentik opened this issue 1 year ago • 1 comments

Details

web: the most boring PR in the universe: Add HTMLTagNameElementMap to everything.

The instructions for lit-analyzer read:

Below you will see an example of what to add to your library typescript definition files if you want type checking support for a given html tag name.

declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

This commit does exactly that: it adds HTMLTagNameElementMap entries to every web component in the front end. Activating and associating the HTMLTagNamElementMap with its class has enabled lit-analyzer to reveal a lot of basic problems within the UI, the most popular of which is “missing import.” We usually get away with it because the object being imported was already registered with the browser elsewhere, but it still surprises me that we haven’t gotten any complaints over things like:

./src/flow/stages/base.ts
Missing import for <ak-form-static>
96:  <ak-form-static
no-missing-import

Given how early and fundamental that seems to be in our code, I’d have expected to hear something about it.

I have not enabled most of the possible checks because, well, there are just a ton of warnings when I do. I’d like to get in and fix those.

Aside from this, I have also removed customElement declarations from anything declared as an abstract class. It makes no sense to try and instantiate something that cannot, by definition, be instantiated. If the class is capable of running on its own, it’s not abstract, it just needs to be overridden in child classes. Before removing the declaration I did check to make sure no other piece of code was even trying to instantiate it, and so far I have detected no failures. Those elements were:

  • elements/forms/Form.ts
  • elements/wizard/WizardFormPage.ts

The one that blows my mind, though, is this:

src/elements/forms/ProxyForm.ts
6-@customElement("ak-proxy-form")
7:export abstract class ProxyForm extends Form<unknown> {

Which, despite being abstract, is somehow instantiable?

src/admin/outposts/ServiceConnectionListPage.ts:    <ak-proxy-form
src/admin/providers/ProviderListPage.ts:    <ak-proxy-form
src/admin/sources/SourceWizard.ts:    <ak-proxy-form
src/admin/sources/SourceListPage.ts:    <ak-proxy-form
src/admin/providers/ProviderWizard.ts:    <ak-proxy-form type=${type.component}></ak-proxy-form>
src/admin/stages/StageListPage.ts:    <ak-proxy-form

I’ve made a note to investigate.

Tooling

I’ve started a new folder where all of my one-off tools for how a certain PR was run. It has a README describing what it’s for, and the first tool, add-htmlelementtagnamemaps-to-everything, is its first entry. That tool is also documented internally.

Coda

I've got a little list,
I've got a little list,
Of all the code that would never be missed,
The duplicate code of cute-and-paste,
The weak abstractions that lead to waste,
The embedded templates-- you get the gist,
There ain't none of 'em that will ever be missed,
And that's why I've got them on my list!
  • [X] The code has been formatted (make web)

kensternberg-authentik avatar Jun 25 '24 17:06 kensternberg-authentik

Deploy Preview for authentik-docs canceled.

Name Link
Latest commit d002b352273b500fd6423e8fc5cd12eee3c7433b
Latest deploy log https://app.netlify.com/sites/authentik-docs/deploys/66955c7b2e3e72000748ba25

netlify[bot] avatar Jun 25 '24 17:06 netlify[bot]

Deploy Preview for authentik-storybook ready!

Name Link
Latest commit d002b352273b500fd6423e8fc5cd12eee3c7433b
Latest deploy log https://app.netlify.com/sites/authentik-storybook/deploys/66955c7cbb61e900088a7129
Deploy Preview https://deploy-preview-10217--authentik-storybook.netlify.app
Preview on mobile
Toggle QR Code...

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[bot] avatar Jul 15 '24 17:07 netlify[bot]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 92.61%. Comparing base (1dec9bd) to head (d002b35).

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #10217      +/-   ##
==========================================
- Coverage   92.62%   92.61%   -0.01%     
==========================================
  Files         714      714              
  Lines       35005    35005              
==========================================
- Hits        32422    32421       -1     
- Misses       2583     2584       +1     
Flag Coverage Δ
e2e 49.59% <ø> (ø)
integration 25.36% <ø> (ø)
unit 90.11% <ø> (-0.01%) :arrow_down:

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar Jul 15 '24 17:07 codecov[bot]

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-d002b352273b500fd6423e8fc5cd12eee3c7433b
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-d002b352273b500fd6423e8fc5cd12eee3c7433b-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
global:
    image:
        repository: ghcr.io/goauthentik/dev-server
        tag: gh-ghcr.io/goauthentik/dev-server:gh-d002b352273b500fd6423e8fc5cd12eee3c7433b

For arm64, use these values:

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

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

github-actions[bot] avatar Jul 15 '24 17:07 github-actions[bot]