Treat no value view group as normal & enable hide/dnd for no value (#8613)

Fixes #8591 

1. Summary
We disabled hide/dnd(drag-and-drop) options for `No value` view group
intentionally in the first implementation. We want to change it to
behave like normal view groups, so enable hide/dnd for `No value` view
group as well.

2. Solution
I have removed the code that filters the `No value` group out of view
groups, so `No value` is stored in the same array as other view groups.
I have removed the `No value` flag check for `Hide` button on the
hamburger menu of the Kanban header. I had to update the code in
`packages/twenty-front/src/modules/views/utils/mapViewGroupsToRecordGroupDefinitions.ts`
because it was ignoring the visibility flag of the `No value` view group
and set it always to true. Also, it was always putting the `No value`
group last ignoring the previous position.
>**_I am not 100% confident in the changes I made in
`packages/twenty-front/src/modules/views/utils/mapViewGroupsToRecordGroupDefinitions.ts`.
I'd like to have a review from someone more familiar with that part._**

3. Recording

https://github.com/user-attachments/assets/e135e22e-6e3a-4f94-a898-aafc03bba060

packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupMenuItemDraggable.tsx

@@ -56,10 +56,9 @@ export const RecordGroupMenuItemDraggable = ({
         />
       }
       accent={isNoValue || showDragGrip ? 'placeholder' : 'default'}
-      iconButtons={!isNoValue ? getIconButtons(recordGroup) : undefined}
+      iconButtons={getIconButtons(recordGroup)}
       showGrip={isNoValue ? true : showDragGrip}
-      isDragDisabled={isNoValue ? true : !isDraggable}
+      isDragDisabled={!isDraggable}
-      isHoverDisabled={isNoValue}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-group/components/RecordGroupsVisibilityDropdownSection.tsx

@@ -6,10 +6,7 @@ import {
 import { useRef } from 'react';
 
 import { RecordGroupMenuItemDraggable } from '@/object-record/record-group/components/RecordGroupMenuItemDraggable';
-import {
+import { RecordGroupDefinition } from '@/object-record/record-group/types/RecordGroupDefinition';
-  RecordGroupDefinition,
-  RecordGroupDefinitionType,
-} from '@/object-record/record-group/types/RecordGroupDefinition';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -38,15 +35,6 @@ export const RecordGroupsVisibilityDropdownSection = ({
     onDragEnd?.(result, provided);
   };
 
-  const noValueRecordGroups =
-    recordGroups.filter(
-      (recordGroup) => recordGroup.type === RecordGroupDefinitionType.NoValue,
-    ) ?? [];
-
-  const recordGroupsWithoutNoValueGroups = recordGroups.filter(
-    (recordGroup) => recordGroup.type !== RecordGroupDefinitionType.NoValue,
-  );
-
   const ref = useRef<HTMLDivElement>(null);
 
   return (
@@ -58,7 +46,7 @@ export const RecordGroupsVisibilityDropdownSection = ({
         {!!recordGroups.length && (
           <>
             {!isDraggable ? (
-              recordGroupsWithoutNoValueGroups.map((recordGroup) => (
+              recordGroups.map((recordGroup) => (
                 <RecordGroupMenuItemDraggable
                   recordGroup={recordGroup}
                   onVisibilityChange={onVisibilityChange}
@@ -71,33 +59,25 @@ export const RecordGroupsVisibilityDropdownSection = ({
                 onDragEnd={handleOnDrag}
                 draggableItems={
                   <>
-                    {recordGroupsWithoutNoValueGroups.map(
+                    {recordGroups.map((recordGroup, index) => (
-                      (recordGroup, index) => (
+                      <DraggableItem
-                        <DraggableItem
+                        key={recordGroup.id}
-                          key={recordGroup.id}
+                        draggableId={recordGroup.id}
-                          draggableId={recordGroup.id}
+                        index={index + 1}
-                          index={index + 1}
+                        itemComponent={
-                          itemComponent={
+                          <RecordGroupMenuItemDraggable
-                            <RecordGroupMenuItemDraggable
+                            recordGroup={recordGroup}
-                              recordGroup={recordGroup}
+                            onVisibilityChange={onVisibilityChange}
-                              onVisibilityChange={onVisibilityChange}
+                            showDragGrip={showDragGrip}
-                              showDragGrip={showDragGrip}
+                            isDraggable={isDraggable}
-                              isDraggable={isDraggable}
+                          />
-                            />
+                        }
-                          }
+                      />
-                        />
+                    ))}
-                      ),
-                    )}
                   </>
                 }
               />
             )}
-            {noValueRecordGroups.map((recordGroup) => (
-              <RecordGroupMenuItemDraggable
-                recordGroup={recordGroup}
-                onVisibilityChange={onVisibilityChange}
-              />
-            ))}
           </>
         )}
       </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupActions.ts

@@ -5,7 +5,6 @@ import { RecordBoardColumnContext } from '@/object-record/record-board/record-bo
 import { useRecordGroups } from '@/object-record/record-group/hooks/useRecordGroups';
 import { useRecordGroupVisibility } from '@/object-record/record-group/hooks/useRecordGroupVisibility';
 import { RecordGroupAction } from '@/object-record/record-group/types/RecordGroupActions';
-import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { ViewType } from '@/views/types/ViewType';
@@ -81,17 +80,15 @@ export const useRecordGroupActions = ({
             navigateToSelectSettings();
           },
         },
-        recordGroupDefinition.type !== RecordGroupDefinitionType.NoValue
+        {
-          ? {
+          id: 'hide',
-              id: 'hide',
+          label: 'Hide',
-              label: 'Hide',
+          icon: IconEyeOff,
-              icon: IconEyeOff,
+          position: 1,
-              position: 1,
+          callback: () => {
-              callback: () => {
+            handleRecordGroupVisibilityChange(recordGroupDefinition);
-                handleRecordGroupVisibilityChange(recordGroupDefinition);
+          },
-              },
+        },
-            }
-          : undefined,
       ].filter(isDefined),
     [
       handleRecordGroupVisibilityChange,

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

@@ -41,7 +41,18 @@ export const mapViewGroupsToRecordGroupDefinitions = ({
         (option) => option.value === viewGroup.fieldValue,
       );
 
-      if (!selectedOption) return null;
+      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 {
         id: viewGroup.id,
@@ -57,23 +68,5 @@ export const mapViewGroupsToRecordGroupDefinitions = ({
     .filter(isDefined)
     .sort((a, b) => a.position - b.position);
 
-  if (selectFieldMetadataItem.isNullable === true) {
-    const noValueColumn = {
-      id: 'no-value',
-      title: 'No Value',
-      type: RecordGroupDefinitionType.NoValue,
-      value: null,
-      position:
-        recordGroupDefinitionsFromViewGroups
-          .map((option) => option.position)
-          .reduce((a, b) => Math.max(a, b), 0) + 1,
-      isVisible: true,
-      fieldMetadataId: selectFieldMetadataItem.id,
-      color: 'transparent',
-    } satisfies RecordGroupDefinition;
-
-    return [...recordGroupDefinitionsFromViewGroups, noValueColumn];
-  }
-
   return recordGroupDefinitionsFromViewGroups;
 };