Merge branch 'main' of https://github.com/synapsenet-arena/lead360

synapsenet-arena · May 21, 2024 · bb2d74f · bb2d74f
2 parents b9c83a4 + a981344
commit bb2d74f
Show file tree

Hide file tree

Showing 226 changed files with 2,727 additions and 2,241 deletions.
diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml
@@ -18,7 +18,7 @@ concurrency:
 
 jobs:
   front-sb-build:
-    runs-on: ci-8-cores
+    runs-on: ubuntu-latest
     env:
       REACT_APP_SERVER_BASE_URL: http://localhost:3000
       NX_REJECT_UNKNOWN_LOCAL_CACHE: 0
@@ -39,7 +39,7 @@ jobs:
       - name: Front / Write .env
         run: npx nx reset:env twenty-front
       - name: Front / Build storybook
-        run: npx nx storybook:build twenty-front
+        run: npx nx storybook:build twenty-front --configuration=test
   front-sb-test:
     runs-on: ci-8-cores
     needs: front-sb-build

diff --git a/nx.json b/nx.json
@@ -116,6 +116,11 @@
         "command": "storybook build",
         "output-dir": "storybook-static",
         "config-dir": ".storybook"
+      },
+      "configurations": {
+        "test": {
+          "command": "storybook build --test"
+        }
       }
     },
     "storybook:dev": {
@@ -138,6 +143,9 @@
         "host": "localhost",
         "port": 6006,
         "silent": true
+      },
+      "configurations": {
+        "test": {}
       }
     },
     "storybook:coverage": {
@@ -192,7 +200,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --port={args.port} --configuration=test' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port}'"
         ],
         "port": 6006
       }

diff --git a/package.json b/package.json
@@ -58,10 +58,10 @@
     "@types/lodash.camelcase": "^4.3.7",
     "@types/lodash.merge": "^4.6.7",
     "@types/lodash.pick": "^4.3.7",
-    "@types/mailparser": "^3.4.4",
     "@types/nodemailer": "^6.4.14",
     "@types/passport-microsoft": "^1.0.3",
     "add": "^2.0.6",
+    "addressparser": "^1.0.1",
     "afterframe": "^1.0.2",
     "apollo-server-express": "^3.12.0",
     "apollo-upload-client": "^17.0.0",
@@ -95,6 +95,7 @@
     "graphql-fields": "^2.0.3",
     "graphql-middleware": "^6.1.35",
     "graphql-rate-limit": "^3.3.0",
+    "graphql-scalars": "^1.23.0",
     "graphql-subscriptions": "2.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-type-json": "^0.3.2",
@@ -126,7 +127,6 @@
     "lodash.snakecase": "^4.1.1",
     "lodash.upperfirst": "^4.3.1",
     "luxon": "^3.3.0",
-    "mailparser": "^3.6.5",
     "microdiff": "^1.3.2",
     "nest-commander": "^3.12.0",
     "next": "14.0.4",
@@ -232,6 +232,7 @@
     "@swc/helpers": "~0.5.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "14.0.0",
+    "@types/addressparser": "^1.0.3",
     "@types/apollo-upload-client": "^17.0.2",
     "@types/bcrypt": "^5.0.0",
     "@types/better-sqlite3": "^7.6.8",

