[BREAKING_CHANGE_DASHBOARDS][DASHBOARD_CACHE_FLUSH_REQUIRED] Refactor page layout widget configuration type (#16671)

# Introduction
In this pull-request we're refactoring the page layout widget
configuration entity to be containing its discriminated key simplifying
underlying code and maintainability
- Made the configuration and title non nullable
- Introduced a generic predicate for the `widgetConfigurationType`
- Upgraded command to remove `graphType` and insert new
`configurationType` to existing entries
- Migrated frontend to new type system

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
This commit is contained in:
Paul Rastoin
2025-12-29 15:46:59 +01:00
committed by GitHub
parent 2b9728230a
commit 4135a6473a
221 changed files with 3241 additions and 1947 deletions
@@ -1,3 +1,4 @@
import { isWidgetConfigurationOfType } from '@/command-menu/pages/page-layout/utils/isWidgetConfigurationOfType';
import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
@@ -18,8 +19,11 @@ import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
import { v4 as uuidv4 } from 'uuid';
import { type GraphType } from '~/generated-metadata/graphql';
import { WidgetType } from '~/generated/graphql';
import {
BarChartLayout,
WidgetConfigurationType,
WidgetType,
} from '~/generated/graphql';
export const useCreatePageLayoutGraphWidget = (
pageLayoutIdFromProps?: string,
@@ -56,10 +60,8 @@ export const useCreatePageLayoutGraphWidget = (
const createPageLayoutGraphWidget = useRecoilCallback(
({ snapshot, set }) =>
({
graphType,
fieldSelection,
}: {
graphType: GraphType;
fieldSelection?: GraphWidgetFieldSelection;
}): PageLayoutWidget => {
const activeTabId = snapshot.getLoadable(activeTabIdState).getValue();
@@ -83,18 +85,39 @@ export const useCreatePageLayoutGraphWidget = (
.getValue();
const allWidgets = pageLayoutDraft.tabs.flatMap((tab) => tab.widgets);
const existingWidgetCount = allWidgets.filter(
(w) =>
w.type === WidgetType.GRAPH &&
w.configuration &&
'graphType' in w.configuration &&
w.configuration.graphType === graphType,
).length;
const title = getWidgetTitle(graphType, existingWidgetCount);
const existingWidgetCount = allWidgets.filter((widget) => {
if (widget.type !== WidgetType.GRAPH) {
return false;
}
if (
!isWidgetConfigurationOfType(
widget.configuration,
'BarChartConfiguration',
)
) {
return false;
}
return widget.configuration.layout === BarChartLayout.VERTICAL;
}).length;
const title = getWidgetTitle(
{
configurationType: WidgetConfigurationType.BAR_CHART,
layout: BarChartLayout.VERTICAL,
},
existingWidgetCount,
);
const widgetId = uuidv4();
const defaultSize = getWidgetSize(graphType, 'default');
const minimumSize = getWidgetSize(graphType, 'minimum');
const defaultSize = getWidgetSize(
WidgetConfigurationType.BAR_CHART,
'default',
);
const minimumSize = getWidgetSize(
WidgetConfigurationType.BAR_CHART,
'minimum',
);
const position = getDefaultWidgetPosition(
pageLayoutDraggedArea,
defaultSize,
@@ -105,7 +128,6 @@ export const useCreatePageLayoutGraphWidget = (
id: widgetId,
pageLayoutTabId: activeTabId,
title,
graphType,
gridPosition: {
row: position.y,
column: position.x,