feat: add Object Edit Settings section with Object preview (#4216)

* feat: add Object Edit Settings section with Object preview

Closes #3834

* fix: fix preview card stories

* test: improve getFieldDefaultPreviewValue tests

* test: add getFieldPreviewValueFromRecord tests

* test: add useFieldPreview tests

* refactor: rename and move components

* fix: restore RecordStoreDecorator

packages/twenty-front/src/testing/decorators/ObjectMetadataItemsDecorator.tsx

@@ -1,11 +1,22 @@
+import { useEffect } from 'react';
 import { Decorator } from '@storybook/react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { mockWorkspaceMembers } from '~/testing/mock-data/workspace-members';
 
 export const ObjectMetadataItemsDecorator: Decorator = (Story) => {
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+  const setCurrentWorkspaceMember = useSetRecoilState(
+    currentWorkspaceMemberState,
+  );
+
+  useEffect(
+    () => setCurrentWorkspaceMember(mockWorkspaceMembers[0]),
+    [setCurrentWorkspaceMember],
+  );
 
   return (
     <>

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -103,11 +103,15 @@ export const graphqlMocks = {
         },
       });
     }),
-    graphql.query('FindManyCompanies', () => {
+    graphql.query('FindManyCompanies', ({ variables }) => {
+      const mockedData = variables.limit
+        ? mockedCompaniesData.slice(0, variables.limit)
+        : mockedCompaniesData;
+
       return HttpResponse.json({
         data: {
           companies: {
-            edges: mockedCompaniesData.map((company) => ({
+            edges: mockedData.map((company) => ({
               node: {
                 ...company,
                 favorites: {

packages/twenty-front/src/testing/mock-data/metadata.ts

@@ -1109,7 +1109,7 @@ export const mockedCompaniesMetadata = {
           node: {
             __typename: 'field',
             id: '726f398f-7007-49f9-8b03-f71813c9fcf2',
-            type: FieldMetadataType.Text,
+            type: FieldMetadataType.Select,
             name: 'industry',
             label: 'Industry',
             description: 'The industry the company is involved in',
@@ -1122,8 +1122,51 @@ export const mockedCompaniesMetadata = {
             updatedAt: '2023-12-20T12:25:25.057Z',
             fromRelationMetadata: null,
             toRelationMetadata: null,
-            options: [],
-            defaultValue: null,
+            options: [
+              {
+                id: '9ecaa155-cb8a-4840-8c28-a308d4fdc35d',
+                color: 'pink',
+                label: '💊 Health',
+                position: 0,
+                value: 'HEALTH',
+              },
+              {
+                id: '75287708-8bb6-4c69-8951-a622b2935ac7',
+                color: 'purple',
+                label: '🏭 Industry',
+                position: 1,
+                value: 'INDUSTRY',
+              },
+              {
+                id: 'f8694cf8-c673-49ab-b758-b369de8584ec',
+                color: 'sky',
+                label: '🤖 SaaS',
+                position: 2,
+                value: 'SAAS',
+              },
+              {
+                id: '3fd92580-1549-4cc0-b0b3-3a03bcffa7d0',
+                color: 'turquoise',
+                label: '🌿 Green tech',
+                position: 3,
+                value: 'GREEN_TECH',
+              },
+              {
+                id: '9b4a1271-c515-4440-b450-78eb7ca05975',
+                color: 'yellow',
+                label: '🚲 Mobility',
+                position: 4,
+                value: 'MOBILITY',
+              },
+              {
+                id: 'c80f4670-e8a5-4488-88b3-97a1b46f5940',
+                color: 'green',
+                label: '🌏 NGO',
+                position: 5,
+                value: 'NGO',
+              },
+            ],
+            defaultValue: 'HEALTH',
           },
         },
       ],

packages/twenty-front/src/testing/mock-data/workspace-members.ts

@@ -10,7 +10,7 @@ export const mockWorkspaceMembers = [
     createdAt: '2023-12-18T09:51:19.645Z',
     updatedAt: '2023-12-18T09:51:19.645Z',
     userId: '20202020-7169-42cf-bc47-1cfef15264b8',
-    colorScheme: 'Light',
+    colorScheme: 'Light' as const,
   },
   {
     id: '20202020-77d5-4cb6-b60a-f4a835a85d61',
@@ -23,6 +23,6 @@ export const mockWorkspaceMembers = [
     createdAt: '2023-12-18T09:51:19.645Z',
     updatedAt: '2023-12-18T09:51:19.645Z',
     userId: '20202020-3957-4908-9c36-2929a23f8357',
-    colorScheme: 'Light',
+    colorScheme: 'Dark' as const,
   },
 ];