Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(web): Single theme entry point & ensure Mantine singletons #5624

Merged
merged 4 commits into from
May 22, 2024
Merged

refactor(web): Single theme entry point & ensure Mantine singletons #5624

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d8b1ec5
refactor(web): Single theming entry point and pin @types/react to ens…
rifont May 22, 2024
4678b80
refactor(theme): remove redundant color scheme code
rifont May 22, 2024
bb8066a
refactor(routes): rename layout components for clarity
rifont May 22, 2024
6818d9d
refactor(auth): simplify conditional rendering in pages
rifont May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 25 additions & 22 deletions apps/web/src/AppRoutes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { FeatureFlagsKeysEnum } from '@novu/shared';
import { Route, Routes } from 'react-router-dom';
import { AppLayout } from './components/layout/AppLayout';
import AuthLayout from './components/layout/components/AuthLayout';
import { EnsureOnboardingComplete } from './components/layout/EnsureOnboardingComplete';
import { ROUTES } from './constants/routes.enum';
import { useFeatureFlag } from './hooks';
Expand Down Expand Up @@ -53,28 +54,30 @@ export const AppRoutes = () => {

return (
<Routes>
<Route path={ROUTES.AUTH_SIGNUP} element={<SignUpPage />} />
<Route path={ROUTES.AUTH_LOGIN} element={<LoginPage />} />
<Route path={ROUTES.AUTH_RESET_REQUEST} element={<PasswordResetPage />} />
<Route path={ROUTES.AUTH_RESET_TOKEN} element={<PasswordResetPage />} />
<Route path={ROUTES.AUTH_INVITATION_TOKEN} element={<InvitationPage />} />
<Route path={ROUTES.AUTH_APPLICATION} element={<QuestionnairePage />} />
<Route
path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS}
element={
<EnsureOnboardingComplete>
<LinkVercelProjectPage type="create" />
</EnsureOnboardingComplete>
}
/>
<Route
path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS_EDIT}
element={
<EnsureOnboardingComplete>
<LinkVercelProjectPage type="edit" />
</EnsureOnboardingComplete>
}
/>
<Route element={<AuthLayout />}>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrap all of these paths with AuthLayout with an <Outlet/> added to AuthLayout to render children. We now remove AuthLayout being duplicated in each of these child routes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about we call the AuthLayout, PublicPageLayout to make it more clear as Auth layout doesn't tell us if this is for authenticated or unauthenticated context.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great suggestion. I'll change this.

