feat: record board component state refactor (#8779)

Fix #8758 

This PR is migrating the recoil component state from v1 to v2 for board.
It also now share some states and logics between board and table,
further can be done later.
Lastly this PR fix an issue since the PR #8613 that was treating
no-value as a normal record-group.

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

@@ -1,17 +1,9 @@
 import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { ViewGroup } from '@/views/types/ViewGroup';
+import { recordGroupDefinitionToViewGroup } from '@/views/utils/recordGroupDefinitionToViewGroup';
 
 export const mapRecordGroupDefinitionsToViewGroups = (
   groupDefinitions: RecordGroupDefinition[],
 ): ViewGroup[] => {
-  return groupDefinitions.map(
-    (groupDefinition): ViewGroup => ({
-      __typename: 'ViewGroup',
-      id: groupDefinition.id,
-      fieldMetadataId: groupDefinition.fieldMetadataId,
-      position: groupDefinition.position,
-      isVisible: groupDefinition.isVisible ?? true,
-      fieldValue: groupDefinition.value ?? '',
-    }),
-  );
+  return groupDefinitions.map(recordGroupDefinitionToViewGroup);
 };

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

@@ -1,3 +1,4 @@
+import { v4 } from 'uuid';
 import { isDefined } from '~/utils/isDefined';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -42,16 +43,7 @@ export const mapViewGroupsToRecordGroupDefinitions = ({
       );
 
       if (!selectedOption) {
-        return {
-          id: 'no-value',
-          title: 'No Value',
-          type: RecordGroupDefinitionType.NoValue,
-          value: null,
-          position: viewGroup.position,
-          isVisible: viewGroup.isVisible,
-          fieldMetadataId: selectFieldMetadataItem.id,
-          color: 'transparent',
-        } satisfies RecordGroupDefinition;
+        return null;
       }
 
       return {
@@ -65,8 +57,32 @@ export const mapViewGroupsToRecordGroupDefinitions = ({
         isVisible: viewGroup.isVisible,
       } as RecordGroupDefinition;
     })
-    .filter(isDefined)
-    .sort((a, b) => a.position - b.position);
+    .filter(isDefined);
 
-  return recordGroupDefinitionsFromViewGroups;
+  if (selectFieldMetadataItem.isNullable === true) {
+    const viewGroup = viewGroups.find(
+      (viewGroup) => viewGroup.fieldValue === '',
+    );
+
+    const noValueColumn = {
+      id: viewGroup?.id ?? v4(),
+      title: 'No Value',
+      type: RecordGroupDefinitionType.NoValue,
+      value: null,
+      position:
+        viewGroup?.position ??
+        recordGroupDefinitionsFromViewGroups
+          .map((option) => option.position)
+          .reduce((a, b) => Math.max(a, b), 0) + 1,
+      isVisible: viewGroup?.isVisible ?? true,
+      fieldMetadataId: selectFieldMetadataItem.id,
+      color: 'transparent',
+    } satisfies RecordGroupDefinition;
+
+    return [...recordGroupDefinitionsFromViewGroups, noValueColumn];
+  }
+
+  return recordGroupDefinitionsFromViewGroups.sort(
+    (a, b) => a.position - b.position,
+  );
 };

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

@@ -0,0 +1,15 @@
+import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
+import { ViewGroup } from '@/views/types/ViewGroup';
+
+export const recordGroupDefinitionToViewGroup = (
+  recordGroup: RecordGroupDefinition,
+): ViewGroup => {
+  return {
+    __typename: 'ViewGroup',
+    id: recordGroup.id,
+    fieldMetadataId: recordGroup.fieldMetadataId,
+    position: recordGroup.position,
+    isVisible: recordGroup.isVisible ?? true,
+    fieldValue: recordGroup.value ?? '',
+  };
+};