Merge branch 'next' into v0.18.x

novuhq · Aug 14, 2023 · 0eb94f1 · 0eb94f1
2 parents 56cfee4 + e3c8fc3
commit 0eb94f1
Show file tree

Hide file tree

Showing 51 changed files with 222 additions and 302 deletions.
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
@@ -45,7 +45,7 @@ import { TemplateSettings } from './pages/templates/components/TemplateSettings'
 import { UserPreference } from './pages/templates/components/UserPreference';
 import { TestWorkflowPage } from './pages/templates/components/TestWorkflowPage';
 import { SnippetPage } from './pages/templates/components/SnippetPage';
-import { TemplateEditor } from './pages/templates/components/TemplateEditor';
+import { ChannelStepEditor } from './pages/templates/components/ChannelStepEditor';
 import { ProvidersPage } from './pages/templates/components/ProvidersPage';
 import { InAppSuccess } from './pages/quick-start/steps/InAppSuccess';
 import { IntegrationsListPage } from './pages/integrations/IntegrationsListPage';
@@ -200,7 +200,7 @@ function App() {
                     <Route path="test-workflow" element={<TestWorkflowPage />} />
                     <Route path="snippet" element={<SnippetPage />} />
                     <Route path="providers" element={<ProvidersPage />} />
-                    <Route path=":channel/:stepUuid" element={<TemplateEditor />} />
+                    <Route path=":channel/:stepUuid" element={<ChannelStepEditor />} />
                   </Route>
                   <Route path={ROUTES.WORKFLOWS} element={<WorkflowListPage />} />
                   <Route path={ROUTES.TENANTS} element={<TenantsPage />}>

diff --git a/apps/web/src/components/layout/AppLayout.tsx b/apps/web/src/components/layout/AppLayout.tsx
@@ -1,19 +1,31 @@
 import { useState } from 'react';
-import { AppShell } from '@mantine/core';
 import * as Sentry from '@sentry/react';
 import { Outlet } from 'react-router-dom';
+import styled from '@emotion/styled';
 
 import { ThemeProvider } from '../../design-system/ThemeProvider';
 import { HeaderNav } from './components/HeaderNav';
 import { SideNav } from './components/SideNav';
-import { colors } from '../../design-system';
 import { IntercomProvider } from 'react-use-intercom';
 import { INTERCOM_APP_ID } from '../../config';
-import { HEADER_HEIGHT } from './constants';
 import { RequiredAuth } from './RequiredAuth';
 import { SpotLight } from '../utils/Spotlight';
 import { SpotLightProvider } from '../providers/SpotlightProvider';
 
+const AppShellNew = styled.div`
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  min-width: 1024px;
+`;
+
+const ContentShell = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  overflow: hidden; // for appropriate scroll
+`;
+
 export function AppLayout() {
   const [isIntercomOpened, setIsIntercomOpened] = useState(false);
 
@@ -26,49 +38,32 @@ export function AppLayout() {
             onShow={() => setIsIntercomOpened(true)}
             onHide={() => setIsIntercomOpened(false)}
           >
-            <AppShell
-              padding="lg"
-              navbar={<SideNav />}
-              styles={(theme) => ({
-                root: { minHeight: '100vh', position: 'relative', zIndex: 1 },
-                body: {
-                  minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
-                  '@media (max-width: 768px)': {
-                    flexDirection: 'column',
-                    height: 'auto',
-                  },
-                },
-                main: {
-                  backgroundColor: theme.colorScheme === 'dark' ? colors.BGDark : colors.BGLight,
-                  minHeight: 'auto',
-                  padding: 0,
-                  overflowX: 'hidden',
-                  borderRadius: 0,
-                },
-              })}
+            <Sentry.ErrorBoundary
+              fallback={({ error, resetError, eventId }) => (
+                <>
+                  Sorry, but something went wrong. <br />
+                  Our team been notified about it and we will look at it asap.
+                  <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 been notified about it and we will look at it asap.
-                    <br />
-                    <code>
-                      <small style={{ color: 'lightGrey' }}>
-                        Event Id: {eventId}.
-                        <br />
-                        {error.toString()}
-                      </small>
-                    </code>
-                  </>
-                )}
-              >
-                <SpotLight>
-                  <HeaderNav isIntercomOpened={isIntercomOpened} />
-                  <Outlet />
-                </SpotLight>
-              </Sentry.ErrorBoundary>
-            </AppShell>
+              <SpotLight>
+                <AppShellNew>
+                  <SideNav />
+                  <ContentShell>
+                    <HeaderNav isIntercomOpened={isIntercomOpened} />
+                    <Outlet />
+                  </ContentShell>
+                </AppShellNew>
+              </SpotLight>
+            </Sentry.ErrorBoundary>
           </IntercomProvider>
         </ThemeProvider>
       </SpotLightProvider>

diff --git a/apps/web/src/components/layout/components/AuthContainer.tsx b/apps/web/src/components/layout/components/AuthContainer.tsx
@@ -18,14 +18,14 @@ export default function AuthContainer({
       sx={{
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
         margin: 0,
-        '@media (max-width: 1100px)': {
-          justifyContent: 'center',
-        },
+        overflowY: 'auto',
+        height: '100vh',
       }}
     >
       <PageMeta title={title} />
-      <div style={{ margin: '30px 0', width: '100%', maxWidth: 550 }}>
+      <div style={{ margin: 'auto', padding: '40px 20px', width: '100%', maxWidth: 550 }}>
         <Title data-test-id="auth-container-title">{title}</Title>
         {customDescription || (
           <Text size="lg" color={colors.B60} mb={60} mt={20}>

diff --git a/apps/web/src/components/layout/components/HeaderNav.tsx b/apps/web/src/components/layout/components/HeaderNav.tsx
@@ -165,6 +165,7 @@ export function HeaderNav({ isIntercomOpened }: Props) {
         position: 'sticky',
         top: 0,
         borderBottom: 'none',
+        zIndex: 199,
       }}
     >
       <Container

diff --git a/apps/web/src/components/layout/components/OrganizationSelect.tsx b/apps/web/src/components/layout/components/OrganizationSelect.tsx
@@ -105,6 +105,8 @@ export default function OrganizationSelect() {
 }
 
 const SelectWrapper = styled.div`
+  margin-top: 16px;
+
   input {
     background: transparent;
   }

diff --git a/apps/web/src/components/layout/components/PageContainer.tsx b/apps/web/src/components/layout/components/PageContainer.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import React, { CSSProperties } from 'react';
 import { Container } from '../../../design-system';
-import { HEADER_HEIGHT } from '../constants';
 import PageMeta from './PageMeta';
 
 function PageContainer({
@@ -19,7 +18,7 @@ function PageContainer({
   };
 
   return (
-    <StyledContainer pl={0} pr={0} fluid style={containerStyle} h={`calc(100vh - ${HEADER_HEIGHT}px)`}>
+    <StyledContainer fluid style={containerStyle} h={`100%`}>
       <PageMeta title={title} />
       {children}
     </StyledContainer>
@@ -33,4 +32,5 @@ const StyledContainer = styled(Container)`
   border-radius: 0;
   padding-left: 0;
   padding-right: 0;
+  margin: 0;
 `;
diff --git a/apps/web/src/components/layout/components/SideNav.tsx b/apps/web/src/components/layout/components/SideNav.tsx
@@ -137,17 +137,16 @@ export function SideNav({}: Props) {
 
   return (
     <Navbar
-      p={24}
-      pt={16}
       sx={{
         position: 'sticky',
         top: 0,
         zIndex: 'auto',
         backgroundColor: 'transparent',
         borderRight: 'none',
-        paddingRight: 0,
         width: '300px',
-        height: 'max-content',
+        minHeight: '100vh',
+        padding: '16px 24px',
+        paddingBottom: '0px',
         '@media (max-width: 768px)': {
           width: '100%',
         },
@@ -158,13 +157,13 @@ export function SideNav({}: Props) {
           <NovuLogo />
         </Link>
       </Navbar.Section>
-      <Navbar.Section>
+      <Navbar.Section sx={{ overflowY: 'auto', flex: 1 }}>
         <Popover
           classNames={classes}
           withArrow
           opened={opened}
           onClose={() => setOpened(false)}
-          withinPortal={false}
+          withinPortal={true}
           transition="rotate-left"
           transitionDuration={250}
           position="right"
@@ -180,6 +179,7 @@ export function SideNav({}: Props) {
               onChange={async (value) => {
                 await setEnvironment(value);
               }}
+              sx={{ marginBottom: '16px' }}
               data-test-id="environment-switch"
             />
           </Popover.Target>
@@ -193,45 +193,39 @@ export function SideNav({}: Props) {
           </Popover.Dropdown>
         </Popover>
         <NavMenu menuItems={menuItems} />
-      </Navbar.Section>
-      <Navbar.Section mt={15}>
-        <Navbar.Section>
-          <OrganizationSelect />
-        </Navbar.Section>
-        <Navbar.Section>
-          <BottomNav dark={dark} data-test-id="side-nav-bottom-links">
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://discord.novu.co"
-              data-test-id="side-nav-bottom-link-support"
-            >
-              Support
-            </a>
-            <p>
-              <b>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</b>
-            </p>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://docs.novu.co"
-              data-test-id="side-nav-bottom-link-documentation"
-            >
-              Docs
-            </a>
-            <p>
-              <b>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</b>
-            </p>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://github.com/novuhq/novu/issues/new/choose"
-              data-test-id="side-nav-bottom-link-share-feedback"
-            >
-              Share Feedback
-            </a>
-          </BottomNav>
-        </Navbar.Section>
+        <OrganizationSelect />
+        <BottomNav dark={dark} data-test-id="side-nav-bottom-links">
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://discord.novu.co"
+            data-test-id="side-nav-bottom-link-support"
+          >
+            Support
+          </a>
+          <p>
+            <b>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</b>
+          </p>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://docs.novu.co"
+            data-test-id="side-nav-bottom-link-documentation"
+          >
+            Docs
+          </a>
+          <p>
+            <b>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</b>
+          </p>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/novuhq/novu/issues/new/choose"
+            data-test-id="side-nav-bottom-link-share-feedback"
+          >
+            Share Feedback
+          </a>
+        </BottomNav>
       </Navbar.Section>
     </Navbar>
   );
@@ -258,5 +252,4 @@ const BottomNav = styled.div<{ dark: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 5px;
 `;
diff --git a/apps/web/src/design-system/ThemeProvider.tsx b/apps/web/src/design-system/ThemeProvider.tsx
@@ -115,6 +115,7 @@ export function ThemeProvider({ children }: { children: JSX.Element; dark?: Bool
               backgroundColor: theme.colorScheme === 'dark' ? colors.BGDark : colors.BGLight,
               color: theme.colorScheme === 'dark' ? colors.white : colors.B40,
               marginRight: `calc(-1 * var(--removed-scroll-width, 0))`,
+              overflow: 'hidden',
             },
             a: {
               textDecoration: 'none',

diff --git a/apps/web/src/design-system/navigation/NavMenu.styles.ts b/apps/web/src/design-system/navigation/NavMenu.styles.ts
@@ -20,9 +20,9 @@ export default createStyles((theme: MantineTheme) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
-      height: '50px',
+      height: '44px',
       width: '100%',
-      margin: '15px 0px',
+      margin: '8px 0px',
       position: 'relative',
       padding: theme.spacing.xs,
       boxSizing: 'border-box',
@@ -39,14 +39,23 @@ export default createStyles((theme: MantineTheme) => {
       '&:first-of-type': {
         marginTop: '0px',
       },
+
+      '&:last-of-type': {
+        marginBottom: '0px',
+      },
+
+      '@media (min-width: 1440px)': {
+        margin: '15px 0px',
+        height: '50px',
+      },
     },
     linkActive: {
       '&, &:hover': {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         width: '100%',
-        height: '50px',
+        height: '44px',
         position: 'relative',
         padding: theme.spacing.xs,
         boxSizing: 'border-box',
@@ -67,6 +76,10 @@ export default createStyles((theme: MantineTheme) => {
           borderRadius: '7px 0px 0px 7px',
           background: colors.vertical,
         },
+
+        '@media (min-width: 1440px)': {
+          height: '50px',
+        },
       },
     },
   };

diff --git a/apps/web/src/design-system/segmented-control/SegmentedControl.tsx b/apps/web/src/design-system/segmented-control/SegmentedControl.tsx
@@ -40,7 +40,7 @@ export const SegmentedControl = React.forwardRef<HTMLDivElement, ISegmentedContr
     } as SegmentedControlProps;
 
     return (
-      <ControlWrapper style={{ position: 'relative', marginBottom: 24 }}>
+      <ControlWrapper style={{ position: 'relative', marginBottom: 0 }}>
         <LoadingOverlay
           visible={loading}
           overlayColor={theme.colorScheme === 'dark' ? colors.B30 : colors.B98}
-Original file line number
+Diff line change
@@ Expand Up / @@ -105,6 +105,8 @@ export default function OrganizationSelect() { @@
     }
     const SelectWrapper = styled.div`
+      margin-top: 16px;
       input {
         background: transparent;
       }
@@ Expand Down @@