[Information Architecture] Refactor to Fix Brand Tests

apps/api/src/app/auth/usecases/password-reset-request/password-reset-request.usecase.ts

@@ -60,7 +60,7 @@ export class PasswordResetRequest {
   private static getResetRedirectLink(token: string, user: UserEntity, src?: PasswordResetFlowEnum): string {
     // ensure that only users without passwords are allowed to reset
     if (src === PasswordResetFlowEnum.USER_PROFILE && !user.password) {
-      return `${process.env.FRONT_BASE_URL}/settings/profile?token=${token}`;
+      return `${process.env.FRONT_BASE_URL}/settings/profile?token=${token}&view=password`;
     }
 
     /**

apps/web/src/SettingsRoutes.tsx

@@ -21,84 +21,73 @@ import { WebhookPage } from './pages/settings/WebhookPage';
 export const useSettingsRoutes = () => {
   const isInformationArchitectureEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_INFORMATION_ARCHITECTURE_ENABLED);
 
+  if (isInformationArchitectureEnabled) {
+    return (
+      <Route path={ROUTES.SETTINGS} element={<SettingsPage />}>
+        <Route path="" element={<Navigate to={ROUTES.PROFILE} replace />} />
+        <Route path={ROUTES.API_KEYS} element={<ApiKeysPage />} />
+        <Route path={ROUTES.BRAND_SETTINGS} element={<BrandingPage />} />
+        <Route path={ROUTES.ORGANIZATION} element={<OrganizationPage />} />
+        <Route path={ROUTES.TEAM_SETTINGS} element={<TeamPage />} />
+        <Route path={`${ROUTES.BILLING}/*`} element={<BillingPage />} />
+        <Route path={ROUTES.WEBHOOK} element={<WebhookPage />} />
+        <Route path={ROUTES.SECURITY} element={<AccessSecurityPage />} />
+        <Route path={`${ROUTES.SETTINGS}`} element={<Navigate to={ROUTES.PROFILE} replace />} />
+        <Route path="permissions" element={<Navigate to={ROUTES.SECURITY} replace />} />
+        <Route path="sso" element={<Navigate to={ROUTES.SETTINGS} replace />} />
+        <Route path="data-integrations" element={<Navigate to={ROUTES.SETTINGS} replace />} />
+        <Route path={ROUTES.PROFILE} element={<UserProfilePage />} />
+        <Route path={`${ROUTES.SETTINGS}/*`} element={<Navigate to={ROUTES.SETTINGS} replace />} />
+      </Route>
+    );
+  }
+
+  /* TODO: remove all routes above once information architecture is fully enabled */
   return (
     <>
-      <Route path={ROUTES.SETTINGS} element={isInformationArchitectureEnabled ? <SettingsPage /> : <SettingsPageOld />}>
-        <Route
-          path=""
-          element={isInformationArchitectureEnabled ? <Navigate to={ROUTES.PROFILE} replace /> : <ApiKeysCard />}
-        />
+      <Route path={ROUTES.SETTINGS} element={<SettingsPageOld />}>
+        <Route path="" element={<ApiKeysCard />} />
         <Route path="billing/*" element={<BillingRoutes />} />
         <Route path="email" element={<EmailSettings />} />
         <Route path="team" element={<MembersInvitePageNew />} />
         <Route path="brand" element={<BrandingFormOld />} />
-        {/* ensure legacy routes re-route to base settings page */}
         <Route
           path="permissions"
           element={
-            !isInformationArchitectureEnabled ? (
-              <ProductLead
-                icon={<UserAccess />}
-                id="rbac-permissions"
-                title="Role-based access control"
-                text="Securely manage users' permissions to access system resources."
-                closeable={false}
-              />
-            ) : (
-              <Navigate to={ROUTES.SECURITY} replace />
-            )
+            <ProductLead
+              icon={<UserAccess />}
+              id="rbac-permissions"
+              title="Role-based access control"
+              text="Securely manage users' permissions to access system resources."
+              closeable={false}
+            />
           }
         />
         <Route
           path="sso"
           element={
-            !isInformationArchitectureEnabled ? (
-              <ProductLead
-                icon={<SSO />}
-                id="sso-settings"
-                title="Single Sign-On (SSO)"
-                text="Simplify user authentication and enhance security."
-                closeable={false}
-              />
-            ) : (
-              <Navigate to={ROUTES.SETTINGS} replace />
-            )
+            <ProductLead
+              icon={<SSO />}
+              id="sso-settings"
+              title="Single Sign-On (SSO)"
+              text="Simplify user authentication and enhance security."
+              closeable={false}
+            />
           }
         />
         <Route
           path="data-integrations"
           element={
-            !isInformationArchitectureEnabled ? (
-              <ProductLead
-                icon={<Cloud />}
-                id="data-integrations-settings"
-                title="Data Integrations"
-                text="Share data with 3rd party services via Segment and Datadog integrations to monitor analytics."
-                closeable={false}
-              />
-            ) : (
-              <Navigate to={ROUTES.SETTINGS} replace />
-            )
+            <ProductLead
+              icon={<Cloud />}
+              id="data-integrations-settings"
+              title="Data Integrations"
+              text="Share data with 3rd party services via Segment and Datadog integrations to monitor analytics."
+              closeable={false}
+            />
           }
         />
-        {/* TODO: remove all routes above once information architecture is fully enabled */}
-        <Route
-          path={ROUTES.PROFILE}
-          // Note: this is unfortunately necessary for password reset redirects work properly with search params
-          element={isInformationArchitectureEnabled ? <UserProfilePage /> : <Navigate to={ROUTES.SETTINGS} replace />}
-        />
-        {isInformationArchitectureEnabled && (
-          <>
-            <Route path={ROUTES.API_KEYS} element={<ApiKeysPage />} />
-            <Route path={ROUTES.BRAND_SETTINGS} element={<BrandingPage />} />
-            <Route path={ROUTES.ORGANIZATION} element={<OrganizationPage />} />
-            <Route path={ROUTES.TEAM_SETTINGS} element={<TeamPage />} />
-            <Route path={`${ROUTES.BILLING}/*`} element={<BillingPage />} />
-            <Route path={ROUTES.WEBHOOK} element={<WebhookPage />} />
-            <Route path={ROUTES.SECURITY} element={<AccessSecurityPage />} />
-            <Route path={`${ROUTES.SETTINGS}`} element={<Navigate to={ROUTES.PROFILE} replace />} />
-          </>
-        )}
+        <Route path={ROUTES.PROFILE} element={<Navigate to={ROUTES.SETTINGS} replace />} />
         <Route path={`${ROUTES.SETTINGS}/*`} element={<Navigate to={ROUTES.SETTINGS} replace />} />
       </Route>
     </>

apps/web/src/pages/brand/tabs/BrandingForm.cy.tsx

@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { IOrganizationEntity } from '@novu/shared';
 
-import { BrandingForm } from './BrandingForm';
+import { BrandingFormRenderer } from './BrandingForm';
 import { TestWrapper } from '../../../testing';
 import { Outlet, Route, Routes } from 'react-router-dom';
 
@@ -26,7 +26,7 @@ const BrandingFormRoute = ({ organization = undefined }: { organization?: IOrgan
   return (
     <Routes>
       <Route path="/" element={<Outlet context={{ currentOrganization: organization }} />}>
-        <Route index element={<BrandingForm />} />
+        <Route index element={<BrandingFormRenderer organization={organization} />} />
       </Route>
     </Routes>
   );

apps/web/src/pages/brand/tabs/BrandingForm.tsx

@@ -4,7 +4,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { IResponseError, UploadTypesEnum, MIME_TYPE_TO_FILE_EXTENSION } from '@novu/shared';
+import { IResponseError, UploadTypesEnum, MIME_TYPE_TO_FILE_EXTENSION, IOrganizationEntity } from '@novu/shared';
 import { Button, ColorInput, colors, Select, inputStyles, Upload, Trash, errorMessage } from '@novu/design-system';
 
 import { updateBrandingSettings } from '../../../api/organization';
@@ -18,6 +18,14 @@ import { useAuthContext } from '@novu/shared-web';
  */
 export function BrandingForm() {
   const { currentOrganization: organization } = useAuthContext();
+
+  return <BrandingFormRenderer organization={organization} />;
+}
+
+/**
+ * @deprecated Use `BrandingForm` from the v2 folder instead
+ */
+export function BrandingFormRenderer({ organization }: { organization: IOrganizationEntity | undefined }) {
   const { uploadToStorage } = useUploadToStorage({
     onSuccess: (path) => {
       setValue('image', path);