From aa50ee4b218b8158709676403eacdd993ff0d862 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Sat, 4 Nov 2023 13:22:10 +0100
Subject: [PATCH] Fix chromatic build

---
 .../metadata/components/RecordShowPage.tsx    | 57 ++++++++++---------
 .../visibleTableColumnsScopedSelector.ts      |  4 +-
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/front/src/modules/metadata/components/RecordShowPage.tsx b/front/src/modules/metadata/components/RecordShowPage.tsx
index a25074acb..aba96ca59 100644
--- a/front/src/modules/metadata/components/RecordShowPage.tsx
+++ b/front/src/modules/metadata/components/RecordShowPage.tsx
@@ -115,34 +115,35 @@ export const RecordShowPage = () => {
                 avatarType="squared"
               />
               <PropertyBox extraPadding={true}>
-                {foundObjectMetadataItem?.fields
-                  .toSorted((a, b) =>
-                    DateTime.fromISO(a.createdAt)
-                      .diff(DateTime.fromISO(b.createdAt))
-                      .toMillis(),
-                  )
-                  .map((metadataField, index) => {
-                    return (
-                      <FieldContext.Provider
-                        key={object.id + metadataField.id}
-                        value={{
-                          entityId: object.id,
-                          recoilScopeId: object.id + metadataField.id,
-                          fieldDefinition:
-                            formatMetadataFieldAsColumnDefinition({
-                              field: metadataField,
-                              position: index,
-                              objectMetadataItem: foundObjectMetadataItem,
-                              icons,
-                            }),
-                          useUpdateEntityMutation: useUpdateOneObjectMutation,
-                          hotkeyScope: InlineCellHotkeyScope.InlineCell,
-                        }}
-                      >
-                        <InlineCell />
-                      </FieldContext.Provider>
-                    );
-                  })}
+                {foundObjectMetadataItem &&
+                  [...foundObjectMetadataItem.fields]
+                    .sort((a, b) =>
+                      DateTime.fromISO(a.createdAt)
+                        .diff(DateTime.fromISO(b.createdAt))
+                        .toMillis(),
+                    )
+                    .map((metadataField, index) => {
+                      return (
+                        <FieldContext.Provider
+                          key={object.id + metadataField.id}
+                          value={{
+                            entityId: object.id,
+                            recoilScopeId: object.id + metadataField.id,
+                            fieldDefinition:
+                              formatMetadataFieldAsColumnDefinition({
+                                field: metadataField,
+                                position: index,
+                                objectMetadataItem: foundObjectMetadataItem,
+                                icons,
+                              }),
+                            useUpdateEntityMutation: useUpdateOneObjectMutation,
+                            hotkeyScope: InlineCellHotkeyScope.InlineCell,
+                          }}
+                        >
+                          <InlineCell />
+                        </FieldContext.Provider>
+                      );
+                    })}
               </PropertyBox>
             </ShowPageLeftContainer>
             <ShowPageRightContainer
diff --git a/front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts b/front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
index c0c403726..e5d879b70 100644
--- a/front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
+++ b/front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
@@ -13,11 +13,11 @@ export const visibleTableColumnsScopedSelector = selectorFamily({
         availableTableColumnsScopedState(scopeId),
       ).map(({ fieldId }) => fieldId);
 
-      return columns
+      return [...columns]
         .filter(
           (column) =>
             column.isVisible && availableColumnKeys.includes(column.fieldId),
         )
-        .toSorted((a, b) => a.position - b.position);
+        .sort((a, b) => a.position - b.position);
     },
 });