From b0e256221a9d1f1a07c8c58a024aa6f0f16f8fb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Wed, 17 Dec 2025 17:48:34 +0100 Subject: [PATCH] Create typeguards for widget configurations (#16627) We checked for widget types by doing `configuration?.__typename === 'LineChartConfiguration'` which made the code difficult to read. In this PR, I introduce type guards for each widget type. Note: the configuration type is `WidgetConfiguration | FieldsConfiguration` for now but should be changed to `WidgetConfiguration` when @Devessier adds FieldsConfiguration to the backend type `WidgetConfiguration`. --- .../page-layout/components/ChartSettings.tsx | 30 ++++---- ...rtAggregateOperationSelectableListItem.tsx | 3 +- ...egateOperationSelectionDropdownContent.tsx | 27 +++---- .../ChartAxisNameSelectionDropdownContent.tsx | 6 +- .../ChartColorSelectionDropdownContent.tsx | 13 ++-- ...ateGranularitySelectionDropdownContent.tsx | 30 ++++---- ...onForAggregateOperationDropdownContent.tsx | 10 ++- ...ioAggregateOperationSelectableListItem.tsx | 4 +- ...rtRatioOptionBooleanSelectableListItem.tsx | 11 +-- ...artRatioOptionSelectSelectableListItem.tsx | 11 +-- ...tioOptionValueSelectionDropdownContent.tsx | 6 +- ...ChartSortByGroupByFieldDropdownContent.tsx | 8 +- .../ChartSortBySelectionDropdownContent.tsx | 17 ++--- .../hooks/useUpdateGraphTypeConfig.ts | 8 +- .../isAggregateChartConfiguration.test.ts | 31 ++++++++ .../__tests__/isBarChartConfiguration.test.ts | 31 ++++++++ .../isBarOrLineChartConfiguration.test.ts | 40 ++++++++++ .../__tests__/isChartConfiguration.test.ts | 76 +++++++++++++++++++ .../isGaugeChartConfiguration.test.ts | 31 ++++++++ .../__tests__/isIframeConfiguration.test.ts | 31 ++++++++ .../isLineChartConfiguration.test.ts | 31 ++++++++ .../__tests__/isPieChartConfiguration.test.ts | 31 ++++++++ .../buildChartGroupByFieldConfigUpdate.ts | 9 ++- .../convertPieChartConfigToBarOrLineChart.ts | 3 +- .../utils/isAggregateChartConfiguration.ts | 11 +++ .../utils/isBarChartConfiguration.ts | 11 +++ .../utils/isBarOrLineChartConfiguration.ts | 18 +++++ .../page-layout/utils/isChartConfiguration.ts | 21 +++++ .../utils/isGaugeChartConfiguration.ts | 11 +++ .../utils/isIframeConfiguration.ts | 11 +++ .../utils/isLineChartConfiguration.ts | 11 +++ .../page-layout/utils/isMinMaxRangeValid.ts | 7 +- .../utils/isPieChartConfiguration.ts | 11 +++ .../utils/shouldHideChartSetting.ts | 24 ++---- .../createDefaultGraphWidget.test.ts | 3 +- .../graph/hooks/useGraphWidgetGroupByQuery.ts | 10 +-- .../graph/utils/assertAggregateChartWidget.ts | 3 +- .../graph/utils/assertBarChartWidget.ts | 3 +- .../graph/utils/assertPieChartWidget.ts | 3 +- .../normalizeChartConfigurationFields.ts | 9 +-- 40 files changed, 530 insertions(+), 135 deletions(-) create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isAggregateChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarOrLineChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isGaugeChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isIframeConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isLineChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isPieChartConfiguration.test.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isAggregateChartConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarChartConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isGaugeChartConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isIframeConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isLineChartConfiguration.ts create mode 100644 packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isPieChartConfiguration.ts diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx index c973599086..f3f58bb29f 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx @@ -20,6 +20,8 @@ import { t } from '@lingui/core/macro'; import { isFieldMetadataDateKind } from 'twenty-shared/utils'; import { assertChartWidgetOrThrow } from '@/command-menu/pages/page-layout/utils/assertChartWidgetOrThrow'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { GraphType } from '~/generated/graphql'; @@ -101,13 +103,13 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => { .map((item) => item.id), ); - const primaryAxisFieldMetadataId = - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration' - ? configuration.primaryAxisGroupByFieldMetadataId - : configuration.__typename === 'PieChartConfiguration' - ? configuration.groupByFieldMetadataId - : null; + const primaryAxisFieldMetadataId = isBarOrLineChartConfiguration( + configuration, + ) + ? configuration.primaryAxisGroupByFieldMetadataId + : isPieChartConfiguration(configuration) + ? configuration.groupByFieldMetadataId + : null; const primaryAxisField = objectMetadataItem?.fields?.find( (field) => field.id === primaryAxisFieldMetadataId, @@ -115,13 +117,13 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => { const isPrimaryAxisDate = isFieldMetadataDateKind(primaryAxisField?.type); - const primaryAxisDateGranularity = - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration' - ? configuration.primaryAxisDateGranularity - : configuration.__typename === 'PieChartConfiguration' - ? configuration.dateGranularity - : null; + const primaryAxisDateGranularity = isBarOrLineChartConfiguration( + configuration, + ) + ? configuration.primaryAxisDateGranularity + : isPieChartConfiguration(configuration) + ? configuration.dateGranularity + : null; const bannerTargetHeading = currentGraphType === GraphType.PIE diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx index de6ecaad07..a56579d93b 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx @@ -1,6 +1,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; import { type ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations'; import { convertExtendedAggregateOperationToAggregateOperation } from '@/object-record/utils/convertExtendedAggregateOperationToAggregateOperation'; import { DASHBOARD_AGGREGATE_OPERATION_RATIO } from '@/page-layout/widgets/graph/constants/DashboardAggregateOperationRatio'; @@ -52,7 +53,7 @@ export const ChartAggregateOperationSelectableListItem = ({ configuration.aggregateOperation; const isCurrentlyRatio = - configuration?.__typename === 'AggregateChartConfiguration' && + isAggregateChartConfiguration(configuration) && isDefined(configuration.ratioAggregateConfig); if (!isExtendedAggregateOperation(operation)) { diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx index 38a34758d7..f01c9e0820 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx @@ -3,6 +3,9 @@ import { ChartRatioAggregateOperationSelectableListItem } from '@/command-menu/p import { ChartRatioOptionValueSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent'; import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { DateAggregateOperations } from '@/object-record/record-table/constants/DateAggregateOperations'; import { getAvailableAggregateOperationsForFieldMetadataType } from '@/object-record/record-table/record-table-footer/utils/getAvailableAggregateOperationsForFieldMetadataType'; @@ -22,7 +25,6 @@ import { t } from '@lingui/core/macro'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronLeft } from 'twenty-ui/display'; -import { GraphType } from '~/generated/graphql'; import { filterBySearchQuery } from '~/utils/filterBySearchQuery'; export const ChartAggregateOperationSelectionDropdownContent = ({ @@ -38,18 +40,20 @@ export const ChartAggregateOperationSelectionDropdownContent = ({ const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord(); const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); + const configuration = widgetInEditMode?.configuration; + + const isAggregateChart = isAggregateChartConfiguration(configuration); + if ( - widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' && - widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration' && - widgetInEditMode?.configuration?.__typename !== - 'AggregateChartConfiguration' && - widgetInEditMode?.configuration?.__typename !== 'PieChartConfiguration' + !isBarOrLineChartConfiguration(configuration) && + !isAggregateChart && + !isPieChartConfiguration(configuration) ) { throw new Error('Invalid configuration type'); } const sourceObjectMetadataItem = objectMetadataItems.find( - (item) => item.id === widgetInEditMode.objectMetadataId, + (item) => item.id === widgetInEditMode?.objectMetadataId, ); const selectedField = sourceObjectMetadataItem?.fields.find( @@ -60,13 +64,6 @@ export const ChartAggregateOperationSelectionDropdownContent = ({ DropdownComponentInstanceContext, ); - const isAggregateChart = - widgetInEditMode.configuration.graphType === GraphType.AGGREGATE; - - const isAggregateOrGaugeChart = - isAggregateChart || - widgetInEditMode.configuration.graphType === GraphType.GAUGE; - const availableAggregateOperations: AggregateChartOperation[] = selectedField ? isAggregateChart ? getAvailableAggregateOperationsForAggregateChart({ @@ -80,7 +77,7 @@ export const ChartAggregateOperationSelectionDropdownContent = ({ const filteredAggregateOperations = availableAggregateOperations.filter( (operation) => { return ( - isAggregateOrGaugeChart || + isAggregateChart || (operation !== DateAggregateOperations.EARLIEST && operation !== DateAggregateOperations.LATEST) ); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx index 2509f8da36..85b38ab81e 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx @@ -2,6 +2,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; import { getChartAxisNameDisplayOptions } from '@/command-menu/pages/page-layout/utils/getChartAxisNameDisplayOptions'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; @@ -17,10 +18,7 @@ export const ChartAxisNameSelectionDropdownContent = () => { const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord(); const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); - if ( - widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' && - widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration' - ) { + if (!isBarOrLineChartConfiguration(widgetInEditMode?.configuration)) { throw new Error('Invalid configuration type'); } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx index 7752bda00a..65bf742a32 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx @@ -4,6 +4,10 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pa import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isGaugeChartConfiguration } from '@/command-menu/pages/page-layout/utils/isGaugeChartConfiguration'; +import { isIframeConfiguration } from '@/command-menu/pages/page-layout/utils/isIframeConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; @@ -48,17 +52,16 @@ export const ChartColorSelectionDropdownContent = () => { return null; } - if (widgetInEditMode.configuration?.__typename === 'IframeConfiguration') { + if (isIframeConfiguration(widgetInEditMode.configuration)) { throw new Error('Invalid configuration type'); } const configuration = widgetInEditMode.configuration as ChartConfiguration; if ( - configuration.__typename !== 'BarChartConfiguration' && - configuration.__typename !== 'LineChartConfiguration' && - configuration.__typename !== 'GaugeChartConfiguration' && - configuration.__typename !== 'PieChartConfiguration' + !isBarOrLineChartConfiguration(configuration) && + !isGaugeChartConfiguration(configuration) && + !isPieChartConfiguration(configuration) ) { return null; } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx index a8be9f9a1c..ea02637ff2 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx @@ -3,6 +3,9 @@ import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/h import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; import { getDateGranularityLabel } from '@/command-menu/pages/page-layout/utils/getDateGranularityLabel'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isChartConfiguration } from '@/command-menu/pages/page-layout/utils/isChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; @@ -28,15 +31,11 @@ const getCurrentDateGranularity = ({ }) => { const defaultGranularity = ObjectRecordGroupByDateGranularity.DAY; - if (configuration?.__typename === 'PieChartConfiguration') { + if (isPieChartConfiguration(configuration)) { return configuration.dateGranularity || defaultGranularity; } - const isBarOrLineChart = - configuration?.__typename === 'BarChartConfiguration' || - configuration?.__typename === 'LineChartConfiguration'; - - if (!isBarOrLineChart) { + if (!isBarOrLineChartConfiguration(configuration)) { return defaultGranularity; } @@ -55,23 +54,22 @@ export const ChartDateGranularitySelectionDropdownContent = ({ const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord(); const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); - if ( - !isDefined(axis) && - widgetInEditMode?.configuration?.__typename !== 'PieChartConfiguration' - ) { + const configuration = widgetInEditMode?.configuration; + + if (!isChartConfiguration(configuration)) { throw new Error('Invalid configuration type'); } - if ( - isDefined(axis) && - widgetInEditMode?.configuration?.__typename !== 'BarChartConfiguration' && - widgetInEditMode?.configuration?.__typename !== 'LineChartConfiguration' - ) { + if (!isDefined(axis) && !isPieChartConfiguration(configuration)) { + throw new Error('Invalid configuration type'); + } + + if (isDefined(axis) && !isBarOrLineChartConfiguration(configuration)) { throw new Error('Invalid configuration type'); } const currentDateGranularity = getCurrentDateGranularity({ - configuration: widgetInEditMode?.configuration as ChartConfiguration, + configuration, axis: axis as 'primary' | 'secondary', }); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx index b66d613f73..fcf0e58015 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx @@ -1,6 +1,9 @@ import { ChartAggregateOperationSelectionDropdownContent } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent'; import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -29,10 +32,9 @@ export const ChartFieldSelectionForAggregateOperationDropdownContent = () => { const configuration = widgetInEditMode?.configuration; if ( - configuration?.__typename !== 'BarChartConfiguration' && - configuration?.__typename !== 'LineChartConfiguration' && - configuration?.__typename !== 'AggregateChartConfiguration' && - configuration?.__typename !== 'PieChartConfiguration' + !isBarOrLineChartConfiguration(configuration) && + !isAggregateChartConfiguration(configuration) && + !isPieChartConfiguration(configuration) ) { throw new Error('Invalid configuration type'); } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx index 3654555cb9..3fffa19a0c 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx @@ -1,5 +1,6 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; import { DASHBOARD_AGGREGATE_OPERATION_RATIO } from '@/page-layout/widgets/graph/constants/DashboardAggregateOperationRatio'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; @@ -29,8 +30,7 @@ export const ChartRatioAggregateOperationSelectableListItem = ({ ); const isCurrentlyRatio = - widgetInEditMode?.configuration?.__typename === - 'AggregateChartConfiguration' && + isAggregateChartConfiguration(widgetInEditMode?.configuration) && isDefined(widgetInEditMode.configuration.ratioAggregateConfig); const isFocused = selectedItemId === DASHBOARD_AGGREGATE_OPERATION_RATIO; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx index 5280d6a373..c705ed1f33 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx @@ -1,6 +1,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; @@ -35,11 +36,11 @@ export const ChartRatioOptionBooleanSelectableListItem = ({ dropdownId, ); - const currentRatioConfig = - widgetInEditMode?.configuration?.__typename === - 'AggregateChartConfiguration' - ? widgetInEditMode.configuration.ratioAggregateConfig - : undefined; + const currentRatioConfig = isAggregateChartConfiguration( + widgetInEditMode?.configuration, + ) + ? widgetInEditMode.configuration.ratioAggregateConfig + : undefined; const isSelected = currentRatioConfig?.optionValue === optionValue; const isFocused = selectedItemId === optionValue; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx index c1daa1564d..62db3ed207 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx @@ -1,6 +1,7 @@ import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; @@ -37,11 +38,11 @@ export const ChartRatioOptionSelectSelectableListItem = ({ dropdownId, ); - const currentRatioConfig = - widgetInEditMode?.configuration?.__typename === - 'AggregateChartConfiguration' - ? widgetInEditMode.configuration.ratioAggregateConfig - : undefined; + const currentRatioConfig = isAggregateChartConfiguration( + widgetInEditMode?.configuration, + ) + ? widgetInEditMode.configuration.ratioAggregateConfig + : undefined; const isSelected = currentRatioConfig?.optionValue === optionValue; const isFocused = selectedItemId === optionValue; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx index a867bf950d..7e6a34e7f6 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx @@ -2,6 +2,7 @@ import { ChartRatioOptionBooleanSelectableListItem } from '@/command-menu/pages/ import { ChartRatioOptionSelectSelectableListItem } from '@/command-menu/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem'; import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader'; import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent'; @@ -41,10 +42,7 @@ export const ChartRatioOptionValueSelectionDropdownContent = ({ DropdownComponentInstanceContext, ); - if ( - widgetInEditMode?.configuration?.__typename !== - 'AggregateChartConfiguration' - ) { + if (!isAggregateChartConfiguration(widgetInEditMode?.configuration)) { return null; } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx index 04b52072bd..b1ae508c73 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx @@ -3,6 +3,7 @@ import { useGraphGroupBySortOptionLabels } from '@/command-menu/pages/page-layou import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; @@ -22,10 +23,9 @@ export const ChartSortByGroupByFieldDropdownContent = () => { const configuration = widgetInEditMode?.configuration; - if ( - configuration?.__typename !== 'BarChartConfiguration' && - configuration?.__typename !== 'LineChartConfiguration' - ) { + const isBarOrLineChart = isBarOrLineChartConfiguration(configuration); + + if (!isBarOrLineChart) { throw new Error('Invalid configuration type'); } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx index cf11178514..f1e032ebd5 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx @@ -3,6 +3,9 @@ import { useGraphXSortOptionLabels } from '@/command-menu/pages/page-layout/hook import { usePageLayoutIdFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord'; import { useUpdateCurrentWidgetConfig } from '@/command-menu/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode'; +import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration'; +import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -27,11 +30,11 @@ export const ChartSortBySelectionDropdownContent = () => { const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); const configuration = widgetInEditMode?.configuration; - if ( - configuration?.__typename !== 'BarChartConfiguration' && - configuration?.__typename !== 'LineChartConfiguration' && - configuration?.__typename !== 'PieChartConfiguration' - ) { + const isPieChart = isPieChartConfiguration(configuration); + const isLineChart = isLineChartConfiguration(configuration); + const isBarChart = isBarChartConfiguration(configuration); + + if (!isBarChart && !isLineChart && !isPieChart) { throw new Error('Invalid configuration type'); } @@ -62,10 +65,6 @@ export const ChartSortBySelectionDropdownContent = () => { (item) => item.id === widgetInEditMode.objectMetadataId, ); - const isPieChart = configuration.__typename === 'PieChartConfiguration'; - const isLineChart = configuration.__typename === 'LineChartConfiguration'; - const isBarChart = configuration.__typename === 'BarChartConfiguration'; - let currentOrderBy: GraphOrderBy | undefined; let groupByFieldMetadataId: string | undefined; let groupBySubFieldName: string | null | undefined; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts index cea3bd8578..1108961a52 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useUpdateGraphTypeConfig.ts @@ -3,6 +3,8 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ import { convertAggregateOperationForDateField } from '@/command-menu/pages/page-layout/utils/convertAggregateOperationForDateField'; import { convertBarOrLineChartConfigToPieChart } from '@/command-menu/pages/page-layout/utils/convertBarOrLineChartConfigToPieChart'; import { convertPieChartConfigToBarOrLineChart } from '@/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState'; import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState'; @@ -109,10 +111,8 @@ export const useGetConfigToUpdateAfterGraphTypeChange = ({ graphType === GraphType.HORIZONTAL_BAR || graphType === GraphType.LINE; const wasBarOrLineChart = - currentConfiguration.__typename === 'BarChartConfiguration' || - currentConfiguration.__typename === 'LineChartConfiguration'; - const wasPieChart = - currentConfiguration.__typename === 'PieChartConfiguration'; + isBarOrLineChartConfiguration(currentConfiguration); + const wasPieChart = isPieChartConfiguration(currentConfiguration); if (isPieChart && wasBarOrLineChart) { configToUpdate = { diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isAggregateChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isAggregateChartConfiguration.test.ts new file mode 100644 index 0000000000..3733535dec --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isAggregateChartConfiguration.test.ts @@ -0,0 +1,31 @@ +import { + type AggregateChartConfiguration, + type BarChartConfiguration, +} from '~/generated/graphql'; +import { isAggregateChartConfiguration } from '../isAggregateChartConfiguration'; + +describe('isAggregateChartConfiguration', () => { + it('should return true for AggregateChartConfiguration', () => { + const configuration = { + __typename: 'AggregateChartConfiguration', + } as AggregateChartConfiguration; + + expect(isAggregateChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isAggregateChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isAggregateChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isAggregateChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarChartConfiguration.test.ts new file mode 100644 index 0000000000..89b2566011 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarChartConfiguration.test.ts @@ -0,0 +1,31 @@ +import { + type BarChartConfiguration, + type LineChartConfiguration, +} from '~/generated/graphql'; +import { isBarChartConfiguration } from '../isBarChartConfiguration'; + +describe('isBarChartConfiguration', () => { + it('should return true for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration' as const, + } as BarChartConfiguration; + + expect(isBarChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for LineChartConfiguration', () => { + const configuration = { + __typename: 'LineChartConfiguration' as const, + } as LineChartConfiguration; + + expect(isBarChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isBarChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isBarChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarOrLineChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarOrLineChartConfiguration.test.ts new file mode 100644 index 0000000000..18d720a6e9 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isBarOrLineChartConfiguration.test.ts @@ -0,0 +1,40 @@ +import { + type BarChartConfiguration, + type LineChartConfiguration, + type PieChartConfiguration, +} from '~/generated/graphql'; +import { isBarOrLineChartConfiguration } from '../isBarOrLineChartConfiguration'; + +describe('isBarOrLineChartConfiguration', () => { + it('should return true for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isBarOrLineChartConfiguration(configuration)).toBe(true); + }); + + it('should return true for LineChartConfiguration', () => { + const configuration = { + __typename: 'LineChartConfiguration', + } as LineChartConfiguration; + + expect(isBarOrLineChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for PieChartConfiguration', () => { + const configuration = { + __typename: 'PieChartConfiguration', + } as PieChartConfiguration; + + expect(isBarOrLineChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isBarOrLineChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isBarOrLineChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartConfiguration.test.ts new file mode 100644 index 0000000000..0cd9f5f8b6 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isChartConfiguration.test.ts @@ -0,0 +1,76 @@ +import { + type AggregateChartConfiguration, + type BarChartConfiguration, + type GaugeChartConfiguration, + type IframeConfiguration, + type LineChartConfiguration, + type PieChartConfiguration, + type StandaloneRichTextConfiguration, +} from '~/generated/graphql'; +import { isChartConfiguration } from '../isChartConfiguration'; + +describe('isChartConfiguration', () => { + it('should return true for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isChartConfiguration(configuration)).toBe(true); + }); + + it('should return true for LineChartConfiguration', () => { + const configuration = { + __typename: 'LineChartConfiguration', + } as LineChartConfiguration; + + expect(isChartConfiguration(configuration)).toBe(true); + }); + + it('should return true for PieChartConfiguration', () => { + const configuration = { + __typename: 'PieChartConfiguration', + } as PieChartConfiguration; + + expect(isChartConfiguration(configuration)).toBe(true); + }); + + it('should return true for AggregateChartConfiguration', () => { + const configuration = { + __typename: 'AggregateChartConfiguration', + } as AggregateChartConfiguration; + + expect(isChartConfiguration(configuration)).toBe(true); + }); + + it('should return true for GaugeChartConfiguration', () => { + const configuration = { + __typename: 'GaugeChartConfiguration', + } as GaugeChartConfiguration; + + expect(isChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for IframeConfiguration', () => { + const configuration = { + __typename: 'IframeConfiguration', + } as IframeConfiguration; + + expect(isChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for StandaloneRichTextConfiguration', () => { + const configuration = { + __typename: 'StandaloneRichTextConfiguration', + } as StandaloneRichTextConfiguration; + + expect(isChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isGaugeChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isGaugeChartConfiguration.test.ts new file mode 100644 index 0000000000..b80a31279d --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isGaugeChartConfiguration.test.ts @@ -0,0 +1,31 @@ +import { + type BarChartConfiguration, + type GaugeChartConfiguration, +} from '~/generated/graphql'; +import { isGaugeChartConfiguration } from '../isGaugeChartConfiguration'; + +describe('isGaugeChartConfiguration', () => { + it('should return true for GaugeChartConfiguration', () => { + const configuration = { + __typename: 'GaugeChartConfiguration', + } as GaugeChartConfiguration; + + expect(isGaugeChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isGaugeChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isGaugeChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isGaugeChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isIframeConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isIframeConfiguration.test.ts new file mode 100644 index 0000000000..e68f0e750d --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isIframeConfiguration.test.ts @@ -0,0 +1,31 @@ +import { + type BarChartConfiguration, + type IframeConfiguration, +} from '~/generated/graphql'; +import { isIframeConfiguration } from '../isIframeConfiguration'; + +describe('isIframeConfiguration', () => { + it('should return true for IframeConfiguration', () => { + const configuration = { + __typename: 'IframeConfiguration', + } as IframeConfiguration; + + expect(isIframeConfiguration(configuration)).toBe(true); + }); + + it('should return false for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isIframeConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isIframeConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isIframeConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isLineChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isLineChartConfiguration.test.ts new file mode 100644 index 0000000000..12ff2deba5 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isLineChartConfiguration.test.ts @@ -0,0 +1,31 @@ +import { + type BarChartConfiguration, + type LineChartConfiguration, +} from '~/generated/graphql'; +import { isLineChartConfiguration } from '../isLineChartConfiguration'; + +describe('isLineChartConfiguration', () => { + it('should return true for LineChartConfiguration', () => { + const configuration = { + __typename: 'LineChartConfiguration', + } as LineChartConfiguration; + + expect(isLineChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isLineChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isLineChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isLineChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isPieChartConfiguration.test.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isPieChartConfiguration.test.ts new file mode 100644 index 0000000000..bf01a2472e --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/isPieChartConfiguration.test.ts @@ -0,0 +1,31 @@ +import { + type BarChartConfiguration, + type PieChartConfiguration, +} from '~/generated/graphql'; +import { isPieChartConfiguration } from '../isPieChartConfiguration'; + +describe('isPieChartConfiguration', () => { + it('should return true for PieChartConfiguration', () => { + const configuration = { + __typename: 'PieChartConfiguration', + } as PieChartConfiguration; + + expect(isPieChartConfiguration(configuration)).toBe(true); + }); + + it('should return false for BarChartConfiguration', () => { + const configuration = { + __typename: 'BarChartConfiguration', + } as BarChartConfiguration; + + expect(isPieChartConfiguration(configuration)).toBe(false); + }); + + it('should return false for null', () => { + expect(isPieChartConfiguration(null)).toBe(false); + }); + + it('should return false for undefined', () => { + expect(isPieChartConfiguration(undefined)).toBe(false); + }); +}); diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts index 03343678f3..cf6de1c410 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/buildChartGroupByFieldConfigUpdate.ts @@ -1,5 +1,8 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; +import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration'; import { isFieldOrRelationNestedFieldDateKind } from '@/command-menu/pages/page-layout/utils/isFieldOrNestedFieldDateKind'; +import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; @@ -37,9 +40,9 @@ export const buildChartGroupByFieldConfigUpdate = < [subFieldNameKey]: subFieldName, }; - const isBarChart = configuration.__typename === 'BarChartConfiguration'; - const isLineChart = configuration.__typename === 'LineChartConfiguration'; - const isPieChart = configuration.__typename === 'PieChartConfiguration'; + const isBarChart = isBarChartConfiguration(configuration); + const isLineChart = isLineChartConfiguration(configuration); + const isPieChart = isPieChartConfiguration(configuration); if (isPrimaryAxis) { const existingOrderBy = diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts index b769c5efde..ad2c6cdff5 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/convertPieChartConfigToBarOrLineChart.ts @@ -1,10 +1,11 @@ import { type BarLineChartConvertibleFields } from '@/command-menu/pages/page-layout/types/BarLineChartConvertibleFields'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { type PieChartConfiguration } from '~/generated/graphql'; export const convertPieChartConfigToBarOrLineChart = ( configuration: PieChartConfiguration, ): BarLineChartConvertibleFields => { - if (configuration.__typename !== 'PieChartConfiguration') { + if (!isPieChartConfiguration(configuration)) { return {}; } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isAggregateChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isAggregateChartConfiguration.ts new file mode 100644 index 0000000000..534db9e8b6 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isAggregateChartConfiguration.ts @@ -0,0 +1,11 @@ +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { + type AggregateChartConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +export const isAggregateChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is AggregateChartConfiguration => { + return configuration?.__typename === 'AggregateChartConfiguration'; +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarChartConfiguration.ts new file mode 100644 index 0000000000..cfae08a9e4 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarChartConfiguration.ts @@ -0,0 +1,11 @@ +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { + type BarChartConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +export const isBarChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is BarChartConfiguration => { + return configuration?.__typename === 'BarChartConfiguration'; +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration.ts new file mode 100644 index 0000000000..6b24de287a --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration.ts @@ -0,0 +1,18 @@ +import { + type BarChartConfiguration, + type LineChartConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { isBarChartConfiguration } from './isBarChartConfiguration'; +import { isLineChartConfiguration } from './isLineChartConfiguration'; + +export const isBarOrLineChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is BarChartConfiguration | LineChartConfiguration => { + return ( + isBarChartConfiguration(configuration) || + isLineChartConfiguration(configuration) + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartConfiguration.ts new file mode 100644 index 0000000000..336e50e1e6 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isChartConfiguration.ts @@ -0,0 +1,21 @@ +import { type WidgetConfiguration } from '~/generated/graphql'; + +import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; +import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration'; +import { isGaugeChartConfiguration } from '@/command-menu/pages/page-layout/utils/isGaugeChartConfiguration'; +import { isLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; + +export const isChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is ChartConfiguration => { + return ( + isBarChartConfiguration(configuration) || + isLineChartConfiguration(configuration) || + isPieChartConfiguration(configuration) || + isAggregateChartConfiguration(configuration) || + isGaugeChartConfiguration(configuration) + ); +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isGaugeChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isGaugeChartConfiguration.ts new file mode 100644 index 0000000000..4b0cd8cd8c --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isGaugeChartConfiguration.ts @@ -0,0 +1,11 @@ +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { + type GaugeChartConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +export const isGaugeChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is GaugeChartConfiguration => { + return configuration?.__typename === 'GaugeChartConfiguration'; +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isIframeConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isIframeConfiguration.ts new file mode 100644 index 0000000000..e2dda3ea11 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isIframeConfiguration.ts @@ -0,0 +1,11 @@ +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { + type IframeConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +export const isIframeConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is IframeConfiguration => { + return configuration?.__typename === 'IframeConfiguration'; +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isLineChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isLineChartConfiguration.ts new file mode 100644 index 0000000000..8e4336cc06 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isLineChartConfiguration.ts @@ -0,0 +1,11 @@ +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { + type LineChartConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +export const isLineChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is LineChartConfiguration => { + return configuration?.__typename === 'LineChartConfiguration'; +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts index 23ce015d54..c07b09ff9f 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isMinMaxRangeValid.ts @@ -1,5 +1,6 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; import { isDefined } from 'twenty-shared/utils'; export const isMinMaxRangeValid = ( @@ -9,11 +10,7 @@ export const isMinMaxRangeValid = ( newValue: number, configuration: ChartConfiguration, ): boolean => { - const isBarOrLineChart = - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration'; - - if (!isBarOrLineChart) { + if (!isBarOrLineChartConfiguration(configuration)) { return true; } diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isPieChartConfiguration.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isPieChartConfiguration.ts new file mode 100644 index 0000000000..e3157026b8 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/isPieChartConfiguration.ts @@ -0,0 +1,11 @@ +import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration'; +import { + type PieChartConfiguration, + type WidgetConfiguration, +} from '~/generated/graphql'; + +export const isPieChartConfiguration = ( + configuration: WidgetConfiguration | FieldsConfiguration | null | undefined, +): configuration is PieChartConfiguration => { + return configuration?.__typename === 'PieChartConfiguration'; +}; diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts index 378d3a0f62..d7fd902da9 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts +++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts @@ -1,6 +1,8 @@ import { type ChartConfiguration } from '@/command-menu/pages/page-layout/types/ChartConfiguration'; import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layout/types/ChartConfigurationSettingIds'; import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup'; +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation'; import { isRelationNestedFieldDateKind } from '@/page-layout/widgets/graph/utils/isRelationNestedFieldDateKind'; @@ -54,11 +56,7 @@ export const shouldHideChartSetting = ( if (isDefined(configuration) && isDefined(objectMetadataItem)) { if (item.id === CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_X) { - const isBarOrLineChart = - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration'; - - if (isBarOrLineChart) { + if (isBarOrLineChartConfiguration(configuration)) { return shouldHideDateGranularityBasedOnFieldType( configuration.primaryAxisGroupByFieldMetadataId, configuration.primaryAxisGroupBySubFieldName, @@ -69,11 +67,7 @@ export const shouldHideChartSetting = ( } if (item.id === CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY_Y) { - const isBarOrLineChart = - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration'; - - if (isBarOrLineChart) { + if (isBarOrLineChartConfiguration(configuration)) { return shouldHideDateGranularityBasedOnFieldType( configuration.secondaryAxisGroupByFieldMetadataId, configuration.secondaryAxisGroupBySubFieldName, @@ -84,7 +78,7 @@ export const shouldHideChartSetting = ( } if (item.id === CHART_CONFIGURATION_SETTING_IDS.DATE_GRANULARITY) { - if (configuration.__typename === 'PieChartConfiguration') { + if (isPieChartConfiguration(configuration)) { return shouldHideDateGranularityBasedOnFieldType( configuration.groupByFieldMetadataId, configuration.groupBySubFieldName, @@ -95,11 +89,7 @@ export const shouldHideChartSetting = ( } if (item.id === CHART_CONFIGURATION_SETTING_IDS.CUMULATIVE) { - const isBarOrLineChart = - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration'; - - if (isBarOrLineChart) { + if (isBarOrLineChartConfiguration(configuration)) { return shouldHideDateGranularityBasedOnFieldType( configuration.primaryAxisGroupByFieldMetadataId, configuration.primaryAxisGroupBySubFieldName, @@ -110,7 +100,7 @@ export const shouldHideChartSetting = ( } if (item.id === CHART_CONFIGURATION_SETTING_IDS.SHOW_LEGEND) { - if (configuration.__typename === 'PieChartConfiguration') { + if (isPieChartConfiguration(configuration)) { return false; } } diff --git a/packages/twenty-front/src/modules/page-layout/utils/__tests__/createDefaultGraphWidget.test.ts b/packages/twenty-front/src/modules/page-layout/utils/__tests__/createDefaultGraphWidget.test.ts index 072ae807a7..35f64724d7 100644 --- a/packages/twenty-front/src/modules/page-layout/utils/__tests__/createDefaultGraphWidget.test.ts +++ b/packages/twenty-front/src/modules/page-layout/utils/__tests__/createDefaultGraphWidget.test.ts @@ -1,3 +1,4 @@ +import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration'; import { AggregateOperations, AxisNameDisplay, @@ -96,7 +97,7 @@ describe('createDefaultGraphWidget', () => { }); expect(widget.configuration?.__typename).toBe('BarChartConfiguration'); - if (widget.configuration?.__typename === 'BarChartConfiguration') { + if (isBarChartConfiguration(widget.configuration)) { expect(widget.configuration.graphType).toBe(GraphType.HORIZONTAL_BAR); } }); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery.ts index f1a49e4627..a325f2844d 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/hooks/useGraphWidgetGroupByQuery.ts @@ -1,3 +1,4 @@ +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat'; import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient'; import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems'; @@ -14,7 +15,6 @@ import { isDefined } from 'twenty-shared/utils'; import { type BarChartConfiguration, type LineChartConfiguration, - type PieChartConfiguration, } from '~/generated/graphql'; export const useGraphWidgetGroupByQuery = ({ @@ -57,13 +57,7 @@ export const useGraphWidgetGroupByQuery = ({ throw new Error('Aggregate operation not found'); } - const isPieChart = ( - config: GroupByChartConfiguration, - ): config is PieChartConfiguration => { - return config.__typename === 'PieChartConfiguration'; - }; - - const groupByQueryVariables = isPieChart(configuration) + const groupByQueryVariables = isPieChartConfiguration(configuration) ? generateGroupByQueryVariablesFromPieChartConfiguration({ objectMetadataItem, objectMetadataItems, diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts index fb8f7a11c2..7b05359467 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertAggregateChartWidget.ts @@ -1,3 +1,4 @@ +import { isAggregateChartConfiguration } from '@/command-menu/pages/page-layout/utils/isAggregateChartConfiguration'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { assertIsDefinedOrThrow } from 'twenty-shared/utils'; import { type AggregateChartConfiguration } from '~/generated/graphql'; @@ -16,7 +17,7 @@ export const assertAggregateChartWidgetOrThrow: AssertAggregateChartWidgetOrThro new Error('Widget objectMetadataId is required'), ); - if (widget.configuration?.__typename !== 'AggregateChartConfiguration') { + if (!isAggregateChartConfiguration(widget.configuration)) { throw new Error( `Expected AggregateChartConfiguration but got ${widget.configuration?.__typename}`, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts index b10b373077..ab2f702d58 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertBarChartWidget.ts @@ -1,3 +1,4 @@ +import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarChartConfiguration'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { assertIsDefinedOrThrow } from 'twenty-shared/utils'; import { type BarChartConfiguration } from '~/generated/graphql'; @@ -17,7 +18,7 @@ export const assertBarChartWidgetOrThrow: AssertBarChartWidgetOrThrow = ( new Error('Widget objectMetadataId is required'), ); - if (widget.configuration?.__typename !== 'BarChartConfiguration') { + if (!isBarChartConfiguration(widget.configuration)) { throw new Error( `Expected BarChartConfiguration but got ${widget.configuration?.__typename}`, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts index 95053b2457..55e61c9d85 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/assertPieChartWidget.ts @@ -1,3 +1,4 @@ +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget'; import { assertIsDefinedOrThrow } from 'twenty-shared/utils'; import { type PieChartConfiguration } from '~/generated/graphql'; @@ -17,7 +18,7 @@ export const assertPieChartWidgetOrThrow: AssertPieChartWidgetOrThrow = ( new Error('Widget objectMetadataId is required'), ); - if (widget.configuration?.__typename !== 'PieChartConfiguration') { + if (!isPieChartConfiguration(widget.configuration)) { throw new Error( `Expected PieChartConfiguration but got ${widget.configuration?.__typename}`, ); diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts index 6ccfaa1959..f96795c8f4 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts +++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/normalizeChartConfigurationFields.ts @@ -1,3 +1,5 @@ +import { isBarOrLineChartConfiguration } from '@/command-menu/pages/page-layout/utils/isBarOrLineChartConfiguration'; +import { isPieChartConfiguration } from '@/command-menu/pages/page-layout/utils/isPieChartConfiguration'; import { type BarChartConfiguration, type GraphOrderBy, @@ -19,10 +21,7 @@ export const normalizeChartConfigurationFields = ( | LineChartConfiguration | PieChartConfiguration, ): NormalizedChartConfigurationFields => { - if ( - configuration.__typename === 'BarChartConfiguration' || - configuration.__typename === 'LineChartConfiguration' - ) { + if (isBarOrLineChartConfiguration(configuration)) { return { groupByFieldMetadataId: configuration.primaryAxisGroupByFieldMetadataId, groupBySubFieldName: configuration.primaryAxisGroupBySubFieldName, @@ -31,7 +30,7 @@ export const normalizeChartConfigurationFields = ( }; } - if (configuration.__typename === 'PieChartConfiguration') { + if (isPieChartConfiguration(configuration)) { return { groupByFieldMetadataId: configuration.groupByFieldMetadataId, groupBySubFieldName: configuration.groupBySubFieldName,