<Route path={ROUTES.AUTH_SIGNUP} element={<SignUpPage />} />
<Route path={ROUTES.AUTH_LOGIN} element={<LoginPage />} />
<Route path={ROUTES.AUTH_RESET_REQUEST} element={<PasswordResetPage />} />
<Route path={ROUTES.AUTH_RESET_TOKEN} element={<PasswordResetPage />} />
<Route path={ROUTES.AUTH_INVITATION_TOKEN} element={<InvitationPage />} />
<Route path={ROUTES.AUTH_APPLICATION} element={<QuestionnairePage />} />
<Route
path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS}
element={
<EnsureOnboardingComplete>
<LinkVercelProjectPage type="create" />
</EnsureOnboardingComplete>
}
/>
<Route
path={ROUTES.PARTNER_INTEGRATIONS_VERCEL_LINK_PROJECTS_EDIT}
element={
<EnsureOnboardingComplete>
<LinkVercelProjectPage type="edit" />
</EnsureOnboardingComplete>
}
/>
</Route>
<Route element={<AppLayout />}>
<Route path={ROUTES.WORKFLOWS_DIGEST_PLAYGROUND} element={<TemplatesDigestPlaygroundPage />} />
<Route path={ROUTES.WORKFLOWS_CREATE} element={<TemplateEditorPage />} />
Expand Down
9 changes: 3 additions & 6 deletions apps/web/src/Providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ColorSchemeProvider, Loader } from '@mantine/core';
import { colors } from '@novu/design-system';
import { colors, ThemeProvider } from '@novu/design-system';
import { CONTEXT_PATH, SegmentProvider } from '@novu/shared-web';
import * as Sentry from '@sentry/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
Expand Down Expand Up @@ -34,9 +34,6 @@ const fallbackDisplay = (
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} />
Expand All @@ -48,7 +45,7 @@ const fallbackDisplay = (
*/
const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
return (
<ColorSchemeProvider colorScheme={'dark'} toggleColorScheme={() => {}}>
<ThemeProvider>
<SegmentProvider>
<QueryClientProvider client={queryClient}>
<BrowserRouter basename={CONTEXT_PATH}>
Expand All @@ -60,7 +57,7 @@ const Providers: React.FC<PropsWithChildren<{}>> = ({ children }) => {
</BrowserRouter>
</QueryClientProvider>
</SegmentProvider>
</ColorSchemeProvider>
</ThemeProvider>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ThemeProvider now lives at the top of the tree.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

);
};

Expand Down
75 changes: 36 additions & 39 deletions apps/web/src/components/layout/AppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import * as Sentry from '@sentry/react';
import { Outlet } from 'react-router-dom';
import styled from '@emotion/styled';

import { ThemeProvider } from '@novu/design-system';
import { HeaderNav } from './components/HeaderNav';
import { SideNav } from './components/SideNav';
import { IntercomProvider } from 'react-use-intercom';
Expand Down Expand Up @@ -39,45 +38,43 @@ export function AppLayout() {
return (
<EnsureOnboardingComplete>
<SpotLightProvider>
<ThemeProvider>
<IntercomProvider
appId={INTERCOM_APP_ID}
onShow={() => setIsIntercomOpened(true)}
onHide={() => setIsIntercomOpened(false)}
<IntercomProvider
appId={INTERCOM_APP_ID}
onShow={() => setIsIntercomOpened(true)}
onHide={() => setIsIntercomOpened(false)}
>
<Sentry.ErrorBoundary
fallback={({ error, resetError, eventId }) => (
<>
Sorry, but something went wrong. <br />
Our team has been notified and we are investigating.
<br />
<code>
<small style={{ color: 'lightGrey' }}>
Event Id: {eventId}.
<br />
{error.toString()}
</small>
</code>
</>
)}
>
<Sentry.ErrorBoundary
fallback={({ error, resetError, eventId }) => (
<>
Sorry, but something went wrong. <br />
Our team has been notified and we are investigating.
<br />
<code>
<small style={{ color: 'lightGrey' }}>
Event Id: {eventId}.
<br />
{error.toString()}
</small>
</code>
</>
)}
>
<SpotLight>
<AppShell>
{isInformationArchitectureEnabled ? <MainNav /> : <SideNav />}
<ContentShell>
<FreeTrialBanner />
{isInformationArchitectureEnabled ? (
<HeaderNavNew />
) : (
<HeaderNav isIntercomOpened={isIntercomOpened} />
)}
<Outlet />
</ContentShell>
</AppShell>
</SpotLight>
</Sentry.ErrorBoundary>
</IntercomProvider>
</ThemeProvider>
<SpotLight>
<AppShell>
{isInformationArchitectureEnabled ? <MainNav /> : <SideNav />}
<ContentShell>
<FreeTrialBanner />
{isInformationArchitectureEnabled ? (
<HeaderNavNew />
) : (
<HeaderNav isIntercomOpened={isIntercomOpened} />
)}
<Outlet />
</ContentShell>
</AppShell>
</SpotLight>
</Sentry.ErrorBoundary>
</IntercomProvider>
</SpotLightProvider>
</EnsureOnboardingComplete>
);
Expand Down
75 changes: 36 additions & 39 deletions apps/web/src/components/layout/components/AuthLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,49 @@
import React from 'react';
import { createStyles, Box } from '@mantine/core';
import { ThemeProvider } from '@novu/design-system';
import { CONTEXT_PATH } from '../../../config';
import { Outlet } from 'react-router-dom';

export default function AuthLayout({ children }: { children?: React.ReactNode }) {
export default function AuthLayout() {
const { classes } = useStyles();

return (
<ThemeProvider>
<div className={classes.wrapper}>
<div className={classes.bg}>
<div className={classes.wrapper}>
<div className={classes.bg}>
<img
src={CONTEXT_PATH + '/static/images/logo-formerly-dark-bg.png'}
alt="logo"
style={{ alignSelf: 'flex-start', maxWidth: 150, marginTop: 5, marginLeft: 5 }}
/>
<Box
sx={{
position: 'absolute',
right: '50%',
display: 'flex',
flexDirection: 'column',
transform: 'translate(35%, 7%)',
'@media (max-width: 1200px)': {
display: 'none',
},
}}
>
<img
src={CONTEXT_PATH + '/static/images/logo-formerly-dark-bg.png'}
src={CONTEXT_PATH + '/static/images/notifications/notification_01.png'}
alt="logo"
style={{ alignSelf: 'flex-start', maxWidth: 150, marginTop: 5, marginLeft: 5 }}
style={{ maxWidth: 400 }}
/>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bad diff, there's no changes here.

<Box
sx={{
position: 'absolute',
right: '50%',
display: 'flex',
flexDirection: 'column',
transform: 'translate(35%, 7%)',
'@media (max-width: 1200px)': {
display: 'none',
},
}}
>
<img
src={CONTEXT_PATH + '/static/images/notifications/notification_01.png'}
alt="logo"
style={{ maxWidth: 400 }}
/>
<img
src={CONTEXT_PATH + '/static/images/notifications/notification_02.png'}
alt="logo"
style={{ marginTop: -15, marginLeft: 30, maxWidth: 400 }}
/>
<img
src={CONTEXT_PATH + '/static/images/notifications/notification_03.png'}
alt="logo"
style={{ marginTop: -15, maxWidth: 400 }}
/>
</Box>{' '}
</div>
{children}
<img
src={CONTEXT_PATH + '/static/images/notifications/notification_02.png'}
alt="logo"
style={{ marginTop: -15, marginLeft: 30, maxWidth: 400 }}
/>
<img
src={CONTEXT_PATH + '/static/images/notifications/notification_03.png'}
alt="logo"
style={{ marginTop: -15, maxWidth: 400 }}
/>
</Box>{' '}
</div>
</ThemeProvider>
<Outlet />
</div>
);
}

Expand Down
5 changes: 2 additions & 3 deletions apps/web/src/pages/auth/InvitationPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { Center, LoadingOverlay } from '@mantine/core';
import { IGetInviteResponseDto } from '@novu/shared';

import { getInviteTokenData } from '../../api/invitation';
import AuthLayout from '../../components/layout/components/AuthLayout';
import AuthContainer from '../../components/layout/components/AuthContainer';
import { SignUpForm } from './components/SignUpForm';
import { colors, Text, Button } from '@novu/design-system';
Expand Down Expand Up @@ -56,7 +55,7 @@ export default function InvitationPage() {
}, [queryClient]);

return (
<AuthLayout>
<>
rifont marked this conversation as resolved.
Show resolved Hide resolved
{isLoggedIn && (
<AuthContainer
title="Active Session!"
Expand Down Expand Up @@ -124,6 +123,6 @@ export default function InvitationPage() {
)}
</AuthContainer>
)}
</AuthLayout>
</>
);
}
20 changes: 6 additions & 14 deletions apps/web/src/pages/auth/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useNavigate, useSearchParams } from 'react-router-dom';

