web: Fix issue where Storybook cannot resolve styles. (#14553)

* web: Fix issue where Storybook cannot resolve styles.

* separate sentry config and middleware to prevent circular import

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

web/src/common/api/config.ts

@@ -5,7 +5,7 @@ import {
 } from "@goauthentik/common/api/middleware.js";
 import { EVENT_LOCALE_REQUEST, VERSION } from "@goauthentik/common/constants.js";
 import { globalAK } from "@goauthentik/common/global.js";
-import { SentryMiddleware } from "@goauthentik/common/sentry";
+import { SentryMiddleware } from "@goauthentik/common/sentry/middleware";
 
 import { Config, Configuration, CoreApi, CurrentBrand, RootApi } from "@goauthentik/api";
 

web/src/common/sentry/index.ts

@@ -10,16 +10,9 @@ import {
     setTag,
     setUser,
 } from "@sentry/browser";
-import { getTraceData } from "@sentry/core";
 import * as Spotlight from "@spotlightjs/spotlight";
 
-import {
+import { CapabilitiesEnum, ResponseError } from "@goauthentik/api";
-    CapabilitiesEnum,
-    FetchParams,
-    Middleware,
-    RequestContext,
-    ResponseError,
-} from "@goauthentik/api";
 
 /**
  * A generic error that can be thrown without triggering Sentry's reporting.
@@ -29,8 +22,6 @@ export class SentryIgnoredError extends Error {}
 export const TAG_SENTRY_COMPONENT = "authentik.component";
 export const TAG_SENTRY_CAPABILITIES = "authentik.capabilities";
 
-let _sentryConfigured = false;
-
 export function configureSentry(canDoPpi = false) {
     const cfg = globalAK().config;
     const debug = cfg.capabilities.includes(CapabilitiesEnum.CanDebug);
@@ -104,19 +95,4 @@ export function configureSentry(canDoPpi = false) {
     } else {
         console.debug("authentik/config: Sentry enabled.");
     }
-    _sentryConfigured = true;
-}
-
-export class SentryMiddleware implements Middleware {
-    pre?(context: RequestContext): Promise<FetchParams | void> {
-        if (!_sentryConfigured) {
-            return Promise.resolve(context);
-        }
-        const traceData = getTraceData();
-        // @ts-ignore
-        context.init.headers["baggage"] = traceData["baggage"];
-        // @ts-ignore
-        context.init.headers["sentry-trace"] = traceData["sentry-trace"];
-        return Promise.resolve(context);
-    }
 }

web/src/common/sentry/middleware.ts

@@ -0,0 +1,17 @@
+import { getCurrentScope, getTraceData } from "@sentry/core";
+
+import { FetchParams, Middleware, RequestContext } from "@goauthentik/api";
+
+export class SentryMiddleware implements Middleware {
+    pre?(context: RequestContext): Promise<FetchParams | void> {
+        if (getCurrentScope().getClient === undefined) {
+            return Promise.resolve(context);
+        }
+        const traceData = getTraceData();
+        // @ts-ignore
+        context.init.headers["baggage"] = traceData["baggage"];
+        // @ts-ignore
+        context.init.headers["sentry-trace"] = traceData["sentry-trace"];
+        return Promise.resolve(context);
+    }
+}

web/src/common/theme.ts

@@ -5,11 +5,11 @@ import {
     type StyleRoot,
     createStyleSheetUnsafe,
     setAdoptedStyleSheets,
-} from "@goauthentik/common/stylesheets.js";
+} from "@goauthentik/web/common/stylesheets.js";
-import { UIConfig } from "@goauthentik/common/ui/config.js";
+import { UIConfig } from "@goauthentik/web/common/ui/config.js";
 
-import AKBase from "@goauthentik/common/styles/authentik.css";
+import AKBase from "@goauthentik/web/common/styles/authentik.css";
-import AKBaseDark from "@goauthentik/common/styles/theme-dark.css";
+import AKBaseDark from "@goauthentik/web/common/styles/theme-dark.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { Config, CurrentBrand, UiThemeEnum } from "@goauthentik/api";