From b84a31cb8ad4063317f0341fb0259e4e4bbcb9b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 10 Apr 2025 11:34:34 +0200
Subject: [PATCH] Create open side panel page action (#11481)

Closes https://github.com/twentyhq/core-team-issues/issues/697
---
 .../components/ActionOpenSidePanelPage.tsx    | 48 +++++++++++++++++++
 .../SearchRecordsRecordAgnosticAction.tsx     | 34 -------------
 .../constants/RecordAgnosticActionsConfig.tsx | 20 ++++++--
 3 files changed, 65 insertions(+), 37 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx
 delete mode 100644 packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/SearchRecordsRecordAgnosticAction.tsx

diff --git a/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx b/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx
new file mode 100644
index 000000000..2a0b497a0
--- /dev/null
+++ b/packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx
@@ -0,0 +1,48 @@
+import { ActionDisplay } from '@/action-menu/actions/display/components/ActionDisplay';
+import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext';
+import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useContext } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { IconComponent } from 'twenty-ui/display';
+
+export const ActionOpenSidePanelPage = ({
+  page,
+  pageTitle,
+  pageIcon,
+  onClick,
+  shouldResetSearchState = false,
+}: {
+  page: CommandMenuPages;
+  pageTitle: string;
+  pageIcon: IconComponent;
+  onClick?: () => void;
+  shouldResetSearchState?: boolean;
+}) => {
+  const actionConfig = useContext(ActionConfigContext);
+
+  const { navigateCommandMenu } = useNavigateCommandMenu();
+
+  const setCommandMenuSearchState = useSetRecoilState(commandMenuSearchState);
+
+  if (!actionConfig) {
+    return null;
+  }
+
+  const handleClick = () => {
+    onClick?.();
+
+    navigateCommandMenu({
+      page,
+      pageTitle,
+      pageIcon,
+    });
+
+    if (shouldResetSearchState) {
+      setCommandMenuSearchState('');
+    }
+  };
+
+  return <ActionDisplay action={actionConfig} onClick={handleClick} />;
+};
diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/SearchRecordsRecordAgnosticAction.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/SearchRecordsRecordAgnosticAction.tsx
deleted file mode 100644
index 3d97b73c5..000000000
--- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/SearchRecordsRecordAgnosticAction.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Action } from '@/action-menu/actions/components/Action';
-import { ActionType } from '@/action-menu/actions/types/ActionType';
-import { ActionConfigContext } from '@/action-menu/contexts/ActionConfigContext';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { useContext } from 'react';
-import { useSetRecoilState } from 'recoil';
-import { IconSearch } from 'twenty-ui/display';
-
-export const SearchRecordsRecordAgnosticAction = () => {
-  const { navigateCommandMenu } = useCommandMenu();
-
-  const setCommandMenuSearchState = useSetRecoilState(commandMenuSearchState);
-
-  const actionConfig = useContext(ActionConfigContext);
-
-  return (
-    <Action
-      onClick={() => {
-        navigateCommandMenu({
-          page: CommandMenuPages.SearchRecords,
-          pageTitle: 'Search',
-          pageIcon: IconSearch,
-        });
-
-        if (actionConfig?.type !== ActionType.Fallback) {
-          setCommandMenuSearchState('');
-        }
-      }}
-      preventCommandMenuClosing
-    />
-  );
-};
diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.tsx
index f453f8cca..9ee67958e 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.tsx
@@ -1,9 +1,10 @@
-import { SearchRecordsRecordAgnosticAction } from '@/action-menu/actions/record-agnostic-actions/components/SearchRecordsRecordAgnosticAction';
+import { ActionOpenSidePanelPage } from '@/action-menu/actions/components/ActionOpenSidePanelPage';
 import { RecordAgnosticActionsKeys } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKeys';
 import { ActionConfig } from '@/action-menu/actions/types/ActionConfig';
 import { ActionScope } from '@/action-menu/actions/types/ActionScope';
 import { ActionType } from '@/action-menu/actions/types/ActionType';
 import { ActionViewType } from '@/action-menu/actions/types/ActionViewType';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { msg } from '@lingui/core/macro';
 import { IconSearch } from 'twenty-ui/display';
 
@@ -18,7 +19,14 @@ export const RECORD_AGNOSTIC_ACTIONS_CONFIG: Record<string, ActionConfig> = {
     isPinned: false,
     Icon: IconSearch,
     availableOn: [ActionViewType.GLOBAL],
-    component: <SearchRecordsRecordAgnosticAction />,
+    component: (
+      <ActionOpenSidePanelPage
+        page={CommandMenuPages.SearchRecords}
+        pageTitle="Search"
+        pageIcon={IconSearch}
+        shouldResetSearchState={true}
+      />
+    ),
     hotKeys: ['/'],
     shouldBeRegistered: () => true,
   },
@@ -32,7 +40,13 @@ export const RECORD_AGNOSTIC_ACTIONS_CONFIG: Record<string, ActionConfig> = {
     isPinned: false,
     Icon: IconSearch,
     availableOn: [ActionViewType.GLOBAL],
-    component: <SearchRecordsRecordAgnosticAction />,
+    component: (
+      <ActionOpenSidePanelPage
+        page={CommandMenuPages.SearchRecords}
+        pageTitle="Search"
+        pageIcon={IconSearch}
+      />
+    ),
     hotKeys: ['/'],
     shouldBeRegistered: () => true,
   },