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/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,