From 314d89b1b7acbf024e022113859760c2ee33be4c Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 13 Oct 2023 08:22:46 -0700
Subject: [PATCH] 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/src/elements/Base.ts | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/src/elements/Base.ts b/web/src/elements/Base.ts
index 243901e01..c50896957 100644
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@@ -13,12 +13,10 @@ 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> };
+
+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 +169,7 @@ export class AKElement extends LitElement {
     }
 }
 
-export class Interface extends AKElement {
+export class Interface extends AKElement implements AkInterface {
     @state()
     tenant?: CurrentTenant;
 
@@ -186,6 +184,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 {