diff --git a/packages/twenty-docs/docs/start/self-hosting/docker-compose.mdx b/packages/twenty-docs/docs/start/self-hosting/docker-compose.mdx
@@ -23,8 +23,8 @@ VERSION=x.y.z BRANCH=branch-name bash <(curl -sL https://git.new/20)
 ## Manual installation
 
 1. Copy the [.env.example](https://github.com/twentyhq/twenty/blob/main/packages/twenty-docker/.env.example) into a `.env` in the same directory where your `docker-compose.yml` file will be
-2. Run the command `openssl rand -base64 32` three times, make note of the string for each
-3. In your .env file, replace the three "replace_me_with_a_random_string_access" with the three random strings you just generated.
+2. Run the command `openssl rand -base64 32` four times, make note of the string for each
+3. In your .env file, replace the three "replace_me_with_a_random_string_access" with the four random strings you just generated.
 
 ```
 ACCESS_TOKEN_SECRET=replace_me_with_a_random_string_access

diff --git a/packages/twenty-front/.storybook/main.ts b/packages/twenty-front/.storybook/main.ts
@@ -45,6 +45,15 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  build: {
+    test: {
+      disableMDXEntries: true,
+      disabledAddons: [
+        '@storybook/addon-docs',
+        '@storybook/addon-essentials/docs',
+      ],
+    },
+  },
   docs: {
     autodocs: false,
   },

diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "npx vite build && sh ./scripts/inject-runtime-env.sh",
     "build:sourcemaps": "VITE_BUILD_SOURCEMAP=true NODE_OPTIONS=--max-old-space-size=4096 npx nx build",
-    "storybook:build:chromatic": "nx storybook:build",
+    "storybook:build:chromatic": "nx storybook:build --configuration=test",
     "start:prod": "NODE_ENV=production npx vite --host",
     "tsup": "npx tsup"
   },

diff --git a/packages/twenty-front/project.json b/packages/twenty-front/project.json
@@ -64,30 +64,7 @@
         "env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
       },
       "configurations": {
-        "docs": {
-          "env": {
-            "NODE_OPTIONS": "--max_old_space_size=5000",
-            "STORYBOOK_SCOPE": "ui-docs"
-          }
-        },
-        "modules": {
-          "env": {
-            "NODE_OPTIONS": "--max_old_space_size=5000",
-            "STORYBOOK_SCOPE": "modules"
-          }
-        },
-        "pages": {
-          "env": {
-            "NODE_OPTIONS": "--max_old_space_size=5000",
-            "STORYBOOK_SCOPE": "pages"
-          }
-        },
-        "performance": {
-          "env": {
-            "NODE_OPTIONS": "--max_old_space_size=5000",
-            "STORYBOOK_SCOPE": "performance"
-          }
-        }
+        "test": {}
       }
     },
     "storybook:dev": {
@@ -102,10 +79,7 @@
     "storybook:static": {
       "options": { "port": 6006 },
       "configurations": {
-        "docs": { "env": { "STORYBOOK_SCOPE": "ui-docs" } },
-        "modules": { "env": { "STORYBOOK_SCOPE": "modules" } },
-        "pages": { "env": { "STORYBOOK_SCOPE": "pages" } },
-        "performance": { "env": { "STORYBOOK_SCOPE": "performance" } }
+        "test": {}
       }
     },
     "storybook:coverage": {
@@ -137,7 +111,7 @@
     "storybook:static:test": {
       "options": {
         "commands": [
-          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --configuration={args.scope} --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
+          "npx concurrently --kill-others --success=first -n SB,TEST 'nx storybook:static {projectName} --configuration=test --port={args.port}' 'npx wait-on tcp:{args.port} && nx storybook:test {projectName} --port={args.port} --configuration={args.scope}'"
         ],
         "port": 6006
       },

diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx
@@ -1,19 +1,44 @@
-import { Route, Routes, useLocation } from 'react-router-dom';
+import { StrictMode } from 'react';
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Outlet,
+  redirect,
+  Route,
+  RouterProvider,
+  Routes,
+  useLocation,
+} from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 
+import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { VerifyEffect } from '@/auth/components/VerifyEffect';
+import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
+import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
 import { billingState } from '@/client-config/states/billingState';
+import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
+import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
+import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
+import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
+import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
+import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
 import { BlankLayout } from '@/ui/layout/page/BlankLayout';
 import { DefaultLayout } from '@/ui/layout/page/DefaultLayout';
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
 import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
+import { UserProvider } from '@/users/components/UserProvider';
+import { UserProviderEffect } from '@/users/components/UserProviderEffect';
 import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect';
 import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect';
+import { PageChangeEffect } from '~/effect-components/PageChangeEffect';
 import { Authorize } from '~/pages/auth/Authorize';
 import { ChooseYourPlan } from '~/pages/auth/ChooseYourPlan';
 import { CreateProfile } from '~/pages/auth/CreateProfile';
 import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
+import { Invite } from '~/pages/auth/Invite';
 import { PasswordReset } from '~/pages/auth/PasswordReset';
 import { PaymentSuccess } from '~/pages/auth/PaymentSuccess';
 import { SignInUp } from '~/pages/auth/SignInUp';
@@ -54,21 +79,57 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 import { Tasks } from '~/pages/tasks/Tasks';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
-export const App = () => {
-  const billing = useRecoilValue(billingState);
+const ProvidersThatNeedRouterContext = () => {
   const { pathname } = useLocation();
   const pageTitle = getPageTitleFromPath(pathname);
 
   return (
-    <>
-      <PageTitle title={pageTitle} />
-      <GotoHotkeysEffect />
-      <CommandMenuEffect />
-      <Routes>
+    <ApolloProvider>
+      <ClientConfigProviderEffect />
+      <ClientConfigProvider>
+        <UserProviderEffect />
+        <UserProvider>
+          <ApolloMetadataClientProvider>
+            <ObjectMetadataItemsProvider>
+              <PrefetchDataProvider>
+                <AppThemeProvider>
+                  <SnackBarProvider>
+                    <DialogManagerScope dialogManagerScopeId="dialog-manager">
+                      <DialogManager>
+                        <StrictMode>
+                          <PromiseRejectionEffect />
+                          <CommandMenuEffect />
+                          <GotoHotkeysEffect />
+                          <PageTitle title={pageTitle} />
+                          <Outlet />
+                        </StrictMode>
+                      </DialogManager>
+                    </DialogManagerScope>
+                  </SnackBarProvider>
+                </AppThemeProvider>
+              </PrefetchDataProvider>
+              <PageChangeEffect />
+            </ObjectMetadataItemsProvider>
+          </ApolloMetadataClientProvider>
+        </UserProvider>
+      </ClientConfigProvider>
+    </ApolloProvider>
+  );
+};
+
+const createRouter = (isBillingEnabled?: boolean) =>
+  createBrowserRouter(
+    createRoutesFromElements(
+      <Route
+        element={<ProvidersThatNeedRouterContext />}
+        // To switch state to `loading` temporarily to enable us
+        // to set scroll position before the page is rendered
+        loader={async () => Promise.resolve(null)}
+      >
         <Route element={<DefaultLayout />}>
           <Route path={AppPath.Verify} element={<VerifyEffect />} />
           <Route path={AppPath.SignInUp} element={<SignInUp />} />
-          <Route path={AppPath.Invite} element={<SignInUp />} />
+          <Route path={AppPath.Invite} element={<Invite />} />
           <Route path={AppPath.ResetPassword} element={<PasswordReset />} />
           <Route path={AppPath.CreateWorkspace} element={<CreateWorkspace />} />
           <Route path={AppPath.CreateProfile} element={<CreateProfile />} />
@@ -119,12 +180,14 @@ export const App = () => {
                   path={SettingsPath.AccountsEmailsInboxSettings}
                   element={<SettingsAccountsEmailsInboxSettings />}
                 />
-                {billing?.isBillingEnabled && (
-                  <Route
-                    path={SettingsPath.Billing}
-                    element={<SettingsBilling />}
-                  />
-                )}
+                <Route
+                  path={SettingsPath.Billing}
+                  element={<SettingsBilling />}
+                  loader={() => {
+                    if (!isBillingEnabled) return redirect(AppPath.Index);
+                    return null;
+                  }}
+                />
                 <Route
                   path={SettingsPath.WorkspaceMembersPage}
                   element={<SettingsWorkspaceMembers />}
@@ -217,7 +280,12 @@ export const App = () => {
         <Route element={<BlankLayout />}>
           <Route path={AppPath.Authorize} element={<Authorize />} />
         </Route>
-      </Routes>
-    </>
+      </Route>,
+    ),
   );
-};
+
+export const App = () => {
+  const billing = useRecoilValue(billingState);
+
+  return <RouterProvider router={createRouter(billing?.isBillingEnabled)} />;
+};
diff --git a/packages/twenty-front/src/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/effect-components/PageChangeEffect.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { IconCheckbox } from 'twenty-ui';
 
@@ -20,10 +20,8 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useGetWorkspaceFromInviteHashLazyQuery } from '~/generated/graphql';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { isDefined } from '~/utils/isDefined';
-import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-
-import { useIsMatchingLocation } from '../hooks/useIsMatchingLocation';
 
 // TODO: break down into smaller functions and / or hooks
 export const PageChangeEffect = () => {
@@ -70,13 +68,6 @@ export const PageChangeEffect = () => {
       isMatchingLocation(AppPath.PlanRequired) ||
       isMatchingLocation(AppPath.PlanRequiredSuccess);
 
-    const navigateToSignUp = () => {
-      enqueueSnackBar('workspace does not exist', {
-        variant: 'error',
-      });
-      navigate(AppPath.SignInUp);
-    };
-
     if (
       onboardingStatus === OnboardingStatus.OngoingUserCreation &&
       !isMatchingOngoingUserCreationRoute &&
@@ -115,7 +106,8 @@ export const PageChangeEffect = () => {
       navigate(AppPath.CreateProfile);
     } else if (
       onboardingStatus === OnboardingStatus.Completed &&
-      isMatchingOnboardingRoute
+      isMatchingOnboardingRoute &&
+      !isMatchingLocation(AppPath.Invite)
     ) {
       navigate(AppPath.Index);
     } else if (
@@ -124,24 +116,6 @@ export const PageChangeEffect = () => {
       !isMatchingLocation(AppPath.PlanRequired)
     ) {
       navigate(AppPath.Index);
-    } else if (isMatchingLocation(AppPath.Invite)) {
-      const inviteHash =
-        matchPath({ path: '/invite/:workspaceInviteHash' }, location.pathname)
-          ?.params.workspaceInviteHash || '';
-
-      workspaceFromInviteHashQuery({
-        variables: {
-          inviteHash,
-        },
-        onCompleted: (data) => {
-          if (isUndefinedOrNull(data.findWorkspaceFromInviteHash)) {
-            navigateToSignUp();
-          }
-        },
-        onError: (_) => {
-          navigateToSignUp();
-        },
-      });
     }
   }, [
     enqueueSnackBar,