diff --git a/apps/vs-code-react/src/app/designer/app.tsx b/apps/vs-code-react/src/app/designer/app.tsx index 11fae59a4ba..3a440fccfee 100644 --- a/apps/vs-code-react/src/app/designer/app.tsx +++ b/apps/vs-code-react/src/app/designer/app.tsx @@ -180,6 +180,7 @@ export const DesignerApp = () => { locale="en-US" options={{ isDarkMode: theme === Theme.Dark, + isVSCode: true, readOnly, isMonitoringView, services: services, diff --git a/libs/designer/src/lib/core/state/__test__/designerOptionsSlice.spec.ts b/libs/designer/src/lib/core/state/__test__/designerOptionsSlice.spec.ts index 32ea9ad0ded..063c2f68351 100644 --- a/libs/designer/src/lib/core/state/__test__/designerOptionsSlice.spec.ts +++ b/libs/designer/src/lib/core/state/__test__/designerOptionsSlice.spec.ts @@ -21,5 +21,6 @@ describe('designer options slice reducers', () => { expect(state.readOnly).toEqual(true); expect(state.hostOptions.maxStateHistorySize).toEqual(5); + expect(state.isVSCode).toEqual(false); }); }); diff --git a/libs/designer/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts b/libs/designer/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts index 61fdfa1ae27..cd62c05f20c 100644 --- a/libs/designer/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts +++ b/libs/designer/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts @@ -32,6 +32,7 @@ export interface DesignerOptionsState { readOnly?: boolean; isMonitoringView?: boolean; isDarkMode?: boolean; + isVSCode?: boolean; servicesInitialized?: boolean; designerOptionsInitialized?: boolean; useLegacyWorkflowParameters?: boolean; diff --git a/libs/designer/src/lib/core/state/designerOptions/designerOptionsSelectors.ts b/libs/designer/src/lib/core/state/designerOptions/designerOptionsSelectors.ts index cbbb0080af8..958b408474a 100644 --- a/libs/designer/src/lib/core/state/designerOptions/designerOptionsSelectors.ts +++ b/libs/designer/src/lib/core/state/designerOptions/designerOptionsSelectors.ts @@ -24,6 +24,10 @@ export const useIsDarkMode = () => { return useSelector((state: RootState) => state.designerOptions.isDarkMode); }; +export const useIsVSCode = () => { + return useSelector((state: RootState) => state.designerOptions.isVSCode); +}; + export const useSuppressDefaultNodeSelectFunctionality = () => { return useSelector((state: RootState) => state.designerOptions.suppressDefaultNodeSelectFunctionality); }; diff --git a/libs/designer/src/lib/core/state/designerOptions/designerOptionsSlice.ts b/libs/designer/src/lib/core/state/designerOptions/designerOptionsSlice.ts index e1239cbd579..05a1c46036c 100644 --- a/libs/designer/src/lib/core/state/designerOptions/designerOptionsSlice.ts +++ b/libs/designer/src/lib/core/state/designerOptions/designerOptionsSlice.ts @@ -34,6 +34,7 @@ export const initialDesignerOptionsState: DesignerOptionsState = { readOnly: false, isMonitoringView: false, isDarkMode: false, + isVSCode: false, servicesInitialized: false, designerOptionsInitialized: false, useLegacyWorkflowParameters: false, @@ -164,6 +165,7 @@ export const designerOptionsSlice = createSlice({ }; state.showPerformanceDebug = action.payload.showPerformanceDebug; state.designerOptionsInitialized = true; + state.isVSCode = action.payload.isVSCode ?? false; }, }, extraReducers: (builder) => { diff --git a/libs/designer/src/lib/ui/Designer.tsx b/libs/designer/src/lib/ui/Designer.tsx index b7c0fecd59d..6e00ddcea06 100644 --- a/libs/designer/src/lib/ui/Designer.tsx +++ b/libs/designer/src/lib/ui/Designer.tsx @@ -1,7 +1,7 @@ import { openPanel, useNodesInitialized } from '../core'; import { useLayout } from '../core/graphlayout'; import { usePreloadOperationsQuery, usePreloadConnectorsQuery } from '../core/queries/browse'; -import { useMonitoringView, useReadOnly, useHostOptions } from '../core/state/designerOptions/designerOptionsSelectors'; +import { useMonitoringView, useReadOnly, useHostOptions, useIsVSCode } from '../core/state/designerOptions/designerOptionsSelectors'; import { useClampPan } from '../core/state/designerView/designerViewSelectors'; import { clearPanel } from '../core/state/panel/panelSlice'; import { useIsGraphEmpty } from '../core/state/workflow/workflowSelectors'; @@ -78,6 +78,7 @@ export const Designer = (props: DesignerProps) => { const [nodes, edges, flowSize] = useLayout(); const isEmpty = useIsGraphEmpty(); + const isVSCode = useIsVSCode(); const isReadOnly = useReadOnly(); const dispatch = useDispatch(); const onNodesChange = useCallback( @@ -135,7 +136,12 @@ export const Designer = (props: DesignerProps) => { useHotkeys(['meta+shift+p', 'ctrl+shift+p'], (event) => { event.preventDefault(); dispatch(openPanel({ panelMode: 'NodeSearch' })); - }); + },{enabled: !isVSCode}); + + useHotkeys(['meta+alt+p', 'ctrl+alt+p', 'meta+option+p', 'ctrl+option+p'], (event) => { + event.preventDefault(); + dispatch(openPanel({ panelMode: 'NodeSearch' })); + }, {enabled: isVSCode}); const isMonitoringView = useMonitoringView(); const DND_OPTIONS: any = {