Davidkutu/ds interactive window focus fix (#9895)

* Fixed the focus on the interactive window
when pressing ctrl +2

* the new prop 'focusPending' needs to change in
order to give focus

* added functional test

* In test: force focus to buttons to take it away from

* finished the functional test

* updated changelog

* deleted bug#.md

Author: David Kutugata

CHANGELOG.md

@@ -47,6 +47,8 @@
 
 ### Fixes
 
+1. Fixed the focus on the interactive window when pressing ctrl + 1/ ctrl + 2
+   ([#9693](https://github.com/microsoft/vscode-python/issues/9693))
 1. Fix variable explorer in Interactive and Notebook editors from interfering with execution.
    ([#5980](https://github.com/Microsoft/vscode-python/issues/5980))
 1. Fix a crash when using pytest to discover doctests with unknown line number.

src/datascience-ui/history-react/interactiveCell.tsx

@@ -40,6 +40,7 @@ interface IInteractiveCellBaseProps {
     editorMeasureClassName?: string;
     font: IFont;
     settings: IDataScienceExtraSettings;
+    focusPending: number;
 }
 
 type IInteractiveCellProps = IInteractiveCellBaseProps & typeof actionCreators;
@@ -266,6 +267,7 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
                     keyDown={this.isEditCell() ? this.onEditCellKeyDown : undefined}
                     showLineNumbers={this.props.cellVM.showLineNumbers}
                     font={this.props.font}
+                    focusPending={this.props.focusPending}
                 />
             );
         }

src/datascience-ui/history-react/interactivePanel.tsx

@@ -216,6 +216,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps> {
                         monacoTheme={this.props.monacoTheme}
                         font={this.props.font}
                         settings={this.props.settings}
+                        focusPending={this.props.activateCount}
                     />
                 </ErrorBoundary>
             </div>
@@ -279,6 +280,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps> {
                             monacoTheme={this.props.monacoTheme}
                             font={this.props.font}
                             settings={this.props.settings}
+                            focusPending={this.props.activateCount}
                         />
                     </ErrorBoundary>
                 </div>

src/datascience-ui/interactive-common/cellInput.tsx

@@ -26,6 +26,7 @@ interface ICellInputProps {
     editorMeasureClassName?: string;
     showLineNumbers?: boolean;
     font: IFont;
+    focusPending: number;
     onCodeChange(changes: monacoEditor.editor.IModelContentChange[], cellId: string, modelId: string): void;
     onCodeCreated(code: string, file: string, cellId: string, modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -110,6 +111,7 @@ export class CellInput extends React.Component<ICellInputProps> {
                         showLineNumbers={this.props.showLineNumbers}
                         useQuickEdit={this.props.cellVM.useQuickEdit}
                         font={this.props.font}
+                        focusPending={this.props.focusPending}
                     />
                 </div>
             );

src/datascience-ui/interactive-common/code.tsx

@@ -26,6 +26,7 @@ export interface ICodeProps {
     font: IFont;
     hasFocus: boolean;
     cursorPos: CursorPos;
+    focusPending: number;
     onCreated(code: string, modelId: string): void;
     onChange(changes: monacoEditor.editor.IModelContentChange[], modelId: string): void;
     openLink(uri: monacoEditor.Uri): void;
@@ -46,6 +47,12 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
         this.state = { allowWatermark: true };
     }
 
+    public componentDidUpdate(prevProps: ICodeProps) {
+        if (prevProps.focusPending !== this.props.focusPending) {
+            this.giveFocus(CursorPos.Current);
+        }
+    }
+
     public render() {
         const readOnly = this.props.readOnly;
         const waterMarkClass = this.props.showWatermark && this.state.allowWatermark && !readOnly ? 'code-watermark' : 'hide';

src/datascience-ui/native-editor/nativeCell.tsx

@@ -42,6 +42,7 @@ interface INativeCellBaseProps {
     enableGather: boolean | undefined;
     editorOptions: monacoEditor.editor.IEditorOptions;
     themeMatplotlibPlots: boolean | undefined;
+    focusPending: number;
 }
 
 type INativeCellProps = INativeCellBaseProps & typeof actionCreators;
@@ -597,6 +598,7 @@ export class NativeCell extends React.Component<INativeCellProps> {
                         keyDown={this.keyDownInput}
                         showLineNumbers={this.props.cellVM.showLineNumbers}
                         font={this.props.font}
+                        focusPending={this.props.focusPending}
                     />
                 </div>
             );

src/datascience-ui/native-editor/nativeEditor.tsx

@@ -396,6 +396,7 @@ export class NativeEditor extends React.Component<INativeEditorProps> {
                         editorOptions={this.props.editorOptions}
                         enableGather={this.props.settings.enableGather}
                         themeMatplotlibPlots={this.props.settings.themeMatplotlibPlots}
+                        focusPending={this.props.activateCount}
                     />
                 </ErrorBoundary>
                 {lastLine}

src/test/datascience/dataScienceIocContainer.ts

@@ -898,17 +898,7 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
         }
     }
 
-    private findPythonPath(): string {
-        try {
-            // Give preference to the CI test python (could also be set in launch.json for debugging).
-            const output = child_process.execFileSync(process.env.CI_PYTHON_PATH || 'python', ['-c', 'import sys;print(sys.executable)'], { encoding: 'utf8' });
-            return output.replace(/\r?\n/g, '');
-        } catch (ex) {
-            return 'python';
-        }
-    }
-
-    private postMessageToWebPanel(msg: any) {
+    public postMessageToWebPanel(msg: any) {
         if (this.webPanelListener) {
             this.webPanelListener.onMessage(msg.type, msg.payload);
         } else {
@@ -923,6 +913,16 @@ export class DataScienceIocContainer extends UnitTestIocContainer {
         }
     }
 
+    private findPythonPath(): string {
+        try {
+            // Give preference to the CI test python (could also be set in launch.json for debugging).
+            const output = child_process.execFileSync(process.env.CI_PYTHON_PATH || 'python', ['-c', 'import sys;print(sys.executable)'], { encoding: 'utf8' });
+            return output.replace(/\r?\n/g, '');
+        } catch (ex) {
+            return 'python';
+        }
+    }
+
     private mountReactControl(mount: () => ReactWrapper<any, Readonly<{}>, React.Component>) {
         // This is a remount (or first time). Clear out messages that were sent
         // by the last mount

src/test/datascience/interactiveWindow.functional.test.tsx

@@ -26,7 +26,7 @@ import { defaultDataScienceSettings } from './helpers';
 import { addCode, getInteractiveCellResults, getOrCreateInteractiveWindow, runMountedTest } from './interactiveWindowTestHelpers';
 import { MockDocumentManager } from './mockDocumentManager';
 import { MockEditor } from './mockTextEditor';
-import { waitForUpdate } from './reactHelpers';
+import { createMessageEvent, waitForUpdate } from './reactHelpers';
 import {
     addContinuousMockData,
     addInputMockData,
@@ -36,9 +36,12 @@ import {
     enterInput,
     escapePath,
     findButton,
+    getInteractiveEditor,
     getLastOutputCell,
     srcDirectory,
+    submitInput,
     toggleCellExpansion,
+    typeCode,
     verifyHtmlOnCell,
     verifyLastCellInputState,
     waitForMessage,
@@ -143,6 +146,47 @@ suite('DataScience Interactive Window output tests', () => {
         }
     );
 
+    runMountedTest(
+        'Ctrl + 1/Ctrl + 2',
+        async wrapper => {
+            // Create an interactive window so that it listens to the results.
+            const interactiveWindow = await getOrCreateInteractiveWindow(ioc);
+            await interactiveWindow.show();
+
+            // Type in the input box
+            const editor = getInteractiveEditor(wrapper);
+            typeCode(editor, 'a=1\na');
+
+            // Give focus to a random div
+            const reactDiv = wrapper
+                .find('div')
+                .first()
+                .getDOMNode();
+
+            const domDiv = reactDiv.querySelector('div');
+
+            if (domDiv && ioc.postMessage) {
+                domDiv.tabIndex = -1;
+                domDiv.focus();
+
+                // send the ctrl + 1/2 message, this should put focus back on the input box
+                const message = createMessageEvent({ type: InteractiveWindowMessages.Activate, payload: undefined });
+                ioc.postMessage(message);
+
+                // Then enter press shift + enter on the active element
+                const activeElement = document.activeElement;
+                if (activeElement) {
+                    await submitInput(ioc, activeElement as HTMLTextAreaElement);
+                }
+            }
+
+            verifyHtmlOnCell(wrapper, 'InteractiveCell', '<span>1</span>', CellPosition.Last);
+        },
+        () => {
+            return ioc;
+        }
+    );
+
     runMountedTest(
         'Collapse / expand cell',
         async wrapper => {

src/test/datascience/testHelpers.tsx

@@ -471,7 +471,7 @@ export function simulateKey(domNode: HTMLTextAreaElement, key: string, shiftDown
     }
 }
 
-async function submitInput(ioc: DataScienceIocContainer, textArea: HTMLTextAreaElement): Promise<void> {
+export async function submitInput(ioc: DataScienceIocContainer, textArea: HTMLTextAreaElement): Promise<void> {
     // Get a render promise with the expected number of renders (how many updates a the shift + enter will cause)
     // Should be 6 - 1 for the shift+enter and 5 for the new cell.
     const renderPromise = waitForMessage(ioc, InteractiveWindowMessages.ExecutionRendered);