Merge branch 'main' into TWNTY-3514-1

Author: gitstart-twenty

.github/CONTRIBUTING.md

@@ -42,35 +42,39 @@ Therefore, ensure you are assigned to an issue before beginning work on it.
 git clone https://github.com/yourusername/twenty.git
 cd twenty
 ```
+3. **Create a New Branch:** Create a new branch for your changes instead of using the main branch.
 
+```shell
+git checkout -b your-branch-name
+```
 
-3. **Make Changes:** Make your desired changes and ensure that your code adheres to Twenty's coding standards.
+4. **Make Changes:** Make your desired changes and ensure that your code adheres to Twenty's coding standards.
 
 
-4. **Test Locally:** Test your changes locally to ensure they work as expected.
+5. **Test Locally:** Test your changes locally to ensure they work as expected.
 
 
-5. **Commit Changes:** Commit your changes with a clear and concise commit message.
+6. **Commit Changes:** Commit your changes with a clear and concise commit message.
 
 
 ```shell
 git commit -m "Add your detailed description here"
 ```
-6. **Push Changes:** Push your changes to your forked repository.
+7. **Push Changes:** Push your changes to your forked repository.
 
 
 ```shell
-git push origin branch-name
+git push origin your-branch-name
 ```
 
 
-7. **Create a Pull Request:** Go to the original Twenty repository and create a pull request. Please provide a detailed description of your changes. To have your pull request accepted, you must sign a CLA.
+8. **Create a Pull Request:** Go to the original Twenty repository and create a pull request. Please provide a detailed description of your changes. To have your pull request accepted, you must sign a CLA.
 
 
-8. **Code Review:** Your pull request will undergo a code review. Note that you might need to make any necessary adjustments based on feedback.
+9. **Code Review:** Your pull request will undergo a code review. Note that you might need to make any necessary adjustments based on feedback.
 
 
-9. **Merge:** Once approved, maintainers will merge your pull request into the main repository.
+10. **Merge:** Once approved, maintainers will merge your pull request into the main repository.
 
 
 <br>

.yarn/releases/yarn-4.0.2.cjs

@@ -2,4 +2,4 @@ enableInlineHunks: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.3.1.cjs

.yarn/releases/yarn-4.3.1.cjs

@@ -6,8 +6,9 @@
     "@aws-sdk/client-lambda": "^3.614.0",
     "@aws-sdk/client-s3": "^3.363.0",
     "@aws-sdk/credential-providers": "^3.363.0",
-    "@blocknote/core": "^0.12.1",
-    "@blocknote/react": "^0.12.2",
+    "@blocknote/core": "^0.15.3",
+    "@blocknote/mantine": "^0.15.3",
+    "@blocknote/react": "^0.15.3",
     "@chakra-ui/accordion": "^2.3.0",
     "@chakra-ui/system": "^2.6.0",
     "@codesandbox/sandpack-react": "^2.13.5",
@@ -192,6 +193,7 @@
     "tsup": "^8.0.1",
     "type-fest": "4.10.1",
     "typeorm": "^0.3.20",
+    "typescript": "5.3.3",
     "use-context-selector": "^2.0.0",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.0",
@@ -333,7 +335,6 @@
     "ts-node": "10.9.1",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^4.7.2",
-    "typescript": "5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-dts": "3.8.1",
@@ -347,7 +348,7 @@
   },
   "license": "AGPL-3.0",
   "name": "twenty",
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.3.1",
   "resolutions": {
     "graphql": "16.8.0",
     "type-fest": "4.10.1",

.yarnrc.yml

@@ -3077,8 +3077,8 @@ export type MessageChannelSyncStageEnumFilter = {
 
 /** Sync status */
 export enum MessageChannelSyncStatusEnum {
-  /** Completed */
-  Completed = 'COMPLETED',
+  /** Active */
+  Active = 'ACTIVE',
   /** Failed */
   Failed = 'FAILED',
   /** Failed Insufficient Permissions */

package.json

@@ -5,7 +5,7 @@ if [ "${ENABLE_DB_MIGRATIONS}" = "true" ] && [ ! -f /app/docker-data/db_status ]
     echo "Running database setup and migrations..."
 
     # Run setup and migration scripts
-    npx ts-node ./scripts/setup-db.ts
+    NODE_OPTIONS="--max-old-space-size=1500" npx ts-node ./scripts/setup-db.ts
     yarn database:migrate:prod
 
     # Mark initialization as done

packages/twenty-chrome-extension/src/generated/graphql.tsx

@@ -61,7 +61,7 @@
     "test": {},
     "storybook:build": {
       "options": {
-        "env": { "NODE_OPTIONS": "--max_old_space_size=5000" }
+        "env": { "NODE_OPTIONS": "--max_old_space_size=6000" }
       }
     },
     "storybook:serve:dev": {

packages/twenty-docker/twenty/entrypoint.sh

@@ -55,6 +55,7 @@ import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
 import { SettingsAccountsCalendars } from '~/pages/settings/accounts/SettingsAccountsCalendars';
 import { SettingsAccountsEmails } from '~/pages/settings/accounts/SettingsAccountsEmails';
 import { SettingsNewAccount } from '~/pages/settings/accounts/SettingsNewAccount';
+import { SettingsCRMMigration } from '~/pages/settings/crm-migration/SettingsCRMMigration';
 import { SettingsNewObject } from '~/pages/settings/data-model/SettingsNewObject';
 import { SettingsObjectDetail } from '~/pages/settings/data-model/SettingsObjectDetail';
 import { SettingsObjectEdit } from '~/pages/settings/data-model/SettingsObjectEdit';
@@ -81,6 +82,7 @@ import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
 import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
 import { Tasks } from '~/pages/tasks/Tasks';
 import { getPageTitleFromPath } from '~/utils/title-utils';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 
 const ProvidersThatNeedRouterContext = () => {
   const { pathname } = useLocation();
@@ -125,7 +127,10 @@ const ProvidersThatNeedRouterContext = () => {
   );
 };
 
-const createRouter = (isBillingEnabled?: boolean) =>
+const createRouter = (
+  isBillingEnabled?: boolean,
+  isCRMMigrationEnabled?: boolean,
+) =>
   createBrowserRouter(
     createRoutesFromElements(
       <Route
@@ -222,6 +227,12 @@ const createRouter = (isBillingEnabled?: boolean) =>
                   path={SettingsPath.Developers}
                   element={<SettingsDevelopers />}
                 />
+                {isCRMMigrationEnabled && (
+                  <Route
+                    path={SettingsPath.CRMMigration}
+                    element={<SettingsCRMMigration />}
+                  />
+                )}
                 <Route
                   path={AppPath.DevelopersCatchAll}
                   element={
@@ -292,6 +303,11 @@ const createRouter = (isBillingEnabled?: boolean) =>
 
 export const App = () => {
   const billing = useRecoilValue(billingState);
+  const isCRMMigrationEnabled = useIsFeatureEnabled('IS_CRM_MIGRATION_ENABLED');
 
-  return <RouterProvider router={createRouter(billing?.isBillingEnabled)} />;
+  return (
+    <RouterProvider
+      router={createRouter(billing?.isBillingEnabled, isCRMMigrationEnabled)}
+    />
+  );
 };

packages/twenty-front/project.json

@@ -165,7 +165,9 @@ export const PageChangeEffect = () => {
   useEffect(() => {
     if (
       isCaptchaScriptLoaded &&
-      isMatchingLocation(AppPath.SignInUp || AppPath.Invite)
+      (isMatchingLocation(AppPath.SignInUp) ||
+        isMatchingLocation(AppPath.Invite) ||
+        isMatchingLocation(AppPath.ResetPassword))
     ) {
       requestFreshCaptchaToken();
     }

packages/twenty-front/src/App.tsx

@@ -7,6 +7,7 @@ import { scrollPositionState } from '@/ui/utilities/scroll/states/scrollPosition
 import { isDefined } from '~/utils/isDefined';
 
 /**
+ * @deprecated We should now use useScrollToPosition instead
  * Note that `location.key` is used in the cache key, not `location.pathname`,
  * so the same path navigated to at different points in the history stack will
  * not share the same scroll position.

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -8,22 +8,25 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 
 const StyledAnimatedContainer = styled(motion.div)`
