houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use backend types in Record Page Layouts' frontend (#17794)

Browse Source
This commit is contained in:
Baptiste Devessier
2026-02-09 15:36:02 +01:00
committed by GitHub
parent 8e977912e2
commit 617f634b6d
27 changed files with 177 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx
+9 -3
View File
@@ -9,7 +9,11 @@ import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageL
import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { FeatureFlagKey, PageLayoutType } from '~/generated/graphql';
import {
FeatureFlagKey,
PageLayoutTabLayoutMode,
PageLayoutType,
} from '~/generated/graphql';
export const PageLayoutContent = () => {
const isRecordPageEnabled = useIsFeatureEnabled(
@@ -33,8 +37,10 @@ export const PageLayoutContent = () => {
const isRecordPageLayout =
currentPageLayout.type === PageLayoutType.RECORD_PAGE;
const isCanvasLayout = isRecordPageEnabled && layoutMode === 'canvas';
const isVerticalList = isRecordPageEnabled && layoutMode === 'vertical-list';
const isCanvasLayout =
isRecordPageEnabled && layoutMode === PageLayoutTabLayoutMode.CANVAS;
const isVerticalList =
isRecordPageEnabled && layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST;
if (isCanvasLayout) {
return <PageLayoutCanvasViewer widgets={activeTab.widgets} />;
packages/twenty-front/src/modules/page-layout/components/PageLayoutRendererContent.tsx
+2 -2
View File
@@ -120,8 +120,8 @@ export const PageLayoutRendererContent = () => {
<PageLayoutTabListEffect
tabs={sortedTabs}
componentInstanceId={tabListInstanceId}
defaultTabIdToFocusOnMobileAndSidePanel={
currentPageLayout.defaultTabIdToFocusOnMobileAndSidePanel
defaultTabToFocusOnMobileAndSidePanelId={
currentPageLayout.defaultTabToFocusOnMobileAndSidePanelId
}
/>
{(sortedTabs.length > 1 || isPageLayoutInEditMode) && (
packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListEffect.tsx
+3 -3
View File
@@ -12,14 +12,14 @@ type PageLayoutTabListEffectProps = Pick<
'componentInstanceId' | 'onChangeTab'
> & {
tabs: PageLayoutTab[];
defaultTabIdToFocusOnMobileAndSidePanel?: string;
defaultTabToFocusOnMobileAndSidePanelId?: string;
};
export const PageLayoutTabListEffect = ({
tabs,
onChangeTab,
componentInstanceId,
defaultTabIdToFocusOnMobileAndSidePanel,
defaultTabToFocusOnMobileAndSidePanelId,
}: PageLayoutTabListEffectProps) => {
const [activeTabId, setActiveTabId] = useRecoilComponentState(
activeTabIdComponentState,
@@ -32,7 +32,7 @@ export const PageLayoutTabListEffect = ({
const initialActiveTabId = getPageLayoutTabListInitialActiveTabId({
activeTabId,
tabs,
defaultTabIdToFocusOnMobileAndSidePanel,
defaultTabToFocusOnMobileAndSidePanelId,
isMobile,
isInRightDrawer,
});
packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts
+8 -7
View File
@@ -1,6 +1,7 @@
import { DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultCompanyRecordPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetConfigurationType,
WidgetType,
@@ -22,7 +23,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -59,7 +60,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -96,7 +97,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -133,7 +134,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Notes',
icon: 'IconNotes',
position: 400,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -170,7 +171,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Files',
icon: 'IconPaperclip',
position: 500,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -207,7 +208,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Emails',
icon: 'IconMail',
position: 600,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -244,7 +245,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Calendar',
icon: 'IconCalendarEvent',
position: 700,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_COMPANY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultNoteRecordPageLayout.ts
+9 -5
View File
@@ -1,6 +1,10 @@
import { DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultNoteRecordPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -88,7 +92,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Note',
icon: 'IconNotes',
position: 150,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -132,7 +136,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -169,7 +173,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Files',
icon: 'IconPaperclip',
position: 300,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_NOTE_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultOpportunityRecordPageLayout.ts
+8 -7
View File
@@ -1,6 +1,7 @@
import { DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultOpportunityRecordPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetConfigurationType,
WidgetType,
@@ -22,7 +23,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -59,7 +60,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -96,7 +97,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -133,7 +134,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Notes',
icon: 'IconNotes',
position: 400,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -170,7 +171,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Files',
icon: 'IconPaperclip',
position: 500,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -207,7 +208,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Emails',
icon: 'IconMail',
position: 600,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -244,7 +245,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Calendar',
icon: 'IconCalendarEvent',
position: 700,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultPersonRecordPageLayout.ts
+12 -8
View File
@@ -1,6 +1,10 @@
import { DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultPersonRecordPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -55,7 +59,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -92,7 +96,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -129,7 +133,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Notes',
icon: 'IconNotes',
position: 400,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -166,7 +170,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Files',
icon: 'IconPaperclip',
position: 500,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -203,7 +207,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Emails',
icon: 'IconMail',
position: 600,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -240,7 +244,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Calendar',
icon: 'IconCalendarEvent',
position: 700,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_PERSON_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultRecordPageLayout.ts
+10 -6
View File
@@ -1,6 +1,10 @@
import { DEFAULT_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultRecordPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -55,7 +59,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -92,7 +96,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -129,7 +133,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Notes',
icon: 'IconNotes',
position: 400,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -166,7 +170,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Files',
icon: 'IconPaperclip',
position: 500,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultTaskRecordPageLayout.ts
+9 -5
View File
@@ -1,6 +1,10 @@
import { DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultTaskRecordPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayout',
@@ -18,7 +22,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -85,7 +89,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Note',
icon: 'IconNotes',
position: 150,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -129,7 +133,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -166,7 +170,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
title: 'Files',
icon: 'IconPaperclip',
position: 300,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_TASK_RECORD_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowPageLayout.ts
+6 -2
View File
@@ -1,6 +1,10 @@
import { DEFAULT_WORKFLOW_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
/**
* Default Workflow PageLayout.
@@ -22,7 +26,7 @@ export const DEFAULT_WORKFLOW_PAGE_LAYOUT: PageLayout = {
id: 'workflow-tab-flow',
title: 'Flow',
position: 100,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
icon: 'IconSettings',
pageLayoutId: DEFAULT_WORKFLOW_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowRunPageLayout.ts
+8 -4
View File
@@ -1,6 +1,10 @@
import { DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowRunPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
/**
* Default WorkflowRun PageLayout.
@@ -15,7 +19,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
deletedAt: null,
defaultTabIdToFocusOnMobileAndSidePanel: 'workflow-run-tab-flow',
defaultTabToFocusOnMobileAndSidePanelId: 'workflow-run-tab-flow',
tabs: [
// Fields tab (position 100)
{
@@ -23,7 +27,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
id: 'workflow-run-tab-fields',
title: 'Home',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
icon: 'IconHome',
pageLayoutId: DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
@@ -61,7 +65,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
id: 'workflow-run-tab-flow',
title: 'Flow',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
icon: 'IconSettings',
pageLayoutId: DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowVersionPageLayout.ts
+8 -4
View File
@@ -1,6 +1,10 @@
import { DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID } from '@/page-layout/constants/DefaultWorkflowVersionPageLayoutId';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
/**
* Default WorkflowVersion PageLayout.
@@ -15,7 +19,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
deletedAt: null,
defaultTabIdToFocusOnMobileAndSidePanel: 'workflow-version-tab-flow',
defaultTabToFocusOnMobileAndSidePanelId: 'workflow-version-tab-flow',
tabs: [
// Fields tab (position 100)
{
@@ -24,7 +28,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
title: 'Home',
icon: 'IconHome',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
@@ -62,7 +66,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
title: 'Flow',
icon: 'IconSettings',
position: 200,
layoutMode: 'canvas',
layoutMode: PageLayoutTabLayoutMode.CANVAS,
pageLayoutId: DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT_ID,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/contexts/PageLayoutContentContext.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
import { type PageLayoutTabLayoutMode } from '~/generated/graphql';
import { createRequiredContext } from '~/utils/createRequiredContext';
export type PageLayoutContentContextType = {
packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutWithRelationWidgets.test.tsx
+2 -1
View File
@@ -8,6 +8,7 @@ import {
AggregateOperations,
BarChartLayout,
GraphOrderBy,
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetConfigurationType,
WidgetType,
@@ -35,7 +36,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
title: 'Fields',
icon: 'IconList',
position: 100,
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: 'test-layout',
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
packages/twenty-front/src/modules/page-layout/types/PageLayout.ts
-1
View File
@@ -3,5 +3,4 @@ import { type PageLayout as PageLayoutGenerated } from '~/generated/graphql';
export type PageLayout = Omit<PageLayoutGenerated, 'tabs'> & {
tabs: PageLayoutTab[];
defaultTabIdToFocusOnMobileAndSidePanel?: string;
};
packages/twenty-front/src/modules/page-layout/types/PageLayoutTab.ts
+1 -10
View File
@@ -1,15 +1,6 @@
import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
import { type PageLayoutTab as PageLayoutTabGenerated } from '~/generated/graphql';
export type PageLayoutTab = Omit<
PageLayoutTabGenerated,
'widgets' | 'layoutMode'
> & {
export type PageLayoutTab = Omit<PageLayoutTabGenerated, 'widgets'> & {
widgets: PageLayoutWidget[];
/**
* Only available behind IS_RECORD_PAGE_LAYOUT_ENABLED for now.
*/
layoutMode?: PageLayoutTabLayoutMode;
icon?: string | null;
};
packages/twenty-front/src/modules/page-layout/types/PageLayoutTabLayoutMode.ts
-1
View File
@@ -1 +0,0 @@
export type PageLayoutTabLayoutMode = 'grid' | 'vertical-list' | 'canvas';
packages/twenty-front/src/modules/page-layout/types/PageLayoutWidget.ts
-2
View File
@@ -1,6 +1,5 @@
import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
import { type RulesLogic } from 'json-logic-js';
import { type Nullable } from 'twenty-shared/types';
import {
type PageLayoutWidget as PageLayoutWidgetGenerated,
@@ -12,6 +11,5 @@ export type PageLayoutWidget = Omit<
'objectMetadataId' | 'configuration'
> & {
objectMetadataId?: Nullable<string>;
conditionalDisplay?: RulesLogic;
configuration: WidgetConfiguration | FieldsConfiguration | FieldConfiguration;
};
packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
+21 -21
View File
@@ -23,7 +23,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'tab-2',
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: true,
isInRightDrawer: true,
});
@@ -35,7 +35,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'tab-1',
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: false,
isInRightDrawer: false,
});
@@ -46,11 +46,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
describe('when activeTabId does not exist in tabs', () => {
describe('on mobile or in right drawer', () => {
it('should return defaultTabIdToFocusOnMobileAndSidePanel when on mobile and default exists', () => {
it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and default exists', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'non-existent-tab',
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: true,
isInRightDrawer: false,
});
@@ -58,11 +58,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
expect(result).toBe('tab-3');
});
it('should return defaultTabIdToFocusOnMobileAndSidePanel when in right drawer and default exists', () => {
it('should return defaultTabToFocusOnMobileAndSidePanelId when in right drawer and default exists', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-2',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-2',
isMobile: false,
isInRightDrawer: true,
});
@@ -70,11 +70,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
expect(result).toBe('tab-2');
});
it('should return defaultTabIdToFocusOnMobileAndSidePanel when on mobile and in right drawer', () => {
it('should return defaultTabToFocusOnMobileAndSidePanelId when on mobile and in right drawer', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-1',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
isMobile: true,
isInRightDrawer: true,
});
@@ -82,11 +82,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
expect(result).toBe('tab-1');
});
it('should fallback to first tab when defaultTabIdToFocusOnMobileAndSidePanel does not exist', () => {
it('should fallback to first tab when defaultTabToFocusOnMobileAndSidePanelId does not exist', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'non-existent-tab',
defaultTabToFocusOnMobileAndSidePanelId: 'non-existent-tab',
isMobile: true,
isInRightDrawer: false,
});
@@ -94,11 +94,11 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
expect(result).toBe('tab-1');
});
it('should fallback to first tab when defaultTabIdToFocusOnMobileAndSidePanel is undefined', () => {
it('should fallback to first tab when defaultTabToFocusOnMobileAndSidePanelId is undefined', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: undefined,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: true,
isInRightDrawer: false,
});
@@ -112,7 +112,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: false,
isInRightDrawer: false,
});
@@ -124,7 +124,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: undefined,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: false,
isInRightDrawer: false,
});
@@ -139,7 +139,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: [],
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-1',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
isMobile: false,
isInRightDrawer: false,
});
@@ -151,7 +151,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: [],
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-1',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-1',
isMobile: true,
isInRightDrawer: false,
});
@@ -163,7 +163,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: undefined,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: false,
isInRightDrawer: false,
});
@@ -177,7 +177,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: null,
tabs: singleTab,
defaultTabIdToFocusOnMobileAndSidePanel: undefined,
defaultTabToFocusOnMobileAndSidePanelId: undefined,
isMobile: false,
isInRightDrawer: false,
});
@@ -191,7 +191,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'tab-1',
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-2',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-2',
isMobile: true,
isInRightDrawer: true,
});
@@ -203,7 +203,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'non-existent',
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'tab-3',
defaultTabToFocusOnMobileAndSidePanelId: 'tab-3',
isMobile: true,
isInRightDrawer: false,
});
@@ -215,7 +215,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const result = getPageLayoutTabListInitialActiveTabId({
activeTabId: 'non-existent',
tabs: mockTabs,
defaultTabIdToFocusOnMobileAndSidePanel: 'invalid-tab',
defaultTabToFocusOnMobileAndSidePanelId: 'invalid-tab',
isMobile: true,
isInRightDrawer: false,
});
packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
+5 -3
View File
@@ -1,7 +1,7 @@
import { type DraftPageLayout } from '@/page-layout/types/DraftPageLayout';
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { PageLayoutType } from '~/generated/graphql';
import { getTabsByDisplayMode } from '@/page-layout/utils/getTabsByDisplayMode';
import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
describe('getTabsByDisplayMode', () => {
const createMockTab = (id: string): PageLayoutTab => ({
@@ -320,7 +320,7 @@ describe('getTabsByDisplayMode', () => {
it('should handle tabs with additional properties', () => {
const tabWithExtraProps: PageLayoutTab = {
...createMockTab('tab-1'),
layoutMode: 'grid' as const,
layoutMode: PageLayoutTabLayoutMode.GRID as const,
};
const pageLayout = createMockPageLayout([tabWithExtraProps]);
@@ -332,7 +332,9 @@ describe('getTabsByDisplayMode', () => {
});
expect(result.pinnedLeftTab).toBeUndefined();
expect(result.tabsToRenderInTabList[0]?.layoutMode).toBe('grid');
expect(result.tabsToRenderInTabList[0]?.layoutMode).toBe(
PageLayoutTabLayoutMode.GRID,
);
});
});
packages/twenty-front/src/modules/page-layout/utils/getPageLayoutTabListInitialActiveTabId.ts
+5 -5
View File
@@ -4,7 +4,7 @@ import { isDefined } from 'twenty-shared/utils';
type GetPageLayoutTabListInitialActiveTabIdParams = {
activeTabId: string | null;
tabs: PageLayoutTab[];
defaultTabIdToFocusOnMobileAndSidePanel?: string;
defaultTabToFocusOnMobileAndSidePanelId?: string;
isMobile: boolean;
isInRightDrawer: boolean;
};
@@ -12,7 +12,7 @@ type GetPageLayoutTabListInitialActiveTabIdParams = {
export const getPageLayoutTabListInitialActiveTabId = ({
activeTabId,
tabs,
defaultTabIdToFocusOnMobileAndSidePanel,
defaultTabToFocusOnMobileAndSidePanelId,
isMobile,
isInRightDrawer,
}: GetPageLayoutTabListInitialActiveTabIdParams): string | null => {
@@ -26,14 +26,14 @@ export const getPageLayoutTabListInitialActiveTabId = ({
if (
isOnMobileOrSidePanel &&
isDefined(defaultTabIdToFocusOnMobileAndSidePanel)
isDefined(defaultTabToFocusOnMobileAndSidePanelId)
) {
const defaultTabExists = tabs.some(
(tab) => tab.id === defaultTabIdToFocusOnMobileAndSidePanel,
(tab) => tab.id === defaultTabToFocusOnMobileAndSidePanelId,
);
if (defaultTabExists) {
return defaultTabIdToFocusOnMobileAndSidePanel;
return defaultTabToFocusOnMobileAndSidePanelId;
}
}
packages/twenty-front/src/modules/page-layout/utils/getTabLayoutMode.ts
+2 -3
View File
@@ -1,7 +1,6 @@
import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
import { assertPageLayoutTabHasDefinedLayoutModeOrThrow } from '@/page-layout/utils/assertPageLayoutTabHasDefinedLayoutModeOrThrow';
import { PageLayoutType } from '~/generated/graphql';
import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
type GetTabLayoutModeParams = {
tab: PageLayoutTab | undefined;
@@ -18,5 +17,5 @@ export const getTabLayoutMode = ({
return tab.layoutMode;
}
return 'grid';
return PageLayoutTabLayoutMode.GRID;
};
packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx
+7 -2
View File
@@ -29,7 +29,11 @@ import styled from '@emotion/styled';
import { type MouseEvent } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { IconLock } from 'twenty-ui/display';
import { PageLayoutType, WidgetType } from '~/generated/graphql';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetType,
} from '~/generated/graphql';
const StyledNoAccessContainer = styled.div`
align-items: center;
@@ -87,7 +91,8 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => {
const isRichTextWidget = widget.type === WidgetType.STANDALONE_RICH_TEXT;
const hideRichTextHeader = isRichTextWidget && !isPageLayoutInEditMode;
const showHeader = layoutMode !== 'canvas' && !hideRichTextHeader;
const showHeader =
layoutMode !== PageLayoutTabLayoutMode.CANVAS && !hideRichTextHeader;
const handleClick = () => {
handleEditWidget({
packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/DashboardWidgetPlaceholder.stories.tsx
+5 -2
View File
@@ -12,7 +12,7 @@ import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingCon
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { type MutableSnapshot } from 'recoil';
import { ComponentDecorator } from 'twenty-ui/testing';
import { PageLayoutType } from '~/generated/graphql';
import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
import { generatedMockObjectMetadataItems } from '~/testing/utils/generatedMockObjectMetadataItems';
const mockPageLayout: PageLayout = {
@@ -54,7 +54,10 @@ const meta: Meta<typeof DashboardWidgetPlaceholder> = {
}}
>
<PageLayoutContentProvider
value={{ tabId: 'tab-1', layoutMode: 'grid' }}
value={{
tabId: 'tab-1',
layoutMode: PageLayoutTabLayoutMode.GRID,
}}
>
<Story />
</PageLayoutContentProvider>
packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
+16 -17
View File
@@ -42,6 +42,7 @@ import {
AggregateOperations,
AxisNameDisplay,
BarChartLayout,
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetConfigurationType,
} from '~/generated/graphql';
@@ -311,7 +312,7 @@ export const WithNumberChart: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -396,7 +397,7 @@ export const WithGaugeChart: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -485,7 +486,7 @@ export const WithBarChart: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -577,7 +578,7 @@ export const SmallWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -673,7 +674,7 @@ export const MediumWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -769,7 +770,7 @@ export const LargeWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -861,7 +862,7 @@ export const WideWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -957,7 +958,7 @@ export const TallWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -1071,7 +1072,7 @@ export const WithManyToOneRelationFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -1177,7 +1178,7 @@ export const WithOneToManyRelationFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -1291,7 +1292,7 @@ export const OneToManyRelationFieldWidgetWithSeeAllButton: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -1405,7 +1406,7 @@ export const OnMobile: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -1501,7 +1502,7 @@ export const InSidePanel: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'grid',
layoutMode: PageLayoutTabLayoutMode.GRID,
tabId: TAB_ID_OVERVIEW,
}}
>
@@ -1589,10 +1590,8 @@ export const Catalog: CatalogStory<Story, typeof WidgetRenderer> = {
const layoutMode =
variant === 'canvas'
? ('canvas' as const)
: variant === 'side-column'
? ('grid' as const)
: ('grid' as const);
? PageLayoutTabLayoutMode.CANVAS
: PageLayoutTabLayoutMode.GRID;
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
+18 -17
View File
@@ -27,6 +27,7 @@ import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/con
import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
import { ComponentDecorator } from 'twenty-ui/testing';
import {
PageLayoutTabLayoutMode,
PageLayoutType,
WidgetConfigurationType,
WidgetType,
@@ -389,7 +390,7 @@ export const TextFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -481,7 +482,7 @@ export const AddressFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -576,7 +577,7 @@ export const NumberFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -668,7 +669,7 @@ export const LinkFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -770,7 +771,7 @@ export const ManyToOneRelationFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -867,7 +868,7 @@ export const OneToManyRelationFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -959,7 +960,7 @@ export const BooleanFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1050,7 +1051,7 @@ export const CurrencyFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1144,7 +1145,7 @@ export const EmailsFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1239,7 +1240,7 @@ export const PhonesFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1334,7 +1335,7 @@ export const SelectFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1427,7 +1428,7 @@ export const MultiSelectFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1531,7 +1532,7 @@ export const TimelineActivityRelationFieldWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1632,7 +1633,7 @@ export const ManyToOneRelationCardWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1737,7 +1738,7 @@ export const OneToManyRelationCardWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1836,7 +1837,7 @@ export const TimelineActivityRelationCardWidget: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
@@ -1998,7 +1999,7 @@ export const OneToManyRelationCardWidgetWithProgressiveLoading: Story = {
>
<PageLayoutContentProvider
value={{
layoutMode: 'vertical-list',
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
tabId: 'fields',
}}
>
packages/twenty-front/src/modules/page-layout/widgets/utils/getWidgetCardVariant.ts
+2 -3
View File
@@ -1,5 +1,4 @@
import { type PageLayoutTabLayoutMode } from '@/page-layout/types/PageLayoutTabLayoutMode';
import { PageLayoutType } from '~/generated/graphql';
import { PageLayoutTabLayoutMode, PageLayoutType } from '~/generated/graphql';
import { type WidgetCardVariant } from '~/modules/page-layout/widgets/types/WidgetCardVariant';
type GetWidgetCardVariantParams = {
@@ -21,7 +20,7 @@ export const getWidgetCardVariant = ({
return 'dashboard';
}
if (layoutMode === 'canvas') {
if (layoutMode === PageLayoutTabLayoutMode.CANVAS) {
return 'canvas';
}