admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Create open side panel page action (#11481)

Browse Source 
Closes https://github.com/twentyhq/core-team-issues/issues/697
This commit is contained in:
Raphaël Bosi
2025-04-10 11:34:34 +02:00
committed by GitHub
parent 4a4ce9a6fe
commit b84a31cb8a
3 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/twenty-front/src/modules/action-menu/actions/components/ActionOpenSidePanelPage.tsx Normal file
View File

@ -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} />;
};

34
packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/components/SearchRecordsRecordAgnosticAction.tsx
View File

@ -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
/>
);
};

20
packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.tsx
View File

@ -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,
},