Merge branch 'next' into fix/error-when-paste-into-email-editor

.github/workflows/reusable-api-e2e.yml

@@ -80,12 +80,6 @@ jobs:
       - uses: ./.github/actions/setup-redis-cluster
         name: Setup redis cluster
 
-      - uses: mansagroup/nrwl-nx-action@v3
-        name: Run Lint
-        with:
-          targets: lint
-          projects: '@novu/api'
-
       - uses: ./.github/actions/start-localstack
         name: Start localstack
 

.github/workflows/reusable-inbound-mail-e2e.yml

@@ -44,10 +44,6 @@ jobs:
         if: steps.setup.outputs.has_token != 'true'
       - uses: ./.github/actions/setup-project
       - uses: ./.github/actions/setup-redis-cluster
-      - uses: mansagroup/nrwl-nx-action@v3
-        with:
-          targets: lint
-          projects: "@novu/inbound-mail"
 
         # Runs a single command using the runners shell
       - name: Build Inbound Mail

.github/workflows/reusable-web-deploy.yml

@@ -86,7 +86,7 @@ jobs:
           echo REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID=${{ secrets.LAUNCH_DARKLY_CLIENT_SIDE_ID }} >> .env
           echo REACT_APP_HUBSPOT_EMBED=${{ inputs.react_app_hubspot_embed }} >> .env
           echo REACT_APP_STRIPE_CLIENT_KEY=${{ secrets.STRIPE_CLIENT_KEY }} >> .env
-
+          echo REACT_APP_NOVU_GTM_ID=${{ secrets.REACT_APP_NOVU_GTM_ID }} >> .env
       - name: Envsetup
         working-directory: apps/web
         run: npm run envsetup

.github/workflows/reusable-web-e2e.yml

@@ -4,6 +4,13 @@ name: Test WEB
 
 # Controls when the action will run. Triggers the workflow on push or pull request
 on:
+  workflow_dispatch:
+    inputs:
+      ee:
+        description: 'use the ee version of worker'
+        required: false
+        default: true
+        type: boolean
   workflow_call:
     inputs:
       ee:
@@ -66,7 +73,7 @@ jobs:
 
       - uses: mansagroup/nrwl-nx-action@v3
         with:
-          targets: lint,build
+          targets: build
           projects: '@novu/web,@novu/api,@novu/worker'
           args: --skip-nx-cache
 

.github/workflows/reusable-webhook-e2e.yml

@@ -18,11 +18,6 @@ jobs:
 
     - uses: ./.github/actions/setup-project
 
-    - uses: mansagroup/nrwl-nx-action@v3
-      with:
-        targets: lint
-        projects: '@novu/webhook'
-
     - uses: ./.github/actions/start-localstack
 
       # Runs a single command using the runners shell
@@ -31,6 +26,6 @@ jobs:
 
     # Runs a set of commands using the runners shell
     - name: Run a test
-      run: | 
+      run: |
         cd apps/webhook && pnpm test:e2e
         pnpm test

.github/workflows/reusable-widget-e2e.yml

@@ -52,11 +52,6 @@ jobs:
 
       - uses: ./.github/actions/setup-redis-cluster
 
-      - uses: mansagroup/nrwl-nx-action@v3
-        with:
-          targets: lint
-          projects: '@novu/widget'
-
       - uses: mansagroup/nrwl-nx-action@v3
         with:
           targets: build

.github/workflows/reusable-worker-e2e.yml

@@ -46,10 +46,6 @@ jobs:
     - uses: ./.github/actions/setup-project
 
     - uses: ./.github/actions/setup-redis-cluster
-    - uses: mansagroup/nrwl-nx-action@v3
-      with:
-        targets: lint
-        projects: '@novu/worker'
 
     - uses: ./.github/actions/start-localstack
 
@@ -59,6 +55,6 @@ jobs:
 
     # Runs a set of commands using the runners shell
     - name: Run a test
-      run: | 
+      run: |
         cd apps/worker && pnpm test:e2e
         pnpm test

