twentyhq · charlesBochet · Dec 17, 2024 · Dec 3, 2024 · Dec 4, 2024 · Dec 5, 2024
diff --git a/package.json b/package.json
@@ -365,6 +365,7 @@
       "packages/twenty-zapier",
       "packages/twenty-website",
       "packages/twenty-e2e-testing",
+      "packages/twenty-shared",
       "tools/eslint-rules"
     ]
   }

diff --git a/packages/twenty-emails/src/emails/send-invite-link.email.tsx b/packages/twenty-emails/src/emails/send-invite-link.email.tsx
@@ -10,7 +10,7 @@ import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
 import { WhatIsTwenty } from 'src/components/WhatIsTwenty';
 import { capitalize } from 'src/utils/capitalize';
-import { getImageAbsoluteURI } from 'src/utils/getImageAbsoluteURI';
+import { getImageAbsoluteURI } from 'twenty-shared';
 
 type SendInviteLinkEmailProps = {
   link: string;

diff --git a/packages/twenty-emails/src/utils/getImageAbsoluteURI.ts b/packages/twenty-emails/src/utils/getImageAbsoluteURI.ts
diff --git a/packages/twenty-emails/tsconfig.json b/packages/twenty-emails/tsconfig.json
@@ -6,7 +6,10 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": ["vite/client"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "twenty-shared": ["packages/twenty-shared/src/*"]
+    }
   },
   "files": [],
   "include": [],

diff --git a/packages/twenty-front/index.html b/packages/twenty-front/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
 
-    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
+    <link rel="icon" type="image/x-icon" href="/icons/android/android-launchericon-48-48.png" data-rh="true"/>
     <link rel="apple-touch-icon" href="/icons/ios/192.png" />
 
     <meta name="theme-color" content="#000000" />

diff --git a/packages/twenty-front/src/modules/auth/components/Logo.tsx b/packages/twenty-front/src/modules/auth/components/Logo.tsx
@@ -1,5 +1,8 @@
 import styled from '@emotion/styled';
-import { getImageAbsoluteURI, isDefined } from 'twenty-ui';
+
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { isDefined } from 'twenty-ui';
 
 type LogoProps = {
   primaryLogo?: string | null;
@@ -47,14 +50,15 @@ export const Logo = (props: LogoProps) => {
 
   const primaryLogoUrl = getImageAbsoluteURI(
     props.primaryLogo ?? defaultPrimaryLogoUrl,
+    REACT_APP_SERVER_BASE_URL,
   );
   const secondaryLogoUrl = isDefined(props.secondaryLogo)
-    ? getImageAbsoluteURI(props.secondaryLogo)
+    ? getImageAbsoluteURI(props.secondaryLogo, REACT_APP_SERVER_BASE_URL)
     : null;
 
   return (
     <StyledContainer>
-      <StyledPrimaryLogo src={primaryLogoUrl} />
+      <StyledPrimaryLogo src={primaryLogoUrl ?? ''} />
       {secondaryLogoUrl && (
         <StyledSecondaryLogoContainer>
           <StyledSecondaryLogo src={secondaryLogoUrl} />

diff --git a/...ges/twenty-front/src/modules/domain-manager/hooks/useGetPublicWorkspaceDataBySubdomain.ts b/...ges/twenty-front/src/modules/domain-manager/hooks/useGetPublicWorkspaceDataBySubdomain.ts
@@ -20,7 +20,7 @@ export const useGetPublicWorkspaceDataBySubdomain = () => {
   const { setLastAuthenticateWorkspaceDomain } =
     useLastAuthenticatedWorkspaceDomain();
 
-  const { loading } = useGetPublicWorkspaceDataBySubdomainQuery({
+  const { loading, data, error } = useGetPublicWorkspaceDataBySubdomainQuery({
     skip:
       (isMultiWorkspaceEnabled && isDefaultDomain) ||
       isDefined(workspacePublicData),
@@ -38,5 +38,7 @@ export const useGetPublicWorkspaceDataBySubdomain = () => {
 
   return {
     loading,
+    data: data?.getPublicWorkspaceDataBySubdomain,
+    error,
   };
 };
diff --git a/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/AppNavigationDrawer.tsx
@@ -8,10 +8,12 @@ import {
   NavigationDrawerProps,
 } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 import { useIsSettingsDrawer } from '@/navigation/hooks/useIsSettingsDrawer';
 
-import { AdvancedSettingsToggle, getImageAbsoluteURI } from 'twenty-ui';
+import { AdvancedSettingsToggle } from 'twenty-ui';
 import { MainNavigationDrawerItems } from './MainNavigationDrawerItems';
 
 export type AppNavigationDrawerProps = {
@@ -42,7 +44,10 @@ export const AppNavigationDrawer = ({
     : {
         logo:
           (currentWorkspace?.logo &&
-            getImageAbsoluteURI(currentWorkspace.logo)) ??
+            getImageAbsoluteURI(
+              currentWorkspace.logo,
+              REACT_APP_SERVER_BASE_URL,
+            )) ??
           undefined,
         title: currentWorkspace?.displayName ?? undefined,
         children: <MainNavigationDrawerItems />,

diff --git a/packages/twenty-front/src/modules/object-metadata/utils/getAvatarUrl.ts b/packages/twenty-front/src/modules/object-metadata/utils/getAvatarUrl.ts
@@ -2,11 +2,11 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getLogoUrlFromDomainName } from '~/utils';
+import { getImageAbsoluteURI } from 'twenty-shared';
 import { isDefined } from '~/utils/isDefined';
-
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { Company } from '@/companies/types/Company';
 import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainName';
-import { getImageAbsoluteURI } from 'twenty-ui';
 import { getImageIdentifierFieldValue } from './getImageIdentifierFieldValue';
 
 export const getAvatarUrl = (
@@ -26,7 +26,7 @@ export const getAvatarUrl = (
 
   if (objectNameSingular === CoreObjectNameSingular.Person) {
     return isDefined(record.avatarUrl)
-      ? getImageAbsoluteURI(record.avatarUrl)
+      ? getImageAbsoluteURI(record.avatarUrl, REACT_APP_SERVER_BASE_URL)
       : '';
   }
 

diff --git a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx
@@ -1,15 +1,10 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import React from 'react';
-import {
-  Button,
-  IconPhotoUp,
-  IconTrash,
-  IconUpload,
-  IconX,
-  getImageAbsoluteURI,
-} from 'twenty-ui';
+import { Button, IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui';
+import { getImageAbsoluteURI } from 'twenty-shared';
 import { isDefined } from '~/utils/isDefined';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -115,7 +110,9 @@ export const ImageInput = ({
     hiddenFileInput.current?.click();
   };
 
-  const pictureURI = isDefined(picture) ? getImageAbsoluteURI(picture) : null;
+  const pictureURI = isDefined(picture)
+    ? getImageAbsoluteURI(picture, REACT_APP_SERVER_BASE_URL)
+    : null;
 
   return (
     <StyledContainer className={className}>

diff --git a/...t/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx b/...t/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx
@@ -18,8 +18,9 @@ import {
   IconChevronDown,
   MenuItemSelectAvatar,
   UndecoratedLink,
-  getImageAbsoluteURI,
 } from 'twenty-ui';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledLogo = styled.div<{ logo: string }>`
   background: url(${({ logo }) => logo});
@@ -102,9 +103,12 @@ export const MultiWorkspaceDropdownButton = ({
           isNavigationDrawerExpanded={isNavigationDrawerExpanded}
         >
           <StyledLogo
-            logo={getImageAbsoluteURI(
-              currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO,
-            )}
+            logo={
+              getImageAbsoluteURI(
+                currentWorkspace?.logo ?? '',
+                REACT_APP_SERVER_BASE_URL,
+              ) ?? ''
+            }
           />
           <NavigationDrawerAnimatedCollapseWrapper>
             <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
@@ -132,9 +136,12 @@ export const MultiWorkspaceDropdownButton = ({
                 text={workspace.displayName ?? '(No name)'}
                 avatar={
                   <StyledLogo
-                    logo={getImageAbsoluteURI(
-                      workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
-                    )}
+                    logo={
+                      getImageAbsoluteURI(
+                        workspace.logo ?? DEFAULT_WORKSPACE_LOGO,
+                        REACT_APP_SERVER_BASE_URL,
+                      ) ?? ''
+                    }
                   />
                 }
                 selected={currentWorkspace?.id === workspace.id}

diff --git a/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx b/packages/twenty-front/src/modules/ui/utilities/page-favicon/components/PageFavicon.tsx
@@ -1,18 +1,23 @@
 import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { Helmet } from 'react-helmet-async';
 import { useRecoilValue } from 'recoil';
-import { getImageAbsoluteURI } from 'twenty-ui';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 export const PageFavicon = () => {
   const workspacePublicData = useRecoilValue(workspacePublicDataState);
-
   return (
     <Helmet>
       {workspacePublicData?.logo && (
         <link
           rel="icon"
           type="image/x-icon"
-          href={getImageAbsoluteURI(workspacePublicData.logo)}
+          href={
+            getImageAbsoluteURI(
+              workspacePublicData?.logo,
+              REACT_APP_SERVER_BASE_URL,
+            ) ?? ''
+          }
         />
       )}
     </Helmet>

diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceProviderEffect.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceProviderEffect.tsx
@@ -1,6 +1,5 @@
 import { useRecoilValue } from 'recoil';
 
-import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState';
 import { useEffect } from 'react';
 import { isDefined } from '~/utils/isDefined';
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
@@ -9,8 +8,10 @@ import { lastAuthenticatedWorkspaceDomainState } from '@/domain-manager/states/l
 import { useReadWorkspaceSubdomainFromCurrentLocation } from '@/domain-manager/hooks/useReadWorkspaceSubdomainFromCurrentLocation';
 
 import { useIsCurrentLocationOnDefaultDomain } from '@/domain-manager/hooks/useIsCurrentLocationOnDefaultDomain';
+import { useGetPublicWorkspaceDataBySubdomain } from '@/domain-manager/hooks/useGetPublicWorkspaceDataBySubdomain';
 export const WorkspaceProviderEffect = () => {
-  const workspacePublicData = useRecoilValue(workspacePublicDataState);
+  const { data: getPublicWorkspaceData } =
+    useGetPublicWorkspaceDataBySubdomain();
 
   const lastAuthenticatedWorkspaceDomain = useRecoilValue(
     lastAuthenticatedWorkspaceDomainState,
@@ -26,16 +27,16 @@ export const WorkspaceProviderEffect = () => {
   useEffect(() => {
     if (
       isMultiWorkspaceEnabled &&
-      isDefined(workspacePublicData?.subdomain) &&
-      workspacePublicData.subdomain !== workspaceSubdomain
+      isDefined(getPublicWorkspaceData?.subdomain) &&
+      getPublicWorkspaceData.subdomain !== workspaceSubdomain
     ) {
-      redirectToWorkspaceDomain(workspacePublicData.subdomain);
+      redirectToWorkspaceDomain(getPublicWorkspaceData.subdomain);
     }
   }, [
     workspaceSubdomain,
     isMultiWorkspaceEnabled,
     redirectToWorkspaceDomain,
-    workspacePublicData,
+    getPublicWorkspaceData,
   ]);
 
   useEffect(() => {

diff --git a/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminFeatureFlags.tsx b/packages/twenty-front/src/pages/settings/admin-panel/SettingsAdminFeatureFlags.tsx
@@ -17,7 +17,6 @@ import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import {
   Button,
-  getImageAbsoluteURI,
   H1Title,
   H1TitleFontColor,
   H2Title,
@@ -26,6 +25,8 @@ import {
   Section,
   Toggle,
 } from 'twenty-ui';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 
 const StyledLinkContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
@@ -108,6 +109,7 @@ export const SettingsAdminFeatureFlags = () => {
       logo:
         getImageAbsoluteURI(
           isDefined(workspace.logo) ? workspace.logo : DEFAULT_WORKSPACE_LOGO,
+          REACT_APP_SERVER_BASE_URL,
         ) ?? '',
     })) ?? [];
 

diff --git a/...es/settings/serverless-functions/__stories__/SettingsServerlessFunctionDetail.stories.tsx b/...es/settings/serverless-functions/__stories__/SettingsServerlessFunctionDetail.stories.tsx
@@ -1,13 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/test';
 import { HttpResponse, graphql, http } from 'msw';
-import { getImageAbsoluteURI } from 'twenty-ui';
 import { SettingsServerlessFunctionDetail } from '~/pages/settings/serverless-functions/SettingsServerlessFunctionDetail';
 import {
   PageDecorator,
   PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getImageAbsoluteURI } from 'twenty-shared';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { sleep } from '~/utils/sleep';
 
 const SOURCE_CODE_FULL_PATH =
@@ -43,9 +44,15 @@ const meta: Meta<PageDecoratorArgs> = {
             },
           });
         }),
-        http.get(getImageAbsoluteURI(SOURCE_CODE_FULL_PATH) || '', () => {
-          return HttpResponse.text('export const handler = () => {}');
-        }),
+        http.get(
+          getImageAbsoluteURI(
+            SOURCE_CODE_FULL_PATH,
+            REACT_APP_SERVER_BASE_URL,
+          ) || '',
+          () => {
+            return HttpResponse.text('export const handler = () => {}');
+          },
+        ),
       ],
     },
   },

diff --git a/packages/twenty-front/tsconfig.json b/packages/twenty-front/tsconfig.json
@@ -24,7 +24,8 @@
       "@/*": ["packages/twenty-front/src/modules/*"],
       "~/*": ["packages/twenty-front/src/*"],
       "twenty-ui": ["packages/twenty-ui/src/index.ts"],
-      "@ui/*": ["packages/twenty-ui/src/*"]
+      "@ui/*": ["packages/twenty-ui/src/*"],
+      "twenty-shared": ["packages/twenty-shared/src/index.ts"]
     }
   },
   "files": [],

diff --git a/packages/twenty-shared/.eslintrc.cjs b/packages/twenty-shared/.eslintrc.cjs
@@ -0,0 +1,15 @@
+module.exports = {
+  extends: ['../../.eslintrc.cjs'],
+  ignorePatterns: ['!**/*'],
+  overrides: [
+    {
+      files: ['*.ts'],
+      parserOptions: {
+        project: ['packages/twenty-shared/tsconfig.{json,*.json}'],
+      },
+      rules: {
+        '@nx/dependency-checks': 'error',
+      },
+    },
+  ],
+};