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

refactor!: rename Command Menu page/navigation layer to Side Panel (#18393)

Browse Source
This commit is contained in:
nitin
2026-03-05 20:16:31 +05:30
committed by GitHub
parent 38ad0820c0
commit 5853891b02
675 changed files with 4894 additions and 4964 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects.ts → packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInSidePanelEffects.ts
+9 -8
View File
@@ -1,4 +1,4 @@
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -18,15 +18,16 @@ import { isDefined } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui/display';
import { useStore } from 'jotai';
export const useRunWorkflowRunOpeningInCommandMenuSideEffects = () => {
export const useRunWorkflowRunOpeningInSidePanelEffects = () => {
const store = useStore();
const apolloCoreClient = useApolloCoreClient();
const { openWorkflowRunViewStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowRunViewStepInSidePanel } =
useSidePanelWorkflowNavigation();
const { getIcon } = useIcons();
const { objectPermissionsByObjectMetadataId } = useObjectPermissions();
const runWorkflowRunOpeningInCommandMenuSideEffects = useCallback(
const runWorkflowRunOpeningInSidePanelEffects = useCallback(
({
objectMetadataItem,
recordId,
@@ -100,11 +101,11 @@ export const useRunWorkflowRunOpeningInCommandMenuSideEffects = () => {
...steps,
{
stepId: stepToOpenByDefault.id,
isInRightDrawer: true,
isInSidePanel: true,
},
],
);
openWorkflowRunViewStepInCommandMenu({
openWorkflowRunViewStepInSidePanel({
workflowId: workflowRunRecord.workflowId,
workflowRunId: workflowRunRecord.id,
title: stepToOpenByDefault.data.name,
@@ -116,13 +117,13 @@ export const useRunWorkflowRunOpeningInCommandMenuSideEffects = () => {
[
apolloCoreClient.cache,
objectPermissionsByObjectMetadataId,
openWorkflowRunViewStepInCommandMenu,
openWorkflowRunViewStepInSidePanel,
getIcon,
store,
],
);
return {
runWorkflowRunOpeningInCommandMenuSideEffects,
runWorkflowRunOpeningInSidePanelEffects,
};
};
packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowVersion.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { triggerCreateRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerCreateRecordsOptimisticEffect';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSidePanel';
import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
@@ -62,7 +62,7 @@ export const useRunWorkflowVersion = () => {
recordGqlFields: computedRecordGqlFields,
});
const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();
const { openRecordInSidePanel } = useOpenRecordInSidePanel();
const setRecordInStore = useCallback(
(workflowRun: WorkflowRun) => {
@@ -141,7 +141,7 @@ export const useRunWorkflowVersion = () => {
variables: { input: { workflowVersionId, workflowRunId, payload } },
});
openRecordInCommandMenu({
openRecordInSidePanel({
objectNameSingular: CoreObjectNameSingular.WorkflowRun,
recordId: workflowRunId,
});
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
+28 -28
View File
@@ -1,7 +1,7 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { commandMenuWidthState } from '@/command-menu/states/commandMenuWidthState';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
import { sidePanelWidthState } from '@/side-panel/states/sidePanelWidthState';
import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
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 { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
@@ -255,8 +255,8 @@ export const WorkflowDiagramCanvasBase = ({
return { nodes, edges };
}, [workflowDiagram, workflowInsertStepIds]);
const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
const { isInRightDrawer } = useContext(ActionMenuContext);
const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
const { isInSidePanel } = useContext(ActionMenuContext);
const handleEdgesChange = (
edgeChanges: Array<EdgeChange<WorkflowDiagramEdge>>,
@@ -285,14 +285,14 @@ export const WorkflowDiagramCanvasBase = ({
const setFlowViewport = useCallback(
({
workflowDiagramFlowInitialized,
isCommandMenuOpened,
isSidePanelOpened,
workflowDiagram,
isInRightDrawer,
isInSidePanel,
}: {
workflowDiagramFlowInitialized: boolean;
isCommandMenuOpened: boolean;
isSidePanelOpened: boolean;
workflowDiagram: WorkflowDiagram | undefined;
isInRightDrawer: boolean;
isInSidePanel: boolean;
}) => {
if (!isDefined(containerRef.current) || !workflowDiagramFlowInitialized) {
return;
@@ -317,12 +317,12 @@ export const WorkflowDiagramCanvasBase = ({
let adjustedContainerWidth = baseContainerWidth;
const commandMenuWidth = store.get(commandMenuWidthState.atom);
const sidePanelWidth = store.get(sidePanelWidthState.atom);
if (!isInRightDrawer && isCommandMenuOpened) {
adjustedContainerWidth = baseContainerWidth - commandMenuWidth;
} else if (!isInRightDrawer && hasViewportBeenMoved) {
adjustedContainerWidth = baseContainerWidth + commandMenuWidth;
if (!isInSidePanel && isSidePanelOpened) {
adjustedContainerWidth = baseContainerWidth - sidePanelWidth;
} else if (!isInSidePanel && hasViewportBeenMoved) {
adjustedContainerWidth = baseContainerWidth + sidePanelWidth;
}
const flowBounds = reactflow.getNodesBounds(nodes);
@@ -344,16 +344,16 @@ export const WorkflowDiagramCanvasBase = ({
const handleSetFlowViewportOnChange = useCallback(
({
workflowDiagramFlowInitialized,
isCommandMenuOpened,
isInRightDrawer,
isSidePanelOpened,
isInSidePanel,
}: {
workflowDiagramFlowInitialized: boolean;
isCommandMenuOpened: boolean;
isInRightDrawer: boolean;
isSidePanelOpened: boolean;
isInSidePanel: boolean;
}) => {
setFlowViewport({
isInRightDrawer,
isCommandMenuOpened,
isInSidePanel,
isSidePanelOpened,
workflowDiagramFlowInitialized,
workflowDiagram: store.get(workflowDiagramCallbackState),
});
@@ -364,14 +364,14 @@ export const WorkflowDiagramCanvasBase = ({
useEffect(() => {
handleSetFlowViewportOnChange({
workflowDiagramFlowInitialized,
isCommandMenuOpened,
isInRightDrawer,
isSidePanelOpened,
isInSidePanel,
});
}, [
handleSetFlowViewportOnChange,
isCommandMenuOpened,
isSidePanelOpened,
workflowDiagramFlowInitialized,
isInRightDrawer,
isInSidePanel,
]);
const handleNodesChanges = useCallback(
@@ -407,19 +407,19 @@ export const WorkflowDiagramCanvasBase = ({
}
setFlowViewport({
isCommandMenuOpened,
isSidePanelOpened,
workflowDiagramFlowInitialized,
workflowDiagram: updatedWorkflowDiagram,
isInRightDrawer,
isInSidePanel,
});
},
[
isCommandMenuOpened,
isSidePanelOpened,
setFlowViewport,
workflowDiagramFlowInitialized,
workflowDiagramCallbackState,
workflowDiagramWaitingNodesDimensions,
isInRightDrawer,
isInSidePanel,
store,
],
);
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunVisualizerEffect.tsx
+13 -12
View File
@@ -1,5 +1,5 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
@@ -63,11 +63,12 @@ export const WorkflowRunVisualizerEffect = ({
workflowRunDiagramAutomaticallyOpenedStepsComponentState,
);
const { openWorkflowRunViewStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowRunViewStepInSidePanel } =
useSidePanelWorkflowNavigation();
const { populateStepsOutputSchema } = useStepsOutputSchema();
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const store = useStore();
@@ -95,11 +96,11 @@ export const WorkflowRunVisualizerEffect = ({
({
workflowRunState,
workflowVersionId: versionId,
isInRightDrawer: inRightDrawer,
isInSidePanel: inSidePanel,
}: {
workflowRunState: WorkflowRunState | undefined;
workflowVersionId: string | undefined;
isInRightDrawer: boolean;
isInSidePanel: boolean;
}) => {
if (!(isDefined(workflowRunState) && isDefined(versionId))) {
store.set(flow, undefined);
@@ -144,7 +145,7 @@ export const WorkflowRunVisualizerEffect = ({
workflowRunDiagramAutomaticallyOpenedSteps.some(
(step) =>
step.stepId === stepToOpenByDefault.id &&
step.isInRightDrawer === inRightDrawer,
step.isInSidePanel === inSidePanel,
);
const currentWorkflowVisualizerWorkflowId = store.get(
@@ -156,7 +157,7 @@ export const WorkflowRunVisualizerEffect = ({
);
}
if (inRightDrawer) {
if (inSidePanel) {
store.set(workflowDiagram, baseWorkflowRunDiagram);
} else {
const workflowRunDiagram = selectWorkflowDiagramNode({
@@ -177,11 +178,11 @@ export const WorkflowRunVisualizerEffect = ({
...workflowRunDiagramAutomaticallyOpenedSteps,
{
stepId: stepToOpenByDefault.id,
isInRightDrawer: inRightDrawer,
isInSidePanel: inSidePanel,
},
]);
openWorkflowRunViewStepInCommandMenu({
openWorkflowRunViewStepInSidePanel({
workflowId: currentWorkflowVisualizerWorkflowId,
workflowRunId,
title: stepToOpenByDefault.data.name,
@@ -193,7 +194,7 @@ export const WorkflowRunVisualizerEffect = ({
[
flow,
getIcon,
openWorkflowRunViewStepInCommandMenu,
openWorkflowRunViewStepInSidePanel,
workflowDiagram,
workflowDiagramStatusState,
workflowRunDiagramAutomaticallyOpenedStepsState,
@@ -208,11 +209,11 @@ export const WorkflowRunVisualizerEffect = ({
handleWorkflowRunDiagramGeneration({
workflowRunState: workflowRun?.state ?? undefined,
workflowVersionId: workflowRun?.workflowVersionId,
isInRightDrawer,
isInSidePanel,
});
}, [
handleWorkflowRunDiagramGeneration,
isInRightDrawer,
isInSidePanel,
workflowRun?.state,
workflowRun?.workflowVersionId,
]);
packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useRightDrawerState.ts
-21
View File
@@ -1,21 +0,0 @@
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { type CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsMobile } from 'twenty-ui/utilities';
export const useRightDrawerState = (): {
rightDrawerState: CommandMenuAnimationVariant;
} => {
const isMobile = useIsMobile();
const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
if (isMobile) {
return {
rightDrawerState: 'fullScreen',
};
}
return {
rightDrawerState: isCommandMenuOpened ? 'normal' : 'closed',
};
};
packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab.ts → packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunSidePanelTab.ts
+12 -12
View File
@@ -1,6 +1,6 @@
import { getIsInputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled';
import { getIsOutputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
import { getIsInputTabDisabled } from '@/side-panel/pages/workflow/step/view-run/utils/getIsInputTabDisabled';
import { getIsOutputTabDisabled } from '@/side-panel/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { WorkflowRunTabId } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
import { useCallback } from 'react';
@@ -8,9 +8,9 @@ import { isDefined } from 'twenty-shared/utils';
import { type WorkflowRunStepStatus } from '@/workflow/types/Workflow';
import { useStore } from 'jotai';
export const useSetInitialWorkflowRunRightDrawerTab = () => {
export const useSetInitialWorkflowRunSidePanelTab = () => {
const store = useStore();
const setInitialWorkflowRunRightDrawerTab = useCallback(
const setInitialWorkflowRunSidePanelTab = useCallback(
({
workflowSelectedNode,
stepExecutionStatus,
@@ -18,13 +18,13 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
workflowSelectedNode: string;
stepExecutionStatus: WorkflowRunStepStatus;
}) => {
const commandMenuPageInfo = store.get(commandMenuPageInfoState.atom);
const sidePanelPageInfo = store.get(sidePanelPageInfoState.atom);
const activeTabId = activeTabIdComponentState.atomFamily({
instanceId: commandMenuPageInfo.instanceId,
instanceId: sidePanelPageInfo.instanceId,
});
const activeWorkflowRunRightDrawerTab = store.get(
const activeWorkflowRunSidePanelTab = store.get(
activeTabId,
) as WorkflowRunTabId | null;
@@ -36,7 +36,7 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
stepExecutionStatus,
});
if (!isDefined(activeWorkflowRunRightDrawerTab)) {
if (!isDefined(activeWorkflowRunSidePanelTab)) {
const defaultTabId = isOutputTabDisabled
? WorkflowRunTabId.NODE
: WorkflowRunTabId.OUTPUT;
@@ -48,9 +48,9 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
if (
(isInputTabDisabled &&
activeWorkflowRunRightDrawerTab === WorkflowRunTabId.INPUT) ||
activeWorkflowRunSidePanelTab === WorkflowRunTabId.INPUT) ||
(isOutputTabDisabled &&
activeWorkflowRunRightDrawerTab === WorkflowRunTabId.OUTPUT)
activeWorkflowRunSidePanelTab === WorkflowRunTabId.OUTPUT)
) {
store.set(activeTabId, WorkflowRunTabId.NODE);
}
@@ -59,6 +59,6 @@ export const useSetInitialWorkflowRunRightDrawerTab = () => {
);
return {
setInitialWorkflowRunRightDrawerTab,
setInitialWorkflowRunSidePanelTab,
};
};
packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useSidePanelState.ts
+21
View File
@@ -0,0 +1,21 @@
import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
import { type SidePanelAnimationVariant } from '@/side-panel/types/SidePanelAnimationVariant';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useIsMobile } from 'twenty-ui/utilities';
export const useSidePanelState = (): {
sidePanelState: SidePanelAnimationVariant;
} => {
const isMobile = useIsMobile();
const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
if (isMobile) {
return {
sidePanelState: 'fullScreen',
};
}
return {
sidePanelState: isSidePanelOpened ? 'normal' : 'closed',
};
};
packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
+13 -12
View File
@@ -1,6 +1,6 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
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 { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
@@ -13,7 +13,7 @@ import { useCallback, useContext } from 'react';
import { isDefined } from 'twenty-shared/utils';
export const useStartNodeCreation = () => {
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const [workflowInsertStepIds, setWorkflowInsertStepIds] =
useAtomComponentState(workflowInsertStepIdsComponentState);
@@ -22,14 +22,15 @@ export const useStartNodeCreation = () => {
workflowSelectedNodeComponentState,
);
const { openWorkflowCreateStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowCreateStepInSidePanel } =
useSidePanelWorkflowNavigation();
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
workflowVisualizerWorkflowIdComponentState,
);
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
/**
@@ -56,19 +57,19 @@ export const useStartNodeCreation = () => {
return;
}
if (!isInRightDrawer) {
setCommandMenuNavigationStack([]);
if (!isInSidePanel) {
setSidePanelNavigationStack([]);
}
openWorkflowCreateStepInCommandMenu(workflowVisualizerWorkflowId);
openWorkflowCreateStepInSidePanel(workflowVisualizerWorkflowId);
},
[
setWorkflowInsertStepIds,
setWorkflowSelectedNode,
workflowVisualizerWorkflowId,
isInRightDrawer,
openWorkflowCreateStepInCommandMenu,
setCommandMenuNavigationStack,
isInSidePanel,
openWorkflowCreateStepInSidePanel,
setSidePanelNavigationStack,
],
);
packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useWorkflowDiagramScreenToFlowPosition.ts
+3 -3
View File
@@ -14,14 +14,14 @@ export const useWorkflowDiagramScreenToFlowPosition = () => {
return;
}
const visibleRightDrawerWidth = Number(
theme.rightDrawerWidth.replace('px', ''),
const visibleSidePanelWidth = Number(
theme.sidePanelWidth.replace('px', ''),
);
const flowPosition = screenToFlowPosition(position);
return {
x: flowPosition.x + visibleRightDrawerWidth / 2,
x: flowPosition.x + visibleSidePanelWidth / 2,
y: flowPosition.y,
};
};
packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowRunDiagramAutomaticallyOpenedStepsComponentState.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { createAtomComponentState } from '@/ui/utilities/state/jotai/utils/creat
import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-diagram/states/contexts/WorkflowVisualizerComponentInstanceContext';
export const workflowRunDiagramAutomaticallyOpenedStepsComponentState =
createAtomComponentState<{ stepId: string; isInRightDrawer: boolean }[]>({
createAtomComponentState<{ stepId: string; isInSidePanel: boolean }[]>({
key: 'workflowRunDiagramAutomaticallyOpenedStepsComponentState',
defaultValue: [],
componentInstanceContext: WorkflowVisualizerComponentInstanceContext,
packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramEmptyTriggerEditable.tsx
+10 -9
View File
@@ -1,6 +1,6 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
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 { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -21,7 +21,8 @@ import { isDefined } from 'twenty-shared/utils';
export const WorkflowDiagramEmptyTriggerEditable = ({ id }: { id: string }) => {
const { t } = useLingui();
const { openWorkflowTriggerTypeInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowTriggerTypeInSidePanel } =
useSidePanelWorkflowNavigation();
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
workflowVisualizerWorkflowIdComponentState,
@@ -31,10 +32,10 @@ export const WorkflowDiagramEmptyTriggerEditable = ({ id }: { id: string }) => {
workflowSelectedNodeComponentState,
);
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
const selected = workflowSelectedNode === id;
@@ -42,8 +43,8 @@ export const WorkflowDiagramEmptyTriggerEditable = ({ id }: { id: string }) => {
const { resetWorkflowInsertStepIds } = useResetWorkflowInsertStepIds();
const handleClick = () => {
if (!isInRightDrawer) {
setCommandMenuNavigationStack([]);
if (!isInSidePanel) {
setSidePanelNavigationStack([]);
}
resetWorkflowInsertStepIds();
@@ -54,7 +55,7 @@ export const WorkflowDiagramEmptyTriggerEditable = ({ id }: { id: string }) => {
return;
}
openWorkflowTriggerTypeInCommandMenu(workflowVisualizerWorkflowId);
openWorkflowTriggerTypeInSidePanel(workflowVisualizerWorkflowId);
};
return (
packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramEmptyTriggerReadonly.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
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 { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -35,12 +35,12 @@ export const WorkflowDiagramEmptyTriggerReadonly = ({ id }: { id: string }) => {
workflowSelectedNodeComponentState,
);
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const { openWorkflowViewStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowViewStepInSidePanel } = useSidePanelWorkflowNavigation();
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
const selected = workflowSelectedNode === id;
@@ -55,13 +55,13 @@ export const WorkflowDiagramEmptyTriggerReadonly = ({ id }: { id: string }) => {
);
}
if (!isInRightDrawer) {
setCommandMenuNavigationStack([]);
if (!isInSidePanel) {
setSidePanelNavigationStack([]);
}
setWorkflowSelectedNode(TRIGGER_STEP_ID);
openWorkflowViewStepInCommandMenu({
openWorkflowViewStepInSidePanel({
workflowId: workflowVisualizerWorkflowId,
workflowVersionId: workflowVisualizerWorkflowVersionId,
title: t`Add a Trigger`,
packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditable.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
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 { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -33,19 +33,19 @@ export const WorkflowDiagramStepNodeEditable = ({
const selected = workflowSelectedNode === id;
const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowEditStepInSidePanel } = useSidePanelWorkflowNavigation();
const { resetWorkflowInsertStepIds } = useResetWorkflowInsertStepIds();
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
const handleClick = () => {
if (!isInRightDrawer) {
setCommandMenuNavigationStack([]);
if (!isInSidePanel) {
setSidePanelNavigationStack([]);
}
resetWorkflowInsertStepIds();
@@ -53,7 +53,7 @@ export const WorkflowDiagramStepNodeEditable = ({
setWorkflowSelectedNode(id);
if (isDefined(workflowVisualizerWorkflowId)) {
openWorkflowEditStepInCommandMenu(
openWorkflowEditStepInSidePanel(
workflowVisualizerWorkflowId,
data.name,
getIcon(getWorkflowNodeIconKey(data)),
packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeReadonly.tsx
+9 -9
View File
@@ -1,6 +1,6 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
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 { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -48,12 +48,12 @@ export const WorkflowDiagramStepNodeReadonly = ({
const selected = workflowSelectedNode === id;
const { openWorkflowViewStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowViewStepInSidePanel } = useSidePanelWorkflowNavigation();
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
const handleClick = () => {
@@ -64,13 +64,13 @@ export const WorkflowDiagramStepNodeReadonly = ({
throw new Error('Workflow ID and Version ID must be defined');
}
if (!isInRightDrawer) {
setCommandMenuNavigationStack([]);
if (!isInSidePanel) {
setSidePanelNavigationStack([]);
}
setWorkflowSelectedNode(id);
openWorkflowViewStepInCommandMenu({
openWorkflowViewStepInSidePanel({
workflowId: workflowVisualizerWorkflowId,
workflowVersionId: workflowVisualizerWorkflowVersionId,
title: data.name,
packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx
+10 -9
View File
@@ -1,6 +1,6 @@
import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
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 { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
@@ -92,12 +92,13 @@ export const WorkflowRunDiagramStepNode = ({
const selected = workflowSelectedNode === id;
const { openWorkflowRunViewStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowRunViewStepInSidePanel } =
useSidePanelWorkflowNavigation();
const { isInRightDrawer } = useContext(ActionMenuContext);
const { isInSidePanel } = useContext(ActionMenuContext);
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
const workflowRun = useWorkflowRun({ workflowRunId });
@@ -114,13 +115,13 @@ export const WorkflowRunDiagramStepNode = ({
throw new Error('Workflow ID must be defined');
}
if (!isInRightDrawer) {
setCommandMenuNavigationStack([]);
if (!isInSidePanel) {
setSidePanelNavigationStack([]);
}
setWorkflowSelectedNode(id);
openWorkflowRunViewStepInCommandMenu({
openWorkflowRunViewStepInSidePanel({
workflowId: workflowVisualizerWorkflowId,
workflowRunId,
title: data.name,
packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx → packages/twenty-front/src/modules/workflow/workflow-steps/components/SidePanelWorkflowSelectStepContainer.tsx
+1 -1
View File
@@ -11,4 +11,4 @@ const StyledStepListContainer = styled.div`
padding-inline: ${themeCssVariables.spacing[2]};
`;
export { StyledStepListContainer as RightDrawerStepListContainer };
export { StyledStepListContainer as SidePanelStepListContainer };
packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx → packages/twenty-front/src/modules/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle.tsx
+1 -1
View File
@@ -11,4 +11,4 @@ const StyledSelectStepTitle = styled.span`
padding-right: ${themeCssVariables.spacing[1]};
`;
export { StyledSelectStepTitle as RightDrawerWorkflowSelectStepTitle };
export { StyledSelectStepTitle as SidePanelWorkflowSelectStepTitle };
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepInputDetail.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepFooter.tsx
+10 -10
View File
@@ -1,8 +1,8 @@
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { useCommandMenuWorkflowIdOrThrow } from '@/command-menu/pages/workflow/hooks/useCommandMenuWorkflowIdOrThrow';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
import { useSidePanelWorkflowIdOrThrow } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowIdOrThrow';
import { OptionsDropdownMenu } from '@/ui/layout/dropdown/components/OptionsDropdownMenu';
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -37,11 +37,11 @@ export const WorkflowStepFooter = ({
const { t } = useLingui();
const { duplicateStep } = useDuplicateStep();
const { closeDropdown } = useCloseDropdown();
const workflowId = useCommandMenuWorkflowIdOrThrow();
const workflowId = useSidePanelWorkflowIdOrThrow();
const {
openWorkflowEditStepTypeInCommandMenu,
openWorkflowTriggerTypeInCommandMenu,
} = useWorkflowCommandMenu();
openWorkflowEditStepTypeInSidePanel,
openWorkflowTriggerTypeInSidePanel,
} = useSidePanelWorkflowNavigation();
const { deleteStep } = useDeleteStep();
const navigateSettings = useNavigateSettings();
const workflowAiAgentActionAgent = useAtomStateValue(
@@ -66,9 +66,9 @@ export const WorkflowStepFooter = ({
closeDropdown(dropdownId);
if (stepId === TRIGGER_STEP_ID) {
openWorkflowTriggerTypeInCommandMenu(workflowId);
openWorkflowTriggerTypeInSidePanel(workflowId);
} else {
openWorkflowEditStepTypeInCommandMenu(workflowId);
openWorkflowEditStepTypeInSidePanel(workflowId);
}
};
@@ -177,7 +177,7 @@ export const WorkflowStepFooter = ({
);
return (
<RightDrawerFooter
<SidePanelFooter
actions={[
OptionsDropdown,
...(additionalActions ?? []),
packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterColumn.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn';
import { AdvancedFilterSidePanelColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn';
import { WorkflowStepFilterFieldSelect } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterFieldSelect';
import { WorkflowStepFilterLogicalOperatorCell } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell';
import { WorkflowStepFilterOperandSelect } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterOperandSelect';
@@ -39,7 +39,7 @@ export const WorkflowStepFilterColumn = ({
const shouldShowDropdown = !readonly && !preventDeletion;
return (
<AdvancedFilterCommandMenuColumn>
<AdvancedFilterSidePanelColumn>
<StyledContainer>
<WorkflowStepFilterLogicalOperatorCell
index={stepFilterIndex}
@@ -54,6 +54,6 @@ export const WorkflowStepFilterColumn = ({
<WorkflowStepFilterFieldSelect stepFilter={stepFilter} />
<WorkflowStepFilterOperandSelect stepFilter={stepFilter} />
<WorkflowStepFilterValueInput stepFilter={stepFilter} />
</AdvancedFilterCommandMenuColumn>
</AdvancedFilterSidePanelColumn>
);
};
packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupColumn.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { AdvancedFilterCommandMenuColumn } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuColumn';
import { AdvancedFilterSidePanelColumn } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn';
import { WorkflowStepFilterGroupChildren } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupChildren';
import { WorkflowStepFilterGroupOptionsDropdown } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupOptionsDropdown';
import { WorkflowStepFilterLogicalOperatorCell } from '@/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell';
@@ -29,7 +29,7 @@ export const WorkflowStepFilterGroupColumn = ({
const { readonly } = useContext(WorkflowStepFilterContext);
return (
<AdvancedFilterCommandMenuColumn>
<AdvancedFilterSidePanelColumn>
<StyledContainer>
<WorkflowStepFilterLogicalOperatorCell
index={stepFilterGroupIndex}
@@ -42,6 +42,6 @@ export const WorkflowStepFilterGroupColumn = ({
)}
</StyledContainer>
<WorkflowStepFilterGroupChildren stepFilterGroupId={stepFilterGroup.id} />
</AdvancedFilterCommandMenuColumn>
</AdvancedFilterSidePanelColumn>
);
};
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/__tests__/useDeleteStep.test.tsx
+7 -7
View File
@@ -7,7 +7,7 @@ import { WorkflowVisualizerComponentInstanceContext } from '@/workflow/workflow-
const mockDeleteWorkflowVersionStep = jest.fn();
const mockGetUpdatableWorkflowVersion = jest.fn();
const mockDeleteStepsOutputSchema = jest.fn();
const mockCloseCommandMenu = jest.fn();
const mockCloseSidePanel = jest.fn();
jest.mock(
'@/workflow/workflow-steps/hooks/useDeleteWorkflowVersionStep',
@@ -30,9 +30,9 @@ jest.mock('@/workflow/workflow-variables/hooks/useStepsOutputSchema', () => ({
}),
}));
jest.mock('@/command-menu/hooks/useCommandMenu', () => ({
useCommandMenu: () => ({
closeCommandMenu: mockCloseCommandMenu,
jest.mock('@/side-panel/hooks/useSidePanelMenu', () => ({
useSidePanelMenu: () => ({
closeSidePanelMenu: mockCloseSidePanel,
}),
}));
@@ -41,9 +41,9 @@ jest.mock('@/workflow/hooks/useWorkflowWithCurrentVersion', () => ({
}));
jest.mock(
'@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose',
'@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose',
() => ({
useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose: () => ({
useResetWorkflowAiAgentPermissionsStateOnSidePanelClose: () => ({
resetPermissionState: jest.fn(),
}),
}),
@@ -96,7 +96,7 @@ describe('useDeleteStep', () => {
workflowVersionId: mockWorkflowVersionId,
stepId: mockStepId,
});
expect(mockCloseCommandMenu).toHaveBeenCalled();
expect(mockCloseSidePanel).toHaveBeenCalled();
expect(mockDeleteStepsOutputSchema).toHaveBeenCalledWith({
stepIds: [mockStepId],
workflowVersionId: mockWorkflowVersionId,
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useDeleteStep.ts
+5 -5
View File
@@ -1,22 +1,22 @@
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useGetUpdatableWorkflowVersionOrThrow } from '@/workflow/hooks/useGetUpdatableWorkflowVersionOrThrow';
import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
import { useDeleteWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/useDeleteWorkflowVersionStep';
import { useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose';
import { useResetWorkflowAiAgentPermissionsStateOnSidePanelClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose';
import { useStepsOutputSchema } from '@/workflow/workflow-variables/hooks/useStepsOutputSchema';
import { isDefined } from 'twenty-shared/utils';
export const useDeleteStep = () => {
const { resetPermissionState } =
useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose();
useResetWorkflowAiAgentPermissionsStateOnSidePanelClose();
const { deleteWorkflowVersionStep } = useDeleteWorkflowVersionStep();
const { deleteStepsOutputSchema } = useStepsOutputSchema();
const { getUpdatableWorkflowVersion } =
useGetUpdatableWorkflowVersionOrThrow();
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
workflowVisualizerWorkflowIdComponentState,
);
@@ -35,7 +35,7 @@ export const useDeleteStep = () => {
stepId,
});
closeCommandMenu();
closeSidePanelMenu();
deleteStepsOutputSchema({
stepIds: [stepId],
packages/twenty-front/src/modules/workflow/workflow-steps/hooks/useWorkflowRunStepInfo.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab.tsx
+2 -2
View File
@@ -15,7 +15,7 @@ import { isDefined } from 'twenty-shared/utils';
import { IconChevronLeft } from 'twenty-ui/display';
import { IconButton } from 'twenty-ui/input';
import { type Agent, useGetRolesQuery } from '~/generated-metadata/graphql';
import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
@@ -149,7 +149,7 @@ export const WorkflowAiAgentPermissionsTab = ({
});
if (isAgentLoading || rolesLoading) {
return <RightDrawerSkeletonLoader />;
return <SidePanelSkeletonLoader />;
}
if (!isDefined(workflowAiAgentActionAgent)) {
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx
+4 -4
View File
@@ -13,7 +13,7 @@ import { useUpdateWorkflowVersionStep } from '@/workflow/workflow-steps/hooks/us
import { WorkflowAiAgentPermissionsTab } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsTab';
import { WORKFLOW_AI_AGENT_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/WorkflowAiAgentTabListComponentId';
import { WORKFLOW_AI_AGENT_TABS } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/constants/WorkflowAiAgentTabs';
import { useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose';
import { useResetWorkflowAiAgentPermissionsStateOnSidePanelClose } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose';
import { workflowAiAgentActionAgentState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentActionAgentState';
import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsIsAddingPermissionState';
import { styled } from '@linaria/react';
@@ -33,7 +33,7 @@ import {
useUpdateOneAgentMutation,
} from '~/generated-metadata/graphql';
import { useNavigateSettings } from '~/hooks/useNavigateSettings';
import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
import { WorkflowAiAgentPromptTab } from './WorkflowAiAgentPromptTab';
import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -73,7 +73,7 @@ export const WorkflowEditActionAiAgent = ({
},
},
);
useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose();
useResetWorkflowAiAgentPermissionsStateOnSidePanelClose();
const [updateAgent] = useUpdateOneAgentMutation();
const aiModelOptions = useAiModelOptions();
const { updateWorkflowVersionStep } = useUpdateWorkflowVersionStep();
@@ -267,7 +267,7 @@ export const WorkflowEditActionAiAgent = ({
};
return agentLoading ? (
<RightDrawerSkeletonLoader />
<SidePanelSkeletonLoader />
) : (
<>
<StyledTabList
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose.ts → packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/hooks/useResetWorkflowAiAgentPermissionsStateOnSidePanelClose.ts
+2 -2
View File
@@ -1,10 +1,10 @@
import { useListenToSidePanelClosing } from '@/ui/layout/right-drawer/hooks/useListenToSidePanelClosing';
import { useListenToSidePanelClosing } from '@/ui/layout/side-panel/hooks/useListenToSidePanelClosing';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { workflowAiAgentActionAgentState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentActionAgentState';
import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsIsAddingPermissionState';
import { workflowAiAgentPermissionsSelectedObjectIdState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsSelectedObjectIdState';
export const useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose = () => {
export const useResetWorkflowAiAgentPermissionsStateOnSidePanelClose = () => {
const setWorkflowAiAgentPermissionsSelectedObjectId = useSetAtomState(
workflowAiAgentPermissionsSelectedObjectIdState,
);
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowActionCode.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { type WorkflowCodeAction } from '@/workflow/types/Workflow';
import { lazy, Suspense } from 'react';
import { RightDrawerSkeletonLoader } from '~/loading/components/RightDrawerSkeletonLoader';
import { SidePanelSkeletonLoader } from '~/loading/components/SidePanelSkeletonLoader';
type WorkflowActionCodeProps = {
action: WorkflowCodeAction;
@@ -35,7 +35,7 @@ export const WorkflowActionCode = ({
actionOptions,
}: WorkflowActionCodeProps) => {
return (
<Suspense fallback={<RightDrawerSkeletonLoader />}>
<Suspense fallback={<SidePanelSkeletonLoader />}>
{actionOptions.readonly ? (
<WorkflowReadonlyActionCode action={action} />
) : (
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionEmailBase.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import { type ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { getMissingDraftEmailScopes } from '@/accounts/utils/hasMissingDraftEmailScopes';
import { WorkflowSendEmailAttachments } from '@/advanced-text-editor/components/WorkflowSendEmailAttachments';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { FormAdvancedTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput';
import { FormMultiTextFieldInput } from '@/object-record/record-field/ui/form-types/components/FormMultiTextFieldInput';
@@ -185,7 +185,7 @@ export const WorkflowEditActionEmailBase = ({
const navigate = useNavigateSettings();
const { closeCommandMenu } = useCommandMenu();
const { closeSidePanelMenu } = useSidePanelMenu();
useEffect(() => {
return () => {
@@ -206,7 +206,7 @@ export const WorkflowEditActionEmailBase = ({
options={connectedAccountOptions}
callToActionButton={{
onClick: () => {
closeCommandMenu();
closeSidePanelMenu();
navigate(SettingsPath.NewAccount);
},
Icon: IconPlus,
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionEmpty.tsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { CommandMenuWorkflowSelectAction } from '@/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectAction';
import { CommandMenuWorkflowEditStepType } from '@/command-menu/pages/workflow/step/edit/components/CommandMenuWorkflowEditStepType';
import { SidePanelWorkflowSelectAction } from '@/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction';
import { SidePanelWorkflowEditStepType } from '@/side-panel/pages/workflow/step/edit/components/SidePanelWorkflowEditStepType';
import { type WorkflowEmptyAction } from '@/workflow/types/Workflow';
type WorkflowEditActionEmptyProps = {
@@ -17,8 +17,8 @@ export const WorkflowEditActionEmpty = ({
actionOptions,
}: WorkflowEditActionEmptyProps) => {
if (actionOptions.readonly === true) {
return <CommandMenuWorkflowSelectAction onActionSelected={() => {}} />;
return <SidePanelWorkflowSelectAction onActionSelected={() => {}} />;
}
return <CommandMenuWorkflowEditStepType />;
return <SidePanelWorkflowEditStepType />;
};
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsFilters.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { AdvancedFilterCommandMenuContainer } from '@/object-record/advanced-filter/command-menu/components/AdvancedFilterCommandMenuContainer';
import { AdvancedFilterSidePanelContainer } from '@/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelContainer';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
@@ -44,7 +44,7 @@ export const WorkflowFindRecordsFilters = ({
}, [currentRecordFilterGroups, currentRecordFilters, onChange, store]);
return (
<AdvancedFilterCommandMenuContainer
<AdvancedFilterSidePanelContainer
objectMetadataItem={objectMetadataItem}
onUpdate={readonly ? undefined : onUpdate}
VariablePicker={WorkflowVariablePicker}
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFiller.tsx
+5 -5
View File
@@ -1,9 +1,9 @@
import { CmdEnterActionButton } from '@/action-menu/components/CmdEnterActionButton';
import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
import { useSidePanelHistory } from '@/side-panel/hooks/useSidePanelHistory';
import { FormFieldInput } from '@/object-record/record-field/ui/components/FormFieldInput';
import { FormSingleRecordPicker } from '@/object-record/record-field/ui/form-types/components/FormSingleRecordPicker';
import { type FieldMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
import { RightDrawerFooter } from '@/ui/layout/right-drawer/components/RightDrawerFooter';
import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';
import { useWorkflowRunIdOrThrow } from '@/workflow/hooks/useWorkflowRunIdOrThrow';
import { type WorkflowFormAction } from '@/workflow/types/Workflow';
import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
@@ -34,7 +34,7 @@ export const WorkflowEditActionFormFiller = ({
const { submitFormStep } = useSubmitFormStep();
const [formData, setFormData] = useState<FormData>(action.settings.input);
const workflowRunId = useWorkflowRunIdOrThrow();
const { goBackFromCommandMenu } = useCommandMenuHistory();
const { goBackFromSidePanel } = useSidePanelHistory();
const { updateWorkflowRunStep } = useUpdateWorkflowRunStep();
const [error, setError] = useState<string | undefined>(undefined);
@@ -89,7 +89,7 @@ export const WorkflowEditActionFormFiller = ({
response,
});
goBackFromCommandMenu();
goBackFromSidePanel();
};
useEffect(() => {
@@ -181,7 +181,7 @@ export const WorkflowEditActionFormFiller = ({
})}
</WorkflowStepBody>
{!actionOptions.readonly && (
<RightDrawerFooter
<SidePanelFooter
actions={[
<CmdEnterActionButton
title={t`Submit`}
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/command-menu/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
import { workflowRunIteratorSubStepIterationIndexComponentState } from '@/side-panel/pages/workflow/step/view-run/states/workflowRunIteratorSubStepIterationIndexComponentState';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
packages/twenty-front/src/modules/workflow/workflow-variables/hooks/useVariableDropdown.ts
+7 -7
View File
@@ -1,5 +1,5 @@
import { useWorkflowCommandMenu } from '@/command-menu/hooks/useWorkflowCommandMenu';
import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
import { useSidePanelWorkflowNavigation } from '@/side-panel/pages/workflow/hooks/useSidePanelWorkflowNavigation';
import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
@@ -46,7 +46,7 @@ export const useVariableDropdown = ({
const [currentPath, setCurrentPath] = useState<string[]>([]);
const [searchInputValue, setSearchInputValue] = useState('');
const { openWorkflowEditStepInCommandMenu } = useWorkflowCommandMenu();
const { openWorkflowEditStepInSidePanel } = useSidePanelWorkflowNavigation();
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
workflowVisualizerWorkflowIdComponentState,
@@ -62,8 +62,8 @@ export const useVariableDropdown = ({
const setWorkflowDiagram = useSetAtomComponentState(
workflowDiagramComponentState,
);
const setCommandMenuNavigationStack = useSetAtomState(
commandMenuNavigationStackState,
const setSidePanelNavigationStack = useSetAtomState(
sidePanelNavigationStackState,
);
const getDisplayedSubStepFields = () => {
@@ -122,9 +122,9 @@ export const useVariableDropdown = ({
};
});
setCommandMenuNavigationStack([]);
setSidePanelNavigationStack([]);
openWorkflowEditStepInCommandMenu(
openWorkflowEditStepInSidePanel(
workflowVisualizerWorkflowId,
step.name,
getIcon(step.icon),