Merge pull request #1248 from HerrEmil/monaco-integration

Use Monaco as the main cypher editor

Author: HerrEmil

.eslintrc.json

@@ -71,7 +71,8 @@
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/no-explicit-any": "off", // remove this when migrated fully to ts. right now it makes warnings unreadable
-        "@typescript-eslint/ban-ts-comment": "off" // remove this when typings for react-spring allow multiple animation stages
+        "@typescript-eslint/ban-ts-comment": "off", // remove this when typings for react-spring allow multiple animation stages,
+        "@typescript-eslint/no-non-null-assertion": "off"
       }
     }
   ]

LICENSES.txt

@@ -2072,32 +2072,6 @@ ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 
 -----
 
-The following software may be included in this product: codemirror. A copy of the source code may be downloaded from https://github.com/codemirror/CodeMirror.git. This software contains the following license and notice below:
-
-MIT License
-
-Copyright (C) 2017 by Marijn Haverbeke <[email protected]> and others
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
------
-
 The following software may be included in this product: color-convert. A copy of the source code may be downloaded from https://github.com/Qix-/color-convert.git. This software contains the following license and notice below:
 
 Copyright (c) 2011-2016 Heather Arthur <[email protected]>
@@ -2459,7 +2433,7 @@ SOFTWARE.
 
 -----
 
-The following software may be included in this product: cypher-codemirror, cypher-editor-support. A copy of the source code may be downloaded from git://github.com/neo4j-contrib/cypher-editor.git (cypher-codemirror), git://github.com/neo4j-contrib/cypher-editor.git (cypher-editor-support). This software contains the following license and notice below:
+The following software may be included in this product: cypher-editor-support. A copy of the source code may be downloaded from git://github.com/neo4j-contrib/cypher-editor.git. This software contains the following license and notice below:
 
 GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007

NOTICE.txt

@@ -423,9 +423,6 @@ Third-party licenses
 │     ├─ VendorName: Tab Atkins Jr.
 │     └─ VendorUrl: https://github.com/tabatkins/railroad-diagrams
 ├─ GPL-3.0
-│  ├─ [email protected]
-│  │  ├─ URL: git://github.com/neo4j-contrib/cypher-editor.git
-│  │  └─ VendorName: Neo Technology Inc.
 │  └─ [email protected]
 │     ├─ URL: git://github.com/neo4j-contrib/cypher-editor.git
 │     └─ VendorName: Neo Technology Inc.
@@ -863,10 +860,6 @@ Third-party licenses
 │  ├─ [email protected]
 │  │  ├─ URL: https://github.com/JedWatson/classnames.git
 │  │  └─ VendorName: Jed Watson
-│  ├─ [email protected]
-│  │  ├─ URL: https://github.com/codemirror/CodeMirror.git
-│  │  ├─ VendorName: Marijn Haverbeke
-│  │  └─ VendorUrl: https://codemirror.net/
 │  ├─ [email protected]
 │  │  ├─ URL: https://github.com/wooorm/collapse-white-space.git
 │  │  ├─ VendorName: Titus Wormer

build_scripts/webpack.config.js

