From 9582cd459977c41699402960e30b8030149f33a2 Mon Sep 17 00:00:00 2001
From: Ken Sternberg
 <133134217+kensternberg-authentik@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:26:57 -0700
Subject: [PATCH] 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.
---
 web/src/elements/Base.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index 243901e01..7b2420454 100644
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@@ -13,12 +13,15 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { Config, CurrentTenant, UiThemeEnum } from "@goauthentik/api";
 
-export function rootInterface<T extends Interface>(): T | undefined {
-    const el = Array.from(document.body.querySelectorAll("*")).filter(
-        (el) => el instanceof Interface,
-    );
-    return el[0] as T;
-}
+type AkInterface = HTMLElement & {
+    getTheme: () => Promise<UiThemeEnum>;
+    tenant?: CurrentTenant;
+    uiConfig?: UIConfig;
+    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 {
     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()
     tenant?: CurrentTenant;
 
@@ -186,6 +189,7 @@ export class Interface extends AKElement {
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, ensureCSSStyleSheet(PFBase)];
         tenant().then((tenant) => (this.tenant = tenant));
         config().then((config) => (this.config = config));
+        this.dataset.akInterfaceRoot = "true";
     }
 
     _activateTheme(root: AdoptedStyleSheetsElement, theme: UiThemeEnum): void {