Add disabled style on non-draggable menu items (#5974)

Closes https://github.com/twentyhq/twenty/issues/5653

<img width="256" alt="Capture d’écran 2024-06-20 à 17 19 44"
src="https://github.com/twentyhq/twenty/assets/22936103/c9d7e58f-818b-44f2-8aa4-4d85c8e1b6be">
<img width="231" alt="Capture d’écran 2024-06-20 à 17 20 03"
src="https://github.com/twentyhq/twenty/assets/22936103/5e981e93-9d59-403a-bb6b-0ff75151ace2">

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

@@ -3,7 +3,10 @@ import { IconComponent } from 'twenty-ui';
 import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
+import {
+  StyledHoverableMenuItemBase,
+  StyledMenuItemBase,
+} from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
 import { MenuItemIconButton } from './MenuItem';
@@ -15,9 +18,11 @@ export type MenuItemDraggableProps = {
   isTooltipOpen?: boolean;
   onClick?: () => void;
   text: string;
-  isDragDisabled?: boolean;
   className?: string;
   isIconDisplayedOnHoverOnly?: boolean;
+  showGrip?: boolean;
+  isDragDisabled?: boolean;
+  isHoverDisabled?: boolean;
 };
 export const MenuItemDraggable = ({
   LeftIcon,
@@ -28,9 +33,24 @@ export const MenuItemDraggable = ({
   isDragDisabled = false,
   className,
   isIconDisplayedOnHoverOnly = true,
+  showGrip = false,
+  isHoverDisabled = false,
 }: MenuItemDraggableProps) => {
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
 
+  if (isHoverDisabled) {
+    return (
+      <StyledMenuItemBase accent={accent} isHoverBackgroundDisabled>
+        <MenuItemLeftContent
+          LeftIcon={LeftIcon}
+          text={text}
+          isDisabled={isDragDisabled}
+          showGrip={showGrip}
+        />
+      </StyledMenuItemBase>
+    );
+  }
+
   return (
     <StyledHoverableMenuItemBase
       onClick={onClick}
@@ -41,7 +61,8 @@ export const MenuItemDraggable = ({
       <MenuItemLeftContent
         LeftIcon={LeftIcon}
         text={text}
-        showGrip={!isDragDisabled}
+        isDisabled={isDragDisabled}
+        showGrip={showGrip}
       />
       {showIconButtons && (
         <LightIconButtonGroup

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

@@ -104,3 +104,11 @@ export const Catalog: Story = {
   },
   decorators: [CatalogDecorator],
 };
+
+export const Grip: Story = {
+  args: { ...Default.args, showGrip: true, isDragDisabled: false },
+};
+
+export const HoverDisabled: Story = {
+  args: { ...Default.args, isHoverDisabled: true },
+};

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

@@ -8,6 +8,7 @@ import {
 } from 'twenty-ui';
 
 import {
+  StyledDraggableItem,
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
 } from './StyledMenuItemBase';
@@ -16,6 +17,7 @@ type MenuItemLeftContentProps = {
   className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
+  isDisabled?: boolean;
   text: ReactNode;
 };
 
@@ -24,18 +26,34 @@ export const MenuItemLeftContent = ({
   LeftIcon,
   text,
   showGrip = false,
+  isDisabled = false,
 }: MenuItemLeftContentProps) => {
   const theme = useTheme();
 
   return (
     <StyledMenuItemLeftContent className={className}>
-      {showGrip && (
+      {showGrip &&
-        <IconGripVertical
+        (isDisabled ? (
-          size={theme.icon.size.md}
+          <IconGripVertical
-          stroke={theme.icon.stroke.sm}
+            size={theme.icon.size.md}
-          color={theme.font.color.extraLight}
+            stroke={theme.icon.stroke.sm}
-        />
+            color={
-      )}
+              isDisabled ? theme.font.color.extraLight : theme.font.color.light
+            }
+          />
+        ) : (
+          <StyledDraggableItem>
+            <IconGripVertical
+              size={theme.icon.size.md}
+              stroke={theme.icon.stroke.sm}
+              color={
+                isDisabled
+                  ? theme.font.color.extraLight
+                  : theme.font.color.light
+              }
+            />
+          </StyledDraggableItem>
+        ))}
       {LeftIcon && (
         <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
       )}

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

@@ -7,6 +7,7 @@ import { MenuItemAccent } from '../../types/MenuItemAccent';
 export type MenuItemBaseProps = {
   accent?: MenuItemAccent;
   isKeySelected?: boolean;
+  isHoverBackgroundDisabled?: boolean;
 };
 
 export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
@@ -31,7 +32,8 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
 
   padding: var(--vertical-padding) var(--horizontal-padding);
 
-  ${HOVER_BACKGROUND};
+  ${({ isHoverBackgroundDisabled }) =>
+    isHoverBackgroundDisabled ?? HOVER_BACKGROUND};
 
   ${({ theme, accent }) => {
     switch (accent) {
@@ -99,6 +101,10 @@ export const StyledMenuItemRightContent = styled.div`
   flex-direction: row;
 `;
 
+export const StyledDraggableItem = styled.div`
+  cursor: grab;
+`;
+
 export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   isIconDisplayedOnHoverOnly?: boolean;
 }>`

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,17 @@ 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'}
+            isHoverDisabled={field.isVisible}
+            showGrip
+            isDragDisabled
           />
         ))}
         {!!draggableItems.length && (
@@ -131,6 +134,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
                           isTooltipOpen={openToolTipIndex === fieldIndex}
                           text={field.label}
                           className={`${title}-draggable-item-tooltip-anchor-${fieldIndex}`}
+                          showGrip
                         />
                       }
                     />

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>