Add no value column on Kanban (#6252)

<img width="1512" alt="image" src="https://github.com/user-attachments/assets/9fcdd5ca-4329-467c-ada8-4dd5d45be259"> Open questions: - the Tag component does not match Figma in term of style and API for "transparent" | "outline". We need to discuss with @Bonapara what is the desired behavior here - right now opportunity.stage is not nullable. We need to discuss with @FelixMalfait and @Bonapara what we want here. I would advocate to make a it nullable for now until we introduce settings on select fields. custom select are nullable and it could be confusing for the user Follow up: - enhance tests on Tags - add story to cover the No Value column on record board
twentyhq · Jul 15, 2024 · 2cd624a · 2cd624a
1 parent aed0bf4
commit 2cd624a
Show file tree

Hide file tree

Showing 18 changed files with 269 additions and 48 deletions.
diff --git a/...wenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts b/...wenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts
@@ -40,6 +40,7 @@ export const formatFieldMetadataItemAsFieldDefinition = ({
     targetFieldMetadataName:
       field.relationDefinition?.targetFieldMetadata?.name ?? '',
     options: field.options,
+    isNullable: field.isNullable,
   };
 
   return {

diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/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';
 

diff --git a/...les/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx b/...les/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}

diff --git a/.../twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnDefinition.ts b/.../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;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/__mocks__/fieldDefinitions.ts b/packages/twenty-front/src/modules/object-record/record-field/__mocks__/fieldDefinitions.ts
@@ -7,7 +7,6 @@ import {
   FieldSelectMetadata,
   FieldTextMetadata,
 } from '@/object-record/record-field/types/FieldMetadata';
-import { type } from 'os';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import {
   mockedCompanyObjectMetadataItem,
@@ -44,6 +43,7 @@ export const selectFieldDefinition: FieldDefinition<FieldSelectMetadata> = {
   metadata: {
     fieldName: 'accountOwner',
     options: [{ label: 'Elon Musk', color: 'blue', value: 'userId' }],
+    isNullable: true,
   },
 };
 

diff --git a/...t/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/...t/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
@@ -1,5 +1,5 @@
-import React, { useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 
 import { useClearField } from '@/object-record/record-field/hooks/useClearField';
@@ -98,14 +98,16 @@ export const SelectFieldInput = ({
         <DropdownMenuSeparator />
 
         <DropdownMenuItemsContainer hasMaxHeight>
-          <MenuItemSelectTag
-            key={`No ${fieldDefinition.label}`}
-            selected={false}
-            text={`No ${fieldDefinition.label}`}
-            color="transparent"
-            variant="outline"
-            onClick={handleClearField}
-          />
+          {fieldDefinition.metadata.isNullable && (
+            <MenuItemSelectTag
+              key={`No ${fieldDefinition.label}`}
+              selected={false}
+              text={`No ${fieldDefinition.label}`}
+              color="transparent"
+              variant="outline"
+              onClick={handleClearField}
+            />
+          )}
 
           {optionsInDropDown.map((option) => {
             return (

diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
@@ -128,6 +128,7 @@ export type FieldSelectMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   options: { label: string; color: ThemeColor; value: string }[];
+  isNullable: boolean;
 };
 
 export type FieldMultiSelectMetadata = {

diff --git a/.../src/modules/object-record/record-index/components/RecordIndexBoardColumnLoaderEffect.tsx b/.../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;
 }) => {

diff --git a/...ty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx b/...ty-front/src/modules/object-record/record-index/components/RecordIndexBoardDataLoader.tsx
@@ -45,6 +45,15 @@ export const RecordIndexBoardDataLoader = ({
           columnId={columnIds[index]}
         />
       ))}
+      {recordIndexKanbanFieldMetadataItem?.isNullable && (
+        <RecordIndexBoardColumnLoaderEffect
+          objectNameSingular={objectNameSingular}
+          boardFieldMetadataId={recordIndexKanbanFieldMetadataId}
+          boardFieldSelectValue={null}
+          recordBoardId={recordBoardId}
+          columnId={'no-value'}
+        />
+      )}
     </>
   );
 };
diff --git a/...wenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts b/...wenty-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 {

diff --git a/.../src/modules/object-record/utils/computeRecordBoardColumnDefinitionsFromObjectMetadata.ts b/.../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,42 @@ 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;
+
+  if (selectFieldMetadataItem.isNullable === true) {
+    return [...valueColumns, noValueColumn];
+  }
+
+  return valueColumns;
 };
diff --git a/packages/twenty-front/src/modules/views/components/ViewBar.tsx b/packages/twenty-front/src/modules/views/components/ViewBar.tsx
@@ -41,7 +41,6 @@ export const ViewBar = ({
   const sortDropdownId = 'view-sort';
 
   const loading = useIsPrefetchLoading();
-
   if (!objectNamePlural) {
     return;
   }

diff --git a/packages/twenty-front/src/modules/views/components/ViewBarEffect.tsx b/packages/twenty-front/src/modules/views/components/ViewBarEffect.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
 import { isUndefined } from '@sniptt/guards';
+import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { useViewStates } from '@/views/hooks/internal/useViewStates';

diff --git a/packages/twenty-front/src/testing/decorators/PageDecorator.tsx b/packages/twenty-front/src/testing/decorators/PageDecorator.tsx
@@ -1,3 +1,6 @@
+import { ApolloProvider } from '@apollo/client';
+import { loadDevMessages } from '@apollo/client/dev';
+import { Decorator } from '@storybook/react';
 import { HelmetProvider } from 'react-helmet-async';
 import {
   createMemoryRouter,
@@ -6,9 +9,6 @@ import {
   Route,
   RouterProvider,
 } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
-import { loadDevMessages } from '@apollo/client/dev';
-import { Decorator } from '@storybook/react';
 import { RecoilRoot } from 'recoil';
 
 import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
@@ -21,6 +21,7 @@ import { DefaultLayout } from '~/modules/ui/layout/page/DefaultLayout';
 import { UserProvider } from '~/modules/users/components/UserProvider';
 import { mockedApolloClient } from '~/testing/mockedApolloClient';
 
+import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
 import { FullHeightStorybookLayout } from '../FullHeightStorybookLayout';
 
 export type PageDecoratorArgs = {
@@ -73,7 +74,9 @@ const Providers = () => {
                 <HelmetProvider>
                   <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
                     <ObjectMetadataItemsProvider>
-                      <Outlet />
+                      <PrefetchDataProvider>
+                        <Outlet />
+                      </PrefetchDataProvider>
                     </ObjectMetadataItemsProvider>
                   </SnackBarProviderScope>
                 </HelmetProvider>

diff --git a/packages/twenty-front/src/testing/graphqlMocks.ts b/packages/twenty-front/src/testing/graphqlMocks.ts
@@ -110,6 +110,57 @@ export const graphqlMocks = {
         },
       });
     }),
+    graphql.query('CombinedFindManyRecords', () => {
+      return HttpResponse.json({
+        data: {
+          views: {
+            edges: mockedViewsData.map((view) => ({
+              node: {
+                ...view,
+                viewFilters: {
+                  edges: [],
+                  totalCount: 0,
+                },
+                viewSorts: {
+                  edges: [],
+                  totalCount: 0,
+                },
+                viewFields: {
+                  edges: mockedViewFieldsData
+                    .filter((viewField) => viewField.viewId === view.id)
+                    .map((viewField) => ({
+                      node: viewField,
+                      cursor: null,
+                    })),
+                  totalCount: mockedViewFieldsData.filter(
+                    (viewField) => viewField.viewId === view.id,
+                  ).length,
+                },
+              },
+              cursor: null,
+            })),
+            pageInfo: {
+              hasNextPage: false,
+              hasPreviousPage: false,
+              startCursor: null,
+              endCursor: null,
+              totalCount: mockedViewsData.length,
+            },
+            totalCount: mockedViewsData.length,
+          },
+        },
+        favorites: {
+          edges: [],
+          totalCount: 0,
+          pageInfo: {
+            hasNextPage: false,
+            hasPreviousPage: false,
+            startCursor: null,
+            endCursor: null,
+          },
+        },
+      });
+    }),
     graphql.query('FindManyCompanies', ({ variables }) => {
       const mockedData = variables.limit
         ? companiesMock.slice(0, variables.limit)
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,6 @@ export const ViewBar = ({ @@
       const sortDropdownId = 'view-sort';
       const loading = useIsPrefetchLoading();
       if (!objectNamePlural) {
         return;
       }
@@ Expand Down @@