'Display as relative date' field formatting option for dateTime and date fields #5398 (#6945)

Implements #5398.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateFieldDisplay.tsx

@@ -2,7 +2,15 @@ import { useDateFieldDisplay } from '@/object-record/record-field/meta-types/hoo
 import { DateDisplay } from '@/ui/field/display/components/DateDisplay';
 
 export const DateFieldDisplay = () => {
-  const { fieldValue } = useDateFieldDisplay();
+  const { fieldValue, fieldDefinition } = useDateFieldDisplay();
 
-  return <DateDisplay value={fieldValue} />;
+  const displayAsRelativeDate =
+    fieldDefinition.metadata?.settings?.displayAsRelativeDate;
+
+  return (
+    <DateDisplay
+      value={fieldValue}
+      displayAsRelativeDate={displayAsRelativeDate}
+    />
+  );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/DateTimeFieldDisplay.tsx

@@ -2,7 +2,15 @@ import { useDateTimeFieldDisplay } from '@/object-record/record-field/meta-types
 import { DateTimeDisplay } from '@/ui/field/display/components/DateTimeDisplay';
 
 export const DateTimeFieldDisplay = () => {
-  const { fieldValue } = useDateTimeFieldDisplay();
+  const { fieldValue, fieldDefinition } = useDateTimeFieldDisplay();
 
-  return <DateTimeDisplay value={fieldValue} />;
+  const displayAsRelativeDate =
+    fieldDefinition.metadata?.settings?.displayAsRelativeDate;
+
+  return (
+    <DateTimeDisplay
+      value={fieldValue}
+      displayAsRelativeDate={displayAsRelativeDate}
+    />
+  );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useDateFieldDisplay.ts

@@ -2,6 +2,8 @@ import { useContext } from 'react';
 
 import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 
+import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
+import { FieldDateMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useDateFieldDisplay = () => {
@@ -16,7 +18,10 @@ export const useDateFieldDisplay = () => {
   );
 
   return {
-    fieldDefinition,
+    // TODO: we have to use this because we removed the assertion that would have otherwise narrowed the type because
+    // it impacts performance. We should find a way to assert the type in a way that doesn't impact performance.
+    // Maybe a level above ?
+    fieldDefinition: fieldDefinition as FieldDefinition<FieldDateMetadata>,
     fieldValue,
     hotkeyScope,
     clearable,

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useDateTimeFieldDisplay.ts

@@ -2,6 +2,8 @@ import { useContext } from 'react';
 
 import { useRecordFieldValue } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 
+import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
+import { FieldDateTimeMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useDateTimeFieldDisplay = () => {
@@ -16,7 +18,7 @@ export const useDateTimeFieldDisplay = () => {
   );
 
   return {
-    fieldDefinition,
+    fieldDefinition: fieldDefinition as FieldDefinition<FieldDateTimeMetadata>,
     fieldValue,
     hotkeyScope,
     clearable,

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -27,12 +27,18 @@ export type FieldDateTimeMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: {
+    displayAsRelativeDate?: boolean;
+  };
 };
 
 export type FieldDateMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: {
+    displayAsRelativeDate?: boolean;
+  };
 };
 
 export type FieldNumberMetadata = {