fix: make LayoutRenderingContext optional in FrontComponentRenderer

The settings custom tab doesn't operate within a page layout, so forcing
a LayoutRenderingProvider wrapper with an arbitrary layout type is wrong.
Instead, make the context optional in useFrontComponentExecutionContext
so consumers without a page layout simply get recordId: null.

Made-with: Cursor

packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx

@@ -87,7 +87,7 @@ jest.mock('@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState', () => ({
 }));
 
 jest.mock('@/ui/layout/contexts/LayoutRenderingContext', () => ({
-  useLayoutRenderingContext: () => ({
+  useOptionalLayoutRenderingContext: () => ({
     targetRecordIdentifier: mockTargetRecordIdentifier,
   }),
 }));

packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts

@@ -14,7 +14,7 @@ import { useNavigateSidePanel } from '@/side-panel/hooks/useNavigateSidePanel';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { sidePanelSearchState } from '@/side-panel/states/sidePanelSearchState';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
+import { useOptionalLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState';
 import { assertUnreachable, isDefined } from 'twenty-shared/utils';
@@ -123,12 +123,12 @@ export const useFrontComponentExecutionContext = ({
       }
     };
 
-  const { targetRecordIdentifier } = useLayoutRenderingContext();
+  const layoutRenderingContext = useOptionalLayoutRenderingContext();
 
   const executionContext: FrontComponentExecutionContext = {
     frontComponentId,
     userId: currentUser?.id ?? null,
-    recordId: targetRecordIdentifier?.id ?? null,
+    recordId: layoutRenderingContext?.targetRecordIdentifier?.id ?? null,
   };
 
   const unmountFrontComponent: FrontComponentHostCommunicationApi['unmountFrontComponent'] =

packages/twenty-front/src/modules/ui/layout/contexts/LayoutRenderingContext.tsx

@@ -1,3 +1,5 @@
+import React, { useContext } from 'react';
+
 import { type PageLayoutType } from '~/generated-metadata/graphql';
 import { createRequiredContext } from '~/utils/createRequiredContext';
 import { type TargetRecordIdentifier } from './TargetRecordIdentifier';
@@ -13,5 +15,26 @@ export type LayoutRenderingContextType = {
   isInSidePanel: boolean;
 };
 
-export const [LayoutRenderingProvider, useLayoutRenderingContext] =
-  createRequiredContext<LayoutRenderingContextType>('LayoutRenderingContext');
+const LayoutRenderingContext = React.createContext<
+  LayoutRenderingContextType | undefined
+>(undefined);
+
+export const LayoutRenderingProvider = LayoutRenderingContext.Provider;
+
+export const useLayoutRenderingContext = (): LayoutRenderingContextType => {
+  const context = useContext(LayoutRenderingContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'LayoutRenderingContext not found. Please wrap your component tree with <LayoutRenderingProvider>.',
+    );
+  }
+
+  return context;
+};
+
+export const useOptionalLayoutRenderingContext = ():
+  | LayoutRenderingContextType
+  | undefined => {
+  return useContext(LayoutRenderingContext);
+};