New Problem View (codesandbox#1794)

With this update I move the corrections generated by the linter from the state of our editor to the global state (in case of `app` in Cerebral, in `embed` we use a variable). This way we can show the corrections of the linter in the `Problems` view, which got a small redesign as well to be more useful. In the future we might decide to also include the `corrections`/`errors` generated by VSCode, or we might move the source of truth of this state to VSCode entirely.

- [x] Moves lint errors to global state
- [x] Removes the need of `moduleId` for corrections and  errors
- [x] Removes glyphs (we didn't use it)
- [x] Adds ability to open specific line of a file

![image](https://user-images.githubusercontent.com/587016/56470576-18eb2f80-6448-11e9-95ae-4cdac0d60c8f.png)

Author: CompuIves

packages/app/src/app/components/CodeEditor/CodeMirror/index.js

@@ -5,8 +5,11 @@ import CodeMirror from 'codemirror';
 import { withTheme } from 'styled-components';
 
 import type { ModuleError, Module } from '@codesandbox/common/lib/types';
+import { resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import { getCodeMirror } from 'app/utils/codemirror';
 
+import { listen } from 'codesandbox-api';
+
 import 'codemirror/addon/dialog/dialog';
 import 'codemirror/addon/hint/show-hint';
 import 'codemirror/addon/tern/tern';
@@ -52,8 +55,28 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
     this.sandbox = props.sandbox;
     this.currentModule = props.currentModule;
     this.settings = props.settings;
+
+    this.codeSandboxListener = this.setupCodeSandboxListener();
   }
 
+  setupCodeSandboxListener = () => listen(this.handleMessage);
+
+  handleMessage = action => {
+    if (action.action === 'editor.open-module') {
+      try {
+        const module = resolveModule(
+          action.path,
+          this.sandbox.modules,
+          this.sandbox.directories
+        );
+
+        this.setCurrentModule(module.id);
+      } catch (e) {
+        /* Ignore */
+      }
+    }
+  };
+
   shouldComponentUpdate(nextProps: Props) {
     if (
       this.props.width !== nextProps.width ||
@@ -73,6 +96,9 @@ class CodemirrorEditor extends React.Component<Props, State> implements Editor {
     if (this.disposeInitializer) {
       this.disposeInitializer();
     }
+    if (this.codeSandboxListener) {
+      this.codeSandboxListener();
+    }
   }
 
   componentDidMount() {

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -5,7 +5,7 @@ import { debounce } from 'lodash-es';
 import { join, dirname } from 'path';
 import { withTheme } from 'styled-components';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
-import { listen } from 'codesandbox-api';
+import { listen, dispatch, actions } from 'codesandbox-api';
 
 import getTemplate from '@codesandbox/common/lib/templates';
 import type {
@@ -69,6 +69,9 @@ function getSelection(lines, selection) {
 
 let modelCache = {};
 
+/**
+ * This editor is like a slim version of our VSCode editor. It's used in the embed.
+ */
 class MonacoEditor extends React.Component<Props, State> implements Editor {
   static defaultProps = {
     width: '100%',
@@ -666,18 +669,19 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
   setErrors = (errors: Array<ModuleError>) => {
     if (errors.length > 0) {
+      const currentPath = this.editor.getModel().uri.path;
       const thisModuleErrors = errors.filter(
-        error => error.moduleId === this.currentModule.id
+        error => error.path === currentPath
       );
       const errorMarkers = thisModuleErrors
         .map(error => {
           if (error) {
             return {
-              severity: this.monaco.Severity.Error,
+              severity: this.monaco.MarkerSeverity.Error,
               startColumn: 1,
               startLineNumber: error.line,
-              endColumn: error.column,
-              endLineNumber: error.line + 1,
+              endColumn: error.columnEnd || error.column,
+              endLineNumber: error.lineEnd || error.line + 1,
               message: error.message,
             };
           }
@@ -698,19 +702,21 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
   setCorrections = (corrections: Array<ModuleCorrection>) => {
     if (corrections.length > 0) {
+      const currentPath = this.editor.getModel().uri.path;
+
       const correctionMarkers = corrections
-        .filter(correction => correction.moduleId === this.currentModule.id)
+        .filter(correction => correction.path === currentPath)
         .map(correction => {
           if (correction) {
             return {
               severity:
                 correction.severity === 'warning'
-                  ? this.monaco.Severity.Warning
-                  : this.monaco.Severity.Notice,
+                  ? this.monaco.MarkerSeverity.Warning
+                  : this.monaco.MarkerSeverity.Notice,
               startColumn: correction.column,
               startLineNumber: correction.line,
-              endColumn: 1,
-              endLineNumber: correction.line + 1,
+              endColumn: correction.columnEnd || 1,
+              endLineNumber: correction.lineEnd || correction.line + 1,
               message: correction.message,
               source: correction.source,
             };
@@ -734,30 +740,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     }
   };
 
-  setGlyphs = (glyphs: Array<{ line: number, className: string }>) => {
-    if (glyphs.length > 0) {
-      const glyphMarkers = glyphs
-        .map(glyph => {
-          if (glyph) {
-            return {
-              range: new this.monaco.Range(glyph.line, 1, glyph.line, 1),
-              options: {
-                isWholeLine: true,
-                glyphMarginClassName: glyph.className,
-              },
-            };
-          }
-
-          return null;
-        })
-        .filter(x => x);
-
-      this.editor.deltaDecorations([], glyphMarkers);
-    } else {
-      this.editor.deltaDecorations([], []);
-    }
-  };
-
   registerAutoCompletions = () => {
     this.monaco.languages.registerCompletionItemProvider('typescript', {
       triggerCharacters: ['"', "'", '.'],
@@ -900,10 +882,23 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
         requestAnimationFrame(() => {
           if (this.editor.getModel()) {
+            const modelPath = this.editor.getModel().uri.path;
+            dispatch(actions.correction.clear(modelPath, 'eslint'));
+
             if (version === this.editor.getModel().getVersionId()) {
-              this.updateLintWarnings(markers);
-            } else {
-              this.updateLintWarnings([]);
+              markers.forEach(marker => {
+                dispatch(
+                  actions.correction.show(marker.message, {
+                    line: marker.startLineNumber,
+                    column: marker.startColumn,
+                    lineEnd: marker.endLineNumber,
+                    columnEnd: marker.endColumn,
+                    source: 'eslint',
+                    severity: marker.severity === 2 ? 'warning' : 'notice',
+                    path: modelPath,
+                  })
+                );
+              });
             }
           }
         });
@@ -964,19 +959,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     );
   };
 
-  updateLintWarnings = async (markers: Array<Object>) => {
-    const currentModule = this.currentModule;
-
-    const mode = await getMode(currentModule.title, this.monaco);
-    if (mode === 'javascript' || mode === 'vue') {
-      this.monaco.editor.setModelMarkers(
-        this.editor.getModel(),
-        'eslint',
-        markers
-      );
-    }
-  };
-
   disposeModel = (id: string) => {
     if (modelCache[id]) {
       try {