Skip to content

Allow escape and ctrl+U to clear the interactive window #10513

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rchiodo merged 4 commits into from
Mar 10, 2020
Merged

Allow escape and ctrl+U to clear the interactive window #10513

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
84a02e1
Support escaping code in the input box
rchiodo Mar 10, 2020
8962fce
Make sure shift+tab doesn't go to another window
rchiodo Mar 10, 2020
221b821
Add test for escape/ctrl+u
rchiodo Mar 10, 2020
a60617b
Actual correct news entry
rchiodo Mar 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions news/1 Enhancements/10198.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Support using 'esc' or 'ctrl+u' to clear the contents of the interactive window input box.
16 changes: 13 additions & 3 deletions src/datascience-ui/history-react/interactiveCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,12 +349,20 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
};

private onEditCellKeyDown = (_cellId: string, e: IKeyboardEvent) => {
if (e.code === 'Escape') {
this.editCellEscape(e);
if (e.code === 'Tab' && e.shiftKey) {
this.editCellShiftTab(e);
} else if (e.code === 'Enter' && e.shiftKey) {
this.editCellSubmit(e);
} else if (e.code === 'NumpadEnter' && e.shiftKey) {
this.editCellSubmit(e);
} else if (e.code === 'KeyU' && e.ctrlKey && e.editorInfo && !e.editorInfo.isSuggesting) {
e.editorInfo.clear();
e.stopPropagation();
e.preventDefault();
} else if (e.code === 'Escape' && e.editorInfo && !e.editorInfo.isSuggesting) {
e.editorInfo.clear();
e.stopPropagation();
e.preventDefault();
}
};

Expand Down Expand Up @@ -395,11 +403,13 @@ export class InteractiveCell extends React.Component<IInteractiveCellProps> {
}
}

private editCellEscape = (e: IKeyboardEvent) => {
private editCellShiftTab = (e: IKeyboardEvent) => {
const focusedElement = document.activeElement;
if (focusedElement !== null && e.editorInfo && !e.editorInfo.isSuggesting) {
const nextTabStop = this.findTabStop(1, focusedElement);
if (nextTabStop) {
e.stopPropagation();
e.preventDefault();
nextTabStop.focus();
}
}
Expand Down
41 changes: 41 additions & 0 deletions src/test/datascience/interactiveWindow.functional.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import * as path from 'path';
import * as TypeMoq from 'typemoq';
import { Disposable, Selection, TextDocument, TextEditor, Uri } from 'vscode';

import { ReactWrapper } from 'enzyme';
import { IApplicationShell, IDocumentManager } from '../../client/common/application/types';
import { IDataScienceSettings } from '../../client/common/types';
import { createDeferred, waitForPromise } from '../../client/common/utils/async';
Expand All @@ -19,7 +20,9 @@ import { InteractiveWindowMessages } from '../../client/datascience/interactive-
import { InteractiveWindow } from '../../client/datascience/interactive-window/interactiveWindow';
import { concatMultilineStringInput } from '../../datascience-ui/common';
import { InteractivePanel } from '../../datascience-ui/history-react/interactivePanel';
import { IKeyboardEvent } from '../../datascience-ui/react-common/event';
import { ImageButton } from '../../datascience-ui/react-common/imageButton';
import { MonacoEditor } from '../../datascience-ui/react-common/monacoEditor';
import { DataScienceIocContainer } from './dataScienceIocContainer';
import { createDocument } from './editor-integration/helpers';
import { defaultDataScienceSettings } from './helpers';
Expand All @@ -38,6 +41,7 @@ import {
addMockData,
CellInputState,
CellPosition,
enterEditorKey,
enterInput,
escapePath,
findButton,
Expand Down Expand Up @@ -87,6 +91,13 @@ suite('DataScience Interactive Window output tests', () => {
return update;
}

function simulateKeyPressOnEditor(
editorControl: ReactWrapper<any, Readonly<{}>, React.Component> | undefined,
keyboardEvent: Partial<IKeyboardEvent> & { code: string }
) {
enterEditorKey(editorControl, keyboardEvent);
}

// Uncomment this to debug hangs on exit
// suiteTeardown(() => {
// asyncDump();
Expand Down Expand Up @@ -217,6 +228,36 @@ for i in range(10):
}
);

runMountedTest(
'Escape/Ctrl+U',
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');

// Check code is what we think it is
const reactEditor = editor.instance() as MonacoEditor;
assert.equal(reactEditor.state.model?.getValue().replace(/\r/g, ''), 'a=1\na');

// Send escape
simulateKeyPressOnEditor(editor, { code: 'Escape' });
assert.equal(reactEditor.state.model?.getValue().replace(/\r/g, ''), '');

typeCode(editor, 'a=1\na');
assert.equal(reactEditor.state.model?.getValue().replace(/\r/g, ''), 'a=1\na');

simulateKeyPressOnEditor(editor, { code: 'KeyU', ctrlKey: true });
assert.equal(reactEditor.state.model?.getValue().replace(/\r/g, ''), '');
},
() => {
return ioc;
}
);

runMountedTest(
'Click outside cells sets focus to input box',
async wrapper => {
Expand Down