Date field format display (#11384)

## Introduction

This PR enables functionality discussed in [Layout Date
Formatting](https://github.com/twentyhq/core-team-issues/issues/97).

### TLDR;
It enables greater control of date formatting at the object's field
level by upgrading all DATE and DATE_TIME fields' settings from:

```ts
{
    displayAsRelativeDate: boolean
}
```

to:

```ts

type FieldDateDisplayFormat = 'full_date' | 'relative_date' | 'date' | 'time' | 'year' | 'custom'

{
    displayFormat: FieldDateDisplayFormat
}
```

PR also includes an upgrade command that will update any existing DATE
and DATE_TIME fields to the new settings value

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/field/display/components/DateDisplay.tsx

@@ -1,3 +1,4 @@
+import { FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
 import { UserContext } from '@/users/contexts/UserContext';
 import { useContext } from 'react';
 import { formatDateString } from '~/utils/string/formatDateString';
@@ -5,20 +6,17 @@ import { EllipsisDisplay } from './EllipsisDisplay';
 
 type DateDisplayProps = {
   value: string | null | undefined;
-  displayAsRelativeDate?: boolean;
+  dateFieldSettings?: FieldDateMetadataSettings;
 };
 
-export const DateDisplay = ({
-  value,
-  displayAsRelativeDate,
-}: DateDisplayProps) => {
+export const DateDisplay = ({ value, dateFieldSettings }: DateDisplayProps) => {
   const { dateFormat, timeZone } = useContext(UserContext);
 
   const formattedDate = formatDateString({
     value,
     timeZone,
     dateFormat,
-    displayAsRelativeDate,
+    dateFieldSettings,
   });
 
   return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;

packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx

@@ -1,3 +1,4 @@
+import { FieldDateMetadataSettings } from '@/object-record/record-field/types/FieldMetadata';
 import { UserContext } from '@/users/contexts/UserContext';
 import { useContext } from 'react';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
@@ -5,21 +6,21 @@ import { EllipsisDisplay } from './EllipsisDisplay';
 
 type DateTimeDisplayProps = {
   value: string | null | undefined;
-  displayAsRelativeDate?: boolean;
+  dateFieldSettings?: FieldDateMetadataSettings;
 };
 
 export const DateTimeDisplay = ({
   value,
-  displayAsRelativeDate,
+  dateFieldSettings,
 }: DateTimeDisplayProps) => {
   const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
 
   const formattedDate = formatDateTimeString({
     value,
-    displayAsRelativeDate,
     timeZone,
     dateFormat,
     timeFormat,
+    dateFieldSettings,
   });
 
   return <EllipsisDisplay>{formattedDate}</EllipsisDisplay>;