Merge branch 'main' into brkuhgk/issue-4502

.dockerignore

@@ -1,2 +1,4 @@
-server/node_modules/
-server/.env
+.git
+.env
+node_modules
+.nx/cache

package.json

@@ -5,8 +5,8 @@
     "@apollo/server": "^4.7.3",
     "@aws-sdk/client-s3": "^3.363.0",
     "@aws-sdk/credential-providers": "^3.363.0",
-    "@blocknote/core": "^0.11.2",
-    "@blocknote/react": "^0.11.2",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
     "@chakra-ui/accordion": "^2.3.0",
     "@chakra-ui/system": "^2.6.0",
     "@codesandbox/sandpack-react": "^2.13.5",
@@ -108,6 +108,7 @@
     "libphonenumber-js": "^1.10.26",
     "lodash.camelcase": "^4.3.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.groupby": "^4.6.0",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
     "lodash.isobject": "^3.0.2",
@@ -229,6 +230,7 @@
     "@types/js-cookie": "^3.0.3",
     "@types/lodash.camelcase": "^4.3.7",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.isempty": "^4.4.7",
     "@types/lodash.isequal": "^4.5.7",
     "@types/lodash.isobject": "^3.0.7",

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts

@@ -19,6 +19,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts

@@ -19,6 +19,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { ThemeType } from '@/ui/theme/constants/ThemeLight';
 
 export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
