From f3e667a651563d2f779b25456cbb1318aa6982c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 5 Mar 2025 12:02:31 +0100
Subject: [PATCH] 496 add open in full page button on command menu record page
 (#10659)

Closes https://github.com/twentyhq/core-team-issues/issues/496

I upgraded react tabler icons to the latest version to be able to use
the newest icons.

The option menu was no longer accessible on right drawer record pages,
this pr fixes this and creates a new button which opens the record show
page.
This button is accessible via the shortcut `Command` + `Enter`


https://github.com/user-attachments/assets/570071b2-4406-40bd-be48-a0e5e430ed70
---
 .nvmrc                                        |  1 -
 package.json                                  |  2 +-
 .../RecordShowRightDrawerOpenRecordButton.tsx | 66 +++++++++++++++++++
 .../RightDrawerActionMenuDropdown.tsx         |  2 +-
 .../RightDrawerActionMenuDropdown.stories.tsx |  8 +--
 .../command-menu/hooks/useCommandMenu.ts      | 53 +++++++++++++++
 .../components/RightDrawerRecord.tsx          |  5 +-
 .../constants/RightDrawerRecordInstanceId.ts  |  1 +
 .../components/ShowPageSubContainer.tsx       | 13 +++-
 .../display/icon/components/IconMicrosoft.tsx |  2 +-
 .../icon/components/IconMicrosoftCalendar.tsx |  2 +-
 .../icon/components/IconMicrosoftOutlook.tsx  |  2 +-
 .../display/icon/components/TablerIcons.ts    | 18 ++---
 .../icon/providers/internal/AllIcons.ts       |  2 +
 .../src/display/icon/types/IconComponent.ts   |  5 +-
 .../components/CircularProgressBar.tsx        |  2 +-
 .../input/button/components/MainButton.tsx    |  4 +-
 .../src/app/_components/ui/icons/index.ts     |  2 +-
 yarn.lock                                     | 23 ++++---
 19 files changed, 173 insertions(+), 40 deletions(-)
 delete mode 100644 .nvmrc
 create mode 100644 packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
 create mode 100644 packages/twenty-front/src/modules/object-record/record-right-drawer/constants/RightDrawerRecordInstanceId.ts

diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 7ec56198d..000000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-18.17.1
\ No newline at end of file
diff --git a/package.json b/package.json
index 3dfd1adc8..b8d411fac 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@sniptt/guards": "^0.2.0",
     "@stoplight/elements": "^8.0.5",
     "@swc/jest": "^0.2.29",
-    "@tabler/icons-react": "^2.44.0",
+    "@tabler/icons-react": "^3.31.0",
     "@types/dompurify": "^3.0.5",
     "@types/facepaint": "^1.2.5",
     "@types/lodash.camelcase": "^4.3.7",
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
new file mode 100644
index 000000000..5bb515f07
--- /dev/null
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx
@@ -0,0 +1,66 @@
+import { RightDrawerActionMenuDropdownHotkeyScope } from '@/action-menu/types/RightDrawerActionMenuDropdownHotkeyScope';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { AppPath } from '@/types/AppPath';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import { Button, IconBrowserMaximize, getOsControlSymbol } from 'twenty-ui';
+import { useNavigateApp } from '~/hooks/useNavigateApp';
+
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`;
+
+type RecordShowRightDrawerOpenRecordButtonProps = {
+  objectNameSingular: string;
+  record: ObjectRecord;
+};
+
+export const RecordShowRightDrawerOpenRecordButton = ({
+  objectNameSingular,
+  record,
+}: RecordShowRightDrawerOpenRecordButtonProps) => {
+  const { closeCommandMenu } = useCommandMenu();
+
+  const to = getLinkToShowPage(objectNameSingular, record);
+
+  const navigate = useNavigateApp();
+
+  const handleOpenRecord = () => {
+    navigate(AppPath.RecordShowPage, {
+      objectNameSingular,
+      objectRecordId: record.id,
+    });
+    closeCommandMenu();
+  };
+
+  useScopedHotkeys(
+    ['ctrl+Enter,meta+Enter'],
+    handleOpenRecord,
+    AppHotkeyScope.CommandMenuOpen,
+    [closeCommandMenu, navigate, objectNameSingular, record.id],
+  );
+
+  useScopedHotkeys(
+    ['ctrl+Enter,meta+Enter'],
+    handleOpenRecord,
+    RightDrawerActionMenuDropdownHotkeyScope.RightDrawerActionMenuDropdown,
+    [closeCommandMenu, navigate, objectNameSingular, record.id],
+  );
+
+  return (
+    <StyledLink to={to} onClick={closeCommandMenu}>
+      <Button
+        title="Open"
+        variant="primary"
+        accent="blue"
+        size="medium"
+        Icon={IconBrowserMaximize}
+        hotkeys={[getOsControlSymbol(), '⏎']}
+      />
+    </StyledLink>
+  );
+};
diff --git a/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx
index d59497111..b7e7f219e 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RightDrawerActionMenuDropdown.tsx
@@ -70,7 +70,7 @@ export const RightDrawerActionMenuDropdown = () => {
       }}
       data-select-disable
       clickableComponent={
-        <Button title="Actions" hotkeys={[getOsControlSymbol(), 'O']} />
+        <Button title="Options" hotkeys={[getOsControlSymbol(), 'O']} />
       }
       dropdownPlacement="top-end"
       dropdownOffset={{ y: parseInt(theme.spacing(2), 10) }}
diff --git a/packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx b/packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx
index 546b14045..69539ae3d 100644
--- a/packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx
@@ -16,11 +16,11 @@ import { msg } from '@lingui/core/macro';
 import { userEvent, waitFor, within } from '@storybook/test';
 import {
   ComponentDecorator,
-  getCanvasElementForDropdownTesting,
   IconFileExport,
   IconHeart,
   IconTrash,
   MenuItemAccent,
+  getCanvasElementForDropdownTesting,
 } from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 
@@ -124,19 +124,19 @@ export const WithButtonClicks: Story = {
   play: async () => {
     const canvas = within(getCanvasElementForDropdownTesting());
 
-    let actionButton = await canvas.findByText('Actions');
+    let actionButton = await canvas.findByText('Options');
     await userEvent.click(actionButton);
 
     const deleteButton = await canvas.findByText('Delete');
     await userEvent.click(deleteButton);
 
-    actionButton = await canvas.findByText('Actions');
+    actionButton = await canvas.findByText('Options');
     await userEvent.click(actionButton);
 
     const addToFavoritesButton = await canvas.findByText('Add to favorites');
     await userEvent.click(addToFavoritesButton);
 
-    actionButton = await canvas.findByText('Actions');
+    actionButton = await canvas.findByText('Options');
     await userEvent.click(actionButton);
 
     const exportButton = await canvas.findByText('Export');
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
index 6c7e568ba..85fc80c2d 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -22,11 +22,14 @@ import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelect
 import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
 import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
+import { RIGHT_DRAWER_RECORD_INSTANCE_ID } from '@/object-record/record-right-drawer/constants/RightDrawerRecordInstanceId';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
@@ -278,6 +281,56 @@ export const useCommandMenu = () => {
           )
           .getValue();
 
+        if (!objectMetadataItem) {
+          throw new Error(
+            `No object metadata item found for object name ${objectNameSingular}`,
+          );
+        }
+
+        set(
+          contextStoreCurrentObjectMetadataItemComponentState.atomFamily({
+            instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID,
+          }),
+          objectMetadataItem,
+        );
+
+        set(
+          contextStoreTargetedRecordsRuleComponentState.atomFamily({
+            instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID,
+          }),
+          {
+            mode: 'selection',
+            selectedRecordIds: [recordId],
+          },
+        );
+
+        set(
+          contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+            instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID,
+          }),
+          1,
+        );
+
+        set(
+          contextStoreCurrentViewTypeComponentState.atomFamily({
+            instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID,
+          }),
+          ContextStoreViewType.ShowPage,
+        );
+
+        set(
+          contextStoreCurrentViewIdComponentState.atomFamily({
+            instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID,
+          }),
+          snapshot
+            .getLoadable(
+              contextStoreCurrentViewIdComponentState.atomFamily({
+                instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
+              }),
+            )
+            .getValue(),
+        );
+
         const Icon = objectMetadataItem?.icon
           ? getIcon(objectMetadataItem.icon)
           : getIcon('IconList');
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
index a46639918..3a0c79f60 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
@@ -4,6 +4,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/record-filter-group/states/context/RecordFilterGroupsComponentInstanceContext';
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
+import { RIGHT_DRAWER_RECORD_INSTANCE_ID } from '@/object-record/record-right-drawer/constants/RightDrawerRecordInstanceId';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
@@ -52,11 +53,11 @@ export const RightDrawerRecord = () => {
         >
           <ContextStoreComponentInstanceContext.Provider
             value={{
-              instanceId: `record-show-${objectRecordId}`,
+              instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID,
             }}
           >
             <ActionMenuComponentInstanceContext.Provider
-              value={{ instanceId: `record-show-${objectRecordId}` }}
+              value={{ instanceId: RIGHT_DRAWER_RECORD_INSTANCE_ID }}
             >
               <StyledRightDrawerRecord isMobile={isMobile}>
                 <RecordFieldValueSelectorContextProvider>
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/constants/RightDrawerRecordInstanceId.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/constants/RightDrawerRecordInstanceId.ts
new file mode 100644
index 000000000..c01b319ee
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/constants/RightDrawerRecordInstanceId.ts
@@ -0,0 +1 @@
+export const RIGHT_DRAWER_RECORD_INSTANCE_ID = 'right-drawer-record';
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
index 6efae7665..f76305967 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSubContainer.tsx
@@ -1,4 +1,5 @@
 import { RecordShowRightDrawerActionMenu } from '@/action-menu/components/RecordShowRightDrawerActionMenu';
+import { RecordShowRightDrawerOpenRecordButton } from '@/action-menu/components/RecordShowRightDrawerOpenRecordButton';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { CardComponents } from '@/object-record/record-show/components/CardComponents';
@@ -133,8 +134,16 @@ export const ShowPageSubContainer = ({
         <StyledContentContainer isInRightDrawer={isInRightDrawer}>
           {renderActiveTabContent()}
         </StyledContentContainer>
-        {isInRightDrawer && recordFromStore && !recordFromStore.deletedAt && (
-          <RightDrawerFooter actions={[<RecordShowRightDrawerActionMenu />]} />
+        {isInRightDrawer && recordFromStore && (
+          <RightDrawerFooter
+            actions={[
+              <RecordShowRightDrawerActionMenu />,
+              <RecordShowRightDrawerOpenRecordButton
+                objectNameSingular={targetableObject.targetObjectNameSingular}
+                record={recordFromStore}
+              />,
+            ]}
+          />
         )}
       </StyledShowPageRightContainer>
     </>
diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx
index b936998a6..ad298b665 100644
--- a/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoft.tsx
@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import IconMicrosoftRaw from '../assets/microsoft.svg?react';
 
 interface IconMicrosoftProps {
-  size?: number;
+  size?: number | string;
 }
 
 export const IconMicrosoft = (props: IconMicrosoftProps) => {
diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx
index 7f2574fd4..d5a5bd324 100644
--- a/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoftCalendar.tsx
@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import IconMicrosoftCalendarRaw from '../assets/microsoft-calendar.svg?react';
 
 interface IconMicrosoftCalendarProps {
-  size?: number;
+  size?: number | string;
 }
 
 export const IconMicrosoftCalendar = (props: IconMicrosoftCalendarProps) => {
diff --git a/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx b/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx
index 153d0af09..3ba56f44d 100644
--- a/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IconMicrosoftOutlook.tsx
@@ -3,7 +3,7 @@ import { useTheme } from '@emotion/react';
 import IconMicrosoftOutlookRaw from '../assets/microsoft-outlook.svg?react';
 
 interface IconMicrosoftOutlookProps {
-  size?: number;
+  size?: number | string;
 }
 
 export const IconMicrosoftOutlook = (props: IconMicrosoftOutlookProps) => {
diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
index df946e5e8..54971f328 100644
--- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@@ -12,9 +12,10 @@ export {
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowsVertical,
   IconArrowUp,
   IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -30,6 +31,7 @@ export {
   IconBrandLinkedin,
   IconBrandX,
   IconBriefcase,
+  IconBrowserMaximize,
   IconBuildingSkyscraper,
   IconCalendar,
   IconCalendarDue,
@@ -42,8 +44,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronsRight,
   IconChevronUp,
+  IconChevronsRight,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -53,19 +55,15 @@ export {
   IconClockPlay,
   IconClockShare,
   IconCode,
-  IconStepInto,
-  IconLogin2,
-  IconLogout,
   IconCodeCircle,
   IconCoins,
   IconColorSwatch,
   IconMessageCircle as IconComment,
-  IconCube,
-  IconTypography,
   IconCopy,
   IconCreativeCommonsSa,
   IconCreditCard,
   IconCsv,
+  IconCube,
   IconCurrencyAfghani,
   IconCurrencyBahraini,
   IconCurrencyBaht,
@@ -186,6 +184,8 @@ export {
   IconLoader,
   IconLock,
   IconLockOpen,
+  IconLogin2,
+  IconLogout,
   IconMail,
   IconMailCog,
   IconMap,
@@ -250,6 +250,7 @@ export {
   IconSquareKey,
   IconSquareRoundedCheck,
   IconSquareRoundedX,
+  IconStepInto,
   IconTable,
   IconTag,
   IconTags,
@@ -263,6 +264,7 @@ export {
   IconTimelineEvent,
   IconTrash,
   IconTrashX,
+  IconTypography,
   IconUnlink,
   IconUpload,
   IconUser,
@@ -278,4 +280,4 @@ export {
   IconX,
 } from '@tabler/icons-react';
 
-export type { TablerIconsProps } from '@tabler/icons-react';
+export type { IconProps as TablerIconsProps } from '@tabler/icons-react';
diff --git a/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts
index d8262e70c..9b73f5093 100644
--- a/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts
+++ b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts
@@ -893,6 +893,7 @@ import {
   IconBroadcastOff,
   IconBrowser,
   IconBrowserCheck,
+  IconBrowserMaximize,
   IconBrowserOff,
   IconBrowserPlus,
   IconBrowserX,
@@ -8393,4 +8394,5 @@ export const ALL_ICONS = {
   IconZoomReset,
   IconZzz,
   IconZzzOff,
+  IconBrowserMaximize,
 };
diff --git a/packages/twenty-ui/src/display/icon/types/IconComponent.ts b/packages/twenty-ui/src/display/icon/types/IconComponent.ts
index 63d7b6e3f..014898aa0 100644
--- a/packages/twenty-ui/src/display/icon/types/IconComponent.ts
+++ b/packages/twenty-ui/src/display/icon/types/IconComponent.ts
@@ -1,9 +1,10 @@
+// eslint-disable-next-line no-restricted-imports
 import { FunctionComponent } from 'react';
 
 export type IconComponentProps = {
   className?: string;
-  size?: number;
-  stroke?: number;
+  size?: number | string;
+  stroke?: number | string;
   color?: string;
 };
 
diff --git a/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx b/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx
index f252da2d8..5324f3027 100644
--- a/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx
+++ b/packages/twenty-ui/src/feedback/progress-bar/components/CircularProgressBar.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo } from 'react';
 import { motion, useAnimation } from 'framer-motion';
+import { useEffect, useMemo } from 'react';
 
 interface CircularProgressBarProps {
   size?: number;
diff --git a/packages/twenty-ui/src/input/button/components/MainButton.tsx b/packages/twenty-ui/src/input/button/components/MainButton.tsx
index ddfba85f2..7a5e279f3 100644
--- a/packages/twenty-ui/src/input/button/components/MainButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/MainButton.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from '@ui/display';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 export type MainButtonVariant = 'primary' | 'secondary';
 
@@ -103,7 +103,7 @@ const StyledButton = styled.button<
 `;
 
 type MainButtonProps = Props & {
-  Icon?: IconComponent;
+  Icon?: IconComponent | FunctionComponent<{ size: number }>;
 };
 
 export const MainButton = ({
diff --git a/packages/twenty-website/src/app/_components/ui/icons/index.ts b/packages/twenty-website/src/app/_components/ui/icons/index.ts
index 9ce102922..0b543b647 100644
--- a/packages/twenty-website/src/app/_components/ui/icons/index.ts
+++ b/packages/twenty-website/src/app/_components/ui/icons/index.ts
@@ -1,7 +1,7 @@
-export type { TablerIconsProps } from '@tabler/icons-react';
 export {
   IconBook,
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
 } from '@tabler/icons-react';
+export type { IconProps as TablerIconsProps } from '@tabler/icons-react';
diff --git a/yarn.lock b/yarn.lock
index 21f785b2f..654ae36a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16553,22 +16553,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tabler/icons-react@npm:^2.44.0":
-  version: 2.47.0
-  resolution: "@tabler/icons-react@npm:2.47.0"
+"@tabler/icons-react@npm:^3.31.0":
+  version: 3.31.0
+  resolution: "@tabler/icons-react@npm:3.31.0"
   dependencies:
-    "@tabler/icons": "npm:2.47.0"
-    prop-types: "npm:^15.7.2"
+    "@tabler/icons": "npm:3.31.0"
   peerDependencies:
-    react: ^16.5.1 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/09a78a1b88aab69a11cd783c7d1bb75aeabe2ed03e3f957d00113dfde974ec73ee850551c430664634469ebcf32db749497a81bd30c01f2fb3425884cba7429c
+    react: ">= 16"
+  checksum: 10c0/aceefe1b6c12a2e64921900f49c09c0c24bcd837dfb3d4274914065e33a5175944f1e25ce9a80d110272e5ae0fefc24062a38f1ec75a4ec79c63d40acb9d1d12
   languageName: node
   linkType: hard
 
-"@tabler/icons@npm:2.47.0":
-  version: 2.47.0
-  resolution: "@tabler/icons@npm:2.47.0"
-  checksum: 10c0/ffdffa1289ca958f7d7c06c19e35c51a664d916df510fb44fb673abc2031747f2b3c47e21ba4c1ca07a6872b793f2063179bbbfb6afd1c68b522ca333460a7f3
+"@tabler/icons@npm:3.31.0":
+  version: 3.31.0
+  resolution: "@tabler/icons@npm:3.31.0"
+  checksum: 10c0/03fcfff0b705e1474030acee2ff0523bfa1fda7a29a33d031a9fd8e3b52ecc2e0380f9cf5e81bd054b30dc0acdb819b1e08ab746805be8d660934a08b2c3545e
   languageName: node
   linkType: hard
 
@@ -47190,7 +47189,7 @@ __metadata:
     "@swc/core": "npm:1.7.42"
     "@swc/helpers": "npm:~0.5.2"
     "@swc/jest": "npm:^0.2.29"
-    "@tabler/icons-react": "npm:^2.44.0"
+    "@tabler/icons-react": "npm:^3.31.0"
     "@testing-library/jest-dom": "npm:^6.1.5"
     "@testing-library/react": "npm:14.0.0"
     "@types/addressparser": "npm:^1.0.3"