Make python interactive prompt up/down behave like terminal window (microsoft#4126)

Author: rchiodo

news/2 Fixes/4092.md

@@ -0,0 +1 @@
+Fix python interactive window up/down arrows in the input prompt to behave like a terminal.

src/client/datascience/history.ts

@@ -512,7 +512,7 @@ export class History implements IWebPanelMessageListener, IHistory {
  await this.jupyterServer.shutdown();
  }
  }
- this.loadPromise = this.loadJupyterServer(true);
+ this.loadPromise = this.load();
  }
 
  @captureTelemetry(Telemetry.GotoSourceCode, undefined, false)
@@ -783,19 +783,20 @@ export class History implements IWebPanelMessageListener, IHistory {
 
  private loadWebPanel = async (): Promise<void> => {
  // Create our web panel (it's the UI that shows up for the history)
+ if (this.webPanel === undefined) {
+ // Figure out the name of our main bundle. Should be in our output directory
+ const mainScriptPath = path.join(EXTENSION_ROOT_DIR, 'out', 'datascience-ui', 'history-react', 'index_bundle.js');
 
- // Figure out the name of our main bundle. Should be in our output directory
- const mainScriptPath = path.join(EXTENSION_ROOT_DIR, 'out', 'datascience-ui', 'history-react', 'index_bundle.js');
-
- // Generate a css to put into the webpanel for viewing code
- const css = await this.cssGenerator.generateThemeCss();
+ // Generate a css to put into the webpanel for viewing code
+ const css = await this.cssGenerator.generateThemeCss();
 
- // Get our settings to pass along to the react control
- const settings = this.generateDataScienceExtraSettings();
+  // Get our settings to pass along to the react control
+  const settings = this.generateDataScienceExtraSettings();
 
- // Use this script to create our web view panel. It should contain all of the necessary
- // script to communicate with this class.
- this.webPanel = this.provider.create(this, localize.DataScience.historyTitle(), mainScriptPath, css, settings);
+ // Use this script to create our web view panel. It should contain all of the necessary
+ // script to communicate with this class.
+ this.webPanel = this.provider.create(this, localize.DataScience.historyTitle(), mainScriptPath, css, settings);
+ }
  }
 
  private load = async (): Promise<void> => {

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

@@ -17,6 +17,7 @@ import { getSettings, updateSettings } from '../react-common/settingsReactSide';
 import { Cell, ICellViewModel } from './cell';
 import { CellButton } from './cellButton';
 import { Image, ImageName } from './image';
+import { InputHistory } from './inputHistory';
 import { createCellVM, createEditableCellVM, generateTestState, IMainPanelState } from './mainPanelState';
 import { MenuBar } from './menuBar';
 
@@ -29,15 +30,14 @@ export interface IMainPanelProps {
 
 export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState> implements IMessageHandler {
  private stackLimit = 10;
-
  private bottom: HTMLDivElement | undefined;
 
  // tslint:disable-next-line:max-func-body-length
  constructor(props: IMainPanelProps, state: IMainPanelState) {
  super(props);
 
  // Default state should show a busy message
- this.state = { cellVMs: [], busy: true, undoStack: [], redoStack : [], historyStack: [], submittedText: false};
+ this.state = { cellVMs: [], busy: true, undoStack: [], redoStack : [], submittedText: false, history: new InputHistory()};
 
  // Add test state if necessary
  if (!this.props.skipDefault) {
@@ -205,7 +205,7 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
  return this.state.cellVMs.map((cellVM: ICellViewModel, index: number) =>
  <ErrorBoundary key={index}>
  <Cell
- history={cellVM.editable ? this.state.historyStack : []}
+ history={cellVM.editable ? this.state.history : undefined}
  maxTextSize={maxTextSize}
  autoFocus={document.hasFocus()}
  testMode={this.props.testMode}
@@ -628,17 +628,13 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
  // hide all inputs turned on.
  editCell.directInput = true;
 
- // Compute our new history (skip adding dupes)
- const newHistory = this.state.historyStack.indexOf(code) >= 0 ? this.state.historyStack : [code, ...this.state.historyStack];
-
  // Stick in a new cell at the bottom that's editable and update our state
  // so that the last cell becomes busy
  this.setState({
  cellVMs: [...withoutEdits, editCell, createEditableCellVM(this.getInputExecutionCount(withoutEdits))],
  undoStack : this.pushStack(this.state.undoStack, this.state.cellVMs),
  redoStack: this.state.redoStack,
  skipNextScroll: false,
- historyStack: newHistory,
  submittedText: true
  });
 

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

@@ -23,6 +23,7 @@ import { CollapseButton } from './collapseButton';
 import { CommandPrompt } from './commandPrompt';
 import { ExecutionCount } from './executionCount';
 import { Image, ImageName } from './image';
+import { InputHistory } from './inputHistory';
 import { MenuBar } from './menuBar';
 import { SysInfo } from './sysInfo';
 import { displayOrder, richestMimetype, transforms } from './transforms';
@@ -34,7 +35,7 @@ interface ICellProps {
  testMode?: boolean;
  autoFocus: boolean;
  maxTextSize?: number;
- history: string [];
+ history: InputHistory | undefined;
  showWatermark: boolean;
  gotoCode(): void;
  delete(): void;