Add no value column on Kanban

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx

@@ -1,6 +1,6 @@
-import { useContext, useRef } from 'react';
 import styled from '@emotion/styled';
 import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
+import { useContext, useRef } from 'react';
 import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx

@@ -1,10 +1,11 @@
-import React, { useContext, useState } from 'react';
 import styled from '@emotion/styled';
+import { useContext, useState } from 'react';
 import { IconDotsVertical, Tag } from 'twenty-ui';
 
 import { RecordBoardColumnDropdownMenu } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
 import { RecordBoardColumnHotkeyScope } from '@/object-record/record-board/types/BoardColumnHotkeyScope';
+import { RecordBoardColumnDefinitionType } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
@@ -79,14 +80,23 @@ export const RecordBoardColumnHeader = () => {
       >
         <Tag
           onClick={handleBoardColumnMenuOpen}
-          color={columnDefinition.color}
+          variant={
+            columnDefinition.type === RecordBoardColumnDefinitionType.Value
+              ? 'solid'
+              : 'outline'
+          }
+          color={
+            columnDefinition.type === RecordBoardColumnDefinitionType.Value
+              ? columnDefinition.color
+              : 'transparent'
+          }
           text={columnDefinition.title}
         />
         {!!boardColumnTotal && <StyledAmount>${boardColumnTotal}</StyledAmount>}
         {!isHeaderHovered && (
           <StyledNumChildren>{recordCount}</StyledNumChildren>
         )}
-        {isHeaderHovered && (
+        {isHeaderHovered && columnDefinition.actions.length > 0 && (
           <StyledHeaderActions>
             <LightIconButton
               accent="tertiary"
@@ -96,7 +106,7 @@ export const RecordBoardColumnHeader = () => {
           </StyledHeaderActions>
         )}
       </StyledHeader>
-      {isBoardColumnMenuOpen && (
+      {isBoardColumnMenuOpen && columnDefinition.actions.length > 0 && (
         <RecordBoardColumnDropdownMenu
           onClose={handleBoardColumnMenuClose}
           stageId={columnDefinition.id}

packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts

@@ -2,11 +2,30 @@ import { ThemeColor } from 'twenty-ui';
 
 import { RecordBoardColumnAction } from '@/object-record/record-board/types/RecordBoardColumnAction';
 
-export type RecordBoardColumnDefinition = {
+export const enum RecordBoardColumnDefinitionType {
+  Value = 'value',
+  NoValue = 'no-value',
+}
+
+export type RecordBoardColumnDefinitionNoValue = {
+  id: 'no-value';
+  type: RecordBoardColumnDefinitionType.NoValue;
+  title: 'No Value';
+  position: number;
+  value: null;
+  actions: RecordBoardColumnAction[];
+};
+
+export type RecordBoardColumnDefinitionValue = {
   id: string;
+  type: RecordBoardColumnDefinitionType.Value;
   title: string;
   value: string;
-  position: number;
   color: ThemeColor;
+  position: number;
   actions: RecordBoardColumnAction[];
 };
+
+export type RecordBoardColumnDefinition =
+  | RecordBoardColumnDefinitionValue
+  | RecordBoardColumnDefinitionNoValue;

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

@@ -16,7 +16,7 @@ export const RecordIndexBoardColumnLoaderEffect = ({
 }: {
   recordBoardId: string;
   objectNameSingular: string;
-  boardFieldSelectValue: string;
+  boardFieldSelectValue: string | null;
   boardFieldMetadataId: string | null;
   columnId: string;
 }) => {

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

@@ -45,6 +45,13 @@ export const RecordIndexBoardDataLoader = ({
           columnId={columnIds[index]}
         />
       ))}
+      <RecordIndexBoardColumnLoaderEffect
+        objectNameSingular={objectNameSingular}
+        boardFieldMetadataId={recordIndexKanbanFieldMetadataId}
+        boardFieldSelectValue={null}
+        recordBoardId={recordBoardId}
+        columnId={'no-value'}
+      />
     </>
   );
 };

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

@@ -10,12 +10,13 @@ import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hook
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { recordIndexSortsState } from '@/object-record/record-index/states/recordIndexSortsState';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
+import { isDefined } from '~/utils/isDefined';
 
 type UseLoadRecordIndexBoardProps = {
   objectNameSingular: string;
   boardFieldMetadataId: string | null;
   recordBoardId: string;
-  columnFieldSelectValue: string;
+  columnFieldSelectValue: string | null;
   columnId: string;
 };
 
@@ -51,9 +52,11 @@ export const useLoadRecordIndexBoardColumn = ({
 
   const filter = {
     ...requestFilters,
-    [recordIndexKanbanFieldMetadataItem?.name ?? '']: {
-      in: [columnFieldSelectValue],
-    },
+    [recordIndexKanbanFieldMetadataItem?.name ?? '']: isDefined(
+      columnFieldSelectValue,
+    )
+      ? { in: [columnFieldSelectValue] }
+      : { is: 'NULL' },
   };
 
   const {

packages/twenty-front/src/modules/object-record/utils/computeRecordBoardColumnDefinitionsFromObjectMetadata.ts

@@ -1,7 +1,12 @@
 import { IconPencil } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { RecordBoardColumnDefinition } from '@/object-record/record-board/types/RecordBoardColumnDefinition';
+import {
+  RecordBoardColumnDefinition,
+  RecordBoardColumnDefinitionNoValue,
+  RecordBoardColumnDefinitionType,
+  RecordBoardColumnDefinitionValue,
+} from '@/object-record/record-board/types/RecordBoardColumnDefinition';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 export const computeRecordBoardColumnDefinitionsFromObjectMetadata = (
@@ -25,20 +30,38 @@ export const computeRecordBoardColumnDefinitionsFromObjectMetadata = (
     );
   }
 
-  return selectFieldMetadataItem.options.map((selectOption) => ({
-    id: selectOption.id,
-    title: selectOption.label,
-    value: selectOption.value,
-    color: selectOption.color,
-    position: selectOption.position,
-    actions: [
-      {
-        id: 'edit',
-        label: 'Edit from settings',
-        icon: IconPencil,
-        position: 0,
-        callback: navigateToSelectSettings,
-      },
-    ],
-  }));
+  const valueColumns = selectFieldMetadataItem.options.map(
+    (selectOption) =>
+      ({
+        id: selectOption.id,
+        type: RecordBoardColumnDefinitionType.Value,
+        title: selectOption.label,
+        value: selectOption.value,
+        color: selectOption.color,
+        position: selectOption.position,
+        actions: [
+          {
+            id: 'edit',
+            label: 'Edit from settings',
+            icon: IconPencil,
+            position: 0,
+            callback: navigateToSelectSettings,
+          },
+        ],
+      }) satisfies RecordBoardColumnDefinitionValue,
+  );
+
+  const noValueColumn = {
+    id: 'no-value',
+    title: 'No Value',
+    type: RecordBoardColumnDefinitionType.NoValue,
+    value: null,
+    actions: [],
+    position:
+      selectFieldMetadataItem.options
+        .map((option) => option.position)
+        .reduce((a, b) => Math.max(a, b), 0) + 1,
+  } satisfies RecordBoardColumnDefinitionNoValue;
+
+  return [...valueColumns, noValueColumn];
 };

packages/twenty-ui/src/display/tag/components/Tag.tsx

@@ -1,5 +1,5 @@
-import { useContext } from 'react';
 import { styled } from '@linaria/react';
+import { useContext } from 'react';
 
 import { IconComponent, OverflowingTextWithTooltip } from '@ui/display';
 import {