import { useAuthContext } from '../../components/providers/AuthProvider';
import { LoginForm } from './components/LoginForm';
import AuthLayout from '../../components/layout/components/AuthLayout';
import AuthContainer from '../../components/layout/components/AuthContainer';
import { useVercelIntegration, useBlueprint, useVercelParams } from '../../hooks';
import SetupLoader from './components/SetupLoader';
Expand Down Expand Up @@ -69,18 +68,11 @@ export default function LoginPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);

return (
<AuthLayout>
{isLoading || isLoadingAcceptInvite ? (
<SetupLoader title="Loading..." />
) : (
<AuthContainer
title="Sign In"
description="Welcome back! Sign in with the data you entered in your registration"
>
<LoginForm />
</AuthContainer>
)}
</AuthLayout>
return isLoading || isLoadingAcceptInvite ? (
<SetupLoader title="Loading..." />
) : (
<AuthContainer title="Sign In" description="Welcome back! Sign in with the data you entered in your registration">
<LoginForm />
</AuthContainer>
);
}
8 changes: 3 additions & 5 deletions apps/web/src/pages/auth/PasswordResetPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Link, useParams, useNavigate } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { Center } from '@mantine/core';
import AuthLayout from '../../components/layout/components/AuthLayout';
import AuthContainer from '../../components/layout/components/AuthContainer';
import { PasswordResetRequestForm } from './components/PasswordResetRequestForm';
import { PasswordResetForm } from './components/PasswordResetForm';
Expand All @@ -24,7 +22,7 @@ export function PasswordResetPage({}: Props) {
}

return (
<AuthLayout>
<>
{!showSentSuccess && (
rifont marked this conversation as resolved.
Show resolved Hide resolved
<AuthContainer title="Reset Password" description="">
{!token && <PasswordResetRequestForm onSent={onSent} />}
Expand All @@ -41,6 +39,6 @@ export function PasswordResetPage({}: Props) {
</Button>
</AuthContainer>
)}
</AuthLayout>
</>
);
}
Loading
Loading