Removed drag grip and accent is now tertiary in hidden fields (#6650)

Closes #6115

This change successfully addresses the issue as described. However, it
also causes the primary non-draggable field, `Name`, to render without a
draggable handle and with a secondary accent. Is this an acceptable
outcome?



https://github.com/user-attachments/assets/4bc15e00-6c73-41d4-8342-4e36487d0981

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

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

@@ -182,6 +182,7 @@ export const RecordIndexOptionsDropdownContent = ({
             onDragEnd={handleReorderFields}
             onVisibilityChange={handleChangeFieldVisibility}
             showSubheader={false}
+            showDragGrip={true}
           />
           <DropdownMenuSeparator />
           <DropdownMenuItemsContainer>
@@ -209,6 +210,7 @@ export const RecordIndexOptionsDropdownContent = ({
                 isDraggable={false}
                 onVisibilityChange={handleChangeFieldVisibility}
                 showSubheader={false}
+                showDragGrip={false}
               />
             </>
           )}

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx

@@ -3,10 +3,7 @@ import { IconComponent } from 'twenty-ui';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import {
+import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
-  StyledHoverableMenuItemBase,
-  StyledMenuItemBase,
-} from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
 import { MenuItemIconButton } from './MenuItem';
@@ -24,6 +21,7 @@ export type MenuItemDraggableProps = {
   isDragDisabled?: boolean;
   isHoverDisabled?: boolean;
 };
+
 export const MenuItemDraggable = ({
   LeftIcon,
   accent = 'default',
@@ -34,22 +32,14 @@ export const MenuItemDraggable = ({
   className,
   isIconDisplayedOnHoverOnly = true,
   showGrip = false,
-  isHoverDisabled = false,
 }: MenuItemDraggableProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
-  if (isHoverDisabled) {
+  const cursorType = showGrip
-    return (
+    ? isDragDisabled
-      <StyledMenuItemBase accent={accent} isHoverBackgroundDisabled>
+      ? 'not-allowed'
-        <MenuItemLeftContent
+      : 'drag'
-          LeftIcon={LeftIcon}
+    : 'default';
-          text={text}
-          isDisabled={isDragDisabled}
-          showGrip={showGrip}
-        />
-      </StyledMenuItemBase>
-    );
-  }
 
   return (
     <StyledHoverableMenuItemBase
@@ -57,6 +47,7 @@ export const MenuItemDraggable = ({
       accent={accent}
       className={className}
       isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
+      cursor={cursorType}
     >
       <MenuItemLeftContent
         LeftIcon={LeftIcon}

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import { isString } from '@sniptt/guards';
+import { ReactNode } from 'react';
 import {
   IconComponent,
   IconGripVertical,
@@ -34,13 +34,17 @@ export const MenuItemLeftContent = ({
     <StyledMenuItemLeftContent className={className}>
       {showGrip &&
         (isDisabled ? (
-          <IconGripVertical
+          <StyledDraggableItem>
-            size={theme.icon.size.md}
+            <IconGripVertical
-            stroke={theme.icon.stroke.sm}
+              size={theme.icon.size.md}
-            color={
+              stroke={theme.icon.stroke.sm}
-              isDisabled ? theme.font.color.extraLight : theme.font.color.light
+              color={
-            }
+                isDisabled
-          />
+                  ? theme.font.color.extraLight
+                  : theme.font.color.light
+              }
+            />
+          </StyledDraggableItem>
         ) : (
           <StyledDraggableItem>
             <IconGripVertical

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -106,10 +106,14 @@ export const StyledMenuItemRightContent = styled.div`
 
 export const StyledDraggableItem = styled.div`
   cursor: grab;
+
+  align-items: center;
+  display: flex;
 `;
 
 export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   isIconDisplayedOnHoverOnly?: boolean;
+  cursor?: 'drag' | 'default' | 'not-allowed';
 }>`
   ${({ isIconDisplayedOnHoverOnly, theme }) =>
     isIconDisplayedOnHoverOnly &&
@@ -131,4 +135,15 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   & .hoverable-buttons {
     transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
+
+  cursor: ${({ cursor }) => {
+    switch (cursor) {
+      case 'drag':
+        return 'grab';
+      case 'not-allowed':
+        return 'not-allowed';
+      default:
+        return 'default';
+    }
+  }};
 `;

packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -1,10 +1,10 @@
-import { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import {
   DropResult,
   OnDragEndResponder,
   ResponderProvided,
 } from '@hello-pangea/dnd';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   AppTooltip,
   IconEye,
@@ -33,6 +33,7 @@ type ViewFieldsVisibilityDropdownSectionProps = {
   ) => void;
   title: string;
   showSubheader: boolean;
+  showDragGrip: boolean;
 };
 
 export const ViewFieldsVisibilityDropdownSection = ({
@@ -42,6 +43,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
   onVisibilityChange,
   title,
   showSubheader = true,
+  showDragGrip,
 }: ViewFieldsVisibilityDropdownSectionProps) => {
   const handleOnDrag = (result: DropResult, provided: ResponderProvided) => {
     onDragEnd?.(result, provided);
@@ -107,9 +109,8 @@ export const ViewFieldsVisibilityDropdownSection = ({
             isTooltipOpen={openToolTipIndex === fieldIndex}
             text={field.label}
             className={`${title}-fixed-item-tooltip-anchor-${fieldIndex}`}
-            accent={'placeholder'}
+            accent={showDragGrip ? 'placeholder' : 'default'}
-            isHoverDisabled={field.isVisible}
+            showGrip={showDragGrip}
-            showGrip
             isDragDisabled
           />
         ))}