Fix/record group index and seed (#9605)

- [x] [Disable group by on default view Options
menu](https://discord.com/channels/1130383047699738754/1328421803399446568)
- [x] Add default seed for view group

packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx

@@ -30,6 +30,7 @@ export type MenuItemProps = {
   onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
   onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
   testId?: string;
+  disabled?: boolean;
   text: ReactNode;
   contextualText?: ReactNode;
   hasSubMenu?: boolean;
@@ -49,6 +50,7 @@ export const MenuItem = ({
   text,
   contextualText,
   hasSubMenu = false,
+  disabled = false,
 }: MenuItemProps) => {
   const theme = useTheme();
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
@@ -64,7 +66,8 @@ export const MenuItem = ({
   return (
     <StyledHoverableMenuItemBase
       data-testid={testId ?? undefined}
-      onClick={handleMenuItemClick}
+      onClick={disabled ? undefined : handleMenuItemClick}
+      disabled={disabled}
       className={className}
       accent={accent}
       isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx

@@ -100,6 +100,11 @@ export const Catalog: CatalogStory<Story, typeof MenuItem> = {
             }
           },
         },
+        {
+          name: 'disabled',
+          values: [true, false],
+          props: (disabled: boolean) => ({ disabled }),
+        },
       ],
       options: {
         elementContainer: {

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

@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { isUndefined } from '@sniptt/guards';
 import { HOVER_BACKGROUND } from '@ui/theme';
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 
@@ -9,6 +10,7 @@ export type MenuItemBaseProps = {
   isKeySelected?: boolean;
   isHoverBackgroundDisabled?: boolean;
   hovered?: boolean;
+  disabled?: boolean;
 };
 
 export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
@@ -35,10 +37,16 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
   ${({ theme, isKeySelected }) =>
     isKeySelected ? `background: ${theme.background.transparent.light};` : ''}
 
-  ${({ isHoverBackgroundDisabled }) =>
-    isHoverBackgroundDisabled ?? HOVER_BACKGROUND};
+  ${({ isHoverBackgroundDisabled, disabled }) =>
+    (disabled || isHoverBackgroundDisabled) ?? HOVER_BACKGROUND};
+
+  ${({ theme, accent, disabled }) => {
+    if (isUndefined(disabled) && disabled !== false) {
+      return css`
+        opacity: 0.4;
+      `;
+    }
 
-  ${({ theme, accent }) => {
     switch (accent) {
       case 'danger': {
         return css`
@@ -112,6 +120,7 @@ export const StyledDraggableItem = styled.div`
 `;
 
 export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
+  disabled?: boolean;
   isIconDisplayedOnHoverOnly?: boolean;
   cursor?: 'drag' | 'default' | 'not-allowed';
 }>`
@@ -136,7 +145,11 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
     transition: opacity ${({ theme }) => theme.animation.duration.instant}s ease;
   }
 
-  cursor: ${({ cursor }) => {
+  cursor: ${({ cursor, disabled }) => {
+    if (!isUndefined(disabled) && disabled !== false) {
+      return 'not-allowed';
+    }
+
     switch (cursor) {
       case 'drag':
         return 'grab';