+  align-items: center;
   display: flex;
   justify-content: end;
 `;
 
 const StyledItemsContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 32px;
+  gap: 12px;
+  height: calc(100dvh - 32px);
   margin-bottom: auto;
+  max-width: 204px;
+  min-width: 204px;
   overflow-y: auto;
-  height: calc(100dvh - 32px);
-  min-width: 216px;
-  max-width: 216px;
 `;
 
 const StyledSkeletonContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: column;
   gap: 32px;
@@ -32,9 +35,13 @@ const StyledSkeletonContainer = styled.div`
 const StyledSkeletonTitleContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin-left: 12px;
-  margin-top: 8px;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  height: 32px;
+
+  max-width: 196px;
+  min-width: 196px;
 `;
 
 export const LeftPanelSkeletonLoader = () => {
@@ -54,17 +61,18 @@ export const LeftPanelSkeletonLoader = () => {
       }}
     >
       <StyledItemsContainer>
+        <StyledSkeletonTitleContainer>
+          <SkeletonTheme
+            baseColor={GRAY_SCALE.gray15}
+            highlightColor={BACKGROUND_LIGHT.transparent.lighter}
+            borderRadius={4}
+          >
+            <Skeleton width={96} height={16} />
+          </SkeletonTheme>
+        </StyledSkeletonTitleContainer>
         <StyledSkeletonContainer>
