diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DashboardActionsConfig.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DashboardActionsConfig.tsx index ead41a6287..d44e6b13e9 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DashboardActionsConfig.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DashboardActionsConfig.tsx @@ -1,20 +1,20 @@ import { CancelDashboardSingleRecordAction } from '@/action-menu/actions/record-actions/single-record/dashboard-actions/components/CancelDashboardSingleRecordAction'; import { EditDashboardSingleRecordAction } from '@/action-menu/actions/record-actions/single-record/dashboard-actions/components/EditDashboardSingleRecordAction'; import { SaveDashboardSingleRecordAction } from '@/action-menu/actions/record-actions/single-record/dashboard-actions/components/SaveDashboardSingleRecordAction'; -import { DashboardSingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/dashboard-actions/types/DashboardSingleRecordActionKeys'; import { SingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/types/SingleRecordActionsKey'; import { inheritActionsFromDefaultConfig } from '@/action-menu/actions/record-actions/utils/inheritActionsFromDefaultConfig'; import { ActionScope } from '@/action-menu/actions/types/ActionScope'; import { ActionType } from '@/action-menu/actions/types/ActionType'; import { ActionViewType } from '@/action-menu/actions/types/ActionViewType'; +import { PageLayoutSingleRecordActionKeys } from '@/page-layout/actions/PageLayoutSingleRecordActionKeys'; import { msg } from '@lingui/core/macro'; import { isDefined } from 'twenty-shared/utils'; import { IconDeviceFloppy, IconPencil, IconX } from 'twenty-ui/display'; export const DASHBOARD_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({ config: { - [DashboardSingleRecordActionKeys.EDIT_DASHBOARD]: { - key: DashboardSingleRecordActionKeys.EDIT_DASHBOARD, + [PageLayoutSingleRecordActionKeys.EDIT_LAYOUT]: { + key: PageLayoutSingleRecordActionKeys.EDIT_LAYOUT, label: msg`Edit Dashboard`, shortLabel: msg`Edit`, isPinned: true, @@ -30,8 +30,8 @@ export const DASHBOARD_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({ availableOn: [ActionViewType.SHOW_PAGE], component: , }, - [DashboardSingleRecordActionKeys.SAVE_DASHBOARD]: { - key: DashboardSingleRecordActionKeys.SAVE_DASHBOARD, + [PageLayoutSingleRecordActionKeys.SAVE_LAYOUT]: { + key: PageLayoutSingleRecordActionKeys.SAVE_LAYOUT, label: msg`Save Dashboard`, shortLabel: msg`Save`, isPinned: true, @@ -47,8 +47,8 @@ export const DASHBOARD_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({ availableOn: [ActionViewType.SHOW_PAGE], component: , }, - [DashboardSingleRecordActionKeys.CANCEL_DASHBOARD_EDITION]: { - key: DashboardSingleRecordActionKeys.CANCEL_DASHBOARD_EDITION, + [PageLayoutSingleRecordActionKeys.CANCEL_LAYOUT_EDITION]: { + key: PageLayoutSingleRecordActionKeys.CANCEL_LAYOUT_EDITION, label: msg`Cancel Edition`, shortLabel: msg`Cancel`, isPinned: true, diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/CancelDashboardSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/CancelDashboardSingleRecordAction.tsx index 10d4a3b064..a4b2c7995b 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/CancelDashboardSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/CancelDashboardSingleRecordAction.tsx @@ -1,8 +1,8 @@ import { Action } from '@/action-menu/actions/components/Action'; import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; -import { useResetDraftPageLayoutToPersistedPageLayout } from '@/dashboards/hooks/useResetDraftPageLayoutToPersistedPageLayout'; -import { useSetIsDashboardInEditMode } from '@/dashboards/hooks/useSetDashboardInEditMode'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout'; +import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode'; import { useRecoilValue } from 'recoil'; export const CancelDashboardSingleRecordAction = () => { @@ -12,15 +12,15 @@ export const CancelDashboardSingleRecordAction = () => { const pageLayoutId = selectedRecord?.pageLayoutId; - const { setIsDashboardInEditMode } = - useSetIsDashboardInEditMode(pageLayoutId); + const { setIsPageLayoutInEditMode } = + useSetIsPageLayoutInEditMode(pageLayoutId); const { resetDraftPageLayoutToPersistedPageLayout } = useResetDraftPageLayoutToPersistedPageLayout(pageLayoutId); const handleClick = () => { resetDraftPageLayoutToPersistedPageLayout(); - setIsDashboardInEditMode(false); + setIsPageLayoutInEditMode(false); }; return ; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/EditDashboardSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/EditDashboardSingleRecordAction.tsx index 6aada57384..bcdb9b90ac 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/EditDashboardSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/EditDashboardSingleRecordAction.tsx @@ -1,7 +1,7 @@ import { Action } from '@/action-menu/actions/components/Action'; import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; -import { useSetIsDashboardInEditMode } from '@/dashboards/hooks/useSetDashboardInEditMode'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; +import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode'; import { useRecoilValue } from 'recoil'; export const EditDashboardSingleRecordAction = () => { @@ -11,11 +11,11 @@ export const EditDashboardSingleRecordAction = () => { const pageLayoutId = selectedRecord?.pageLayoutId; - const { setIsDashboardInEditMode } = - useSetIsDashboardInEditMode(pageLayoutId); + const { setIsPageLayoutInEditMode } = + useSetIsPageLayoutInEditMode(pageLayoutId); const handleClick = () => { - setIsDashboardInEditMode(true); + setIsPageLayoutInEditMode(true); }; return ; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/SaveDashboardSingleRecordAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/SaveDashboardSingleRecordAction.tsx index 743b9e7b19..05c2bd40a6 100644 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/SaveDashboardSingleRecordAction.tsx +++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/components/SaveDashboardSingleRecordAction.tsx @@ -1,8 +1,8 @@ import { Action } from '@/action-menu/actions/components/Action'; import { useSelectedRecordIdOrThrow } from '@/action-menu/actions/record-actions/single-record/hooks/useSelectedRecordIdOrThrow'; -import { useSetIsDashboardInEditMode } from '@/dashboards/hooks/useSetDashboardInEditMode'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout'; +import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode'; import { useRecoilValue } from 'recoil'; export const SaveDashboardSingleRecordAction = () => { @@ -14,12 +14,12 @@ export const SaveDashboardSingleRecordAction = () => { const { savePageLayout } = useSavePageLayout(pageLayoutId); - const { setIsDashboardInEditMode } = - useSetIsDashboardInEditMode(pageLayoutId); + const { setIsPageLayoutInEditMode } = + useSetIsPageLayoutInEditMode(pageLayoutId); const handleClick = async () => { await savePageLayout(); - setIsDashboardInEditMode(false); + setIsPageLayoutInEditMode(false); }; return ; diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/types/DashboardSingleRecordActionKeys.ts b/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/types/DashboardSingleRecordActionKeys.ts deleted file mode 100644 index e3858ae994..0000000000 --- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/single-record/dashboard-actions/types/DashboardSingleRecordActionKeys.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum DashboardSingleRecordActionKeys { - EDIT_DASHBOARD = 'edit-dashboard-single-record', - SAVE_DASHBOARD = 'save-dashboard-single-record', - CANCEL_DASHBOARD_EDITION = 'cancel-dashboard-edition-single-record', -} diff --git a/packages/twenty-front/src/modules/dashboards/components/DashboardCard.tsx b/packages/twenty-front/src/modules/dashboards/components/DashboardCard.tsx deleted file mode 100644 index e09432a04a..0000000000 --- a/packages/twenty-front/src/modules/dashboards/components/DashboardCard.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { DashboardContentRenderer } from '@/dashboards/components/DashboardContentRenderer'; -import { type Dashboard } from '@/dashboards/components/types/Dashboard'; -import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; -import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; -import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord'; -import { isDefined } from 'twenty-shared/utils'; - -export const DashboardCard = () => { - const targetRecord = useTargetRecord(); - - const { record: dashboard } = useFindOneRecord({ - objectNameSingular: CoreObjectNameSingular.Dashboard, - objectRecordId: targetRecord.id, - }); - - if (!isDefined(dashboard)) { - return null; - } - - return ; -}; diff --git a/packages/twenty-front/src/modules/dashboards/components/DashboardContentRenderer.tsx b/packages/twenty-front/src/modules/dashboards/components/DashboardContentRenderer.tsx deleted file mode 100644 index 4c337acb15..0000000000 --- a/packages/twenty-front/src/modules/dashboards/components/DashboardContentRenderer.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { type Dashboard } from '@/dashboards/components/types/Dashboard'; -import { useSetIsDashboardInEditMode } from '@/dashboards/hooks/useSetDashboardInEditMode'; -import { PageLayoutRenderer } from '@/page-layout/components/PageLayoutRenderer'; -import { type PageLayout } from '@/page-layout/types/PageLayout'; -import { isPageLayoutEmpty } from '@/page-layout/utils/isPageLayoutEmpty'; - -type DashboardContentRendererProps = { - dashboard: Dashboard; -}; - -export const DashboardContentRenderer = ({ - dashboard, -}: DashboardContentRendererProps) => { - const pageLayoutId = dashboard.pageLayoutId; - - const { setIsDashboardInEditMode } = - useSetIsDashboardInEditMode(pageLayoutId); - - const onInitialized = (pageLayout: PageLayout) => { - if (isPageLayoutEmpty(pageLayout)) { - setIsDashboardInEditMode(true); - } else { - setIsDashboardInEditMode(false); - } - }; - - return ( - - ); -}; diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutDispatcher.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutDispatcher.tsx index 3ef6e54894..8b4b7a181d 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutDispatcher.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutDispatcher.tsx @@ -1,41 +1,11 @@ -import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu'; -import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton'; -import { DashboardCard } from '@/dashboards/components/DashboardCard'; -import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { PageLayoutRecordPageRenderer } from '@/object-record/record-show/components/PageLayoutRecordPageRenderer'; import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer'; -import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect'; import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect'; -import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext'; import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier'; -import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter'; -import styled from '@emotion/styled'; -import { useRecoilValue } from 'recoil'; import { PageLayoutType } from '~/generated/graphql'; -const StyledShowPageBannerContainer = styled.div` - z-index: 1; -`; - -const StyledShowPageRightContainer = styled.div` - display: flex; - flex-direction: column; - height: 100%; - justify-content: start; - width: 100%; - height: 100%; - overflow: auto; -`; - -const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>` - flex: 1; - overflow-y: auto; - background: ${({ theme }) => theme.background.primary}; - padding-bottom: ${({ theme, isInRightDrawer }) => - isInRightDrawer ? theme.spacing(16) : 0}; -`; - export const PageLayoutDispatcher = ({ targetRecordIdentifier, isInRightDrawer = false, @@ -43,71 +13,15 @@ export const PageLayoutDispatcher = ({ targetRecordIdentifier: TargetRecordIdentifier; isInRightDrawer?: boolean; }) => { - const recordDeletedAt = useRecoilValue( - recordStoreFamilySelector({ - recordId: targetRecordIdentifier.id, - fieldName: 'deletedAt', - }), - ); - if ( targetRecordIdentifier.targetObjectNameSingular === CoreObjectNameSingular.Dashboard ) { return ( - <> - - - - - {recordDeletedAt && ( - - - - )} - - - - - - - - - {isInRightDrawer && ( - , - , - ]} - /> - )} - - + ); } diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx new file mode 100644 index 0000000000..4c835d3fa6 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx @@ -0,0 +1,118 @@ +import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu'; +import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton'; +import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord'; +import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; +import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-record/record-show/components/RecordShowContainerContextStoreTargetedRecordsEffect'; +import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect'; +import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector'; +import { PageLayoutRenderer } from '@/page-layout/components/PageLayoutRenderer'; +import { useRecordPageLayoutId } from '@/page-layout/hooks/useRecordPageLayoutId'; +import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext'; +import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier'; +import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter'; +import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; +import { isDefined } from 'twenty-shared/utils'; +import { PageLayoutType } from '~/generated/graphql'; + +const StyledShowPageBannerContainer = styled.div` + z-index: 1; +`; + +const StyledShowPageRightContainer = styled.div` + display: flex; + flex-direction: column; + height: 100%; + justify-content: start; + width: 100%; + height: 100%; + overflow: auto; +`; + +const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>` + flex: 1; + overflow-y: auto; + background: ${({ theme }) => theme.background.primary}; + padding-bottom: ${({ theme, isInRightDrawer }) => + isInRightDrawer ? theme.spacing(16) : 0}; +`; + +export const PageLayoutRecordPageRenderer = ({ + targetRecordIdentifier, + isInRightDrawer, +}: { + targetRecordIdentifier: TargetRecordIdentifier; + isInRightDrawer: boolean; +}) => { + const recordDeletedAt = useRecoilValue( + recordStoreFamilySelector({ + recordId: targetRecordIdentifier.id, + fieldName: 'deletedAt', + }), + ); + + const { pageLayoutId } = useRecordPageLayoutId({ + id: targetRecordIdentifier.id, + targetObjectNameSingular: targetRecordIdentifier.targetObjectNameSingular, + }); + + return ( + <> + + + + + {recordDeletedAt && ( + + + + )} + + + + + {isDefined(pageLayoutId) && ( + + )} + + + + {isInRightDrawer && ( + , + , + ]} + /> + )} + + + ); +}; diff --git a/packages/twenty-front/src/modules/page-layout/actions/PageLayoutSingleRecordActionKeys.ts b/packages/twenty-front/src/modules/page-layout/actions/PageLayoutSingleRecordActionKeys.ts new file mode 100644 index 0000000000..8c9cb50044 --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/actions/PageLayoutSingleRecordActionKeys.ts @@ -0,0 +1,5 @@ +export enum PageLayoutSingleRecordActionKeys { + EDIT_LAYOUT = 'edit-layout-single-record', + SAVE_LAYOUT = 'save-layout-single-record', + CANCEL_LAYOUT_EDITION = 'cancel-layout-edition-single-record', +} diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx index 5b95121192..f8a0ca1d52 100644 --- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutRenderer.tsx @@ -1,49 +1,50 @@ import { PageLayoutInitializationQueryEffect } from '@/page-layout/components/PageLayoutInitializationQueryEffect'; import { PageLayoutRendererContent } from '@/page-layout/components/PageLayoutRendererContent'; +import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode'; import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext'; import { type PageLayout } from '@/page-layout/types/PageLayout'; import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId'; -import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext'; +import { isPageLayoutEmpty } from '@/page-layout/utils/isPageLayoutEmpty'; import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext'; import 'react-grid-layout/css/styles.css'; import 'react-resizable/css/styles.css'; -import { PageLayoutType } from '~/generated/graphql'; type PageLayoutRendererProps = { pageLayoutId: string; - onInitialized?: (pageLayout: PageLayout) => void; }; export const PageLayoutRenderer = ({ pageLayoutId, - onInitialized, }: PageLayoutRendererProps) => { + const { setIsPageLayoutInEditMode } = + useSetIsPageLayoutInEditMode(pageLayoutId); + + const onInitialized = (pageLayout: PageLayout) => { + if (isPageLayoutEmpty(pageLayout)) { + setIsPageLayoutInEditMode(true); + } else { + setIsPageLayoutInEditMode(false); + } + }; + return ( - - - - - - - - + + + + ); }; diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useRecordPageLayoutId.ts b/packages/twenty-front/src/modules/page-layout/hooks/useRecordPageLayoutId.ts new file mode 100644 index 0000000000..821d18b73d --- /dev/null +++ b/packages/twenty-front/src/modules/page-layout/hooks/useRecordPageLayoutId.ts @@ -0,0 +1,33 @@ +import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; +import { type ObjectRecord } from '@/object-record/types/ObjectRecord'; +import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier'; +import { isDefined } from 'twenty-shared/utils'; + +export const useRecordPageLayoutId = ({ + id, + targetObjectNameSingular, +}: TargetRecordIdentifier) => { + const { record } = useFindOneRecord( + { + objectNameSingular: targetObjectNameSingular, + objectRecordId: id, + }, + ); + + if (!isDefined(record)) { + return { + pageLayoutId: null, + }; + } + + if (isDefined(record.pageLayoutId)) { + return { + pageLayoutId: record.pageLayoutId, + }; + } + + // TODO: implement a default layout + return { + pageLayoutId: 'DEFAULT_LAYOUT_ID', + }; +}; diff --git a/packages/twenty-front/src/modules/dashboards/hooks/useResetDraftPageLayoutToPersistedPageLayout.ts b/packages/twenty-front/src/modules/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout.ts similarity index 100% rename from packages/twenty-front/src/modules/dashboards/hooks/useResetDraftPageLayoutToPersistedPageLayout.ts rename to packages/twenty-front/src/modules/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout.ts diff --git a/packages/twenty-front/src/modules/dashboards/hooks/useSetDashboardInEditMode.ts b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts similarity index 68% rename from packages/twenty-front/src/modules/dashboards/hooks/useSetDashboardInEditMode.ts rename to packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts index e82010f679..5e38d7cdd9 100644 --- a/packages/twenty-front/src/modules/dashboards/hooks/useSetDashboardInEditMode.ts +++ b/packages/twenty-front/src/modules/page-layout/hooks/useSetIsPageLayoutInEditMode.ts @@ -1,12 +1,12 @@ -import { DashboardSingleRecordActionKeys } from '@/action-menu/actions/record-actions/single-record/dashboard-actions/types/DashboardSingleRecordActionKeys'; import { forceRegisteredActionsByKeyState } from '@/action-menu/actions/states/forceRegisteredActionsMapComponentState'; +import { PageLayoutSingleRecordActionKeys } from '@/page-layout/actions/PageLayoutSingleRecordActionKeys'; import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext'; import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState'; import { useRecoilCallback } from 'recoil'; -export const useSetIsDashboardInEditMode = (pageLayoutIdFromProps: string) => { +export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => { const pageLayoutId = useAvailableComponentInstanceIdOrThrow( PageLayoutComponentInstanceContext, pageLayoutIdFromProps, @@ -17,19 +17,19 @@ export const useSetIsDashboardInEditMode = (pageLayoutIdFromProps: string) => { pageLayoutId, ); - const setIsDashboardInEditMode = useRecoilCallback( + const setIsPageLayoutInEditMode = useRecoilCallback( ({ set }) => (value: boolean) => { set(isPageLayoutInEditModeState, value); set(forceRegisteredActionsByKeyState, (prev) => ({ ...prev, - [DashboardSingleRecordActionKeys.EDIT_DASHBOARD]: !value, - [DashboardSingleRecordActionKeys.SAVE_DASHBOARD]: value, - [DashboardSingleRecordActionKeys.CANCEL_DASHBOARD_EDITION]: value, + [PageLayoutSingleRecordActionKeys.EDIT_LAYOUT]: !value, + [PageLayoutSingleRecordActionKeys.SAVE_LAYOUT]: value, + [PageLayoutSingleRecordActionKeys.CANCEL_LAYOUT_EDITION]: value, })); }, [isPageLayoutInEditModeState], ); - return { setIsDashboardInEditMode }; + return { setIsPageLayoutInEditMode }; }; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetPlaceholder.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetPlaceholder.tsx index 2f2346bc85..35cffd1db7 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetPlaceholder.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetPlaceholder.tsx @@ -1,6 +1,6 @@ import { useNavigatePageLayoutCommandMenu } from '@/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu'; import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; -import { useSetIsDashboardInEditMode } from '@/dashboards/hooks/useSetDashboardInEditMode'; +import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode'; import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext'; import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState'; import { WidgetContainer } from '@/page-layout/widgets/components/WidgetContainer'; @@ -27,14 +27,14 @@ export const WidgetPlaceholder = () => { isPageLayoutInEditModeComponentState, ); - const { setIsDashboardInEditMode } = - useSetIsDashboardInEditMode(pageLayoutId); + const { setIsPageLayoutInEditMode } = + useSetIsPageLayoutInEditMode(pageLayoutId); const { navigatePageLayoutCommandMenu } = useNavigatePageLayoutCommandMenu(); const handleClick = () => { if (!isPageLayoutInEditMode) { - setIsDashboardInEditMode(true); + setIsPageLayoutInEditMode(true); } navigatePageLayoutCommandMenu({ commandMenuPage: CommandMenuPages.PageLayoutWidgetTypeSelect,