-  backdrop-filter: blur(8px);
-  background: ${props.theme.background.transparent.secondary};
+  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+  background: ${props.theme.background.transparent.forBackdropFilter};
   box-shadow: ${props.theme.boxShadow.strong};
 `;

packages/twenty-docker/Makefile

@@ -29,6 +29,12 @@ prod-docs-build:
 prod-docs-run:
 	@docker run -d -p 3000:3000 --name twenty-docs twenty-docs
 
+prod-build:
+	@cd ../.. && docker build -f ./packages/twenty-docker/prod/twenty/Dockerfile --tag twenty . && cd -
+
+prod-run:
+	@docker run -d -p 3000:3000 --name twenty twenty
+
 prod-front-build:
 	@cd ../.. && docker build -f ./packages/twenty-docker/prod/twenty-front/Dockerfile --tag twenty-front . && cd -
 

packages/twenty-docker/prod/.env.example

@@ -0,0 +1,16 @@
+TAG=latest
+
+POSTGRES_ADMIN_PASSWORD=replace_me_with_a_strong_password
+
+PG_DATABASE_HOST=db:5432
+
+SERVER_URL=http://localhost:3000
+# Uncoment if you are serving your front on another server than the API (eg. bucket)
+# FRONT_BASE_URL=http://localhost:3000
+
+# Use openssl rand -base64 32 for each secret
+# ACCESS_TOKEN_SECRET=replace_me_with_a_random_string_access
+# LOGIN_TOKEN_SECRET=replace_me_with_a_random_string_login
+# REFRESH_TOKEN_SECRET=replace_me_with_a_random_string_refresh
+
+SIGN_IN_PREFILLED=true

packages/twenty-docker/prod/docker-compose.yml

@@ -0,0 +1,52 @@
+version: '3.8'
+name: twenty
+
+services:
+  server:
+    image: twentycrm/twenty:${TAG}
+    volumes:
+      - server-local-data:/app/.local-storage
+    ports:
+      - "3000:3000"
+    environment:
+      PORT: 3000
+      PG_DATABASE_URL: postgres://twenty:twenty@${PG_DATABASE_HOST}/default
+      SERVER_URL: ${SERVER_URL}
+      FRONT_BASE_URL: ${FRONT_BASE_URL:-$SERVER_URL}
+
+      ENABLE_DB_MIGRATIONS: true
+
+      SIGN_IN_PREFILLED: ${SIGN_IN_PREFILLED}
+      STORAGE_TYPE: local
+      STORAGE_LOCAL_PATH: .local-storage
+      ACCESS_TOKEN_SECRET: ${ACCESS_TOKEN_SECRET}
+      LOGIN_TOKEN_SECRET: ${LOGIN_TOKEN_SECRET}
+      REFRESH_TOKEN_SECRET: ${REFRESH_TOKEN_SECRET}
+    depends_on:
+      db:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD-SHELL", "curl --silent --fail http://localhost:3000/healthz | jq -e '.status == \"ok\"' > /dev/null || exit 1"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    restart: always
+
+  db:
+    image: twentycrm/twenty-postgres:${TAG}
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: ${POSTGRES_ADMIN_PASSWORD}
+      #POSTGRES_USER: ${POSTGRES_USER}
+      #POSTGRES_DB: ${POSTGRES_DB}
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U twenty -d default"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+    restart: always
+
+volumes:
+  db-data:
+  server-local-data:

packages/twenty-docker/prod/twenty-front/Dockerfile

@@ -1,14 +1,13 @@
 FROM node:18.17.1-alpine as twenty-front-build
 
 ARG REACT_APP_SERVER_BASE_URL
-ARG REACT_APP_SERVER_AUTH_URL
-ARG REACT_APP_SERVER_FILES_URL
 
 WORKDIR /app
 
 COPY ./package.json .
 COPY ./yarn.lock .
 COPY ./.yarnrc.yml .
+COPY ./nx.json .
 COPY ./tsconfig.base.json .
 COPY ./.yarn/releases /app/.yarn/releases
 COPY ./tools/eslint-rules /app/tools/eslint-rules

packages/twenty-docker/prod/twenty-server/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.16.0-alpine as twenty-server
+FROM node:18.16.0-alpine as twenty-server-build
 
 WORKDIR /app
 
@@ -10,12 +10,22 @@ COPY ./nx.json .
 COPY ./.yarn/releases /app/.yarn/releases
 COPY ./packages/twenty-emails /app/packages/twenty-emails
 COPY ./packages/twenty-server /app/packages/twenty-server
-RUN yarn workspaces focus twenty-emails twenty-server
+RUN yarn
+
 RUN npx nx reset
+RUN npx nx run twenty-server:build
+RUN mv /app/packages/twenty-server/dist /app/packages/twenty-server/build
 RUN npx nx run twenty-server:build:packageJson
 RUN mv /app/packages/twenty-server/dist/package.json /app/packages/twenty-server/package.json
-RUN yarn workspaces focus twenty-emails twenty-server
-RUN npx nx run twenty-server:build
+RUN rm -rf /app/packages/twenty-server/dist
+RUN mv /app/packages/twenty-server/build /app/packages/twenty-server/dist
+
+WORKDIR /app
+RUN yarn workspaces focus --production twenty-emails twenty-server
+
+FROM node:18.17.1-alpine as twenty-server
+
+COPY --from=twenty-server-build /app /app
 
 WORKDIR /app/packages/twenty-server
 

packages/twenty-docker/prod/twenty/Dockerfile

@@ -0,0 +1,77 @@
+# Base image for common dependencies
+FROM node:18.17.1-alpine as common-deps
+
+WORKDIR /app
+
+# Copy only the necessary files for dependency resolution
+COPY ./package.json ./yarn.lock ./.yarnrc.yml ./tsconfig.base.json ./nx.json /app/
+COPY ./.yarn/releases /app/.yarn/releases
+
+COPY ./packages/twenty-emails/package.json /app/packages/twenty-emails/
+COPY ./packages/twenty-server/package.json /app/packages/twenty-server/
+COPY ./packages/twenty-server/patches /app/packages/twenty-server/patches
+COPY ./packages/twenty-ui/package.json /app/packages/twenty-ui/
+COPY ./packages/twenty-front/package.json /app/packages/twenty-front/
+
+# Install all dependencies
+RUN yarn && yarn cache clean && npx nx reset
+
+
+# Build the back
+FROM common-deps as twenty-server-build
+
+# Copy sourcecode after installing dependences to accelerate subsequents builds
+COPY ./packages/twenty-emails /app/packages/twenty-emails
+COPY ./packages/twenty-server /app/packages/twenty-server
+
+RUN npx nx run twenty-server:build && \
+    mv /app/packages/twenty-server/dist /app/packages/twenty-server/build && \
+    npx nx run twenty-server:build:packageJson && \
+    mv /app/packages/twenty-server/dist/package.json /app/packages/twenty-server/package.json && \
+    rm -rf /app/packages/twenty-server/dist && \
+    mv /app/packages/twenty-server/build /app/packages/twenty-server/dist
+
+RUN yarn workspaces focus --production twenty-emails twenty-server
+
+
+# Build the front
+FROM common-deps as twenty-front-build
+
+ARG REACT_APP_SERVER_BASE_URL
+
+COPY ./packages/twenty-front /app/packages/twenty-front
+COPY ./packages/twenty-ui /app/packages/twenty-ui
+RUN yarn nx build twenty-front
+
+
+# Final stage: Run the application
+FROM node:18.17.1-alpine as twenty
+
+# Used to run healthcheck in docker
+RUN apk add --no-cache curl jq
+
+COPY ./packages/twenty-docker/prod/twenty/entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+WORKDIR /app/packages/twenty-server
+
+ARG REACT_APP_SERVER_BASE_URL
+ENV REACT_APP_SERVER_BASE_URL $REACT_APP_SERVER_BASE_URL
+
+# Copy built applications from previous stages
+COPY --chown=1000 --from=twenty-server-build /app /app
+COPY --chown=1000 --from=twenty-server-build /app/packages/twenty-server /app/packages/twenty-server
+COPY --chown=1000 --from=twenty-front-build /app/packages/twenty-front/build /app/packages/twenty-server/dist/front
+
+# Set metadata and labels
+LABEL org.opencontainers.image.source=https://github.com/twentyhq/twenty
+LABEL org.opencontainers.image.description="This image provides a consistent and reproducible environment for the backend and frontend, ensuring it deploys faster and runs the same way regardless of the deployment environment."
+
+RUN mkdir /app/.local-storage
+RUN chown -R 1000 /app
+
+# Use non root user with uid 1000
+USER 1000
+
+CMD ["node", "dist/src/main"]
+ENTRYPOINT ["/app/entrypoint.sh"]

packages/twenty-docker/prod/twenty/entrypoint.sh

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+# Check if the initialization has already been done and that we enabled automatic migration
+if [ "${ENABLE_DB_MIGRATIONS}" = "true" ] && [ ! -f /app/${STORAGE_LOCAL_PATH}/db_initialized ]; then
+    echo "Running database setup and migrations..."
+
+    # Run setup and migration scripts
+    npx ts-node ./scripts/setup-db.ts
+    yarn database:migrate:prod
+
+    # Mark initialization as done
+    echo "Successfuly migrated DB!"
+    touch /app/${STORAGE_LOCAL_PATH}/db_initialized
+fi
+
+# Continue with the original Docker command
+exec "$@"

packages/twenty-docs/docs/start/local-setup/troubleshooting.mdx

@@ -41,3 +41,7 @@ This should work out of the box with the eslint extension installed. If this doe
   "source.fixAll.eslint": "explicit"
 }
 ```
