From c80116475b2c66fbe94badca4ff109b0440b71c3 Mon Sep 17 00:00:00 2001 From: Ken Sternberg <133134217+kensternberg-authentik@users.noreply.github.com> Date: Thu, 25 Apr 2024 08:28:05 -0700 Subject: [PATCH] web: clean up some repetitive types (#9241) * 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 () 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: clean up some repetitive types This commit centralizes two types that were defined multiple times throughout our code, and casts in stone those definitions, applying the correct definitions where needed. I had two types that were used repeatedly to define the interfaces for providers and context consumers. Because they were both one-liners, I had done what I usually curse in others: copied them. Worse, I hand-wrote them because they're so simple I had them memorized. --- web/src/elements/Interface/BrandContextController.ts | 9 ++++----- web/src/elements/Interface/ConfigContextController.ts | 9 ++++----- .../elements/Interface/EnterpriseContextController.ts | 9 ++++----- web/src/elements/Interface/authentikConfigProvider.ts | 4 +--- web/src/elements/Interface/brandProvider.ts | 6 ++---- web/src/elements/Interface/capabilitiesProvider.ts | 6 ++---- web/src/elements/Interface/licenseSummaryProvider.ts | 4 +--- web/src/elements/types.ts | 11 +++++++++++ 8 files changed, 29 insertions(+), 29 deletions(-) create mode 100644 web/src/elements/types.ts diff --git a/web/src/elements/Interface/BrandContextController.ts b/web/src/elements/Interface/BrandContextController.ts index 216d930bf0..ce47875443 100644 --- a/web/src/elements/Interface/BrandContextController.ts +++ b/web/src/elements/Interface/BrandContextController.ts @@ -1,23 +1,22 @@ import { EVENT_REFRESH } from "@goauthentik/authentik/common/constants"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts"; +import type { ReactiveElementHost } from "@goauthentik/elements/types.js"; import { ContextProvider } from "@lit/context"; -import { ReactiveController, ReactiveControllerHost } from "lit"; +import type { ReactiveController } from "lit"; import type { CurrentBrand } from "@goauthentik/api"; import { CoreApi } from "@goauthentik/api"; import type { AkInterface } from "./Interface"; -type ReactiveElementHost = Partial & AkInterface; - export class BrandContextController implements ReactiveController { - host!: ReactiveElementHost; + host!: ReactiveElementHost; context!: ContextProvider<{ __context__: CurrentBrand | undefined }>; - constructor(host: ReactiveElementHost) { + constructor(host: ReactiveElementHost) { this.host = host; this.context = new ContextProvider(this.host, { context: authentikBrandContext, diff --git a/web/src/elements/Interface/ConfigContextController.ts b/web/src/elements/Interface/ConfigContextController.ts index 8e16d0b8dc..35e38d54ea 100644 --- a/web/src/elements/Interface/ConfigContextController.ts +++ b/web/src/elements/Interface/ConfigContextController.ts @@ -2,23 +2,22 @@ import { EVENT_REFRESH } from "@goauthentik/authentik/common/constants"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { globalAK } from "@goauthentik/common/global"; import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts"; +import type { ReactiveElementHost } from "@goauthentik/elements/types.js"; import { ContextProvider } from "@lit/context"; -import { ReactiveController, ReactiveControllerHost } from "lit"; +import type { ReactiveController } from "lit"; import type { Config } from "@goauthentik/api"; import { RootApi } from "@goauthentik/api"; import type { AkInterface } from "./Interface"; -type ReactiveElementHost = Partial & AkInterface; - export class ConfigContextController implements ReactiveController { - host!: ReactiveElementHost; + host!: ReactiveElementHost; context!: ContextProvider<{ __context__: Config | undefined }>; - constructor(host: ReactiveElementHost) { + constructor(host: ReactiveElementHost) { this.host = host; this.context = new ContextProvider(this.host, { context: authentikConfigContext, diff --git a/web/src/elements/Interface/EnterpriseContextController.ts b/web/src/elements/Interface/EnterpriseContextController.ts index 30871a75a4..faa3b4823b 100644 --- a/web/src/elements/Interface/EnterpriseContextController.ts +++ b/web/src/elements/Interface/EnterpriseContextController.ts @@ -1,23 +1,22 @@ import { EVENT_REFRESH_ENTERPRISE } from "@goauthentik/authentik/common/constants"; import { DEFAULT_CONFIG } from "@goauthentik/common/api/config"; import { authentikEnterpriseContext } from "@goauthentik/elements/AuthentikContexts"; +import type { ReactiveElementHost } from "@goauthentik/elements/types.js"; import { ContextProvider } from "@lit/context"; -import { ReactiveController, ReactiveControllerHost } from "lit"; +import type { ReactiveController } from "lit"; import type { LicenseSummary } from "@goauthentik/api"; import { EnterpriseApi } from "@goauthentik/api"; import type { AkEnterpriseInterface } from "./Interface"; -type ReactiveElementHost = Partial & AkEnterpriseInterface; - export class EnterpriseContextController implements ReactiveController { - host!: ReactiveElementHost; + host!: ReactiveElementHost; context!: ContextProvider<{ __context__: LicenseSummary | undefined }>; - constructor(host: ReactiveElementHost) { + constructor(host: ReactiveElementHost) { this.host = host; this.context = new ContextProvider(this.host, { context: authentikEnterpriseContext, diff --git a/web/src/elements/Interface/authentikConfigProvider.ts b/web/src/elements/Interface/authentikConfigProvider.ts index 3329e739b7..79f1c960bb 100644 --- a/web/src/elements/Interface/authentikConfigProvider.ts +++ b/web/src/elements/Interface/authentikConfigProvider.ts @@ -1,13 +1,11 @@ import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts"; +import type { Constructor } from "@goauthentik/elements/types.js"; import { consume } from "@lit/context"; import type { LitElement } from "lit"; import type { Config } from "@goauthentik/api"; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Constructor = new (...args: any[]) => T; - export function WithAuthentikConfig>( superclass: T, subscribe = true, diff --git a/web/src/elements/Interface/brandProvider.ts b/web/src/elements/Interface/brandProvider.ts index 14b87d623a..912466d963 100644 --- a/web/src/elements/Interface/brandProvider.ts +++ b/web/src/elements/Interface/brandProvider.ts @@ -1,14 +1,12 @@ import { authentikBrandContext } from "@goauthentik/elements/AuthentikContexts"; +import type { AbstractConstructor } from "@goauthentik/elements/types.js"; import { consume } from "@lit/context"; import type { LitElement } from "lit"; import type { CurrentBrand } from "@goauthentik/api"; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Constructor = abstract new (...args: any[]) => T; - -export function WithBrandConfig>( +export function WithBrandConfig>( superclass: T, subscribe = true, ) { diff --git a/web/src/elements/Interface/capabilitiesProvider.ts b/web/src/elements/Interface/capabilitiesProvider.ts index f86d480f93..c8841d880b 100644 --- a/web/src/elements/Interface/capabilitiesProvider.ts +++ b/web/src/elements/Interface/capabilitiesProvider.ts @@ -1,4 +1,5 @@ import { authentikConfigContext } from "@goauthentik/elements/AuthentikContexts"; +import type { AbstractConstructor } from "@goauthentik/elements/types.js"; import { consume } from "@lit/context"; import type { LitElement } from "lit"; @@ -6,9 +7,6 @@ import type { LitElement } from "lit"; import { CapabilitiesEnum } from "@goauthentik/api"; import { Config } from "@goauthentik/api"; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Constructor = abstract new (...args: any[]) => T; - // Using a unique, lexically scoped, and locally static symbol as the field name for the context // means that it's inaccessible to any child class looking for it. It's one of the strongest privacy // guarantees in JavaScript. @@ -45,7 +43,7 @@ class WCC { * */ -export function WithCapabilitiesConfig>( +export function WithCapabilitiesConfig>( superclass: T, subscribe = true, ) { diff --git a/web/src/elements/Interface/licenseSummaryProvider.ts b/web/src/elements/Interface/licenseSummaryProvider.ts index 2df4289b0e..4a73ffab6d 100644 --- a/web/src/elements/Interface/licenseSummaryProvider.ts +++ b/web/src/elements/Interface/licenseSummaryProvider.ts @@ -1,13 +1,11 @@ import { authentikEnterpriseContext } from "@goauthentik/elements/AuthentikContexts"; +import { Constructor } from "@goauthentik/elements/types.js"; import { consume } from "@lit/context"; import type { LitElement } from "lit"; import type { LicenseSummary } from "@goauthentik/api"; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -type Constructor = abstract new (...args: any[]) => T; - export function WithLicenseSummary>( superclass: T, subscribe = true, diff --git a/web/src/elements/types.ts b/web/src/elements/types.ts new file mode 100644 index 0000000000..c0247b1e91 --- /dev/null +++ b/web/src/elements/types.ts @@ -0,0 +1,11 @@ +import { AKElement } from "@goauthentik/elements/Base"; + +import { ReactiveControllerHost } from "lit"; + +export type ReactiveElementHost = Partial & T; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type Constructor = new (...args: any[]) => T; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type AbstractConstructor = abstract new (...args: any[]) => T;