.github/workflows/reusable-ws-e2e.yml

@@ -43,10 +43,6 @@ jobs:
       - uses: actions/checkout@v3
         if: steps.setup.outputs.has_token != 'true'
       - uses: ./.github/actions/setup-project
-      - uses: mansagroup/nrwl-nx-action@v3
-        with:
-          targets: lint
-          projects: "@novu/ws"
 
         # Runs a single command using the runners shell
       - name: Build WS

.github/workflows/rollback.yml

@@ -0,0 +1,11 @@
+name: Rollback
+
+on:
+  workflow_dispatch:
+
+jobs:
+  ecs:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - run: echo "Rolling back"

.github/workflows/scheduled_e2e.yml

@@ -3,7 +3,7 @@ name: Scheduled E2E tests
 on:
   workflow_dispatch:
   schedule:
-   - cron:  '0 12-19/2 * * 1-5'
+   - cron:  '0 7-19/4 * * 1-5'
 permissions:
   contents: read
   packages: write

.github/workflows/test.yml

@@ -5,6 +5,7 @@ concurrency:
 
 on:
   pull_request:
+  workflow_dispatch:
 
 jobs:
   dependency-review:
@@ -93,7 +94,8 @@ jobs:
   test_web:
     name: Test Web Cypress
     needs: [get-affected]
-    if: ${{ contains(fromJson(needs.get-affected.outputs.test-cypress), '@novu/web') }}
+#    if: ${{ contains(fromJson(needs.get-affected.outputs.test-cypress), '@novu/web') }}
+    if: false
     uses: ./.github/workflows/reusable-web-e2e.yml
     secrets: inherit
     with:
@@ -105,7 +107,8 @@ jobs:
     uses: ./.github/workflows/reusable-widget-e2e.yml
     with:
       ee: true
-    if: ${{ contains(fromJson(needs.get-affected.outputs.test-cypress), '@novu/widget') || contains(fromJson(needs.get-affected.outputs.test-unit), '@novu/notification-center') || contains(fromJson(needs.get-affected.outputs.test-unit), '@novu/ws') }}
+    if: false
+#    if: ${{ contains(fromJson(needs.get-affected.outputs.test-cypress), '@novu/widget') || contains(fromJson(needs.get-affected.outputs.test-unit), '@novu/notification-center') || contains(fromJson(needs.get-affected.outputs.test-unit), '@novu/ws') }}
     secrets: inherit
 
   test_providers:
@@ -175,9 +178,10 @@ jobs:
           targets: lint,build,test
           projects: ${{join(fromJson(needs.get-affected.outputs.test-libs), ',')}}
 
-  test_api:
+  test_unit_api:
     name: Test API
     needs: [get-affected]
+    if: false
     strategy:
       # The order is important for ee to be first, otherwise outputs not work correctly
       matrix:

apps/web/.env

@@ -16,3 +16,4 @@ REACT_APP_LAUNCH_DARKLY_CLIENT_SIDE_ID=
 IS_TEMPLATE_STORE_ENABLED=
 IS_MULTI_PROVIDER_CONFIGURATION_ENABLED=
 IS_MULTI_TENANCY_ENABLED=
+REACT_APP_NOVU_GTM_ID=

apps/web/public/index.html

@@ -1,6 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <!-- Google Tag Manager -->
+    <% if ( process.env.REACT_APP_NOVU_GTM_ID ) { %>
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', '%REACT_APP_NOVU_GTM_ID%');
+    </script>
+    <% } %>
+    <!-- End Google Tag Manager -->
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon-gradient.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -28,6 +44,18 @@
     <script src="%PUBLIC_URL%/env-config.js"></script>
   </head>
   <body>
