unlock relation date fields on dashboards (#16207)

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/ChartSettings.tsx

@@ -96,6 +96,7 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
             isGroupByEnabled as boolean,
             configuration,
             objectMetadataItem,
+            objectMetadataItems,
           ),
       )
       .map((item) => item.id),
@@ -144,6 +145,7 @@ export const ChartSettings = ({ widget }: { widget: PageLayoutWidget }) => {
                 isGroupByEnabled as boolean,
                 configuration,
                 objectMetadataItem,
+                objectMetadataItems,
               ),
           );
 

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx

@@ -16,7 +16,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
-import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
+import { isDefined } from 'twenty-shared/utils';
 import { IconChevronLeft, useIcons } from 'twenty-ui/display';
 import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
@@ -70,11 +70,7 @@ export const ChartGroupByFieldSelectionRelationFieldView = ({
 
     return filterBySearchQuery({
       items: targetObjectMetadataItem.fields.filter(
-        (field) =>
-          !field.isSystem &&
-          !isFieldRelation(field) &&
-          // TODO: Backend doesn't fully support date fields for relation fields yet so we hide them for now. https://github.com/twentyhq/core-team-issues/issues/1935
-          !isFieldMetadataDateKind(field.type),
+        (field) => !field.isSystem && !isFieldRelation(field),
       ),
       searchQuery,
       getSearchableValues: (field) => [field.label, field.name],

packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/__tests__/shouldHideChartSetting.test.ts

@@ -385,6 +385,28 @@ describe('shouldHideChartSetting', () => {
     });
 
     describe('DATE_GRANULARITY (Pie Chart)', () => {
+      const relationField: any = {
+        id: 'relation-field-id',
+        name: 'company',
+        label: 'Company',
+        type: FieldMetadataType.RELATION,
+        relation: { targetObjectMetadata: { nameSingular: 'company' } },
+      };
+
+      const targetObjectMetadata: any = {
+        id: 'company-id',
+        nameSingular: 'company',
+        namePlural: 'companies',
+        fields: [
+          {
+            id: 'company-created-at',
+            name: 'createdAt',
+            label: 'Created At',
+            type: FieldMetadataType.DATE,
+          },
+        ],
+      };
+
       it('should show when group by field is a date field', () => {
         const pieChartConfig: ChartConfiguration = {
           __typename: 'PieChartConfiguration',
@@ -435,6 +457,30 @@ describe('shouldHideChartSetting', () => {
 
         expect(result).toBe(true);
       });
+
+      it('should show when group by field is a relation date subfield', () => {
+        const objectMetadataItemWithRelation: ObjectMetadataItem = {
+          ...mockObjectMetadataItem,
+          fields: [...mockObjectMetadataItem.fields, relationField],
+        } as any;
+
+        const pieChartConfig: ChartConfiguration = {
+          __typename: 'PieChartConfiguration',
+          groupByFieldMetadataId: relationField.id,
+          groupBySubFieldName: 'createdAt',
+        } as any;
+
+        const result = shouldHideChartSetting(
+          mockDateGranularityItem,
+          'object-id',
+          true,
+          pieChartConfig,
+          objectMetadataItemWithRelation,
+          [objectMetadataItemWithRelation, targetObjectMetadata] as any,
+        );
+
+        expect(result).toBe(false);
+      });
     });
   });
 });

packages/twenty-front/src/modules/command-menu/pages/page-layout/utils/shouldHideChartSetting.ts

@@ -3,12 +3,15 @@ import { CHART_CONFIGURATION_SETTING_IDS } from '@/command-menu/pages/page-layou
 import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/ChartSettingsGroup';
 import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
+import { isNestedFieldDateType } from '@/page-layout/widgets/graph/utils/isNestedFieldDateType';
 import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
 
 const shouldHideDateGranularityBasedOnFieldType = (
   fieldMetadataId: string | undefined | null,
+  subFieldName: string | undefined | null,
   objectMetadataItem: ObjectMetadataItem,
+  objectMetadataItems: ObjectMetadataItem[],
 ): boolean => {
   if (!isDefined(fieldMetadataId)) {
     return true;
@@ -22,8 +25,8 @@ const shouldHideDateGranularityBasedOnFieldType = (
     return true;
   }
 
-  if (isFieldRelation(field)) {
-    return true;
+  if (isFieldRelation(field) && isDefined(subFieldName)) {
+    return !isNestedFieldDateType(field, subFieldName, objectMetadataItems);
   }
 
   return !isFieldMetadataDateKind(field.type);
@@ -35,6 +38,7 @@ export const shouldHideChartSetting = (
   isGroupByEnabled: boolean,
   configuration?: ChartConfiguration,
   objectMetadataItem?: ObjectMetadataItem,
+  objectMetadataItems?: ObjectMetadataItem[],
 ): boolean => {
   const hasNoObjectMetadata = !isNonEmptyString(objectMetadataId);
   const dependsOnSource = item?.dependsOn?.includes(
@@ -53,7 +57,9 @@ export const shouldHideChartSetting = (
       if (isBarOrLineChart) {
         return shouldHideDateGranularityBasedOnFieldType(
           configuration.primaryAxisGroupByFieldMetadataId,
+          configuration.primaryAxisGroupBySubFieldName,
           objectMetadataItem,
+          objectMetadataItems ?? [],
         );
       }
     }
@@ -66,7 +72,9 @@ export const shouldHideChartSetting = (
       if (isBarOrLineChart) {
         return shouldHideDateGranularityBasedOnFieldType(
           configuration.secondaryAxisGroupByFieldMetadataId,
+          configuration.secondaryAxisGroupBySubFieldName,
           objectMetadataItem,
+          objectMetadataItems ?? [],
         );
       }
     }
@@ -75,7 +83,9 @@ export const shouldHideChartSetting = (
       if (configuration.__typename === 'PieChartConfiguration') {
         return shouldHideDateGranularityBasedOnFieldType(
           configuration.groupByFieldMetadataId,
+          configuration.groupBySubFieldName,
           objectMetadataItem,
+          objectMetadataItems ?? [],
         );
       }
     }