Refactor command menu items deprecated code (#19508)

- Removes the intermediate `CommandMenuItemConfig` /
`CommandConfigContext` / `CommandMenuItemDisplay` abstraction layers,
replacing them with a single `CommandMenuItemRenderer` that renders
directly from the command menu items from the backend
- Eliminates the server-items/ subdirectory by moving its contents
(hooks/, contexts/, states/, display/, edit/) up into the parent
command-menu-item/ module, removing an unnecessary nesting level.
This commit is contained in:
Raphaël Bosi
2026-04-10 11:28:27 +02:00
committed by GitHub
parent f13e7e01fe
commit 4b3a46d953
132 changed files with 1376 additions and 2723 deletions
@@ -1,9 +1,10 @@
import { CommandMenuContext } from '@/command-menu-item/contexts/CommandMenuContext';
import { sidePanelWidthState } from '@/side-panel/states/sidePanelWidthState';
import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { sidePanelWidthState } from '@/side-panel/states/sidePanelWidthState';
import { useListenToSidePanelClosing } from '@/ui/layout/side-panel/hooks/useListenToSidePanelClosing';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { WorkflowDiagramRightClickCommandMenu } from '@/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu';
import { WORKFLOW_DIAGRAM_EMPTY_NODE_DEFINITION } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEmptyNodeDefinition';
@@ -51,6 +52,7 @@ import {
type OnReconnect,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { useStore } from 'jotai';
import React, {
useCallback,
useContext,
@@ -59,11 +61,9 @@ import React, {
useRef,
useState,
} from 'react';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { isDefined } from 'twenty-shared/utils';
import { Tag, type TagColor } from 'twenty-ui/components';
import { useStore } from 'jotai';
import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledResetReactflowStyles = styled.div`
--xy-node-background-color: none;
--xy-node-border: none;
@@ -256,7 +256,8 @@ export const WorkflowDiagramCanvasBase = ({
}, [workflowDiagram, workflowInsertStepIds]);
const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const handleEdgesChange = (
edgeChanges: Array<EdgeChange<WorkflowDiagramEdge>>,
@@ -68,7 +68,8 @@ export const WorkflowRunVisualizerEffect = ({
const { populateStepsOutputSchema } = useStepsOutputSchema();
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const store = useStore();
@@ -4,16 +4,17 @@ import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavi
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
import { type StartNodeCreationParams } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { workflowInsertStepIdsComponentState } from '@/workflow/workflow-steps/states/workflowInsertStepIdsComponentState';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useCallback, useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useStartNodeCreation = () => {
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const [workflowInsertStepIds, setWorkflowInsertStepIds] =
useAtomComponentState(workflowInsertStepIdsComponentState);
@@ -3,6 +3,7 @@ import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hook
import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
import { useResetWorkflowInsertStepIds } from '@/workflow/workflow-diagram/hooks/useResetWorkflowInsertStepIds';
@@ -14,7 +15,6 @@ import { WorkflowNodeLabelWithCounterPart } from '@/workflow/workflow-diagram/wo
import { WorkflowNodeRightPart } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart';
import { WorkflowNodeTitle } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeTitle';
import { useLingui } from '@lingui/react/macro';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
@@ -32,7 +32,8 @@ export const WorkflowDiagramEmptyTriggerEditable = ({ id }: { id: string }) => {
workflowSelectedNodeComponentState,
);
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
@@ -3,6 +3,7 @@ import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hook
import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { workflowVisualizerWorkflowVersionIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowVersionIdComponentState';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
@@ -14,7 +15,6 @@ import { WorkflowNodeLabelWithCounterPart } from '@/workflow/workflow-diagram/wo
import { WorkflowNodeRightPart } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeRightPart';
import { WorkflowNodeTitle } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeTitle';
import { useLingui } from '@lingui/react/macro';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
@@ -35,7 +35,8 @@ export const WorkflowDiagramEmptyTriggerReadonly = ({ id }: { id: string }) => {
workflowSelectedNodeComponentState,
);
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const { openWorkflowViewStepInSidePanel } = useSidePanelWorkflowNavigation();
@@ -3,13 +3,13 @@ import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hook
import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { useResetWorkflowInsertStepIds } from '@/workflow/workflow-diagram/hooks/useResetWorkflowInsertStepIds';
import { workflowSelectedNodeComponentState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeComponentState';
import { type WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
import { WorkflowDiagramStepNodeEditableContent } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditableContent';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
@@ -37,7 +37,8 @@ export const WorkflowDiagramStepNodeEditable = ({
const { resetWorkflowInsertStepIds } = useResetWorkflowInsertStepIds();
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
@@ -3,6 +3,7 @@ import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hook
import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { workflowVisualizerWorkflowVersionIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowVersionIdComponentState';
import { WORKFLOW_DIAGRAM_STEP_NODE_BASE_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramStepNodeClickOutsideId';
@@ -21,7 +22,6 @@ import { WorkflowNodeTitle } from '@/workflow/workflow-diagram/workflow-nodes/co
import { WORKFLOW_DIAGRAM_NODE_DEFAULT_SOURCE_HANDLE_ID } from '@/workflow/workflow-diagram/workflow-nodes/constants/WorkflowDiagramNodeDefaultSourceHandleId';
import { isNodeTitleHighlighted } from '@/workflow/workflow-diagram/workflow-nodes/utils/isNodeTitleHighlighted';
import { Position } from '@xyflow/react';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useContext } from 'react';
import { capitalize, isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
@@ -50,7 +50,8 @@ export const WorkflowDiagramStepNodeReadonly = ({
const { openWorkflowViewStepInSidePanel } = useSidePanelWorkflowNavigation();
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
@@ -3,6 +3,7 @@ import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hook
import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -24,7 +25,6 @@ import { WORKFLOW_DIAGRAM_NODE_DEFAULT_SOURCE_HANDLE_ID } from '@/workflow/workf
import { getNodeIterationCount } from '@/workflow/workflow-diagram/workflow-nodes/utils/getNodeIterationCount';
import { styled } from '@linaria/react';
import { Position } from '@xyflow/react';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useContext } from 'react';
import { capitalize, isDefined } from 'twenty-shared/utils';
import { StepStatus } from 'twenty-shared/workflow';
@@ -100,7 +100,8 @@ export const WorkflowRunDiagramStepNode = ({
const { openWorkflowRunViewStepInSidePanel } =
useSidePanelWorkflowNavigation();
const { isInSidePanel } = useContext(CommandMenuContext);
const { commandMenuContextApi } = useContext(CommandMenuContext);
const isInSidePanel = commandMenuContextApi.isInSidePanel;
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,