Fix storybook tests on Field Preview (Settings) (#3761)

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

@@ -8,7 +8,7 @@ export const CurrencyFieldDisplay = () => {
   return (
     <CurrencyDisplay
       amount={
-        fieldValue.amountMicros ? fieldValue.amountMicros / 1000000 : null
+        fieldValue?.amountMicros ? fieldValue.amountMicros / 1000000 : null
       }
     />
   );

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx

@@ -69,7 +69,7 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
                 <RecordTableCellContainer />
               </RecordTableCellContext.Provider>
             ) : (
-              <td></td>
+              <td key={column.fieldMetadataId}></td>
             );
           })}
         <td></td>

packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx

@@ -4,6 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { RecordStoreDecorator } from '~/testing/decorators/RecordStoreDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import {
@@ -17,6 +18,7 @@ const meta: Meta<typeof SettingsObjectFieldPreview> = {
   title: 'Modules/Settings/DataModel/SettingsObjectFieldPreview',
   component: SettingsObjectFieldPreview,
   decorators: [
+    RecordStoreDecorator,
     ComponentDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
@@ -28,6 +30,23 @@ const meta: Meta<typeof SettingsObjectFieldPreview> = {
     objectMetadataId: mockedCompaniesMetadata.node.id,
   },
   parameters: {
+    records: [
+      {
+        id: `${mockedCompaniesMetadata.node.id}-field-form`,
+        domainName: 'Test',
+        idealCustomerProfile: true,
+        annualRecurringRevenue: {
+          amountMicros: 1000000,
+          currency: 'USD',
+        },
+        updatedAt: '2021-08-05T14:00:00.000Z',
+        linkedinLink: {
+          label: 'LinkedIn',
+          url: 'https://linkedin.com',
+        },
+        employees: 100,
+      },
+    ],
     msw: graphqlMocks,
   },
 };

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

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { Decorator } from '@storybook/react';
+
+import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
+
+export const RecordStoreDecorator: Decorator = (Story, context) => {
+  const { records } = context.parameters;
+
+  const { setRecords } = useSetRecordInStore();
+
+  useEffect(() => {
+    setRecords(records);
+  });
+
+  return <Story />;
+};