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 (
+
+
+
+ );
+};
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={
-
+
}
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 = () => {
>
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 = ({
{renderActiveTabContent()}
- {isInRightDrawer && recordFromStore && !recordFromStore.deletedAt && (
- ]} />
+ {isInRightDrawer && recordFromStore && (
+ ,
+ ,
+ ]}
+ />
)}
>
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"