fix(vscode): Accessibility - Add specific key combo to search nodes i…

…n designer for vscode (#6204) * Add combo keys for designer in vscode * Add isVscode to designer provide in vscode side * Update tests
Azure · Dec 2, 2024 · becf7d8 · becf7d8
1 parent 2f8066b
commit becf7d8
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<AppDispatch>();
   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 = {