perf(web): Convert image assets to webp & skip flaky tests (#5570)

* perf: Change assets to webp, fix brand redirect

* fix: Update new layout comp with webp

apps/web/cypress/tests/auth.spec.ts

@@ -215,7 +215,8 @@ describe('User Sign-up and Login', function () {
     });
   });
 
-  describe('Logout', function () {
+  // Skipping since we'll be replacing with Playwright soon, and this test is flaky.
+  describe.skip('Logout', function () {
     beforeEach(function () {
       cy.clearDatabase();
       cy.seedDatabase();

apps/web/src/AppRoutes.tsx

@@ -1,8 +1,8 @@
 import { FeatureFlagsKeysEnum } from '@novu/shared';
-import { Route, Routes } from 'react-router-dom';
 import { PrivatePageLayout } from './components/layout/components/AppLayout';
 import { PublicPageLayout } from './components/layout/components/PublicPageLayout';
 import { EnsureOnboardingComplete } from './components/layout/components/EnsureOnboardingComplete';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { ROUTES } from './constants/routes.enum';
 import { useFeatureFlag } from './hooks';
 import { ActivitiesPage } from './pages/activities/ActivitiesPage';
@@ -135,6 +135,10 @@ export const AppRoutes = () => {
             <Route path={ROUTES.WEBHOOK} element={<WebhookPage />} />
           </>
         )}
+        {isInformationArchitectureEnabled && (
+          <Route path={ROUTES.BRAND} element={<Navigate to={ROUTES.BRAND_SETTINGS} replace />} />
+        )}
+
         <Route path="/translations/*" element={<TranslationRoutes />} />
         <Route path={ROUTES.ANY} element={<HomePage />} />
       </Route>

apps/web/src/components/layout/components/HeaderNav.tsx

@@ -116,7 +116,7 @@ export function HeaderNav({ isIntercomOpened }: Props) {
           })}
           radius="xl"
           size={45}
-          src={currentUser?.profilePicture || CONTEXT_PATH + '/static/images/avatar.png'}
+          src={currentUser?.profilePicture || CONTEXT_PATH + '/static/images/avatar.webp'}
         />
         <div style={{ flex: 1 }}>
           <Text data-test-id="header-dropdown-username" rows={1}>
@@ -198,7 +198,7 @@ export function HeaderNav({ isIntercomOpened }: Props) {
                   size={24}
                   radius="xl"
                   data-test-id="header-profile-avatar"
-                  src={currentUser?.profilePicture || CONTEXT_PATH + '/static/images/avatar.png'}
+                  src={currentUser?.profilePicture || CONTEXT_PATH + '/static/images/avatar.webp'}
                 />
               </ActionIcon>
             }

apps/web/src/components/layout/components/PartnerIntegrationLayout.tsx

@@ -5,7 +5,7 @@ export function PartnerIntegrationLayout({ children }: { children: React.ReactNo
   const { colorScheme } = useMantineColorScheme();
 
   const isDark = colorScheme === 'dark';
-  const logoUrl = isDark ? CONTEXT_PATH + '/static/images/logo-light.png' : CONTEXT_PATH + '/static/images/logo.png';
+  const logoUrl = isDark ? CONTEXT_PATH + '/static/images/logo-light.webp' : CONTEXT_PATH + '/static/images/logo.webp';
 
   return (
     <div>

apps/web/src/components/layout/components/PublicPageLayout.tsx

@@ -9,7 +9,7 @@ export function PublicPageLayout() {
     <div className={classes.wrapper}>
       <div className={classes.bg}>
         <img
-          src={CONTEXT_PATH + '/static/images/logo-formerly-dark-bg.png'}
+          src={CONTEXT_PATH + '/static/images/logo-formerly-dark-bg.webp'}
           alt="logo"
           style={{ alignSelf: 'flex-start', maxWidth: 150, marginTop: 5, marginLeft: 5 }}
         />
@@ -26,17 +26,17 @@ export function PublicPageLayout() {
           }}
         >
           <img
-            src={CONTEXT_PATH + '/static/images/notifications/notification_01.png'}
+            src={CONTEXT_PATH + '/static/images/notifications/notification_01.webp'}
             alt="logo"
             style={{ maxWidth: 400 }}
           />
           <img
-            src={CONTEXT_PATH + '/static/images/notifications/notification_02.png'}
+            src={CONTEXT_PATH + '/static/images/notifications/notification_02.webp'}
             alt="logo"
             style={{ marginTop: -15, marginLeft: 30, maxWidth: 400 }}
           />
           <img
-            src={CONTEXT_PATH + '/static/images/notifications/notification_03.png'}
+            src={CONTEXT_PATH + '/static/images/notifications/notification_03.webp'}
             alt="logo"
             style={{ marginTop: -15, maxWidth: 400 }}
           />

apps/web/src/components/layout/components/v2/HeaderMenuItems.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { useIsDarkTheme } from '../../../../hooks';
 import { ProfileMenuItem } from './ProfileMenuItem';
 
-const FALLBACK_AVATAR = CONTEXT_PATH + '/static/images/avatar.png';
+const FALLBACK_AVATAR = CONTEXT_PATH + '/static/images/avatar.webp';
 
 const IS_SELF_HOSTED = IS_DOCKER_HOSTED;
 

apps/web/src/components/layout/components/v2/ProfileMenuItem.tsx

@@ -3,7 +3,7 @@ import { colors, Text } from '@novu/design-system';
 import { IOrganizationEntity, IUserEntity } from '@novu/shared';
 import { CONTEXT_PATH } from '@novu/shared-web';
 
-const FALLBACK_AVATAR = CONTEXT_PATH + '/static/images/avatar.png';
+const FALLBACK_AVATAR = CONTEXT_PATH + '/static/images/avatar.webp';
 
 type ProfileMenuItemProps = {
   currentUser?: IUserEntity;

apps/web/src/pages/integrations/components/ChannelGroup.tsx

@@ -44,8 +44,8 @@ export function ChannelGroup({
                 0,
               connected: true,
               logoFileName: {
-                dark: CONTEXT_PATH + '/static/images/logo-light.png',
-                light: CONTEXT_PATH + '/static/images/logo.png',
+                dark: CONTEXT_PATH + '/static/images/logo-light.webp',
+                light: CONTEXT_PATH + '/static/images/logo.webp',
               },
               betaVersion: false,
               novu: true,
@@ -72,8 +72,8 @@ export function ChannelGroup({
                 0,
               connected: true,
               logoFileName: {
-                dark: CONTEXT_PATH + '/static/images/logo-light.png',
-                light: CONTEXT_PATH + '/static/images/logo.png',
+                dark: CONTEXT_PATH + '/static/images/logo-light.webp',
+                light: CONTEXT_PATH + '/static/images/logo.webp',
               },
               betaVersion: false,
               novu: true,

apps/web/src/pages/integrations/components/Modal/ChannelGroup.tsx

@@ -48,8 +48,8 @@ export function ChannelGroup({
                     .length === 0,
                 connected: true,
                 logoFileName: {
-                  dark: CONTEXT_PATH + '/static/images/logo-light.png',
-                  light: CONTEXT_PATH + '/static/images/logo.png',
+                  dark: CONTEXT_PATH + '/static/images/logo-light.webp',
+                  light: CONTEXT_PATH + '/static/images/logo.webp',
                 },
                 betaVersion: false,
                 novu: true,
@@ -76,8 +76,8 @@ export function ChannelGroup({
                   0,
                 connected: true,
                 logoFileName: {
-                  dark: CONTEXT_PATH + '/static/images/logo-light.png',
-                  light: CONTEXT_PATH + '/static/images/logo.png',
+                  dark: CONTEXT_PATH + '/static/images/logo-light.webp',
+                  light: CONTEXT_PATH + '/static/images/logo.webp',
                 },
                 betaVersion: false,
                 novu: true,

apps/web/src/pages/integrations/components/NovuProviderBase.tsx

@@ -24,7 +24,7 @@ export function NovuProviderBase({ onClose, senderInformation, channel }: NovuPr
   const { colorScheme } = useMantineColorScheme();
   const isDark = colorScheme === 'dark';
 
-  const logoSrc = isDark ? CONTEXT_PATH + '/static/images/logo-light.png' : CONTEXT_PATH + '/static/images/logo.png';
+  const logoSrc = isDark ? CONTEXT_PATH + '/static/images/logo-light.webp' : CONTEXT_PATH + '/static/images/logo.webp';
 
   const unit = channel === ChannelTypeEnum.EMAIL ? 'emails' : 'messages';
 

apps/web/src/pages/quick-start/steps/FrameworkSetup.tsx

@@ -20,15 +20,15 @@ export function FrameworkSetup() {
         <Cards
           cells={[
             {
-              imagePath: `/static/images/frameworks/react.png`,
+              imagePath: `/static/images/frameworks/react.webp`,
               navigateTo: '/quickstart/notification-center/set-up/react',
             },
             {
-              imagePath: `/static/images/frameworks/angular.png`,
+              imagePath: `/static/images/frameworks/angular.webp`,
               navigateTo: '/quickstart/notification-center/set-up/angular',
             },
             {
-              imagePath: `/static/images/frameworks/vue.png`,
+              imagePath: `/static/images/frameworks/vue.webp`,
               navigateTo: '/quickstart/notification-center/set-up/vue',
             },
           ]}
@@ -37,7 +37,7 @@ export function FrameworkSetup() {
           <Cards
             cells={[
               {
-                imagePath: `/static/images/frameworks/js.png`,
+                imagePath: `/static/images/frameworks/js.webp`,
                 navigateTo: '/quickstart/notification-center/set-up/js',
               },
             ]}

apps/web/src/pages/settings/useSettingsEnvRedirect.ts

@@ -13,17 +13,18 @@ export const useSettingsEnvRedirect = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    // don't redirect away until we've loaded the environment and checked it 
+    // don't redirect away until we've loaded the environment and checked it
     if (isLoading) {
       return;
     }
 
     const curPathname = window.location.pathname;
     const currentEnvName = environment?.name ?? DEFAULT_ENV_NAME;
 
-    const redirectPath = !env || !VALID_ENV_VALUES.has(env as BaseEnvironmentEnum)
-      ? `${curPathname}/${currentEnvName}`
-      : curPathname.replace(`/${env}`, `/${currentEnvName}`);
+    const redirectPath =
+      !env || !VALID_ENV_VALUES.has(env as BaseEnvironmentEnum)
+        ? `${curPathname}/${currentEnvName}`
+        : curPathname.replace(`/${env}`, `/${currentEnvName}`);
 
     navigate(redirectPath);
   }, [env, environment, navigate, isLoading]);

apps/web/src/pages/templates/components/email-editor/EmailMessageEditor.tsx

@@ -12,9 +12,8 @@ import { ButtonRowContent } from './ButtonRowContent';
 import { TextRowContent } from './TextRowContent';
 import type { IForm, IFormStep, ITemplates } from '../formTypes';
 import { useStepFormPath } from '../../hooks/useStepFormPath';
-import { useFeatureFlag } from '../../../../hooks/useFeatureFlags';
 import { FeatureFlagsKeysEnum } from '@novu/shared';
-import { ROUTES } from '../../../../constants/routes.enum';
+import { ROUTES, useFeatureFlag } from '@novu/shared-web';
 
 interface IStepEntityExtended extends IFormStep {
   template: ITemplates & {
@@ -87,6 +86,7 @@ export function EmailMessageEditor({
   }
 
   function getBrandSettingsUrl(): string {
+    // TODO: update when Information Architecture is fully-released
     return isInformationArchitectureEnabled ? ROUTES.BRAND_SETTINGS : ROUTES.BRAND;
   }
 

apps/web/tests/main-functionality.spec.ts

@@ -326,7 +326,7 @@ test('should show the brand logo on main page', async ({ page }) => {
   await addAndEditChannel(page, 'email');
 
   const brandLogo = getByTestId(page, 'brand-logo');
-  await expect(brandLogo).toHaveAttribute('src', 'https://web.novu.co/static/images/logo-light.png');
+  await expect(brandLogo).toHaveAttribute('src', 'https://web.novu.co/static/images/logo-light.webp');
 });
 
 test('should support RTL text content', async ({ page }) => {