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/display/tooltip/AppTooltip.tsx

@@ -16,7 +16,7 @@ export enum TooltipDelay {
   mediumDelay = '500ms',
 }
 
-const StyledAppTooltip = styled(Tooltip)`
+const StyledAppTooltip = styled(Tooltip)<{ width?: string }>`
   backdrop-filter: ${({ theme }) => theme.blur.strong};
   background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -27,7 +27,7 @@ const StyledAppTooltip = styled(Tooltip)`
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
 
-  max-width: 40%;
+  max-width: ${({ width }) => width || '40%'};
   overflow: visible;
 
   padding: ${({ theme }) => theme.spacing(2)};
@@ -49,6 +49,7 @@ export type AppTooltipProps = {
   delay?: TooltipDelay;
   positionStrategy?: PositionStrategy;
   clickable?: boolean;
+  width?: string;
 };
 
 export const AppTooltip = ({
@@ -63,6 +64,7 @@ export const AppTooltip = ({
   positionStrategy,
   children,
   clickable,
+  width,
 }: AppTooltipProps) => {
   const delayInMs =
     delay === TooltipDelay.noDelay
@@ -86,6 +88,7 @@ export const AppTooltip = ({
         positionStrategy,
         children,
         clickable,
+        width,
       }}
     />
   );

packages/twenty-ui/src/display/tooltip/__stories__/Tooltip.stories.tsx

@@ -102,6 +102,48 @@ export const Hoverable: Story = {
   ),
 };
 
+export const WithWidth: Story = {
+  args: {
+    place: TooltipPosition.Top,
+    delay: TooltipDelay.mediumDelay,
+    content: 'Tooltip with custom width',
+    hidden: false,
+    anchorSelect: '#width-text',
+    width: '200px',
+  },
+  decorators: [ComponentDecorator],
+  render: ({
+    anchorSelect,
+    className,
+    content,
+    delay,
+    noArrow,
+    offset,
+    place,
+    positionStrategy,
+    width,
+  }) => (
+    <>
+      <p id="width-text" data-testid="tooltip">
+        Hover me to see custom width!
+      </p>
+      <Tooltip
+        {...{
+          anchorSelect,
+          className,
+          content,
+          delay,
+          noArrow,
+          offset,
+          place,
+          positionStrategy,
+          width,
+        }}
+      />
+    </>
+  ),
+};
+
 export const Catalog: CatalogStory<Story, typeof Tooltip> = {
   args: { hidden: false, content: 'Tooltip Test' },
   play: async ({ canvasElement }) => {

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';