Add field widget (#16609)

- Ability to display the details of a field
- The field can be edited (relations edition will be supported later)
- For now, the widget configuration stores the name of the field instead
of its fieldMetadataId. A hook resolves the fieldMetadataId from the
list of fields and the provided name. This will be replaced once we
migrate the configuration to the backend.

## Demo


https://github.com/user-attachments/assets/ab7efbda-66b2-46c1-b641-c350977c31dd

## Remaining to do

- Edition of relations

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

@@ -1,3 +1,4 @@
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type AggregateChartConfiguration,
@@ -5,7 +6,12 @@ import {
 } from '~/generated/graphql';
 
 export const isAggregateChartConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is AggregateChartConfiguration => {
   return configuration?.__typename === 'AggregateChartConfiguration';
 };

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

@@ -1,3 +1,4 @@
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type BarChartConfiguration,
@@ -5,7 +6,12 @@ import {
 } from '~/generated/graphql';
 
 export const isBarChartConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is BarChartConfiguration => {
   return configuration?.__typename === 'BarChartConfiguration';
 };

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

@@ -4,12 +4,18 @@ import {
   type WidgetConfiguration,
 } from '~/generated/graphql';
 
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 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:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is BarChartConfiguration | LineChartConfiguration => {
   return (
     isBarChartConfiguration(configuration) ||

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

@@ -6,10 +6,16 @@ import { isBarChartConfiguration } from '@/command-menu/pages/page-layout/utils/
 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 FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 
 export const isChartConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is ChartConfiguration => {
   return (
     isBarChartConfiguration(configuration) ||

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

@@ -1,3 +1,4 @@
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type GaugeChartConfiguration,
@@ -5,7 +6,12 @@ import {
 } from '~/generated/graphql';
 
 export const isGaugeChartConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is GaugeChartConfiguration => {
   return configuration?.__typename === 'GaugeChartConfiguration';
 };

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

@@ -1,3 +1,4 @@
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type IframeConfiguration,
@@ -5,7 +6,12 @@ import {
 } from '~/generated/graphql';
 
 export const isIframeConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is IframeConfiguration => {
   return configuration?.__typename === 'IframeConfiguration';
 };

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

@@ -1,3 +1,4 @@
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type LineChartConfiguration,
@@ -5,7 +6,12 @@ import {
 } from '~/generated/graphql';
 
 export const isLineChartConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is LineChartConfiguration => {
   return configuration?.__typename === 'LineChartConfiguration';
 };

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

@@ -1,3 +1,4 @@
+import { type FieldConfiguration } from '@/page-layout/types/FieldConfiguration';
 import { type FieldsConfiguration } from '@/page-layout/types/FieldsConfiguration';
 import {
   type PieChartConfiguration,
@@ -5,7 +6,12 @@ import {
 } from '~/generated/graphql';
 
 export const isPieChartConfiguration = (
-  configuration: WidgetConfiguration | FieldsConfiguration | null | undefined,
+  configuration:
+    | WidgetConfiguration
+    | FieldConfiguration
+    | FieldsConfiguration
+    | null
+    | undefined,
 ): configuration is PieChartConfiguration => {
   return configuration?.__typename === 'PieChartConfiguration';
 };