feat: display record identifier field as first column in table (#3788)

* feat: display record identifier field as first column in table

& forbid hiding and moving record identifier column

Closes #3303

* refactor: add availableTableColumnKeysSelectorScopeMap

* feat: show plus icon button for label identifier column and dropdown menu for other columns

* fix: use label identifier field value in RecordShowPage title

* refactor: remove availableColumnKeys selector

* refactor: review - compute label identifier logic in mapViewFieldsToColumnDefinitions + remove selectors

* fix: several fixes

* fix: fix board fields isVisible

* fix: fix board fields reordering

* fix: more board fields fixes

* fix: fix hiddenTableColumnsSelectorScopeMap

packages/twenty-front/src/modules/views/utils/__tests__/viewMapFunctions.test.ts

@@ -133,7 +133,7 @@ describe('mapViewFieldsToColumnDefinitions', () => {
       },
     ];
 
-    const fieldsMetadata: ColumnDefinition<FieldMetadata>[] = [
+    const columnDefinitions: ColumnDefinition<FieldMetadata>[] = [
       {
         fieldMetadataId: '1',
         label: 'label 1',
@@ -183,10 +183,10 @@ describe('mapViewFieldsToColumnDefinitions', () => {
       },
     ];
 
-    const actualColumnDefinitions = mapViewFieldsToColumnDefinitions(
+    const actualColumnDefinitions = mapViewFieldsToColumnDefinitions({
+      columnDefinitions,
       viewFields,
-      fieldsMetadata,
-    );
+    });
 
     expect(actualColumnDefinitions).toEqual(expectedColumnDefinitions);
   });

packages/twenty-front/src/modules/views/utils/mapViewFieldsToColumnDefinitions.ts

@@ -1,33 +1,66 @@
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
+import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
+import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { assertNotNull } from '~/utils/assert';
 
 import { ViewField } from '../types/ViewField';
 
-export const mapViewFieldsToColumnDefinitions = (
-  viewFields: ViewField[],
-  fieldsMetadata: ColumnDefinition<FieldMetadata>[],
-): ColumnDefinition<FieldMetadata>[] => {
-  return viewFields
-    .map((viewField) => {
-      const correspondingFieldMetadata = fieldsMetadata.find(
-        ({ fieldMetadataId }) => viewField.fieldMetadataId === fieldMetadataId,
-      );
+export const mapViewFieldsToColumnDefinitions = ({
+  columnDefinitions,
+  viewFields,
+}: {
+  columnDefinitions: ColumnDefinition<FieldMetadata>[];
+  viewFields: ViewField[];
+}): ColumnDefinition<FieldMetadata>[] => {
+  let labelIdentifierFieldMetadataId = '';
 
-      return correspondingFieldMetadata
-        ? {
-            fieldMetadataId: viewField.fieldMetadataId,
-            label: correspondingFieldMetadata.label,
-            metadata: correspondingFieldMetadata.metadata,
-            infoTooltipContent: correspondingFieldMetadata.infoTooltipContent,
-            iconName: correspondingFieldMetadata.iconName,
-            type: correspondingFieldMetadata.type,
-            position: viewField.position,
-            size: viewField.size ?? correspondingFieldMetadata.size,
-            isVisible: viewField.isVisible,
-            viewFieldId: viewField.id,
-          }
-        : null;
+  const columnDefinitionsByFieldMetadataId = mapArrayToObject(
+    columnDefinitions,
+    ({ fieldMetadataId }) => fieldMetadataId,
+  );
+
+  const columnDefinitionsFromViewFields = viewFields
+    .map((viewField) => {
+      const correspondingColumnDefinition =
+        columnDefinitionsByFieldMetadataId[viewField.fieldMetadataId];
+
+      if (!correspondingColumnDefinition) return null;
+
+      const { isLabelIdentifier } = correspondingColumnDefinition;
+
+      if (isLabelIdentifier) {
+        labelIdentifierFieldMetadataId =
+          correspondingColumnDefinition.fieldMetadataId;
+      }
+
+      return {
+        fieldMetadataId: viewField.fieldMetadataId,
+        label: correspondingColumnDefinition.label,
+        metadata: correspondingColumnDefinition.metadata,
+        infoTooltipContent: correspondingColumnDefinition.infoTooltipContent,
+        iconName: correspondingColumnDefinition.iconName,
+        type: correspondingColumnDefinition.type,
+        position: isLabelIdentifier ? 0 : viewField.position,
+        size: viewField.size ?? correspondingColumnDefinition.size,
+        isLabelIdentifier,
+        isVisible: isLabelIdentifier || viewField.isVisible,
+        viewFieldId: viewField.id,
+      };
     })
     .filter(assertNotNull);
+
+  // No label identifier set for this object
+  if (!labelIdentifierFieldMetadataId) return columnDefinitionsFromViewFields;
+
+  const labelIdentifierIndex = columnDefinitionsFromViewFields.findIndex(
+    ({ fieldMetadataId }) => fieldMetadataId === labelIdentifierFieldMetadataId,
+  );
+
+  // Label identifier field found in view fields
+  // => move it to the start of the list
+  return moveArrayItem(columnDefinitionsFromViewFields, {
+    fromIndex: labelIdentifierIndex,
+    toIndex: 0,
+  });
 };