'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-metadata/graphql/mutations.ts

@@ -35,6 +35,7 @@ export const CREATE_ONE_FIELD_METADATA_ITEM = gql`
       isNullable
       createdAt
       updatedAt
+      settings
       defaultValue
       options
     }
@@ -73,6 +74,7 @@ export const UPDATE_ONE_FIELD_METADATA_ITEM = gql`
       isNullable
       createdAt
       updatedAt
+      settings
     }
   }
 `;
@@ -136,6 +138,7 @@ export const DELETE_ONE_FIELD_METADATA_ITEM = gql`
       isNullable
       createdAt
       updatedAt
+      settings
     }
   }
 `;

packages/twenty-front/src/modules/object-metadata/graphql/queries.ts

@@ -41,6 +41,7 @@ export const FIND_MANY_OBJECT_METADATA_ITEMS = gql`
                 updatedAt
                 defaultValue
                 options
+                settings
                 relationDefinition {
                   relationId
                   direction

packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts

@@ -17,6 +17,7 @@ const baseFields = `
   isNullable
   createdAt
   updatedAt
+  settings
 `;
 
 export const queries = {
@@ -73,6 +74,7 @@ export const variables = {
         label: 'fieldLabel',
         name: 'fieldLabel',
         options: undefined,
+        settings: undefined,
         objectMetadataId,
         type: 'TEXT',
       },
@@ -96,6 +98,7 @@ const defaultResponseData = {
   isNullable: false,
   createdAt: '1977-09-28T13:56:55.157Z',
   updatedAt: '1996-10-10T08:27:57.117Z',
+  settings: undefined,
 };
 
 const fieldRelationResponseData = {

packages/twenty-front/src/modules/object-metadata/hooks/useFieldMetadataItem.ts

@@ -1,6 +1,6 @@
 import { useDeleteOneRelationMetadataItem } from '@/object-metadata/hooks/useDeleteOneRelationMetadataItem';
-import { Field } from '~/generated/graphql';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
+import { Field } from '~/generated/graphql';
 
 import { FieldMetadataItem } from '../types/FieldMetadataItem';
 import { formatFieldMetadataItemInput } from '../utils/formatFieldMetadataItemInput';
@@ -18,7 +18,13 @@ export const useFieldMetadataItem = () => {
   const createMetadataField = (
     input: Pick<
       Field,
-      'label' | 'icon' | 'description' | 'defaultValue' | 'type' | 'options'
+      | 'label'
+      | 'icon'
+      | 'description'
+      | 'defaultValue'
+      | 'type'
+      | 'options'
+      | 'settings'
     > & {
       objectMetadataId: string;
     },

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts

@@ -36,4 +36,7 @@ export type FieldMetadataItem = Omit<
       'id' | 'nameSingular' | 'namePlural'
     >;
   } | null;
+  settings?: {
+    displayAsRelativeDate?: boolean;
+  };
 };

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts

@@ -37,6 +37,7 @@ export const formatFieldMetadataItemAsFieldDefinition = ({
     targetFieldMetadataName:
       field.relationDefinition?.targetFieldMetadata?.name ?? '',
     options: field.options,
+    settings: field.settings,
     isNullable: field.isNullable,
   };
 

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemInput.ts

@@ -5,7 +5,13 @@ export const formatFieldMetadataItemInput = (
   input: Partial<
     Pick<
       FieldMetadataItem,
-      'type' | 'label' | 'defaultValue' | 'icon' | 'description' | 'options'
+      | 'type'
+      | 'label'
+      | 'defaultValue'
+      | 'icon'
+      | 'description'
+      | 'options'
+      | 'settings'
     >
   >,
 ) => {
@@ -18,5 +24,6 @@ export const formatFieldMetadataItemInput = (
     label,
     name: label ? computeMetadataNameFromLabelOrThrow(label) : undefined,
     options: input.options,
+    settings: input.settings,
   };
 };

packages/twenty-front/src/modules/object-metadata/validation-schemas/fieldMetadataItemSchema.ts

@@ -35,6 +35,7 @@ export const fieldMetadataItemSchema = (existingLabels?: string[]) => {
       )
       .nullable()
       .optional(),
+    settings: z.any().optional(),
     relationDefinition: z
       .object({
         __typename: z.literal('RelationDefinition').optional(),