Share an email thread to workspace members chip and dropdown (#4199) (#5640)

# Feature: Email thread members visibility For this feature we implemented a chip and a dropdown menu that allows users to check which workspace members can see an email thread, as depicted on issue (#4199). ## Implementations - create a new database table (messageThreadMember) - relations between `messageThreadMembers` and the relevant existing tables (`MessageThread` and `WorkspaceMembers`) - added a new column to the `MessageThread table`: `everyone` - to indicate that all workspace members can see the email thread - create a new repository for the new table, including new queries - edit the queries so that the new fields could be fetched from the frontend - created a component `MultiChip`, that shows a group of user avatars, instead of just one - created a component, `ShareDropdownMenu`, that shows up once the `EmailThreadMembersChip` is clicked. On this menu you can see which workspace members can view the email thread. ## Screenshots Here are some screenshots of the frontend components that were created: Chip with everyone in the workspace being part of the message thread: ![image](https://github.com/twentyhq/twenty/assets/26422084/80d75cdc-656f-490d-9eb1-a07346aad75c) Chip with just one member of the workspace (the owner) being part of the message thread: ![image](https://github.com/twentyhq/twenty/assets/26422084/c26677c6-ab93-4149-8201-b110d7346a28) Chip with some members of the workspace being part of the message thread: ![image](https://github.com/twentyhq/twenty/assets/26422084/9eccf5f8-134c-4c62-9145-5d5aa2346071) How the chip looks in a message thread: ![image](https://github.com/twentyhq/twenty/assets/26422084/a9de981d-7288-4aed-8616-c1cb7de524e2) Dropdown that opens when you click on the chip: ![image](https://github.com/twentyhq/twenty/assets/26422084/a1bb9cd4-01bb-45c5-bf8b-b31c2f3d85e0) ## Testing and Mock data We also added mock data (TypeORM seeds), focusing on adding mock data related to message thread members. ## Conclusion As some of the changes that we needed to do, regarding the change of visibility of the message thread, were not covered by the existing documentation, we were told to open a PR and ask for feedback on this part of the implementation. Right now, our implementation is focused on displaying who is part of an email thread. Feel free to let us know which steps we should follow next :) --------- Co-authored-by: Simão Sanguinho <simao.sanguinho@tecnico.ulisboa.pt> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
2024-07-31 17:50:27 +01:00
parent ae7821ce70
commit c3417ddba1
42 changed files with 929 additions and 104 deletions
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
+import { useCallback } from 'react';
 import { isDefined } from '~/utils/isDefined';

 export const useDropdown = (dropdownId?: string) => {
@ -27,10 +28,10 @@ export const useDropdown = (dropdownId?: string) => {
  const [isDropdownOpen, setIsDropdownOpen] =
    useRecoilState(isDropdownOpenState);

-  const closeDropdown = () => {
+  const closeDropdown = useCallback(() => {
    goBackToPreviousHotkeyScope();
    setIsDropdownOpen(false);
-  };
+  }, [goBackToPreviousHotkeyScope, setIsDropdownOpen]);

  const openDropdown = () => {
    setIsDropdownOpen(true);
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx
@ -25,6 +25,7 @@ import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';

+import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 import { RightDrawerRouter } from './RightDrawerRouter';

 const StyledContainer = styled(motion.div)`
@ -47,6 +48,41 @@ const StyledRightDrawer = styled.div`
 `;

 export const RightDrawer = () => {
+  const theme = useTheme();
+
+  const animationVariants = {
+    fullScreen: {
+      x: '0%',
+      width: '100%',
+      height: '100%',
+      bottom: '0',
+      top: '0',
+    },
+    normal: {
+      x: '0%',
+      width: theme.rightDrawerWidth,
+      height: '100%',
+      bottom: '0',
+      top: '0',
+    },
+    closed: {
+      x: '100%',
+      width: '0',
+      height: '100%',
+      bottom: '0',
+      top: 'auto',
+    },
+    minimized: {
+      x: '0%',
+      width: 220,
+      height: 41,
+      bottom: '0',
+      top: 'auto',
+    },
+  };
+
+  type RightDrawerAnimationVariant = keyof typeof animationVariants;
+
  const [isRightDrawerOpen, setIsRightDrawerOpen] = useRecoilState(
    isRightDrawerOpenState,
  );
@ -82,6 +118,8 @@ export const RightDrawer = () => {
          if (isRightDrawerOpen && !isRightDrawerMinimized) {
            set(rightDrawerCloseEventState, event);
            closeRightDrawer();
+
+            emitRightDrawerCloseEvent();
          }
        },
      [closeRightDrawer],
@ -89,11 +127,8 @@ export const RightDrawer = () => {
    mode: ClickOutsideMode.comparePixels,
  });

-  const theme = useTheme();
-
  useScopedHotkeys(
    [Key.Escape],
-
    () => {
      closeRightDrawer();
    },
@ -103,56 +138,27 @@ export const RightDrawer = () => {

  const isMobile = useIsMobile();

-  const rightDrawerWidth = isRightDrawerOpen
-    ? isMobile
-      ? '100%'
-      : theme.rightDrawerWidth
-    : '0';
+  const targetVariantForAnimation: RightDrawerAnimationVariant =
+    !isRightDrawerOpen
+      ? 'closed'
+      : isRightDrawerMinimized
+        ? 'minimized'
+        : isMobile
+          ? 'fullScreen'
+          : 'normal';
+
+  const handleAnimationComplete = () => {
+    setIsRightDrawerAnimationCompleted(isRightDrawerOpen);
+  };

  if (!isDefined(rightDrawerPage)) {
    return <></>;
  }

-  const variants = {
-    fullScreen: {
-      x: '0%',
-    },
-    normal: {
-      x: '0%',
-      width: rightDrawerWidth,
-    },
-    closed: {
-      x: '100%',
-    },
-    minimized: {
-      x: '0%',
-      width: 'auto',
-      height: 'auto',
-      bottom: '0',
-      top: 'auto',
-    },
-  };
-  const handleAnimationComplete = () => {
-    setIsRightDrawerAnimationCompleted(isRightDrawerOpen);
-  };
-
  return (
    <StyledContainer
-      initial={
-        isRightDrawerOpen
-          ? isRightDrawerMinimized
-            ? 'minimized'
-            : 'normal'
-          : 'closed'
-      }
-      animate={
-        isRightDrawerOpen
-          ? isRightDrawerMinimized
-            ? 'minimized'
-            : 'normal'
-          : 'closed'
-      }
-      variants={variants}
+      animate={targetVariantForAnimation}
+      variants={animationVariants}
      transition={{
        duration: theme.animation.duration.normal,
      }}
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx
@ -5,9 +5,11 @@ import { RightDrawerCalendarEvent } from '@/activities/calendar/right-drawer/com
 import { RightDrawerAIChat } from '@/activities/copilot/right-drawer/components/RightDrawerAIChat';
 import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/components/RightDrawerEmailThread';
 import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
-import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';

+import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
+import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
+import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';

@ -28,39 +30,31 @@ const StyledRightDrawerBody = styled.div`
  position: relative;
 `;

-const RIGHT_DRAWER_PAGES_CONFIG = {
-  [RightDrawerPages.ViewEmailThread]: {
-    page: <RightDrawerEmailThread />,
-    topBar: <RightDrawerTopBar page={RightDrawerPages.ViewEmailThread} />,
-  },
-  [RightDrawerPages.ViewCalendarEvent]: {
-    page: <RightDrawerCalendarEvent />,
-    topBar: <RightDrawerTopBar page={RightDrawerPages.ViewCalendarEvent} />,
-  },
-  [RightDrawerPages.ViewRecord]: {
-    page: <RightDrawerRecord />,
-    topBar: <RightDrawerTopBar page={RightDrawerPages.ViewRecord} />,
-  },
-  [RightDrawerPages.Copilot]: {
-    page: <RightDrawerAIChat />,
-    topBar: <RightDrawerTopBar page={RightDrawerPages.Copilot} />,
-  },
+const RIGHT_DRAWER_PAGES_CONFIG: ComponentByRightDrawerPage = {
+  [RightDrawerPages.ViewEmailThread]: <RightDrawerEmailThread />,
+  [RightDrawerPages.ViewCalendarEvent]: <RightDrawerCalendarEvent />,
+  [RightDrawerPages.ViewRecord]: <RightDrawerRecord />,
+  [RightDrawerPages.Copilot]: <RightDrawerAIChat />,
 };

 export const RightDrawerRouter = () => {
  const [rightDrawerPage] = useRecoilState(rightDrawerPageState);

-  const { topBar = null, page = null } = rightDrawerPage
-    ? RIGHT_DRAWER_PAGES_CONFIG[rightDrawerPage]
-    : {};
+  const rightDrawerPageComponent = isDefined(rightDrawerPage) ? (
+    RIGHT_DRAWER_PAGES_CONFIG[rightDrawerPage]
+  ) : (
+    <></>
+  );

  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);

  return (
    <StyledRightDrawerPage>
-      {topBar}
+      <RightDrawerTopBar />
      {!isRightDrawerMinimized && (
-        <StyledRightDrawerBody>{page}</StyledRightDrawerBody>
+        <StyledRightDrawerBody>
+          {rightDrawerPageComponent}
+        </StyledRightDrawerBody>
      )}
    </StyledRightDrawerPage>
  );
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx
@ -8,16 +8,19 @@ import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShow
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { RightDrawerTopBarCloseButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton';
+import { RightDrawerTopBarDropdownButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarDropdownButton';
 import { RightDrawerTopBarExpandButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton';
 import { RightDrawerTopBarMinimizeButton } from '@/ui/layout/right-drawer/components/RightDrawerTopBarMinimizeButton';
 import { StyledRightDrawerTopBar } from '@/ui/layout/right-drawer/components/StyledRightDrawerTopBar';
 import { RIGHT_DRAWER_PAGE_ICONS } from '@/ui/layout/right-drawer/constants/RightDrawerPageIcons';
 import { RIGHT_DRAWER_PAGE_TITLES } from '@/ui/layout/right-drawer/constants/RightDrawerPageTitles';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { rightDrawerPageState } from '@/ui/layout/right-drawer/states/rightDrawerPageState';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

 const StyledTopBarWrapper = styled.div`
+  align-items: center;
  display: flex;
 `;

@ -40,9 +43,11 @@ const StyledMinimizeTopBarIcon = styled.div`
  display: flex;
 `;

-export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
+export const RightDrawerTopBar = () => {
  const isMobile = useIsMobile();

+  const rightDrawerPage = useRecoilValue(rightDrawerPageState);
+
  const [isRightDrawerMinimized, setIsRightDrawerMinimized] = useRecoilState(
    isRightDrawerMinimizedState,
  );
@ -57,8 +62,6 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {

  const { getIcon } = useIcons();

-  const PageIcon = getIcon(RIGHT_DRAWER_PAGE_ICONS[page]);
-
  const viewableRecordNameSingular = useRecoilValue(
    viewableRecordNameSingularState,
  );
@ -69,14 +72,21 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
    objectNameSingular: viewableRecordNameSingular ?? 'company',
  });

+  if (!rightDrawerPage) {
+    return null;
+  }
+
+  const PageIcon = getIcon(RIGHT_DRAWER_PAGE_ICONS[rightDrawerPage]);
+
  const ObjectIcon = getIcon(objectMetadataItem.icon);

  const label =
-    page === RightDrawerPages.ViewRecord
+    rightDrawerPage === RightDrawerPages.ViewRecord
      ? objectMetadataItem.labelSingular
-      : RIGHT_DRAWER_PAGE_TITLES[page];
+      : RIGHT_DRAWER_PAGE_TITLES[rightDrawerPage];

-  const Icon = page === RightDrawerPages.ViewRecord ? ObjectIcon : PageIcon;
+  const Icon =
+    rightDrawerPage === RightDrawerPages.ViewRecord ? ObjectIcon : PageIcon;

  return (
    <StyledRightDrawerTopBar
@ -101,6 +111,7 @@ export const RightDrawerTopBar = ({ page }: { page: RightDrawerPages }) => {
        </StyledMinimizeTopBarTitleContainer>
      )}
      <StyledTopBarWrapper>
+        <RightDrawerTopBarDropdownButton />
        {!isMobile && !isRightDrawerMinimized && (
          <RightDrawerTopBarMinimizeButton />
        )}
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarDropdownButton.tsx
@ -0,0 +1,27 @@
+import { MessageThreadSubscribersTopBar } from '@/activities/right-drawer/components/MessageThreadSubscribersTopBar';
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { rightDrawerPageState } from '@/ui/layout/right-drawer/states/rightDrawerPageState';
+import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+import { useRecoilState } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+const RIGHT_DRAWER_TOP_BAR_DROPDOWN_BUTTON_CONFIG: ComponentByRightDrawerPage =
+  {
+    [RightDrawerPages.ViewEmailThread]: <MessageThreadSubscribersTopBar />,
+  };
+
+export const RightDrawerTopBarDropdownButton = () => {
+  const [isRightDrawerMinimized] = useRecoilState(isRightDrawerMinimizedState);
+
+  const [rightDrawerPage] = useRecoilState(rightDrawerPageState);
+
+  if (isRightDrawerMinimized || !isDefined(rightDrawerPage)) {
+    return null;
+  }
+
+  const dropdownButtonComponent =
+    RIGHT_DRAWER_TOP_BAR_DROPDOWN_BUTTON_CONFIG[rightDrawerPage];
+
+  return dropdownButtonComponent ?? <></>;
+};
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useListenRightDrawerClose.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useListenRightDrawerClose.ts
@ -0,0 +1,12 @@
+import { RIGHT_DRAWER_CLOSE_EVENT_NAME } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
+import { useEffect } from 'react';
+
+export const useListenRightDrawerClose = (callback: () => void) => {
+  useEffect(() => {
+    window.addEventListener(RIGHT_DRAWER_CLOSE_EVENT_NAME, callback);
+
+    return () => {
+      window.removeEventListener(RIGHT_DRAWER_CLOSE_EVENT_NAME, callback);
+    };
+  }, [callback]);
+};
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
@ -0,0 +1,8 @@
+import { createState } from 'twenty-ui';
+
+import { MessageThread } from '@/activities/emails/types/MessageThread';
+
+export const messageThreadState = createState<MessageThread | null>({
+  key: 'messageThreadState',
+  defaultValue: null,
+});
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
@ -0,0 +1,9 @@
+import { createState } from 'twenty-ui';
+
+import { RightDrawerTopBarDropdownButtons } from '@/ui/layout/right-drawer/types/RightDrawerTopBarDropdownButtons';
+
+export const rightDrawerTopBarDropdownButtonState =
+  createState<RightDrawerTopBarDropdownButtons | null>({
+    key: 'rightDrawerTopBarDropdownButtonState',
+    defaultValue: null,
+  });
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/types/ComponentByRightDrawerPage.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/types/ComponentByRightDrawerPage.ts
@ -0,0 +1,5 @@
+import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
+
+export type ComponentByRightDrawerPage = {
+  [componentName in RightDrawerPages]?: JSX.Element;
+};
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerTopBarDropdownButtons.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerTopBarDropdownButtons.ts
@ -0,0 +1,3 @@
+export enum RightDrawerTopBarDropdownButtons {
+  EmailThreadSubscribers = 'EmailThreadSubscribers',
+}
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent.ts
@ -0,0 +1,5 @@
+export const RIGHT_DRAWER_CLOSE_EVENT_NAME = 'right-drawer-close';
+
+export const emitRightDrawerCloseEvent = () => {
+  window.dispatchEvent(new CustomEvent(RIGHT_DRAWER_CLOSE_EVENT_NAME));
+};
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@ -1,5 +1,5 @@
-import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
+import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
 import { IconChevronRight, IconComponent } from 'twenty-ui';

 import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
@ -76,7 +76,6 @@ export const MenuItem = ({
          <LightIconButtonGroup iconButtons={iconButtons} size="small" />
        )}
      </div>
-
      {hasSubMenu && (
        <IconChevronRight
          size={theme.icon.size.sm}
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemAvatar.tsx
@ -0,0 +1,106 @@
+import { useTheme } from '@emotion/react';
+import { FunctionComponent, MouseEvent, ReactElement } from 'react';
+import {
+  Avatar,
+  AvatarProps,
+  IconChevronRight,
+  IconComponent,
+  isDefined,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui';
+
+import { LightIconButtonProps } from '@/ui/input/button/components/LightIconButton';
+import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
+
+import {
+  StyledHoverableMenuItemBase,
+  StyledMenuItemLeftContent,
+} from '../internals/components/StyledMenuItemBase';
+import { MenuItemAccent } from '../types/MenuItemAccent';
+
+export type MenuItemIconButton = {
+  Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;
+  Icon: IconComponent;
+  accent?: LightIconButtonProps['accent'];
+  onClick?: (event: MouseEvent<any>) => void;
+};
+
+export type MenuItemAvatarProps = {
+  accent?: MenuItemAccent;
+  className?: string;
+  iconButtons?: MenuItemIconButton[];
+  isIconDisplayedOnHoverOnly?: boolean;
+  isTooltipOpen?: boolean;
+  avatar?: Pick<
+    AvatarProps,
+    'avatarUrl' | 'placeholderColorSeed' | 'placeholder' | 'size' | 'type'
+  > | null;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
+  onMouseLeave?: (event: MouseEvent<HTMLDivElement>) => void;
+  testId?: string;
+  text: string;
+  hasSubMenu?: boolean;
+};
+
+// TODO: merge with MenuItem
+export const MenuItemAvatar = ({
+  accent = 'default',
+  className,
+  iconButtons,
+  isIconDisplayedOnHoverOnly = true,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  testId,
+  avatar,
+  hasSubMenu = false,
+  text,
+}: MenuItemAvatarProps) => {
+  const theme = useTheme();
+  const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
+
+  const handleMenuItemClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (!onClick) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    onClick?.(event);
+  };
+
+  return (
+    <StyledHoverableMenuItemBase
+      data-testid={testId ?? undefined}
+      onClick={handleMenuItemClick}
+      className={className}
+      accent={accent}
+      isIconDisplayedOnHoverOnly={isIconDisplayedOnHoverOnly}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <StyledMenuItemLeftContent>
+        {isDefined(avatar) && (
+          <Avatar
+            placeholder={avatar.placeholder}
+            avatarUrl={avatar.avatarUrl}
+            placeholderColorSeed={avatar.placeholderColorSeed}
+            size={avatar.size}
+            type={avatar.type}
+          />
+        )}
+        <OverflowingTextWithTooltip text={text ?? ''} />
+      </StyledMenuItemLeftContent>
+      <div className="hoverable-buttons">
+        {showIconButtons && (
+          <LightIconButtonGroup iconButtons={iconButtons} size="small" />
+        )}
+      </div>
+      {hasSubMenu && (
+        <IconChevronRight
+          size={theme.icon.size.sm}
+          color={theme.font.color.tertiary}
+        />
+      )}
+    </StyledHoverableMenuItemBase>
+  );
+};