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

Move is active to fe (#19649)

Browse Source 
## Context
Moving isActive filtering to the frontend for page layout tabs and
widgets, hiding inactive entities from the UI while keeping them in
state for future reactivation

Next we will implement deactivated standard tab re-activation during tab
creation (cc @Devessier)
<img width="234" height="303" alt="📋 Menu (Slots)"
src="https://github.com/user-attachments/assets/17a25ac6-55e2-4778-b7f0-e7554ed69704"
/>
This commit is contained in:
Weiko
2026-04-14 12:18:09 +02:00
committed by GitHub
parent b817bdca02
commit 47bdcb11d8
83 changed files with 481 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/dashboards/graphql/fragments/pageLayoutTabFragment.ts
+1
View File
@@ -14,6 +14,7 @@ export const PAGE_LAYOUT_TAB_FRAGMENT = gql`
...PageLayoutWidgetFragment
}
pageLayoutId
isActive
createdAt
updatedAt
}
packages/twenty-front/src/modules/metadata-store/utils/splitViewWithRelated.ts
+3 -1
View File
@@ -79,7 +79,9 @@ export const splitViewWithRelated = (
const { viewFields: _viewFields, ...viewFieldGroupProperties } =
viewFieldGroup;
flatViewFieldGroups.push(viewFieldGroupProperties);
flatViewFieldGroups.push({
...viewFieldGroupProperties,
});
}
}
packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutRenderer.stories.tsx
+5
View File
@@ -64,6 +64,7 @@ const mixedGraphsPageLayoutMocks = {
tabs: [
{
__typename: 'PageLayoutTab',
isActive: true,
id: 'mixed-tab',
title: 'Mixed Graphs',
position: 0,
@@ -74,6 +75,7 @@ const mixedGraphsPageLayoutMocks = {
widgets: [
{
__typename: 'PageLayoutWidget',
isActive: true,
id: 'number-widget',
pageLayoutTabId: 'mixed-tab',
type: WidgetType.GRAPH,
@@ -98,6 +100,7 @@ const mixedGraphsPageLayoutMocks = {
} satisfies PageLayoutWidget,
{
__typename: 'PageLayoutWidget',
isActive: true,
id: 'gauge-widget',
pageLayoutTabId: 'mixed-tab',
type: WidgetType.GRAPH,
@@ -123,6 +126,7 @@ const mixedGraphsPageLayoutMocks = {
} satisfies PageLayoutWidget,
{
__typename: 'PageLayoutWidget',
isActive: true,
id: 'pie-widget',
pageLayoutTabId: 'mixed-tab',
type: WidgetType.GRAPH,
@@ -149,6 +153,7 @@ const mixedGraphsPageLayoutMocks = {
} satisfies PageLayoutWidget,
{
__typename: 'PageLayoutWidget',
isActive: true,
id: 'bar-widget',
pageLayoutTabId: 'mixed-tab',
type: WidgetType.GRAPH,
packages/twenty-front/src/modules/page-layout/components/__stories__/PageLayoutTabList.stories.tsx
+4
View File
@@ -23,6 +23,7 @@ const StyledContainer = styled.div`
const createInitialTabs = (): PageLayoutTab[] => [
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: 'overview',
title: 'Overview',
@@ -36,6 +37,7 @@ const createInitialTabs = (): PageLayoutTab[] => [
},
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: 'revenue',
title: 'Revenue',
@@ -48,6 +50,7 @@ const createInitialTabs = (): PageLayoutTab[] => [
},
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: 'forecasts',
title: 'Forecasts',
@@ -77,6 +80,7 @@ const PageLayoutTabListPlayground = ({
...prev,
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: `new-tab-${nextIndex}`,
title: `New Tab ${nextIndex}`,
packages/twenty-front/src/modules/page-layout/constants/DefaultCompanyRecordPageLayout.ts
+14
View File
@@ -21,6 +21,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-fields',
isActive: true,
pageLayoutTabId: 'company-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -59,6 +61,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-timeline',
isActive: true,
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
@@ -71,6 +74,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-timeline',
isActive: true,
pageLayoutTabId: 'company-tab-timeline',
title: 'Timeline',
type: WidgetType.TIMELINE,
@@ -97,6 +101,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-tasks',
isActive: true,
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
@@ -109,6 +114,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-tasks',
isActive: true,
pageLayoutTabId: 'company-tab-tasks',
title: 'Tasks',
type: WidgetType.TASKS,
@@ -135,6 +141,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-notes',
isActive: true,
title: 'Notes',
icon: 'IconNotes',
position: 400,
@@ -147,6 +154,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-notes',
isActive: true,
pageLayoutTabId: 'company-tab-notes',
title: 'Notes',
type: WidgetType.NOTES,
@@ -173,6 +181,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-files',
isActive: true,
title: 'Files',
icon: 'IconPaperclip',
position: 500,
@@ -185,6 +194,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-files',
isActive: true,
pageLayoutTabId: 'company-tab-files',
title: 'Files',
type: WidgetType.FILES,
@@ -211,6 +221,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-emails',
isActive: true,
title: 'Emails',
icon: 'IconMail',
position: 600,
@@ -223,6 +234,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-emails',
isActive: true,
pageLayoutTabId: 'company-tab-emails',
title: 'Emails',
type: WidgetType.EMAILS,
@@ -249,6 +261,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'company-tab-calendar',
isActive: true,
title: 'Calendar',
icon: 'IconCalendarEvent',
position: 700,
@@ -261,6 +274,7 @@ export const DEFAULT_COMPANY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'company-widget-calendar',
isActive: true,
pageLayoutTabId: 'company-tab-calendar',
title: 'Calendar',
type: WidgetType.CALENDAR,
packages/twenty-front/src/modules/page-layout/constants/DefaultMessageThreadRecordPageLayout.ts
+2
View File
@@ -21,6 +21,7 @@ export const DEFAULT_MESSAGE_THREAD_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'message-thread-tab-home',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_MESSAGE_THREAD_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'message-thread-widget-email-thread',
isActive: true,
pageLayoutTabId: 'message-thread-tab-home',
title: 'Thread',
type: WidgetType.EMAIL_THREAD,
packages/twenty-front/src/modules/page-layout/constants/DefaultNoteRecordPageLayout.ts
+9
View File
@@ -21,6 +21,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'note-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'note-widget-fields',
isActive: true,
pageLayoutTabId: 'note-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -59,6 +61,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'note-widget-note',
isActive: true,
pageLayoutTabId: 'note-tab-fields',
title: 'Note',
type: WidgetType.FIELD_RICH_TEXT,
@@ -92,6 +95,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'note-tab-note',
isActive: true,
title: 'Note',
icon: 'IconNotes',
position: 150,
@@ -104,6 +108,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'note-widget-note',
isActive: true,
pageLayoutTabId: 'note-tab-note',
title: 'Note',
type: WidgetType.FIELD_RICH_TEXT,
@@ -137,6 +142,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'note-tab-timeline',
isActive: true,
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
@@ -149,6 +155,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'note-widget-timeline',
isActive: true,
pageLayoutTabId: 'note-tab-timeline',
title: 'Timeline',
type: WidgetType.TIMELINE,
@@ -175,6 +182,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'note-tab-files',
isActive: true,
title: 'Files',
icon: 'IconPaperclip',
position: 300,
@@ -187,6 +195,7 @@ export const DEFAULT_NOTE_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'note-widget-files',
isActive: true,
pageLayoutTabId: 'note-tab-files',
title: 'Files',
type: WidgetType.FILES,
packages/twenty-front/src/modules/page-layout/constants/DefaultOpportunityRecordPageLayout.ts
+14
View File
@@ -21,6 +21,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-fields',
isActive: true,
pageLayoutTabId: 'opportunity-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -59,6 +61,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-timeline',
isActive: true,
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
@@ -71,6 +74,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-timeline',
isActive: true,
pageLayoutTabId: 'opportunity-tab-timeline',
title: 'Timeline',
type: WidgetType.TIMELINE,
@@ -97,6 +101,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-tasks',
isActive: true,
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
@@ -109,6 +114,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-tasks',
isActive: true,
pageLayoutTabId: 'opportunity-tab-tasks',
title: 'Tasks',
type: WidgetType.TASKS,
@@ -135,6 +141,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-notes',
isActive: true,
title: 'Notes',
icon: 'IconNotes',
position: 400,
@@ -147,6 +154,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-notes',
isActive: true,
pageLayoutTabId: 'opportunity-tab-notes',
title: 'Notes',
type: WidgetType.NOTES,
@@ -173,6 +181,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-files',
isActive: true,
title: 'Files',
icon: 'IconPaperclip',
position: 500,
@@ -185,6 +194,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-files',
isActive: true,
pageLayoutTabId: 'opportunity-tab-files',
title: 'Files',
type: WidgetType.FILES,
@@ -211,6 +221,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-emails',
isActive: true,
title: 'Emails',
icon: 'IconMail',
position: 600,
@@ -223,6 +234,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-emails',
isActive: true,
pageLayoutTabId: 'opportunity-tab-emails',
title: 'Emails',
type: WidgetType.EMAILS,
@@ -249,6 +261,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'opportunity-tab-calendar',
isActive: true,
title: 'Calendar',
icon: 'IconCalendarEvent',
position: 700,
@@ -261,6 +274,7 @@ export const DEFAULT_OPPORTUNITY_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'opportunity-widget-calendar',
isActive: true,
pageLayoutTabId: 'opportunity-tab-calendar',
title: 'Calendar',
type: WidgetType.CALENDAR,
packages/twenty-front/src/modules/page-layout/constants/DefaultPersonRecordPageLayout.ts
+14
View File
@@ -21,6 +21,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-fields',
isActive: true,
pageLayoutTabId: 'person-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -59,6 +61,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-timeline',
isActive: true,
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
@@ -71,6 +74,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-timeline',
isActive: true,
pageLayoutTabId: 'person-tab-timeline',
title: 'Timeline',
type: WidgetType.TIMELINE,
@@ -97,6 +101,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-tasks',
isActive: true,
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
@@ -109,6 +114,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-tasks',
isActive: true,
pageLayoutTabId: 'person-tab-tasks',
title: 'Tasks',
type: WidgetType.TASKS,
@@ -135,6 +141,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-notes',
isActive: true,
title: 'Notes',
icon: 'IconNotes',
position: 400,
@@ -147,6 +154,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-notes',
isActive: true,
pageLayoutTabId: 'person-tab-notes',
title: 'Notes',
type: WidgetType.NOTES,
@@ -173,6 +181,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-files',
isActive: true,
title: 'Files',
icon: 'IconPaperclip',
position: 500,
@@ -185,6 +194,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-files',
isActive: true,
pageLayoutTabId: 'person-tab-files',
title: 'Files',
type: WidgetType.FILES,
@@ -211,6 +221,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-emails',
isActive: true,
title: 'Emails',
icon: 'IconMail',
position: 600,
@@ -223,6 +234,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-emails',
isActive: true,
pageLayoutTabId: 'person-tab-emails',
title: 'Emails',
type: WidgetType.EMAILS,
@@ -249,6 +261,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'person-tab-calendar',
isActive: true,
title: 'Calendar',
icon: 'IconCalendarEvent',
position: 700,
@@ -261,6 +274,7 @@ export const DEFAULT_PERSON_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'person-widget-calendar',
isActive: true,
pageLayoutTabId: 'person-tab-calendar',
title: 'Calendar',
type: WidgetType.CALENDAR,
packages/twenty-front/src/modules/page-layout/constants/DefaultRecordPageLayout.ts
+10
View File
@@ -21,6 +21,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'default-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'default-widget-fields',
isActive: true,
pageLayoutTabId: 'default-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -59,6 +61,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'default-tab-timeline',
isActive: true,
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
@@ -71,6 +74,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'default-widget-timeline',
isActive: true,
pageLayoutTabId: 'default-tab-timeline',
title: 'Timeline',
type: WidgetType.TIMELINE,
@@ -97,6 +101,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'default-tab-tasks',
isActive: true,
title: 'Tasks',
icon: 'IconCheckbox',
position: 300,
@@ -109,6 +114,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'default-widget-tasks',
isActive: true,
pageLayoutTabId: 'default-tab-tasks',
title: 'Tasks',
type: WidgetType.TASKS,
@@ -135,6 +141,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'default-tab-notes',
isActive: true,
title: 'Notes',
icon: 'IconNotes',
position: 400,
@@ -147,6 +154,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'default-widget-notes',
isActive: true,
pageLayoutTabId: 'default-tab-notes',
title: 'Notes',
type: WidgetType.NOTES,
@@ -173,6 +181,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'default-tab-files',
isActive: true,
title: 'Files',
icon: 'IconPaperclip',
position: 500,
@@ -185,6 +194,7 @@ export const DEFAULT_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'default-widget-files',
isActive: true,
pageLayoutTabId: 'default-tab-files',
title: 'Files',
type: WidgetType.FILES,
packages/twenty-front/src/modules/page-layout/constants/DefaultTaskRecordPageLayout.ts
+9
View File
@@ -21,6 +21,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'task-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -33,6 +34,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'task-widget-fields',
isActive: true,
pageLayoutTabId: 'task-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -56,6 +58,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'task-widget-note',
isActive: true,
pageLayoutTabId: 'task-tab-fields',
title: 'Note',
type: WidgetType.FIELD_RICH_TEXT,
@@ -89,6 +92,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'task-tab-note',
isActive: true,
title: 'Note',
icon: 'IconNotes',
position: 150,
@@ -101,6 +105,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'task-widget-note',
isActive: true,
pageLayoutTabId: 'task-tab-note',
title: 'Note',
type: WidgetType.FIELD_RICH_TEXT,
@@ -134,6 +139,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'task-tab-timeline',
isActive: true,
title: 'Timeline',
icon: 'IconTimelineEvent',
position: 200,
@@ -146,6 +152,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'task-widget-timeline',
isActive: true,
pageLayoutTabId: 'task-tab-timeline',
title: 'Timeline',
type: WidgetType.TIMELINE,
@@ -172,6 +179,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'task-tab-files',
isActive: true,
title: 'Files',
icon: 'IconPaperclip',
position: 300,
@@ -184,6 +192,7 @@ export const DEFAULT_TASK_RECORD_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'task-widget-files',
isActive: true,
pageLayoutTabId: 'task-tab-files',
title: 'Files',
type: WidgetType.FILES,
packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowPageLayout.ts
+2
View File
@@ -26,6 +26,7 @@ export const DEFAULT_WORKFLOW_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'workflow-tab-flow',
isActive: true,
title: 'Flow',
position: 100,
layoutMode: PageLayoutTabLayoutMode.CANVAS,
@@ -38,6 +39,7 @@ export const DEFAULT_WORKFLOW_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'workflow-widget-flow',
isActive: true,
pageLayoutTabId: 'workflow-tab-flow',
title: 'Flow',
type: WidgetType.WORKFLOW,
packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowRunPageLayout.ts
+4
View File
@@ -27,6 +27,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'workflow-run-tab-fields',
isActive: true,
title: 'Home',
position: 100,
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
@@ -39,6 +40,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'workflow-run-widget-fields',
isActive: true,
pageLayoutTabId: 'workflow-run-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -66,6 +68,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'workflow-run-tab-flow',
isActive: true,
title: 'Flow',
position: 200,
layoutMode: PageLayoutTabLayoutMode.CANVAS,
@@ -78,6 +81,7 @@ export const DEFAULT_WORKFLOW_RUN_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'workflow-run-widget-flow',
isActive: true,
pageLayoutTabId: 'workflow-run-tab-flow',
title: 'Flow',
type: WidgetType.WORKFLOW_RUN,
packages/twenty-front/src/modules/page-layout/constants/DefaultWorkflowVersionPageLayout.ts
+4
View File
@@ -27,6 +27,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'workflow-version-tab-fields',
isActive: true,
title: 'Home',
icon: 'IconHome',
position: 100,
@@ -39,6 +40,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'workflow-version-widget-fields',
isActive: true,
pageLayoutTabId: 'workflow-version-tab-fields',
title: 'Fields',
type: WidgetType.FIELDS,
@@ -66,6 +68,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
__typename: 'PageLayoutTab',
applicationId: '',
id: 'workflow-version-tab-flow',
isActive: true,
title: 'Flow',
icon: 'IconSettings',
position: 200,
@@ -78,6 +81,7 @@ export const DEFAULT_WORKFLOW_VERSION_PAGE_LAYOUT: PageLayout = {
{
__typename: 'PageLayoutWidget',
id: 'workflow-version-widget-flow',
isActive: true,
pageLayoutTabId: 'workflow-version-tab-flow',
title: 'Flow',
type: WidgetType.WORKFLOW_VERSION,
packages/twenty-front/src/modules/page-layout/graphql/fragments/pageLayoutWidgetFragment.ts
+1
View File
@@ -8,6 +8,7 @@ export const PAGE_LAYOUT_WIDGET_FRAGMENT = gql`
objectMetadataId
createdAt
updatedAt
isActive
deletedAt
conditionalDisplay
conditionalAvailabilityExpression
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCanMovePageLayoutWidgetDown.test.tsx
+2
View File
@@ -24,6 +24,7 @@ const makeWidget = (
id,
pageLayoutTabId: tabId,
title: id,
isActive: true,
type: WidgetType.FIELDS,
gridPosition: { column: 0, columnSpan: 1, row: 0, rowSpan: 1 },
configuration: { __typename: 'FieldsConfiguration' as const },
@@ -46,6 +47,7 @@ const makeTab = (
id,
applicationId: '',
title: id,
isActive: true,
position,
layoutMode,
pageLayoutId: '',
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCanMovePageLayoutWidgetUp.test.tsx
+2
View File
@@ -24,6 +24,7 @@ const makeWidget = (
id,
pageLayoutTabId: tabId,
title: id,
isActive: true,
type: WidgetType.FIELDS,
gridPosition: { column: 0, columnSpan: 1, row: 0, rowSpan: 1 },
configuration: { __typename: 'FieldsConfiguration' as const },
@@ -46,6 +47,7 @@ const makeTab = (
id,
applicationId: '',
title: id,
isActive: true,
position,
layoutMode,
pageLayoutId: '',
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCreatePageLayoutGraphWidget.test.tsx
+2
View File
@@ -79,6 +79,7 @@ describe('useCreatePageLayoutGraphWidget', () => {
id: 'tab-1',
applicationId: '',
title: 'Tab 1',
isActive: true,
position: 0,
pageLayoutId: '',
widgets: [],
@@ -162,6 +163,7 @@ describe('useCreatePageLayoutGraphWidget', () => {
id: 'tab-1',
applicationId: '',
title: 'Tab 1',
isActive: true,
position: 0,
pageLayoutId: '',
widgets: [],
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useCreatePageLayoutTab.test.tsx
+1
View File
@@ -308,6 +308,7 @@ describe('useCreatePageLayoutTab', () => {
id: 'existing-tab',
applicationId: '',
title: 'Existing Tab',
isActive: true,
position: 0,
pageLayoutId: 'test-layout',
widgets: [],
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useInsertCreatedWidgetAtContext.test.tsx
+2
View File
@@ -25,6 +25,7 @@ const makeWidget = (
id,
pageLayoutTabId: tabId,
title: id,
isActive: true,
type: WidgetType.FIELDS,
gridPosition: { column: 0, columnSpan: 1, row: 0, rowSpan: 1 },
configuration: { __typename: 'FieldsConfiguration' as const },
@@ -46,6 +47,7 @@ const makeTab = (
id,
applicationId: '',
title: id,
isActive: true,
position,
pageLayoutId: '',
widgets,
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useMovePageLayoutWidgetDown.test.tsx
+2
View File
@@ -24,6 +24,7 @@ const makeWidget = (
id,
pageLayoutTabId: tabId,
title: id,
isActive: true,
type: WidgetType.FIELDS,
gridPosition: { column: 0, columnSpan: 1, row: 0, rowSpan: 1 },
configuration: { __typename: 'FieldsConfiguration' as const },
@@ -45,6 +46,7 @@ const makeTab = (
id,
applicationId: '',
title: id,
isActive: true,
position,
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: '',
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useMovePageLayoutWidgetUp.test.tsx
+2
View File
@@ -24,6 +24,7 @@ const makeWidget = (
id,
pageLayoutTabId: tabId,
title: id,
isActive: true,
type: WidgetType.FIELDS,
gridPosition: { column: 0, columnSpan: 1, row: 0, rowSpan: 1 },
configuration: { __typename: 'FieldsConfiguration' as const },
@@ -45,6 +46,7 @@ const makeTab = (
id,
applicationId: '',
title: id,
isActive: true,
position,
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: '',
packages/twenty-front/src/modules/page-layout/hooks/__tests__/useMoveWidgetToTab.test.tsx
+2
View File
@@ -24,6 +24,7 @@ const makeWidget = (
id,
pageLayoutTabId: tabId,
title: id,
isActive: true,
type: WidgetType.FIELDS,
gridPosition: { column: 0, columnSpan: 1, row: 0, rowSpan: 1 },
configuration: { __typename: 'FieldsConfiguration' as const },
@@ -45,6 +46,7 @@ const makeTab = (
id,
applicationId: '',
title: id,
isActive: true,
position,
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
pageLayoutId: '',
packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutDraftState.test.tsx
+2
View File
@@ -90,6 +90,7 @@ describe('usePageLayoutDraftState', () => {
id: 'tab-1',
applicationId: '',
title: 'Tab 1',
isActive: true,
position: 0,
pageLayoutId: '',
createdAt: new Date().toISOString(),
@@ -100,6 +101,7 @@ describe('usePageLayoutDraftState', () => {
id: 'widget-1',
pageLayoutTabId: 'tab-1',
title: 'New Widget',
isActive: true,
type: WidgetType.GRAPH,
gridPosition: { row: 2, column: 2, rowSpan: 2, columnSpan: 2 },
configuration: {
packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutWithRelationWidgets.test.tsx
+5
View File
@@ -35,6 +35,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
applicationId: '',
id: 'tab-1',
title: 'Fields',
isActive: true,
icon: 'IconList',
position: 100,
layoutMode: PageLayoutTabLayoutMode.VERTICAL_LIST,
@@ -48,6 +49,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
id: 'widget-fields',
pageLayoutTabId: 'tab-1',
title: 'Fields',
isActive: true,
type: WidgetType.FIELDS,
objectMetadataId: null,
gridPosition: {
@@ -71,6 +73,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
id: 'widget-notes',
pageLayoutTabId: 'tab-1',
title: 'Notes',
isActive: true,
type: WidgetType.NOTES,
objectMetadataId: null,
gridPosition: {
@@ -93,6 +96,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
id: 'widget-other',
pageLayoutTabId: 'tab-1',
title: 'Other',
isActive: true,
type: WidgetType.GRAPH,
objectMetadataId: null,
gridPosition: {
@@ -217,6 +221,7 @@ describe('usePageLayoutWithRelationWidgets', () => {
id: 'widget-other',
pageLayoutTabId: 'tab-1',
title: 'Other',
isActive: true,
type: WidgetType.GRAPH,
objectMetadataId: null,
gridPosition: {
packages/twenty-front/src/modules/page-layout/hooks/useCreatePageLayoutTab.ts
+1
View File
@@ -54,6 +54,7 @@ export const useCreatePageLayoutTab = ({
const newTab: PageLayoutTab = {
id: newTabId,
applicationId: '',
isActive: true,
title: title || `Tab ${tabsLength + 1}`,
position: maxPosition + 1,
pageLayoutId: pageLayoutId,
packages/twenty-front/src/modules/page-layout/hooks/useCreatePendingFieldsWidgetViews.ts
-1
View File
@@ -39,7 +39,6 @@ export const useCreatePendingFieldsWidgetViews = () => {
if (widget.type !== WidgetType.FIELDS) {
return false;
}
const viewId = getWidgetConfigurationViewId(widget.configuration);
return isDefined(viewId) && !persistedWidgetIds.has(widget.id);
packages/twenty-front/src/modules/page-layout/hooks/useDeletePageLayoutWidget.ts
-54
View File
@@ -2,18 +2,14 @@ import { PageLayoutComponentInstanceContext } from '@/page-layout/states/context
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { removeWidgetFromTab } from '@/page-layout/utils/removeWidgetFromTab';
import { removeWidgetLayoutFromTab } from '@/page-layout/utils/removeWidgetLayoutFromTab';
import { useDeleteViewForFieldsWidget } from '@/page-layout/widgets/fields/hooks/useDeleteViewForFieldsWidget';
import { useDeleteViewForRecordTableWidget } from '@/page-layout/widgets/record-table/hooks/useDeleteViewForRecordTableWidget';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { WidgetType } from '~/generated-metadata/graphql';
export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
@@ -38,16 +34,6 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
const { closeSidePanelMenu } = useSidePanelMenu();
const { deleteViewForFieldsWidget } = useDeleteViewForFieldsWidget();
const { deleteViewForRecordTableWidget } =
useDeleteViewForRecordTableWidget();
const pageLayoutPersistedState = useAtomComponentStateCallbackState(
pageLayoutPersistedComponentState,
pageLayoutId,
);
const store = useStore();
const deletePageLayoutWidget = useCallback(
@@ -61,43 +47,6 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
tab.widgets.some((widget) => widget.id === widgetId),
);
const widgetToDelete = tabWithWidget?.widgets.find(
(widget) => widget.id === widgetId,
);
const persisted = store.get(pageLayoutPersistedState);
const persistedWidgetIds = new Set(
persisted?.tabs.flatMap((tab) =>
tab.widgets.map((widget) => widget.id),
) ?? [],
);
const isWidgetPersisted = persistedWidgetIds.has(widgetId);
if (
isWidgetPersisted &&
isDefined(widgetToDelete) &&
widgetToDelete.type === WidgetType.RECORD_TABLE &&
'viewId' in widgetToDelete.configuration &&
isDefined(widgetToDelete.configuration.viewId)
) {
deleteViewForRecordTableWidget(
widgetToDelete.configuration.viewId as string,
);
}
if (
isWidgetPersisted &&
isDefined(widgetToDelete) &&
widgetToDelete.type === WidgetType.FIELDS &&
'viewId' in widgetToDelete.configuration &&
isDefined(widgetToDelete.configuration.viewId)
) {
deleteViewForFieldsWidget(
widgetToDelete.configuration.viewId as string,
);
}
const tabId = tabWithWidget?.id;
if (isDefined(tabId)) {
@@ -124,12 +73,9 @@ export const useDeletePageLayoutWidget = (pageLayoutIdFromProps?: string) => {
},
[
closeSidePanelMenu,
deleteViewForFieldsWidget,
deleteViewForRecordTableWidget,
pageLayoutCurrentLayoutsState,
pageLayoutDraftState,
pageLayoutEditingWidgetIdState,
pageLayoutPersistedState,
store,
],
);
packages/twenty-front/src/modules/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow.ts
+5 -3
View File
@@ -27,20 +27,22 @@ export const usePageLayoutTabWithVisibleWidgetsOrThrow = (
throw new Error('Tab not found');
}
const activeWidgets = tab.widgets.filter((widget) => widget.isActive);
if (isPageLayoutInEditMode) {
return {
...tab,
widgets:
tab.layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST
? sortWidgetsByVerticalListPosition(tab.widgets)
: tab.widgets,
? sortWidgetsByVerticalListPosition(activeWidgets)
: activeWidgets,
};
}
const context = buildWidgetVisibilityContext({ isMobile, isInSidePanel });
const visibleWidgets = filterVisibleWidgets({
widgets: tab.widgets,
widgets: activeWidgets,
context,
});
packages/twenty-front/src/modules/page-layout/hooks/useRefreshPageLayoutAfterReset.ts
+35
View File
@@ -8,6 +8,10 @@ import { useExitLayoutCustomizationMode } from '@/layout-customization/hooks/use
import { useInvalidateMetadataStore } from '@/metadata-store/hooks/useInvalidateMetadataStore';
import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { fieldsWidgetEditorModeDraftComponentState } from '@/page-layout/states/fieldsWidgetEditorModeDraftComponentState';
import { fieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/fieldsWidgetGroupsDraftComponentState';
import { fieldsWidgetUngroupedFieldsDraftComponentState } from '@/page-layout/states/fieldsWidgetUngroupedFieldsDraftComponentState';
import { hasInitializedFieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/hasInitializedFieldsWidgetGroupsDraftComponentState';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
@@ -50,6 +54,28 @@ export const useRefreshPageLayoutAfterReset = (
pageLayoutId,
);
const fieldsWidgetGroupsDraftState = useAtomComponentStateCallbackState(
fieldsWidgetGroupsDraftComponentState,
pageLayoutId,
);
const fieldsWidgetUngroupedFieldsDraftState =
useAtomComponentStateCallbackState(
fieldsWidgetUngroupedFieldsDraftComponentState,
pageLayoutId,
);
const fieldsWidgetEditorModeDraftState = useAtomComponentStateCallbackState(
fieldsWidgetEditorModeDraftComponentState,
pageLayoutId,
);
const hasInitializedFieldsWidgetGroupsDraftState =
useAtomComponentStateCallbackState(
hasInitializedFieldsWidgetGroupsDraftComponentState,
pageLayoutId,
);
const refreshPageLayoutAfterReset = useCallback(
async (collectAffectedViewIds: (layout: PageLayout) => Set<string>) => {
const { data } = await client.query({
@@ -73,6 +99,11 @@ export const useRefreshPageLayoutAfterReset = (
);
}
store.set(fieldsWidgetGroupsDraftState, {});
store.set(fieldsWidgetUngroupedFieldsDraftState, {});
store.set(fieldsWidgetEditorModeDraftState, {});
store.set(hasInitializedFieldsWidgetGroupsDraftState, {});
setIsPageLayoutInEditMode(false);
exitLayoutCustomizationMode();
evictViewMetadataForViewIds(store, affectedViewIds);
@@ -85,6 +116,10 @@ export const useRefreshPageLayoutAfterReset = (
pageLayoutPersistedState,
pageLayoutDraftState,
pageLayoutCurrentLayoutsState,
fieldsWidgetGroupsDraftState,
fieldsWidgetUngroupedFieldsDraftState,
fieldsWidgetEditorModeDraftState,
hasInitializedFieldsWidgetGroupsDraftState,
setIsPageLayoutInEditMode,
exitLayoutCustomizationMode,
invalidateMetadataStore,
packages/twenty-front/src/modules/page-layout/hooks/useRemovePageLayoutWidgetAndPreservePosition.ts
-47
View File
@@ -3,18 +3,13 @@ import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pag
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { getWidgetConfigurationViewId } from '@/page-layout/utils/getWidgetConfigurationViewId';
import { removeWidgetFromTab } from '@/page-layout/utils/removeWidgetFromTab';
import { removeWidgetLayoutFromTab } from '@/page-layout/utils/removeWidgetLayoutFromTab';
import { useDeleteViewForFieldsWidget } from '@/page-layout/widgets/fields/hooks/useDeleteViewForFieldsWidget';
import { useDeleteViewForRecordTableWidget } from '@/page-layout/widgets/record-table/hooks/useDeleteViewForRecordTableWidget';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useStore } from 'jotai';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { WidgetType } from '~/generated-metadata/graphql';
export const useRemovePageLayoutWidgetAndPreservePosition = (
pageLayoutIdFromProps?: string,
@@ -44,16 +39,6 @@ export const useRemovePageLayoutWidgetAndPreservePosition = (
pageLayoutId,
);
const { deleteViewForFieldsWidget } = useDeleteViewForFieldsWidget();
const { deleteViewForRecordTableWidget } =
useDeleteViewForRecordTableWidget();
const pageLayoutPersistedState = useAtomComponentStateCallbackState(
pageLayoutPersistedComponentState,
pageLayoutId,
);
const store = useStore();
const removePageLayoutWidgetAndPreservePosition = useCallback(
@@ -65,35 +50,6 @@ export const useRemovePageLayoutWidgetAndPreservePosition = (
tab.widgets.some((widget) => widget.id === widgetId),
);
const widgetToRemove = tabWithWidget?.widgets.find(
(widget) => widget.id === widgetId,
);
const persisted = store.get(pageLayoutPersistedState);
const persistedWidgetIds = new Set(
persisted?.tabs.flatMap((tab) =>
tab.widgets.map((widget) => widget.id),
) ?? [],
);
const isWidgetPersisted = persistedWidgetIds.has(widgetId);
if (isWidgetPersisted && isDefined(widgetToRemove)) {
const viewId = getWidgetConfigurationViewId(
widgetToRemove.configuration,
);
if (isDefined(viewId)) {
if (widgetToRemove.type === WidgetType.RECORD_TABLE) {
deleteViewForRecordTableWidget(viewId);
}
if (widgetToRemove.type === WidgetType.FIELDS) {
deleteViewForFieldsWidget(viewId);
}
}
}
const tabId = tabWithWidget?.id;
if (!isDefined(tabId)) {
@@ -131,13 +87,10 @@ export const useRemovePageLayoutWidgetAndPreservePosition = (
store.set(pageLayoutEditingWidgetIdState, null);
},
[
deleteViewForFieldsWidget,
deleteViewForRecordTableWidget,
pageLayoutCurrentLayoutsState,
pageLayoutDraftState,
pageLayoutDraggedAreaState,
pageLayoutEditingWidgetIdState,
pageLayoutPersistedState,
store,
],
);
packages/twenty-front/src/modules/page-layout/states/pageLayoutsWithRelationsSelector.ts
+7 -2
View File
@@ -18,10 +18,15 @@ export const pageLayoutsWithRelationsSelector = createAtomSelector<
const allFlatWidgets = get(metadataStoreState, 'pageLayoutWidgets')
.current as FlatPageLayoutWidget[];
const activeFlatTabs = allFlatTabs.filter((tab) => tab.isActive);
const activeFlatWidgets = allFlatWidgets.filter(
(widget) => widget.isActive,
);
const tabsByPageLayoutId = new Map<string, FlatPageLayoutTab[]>();
const widgetsByTabId = new Map<string, FlatPageLayoutWidget[]>();
for (const tab of allFlatTabs) {
for (const tab of activeFlatTabs) {
const existing = tabsByPageLayoutId.get(tab.pageLayoutId);
if (isDefined(existing)) {
@@ -31,7 +36,7 @@ export const pageLayoutsWithRelationsSelector = createAtomSelector<
}
}
for (const widget of allFlatWidgets) {
for (const widget of activeFlatWidgets) {
const existing = widgetsByTabId.get(widget.pageLayoutTabId);
if (isDefined(existing)) {
packages/twenty-front/src/modules/page-layout/utils/__tests__/addWidgetToTab.test.ts
+3
View File
@@ -11,6 +11,7 @@ describe('addWidgetToTab', () => {
const mockWidget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
id: 'widget-1',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Test Widget',
type: WidgetType.GRAPH,
@@ -31,6 +32,7 @@ describe('addWidgetToTab', () => {
{
id: 'tab-1',
applicationId: '',
isActive: true,
title: 'Tab 1',
position: 0,
pageLayoutId: 'layout-1',
@@ -42,6 +44,7 @@ describe('addWidgetToTab', () => {
{
id: 'tab-2',
applicationId: '',
isActive: true,
title: 'Tab 2',
position: 1,
pageLayoutId: 'layout-1',
packages/twenty-front/src/modules/page-layout/utils/__tests__/convertLayoutsToWidgets.test.ts
+2
View File
@@ -12,6 +12,7 @@ describe('convertLayoutsToWidgets', () => {
const mockWidgets: PageLayoutWidget[] = [
{
id: 'widget-1',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Widget 1',
type: WidgetType.GRAPH,
@@ -34,6 +35,7 @@ describe('convertLayoutsToWidgets', () => {
},
{
id: 'widget-2',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Widget 2',
type: WidgetType.GRAPH,
packages/twenty-front/src/modules/page-layout/utils/__tests__/convertPageLayoutToTabLayouts.test.ts
+5
View File
@@ -20,6 +20,7 @@ describe('convertPageLayoutToTabLayouts', () => {
{
id: 'tab-1',
applicationId: '',
isActive: true,
title: 'Tab 1',
position: 0,
pageLayoutId: 'page-layout-1',
@@ -27,6 +28,7 @@ describe('convertPageLayoutToTabLayouts', () => {
{
__typename: 'PageLayoutWidget',
id: 'widget-1',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Widget 1',
type: WidgetType.GRAPH,
@@ -45,6 +47,7 @@ describe('convertPageLayoutToTabLayouts', () => {
{
__typename: 'PageLayoutWidget',
id: 'widget-2',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Widget 2',
type: WidgetType.GRAPH,
@@ -99,6 +102,7 @@ describe('convertPageLayoutToTabLayouts', () => {
{
id: 'tab-1',
applicationId: '',
isActive: true,
title: 'Tab 1',
position: 0,
pageLayoutId: 'page-layout-1',
@@ -106,6 +110,7 @@ describe('convertPageLayoutToTabLayouts', () => {
{
__typename: 'PageLayoutWidget',
id: 'rich-text-widget',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Rich Text',
type: WidgetType.STANDALONE_RICH_TEXT,
packages/twenty-front/src/modules/page-layout/utils/__tests__/extractFieldMetadataIdsFromWidget.test.ts
+1
View File
@@ -23,6 +23,7 @@ const createMockWidget = (
},
): PageLayoutWidget => ({
id: 'widget-1',
isActive: true,
type: WidgetType.GRAPH,
title: 'Test',
objectMetadataId: null,
packages/twenty-front/src/modules/page-layout/utils/__tests__/filterVisibleWidgets.test.ts
+1
View File
@@ -12,6 +12,7 @@ describe('filterVisibleWidgets', () => {
): PageLayoutTab['widgets'][0] => ({
__typename: 'PageLayoutWidget',
id,
isActive: true,
pageLayoutTabId: 'tab-1',
title: `Widget ${id}`,
type: WidgetType.FIELDS,
packages/twenty-front/src/modules/page-layout/utils/__tests__/getPageLayoutTabListInitialActiveTabId.test.ts
+1
View File
@@ -5,6 +5,7 @@ describe('getPageLayoutTabListInitialActiveTabId', () => {
const createMockTab = (id: string): PageLayoutTab => ({
id,
applicationId: '',
isActive: true,
pageLayoutId: 'page-layout-1',
title: `Tab ${id}`,
position: 0,
packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsByDisplayMode.test.ts
+1
View File
@@ -10,6 +10,7 @@ describe('getTabsByDisplayMode', () => {
const createMockTab = (id: string): PageLayoutTab => ({
id,
applicationId: '',
isActive: true,
pageLayoutId: 'page-layout-1',
title: `Tab ${id}`,
position: 0,
packages/twenty-front/src/modules/page-layout/utils/__tests__/getTabsWithVisibleWidgets.test.ts
+2
View File
@@ -12,6 +12,7 @@ describe('getTabsWithVisibleWidgets', () => {
): PageLayoutTab['widgets'][0] => ({
__typename: 'PageLayoutWidget',
id,
isActive: true,
pageLayoutTabId: 'tab-1',
title: `Widget ${id}`,
type: WidgetType.FIELDS,
@@ -41,6 +42,7 @@ describe('getTabsWithVisibleWidgets', () => {
__typename: 'PageLayoutTab',
applicationId: '',
id,
isActive: true,
pageLayoutId: 'page-layout-1',
title: `Tab ${id}`,
position: 0,
packages/twenty-front/src/modules/page-layout/utils/__tests__/prepareGridLayoutItemsWithPlaceholders.test.ts
+2
View File
@@ -10,6 +10,7 @@ import {
describe('prepareGridLayoutItemsWithPlaceholders', () => {
const createMockWidget = (id: string): PageLayoutWidget => ({
id,
isActive: true,
pageLayoutTabId: 'tab-1',
title: `Test Widget ${id}`,
type: WidgetType.GRAPH,
@@ -215,6 +216,7 @@ describe('prepareGridLayoutItemsWithPlaceholders', () => {
expect(resultWidget.createdAt).toBe(widget.createdAt);
expect(resultWidget.updatedAt).toBe(widget.updatedAt);
expect(resultWidget.deletedAt).toBe(widget.deletedAt);
expect(resultWidget.isActive).toBe(widget.isActive);
}
});
});
packages/twenty-front/src/modules/page-layout/utils/__tests__/removeWidgetFromTab.test.ts
+5
View File
@@ -12,6 +12,7 @@ describe('removeWidgetFromTab', () => {
{
id: 'tab-1',
applicationId: '',
isActive: true,
title: 'Tab 1',
position: 0,
pageLayoutId: 'layout-1',
@@ -19,6 +20,7 @@ describe('removeWidgetFromTab', () => {
{
__typename: 'PageLayoutWidget' as const,
id: 'widget-1',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Widget 1',
type: WidgetType.GRAPH,
@@ -37,6 +39,7 @@ describe('removeWidgetFromTab', () => {
{
__typename: 'PageLayoutWidget' as const,
id: 'widget-2',
isActive: true,
pageLayoutTabId: 'tab-1',
title: 'Widget 2',
type: WidgetType.GRAPH,
@@ -62,6 +65,7 @@ describe('removeWidgetFromTab', () => {
{
id: 'tab-2',
applicationId: '',
isActive: true,
title: 'Tab 2',
position: 1,
pageLayoutId: 'layout-1',
@@ -69,6 +73,7 @@ describe('removeWidgetFromTab', () => {
{
__typename: 'PageLayoutWidget' as const,
id: 'widget-3',
isActive: true,
pageLayoutTabId: 'tab-2',
title: 'Widget 3',
type: WidgetType.IFRAME,
packages/twenty-front/src/modules/page-layout/utils/createDefaultFieldWidget.ts
+1
View File
@@ -28,6 +28,7 @@ export const createDefaultFieldWidget = ({
id,
pageLayoutTabId,
title,
isActive: true,
type: WidgetType.FIELD,
configuration: {
__typename: 'FieldConfiguration',
packages/twenty-front/src/modules/page-layout/utils/createDefaultFieldsWidget.ts
+1
View File
@@ -23,6 +23,7 @@ export const createDefaultFieldsWidget = ({
id,
pageLayoutTabId,
title: 'Fields',
isActive: true,
type: WidgetType.FIELDS,
configuration: {
__typename: 'FieldsConfiguration',
packages/twenty-front/src/modules/page-layout/utils/createDefaultFrontComponentWidget.ts
+1
View File
@@ -18,6 +18,7 @@ export const createDefaultFrontComponentWidget = (
id,
pageLayoutTabId,
title,
isActive: true,
type: WidgetType.FRONT_COMPONENT,
configuration: {
__typename: 'FrontComponentConfiguration',
packages/twenty-front/src/modules/page-layout/utils/createDefaultGraphWidget.ts
+1
View File
@@ -72,6 +72,7 @@ export const createDefaultGraphWidget = ({
id,
pageLayoutTabId,
title,
isActive: true,
type: WidgetType.GRAPH,
configuration,
gridPosition,
packages/twenty-front/src/modules/page-layout/utils/createDefaultIframeWidget.ts
+1
View File
@@ -19,6 +19,7 @@ export const createDefaultIframeWidget = (
id,
pageLayoutTabId,
title,
isActive: true,
type: WidgetType.IFRAME,
configuration: {
configurationType: WidgetConfigurationType.IFRAME,
packages/twenty-front/src/modules/page-layout/utils/createDefaultRecordTableWidget.ts
+1
View File
@@ -24,6 +24,7 @@ export const createDefaultRecordTableWidget = ({
id,
pageLayoutTabId,
title,
isActive: true,
type: WidgetType.RECORD_TABLE,
configuration: {
configurationType: WidgetConfigurationType.RECORD_TABLE,
packages/twenty-front/src/modules/page-layout/utils/createDefaultStandaloneRichTextWidget.ts
+1
View File
@@ -19,6 +19,7 @@ export const createDefaultStandaloneRichTextWidget = (
id,
pageLayoutTabId,
title: 'Untitled Rich Text',
isActive: true,
type: WidgetType.STANDALONE_RICH_TEXT,
configuration: {
configurationType: WidgetConfigurationType.STANDALONE_RICH_TEXT,
packages/twenty-front/src/modules/page-layout/utils/getTabsWithVisibleWidgets.ts
+5 -3
View File
@@ -15,13 +15,15 @@ export const getTabsWithVisibleWidgets = ({
isInSidePanel,
isEditMode,
}: GetTabsWithVisibleWidgetsParams): PageLayoutTab[] => {
const activeTabs = tabs.filter((tab) => tab.isActive);
if (isEditMode) {
return tabs;
return activeTabs;
}
const context = buildWidgetVisibilityContext({ isMobile, isInSidePanel });
const tabsWithFilteredWidgets = tabs.map((tab) => ({
const tabsWithFilteredWidgets = activeTabs.map((tab) => ({
...tab,
widgets: filterVisibleWidgets({ widgets: tab.widgets, context }),
}));
@@ -30,7 +32,7 @@ export const getTabsWithVisibleWidgets = ({
(tab) => tab.widgets.length > 0,
);
if (tabsWithVisibleWidgets.length === 0 && tabs.length > 0) {
if (tabsWithVisibleWidgets.length === 0 && activeTabs.length > 0) {
return tabsWithFilteredWidgets.slice(0, 1);
}
packages/twenty-front/src/modules/page-layout/utils/injectRelationWidgetsIntoLayout.ts
+1
View File
@@ -18,6 +18,7 @@ const getRelationFieldWidgetToInsert = (
id: `${DYNAMIC_RELATION_WIDGET_ID_PREFIX}${field.id}-${field.label}`,
pageLayoutTabId: tabId,
title: field.label,
isActive: true,
type: WidgetType.FIELD,
objectMetadataId: null,
gridPosition: {
packages/twenty-front/src/modules/page-layout/widgets/components/__stories__/WidgetRenderer.stories.tsx
+18
View File
@@ -143,6 +143,7 @@ const createPageLayoutWithWidget = (
tabs: [
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: TAB_ID_OVERVIEW,
title: 'Overview',
@@ -252,6 +253,7 @@ export const WithNumberChart: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_NUMBER_CHART,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -338,6 +340,7 @@ export const WithGaugeChart: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_GAUGE_CHART,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -424,6 +427,7 @@ export const WithBarChart: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_BAR_CHART,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -521,6 +525,7 @@ export const SmallWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_SMALL,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -614,6 +619,7 @@ export const MediumWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_MEDIUM,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -711,6 +717,7 @@ export const LargeWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_LARGE,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -808,6 +815,7 @@ export const WideWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_WIDE,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -901,6 +909,7 @@ export const TallWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_TALL,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -999,6 +1008,7 @@ export const WithManyToOneRelationFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_MANY_TO_ONE_RELATION,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1117,6 +1127,7 @@ export const WithOneToManyRelationFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_ONE_TO_MANY_RELATION,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1227,6 +1238,7 @@ export const OneToManyRelationFieldWidgetWithSeeAllButton: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_ONE_TO_MANY_RELATION,
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1363,6 +1375,7 @@ export const OnMobile: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-mobile',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -1460,6 +1473,7 @@ export const InSidePanel: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-side-panel',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.GRAPH,
@@ -1617,6 +1631,7 @@ export const Catalog: CatalogStory<Story, typeof WidgetRenderer> = {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: WIDGET_ID_CATALOG,
pageLayoutTabId:
variant === 'side-column' ? 'pinned-tab' : TAB_ID_OVERVIEW,
@@ -1723,6 +1738,7 @@ export const Catalog: CatalogStory<Story, typeof WidgetRenderer> = {
? [
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: 'pinned-tab',
title: 'Pinned Tab',
@@ -1735,6 +1751,7 @@ export const Catalog: CatalogStory<Story, typeof WidgetRenderer> = {
},
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: 'other-tab',
title: 'Other Tab',
@@ -1749,6 +1766,7 @@ export const Catalog: CatalogStory<Story, typeof WidgetRenderer> = {
: [
{
__typename: 'PageLayoutTab',
isActive: true,
applicationId: '',
id: TAB_ID_OVERVIEW,
title: 'Overview',
packages/twenty-front/src/modules/page-layout/widgets/field/components/__stories__/FieldWidget.stories.tsx
+18
View File
@@ -291,6 +291,7 @@ const createPageLayoutWithWidget = (
tabs: [
{
__typename: 'PageLayoutTab' as const,
isActive: true,
applicationId: '',
id: TAB_ID_OVERVIEW,
title: 'Overview',
@@ -332,6 +333,7 @@ export const TextFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-text-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -425,6 +427,7 @@ export const AddressFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-address-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -521,6 +524,7 @@ export const NumberFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-number-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -614,6 +618,7 @@ export const LinkFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-link-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -707,6 +712,7 @@ export const ManyToOneRelationFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-relation-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -810,6 +816,7 @@ export const OneToManyRelationFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-one-to-many-relation-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -905,6 +912,7 @@ export const BooleanFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-boolean-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -997,6 +1005,7 @@ export const CurrencyFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-currency-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1089,6 +1098,7 @@ export const EmailsFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-emails-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1182,6 +1192,7 @@ export const PhonesFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-phones-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1275,6 +1286,7 @@ export const SelectFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-select-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1369,6 +1381,7 @@ export const MultiSelectFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-multi-select-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1466,6 +1479,7 @@ export const TimelineActivityRelationFieldWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-timeline-activity-relation-field',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1564,6 +1578,7 @@ export const ManyToOneRelationCardWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-relation-card',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1675,6 +1690,7 @@ export const OneToManyRelationCardWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-one-to-many-relation-card',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1769,6 +1785,7 @@ export const TimelineActivityRelationCardWidget: Story = {
render: () => {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-timeline-activity-relation-card',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
@@ -1929,6 +1946,7 @@ export const OneToManyRelationCardWidgetWithProgressiveLoading: Story = {
const widget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-one-to-many-relation-card-progressive',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELD,
packages/twenty-front/src/modules/page-layout/widgets/fields/components/__stories__/FieldsWidget.stories.tsx
+4
View File
@@ -141,6 +141,7 @@ const createPageLayoutWithWidget = (
tabs: [
{
__typename: 'PageLayoutTab' as const,
isActive: true,
applicationId: '',
id: TAB_ID_OVERVIEW,
title: 'Overview',
@@ -159,6 +160,7 @@ const createPageLayoutWithWidget = (
const createFieldsWidget = (viewId: string | null): PageLayoutWidget => ({
__typename: 'PageLayoutWidget',
isActive: true,
id: 'widget-fields',
pageLayoutTabId: TAB_ID_OVERVIEW,
type: WidgetType.FIELDS,
@@ -213,6 +215,7 @@ const createViewField = (
fieldMetadataId,
position,
isVisible: true,
isActive: true,
size: 200,
aggregateOperation: null,
viewId: FIELDS_VIEW_ID,
@@ -230,6 +233,7 @@ const createViewFieldGroup = (
name,
position,
isVisible,
isActive: true,
viewId: FIELDS_VIEW_ID,
viewFields,
});
packages/twenty-front/src/modules/page-layout/widgets/fields/hooks/useFieldsWidgetGroups.ts
+65 -14
View File
@@ -29,9 +29,12 @@ export const useFieldsWidgetGroups = ({
objectNameSingular,
});
const groups = useMemo<FieldsWidgetGroup[]>(() => {
const { groups, displayMode } = useMemo<{
groups: FieldsWidgetGroup[];
displayMode: FieldsWidgetDisplayMode;
}>(() => {
if (!isDefined(objectMetadataItem)) {
return [];
return { groups: [], displayMode: 'grouped' };
}
if (isDefined(view) && isNonEmptyArray(view.viewFieldGroups)) {
@@ -41,7 +44,7 @@ export const useFieldsWidgetGroups = ({
let globalIndex = 0;
return sortedGroups
const resultGroups = sortedGroups
.filter((group) => group.isVisible)
.map((group) => {
const groupFields = [...(group.viewFields ?? [])].sort(
@@ -79,28 +82,76 @@ export const useFieldsWidgetGroups = ({
};
})
.filter((group) => group.fields.length > 0);
return { groups: resultGroups, displayMode: 'grouped' };
}
return filterDraftGroupsForDisplay(
buildDefaultFieldsWidgetGroups({
fields: objectMetadataItem.fields,
objectNameSingular,
labelIdentifierFieldMetadataItemId:
labelIdentifierFieldMetadataItem?.id,
}),
);
if (isDefined(view) && isNonEmptyArray(view.viewFields)) {
let globalIndex = 0;
const fields: FieldsWidgetGroupField[] = [...view.viewFields]
.sort((a, b) => a.position - b.position)
.filter((viewField) => viewField.isVisible)
.map((viewField) => {
const fieldMetadataItem = objectMetadataItem.fields.find(
(f) => f.id === viewField.fieldMetadataId,
);
if (!isDefined(fieldMetadataItem)) {
return null;
}
return {
fieldMetadataItem,
position: viewField.position,
isVisible: viewField.isVisible,
globalIndex: globalIndex++,
};
})
.filter(isDefined);
return {
groups:
fields.length > 0
? [
{
id: `${viewId}-ungrouped`,
name: '',
position: 0,
isVisible: true,
fields,
},
]
: [],
displayMode: 'inline',
};
}
return {
groups: filterDraftGroupsForDisplay(
buildDefaultFieldsWidgetGroups({
fields: objectMetadataItem.fields,
objectNameSingular,
labelIdentifierFieldMetadataItemId:
labelIdentifierFieldMetadataItem?.id,
}),
),
displayMode: 'grouped',
};
}, [
objectMetadataItem,
objectNameSingular,
labelIdentifierFieldMetadataItem,
view,
viewId,
]);
const displayMode: FieldsWidgetDisplayMode = 'grouped';
return {
groups,
displayMode,
isFromView: isDefined(view) && isNonEmptyArray(view.viewFieldGroups),
isFromView:
isDefined(view) &&
(isNonEmptyArray(view.viewFieldGroups) ||
isNonEmptyArray(view.viewFields)),
};
};
packages/twenty-front/src/modules/page-layout/widgets/record-table/utils/__tests__/computeViewFieldsToCreateAndUpdate.test.ts
+2
View File
@@ -10,6 +10,7 @@ const buildViewField = (
id: v4(),
fieldMetadataId: v4(),
position: 0,
isActive: true,
isVisible: true,
size: 100,
aggregateOperation: null,
@@ -20,6 +21,7 @@ const buildExistingViewField = (overrides: Partial<ViewField>): ViewField => ({
id: v4(),
fieldMetadataId: v4(),
position: 0,
isActive: true,
isVisible: true,
size: 100,
aggregateOperation: null,
packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutRecordPageWidgetTypeSelect.tsx
+1 -25
View File
@@ -10,13 +10,10 @@ import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
import { createDefaultFieldWidget } from '@/page-layout/utils/createDefaultFieldWidget';
import { createDefaultFieldsWidget } from '@/page-layout/utils/createDefaultFieldsWidget';
import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
import { getWidgetConfigurationViewId } from '@/page-layout/utils/getWidgetConfigurationViewId';
import { isVerticalListPosition } from '@/page-layout/utils/isVerticalListPosition';
import { removeWidgetFromTab } from '@/page-layout/utils/removeWidgetFromTab';
import { useFieldWidgetEligibleFields } from '@/page-layout/widgets/field/hooks/useFieldWidgetEligibleFields';
import { getFieldWidgetDefaultDisplayMode } from '@/page-layout/widgets/field/utils/getFieldWidgetDisplayModeConfig';
import { useDeleteViewForFieldsWidget } from '@/page-layout/widgets/fields/hooks/useDeleteViewForFieldsWidget';
import { useDeleteViewForRecordTableWidget } from '@/page-layout/widgets/record-table/hooks/useDeleteViewForRecordTableWidget';
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { SidePanelList } from '@/side-panel/components/SidePanelList';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
@@ -91,11 +88,6 @@ export const SidePanelPageLayoutRecordPageWidgetTypeSelect = () => {
const { insertCreatedWidgetAtContext } =
useInsertCreatedWidgetAtContext(pageLayoutId);
const { deleteViewForFieldsWidget } = useDeleteViewForFieldsWidget();
const { deleteViewForRecordTableWidget } =
useDeleteViewForRecordTableWidget();
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular: targetObjectNameSingular,
});
@@ -142,28 +134,11 @@ export const SidePanelPageLayoutRecordPageWidgetTypeSelect = () => {
return;
}
if (isDefined(existingWidget)) {
const viewId = getWidgetConfigurationViewId(existingWidget.configuration);
if (isDefined(viewId)) {
if (existingWidget.type === WidgetType.RECORD_TABLE) {
deleteViewForRecordTableWidget(viewId);
}
if (existingWidget.type === WidgetType.FIELDS) {
deleteViewForFieldsWidget(viewId);
}
}
}
store.set(pageLayoutDraftState, (prev) => ({
...prev,
tabs: removeWidgetFromTab(prev.tabs, tabId, pageLayoutEditingWidgetId),
}));
}, [
deleteViewForFieldsWidget,
deleteViewForRecordTableWidget,
existingWidget,
isReplaceMode,
pageLayoutDraftState,
pageLayoutEditingWidgetId,
@@ -328,6 +303,7 @@ export const SidePanelPageLayoutRecordPageWidgetTypeSelect = () => {
const newWidget: PageLayoutWidget = {
__typename: 'PageLayoutWidget',
id: widgetId,
isActive: true,
pageLayoutTabId: tabId,
title: frontComponent.name,
type: WidgetType.FRONT_COMPONENT,
packages/twenty-front/src/modules/views/graphql/fragments/viewFieldFragment.ts
+1
View File
@@ -10,6 +10,7 @@ export const VIEW_FIELD_FRAGMENT = gql`
size
aggregateOperation
viewFieldGroupId
isActive
createdAt
updatedAt
deletedAt
packages/twenty-front/src/modules/views/graphql/fragments/viewFieldGroupFragment.ts
+1
View File
@@ -9,6 +9,7 @@ export const VIEW_FIELD_GROUP_FRAGMENT = gql`
position
isVisible
viewId
isActive
createdAt
updatedAt
deletedAt
packages/twenty-front/src/modules/views/states/selectors/viewsSelector.ts
+7 -2
View File
@@ -24,7 +24,7 @@ export const viewsSelector = createAtomSelector<ViewWithRelations[]>({
flatObjectMetadataItems.map((item) => [item.id, item]),
);
const flatViewFields = get(metadataStoreState, 'viewFields')
const allFlatViewFields = get(metadataStoreState, 'viewFields')
.current as FlatViewField[];
const flatViewFilters = get(metadataStoreState, 'viewFilters')
.current as FlatViewFilter[];
@@ -34,9 +34,14 @@ export const viewsSelector = createAtomSelector<ViewWithRelations[]>({
.current as FlatViewGroup[];
const flatViewFilterGroups = get(metadataStoreState, 'viewFilterGroups')
.current as FlatViewFilterGroup[];
const flatViewFieldGroups = get(metadataStoreState, 'viewFieldGroups')
const allFlatViewFieldGroups = get(metadataStoreState, 'viewFieldGroups')
.current as FlatViewFieldGroup[];
const flatViewFields = allFlatViewFields.filter((field) => field.isActive);
const flatViewFieldGroups = allFlatViewFieldGroups.filter(
(group) => group.isActive,
);
const viewFieldsByViewId = new Map<string, FlatViewField[]>();
const viewFiltersByViewId = new Map<string, FlatViewFilter[]>();
const viewSortsByViewId = new Map<string, FlatViewSort[]>();
packages/twenty-front/src/modules/views/types/ViewField.ts
+1
View File
@@ -8,6 +8,7 @@ export type ViewField = {
viewId?: string;
fieldMetadataId: string;
position: number;
isActive: boolean;
isVisible: boolean;
size: number;
aggregateOperation?: AggregateOperations | null;
packages/twenty-front/src/modules/views/types/ViewFieldGroup.ts
+1
View File
@@ -4,6 +4,7 @@ export type ViewFieldGroup = {
id: string;
name: string;
position: number;
isActive: boolean;
isVisible: boolean;
viewId: string;
viewFields: ViewField[];
packages/twenty-front/src/modules/views/utils/__tests__/viewMapFunctions.test.ts
+5
View File
@@ -60,6 +60,7 @@ describe('mapViewFieldsToColumnDefinitions', () => {
position: 1,
size: 1,
isVisible: false,
isActive: true,
definition: {
fieldMetadataId: '1',
label: 'label 1',
@@ -78,6 +79,7 @@ describe('mapViewFieldsToColumnDefinitions', () => {
position: 2,
size: 2,
isVisible: false,
isActive: true,
definition: {
fieldMetadataId: '2',
label: 'label 2',
@@ -96,6 +98,7 @@ describe('mapViewFieldsToColumnDefinitions', () => {
position: 3,
size: 3,
isVisible: true,
isActive: true,
definition: {
fieldMetadataId: '3',
label: 'label 3',
@@ -188,6 +191,7 @@ describe('mapColumnDefinitionsToViewFields', () => {
fieldMetadataId: 1,
position: 1,
isVisible: true,
isActive: true,
definition: columnDefinitions[0],
size: undefined,
},
@@ -197,6 +201,7 @@ describe('mapColumnDefinitionsToViewFields', () => {
position: 2,
size: 200,
isVisible: false,
isActive: true,
definition: columnDefinitions[1],
},
];
packages/twenty-front/src/modules/views/utils/mapBoardFieldDefinitionsToViewFields.ts
+1
View File
@@ -12,6 +12,7 @@ export const mapBoardFieldDefinitionsToViewFields = (
size: 0,
position: fieldDefinition.position,
isVisible: fieldDefinition.isVisible ?? true,
isActive: true,
definition: fieldDefinition,
}),
);
packages/twenty-front/src/modules/views/utils/mapColumnDefinitionToViewField.ts
+1
View File
@@ -12,6 +12,7 @@ export const mapColumnDefinitionsToViewFields = (
position: columnDefinition.position,
size: columnDefinition.size,
isVisible: columnDefinition.isVisible ?? true,
isActive: true,
definition: columnDefinition,
}));
};
packages/twenty-front/src/modules/views/utils/mapRecordFieldToViewField.ts
+1
View File
@@ -6,6 +6,7 @@ export const mapRecordFieldToViewField = (recordField: RecordField) => {
id: recordField.id,
fieldMetadataId: recordField.fieldMetadataItemId,
isVisible: recordField.isVisible,
isActive: true,
position: recordField.position,
size: recordField.size,
aggregateOperation: recordField.aggregateOperation,