Display a tooltip for actions without short labels (#11243)

- Merge `RecordIndexActionMenuButtons` and `RecordShowActionMenuButtons`
into a single component `PageHeaderActionMenuButtons`
- Display tooltip after 1s for actions without short labels


https://github.com/user-attachments/assets/7649bed8-a1a9-4c1d-8fbe-f1bf3a51db56

packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx

@@ -0,0 +1,64 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import styled from '@emotion/styled';
+import { i18n } from '@lingui/core';
+import {
+  AppTooltip,
+  Button,
+  IconButton,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui';
+
+const StyledWrapper = styled.div`
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
+export const PageHeaderActionMenuButtons = () => {
+  const actionMenuEntries = useRecoilComponentValueV2(
+    actionMenuEntriesComponentSelector,
+  );
+
+  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
+
+  return (
+    <>
+      {pinnedEntries.map((entry) =>
+        entry.shortLabel ? (
+          <Button
+            key={entry.key}
+            Icon={entry.Icon}
+            size="small"
+            variant="secondary"
+            accent="default"
+            title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
+            onClick={() => entry.onClick?.()}
+            ariaLabel={i18n._(entry.label)}
+          />
+        ) : (
+          <div id={`action-menu-entry-${entry.key}`} key={entry.key}>
+            <IconButton
+              Icon={entry.Icon}
+              size="small"
+              variant="secondary"
+              accent="default"
+              onClick={() => entry.onClick?.()}
+              ariaLabel={i18n._(entry.label)}
+            />
+            <StyledWrapper>
+              <AppTooltip
+                // eslint-disable-next-line
+                anchorSelect={`#action-menu-entry-${entry.key}`}
+                content={i18n._(entry.label)}
+                delay={TooltipDelay.longDelay}
+                place={TooltipPosition.Bottom}
+                offset={5}
+                noArrow
+              />
+            </StyledWrapper>
+          </div>
+        ),
+      )}
+    </>
+  );
+};

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx

@@ -3,7 +3,7 @@ import { MultipleRecordsActionKeys } from '@/action-menu/actions/record-actions/
 import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
 import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
-import { RecordIndexActionMenuButtons } from '@/action-menu/components/RecordIndexActionMenuButtons';
+import { PageHeaderActionMenuButtons } from '@/action-menu/components/PageHeaderActionMenuButtons';
 import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIndexActionMenuDropdown';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
@@ -48,7 +48,7 @@ export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => {
             },
           }}
         >
-          {!isMobile && <RecordIndexActionMenuButtons />}
+          {!isMobile && <PageHeaderActionMenuButtons />}
           <RecordIndexActionMenuDropdown />
           <ActionMenuConfirmationModals />
           <RecordActionMenuEntriesSetter />

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuButtons.tsx

@@ -1,29 +0,0 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { i18n } from '@lingui/core';
-import { Button } from 'twenty-ui';
-
-export const RecordIndexActionMenuButtons = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
-
-  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
-
-  return (
-    <>
-      {pinnedEntries.map((entry, index) => (
-        <Button
-          key={index}
-          Icon={entry.Icon}
-          size="small"
-          variant="secondary"
-          accent="default"
-          title={entry.shortLabel ? i18n._(entry.shortLabel) : ''}
-          onClick={entry.onClick}
-          ariaLabel={i18n._(entry.label)}
-        />
-      ))}
-    </>
-  );
-};

packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx

@@ -2,12 +2,13 @@ import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-acti
 import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
 import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
