[NV-3735]: Improve launch darkly

apps/web/src/AppRoutes.tsx

@@ -49,6 +49,7 @@ import { useSettingsRoutes } from './SettingsRoutes';
 
 export const AppRoutes = () => {
   const isImprovedOnboardingEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_IMPROVED_ONBOARDING_ENABLED);
+  const isInformationArchitectureEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_INFORMATION_ARCHITECTURE_ENABLED);
 
   return (
     <Routes>
@@ -116,13 +117,16 @@ export const AppRoutes = () => {
         <Route path={ROUTES.TEAM} element={<MembersInvitePage />} />
         <Route path={ROUTES.CHANGES} element={<PromoteChangesPage />} />
         <Route path={ROUTES.SUBSCRIBERS} element={<SubscribersList />} />
-        <Route path={ROUTES.BRAND} element={<BrandPage />}>
-          <Route path="" element={<BrandingForm />} />
-          <Route path="layouts" element={<LayoutsListPage />} />
-        </Route>
-        <Route path={ROUTES.LAYOUT} element={<LayoutsPage />}>
-          <Route path="" element={<LayoutsListPage />} />
-        </Route>
+        {!isInformationArchitectureEnabled ? (
+          <Route path={ROUTES.BRAND} element={<BrandPage />}>
+            <Route path="" element={<BrandingForm />} />
+            <Route path="layouts" element={<LayoutsListPage />} />
+          </Route>
+        ) : (
+          <Route path={ROUTES.LAYOUT} element={<LayoutsPage />}>
+            <Route path="" element={<LayoutsListPage />} />
+          </Route>
+        )}
         <Route path="/translations/*" element={<TranslationRoutes />} />
       </Route>
     </Routes>

apps/web/src/Providers.tsx

@@ -1,12 +1,14 @@
-import { CONTEXT_PATH, LAUNCH_DARKLY_CLIENT_SIDE_ID, SegmentProvider } from '@novu/shared-web';
+import { Loader } from '@mantine/core';
+import { colors } from '@novu/design-system';
+import { CONTEXT_PATH, LaunchDarklyProvider, SegmentProvider } from '@novu/shared-web';
 import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { withLDProvider } from 'launchdarkly-react-client-sdk';
 import { PropsWithChildren } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 import { api } from './api/api.client';
 import { AuthProvider } from './components/providers/AuthProvider';
+import { css } from './styled-system/css';
 
 const defaultQueryFn = async ({ queryKey }: { queryKey: string }) => {
   const response = await api.get(`${queryKey[0]}`);
@@ -22,28 +24,41 @@ const queryClient = new QueryClient({
   },
 });
 
+/** Full-page loader that uses color-preferences for background */
+const fallbackDisplay = (
+  <div
+    className={css({
+      h: '100dvh',
+      w: '100dvw',
+      display: 'grid',
+      placeItems: 'center',
+      bg: 'surface.page',
+      // Root element may not have loaded so rely on OS
+      _osDark: { bg: 'legacy.BGDark' },
+      _osLight: { bg: 'legacy.BGLight' },
+    })}
+  >
+    <Loader size={64} variant="bars" color={colors.gradientMiddle} />
+  </div>
+);
+
 /**
  * Centralized Provider hierarchy.
  */
 const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   return (
     <SegmentProvider>
-      <HelmetProvider>
-        <BrowserRouter basename={CONTEXT_PATH}>
-          <QueryClientProvider client={queryClient}>
-            <AuthProvider>{children}</AuthProvider>
-          </QueryClientProvider>
-        </BrowserRouter>
-      </HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <LaunchDarklyProvider fallbackDisplay={fallbackDisplay}>
+            <HelmetProvider>
+              <BrowserRouter basename={CONTEXT_PATH}>{children}</BrowserRouter>
+            </HelmetProvider>
+          </LaunchDarklyProvider>
+        </AuthProvider>
+      </QueryClientProvider>
     </SegmentProvider>
   );
 };
 
-export default Sentry.withProfiler(
-  withLDProvider({
-    clientSideID: LAUNCH_DARKLY_CLIENT_SIDE_ID,
-    reactOptions: {
-      useCamelCaseFlagKeys: false,
-    },
-  })(Providers)
-);
+export default Sentry.withProfiler(Providers);

apps/web/src/SettingsRoutes.tsx

@@ -6,7 +6,6 @@ import { ProductLead } from './components/utils/ProductLead';
 import { ROUTES } from './constants/routes.enum';
 import { useFeatureFlag } from './hooks';
 import { BillingRoutes } from './pages/BillingPages';
-import { BrandingForm as BrandingFormOld } from './pages/brand/tabs';
 import { BrandingPage } from './pages/brand/tabs/v2';
 import { MembersInvitePage as MembersInvitePageNew } from './pages/invites/v2/MembersInvitePage';
 import { AccessSecurityPage, ApiKeysPage, BillingPage, TeamPage, UserProfilePage } from './pages/settings';
@@ -50,7 +49,6 @@ export const useSettingsRoutes = () => {
         <Route path="billing/*" element={<BillingRoutes />} />
         <Route path="email" element={<EmailSettings />} />
         <Route path="team" element={<MembersInvitePageNew />} />
-        <Route path="brand" element={<BrandingFormOld />} />
         <Route
           path="permissions"
           element={

libs/shared-web/src/hooks/useAuthController.ts

@@ -1,7 +1,6 @@
 import { useEffect, useCallback, useState } from 'react';
 import axios from 'axios';
 import jwtDecode from 'jwt-decode';
-import { useNavigate } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import * as Sentry from '@sentry/react';
 import type { IJwtPayload, IOrganizationEntity, IUserEntity } from '@novu/shared';
@@ -41,7 +40,6 @@ export function getToken(): string {
 export function useAuthController() {
   const segment = useSegment();
   const queryClient = useQueryClient();
-  const navigate = useNavigate();
   const [token, setToken] = useState<string | null>(() => {
     const initialToken = getToken();
     applyToken(initialToken);
@@ -122,7 +120,8 @@ export function useAuthController() {
   const logout = () => {
     setTokenCallback(null);
     queryClient.clear();
-    navigate('/auth/login');
+    // avoid usage of react-router here to prevent needing AuthProvider to be wrapped in the BrowserRouter
+    window.location.assign('/auth/login');
     segment.reset();
   };
 

libs/shared-web/src/hooks/useFeatureFlags.ts

@@ -1,19 +1,19 @@
 import { FeatureFlagsKeysEnum, IOrganizationEntity, prepareBooleanStringFeatureFlag } from '@novu/shared';
-import { useFlags } from 'launchdarkly-react-client-sdk';
-import { useLDClient } from 'launchdarkly-react-client-sdk';
+import { useFlags, useLDClient } from 'launchdarkly-react-client-sdk';
 import { useEffect } from 'react';
+import { checkShouldUseLaunchDarkly } from '../utils';
 
 import { FEATURE_FLAGS } from '../config';
 
-export const useFeatureFlags = (organization: IOrganizationEntity) => {
+export const useFeatureFlags = (organization?: IOrganizationEntity) => {
   const ldClient = useLDClient();
 
   useEffect(() => {
-    if (!organization?._id) {
+    if (!checkShouldUseLaunchDarkly() || !organization?._id || !ldClient) {
       return;
     }
 
-    ldClient?.identify({
+    ldClient.identify({
       kind: 'organization',
       key: organization._id,
       name: organization.name,
@@ -24,10 +24,12 @@ export const useFeatureFlags = (organization: IOrganizationEntity) => {
 };
 
 export const useFeatureFlag = (key: FeatureFlagsKeysEnum): boolean => {
-  const { [key]: featureFlag } = useFlags();
+  /** We knowingly break the rule of hooks here to avoid making any LaunchDarkly calls when it is disabled */
+  // eslint-disable-next-line
+  const flagValue = checkShouldUseLaunchDarkly() ? useFlags()[key] : undefined;
   const fallbackValue = false;
   const value = FEATURE_FLAGS[key];
   const defaultValue = prepareBooleanStringFeatureFlag(value, fallbackValue);
 
-  return featureFlag ?? defaultValue;
+  return flagValue ?? defaultValue;
 };

libs/shared-web/src/index.ts

@@ -5,3 +5,4 @@ export * from './hooks';
 export * from './providers';
 export * from './constants';
 export * from './components';
+export * from './utils';

libs/shared-web/src/providers/AuthProvider.tsx

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import { IOrganizationEntity, IUserEntity, IJwtPayload } from '@novu/shared';
-import { useAuthController, useFeatureFlags } from '../hooks';
+import { useAuthController } from '../hooks';
 
-type UserContext = {
+export type UserContext = {
   token: string | null;
+  isLoggedIn: boolean;
   currentUser: IUserEntity | undefined;
   isUserLoading: boolean;
   currentOrganization: IOrganizationEntity | undefined;
@@ -15,6 +16,7 @@ type UserContext = {
 
 const AuthContext = React.createContext<UserContext>({
   token: null,
+  isLoggedIn: false,
   currentUser: undefined,
   isUserLoading: true,
   setToken: undefined as any,
@@ -27,13 +29,14 @@ const AuthContext = React.createContext<UserContext>({
 export const useAuthContext = (): UserContext => useContext(AuthContext);
 
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const { token, setToken, user, organization, isUserLoading, logout, jwtPayload, organizations } = useAuthController();
-  useFeatureFlags(organization);
+  const { token, setToken, user, organization, isUserLoading, logout, jwtPayload, organizations, isLoggedIn } =
+    useAuthController();
 
   return (
     <AuthContext.Provider
       value={{
         currentUser: user,
+        isLoggedIn,
         isUserLoading,
         currentOrganization: organization,
         organizations,

libs/shared-web/src/providers/LaunchDarklyProvider.tsx

@@ -0,0 +1,100 @@
+import { IOrganizationEntity } from '@novu/shared';
+import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
+import { PropsWithChildren, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { LAUNCH_DARKLY_CLIENT_SIDE_ID } from '../config';
+import { useFeatureFlags } from '../hooks';
+import { useAuthContext } from './AuthProvider';
+import { selectShouldShowLaunchDarklyFallback, selectShouldInitializeLaunchDarkly } from '../utils/auth-selectors';
+
+/** A provider with children required */
+type GenericLDProvider = Awaited<ReturnType<typeof asyncWithLDProvider>>;
+
+/** Simply renders the children */
+const DEFAULT_GENERIC_PROVIDER: GenericLDProvider = ({ children }) => <>{children}</>;
+
+export interface ILaunchDarklyProviderProps {
+  /** Renders when LaunchDarkly is enabled and is awaiting initialization */
+  fallbackDisplay: ReactNode;
+}
+
+/**
+ * Async provider for feature flags.
+ *
+ * @requires AuthProvider must be wrapped in the AuthProvider.
+ */
+export const LaunchDarklyProvider: React.FC<PropsWithChildren<ILaunchDarklyProviderProps>> = ({
+  children,
+  fallbackDisplay,
+}) => {
+  const LDProvider = useRef<GenericLDProvider>(DEFAULT_GENERIC_PROVIDER);
+  const [isLDReady, setIsLDReady] = useState<boolean>(false);
+
+  const authContext = useAuthContext();
+  if (!authContext) {
+    throw new Error('LaunchDarklyProvider must be used within <AuthProvider>!');
+  }
+  const { currentOrganization } = authContext;
+
+  const shouldInitializeLd = useMemo(() => selectShouldInitializeLaunchDarkly(authContext), [authContext]);
+
+  useEffect(() => {
+    if (!shouldInitializeLd) {
+      return;
+    }
+
+    const fetchLDProvider = async () => {
+      try {
+        LDProvider.current = await asyncWithLDProvider({
+          clientSideID: LAUNCH_DARKLY_CLIENT_SIDE_ID,
+          reactOptions: {
+            useCamelCaseFlagKeys: false,
+          },
+          // determine which context to use based on if an organization is available
+          context: currentOrganization
+            ? {
+                kind: 'organization',
+                key: currentOrganization._id,
+                name: currentOrganization.name,
+              }
+            : {
+                /**
+                 * When user is not authenticated, assigns an id to them to ensure consistent results.
+                 * https://docs.launchdarkly.com/sdk/features/anonymous#javascript
+                 */
+                kind: 'user',
+                anonymous: true,
+              },
+        });
+      } catch (err: unknown) {
+        // FIXME: what should we do here since we don't have logging?
+      } finally {
+        setIsLDReady(true);
+      }
+    };
+
+    fetchLDProvider();
+  }, [setIsLDReady, shouldInitializeLd, currentOrganization]);
+
+  /**
+   * For self-hosted, LD will not be enabled, so do not block initialization.
+   * Must not show the fallback if the user isn't logged-in to avoid issues with un-authenticated routes (i.e. login).
+   */
+  if (selectShouldShowLaunchDarklyFallback(authContext, isLDReady)) {
+    return <>{fallbackDisplay}</>;
+  }
+
+  return (
+    <LDProvider.current>
+      <LaunchDarklyClientWrapper org={currentOrganization}>{children}</LaunchDarklyClientWrapper>
+    </LDProvider.current>
+  );
+};
+
+/**
+ * Refreshes feature flags on org change using the LaunchDarkly client from the provider.
+ */
+function LaunchDarklyClientWrapper({ children, org }: PropsWithChildren<{ org?: IOrganizationEntity }>) {
+  useFeatureFlags(org);
+
+  return <>{children}</>;
+}

libs/shared-web/src/providers/index.ts

@@ -1,2 +1,3 @@
 export * from './SegmentProvider';
 export * from './AuthProvider';
+export * from './LaunchDarklyProvider';

libs/shared-web/src/utils/auth-selectors/index.ts

@@ -0,0 +1,3 @@
+export * from './selectHasUserCompletedSignUp';
+export * from './selectShouldShowLaunchDarklyFallback';
+export * from './selectShouldInitializeLaunchDarkly';

libs/shared-web/src/utils/auth-selectors/selectHasUserCompletedSignUp.ts

@@ -0,0 +1,13 @@
+import { UserContext } from '../../providers';
+
+/**
+ * Determine if a user is fully-registered; if not, they're still in onboarding.
+ */
+export const selectHasUserCompletedSignUp = (userCtx: UserContext): boolean => {
+  if (!userCtx) {
+    return false;
+  }
+
+  // User has completed registration if they have an associated orgId.
+  return !!userCtx.jwtPayload?.organizationId;
+};

libs/shared-web/src/utils/auth-selectors/selectShouldInitializeLaunchDarkly.tsx

@@ -0,0 +1,25 @@
+import { selectHasUserCompletedSignUp } from './selectHasUserCompletedSignUp';
+import { checkShouldUseLaunchDarkly } from '../checkShouldUseLaunchDarkly';
+import { UserContext } from '../../providers/AuthProvider';
+
+/** Determine if LaunchDarkly should be initialized based on the current auth context */
+export function selectShouldInitializeLaunchDarkly(userCtx: UserContext): boolean {
+  const { isLoggedIn, currentOrganization } = userCtx;
+  // don't show fallback if LaunchDarkly isn't enabled
+  if (!checkShouldUseLaunchDarkly()) {
+    return false;
+  }
+
+  // enable feature flags for unauthenticated areas of the app
+  if (!isLoggedIn) {
+    return true;
+  }
+
+  // allow LD to load when the user is created but still in onboarding
+  if (!selectHasUserCompletedSignUp(userCtx)) {
+    return true;
+  }
+
+  // if a user is fully on-boarded, but no organization has loaded, we must wait for the organization to initialize the client.
+  return !!currentOrganization;
+}