web: break circular dependency between AKElement & Interface. (#7165)

* web: break circular dependency between AKElement & Interface.

This commit changes the way the root node of the web application shell is
discovered by child components, such that the base class shared by both
no longer results in a circular dependency between the two models.

I've run this in isolation and have seen no failures of discovery; the identity
token exists as soon as the Interface is constructed and is found by every item
on the page.

* web: fix broken typescript references

This built... and then it didn't?  Anyway, the current fix is to
provide type information the AkInterface for the data that consumers
require.
This commit is contained in:
Ken Sternberg 2023-10-20 14:26:57 -07:00 committed by GitHub
parent 7e213f3ca6
commit 9582cd4599
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 7 deletions

View File

@ -13,12 +13,15 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
import { Config, CurrentTenant, UiThemeEnum } from "@goauthentik/api"; import { Config, CurrentTenant, UiThemeEnum } from "@goauthentik/api";
export function rootInterface<T extends Interface>(): T | undefined { type AkInterface = HTMLElement & {
const el = Array.from(document.body.querySelectorAll("*")).filter( getTheme: () => Promise<UiThemeEnum>;
(el) => el instanceof Interface, tenant?: CurrentTenant;
); uiConfig?: UIConfig;
return el[0] as T; config?: Config;
} };
export const rootInterface = <T extends AkInterface>(): T | undefined =>
(document.body.querySelector("[data-ak-interface-root]") as T) ?? undefined;
export function ensureCSSStyleSheet(css: CSSStyleSheet | CSSResult): CSSStyleSheet { export function ensureCSSStyleSheet(css: CSSStyleSheet | CSSResult): CSSStyleSheet {
if (css instanceof CSSResult) { if (css instanceof CSSResult) {
@ -171,7 +174,7 @@ export class AKElement extends LitElement {
} }
} }
export class Interface extends AKElement { export class Interface extends AKElement implements AkInterface {
@state() @state()
tenant?: CurrentTenant; tenant?: CurrentTenant;
@ -186,6 +189,7 @@ export class Interface extends AKElement {
document.adoptedStyleSheets = [...document.adoptedStyleSheets, ensureCSSStyleSheet(PFBase)]; document.adoptedStyleSheets = [...document.adoptedStyleSheets, ensureCSSStyleSheet(PFBase)];
tenant().then((tenant) => (this.tenant = tenant)); tenant().then((tenant) => (this.tenant = tenant));
config().then((config) => (this.config = config)); config().then((config) => (this.config = config));
this.dataset.akInterfaceRoot = "true";
} }
_activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void { _activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void {