@@ -67,7 +67,7 @@ module.exports = {
               enforce: true
             },
             'cypher-editor': {
-              test: /[\\/]node_modules[\\/](antlr4|codemirror|cypher-codemirror|cypher-editor-support)[\\/]/,
+              test: /[\\/]node_modules[\\/](antlr4|cypher-editor-support|monaco-editor)[\\/]/,
               name: 'cypher-editor',
               chunks: 'all',
               enforce: true
@@ -78,12 +78,6 @@ module.exports = {
               chunks: 'all',
               enforce: true
             },
-            monaco: {
-              test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
-              name: 'monaco',
-              chunks: 'all',
-              enforce: true
-            },
             'relate-by-ui': {
               test: /[\\/]node_modules[\\/](@relate-by-ui|semantic-ui-react)[\\/]/,
               name: 'relate-by-ui',

e2e_tests/integration/commands.spec.ts

@@ -56,7 +56,10 @@ describe('Commands', () => {
     // lose focus
     cy.get('[data-testid=drawerFavorites]').click()
     cy.get('[data-testid=drawerFavorites]').click()
-    cy.get('.ReactCodeMirror textarea').should('not.be', 'focused')
+    cy.get('#monaco-main-editor > .monaco-editor').should(
+      'not.have.class',
+      'focused'
+    )
 
     // we now have 2 cards, and some hidden padding
     cy.get('[data-testid="stream"]')
@@ -65,12 +68,12 @@ describe('Commands', () => {
 
     // focus editor
     cy.get('body').type('/')
-    cy.get('.ReactCodeMirror textarea')
-      .should('be', 'focused')
+    cy.get('#monaco-main-editor > .monaco-editor')
+      .should('have.class', 'focused')
       .type(':clear{shift}{enter}')
 
     // we see line number in multiline view
-    cy.get('.CodeMirror-linenumber').should('contain', '1')
+    cy.get('.line-numbers').should('contain', '1')
     // we can run command with ctrl enter
     cy.get('[data-testid="activeEditor"] textarea').type('{ctrl}{enter}')
     // editor is now cleared

e2e_tests/integration/connect-form.spec.ts

@@ -182,7 +182,9 @@ describe('Connect form', () => {
         cy.get('[data-testid=password]')
           .type(Cypress.config('password'))
           .type('{enter}')
-        cy.get('[data-testid="editor-wrapper"]').contains('system')
+
+        cy.get('[data-testid="drawerDBMS"]').click()
+        cy.get('[data-testid="database-selection-list"]').contains('system')
       })
     }
   }

e2e_tests/integration/multi-db.spec.ts

@@ -76,7 +76,7 @@ describe('Multi database', () => {
     }
     it(':use command works + shows current db in editor gutter', () => {
       cy.executeCommand(':clear')
-      const editor = () => cy.get('[data-testid="editor-wrapper"]')
+      const editor = () => cy.get('#monaco-main-editor')
 
       cy.executeCommand(':use system')
       editor().contains('system$')

e2e_tests/integration/params.spec.ts

@@ -64,7 +64,7 @@ function runTests() {
   // it(':param x => {prop: 1} multi line', () => {
   // Set param
   cy.executeCommand(':clear')
-  setParamQ = `:param [x] => {{}{shift}{enter}RETURN {{}prop: 1} AS x{enter}}`
+  setParamQ = `:param [x] => {{}{shift}{enter}RETURN {{}prop: 1} AS x`
   cy.executeCommand(setParamQ)
   cy.resultContains('"prop": 1')
   // return param

e2e_tests/integration/plan.spec.ts

@@ -28,13 +28,9 @@ describe('Plan output', () => {
       .title()
       .should('include', 'Neo4j Browser')
     cy.wait(3000)
-    cy.disableEditorAutocomplete()
     const password = Cypress.config('password')
     cy.connect('neo4j', password)
   })
-  after(function() {
-    cy.enableEditorAutocomplete()
-  })
   it('displays the expanded details by default and displays/hides details when clicking the plan expand/collapse buttons respectively', () => {
     cy.executeCommand(':clear')
     cy.executeCommand(

e2e_tests/integration/saved-scripts.spec.ts

@@ -41,16 +41,11 @@ describe('Saved Scripts', () => {
     cy.get('[data-testid="scriptTitle-script name"]').click()
     cy.get('[data-testid="currentlyEditing"]').contains('script name')
     // Editing script updates name and content
-    cy.get('[data-testid="activeEditor"] textarea').type(
-      `// Guide
-:play movies${
-        '{del}'.repeat(
-          22
-        ) /* normal clear doesn't seem to work with code-mirror text field*/
-      } 
-`,
-      { force: true }
-    )
+    const clearInput =
+      Cypress.platform == 'darwin' ? '{cmd}a{del}' : '{ctrl}a{del}'
+    cy.get('[data-testid="activeEditor"] textarea')
+      .type(clearInput)
+      .type('// Guide{shift}{enter}:play movies', { force: true })
     cy.get('[title="Update favorite"]').click()
 
     cy.get('[data-testid="scriptTitle-Guide"]').should('exist')