diff --git a/packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessFrontComponentRendererEngineCommand.tsx b/packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessFrontComponentRendererEngineCommand.tsx index 19f949e894..ef345d3f91 100644 --- a/packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessFrontComponentRendererEngineCommand.tsx +++ b/packages/twenty-front/src/modules/command-menu-item/engine-command/components/HeadlessFrontComponentRendererEngineCommand.tsx @@ -3,10 +3,7 @@ import { Suspense, lazy } from 'react'; import { useHeadlessCommandContextApi } from '@/command-menu-item/engine-command/hooks/useHeadlessCommandContextApi'; import { CommandComponentInstanceContext } from '@/command-menu-item/engine-command/states/contexts/CommandComponentInstanceContext'; import { isHeadlessFrontComponentCommandContextApi } from '@/command-menu-item/engine-command/utils/isHeadlessFrontComponentCommandContextApi'; -import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; -import { isDefined } from 'twenty-shared/utils'; -import { PageLayoutType } from '~/generated-metadata/graphql'; const FrontComponentRenderer = lazy(() => import('@/front-components/components/FrontComponentRenderer').then( @@ -27,34 +24,18 @@ export const HeadlessFrontComponentRendererEngineCommand = () => { ); } - const objectNameSingular = context.objectMetadataItem?.nameSingular; - const recordId = context.selectedRecords.length === 1 ? context.selectedRecords[0].id : undefined; - // TODO: Remove layout rendering provider once we have refactored FrontComponentRenderer to have one headless renderer and a standard renderer return ( - - - + ); }; diff --git a/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx b/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx index 69b1603641..16408d2103 100644 --- a/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx +++ b/packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx @@ -18,11 +18,13 @@ import { FindOneFrontComponentDocument } from '~/generated-metadata/graphql'; type FrontComponentRendererProps = { frontComponentId: string; commandMenuItemId?: string; + recordId?: string; }; export const FrontComponentRenderer = ({ frontComponentId, commandMenuItemId, + recordId, }: FrontComponentRendererProps) => { const { colorScheme } = useContext(ThemeContext); const { enqueueErrorSnackBar } = useSnackBar(); @@ -33,7 +35,11 @@ export const FrontComponentRenderer = ({ ); const { executionContext, frontComponentHostCommunicationApi } = - useFrontComponentExecutionContext({ frontComponentId, commandMenuItemId }); + useFrontComponentExecutionContext({ + frontComponentId, + commandMenuItemId, + recordId, + }); const handleError = useCallback( (error?: Error) => { diff --git a/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx b/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx index 56e9253870..ce24830c6e 100644 --- a/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx +++ b/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx @@ -17,9 +17,6 @@ const mockCloseSidePanelMenu = jest.fn(); const mockSetCommandMenuItemProgress = jest.fn(); let mockCurrentUser: { id: string } | null = { id: 'user-123' }; -let mockTargetRecordIdentifier: { id: string } | undefined = { - id: 'record-456', -}; jest.mock('~/hooks/useNavigateApp', () => ({ useNavigateApp: () => mockNavigateApp, @@ -86,12 +83,6 @@ jest.mock('@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState', () => ({ useSetAtomFamilyState: () => mockSetCommandMenuItemProgress, })); -jest.mock('@/ui/layout/contexts/LayoutRenderingContext', () => ({ - useLayoutRenderingContext: () => ({ - targetRecordIdentifier: mockTargetRecordIdentifier, - }), -})); - const FRONT_COMPONENT_ID = 'fc-test-id'; const COMMAND_MENU_ITEM_ID = 'cmd-item-1'; @@ -99,7 +90,6 @@ describe('useFrontComponentExecutionContext', () => { beforeEach(() => { jest.clearAllMocks(); mockCurrentUser = { id: 'user-123' }; - mockTargetRecordIdentifier = { id: 'record-456' }; }); describe('executionContext', () => { @@ -107,6 +97,7 @@ describe('useFrontComponentExecutionContext', () => { const { result } = renderHook(() => useFrontComponentExecutionContext({ frontComponentId: FRONT_COMPONENT_ID, + recordId: 'record-456', }), ); @@ -129,9 +120,7 @@ describe('useFrontComponentExecutionContext', () => { expect(result.current.executionContext.userId).toBeNull(); }); - it('should return null recordId when no target record', () => { - mockTargetRecordIdentifier = undefined; - + it('should return null recordId when no recordId provided', () => { const { result } = renderHook(() => useFrontComponentExecutionContext({ frontComponentId: FRONT_COMPONENT_ID, diff --git a/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts b/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts index c8fdecb803..0848596818 100644 --- a/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts +++ b/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts @@ -14,7 +14,6 @@ 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 { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState'; import { assertUnreachable, isDefined } from 'twenty-shared/utils'; @@ -24,9 +23,11 @@ import { useNavigateApp } from '~/hooks/useNavigateApp'; export const useFrontComponentExecutionContext = ({ frontComponentId, commandMenuItemId, + recordId, }: { frontComponentId: string; commandMenuItemId?: string; + recordId?: string; }): { executionContext: FrontComponentExecutionContext; frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi; @@ -123,12 +124,10 @@ export const useFrontComponentExecutionContext = ({ } }; - const { targetRecordIdentifier } = useLayoutRenderingContext(); - const executionContext: FrontComponentExecutionContext = { frontComponentId, userId: currentUser?.id ?? null, - recordId: targetRecordIdentifier?.id ?? null, + recordId: recordId ?? null, }; const unmountFrontComponent: FrontComponentHostCommunicationApi['unmountFrontComponent'] = diff --git a/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx index 727f2611e1..bb386df8c0 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/front-component/components/FrontComponentWidgetRenderer.tsx @@ -7,6 +7,7 @@ import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutIn import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { PageLayoutWidgetNoDataDisplay } from '@/page-layout/widgets/components/PageLayoutWidgetNoDataDisplay'; import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType'; +import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext'; const StyledContainer = styled.div<{ isInEditMode: boolean }>` height: 100%; @@ -29,6 +30,7 @@ export const FrontComponentWidgetRenderer = ({ widget, }: FrontComponentWidgetRendererProps) => { const isPageLayoutInEditMode = useIsPageLayoutInEditMode(); + const { targetRecordIdentifier } = useLayoutRenderingContext(); const configuration = widget.configuration; @@ -44,7 +46,10 @@ export const FrontComponentWidgetRenderer = ({ return ( - + ); diff --git a/packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx b/packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx index 87e3f6788f..44a7a56a1e 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx +++ b/packages/twenty-front/src/modules/side-panel/pages/front-component/components/SidePanelFrontComponentPage.tsx @@ -2,10 +2,8 @@ import { Suspense, lazy } from 'react'; import { viewableFrontComponentIdComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState'; import { viewableFrontComponentRecordContextComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState'; -import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; import { isDefined } from 'twenty-shared/utils'; -import { PageLayoutType } from '~/generated-metadata/graphql'; const FrontComponentRenderer = lazy(() => import('@/front-components/components/FrontComponentRenderer').then( @@ -27,22 +25,11 @@ export const SidePanelFrontComponentPage = () => { } return ( - - - - - + + + ); };