-          <StyledSkeletonTitleContainer>
-            <SkeletonTheme
-              baseColor={GRAY_SCALE.gray15}
-              highlightColor={BACKGROUND_LIGHT.transparent.lighter}
-              borderRadius={4}
-            >
-              <Skeleton width={96} height={16} />
-            </SkeletonTheme>
-          </StyledSkeletonTitleContainer>
           <MainNavigationDrawerItemsSkeletonLoader length={3} />
+          <MainNavigationDrawerItemsSkeletonLoader title length={2} />
           <MainNavigationDrawerItemsSkeletonLoader title length={3} />
         </StyledSkeletonContainer>
       </StyledItemsContainer>

packages/twenty-front/src/hooks/useScrollRestoration.ts

@@ -1,13 +1,15 @@
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { BACKGROUND_LIGHT, GRAY_SCALE } from 'twenty-ui';
 
 const StyledSkeletonContainer = styled.div`
+  align-items: flex-start;
+
   display: flex;
   flex-direction: column;
   gap: 6px;
-  margin-left: 12px;
-  margin-top: 8px;
+  min-width: 196px;
+  max-width: 196px;
 `;
 
 export const MainNavigationDrawerItemsSkeletonLoader = ({

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -1,5 +1,5 @@
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import styled from '@emotion/styled';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import {
   BACKGROUND_LIGHT,
   BORDER_COMMON,
@@ -45,8 +45,11 @@ const StyledRightPanelContainer = styled.div`
 
 const StyledRightPanelFlexContainer = styled.div`
   display: flex;
-  margin-top: 12px;
-  margin-bottom: 14px;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  height: 32px;
+  margin-bottom: 12px;
 `;
 
 const StyledSkeletonHeaderLoader = () => {

packages/twenty-front/src/loading/components/MainNavigationDrawerItemsSkeletonLoader.tsx

@@ -14,7 +14,7 @@ const StyledContainer = styled.div`
   height: 100dvh;
   min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
   width: 100%;
-  padding: 12px 8px 12px;
+  padding: 12px 8px 12px 8px;
   overflow: hidden;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {

packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, useRef } from 'react';
 import { createReactBlockSpec } from '@blocknote/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
+import { ChangeEvent, useRef } from 'react';
 
 import { Button } from '@/ui/input/button/components/Button';
 import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
@@ -65,6 +65,10 @@ export const FileBlock = createReactBlockSpec(
         }
         const fileUrl = await editor.uploadFile?.(file);
 
+        if (!isNonEmptyString(fileUrl)) {
+          return '';
+        }
+
         editor.updateBlock(block.id, {
           props: {
             ...block.props,

packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx

@@ -5,11 +5,15 @@ import {
   IconH1,
   IconH2,
   IconH3,
+  IconHeadphones,
   IconList,
+  IconListCheck,
   IconListNumbers,
+  IconMoodSmile,
   IconPhoto,
   IconPilcrow,
   IconTable,
+  IconVideo,
 } from 'twenty-ui';
 
 import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';
@@ -22,9 +26,13 @@ const Icons: Record<string, IconComponent> = {
   'Heading 3': IconH3,
   'Numbered List': IconListNumbers,
   'Bullet List': IconList,
+  'Check List': IconListCheck,
   Paragraph: IconPilcrow,
   Table: IconTable,
   Image: IconPhoto,
+  Video: IconVideo,
+  Audio: IconHeadphones,
+  Emoji: IconMoodSmile,
 };
 
 export const getSlashMenu = (editor: typeof blockSchema.BlockNoteEditor) => {

packages/twenty-front/src/modules/activities/blocks/FileBlock.tsx

@@ -1,7 +1,7 @@
-import { ClipboardEvent, useCallback, useMemo } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { useCreateBlockNote } from '@blocknote/react';
 import { isArray, isNonEmptyString } from '@sniptt/guards';
+import { ClipboardEvent, useCallback, useMemo } from 'react';
 import { useRecoilCallback, useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { useDebouncedCallback } from 'use-debounce';
@@ -30,7 +30,8 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 import { getFileType } from '../files/utils/getFileType';
 
-import '@blocknote/react/style.css';
+import '@blocknote/core/fonts/inter.css';
+import '@blocknote/mantine/style.css';
 
 type ActivityBodyEditorProps = {
   activityId: string;