Fix new board bugs (#3730)

* Fix freeze on field visibility change on board

* Fix

* Fix lint

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -18,10 +18,12 @@ import { recordIndexSortsState } from '@/object-record/record-index/states/recor
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider';
 import { ViewBar } from '@/views/components/ViewBar';
+import { ViewField } from '@/views/types/ViewField';
 import { ViewType } from '@/views/types/ViewType';
 import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
 import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
 import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -58,9 +60,6 @@ export const RecordIndexContainer = ({
   const { columnDefinitions } =
     useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
 
-  const setRecordIndexFieldDefinitions = useSetRecoilState(
-    recordIndexFieldDefinitionsState,
-  );
   const setRecordIndexFilters = useSetRecoilState(recordIndexFiltersState);
   const setRecordIndexSorts = useSetRecoilState(recordIndexSortsState);
 
@@ -68,6 +67,32 @@ export const RecordIndexContainer = ({
     recordTableId: recordIndexId,
   });
 
+  const onViewFieldsChange = useRecoilCallback(
+    ({ set, snapshot }) =>
+      (viewFields: ViewField[]) => {
+        setTableColumns(
+          mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
+        );
+
+        const existingRecordIndexFieldDefinitions = snapshot
+          .getLoadable(recordIndexFieldDefinitionsState)
+          .getValue();
+
+        const newFieldDefinitions = mapViewFieldsToColumnDefinitions(
+          viewFields,
+          columnDefinitions,
+        );
+        if (
+          !isDeeplyEqual(
+            existingRecordIndexFieldDefinitions,
+            newFieldDefinitions,
+          )
+        )
+          set(recordIndexFieldDefinitionsState, newFieldDefinitions);
+      },
+    [columnDefinitions, setTableColumns],
+  );
+
   return (
     <StyledContainer>
       <SpreadsheetImportProvider>
@@ -81,14 +106,7 @@ export const RecordIndexContainer = ({
             />
           }
           optionsDropdownScopeId={RECORD_INDEX_OPTIONS_DROPDOWN_ID}
-          onViewFieldsChange={(viewFields) => {
-            setTableColumns(
-              mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
-            );
-            setRecordIndexFieldDefinitions(
-              mapViewFieldsToColumnDefinitions(viewFields, columnDefinitions),
-            );
-          }}
+          onViewFieldsChange={onViewFieldsChange}
           onViewFiltersChange={(viewFilters) => {
             setTableFilters(mapViewFiltersToFilters(viewFilters));
             setRecordIndexFilters(mapViewFiltersToFilters(viewFilters));

packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts

@@ -144,13 +144,14 @@ export const useRecordIndexOptionsForBoard = ({
             updatedFieldDefinition.fieldMetadataId
               ? {
                   ...exitingFieldDefinition,
-                  isVisible: !updatedFieldDefinition.isVisible,
+                  isVisible: !exitingFieldDefinition.isVisible,
                 }
               : exitingFieldDefinition,
         );
       }
 
       setRecordIndexFieldDefinitions(updatedFieldsDefinitions);
+
       persistViewFields(
         mapBoardFieldDefinitionsToViewFields(updatedFieldsDefinitions),
       );

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

@@ -18,10 +18,6 @@ type RecordTableRowProps = {
   rowIndex: number;
 };
 
-const StyledPlaceholder = styled.td`
-  height: 30px;
-`;
-
 const StyledTd = styled.td`
   background-color: ${({ theme }) => theme.background.primary};
 `;
@@ -56,31 +52,27 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
         data-testid={`row-id-${recordId}`}
         data-selectable-id={recordId}
       >
-        {inView ? (
-          <>
-            <StyledTd>
-              <CheckboxCell />
-            </StyledTd>
-            {[...visibleTableColumns]
-              .sort((columnA, columnB) => columnA.position - columnB.position)
-              .map((column, columnIndex) => {
-                return (
-                  <RecordTableCellContext.Provider
-                    value={{
-                      columnDefinition: column,
-                      columnIndex,
-                    }}
-                    key={column.fieldMetadataId}
-                  >
-                    <RecordTableCellContainer />
-                  </RecordTableCellContext.Provider>
-                );
-              })}
-            <td></td>
-          </>
-        ) : (
-          <StyledPlaceholder />
-        )}
+        <StyledTd>
+          <CheckboxCell />
+        </StyledTd>
+        {[...visibleTableColumns]
+          .sort((columnA, columnB) => columnA.position - columnB.position)
+          .map((column, columnIndex) => {
+            return inView ? (
+              <RecordTableCellContext.Provider
+                value={{
+                  columnDefinition: column,
+                  columnIndex,
+                }}
+                key={column.fieldMetadataId}
+              >
+                <RecordTableCellContainer />
+              </RecordTableCellContext.Provider>
+            ) : (
+              <td></td>
+            );
+          })}
+        <td></td>
       </tr>
     </RecordTableRowContext.Provider>
   );