+
+## Docker container build
+
+To successfully build Docker images, ensure that your system has a minimum of 2GB of memory available. For users of Docker Desktop, please verify that you've allocated sufficient resources to Docker within the application's settings.

packages/twenty-docs/docs/start/self-hosting/cloud-providers.mdx

@@ -229,14 +229,6 @@ resource "azurerm_container_app" "twenty_front" {
         name  = "REACT_APP_SERVER_BASE_URL"
         value = "https://${azurerm_container_app.twenty_server.ingress[0].fqdn}"
       }
-      env {
-        name  = "REACT_APP_SERVER_AUTH_URL"
-        value = "https://${azurerm_container_app.twenty_server.ingress[0].fqdn}/auth"
-      }
-      env {
-        name  = "REACT_APP_SERVER_FILES_URL"
-        value = "https://${azurerm_container_app.twenty_server.ingress[0].fqdn}/files"
-      }
     }
   }
 }

packages/twenty-docs/docs/start/self-hosting/docker-compose.mdx

@@ -24,7 +24,7 @@ REFRESH_TOKEN_SECRET=replace_me_with_a_random_string_refresh
 
 ### Not able to login 
 
-If you encounter errors, (not able to log into the application after inputting an email) after the inital setup, try running `docker exec -it twenty_backend_1 yarn database:reset` and see if that solves your issue. 
+If you encounter errors, (not able to log into the application after inputting an email) after the inital setup, try running `docker exec -it twenty-backend-1 yarn database:reset` and see if that solves your issue. 
 
 ### Cannot connect to server, running behind a reverse proxy
 
