Front components communication between host and remote (#17716)

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx

@@ -1,10 +1,13 @@
+import { currentUserState } from '@/auth/states/currentUserState';
 import { getMockFrontComponentUrl } from '@/front-components/utils/mockFrontComponent';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component';
+import { useRecoilValue } from 'recoil';
+import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component/renderer';
 import { isDefined } from 'twenty-shared/utils';
+
 type FrontComponentRendererProps = {
   frontComponentId: string;
 };
@@ -16,6 +19,7 @@ export const FrontComponentRenderer = ({
   const [hasError, setHasError] = useState(false);
 
   const { enqueueErrorSnackBar } = useSnackBar();
+  const currentUser = useRecoilValue(currentUserState);
 
   const handleError = (error?: Error) => {
     if (isDefined(error)) {
@@ -36,6 +40,9 @@ export const FrontComponentRenderer = ({
     <SharedFrontComponentRenderer
       theme={theme}
       componentUrl={getMockFrontComponentUrl()}
+      executionContext={{
+        userId: currentUser?.id,
+      }}
       onError={handleError}
     />
   );