From 62fb20786faee5e1c2f9cfa79e3bc87897a2515e Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Thu, 20 Jun 2024 17:16:44 +0200
Subject: [PATCH] Add disabled style on non-draggable menu items

---
 .../navigation/menu-item/components/MenuItemDraggable.tsx  | 5 ++++-
 .../menu-item/internals/components/MenuItemLeftContent.tsx | 6 +++++-
 .../components/ViewFieldsVisibilityDropdownSection.tsx     | 7 +++++--
 .../views/view-picker/components/ViewPickerListContent.tsx | 4 +++-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
index 9643b8665948..6db4ddc59a32 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
@@ -18,6 +18,7 @@ export type MenuItemDraggableProps = {
   isDragDisabled?: boolean;
   className?: string;
   isIconDisplayedOnHoverOnly?: boolean;
+  showGrip?: boolean;
 };
 export const MenuItemDraggable = ({
   LeftIcon,
@@ -28,6 +29,7 @@ export const MenuItemDraggable = ({
   isDragDisabled = false,
   className,
   isIconDisplayedOnHoverOnly = true,
+  showGrip = false,
 }: MenuItemDraggableProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
@@ -41,7 +43,8 @@ export const MenuItemDraggable = ({
       <MenuItemLeftContent
         LeftIcon={LeftIcon}
         text={text}
-        showGrip={!isDragDisabled}
+        isDisabled={isDragDisabled}
+        showGrip={showGrip}
       />
       {showIconButtons && (
         <LightIconButtonGroup
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
index ce6b2a188f4a..f2de9c8c3584 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -16,6 +16,7 @@ type MenuItemLeftContentProps = {
   className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
+  isDisabled?: boolean;
   text: ReactNode;
 };
 
@@ -24,6 +25,7 @@ export const MenuItemLeftContent = ({
   LeftIcon,
   text,
   showGrip = false,
+  isDisabled = false,
 }: MenuItemLeftContentProps) => {
   const theme = useTheme();
 
@@ -33,7 +35,9 @@ export const MenuItemLeftContent = ({
         <IconGripVertical
           size={theme.icon.size.md}
           stroke={theme.icon.stroke.sm}
-          color={theme.font.color.extraLight}
+          color={
+            isDisabled ? theme.font.color.extraLight : theme.font.color.light
+          }
         />
       )}
       {LeftIcon && (
diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
index 9bc30f5a2359..b667efd3a606 100644
--- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -19,7 +19,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
@@ -101,13 +100,16 @@ export const ViewFieldsVisibilityDropdownSection = ({
       )}
       <DropdownMenuItemsContainer>
         {nonDraggableItems.map((field, fieldIndex) => (
-          <MenuItem
+          <MenuItemDraggable
             key={field.fieldMetadataId}
             LeftIcon={getIcon(field.iconName)}
             iconButtons={getIconButtons(fieldIndex, field)}
             isTooltipOpen={openToolTipIndex === fieldIndex}
             text={field.label}
             className={`${title}-fixed-item-tooltip-anchor-${fieldIndex}`}
+            accent="placeholder"
+            isDragDisabled
+            showGrip
           />
         ))}
         {!!draggableItems.length && (
@@ -131,6 +133,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
                           isTooltipOpen={openToolTipIndex === fieldIndex}
                           text={field.label}
                           className={`${title}-draggable-item-tooltip-anchor-${fieldIndex}`}
+                          showGrip
                         />
                       }
                     />
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
index ef0a258b0dfd..91b18694dd2c 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@@ -117,7 +117,7 @@ export const ViewPickerListContent = () => {
           )}
         />
         {indexView && (
-          <MenuItem
+          <MenuItemDraggable
             key={indexView.id}
             iconButtons={[
               {
@@ -128,6 +128,8 @@ export const ViewPickerListContent = () => {
             onClick={() => handleViewSelect(indexView.id)}
             LeftIcon={getIcon(indexView.icon)}
             text={indexView.name}
+            accent="placeholder"
+            isDragDisabled
           />
         )}
       </DropdownMenuItemsContainer>