@@ -35,7 +35,7 @@ Complete step three and four with :
 
 ## Production docker containers
 
-Prebuilt images for both Postgres, frontend, and back-end can be found on [docker hub](https://hub.docker.com/r/twentycrm/).
+Prebuilt images for both Postgres, frontend, and back-end can be found on [docker hub](https://hub.docker.com/r/twentycrm/). Note that the Postgres container will not persist data if your server is not configured to be stateful (for example Heroku). You probably want to configure a special stateful resource for the database.
 
 ## Environment Variables
 
@@ -59,8 +59,6 @@ services:
     environment:
       - SIGN_IN_PREFILLED=${SIGN_IN_PREFILLED}
       - REACT_APP_SERVER_BASE_URL=${LOCAL_SERVER_URL}
-      - REACT_APP_SERVER_AUTH_URL=${LOCAL_SERVER_URL}/auth
-      - REACT_APP_SERVER_FILES_URL=${LOCAL_SERVER_URL}/files
     depends_on:
       - backend
 

packages/twenty-docs/docs/start/self-hosting/self-hosting.mdx

@@ -23,8 +23,6 @@ import TabItem from '@theme/TabItem';
 
 <OptionTable options={[
     ['REACT_APP_SERVER_BASE_URL', 'http://localhost:3000', 'Url of backend server'],
-    ['REACT_APP_SERVER_AUTH_URL', 'http://localhost:3000/auth', 'Auth Url of backend server'],
-    ['REACT_APP_SERVER_FILES_URL', 'http://localhost:3000/files', 'Files Url of backend server'],
     ['GENERATE_SOURCEMAP', 'false', 'Generate source maps for debugging'],
     ['CHROMATIC_PROJECT_TOKEN', '', 'Chromatic token used for CI'],
     ]}></OptionTable>

packages/twenty-front/.env.example

@@ -2,6 +2,4 @@ REACT_APP_SERVER_BASE_URL=http://localhost:3000
 GENERATE_SOURCEMAP=false
 
 # ———————— Optional ————————
-# REACT_APP_SERVER_AUTH_URL=http://localhost:3000/auth
-# REACT_APP_SERVER_FILES_URL=http://localhost:3000/files
 # CHROMATIC_PROJECT_TOKEN=

packages/twenty-front/nyc.config.cjs

@@ -6,7 +6,7 @@ const globalCoverage = {
 };
 
 const modulesCoverage = {
-  statements: 75,
+  statements: 70,
   lines: 75,
   functions: 70,
   include: ['src/modules/**/*'],

packages/twenty-front/src/App.tsx

@@ -47,7 +47,7 @@ import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMemb
 import { Tasks } from '~/pages/tasks/Tasks';
 
 export const App = () => {
-  const billing = useRecoilValue(billingState());
+  const billing = useRecoilValue(billingState);
 
   return (
     <>

packages/twenty-front/src/config/index.ts

@@ -28,13 +28,3 @@ export const REACT_APP_SERVER_BASE_URL =
   window._env_?.REACT_APP_SERVER_BASE_URL ||
   process.env.REACT_APP_SERVER_BASE_URL ||
   getDefaultUrl();
-
-export const REACT_APP_SERVER_AUTH_URL =
-  window._env_?.REACT_APP_SERVER_AUTH_URL ||
-  process.env.REACT_APP_SERVER_AUTH_URL ||
-  REACT_APP_SERVER_BASE_URL + '/auth';
-
-export const REACT_APP_SERVER_FILES_URL =
-  window._env_?.REACT_APP_SERVER_FILES_URL ||
-  process.env.REACT_APP_SERVER_FILES_URL ||
-  REACT_APP_SERVER_BASE_URL + '/files';

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

@@ -5,7 +5,7 @@ import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuComma
 import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
 
 export const CommandMenuEffect = () => {
-  const setCommands = useSetRecoilState(commandMenuCommandsState());
+  const setCommands = useSetRecoilState(commandMenuCommandsState);
 
   const commands = COMMAND_MENU_COMMANDS;
   useEffect(() => {