-import { RecordShowActionMenuButtons } from '@/action-menu/components/RecordShowActionMenuButtons';
+import { PageHeaderActionMenuButtons } from '@/action-menu/components/PageHeaderActionMenuButtons';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
 
 export const RecordShowActionMenu = () => {
@@ -27,6 +28,8 @@ export const RecordShowActionMenu = () => {
     FeatureFlagKey.IsWorkflowEnabled,
   );
 
+  const isMobile = useIsMobile();
+
   return (
     <>
       {hasSelectedRecord && contextStoreCurrentObjectMetadataItemId && (
@@ -36,7 +39,7 @@ export const RecordShowActionMenu = () => {
             onActionExecutedCallback: () => {},
           }}
         >
-          <RecordShowActionMenuButtons />
+          {!isMobile && <PageHeaderActionMenuButtons />}
           <ActionMenuConfirmationModals />
           <RecordActionMenuEntriesSetter />
           <RecordAgnosticActionMenuEntriesSetter />

packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuButtons.tsx

@@ -1,46 +0,0 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
-import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { i18n } from '@lingui/core';
-import { Button, IconButton, useIsMobile } from 'twenty-ui';
-
-export const RecordShowActionMenuButtons = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
-
-  const pinnedEntries = actionMenuEntries.filter((entry) => entry.isPinned);
-
-  const isMobile = useIsMobile();
-
-  return (
-    <>
-      {!isMobile &&
-        pinnedEntries.map((entry) =>
-          entry.shortLabel ? (
-            <Button
-              key={entry.key}
-              Icon={entry.Icon}
-              size="small"
-              variant="secondary"
-              accent="default"
-              title={i18n._(entry.shortLabel)}
-              onClick={() => entry.onClick?.()}
-              ariaLabel={i18n._(entry.label)}
-            />
-          ) : (
-            <IconButton
-              key={entry.key}
-              Icon={entry.Icon}
-              size="small"
-              variant="secondary"
-              accent="default"
-              onClick={() => entry.onClick?.()}
-              ariaLabel={i18n._(entry.label)}
-            />
-          ),
-        )}
-      <PageHeaderOpenCommandMenuButton key="more" />
-    </>
-  );
-};

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx

@@ -2,7 +2,7 @@ import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActio
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
-import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
+import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
 import { PageHeader } from '@/ui/layout/page/components/PageHeader';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
@@ -62,7 +62,7 @@ export const RecordIndexPageHeader = () => {
   return (
     <PageHeader title={pageHeaderTitle} Icon={Icon}>
       <RecordIndexActionMenu indexId={recordIndexId} />
-      <PageHeaderOpenCommandMenuButton />
+      <PageHeaderToggleCommandMenuButton />
     </PageHeader>
   );
 };

packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton.tsx

@@ -1,9 +1,17 @@
-import { AnimatedButton, getOsControlSymbol, useIsMobile } from 'twenty-ui';
+import {
+  AnimatedButton,
+  AppTooltip,
+  getOsControlSymbol,
+  TooltipDelay,
+  TooltipPosition,
+  useIsMobile,
+} from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { i18n } from '@lingui/core';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';
@@ -12,6 +20,10 @@ const StyledButtonWrapper = styled.div`
   z-index: 30;
 `;
 
+const StyledTooltipWrapper = styled.div`
+  font-size: ${({ theme }) => theme.font.size.md};
+`;
+
 const xPaths = {
   topLeft: `M12 12 L6 6`,
   topRight: `M12 12 L18 6`,
@@ -98,7 +110,7 @@ const AnimatedIcon = ({
   );
 };
 
-export const PageHeaderOpenCommandMenuButton = () => {
+export const PageHeaderToggleCommandMenuButton = () => {
   const { toggleCommandMenu } = useCommandMenu();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
 
@@ -111,25 +123,41 @@ export const PageHeaderOpenCommandMenuButton = () => {
   const theme = useTheme();
 
   return (
-    <StyledButtonWrapper>
+    <>
-      <AnimatedButton
+      <StyledButtonWrapper>
-        animatedSvg={<AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />}
+        <div id="toggle-command-menu-button">
-        className="page-header-command-menu-button"
+          <AnimatedButton
-        dataTestId="page-header-command-menu-button"
+            animatedSvg={
-        size={isMobile ? 'medium' : 'small'}
+              <AnimatedIcon isCommandMenuOpened={isCommandMenuOpened} />
-        variant="secondary"
+            }
-        accent="default"
+            className="page-header-command-menu-button"
-        hotkeys={[getOsControlSymbol(), 'K']}
+            dataTestId="page-header-command-menu-button"
-        ariaLabel={ariaLabel}
+            size={isMobile ? 'medium' : 'small'}
-        onClick={toggleCommandMenu}
+            variant="secondary"
-        animate={{
+            accent="default"
-          rotate: isCommandMenuOpened ? 90 : 0,
+            hotkeys={[getOsControlSymbol(), 'K']}
-        }}
+            ariaLabel={ariaLabel}
-        transition={{
+            onClick={toggleCommandMenu}
-          duration: theme.animation.duration.normal,
+            animate={{
-          ease: 'easeInOut',
+              rotate: isCommandMenuOpened ? 90 : 0,
-        }}
+            }}
-      />
+            transition={{
-    </StyledButtonWrapper>
+              duration: theme.animation.duration.normal,
+              ease: 'easeInOut',
+            }}
+          />
+        </div>
+      </StyledButtonWrapper>
+      <StyledTooltipWrapper>
+        <AppTooltip
+          anchorSelect="#toggle-command-menu-button"
+          content={i18n._(ariaLabel)}
+          delay={TooltipDelay.longDelay}
+          place={TooltipPosition.Bottom}
+          offset={5}
+          noArrow
+        />
+      </StyledTooltipWrapper>
+    </>
   );
 };

packages/twenty-front/src/pages/object-record/RecordShowPage.tsx

@@ -13,6 +13,7 @@ import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordSh
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
+import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
 import { PageBody } from '@/ui/layout/page/components/PageBody';
 import { PageContainer } from '@/ui/layout/page/components/PageContainer';
 import { RecordShowPageHeader } from '~/pages/object-record/RecordShowPageHeader';
@@ -57,6 +58,7 @@ export const RecordShowPage = () => {
                     objectRecordId={objectRecordId}
                   >
                     <RecordShowActionMenu />
+                    <PageHeaderToggleCommandMenuButton />
                   </RecordShowPageHeader>
                   <PageBody>
                     <TimelineActivityContext.Provider

packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx

@@ -3,7 +3,7 @@ import { PageFavoriteFoldersDropdown } from '@/favorites/components/PageFavorite
 import { FAVORITE_FOLDER_PICKER_DROPDOWN_ID } from '@/favorites/favorite-folder-picker/constants/FavoriteFolderPickerDropdownId';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
+import { PageHeaderToggleCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderToggleCommandMenuButton';
 import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { useIsMobile } from 'twenty-ui';
 
@@ -51,7 +51,7 @@ export const RecordShowPageBaseHeader = ({
           />
         </>
       )}
-      <PageHeaderOpenCommandMenuButton key="more" />
+      <PageHeaderToggleCommandMenuButton key="more" />
     </>
   );
 };

packages/twenty-ui/src/display/tooltip/AppTooltip.tsx

@@ -14,6 +14,7 @@ export enum TooltipDelay {
   noDelay = '0ms',
   shortDelay = '300ms',
   mediumDelay = '500ms',
+  longDelay = '1000ms',
 }
 
 const StyledAppTooltip = styled(Tooltip)<{ width?: string }>`
@@ -73,7 +74,9 @@ export const AppTooltip = ({
       ? 0
       : delay === TooltipDelay.shortDelay
         ? 300
-        : 500;
+        : delay === TooltipDelay.mediumDelay
+          ? 500
+          : 1000;
 
   return (
     <StyledAppTooltip