Switch notebook editors to monaco (#239)

* Upgrade nteract packages and related dependencies to make new stateful-component work

* Switch to new monacoEditor

* Configure store using nteract mythic configuration

* Replace CodeMirror with Monaco editor in NotebookReadOnlyRenderer

* Reformat

* Upgrade d3 to latest to resolve d3-selection conflicts with nteract/data-explorer that broke D3ForceGraph

* Upgrade jupyterlab terminal widget to work with latest version of react. Upgrade jupyterlab services to include latest fix for websocket auth

* Update jest test snapshots

* Upgrade packages to fix build issues

* Remove comment

* Fix unit tests

* Fix unit test snapshot

* Remove useless @types/node-fetch

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -196,7 +196,6 @@ export class NotebookComponentBootstrapper {
     this.getStore().dispatch(
       actions.createCellBelow({
         cellType: "code",
-        source: "",
         contentRef: this.contentRef
       })
     );

src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx

@@ -1,6 +1,6 @@
 import { StringUtils } from "../../../../../Utils/StringUtils";
 import { actions, AppState, ContentRef, selectors } from "@nteract/core";
-import { MonacoEditorProps } from "@nteract/monaco-editor";
+import { IMonacoProps as MonacoEditorProps } from "@nteract/monaco-editor";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
@@ -21,7 +21,7 @@ interface MappedStateProps {
   mimetype: string;
   text: string;
   contentRef: ContentRef;
-  theme: string; // "light" | "dark";
+  theme?: "light" | "dark";
 }
 
 interface MappedDispatchProps {
@@ -65,8 +65,10 @@ export class TextFile extends React.PureComponent<TextFileProps, TextFileState>
     return (
       <EditorContainer className="nteract-editor" style={{ position: "static" }}>
         <Editor
+          id={"no-cell-id-for-single-editor"}
+          contentRef={this.props.contentRef}
           theme={this.props.theme === "dark" ? "vs-dark" : "vs"}
-          mode={this.props.mimetype}
+          language={"plaintext"}
           editorFocused
           value={this.props.text}
           onChange={this.handleChange.bind(this)}
@@ -97,8 +99,7 @@ function makeMapStateToTextFileProps(
     return {
       contentRef,
       mimetype: content.mimetype != null ? content.mimetype : "text/plain",
-      text,
-      theme: selectors.currentTheme(state)
+      text
     };
   };
   return mapStateToTextFileProps;

src/Explorer/Notebook/NotebookComponent/contents/index.tsx

@@ -153,7 +153,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: ContentsProps): object
       },
       COPY_CELL: () => dispatch(actions.copyCell({ contentRef })),
       CREATE_CELL_ABOVE: () => dispatch(actions.createCellAbove({ cellType: "code", contentRef })),
-      CREATE_CELL_BELOW: () => dispatch(actions.createCellBelow({ cellType: "code", source: "", contentRef })),
+      CREATE_CELL_BELOW: () => dispatch(actions.createCellBelow({ cellType: "code", contentRef })),
       CUT_CELL: () => dispatch(actions.cutCell({ contentRef })),
       DELETE_CELL: () => dispatch(actions.deleteCell({ contentRef })),
       EXECUTE_ALL_CELLS: () => dispatch(actions.executeAllCells({ contentRef })),

src/Explorer/Notebook/NotebookComponent/epics.test.ts

@@ -1,6 +1,6 @@
 import * as Immutable from "immutable";
-import { ActionsObservable, StateObservable } from "redux-observable";
-import { Subject, empty } from "rxjs";
+import { StateObservable } from "redux-observable";
+import { Subject, of } from "rxjs";
 import { toArray } from "rxjs/operators";
 import { makeNotebookRecord } from "@nteract/commutable";
 import { actions, state } from "@nteract/core";
@@ -124,7 +124,7 @@ describe("launchWebSocketKernelEpic", () => {
     const kernelSpecName = "kernelspecname";
     const sessionId = "sessionId";
 
-    const action$ = ActionsObservable.of(
+    const action$ = of(
       actions.launchKernelByName({
         contentRef,
         kernelRef,
@@ -192,7 +192,7 @@ describe("launchWebSocketKernelEpic", () => {
     const kernelSpecName = "kernelspecname";
     const sessionId = "sessionId";
 
-    const action$ = ActionsObservable.of(
+    const action$ = of(
       actions.launchKernelByName({
         contentRef,
         kernelRef,
@@ -247,7 +247,7 @@ describe("launchWebSocketKernelEpic", () => {
     const kernelSpecName = "kernelspecname";
     const sessionId = "sessionId";
 
-    const action$ = ActionsObservable.of(
+    const action$ = of(
       actions.launchKernelByName({
         contentRef,
         kernelRef,
@@ -298,7 +298,7 @@ describe("launchWebSocketKernelEpic", () => {
     const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
     const cwd = "/";
-    const action$ = ActionsObservable.of(
+    const action$ = of(
       actions.launchKernelByName({
         contentRef,
         kernelRef,
@@ -398,7 +398,7 @@ describe("launchWebSocketKernelEpic", () => {
     it("launches supported kernel in kernelspecs", async () => {
       const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
-      const action$ = ActionsObservable.of(
+      const action$ = of(
         actions.launchKernelByName({
           contentRef,
           kernelRef,
@@ -421,7 +421,7 @@ describe("launchWebSocketKernelEpic", () => {
     it("launches undefined kernel uses default kernel from kernelspecs", async () => {
       const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
-      const action$ = ActionsObservable.of(
+      const action$ = of(
         actions.launchKernelByName({
           contentRef,
           kernelRef,
@@ -445,7 +445,7 @@ describe("launchWebSocketKernelEpic", () => {
     it("launches unsupported kernel uses default kernel from kernelspecs", async () => {
       const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
-      const action$ = ActionsObservable.of(
+      const action$ = of(
         actions.launchKernelByName({
           contentRef,
           kernelRef,
@@ -469,7 +469,7 @@ describe("launchWebSocketKernelEpic", () => {
     it("launches unsupported kernel uses kernelspecs with similar name", async () => {
       const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
-      const action$ = ActionsObservable.of(
+      const action$ = of(
         actions.launchKernelByName({
           contentRef,
           kernelRef,
@@ -499,7 +499,7 @@ describe("autoStartKernelEpic", () => {
   it("automatically starts kernel when content fetch is successful if kernelRef is defined", async () => {
     const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
-    const action$ = ActionsObservable.of(
+    const action$ = of(
       actions.fetchContentFulfilled({
         contentRef,
         kernelRef,
@@ -527,7 +527,7 @@ describe("autoStartKernelEpic", () => {
   it("Don't start kernel when content fetch is successful if kernelRef is not defined", async () => {
     const state$ = new StateObservable(new Subject<CdbAppState>(), initialState);
 
-    const action$ = ActionsObservable.of(
+    const action$ = of(
       actions.fetchContentFulfilled({
         contentRef,
         kernelRef: undefined,

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -1,6 +1,6 @@
 import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer } from "rxjs";
 import { webSocket } from "rxjs/webSocket";
-import { ActionsObservable, StateObservable } from "redux-observable";
+import { StateObservable } from "redux-observable";
 import { ofType } from "redux-observable";
 import {
   mergeMap,
@@ -65,7 +65,7 @@ const logToTelemetry = (state: CdbAppState, title: string, error?: string) => {
  * @param state$
  */
 const addInitialCodeCellEpic = (
-  action$: ActionsObservable<actions.FetchContentFulfilled>,
+  action$: Observable<actions.FetchContentFulfilled>,
   state$: StateObservable<AppState>
 ): Observable<{} | actions.CreateCellBelow> => {
   return action$.pipe(
@@ -104,7 +104,7 @@ const addInitialCodeCellEpic = (
  * @param state$
  */
 export const autoStartKernelEpic = (
-  action$: ActionsObservable<actions.FetchContentFulfilled>,
+  action$: Observable<actions.FetchContentFulfilled>,
   state$: StateObservable<AppState>
 ): Observable<{} | actions.CreateCellBelow> => {
   return action$.pipe(
@@ -157,7 +157,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
  * Override from kernel-lifecycle to improve code mirror language intellisense
  * @param action$
  */
-export const acquireKernelInfoEpic = (action$: ActionsObservable<actions.NewKernelAction>) => {
+export const acquireKernelInfoEpic = (action$: Observable<actions.NewKernelAction>) => {
   return action$.pipe(
     ofType(actions.LAUNCH_KERNEL_SUCCESSFUL),
     switchMap((action: actions.NewKernelAction) => {
@@ -310,7 +310,7 @@ const connect = (serverConfig: NotebookServiceConfig, kernelID: string, sessionI
  * @param state$
  */
 export const launchWebSocketKernelEpic = (
-  action$: ActionsObservable<actions.LaunchKernelByNameAction>,
+  action$: Observable<actions.LaunchKernelByNameAction>,
   state$: StateObservable<CdbAppState>
 ) => {
   return action$.pipe(
@@ -422,7 +422,7 @@ export const launchWebSocketKernelEpic = (
  * TODO: Remove this epic once the /restart endpoint is implemented.
  */
 export const restartWebSocketKernelEpic = (
-  action$: ActionsObservable<actions.RestartKernel | actions.NewKernelAction>,
+  action$: Observable<actions.RestartKernel | actions.NewKernelAction>,
   state$: StateObservable<AppState>
 ) =>
   action$.pipe(
@@ -532,7 +532,7 @@ export const restartWebSocketKernelEpic = (
  * @param state$
  */
 const changeWebSocketKernelEpic = (
-  action$: ActionsObservable<actions.ChangeKernelByName>,
+  action$: Observable<actions.ChangeKernelByName>,
   state$: StateObservable<AppState>
 ) => {
   return action$.pipe(
@@ -614,7 +614,7 @@ const changeWebSocketKernelEpic = (
  * @param state$
  */
 const focusInitialCodeCellEpic = (
-  action$: ActionsObservable<actions.CreateCellAppend>,
+  action$: Observable<actions.CreateCellAppend>,
   state$: StateObservable<AppState>
 ): Observable<{} | actions.FocusCell> => {
   return action$.pipe(
@@ -652,10 +652,7 @@ const focusInitialCodeCellEpic = (
  * @param action$
  * @param state$
  */
-const notificationsToUserEpic = (
-  action$: ActionsObservable<any>,
-  state$: StateObservable<CdbAppState>
-): Observable<{}> => {
+const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservable<CdbAppState>): Observable<{}> => {
   return action$.pipe(
     ofType(
       actions.RESTART_KERNEL_SUCCESSFUL,
@@ -705,7 +702,7 @@ const notificationsToUserEpic = (
  * @param state$
  */
 const handleKernelConnectionLostEpic = (
-  action$: ActionsObservable<actions.UpdateDisplayFailed>,
+  action$: Observable<actions.UpdateDisplayFailed>,
   state$: StateObservable<CdbAppState>
 ): Observable<CdbActions.UpdateKernelRestartDelayAction | actions.RestartKernel | {}> => {
   return action$.pipe(
@@ -766,7 +763,7 @@ const handleKernelConnectionLostEpic = (
  * @param state$
  */
 export const cleanKernelOnConnectionLostEpic = (
-  action$: ActionsObservable<actions.UpdateDisplayFailed>,
+  action$: Observable<actions.UpdateDisplayFailed>,
   state$: StateObservable<AppState>
 ): Observable<actions.KillKernelSuccessful> => {
   return action$.pipe(
@@ -789,7 +786,7 @@ export const cleanKernelOnConnectionLostEpic = (
  * @param state$
  */
 const executeFocusedCellAndFocusNextEpic = (
-  action$: ActionsObservable<CdbActions.ExecuteFocusedCellAndFocusNextAction>,
+  action$: Observable<CdbActions.ExecuteFocusedCellAndFocusNextAction>,
   state$: StateObservable<AppState>
 ): Observable<{} | actions.FocusNextCellEditor> => {
   return action$.pipe(
@@ -829,7 +826,7 @@ function getUserPuid(): string {
  * @param state$
  */
 const closeUnsupportedMimetypesEpic = (
-  action$: ActionsObservable<actions.FetchContentFulfilled>,
+  action$: Observable<actions.FetchContentFulfilled>,
   state$: StateObservable<AppState>
 ): Observable<{}> => {
   return action$.pipe(
@@ -858,7 +855,7 @@ const closeUnsupportedMimetypesEpic = (
  * @param state$
  */
 const closeContentFailedToFetchEpic = (
-  action$: ActionsObservable<actions.FetchContentFailed>,
+  action$: Observable<actions.FetchContentFailed>,
   state$: StateObservable<AppState>
 ): Observable<{}> => {
   return action$.pipe(

src/Explorer/Notebook/NotebookComponent/store.ts

@@ -1,36 +1,22 @@
 import { AppState, epics as coreEpics, reducers, IContentProvider } from "@nteract/core";
-import {
-  applyMiddleware,
-  combineReducers,
-  compose,
-  createStore,
-  Store,
-  AnyAction,
-  Middleware,
-  Dispatch,
-  MiddlewareAPI
-} from "redux";
-import { combineEpics, createEpicMiddleware, Epic, ActionsObservable } from "redux-observable";
+import { compose, Store, AnyAction, Middleware, Dispatch, MiddlewareAPI } from "redux";
+import { createEpicMiddleware, Epic } from "redux-observable";
 import { allEpics } from "./epics";
 import { coreReducer, cdbReducer } from "./reducers";
 import { catchError } from "rxjs/operators";
+import { Observable } from "rxjs";
+import { configuration } from "@nteract/mythic-configuration";
+import { makeConfigureStore } from "@nteract/myths";
+import { CdbAppState } from "./types";
 
 const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
 export default function configureStore(
-  initialState: Partial<AppState>,
+  initialState: Partial<CdbAppState>,
   contentProvider: IContentProvider,
   onTraceFailure: (title: string, message: string) => void,
   customMiddlewares?: Middleware<{}, any, Dispatch<AnyAction>>[]
-): Store<AppState, AnyAction> {
-  const rootReducer = combineReducers({
-    app: reducers.app,
-    comms: reducers.comms,
-    config: reducers.config,
-    core: coreReducer,
-    cdb: cdbReducer
-  });
-
+): Store<CdbAppState, AnyAction> {
   /**
    * Catches errors in reducers
    */
@@ -46,7 +32,7 @@ export default function configureStore(
   };
 
   const protect = (epic: Epic) => {
-    return (action$: ActionsObservable<any>, state$: any, dependencies: any) =>
+    return (action$: Observable<any>, state$: any, dependencies: any) =>
       epic(action$, state$, dependencies).pipe(
         catchError((error, caught) => {
           traceFailure("Epic failure", error);
@@ -64,9 +50,8 @@ export default function configureStore(
     }
   };
 
-  const combineAndProtectEpics = (epics: Epic[]): Epic => {
-    const protectedEpics = epics.map(epic => protect(epic));
-    return combineEpics<Epic>(...protectedEpics);
+  const protectEpics = (epics: Epic[]): Epic[] => {
+    return epics.map(epic => protect(epic));
   };
 
   // This list needs to be consistent and in sync with core.allEpics until we figure
@@ -93,20 +78,23 @@ export default function configureStore(
     coreEpics.publishToBookstoreAfterSave,
     coreEpics.sendInputReplyEpic
   ];
-  const rootEpic = combineAndProtectEpics([...filteredCoreEpics, ...allEpics]);
-  const epicMiddleware = createEpicMiddleware({ dependencies: { contentProvider } });
-  let middlewares: Middleware[] = [epicMiddleware];
-  // TODO: tamitta: errorMiddleware was removed, do we need a substitute?
 
-  if (customMiddlewares) {
-    middlewares = middlewares.concat(customMiddlewares);
-  }
-  middlewares.push(catchErrorMiddleware);
+  const mythConfigureStore = makeConfigureStore<CdbAppState>()({
+    packages: [configuration],
+    reducers: {
+      app: reducers.app,
+      core: coreReducer as any,
+      cdb: cdbReducer
+    },
+    epics: protectEpics([...filteredCoreEpics, ...allEpics]),
+    epicDependencies: { contentProvider },
+    epicMiddleware: [catchErrorMiddleware],
+    enhancer: composeEnhancers
+  });
 
-  const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middlewares)));
-
-  epicMiddleware.run(rootEpic);
+  const store = mythConfigureStore(initialState as any);
 
   // TODO Fix typing issue here: createStore() output type doesn't quite match AppState
-  return store as Store<AppState, AnyAction>;
+  // return store as Store<AppState, AnyAction>;
+  return store as any;
 }