[Information Architecture] - Routing tweaks (#5466)

novuhq · May 2, 2024 · f88caaf · f88caaf
1 parent 9fe71a3
commit f88caaf
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 68 deletions.
diff --git a/apps/web/src/SettingsRoutes.tsx b/apps/web/src/SettingsRoutes.tsx
@@ -21,66 +21,86 @@ import { WebhookPage } from './pages/settings/WebhookPage';
 export const useSettingsRoutes = () => {
   const isInformationArchitectureEnabled = useFeatureFlag(FeatureFlagsKeysEnum.IS_INFORMATION_ARCHITECTURE_ENABLED);
 
-  return isInformationArchitectureEnabled ? (
+  return (
     <>
-      <Route path={ROUTES.SETTINGS} element={<SettingsPage />}>
-        <Route path={ROUTES.API_KEYS} element={<ApiKeysPage />} />
-        <Route path={ROUTES.PROFILE} element={<UserProfilePage />} />
-        <Route path={ROUTES.BRAND_SETTINGS} element={<BrandingPage />} />
-        {/* TODO: replace with actual component */}
-        <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 />} />
-        {/* Default settings route in case we didn't match with the existing */}
-        <Route path={`${ROUTES.SETTINGS}/*`} element={<Navigate to={ROUTES.PROFILE} replace />} />
-        <Route path={`${ROUTES.SETTINGS}`} element={<Navigate to={ROUTES.PROFILE} replace />} />
+      <Route path={ROUTES.SETTINGS} element={isInformationArchitectureEnabled ? <SettingsPage /> : <SettingsPageOld />}>
+        <Route
+          path=""
+          element={isInformationArchitectureEnabled ? <Navigate to={ROUTES.PROFILE} replace /> : <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 />
+            )
+          }
+        />
+        <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 />
+            )
+          }
+        />
+        <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 />
+            )
+          }
+        />
+        {/* 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.SETTINGS}/*`} element={<Navigate to={ROUTES.SETTINGS} replace />} />
       </Route>
     </>
-  ) : (
-    <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 />} />
-      <Route
-        path="permissions"
-        element={
-          <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={
-          <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={
-          <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}
-          />
-        }
-      />
-    </Route>
   );
 };
diff --git a/apps/web/src/components/layout/components/v2/HeaderNav.tsx b/apps/web/src/components/layout/components/v2/HeaderNav.tsx
@@ -24,7 +24,7 @@ export function HeaderNav() {
       className={css({
         position: 'sticky',
         top: 0,
-        borderBottom: 'none',
+        borderBottom: 'none !important',
         // TODO: fix when we re-do z-index across the app
         zIndex: 199,
         padding: '50',

diff --git a/apps/web/src/pages/brand/tabs/BrandingForm.tsx b/apps/web/src/pages/brand/tabs/BrandingForm.tsx
@@ -4,22 +4,20 @@ import { useMutation } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { useOutletContext } from 'react-router-dom';
-import { IResponseError, IOrganizationEntity, UploadTypesEnum, MIME_TYPE_TO_FILE_EXTENSION } from '@novu/shared';
+import { IResponseError, UploadTypesEnum, MIME_TYPE_TO_FILE_EXTENSION } from '@novu/shared';
 import { Button, ColorInput, colors, Select, inputStyles, Upload, Trash, errorMessage } from '@novu/design-system';
 
 import { updateBrandingSettings } from '../../../api/organization';
 import Card from '../../../components/layout/components/Card';
 import { successMessage } from '../../../utils/notifications';
 import { useUploadToStorage } from '../../../api/hooks/useUploadToStorage';
+import { useAuthContext } from '@novu/shared-web';
 
 /**
  * @deprecated Use `BrandingForm` from the v2 folder instead
  */
 export function BrandingForm() {
-  const { currentOrganization: organization } = useOutletContext<{
-    currentOrganization: IOrganizationEntity | undefined;
-  }>();
+  const { currentOrganization: organization } = useAuthContext();
   const { uploadToStorage } = useUploadToStorage({
     onSuccess: (path) => {
       setValue('image', path);

diff --git a/libs/design-system/src/cards/CardTile.tsx b/libs/design-system/src/cards/CardTile.tsx
@@ -1,7 +1,11 @@
 import styled from '@emotion/styled';
+import { useMantineTheme } from '@mantine/core';
 import { colors, shadows } from '../config';
 
-export const CardTile = styled.button`
+export const CardTile = styled.button(() => {
+  const theme = useMantineTheme();
+
+  return `
   outline: none;
   border: none;
   cursor: pointer;
@@ -15,7 +19,7 @@ export const CardTile = styled.button`
   height: 100px;
   border-radius: 8px;
   color: ${colors.B60};
-  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B20 : colors.B98)};
+  background: ${theme.colorScheme === 'dark' ? colors.B20 : colors.B98};
   box-shadow: ${shadows.dark};
   font-size: 14px;
   transition: all 0.25s ease;
@@ -29,8 +33,8 @@ export const CardTile = styled.button`
   }
 
   &:not(:disabled)&:hover {
-    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B60)};
-    background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B30 : colors.BGLight)};
+    color: ${theme.colorScheme === 'dark' ? colors.white : colors.B60};
+    background: ${theme.colorScheme === 'dark' ? colors.B30 : colors.BGLight};
   }
 
   &[data-can-be-hidden='true'] {
@@ -55,3 +59,4 @@ export const CardTile = styled.button`
     }
   }
 `;
+});