+    <!-- Google Tag Manager (noscript) -->
+    <% if ( process.env.REACT_APP_NOVU_GTM_ID ) { %>
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=%REACT_APP_NOVU_GTM_ID%"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe>
+    </noscript>
+    <% } %>
+    <!-- End Google Tag Manager (noscript) -->
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <% if ( process.env.REACT_APP_DOCKER_HOSTED_ENV === 'false' ) { %>
@@ -37,9 +65,7 @@
       async="async"
       type="text/javascript"
     ></script>
-    <% } %>
-
-    <% if ( process.env.REACT_APP_HUBSPOT_EMBED ) { %>
+    <% } %> <% if ( process.env.REACT_APP_HUBSPOT_EMBED ) { %>
     <!-- Start of HubSpot Embed Code -->
     <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<%= process.env.REACT_APP_HUBSPOT_EMBED %>.js"></script>
     <!-- End of HubSpot Embed Code -->

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

@@ -20,7 +20,7 @@ export function NotificationCenterBell({
 
   return (
     <span style={{ position: 'relative' }}>
-      <IconNotifications color={colors.B60} />
+      <IconNotifications />
       {!!unseenCount && <StyledDot />}
     </span>
   );

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

@@ -16,7 +16,7 @@ const menuItems = [
     path: ROUTES.SETTINGS,
   },
   {
-    title: 'Invite Members',
+    title: 'Invite members',
     icon: <IconOutlineGroupAdd color="inherit" />,
     path: ROUTES.TEAM,
   },
@@ -34,13 +34,13 @@ export function HeaderMenuItems({}) {
     </Dropdown.Item>,
     ...menuItems.map(({ title, icon, path }) => (
       <Link to={path} key={`link-${title}`}>
-        <Dropdown.Item key={`item-${title}`} icon={icon} component="div" color="green">
+        <Dropdown.Item key={`item-${title}`} icon={icon} component="div">
           {title}
         </Dropdown.Item>
       </Link>
     )),
     <Dropdown.Item key="logout" icon={<IconLogout color={iconColor} />} onClick={logout} data-test-id="logout-button">
-      Log Out
+      Log out
     </Dropdown.Item>,
   ];
 

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

@@ -5,6 +5,7 @@ import { IS_DOCKER_HOSTED } from '../../../../config';
 import { useBootIntercom } from '../../../../hooks';
 import useThemeChange from '../../../../hooks/useThemeChange';
 import { discordInviteUrl } from '../../../../pages/quick-start/consts';
+import { css } from '../../../../styled-system/css';
 import { useAuthContext } from '../../../providers/AuthProvider';
 import { HEADER_NAV_HEIGHT } from '../../constants';
 import { NotificationCenterWidget } from '../NotificationCenterWidget';
@@ -20,13 +21,14 @@ export function HeaderNav() {
   return (
     <Header
       height={`${HEADER_NAV_HEIGHT}px`}
-      sx={{
+      className={css({
         position: 'sticky',
         top: 0,
         borderBottom: 'none',
+        // TODO: fix when we re-do z-index across the app
         zIndex: 199,
-        padding: 8,
-      }}
+        padding: '50',
+      })}
     >
       {/* TODO: Change position: right to space-between for breadcrumbs */}
       <Group position="right" noWrap align="center">
@@ -41,12 +43,12 @@ export function HeaderNav() {
           {isSelfHosted ? (
             <a href={discordInviteUrl} target="_blank" rel="noopener noreferrer">
               <ActionIcon variant="transparent">
-                <IconHelpOutline color={colors.B60} />
+                <IconHelpOutline />
               </ActionIcon>
             </a>
           ) : (
             <ActionIcon variant="transparent" id="intercom-launcher">
-              <IconHelpOutline color={colors.B60} />
+              <IconHelpOutline />
             </ActionIcon>
           )}
           <HeaderMenuItems />

apps/web/src/components/nav/EnvironmentSelect/EnvironmentPopover.tsx

@@ -36,11 +36,11 @@ export const EnvironmentPopover: React.FC<PropsWithChildren<IEnvironmentPopoverP
           <button className={closeButtonStyles} onClick={() => setIsPopoverOpened(false)} aria-label="Close popover">
             <IconClose />
           </button>
-          {'To make changes you’ll need to visit '}
+          {`To view the updates you've made, visit the `}
           <a className={linkStyles} onClick={handlePopoverLinkClick}>
             development changes
-          </a>{' '}
-          {' and promote the changes from there'}
+          </a>
+          {'.'}
         </div>
       </Popover.Dropdown>
     </Popover>

apps/web/src/components/nav/EnvironmentSelect/useEnvironmentSelect.tsx

@@ -2,7 +2,7 @@ import { type IIconProps, IconConstruction, IconRocketLaunch } from '@novu/desig
 import { useEnvController, ROUTES, BaseEnvironmentEnum } from '@novu/shared-web';
 import { useState } from 'react';
 import { type ISelectProps } from '@novu/design-system';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const ENVIRONMENT_ICON_LOOKUP: Record<BaseEnvironmentEnum, React.ReactElement<IIconProps>> = {
   [BaseEnvironmentEnum.DEVELOPMENT]: <IconConstruction />,
@@ -13,6 +13,7 @@ export const useEnvironmentSelect = () => {
   const [isPopoverOpened, setIsPopoverOpened] = useState<boolean>(false);
 
   const location = useLocation();
+  const navigate = useNavigate();
 
   const { setEnvironment, isLoading, environment, readonly } = useEnvController({
     onSuccess: (newEnvironment) => {

apps/web/src/components/nav/NavMenuButton/NavMenuButton.shared.ts

@@ -20,8 +20,6 @@ export interface INavMenuButtonProps {
   testId?: string;
 }
 
-export const ButtonLabel = styled('span', text);
-
 export const rawButtonBaseStyles = css.raw({
   display: 'flex',
   alignItems: 'center',

apps/web/src/components/nav/NavMenuButton/NavMenuLinkButton.tsx

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { css } from '../../../styled-system/css';
 import { HStack } from '../../../styled-system/jsx';
-import { INavMenuButtonProps, rawButtonBaseStyles, ButtonLabel } from './NavMenuButton.shared';
+import { INavMenuButtonProps, rawButtonBaseStyles } from './NavMenuButton.shared';
 import { NavMenuRightSide } from './NavMenuButtonRightSide';
 
 const rawLinkButtonStyles = css.raw({
@@ -50,9 +50,7 @@ export const NavMenuLinkButton: FC<PropsWithChildren<INavMenuLinkButtonProps>> =
     >
       <HStack gap="75">
         {icon}
-        <ButtonLabel variant={'strong'} color="typography.text.secondary">
-          {label}
-        </ButtonLabel>
+        <span>{label}</span>
       </HStack>
       <NavMenuRightSide tooltip={rightSide?.tooltip} isMounted={shouldShowRightSide}>
         {rightSide?.node}

apps/web/src/components/nav/NavMenuButton/NavMenuToggleButton.tsx

@@ -2,7 +2,7 @@ import { IconArrowDropUp, IconArrowDropDown } from '@novu/design-system';
 import { FC, PropsWithChildren, useState } from 'react';
 import { css } from '../../../styled-system/css';
 import { Flex, HStack } from '../../../styled-system/jsx';
-import { INavMenuButtonProps, rawButtonBaseStyles, ButtonLabel } from './NavMenuButton.shared';
+import { INavMenuButtonProps, rawButtonBaseStyles } from './NavMenuButton.shared';
 
 type INavMenuToggleButtonProps = Omit<INavMenuButtonProps, 'rightSide'>;
 
@@ -24,9 +24,7 @@ export const NavMenuToggleButton: FC<PropsWithChildren<INavMenuToggleButtonProps
         <HStack justifyContent={'space-between'} w="inherit">
           <HStack gap="75">
             {icon}
-            <ButtonLabel variant={'strong'} color="typography.text.secondary">
-              {label}
-            </ButtonLabel>
+            <span>{label}</span>
           </HStack>
           {isOpen ? <IconArrowDropUp /> : <IconArrowDropDown />}
         </HStack>