Make commands editable and re-usable

.eslintrc.json

@@ -56,23 +56,23 @@
         "react"
       ],
       "rules": {
-        "@typescript-eslint/no-empty-function": "off",
-        "@typescript-eslint/ban-types": "off",
-        "react/prop-types": "off",
-        "prefer-spread": "off",
-        "react/no-unescaped-entities": "off",
-        "no-var": "off",
-        "@typescript-eslint/no-unused-vars": "off",
-        "react-hooks/exhaustive-deps": "off",
-        "@typescript-eslint/no-this-alias": "off",
-        "prefer-rest-params": "off",
-        "@typescript-eslint/no-var-requires": "off",
-        "react-hooks/rules-of-hooks": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-empty-function": "warn",
+        "@typescript-eslint/ban-types": "warn",
+        "react/prop-types": "warn",
+        "prefer-spread": "warn",
+        "react/no-unescaped-entities": "warn",
+        "no-var": "warn",
+        "@typescript-eslint/no-unused-vars": "warn",
+        "react-hooks/exhaustive-deps": "warn",
+        "@typescript-eslint/no-this-alias": "warn",
+        "prefer-rest-params": "warn",
+        "@typescript-eslint/no-var-requires": "warn",
+        "react-hooks/rules-of-hooks": "warn",
+        "@typescript-eslint/explicit-module-boundary-types": "warn",
         "@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/no-non-null-assertion": "off"
+        "@typescript-eslint/no-explicit-any": "warn", // remove this when migrated fully to ts. right now it makes warnings unreadable
+        "@typescript-eslint/ban-ts-comment": "warn", // remove this when typings for react-spring allow multiple animation stages,
+        "@typescript-eslint/no-non-null-assertion": "warn"
       }
     }
   ]

LICENSES.txt

@@ -1180,7 +1180,7 @@ SOFTWARE.
 
 -----
 
-The following software may be included in this product: @types/asap, @types/color-name, @types/dateformat, @types/file-saver, @types/hoist-non-react-statics, @types/jsonic, @types/long, @types/mdast, @types/parse-json, @types/prop-types, @types/shallowequal, @types/unist, @types/url-parse. A copy of the source code may be downloaded from https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/asap), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/color-name), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/dateformat), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/file-saver), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/hoist-non-react-statics), https://github.com/DefinitelyTyped/DefinitelyTyped.git.git (@types/jsonic), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/long), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/mdast), https://www.github.com/DefinitelyTyped/DefinitelyTyped.git (@types/parse-json), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/prop-types), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/shallowequal), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/unist), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/url-parse). This software contains the following license and notice below:
+The following software may be included in this product: @types/asap, @types/color-name, @types/hoist-non-react-statics, @types/long, @types/mdast, @types/parse-json, @types/prop-types, @types/shallowequal, @types/unist. A copy of the source code may be downloaded from https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/asap), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/color-name), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/hoist-non-react-statics), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/long), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/mdast), https://www.github.com/DefinitelyTyped/DefinitelyTyped.git (@types/parse-json), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/prop-types), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/shallowequal), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/unist). This software contains the following license and notice below:
 
 MIT License
 
@@ -1206,7 +1206,7 @@ MIT License
 
 -----
 
-The following software may be included in this product: @types/d3, @types/hast, @types/invariant, @types/node, @types/parse5, @types/react, @types/semver, @types/zen-observable. A copy of the source code may be downloaded from https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/d3), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/hast), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/invariant), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/node), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/parse5), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/react), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/semver), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/zen-observable). This software contains the following license and notice below:
+The following software may be included in this product: @types/hast, @types/invariant, @types/node, @types/parse5, @types/react, @types/zen-observable. A copy of the source code may be downloaded from https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/hast), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/invariant), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/node), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/parse5), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/react), https://github.com/DefinitelyTyped/DefinitelyTyped.git (@types/zen-observable). This software contains the following license and notice below:
 
 MIT License
 

NOTICE.txt

@@ -223,7 +223,7 @@ Third-party licenses
 │  ├─ long@4.0.0
 │  │  ├─ URL: https://github.com/dcodeIO/long.js.git
 │  │  └─ VendorName: Daniel Wirtz
-│  ├─ neo4j-driver@4.1.2
+│  ├─ neo4j-driver@4.2.2
 │  │  ├─ URL: git://github.com/neo4j/neo4j-javascript-driver.git
 │  │  └─ VendorName: Neo4j
 │  ├─ oauth-sign@0.9.0
@@ -283,6 +283,10 @@ Third-party licenses
 │  │  ├─ URL: http://github.com/garycourt/uri-js
 │  │  ├─ VendorName: Gary Court
 │  │  └─ VendorUrl: https://github.com/garycourt/uri-js
+│  ├─ uri-js@4.4.1
+│  │  ├─ URL: http://github.com/garycourt/uri-js
+│  │  ├─ VendorName: Gary Court
+│  │  └─ VendorUrl: https://github.com/garycourt/uri-js
 │  └─ webidl-conversions@3.0.1
 │     ├─ URL: https://github.com/jsdom/webidl-conversions.git
 │     ├─ VendorName: Domenic Denicola
@@ -661,20 +665,12 @@ Third-party licenses
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/color-name@1.1.1
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-│  ├─ @types/d3@3.5.44
-│  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-│  ├─ @types/dateformat@3.0.1
-│  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-│  ├─ @types/file-saver@2.0.1
-│  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/hast@2.3.1
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/hoist-non-react-statics@3.3.1
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/invariant@2.2.34
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-│  ├─ @types/jsonic@0.3.0
-│  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git.git
 │  ├─ @types/long@4.0.1
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/mdast@3.0.3
@@ -691,14 +687,10 @@ Third-party licenses
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/react@16.9.49
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-│  ├─ @types/semver@7.3.4
-│  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/shallowequal@1.1.1
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/unist@2.0.3
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
-│  ├─ @types/url-parse@1.4.3
-│  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @types/zen-observable@0.8.1
 │  │  └─ URL: https://github.com/DefinitelyTyped/DefinitelyTyped.git
 │  ├─ @wry/context@0.5.2
@@ -1524,10 +1516,6 @@ Third-party licenses
 │  │  ├─ URL: https://github.com/reduxjs/react-redux.git
 │  │  ├─ VendorName: Dan Abramov
 │  │  └─ VendorUrl: https://github.com/reduxjs/react-redux
-│  ├─ react-spring@8.0.27
-│  │  ├─ URL: git+https://github.com/drcmda/react-spring.git
-│  │  ├─ VendorName: Paul Henschel
-│  │  └─ VendorUrl: https://github.com/drcmda/react-spring#readme
 │  ├─ react-suber@1.0.4
 │  │  ├─ URL: https://github.com/oskarhane/react-suber.git
 │  │  ├─ VendorName: Oskar Hane

build_scripts/webpack-plugins.js

@@ -91,7 +91,7 @@ module.exports = () => {
     }),
     new ForkTsCheckerNotifierWebpackPlugin({
       title: 'TypeScript',
-      excludeWarnings: false
+      excludeWarnings: true // remove as we move to ts
     }),
     new MonacoWebpackPlugin({
       features: [

e2e_tests/integration/0.index.spec.ts

@@ -38,12 +38,12 @@ describe('Neo4j Browser', () => {
     cy.setInitialPassword(newPassword)
     cy.disconnect()
   })
-  it('populates the editor when clicking the connect banner', () => {
+
+  it(':server disconnect frame is re-runnable', () => {
     cy.get('[data-testid="disconnectedBannerCode"]').click()
-    cy.get('[data-testid="frameCommand"]')
-      .first()
-      .should('contain', ':server connect')
-    cy.get('[data-testid="activeEditor"] [data-testid="editor-discard"]')
+    cy.get('[data-testid="frameCommand"]').contains(':server connect')
+    cy.typeInFrame(':play movies{enter}', 0)
+    cy.get('[data-testid=frame]').contains('the Bacon Path')
   })
   it('can connect', () => {
     const password = Cypress.config('password')
@@ -55,9 +55,7 @@ describe('Neo4j Browser', () => {
     const query = 'MATCH (n) DETACH DELETE n'
     cy.executeCommand(query)
     cy.waitForCommandResult()
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(query)
     cy.get('[data-testid="frameStatusbar"]', { timeout: 100000 })
       .first()
       .contains(/completed/i)
@@ -67,9 +65,7 @@ describe('Neo4j Browser', () => {
     const query = 'RETURN 1'
     cy.executeCommand(query)
     cy.waitForCommandResult()
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(query)
     cy.get('[data-testid="frameStatusbar"]', { timeout: 10000 })
       .first()
       .should('contain', 'Started streaming')
@@ -78,9 +74,7 @@ describe('Neo4j Browser', () => {
     cy.executeCommand(':clear')
     const query = ':unknown'
     cy.executeCommand(query)
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(query)
     cy.get('[data-testid="frame"]', { timeout: 10000 })
       .first()
       .should('contain', 'Error')
@@ -89,9 +83,7 @@ describe('Neo4j Browser', () => {
     cy.executeCommand(':clear')
     const query = ':play movies'
     cy.executeCommand(query)
-    cy.get('[data-testid="frameCommand"]')
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]').contains(query)
     cy.get(Carousel)
       .find('[data-testid="nextSlide"]')
       .click()
@@ -106,9 +98,9 @@ describe('Neo4j Browser', () => {
       .click()
     cy.get(SubmitQueryButton).click()
     cy.waitForCommandResult()
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', 'Emil Eifrem')
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(
+      'Keanu Reeves'
+    )
   })
   it('can display meta items from side drawer', () => {
     cy.executeCommand(':clear')

e2e_tests/integration/commands.spec.ts

@@ -99,4 +99,12 @@ describe('Commands', () => {
       cy.executeCommand(':clear')
     })
   })
+
+  it('can re-run all simple commands while connected without blowing up', () => {
+    cy.executeCommand('return 1')
+    commands.forEach(cmd => {
+      cy.typeInFrame(`${cmd}{enter}`)
+      cy.wait(300)
+    })
+  })
 })

e2e_tests/integration/connect-form.spec.ts

@@ -107,7 +107,7 @@ describe('Connect form', () => {
         `Automatic retry using the "${schemeWithEncryptionFlag('bolt')}"`
       )
       cy.wait(7000) // auto retry is in 5 secs
-      getFirstFrameCommand().should('contain', ':play start')
+      getFirstFrameCommand().contains(':play start')
       cy.executeCommand(':server disconnect')
       cy.executeCommand(':clear')
     })

e2e_tests/integration/desktop-env-url.spec.ts

@@ -48,7 +48,7 @@ describe('Neo4j Desktop environment using url field', () => {
       frames.should('have.length', 2)
 
       // Auto connected = :play start
-      frames.first().should('contain', ':play start')
+      frames.first().contains(':play start')
       cy.wait(1000)
     })
     it('switches connection when that event is triggered using url field', () => {
@@ -63,7 +63,7 @@ describe('Neo4j Desktop environment using url field', () => {
       const frames = cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
       frames.should('have.length', 1)
 
-      frames.first().should('contain', ':server switch success')
+      frames.first().contains(':server switch success')
 
       cy.get('[data-testid="frame"]', { timeout: 10000 })
         .first()

e2e_tests/integration/desktop-env.spec.ts

@@ -42,7 +42,7 @@ describe('Neo4j Desktop environment', () => {
       frames.should('have.length', 2)
 
       // Auto connected = :play start
-      frames.first().should('contain', ':play start')
+      frames.first().contains(':play start')
       cy.wait(1000)
     })
     it('switches connection when that event is triggered using host + port fields', () => {
@@ -57,7 +57,7 @@ describe('Neo4j Desktop environment', () => {
       const frames = cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
       frames.should('have.length', 1)
 
-      frames.first().should('contain', ':server switch success')
+      frames.first().contains(':server switch success')
 
       cy.get('[data-testid="frame"]', { timeout: 10000 })
         .first()
@@ -79,7 +79,7 @@ describe('Neo4j Desktop environment', () => {
       const frames = cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
       frames.should('have.length', 1)
 
-      frames.first().should('contain', ':server switch fail')
+      frames.first().contains(':server switch fail')
 
       cy.get('[data-testid="disconnectedBanner"]', { timeout: 10000 })
         .first()

e2e_tests/integration/multi-db.spec.ts

@@ -108,9 +108,9 @@ describe('Multi database', () => {
 
         // Select to use db, make sure backticked
         databaseOptionList().select('name-with-dash')
-        cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-          .first()
-          .should('contain', ':use `name-with-dash`')
+        cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(
+          ':use `name-with-dash`'
+        )
         cy.resultContains(
           'Queries from this point and forward are using the database'
         )
@@ -203,9 +203,7 @@ describe('Multi database', () => {
         )
 
         // Click re-run
-        cy.get('[data-testid="rerunFrameButton"]', { timeout: 10000 })
-          .first()
-          .click()
+        cy.get('[data-testid="rerunFrameButton"]', { timeout: 10000 }).click()
 
         // Make sure we have what we expect
         cy.get('[data-testid="frame"]', { timeout: 10000 })

e2e_tests/integration/multistatements.spec.ts

@@ -67,9 +67,9 @@ describe('Multi statements', () => {
 
     // Then
     // Error expected
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', validQuery)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(
+      validQuery
+    )
     cy.get('[data-testid="frameContents"]', { timeout: 10000 })
       .first()
       .should('contain', 'Error')

e2e_tests/integration/style.spec.ts

@@ -39,9 +39,7 @@ describe(':style', () => {
 
     const query = ':style'
     cy.executeCommand(query)
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(query)
     cy.get('[data-testid="frameContents"]', { timeout: 10000 })
       .first()
       .should('contain', 'node {')

e2e_tests/integration/topics.spec.ts

@@ -31,9 +31,7 @@ describe('Help topics', () => {
     cy.executeCommand(':clear')
     const query = ':help commands'
     cy.executeCommand(query)
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(query)
     cy.get('[data-testid="frameContents"]', { timeout: 10000 })
       .first()
       .should('contain', ':help style')
@@ -42,9 +40,7 @@ describe('Help topics', () => {
     cy.executeCommand(':clear')
     const query = ':help style'
     cy.executeCommand(query)
-    cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
-      .first()
-      .should('contain', query)
+    cy.get('[data-testid="frameCommand"]', { timeout: 10000 }).contains(query)
     cy.get('[data-testid="frameContents"]', { timeout: 10000 })
       .first()
       .should('contain', 'style command')

e2e_tests/support/commands.ts

@@ -54,8 +54,8 @@ Cypress.Commands.add(
     cy.get('button[data-testid="changePassword"]').click()
 
     cy.get('input[data-testid="changePassword"]').should('not.be.visible')
-    cy.get('[data-testid="frameCommand"]', { timeout: 30000 }).should(
-      'contain',
+    cy.get('[data-testid="frame"]', { timeout: 25000 }).should('have.length', 2)
+    cy.get('[data-testid="frameCommand"]', { timeout: 30000 }).contains(
       ':play start'
     )
   }
@@ -90,9 +90,7 @@ Cypress.Commands.add(
         2
       )
       cy.wait(500)
-      cy.get('[data-testid="frameCommand"]')
-        .first()
-        .should('contain', ':play start')
+      cy.get('[data-testid="frameCommand"]').contains(':server connect')
       cy.executeCommand(':clear')
     }
   }
@@ -102,6 +100,17 @@ Cypress.Commands.add('disconnect', () => {
   cy.executeCommand(query)
 })
 
+Cypress.Commands.add('typeInFrame', (cmd: string, frameIndex = 0) => {
+  cy.get('[id^=monaco-]')
+    .eq(frameIndex + 1) // the first monaco editor is the main one
+    .type(
+      Cypress.platform === 'darwin'
+        ? '{cmd}a {backspace}'
+        : '{ctrl}a {backspace}'
+    )
+    .type(cmd)
+})
+
 Cypress.Commands.add('executeCommand', (query, options = {}) => {
   cy.get(VisibleEditor).click()
   cy.get(EditorTextField).type(query, { force: true, ...options })

e2e_tests/support/global.d.ts

@@ -24,6 +24,10 @@ declare global {
         boltUrl?: string,
         force?: boolean
       ): Cypress.Chainable<void>
+      /**
+       * Custom command to type a command in a frame
+       */
+      typeInFrame(cmd: string, frameIndex?: number): Cypress.Chainable<void>
       /**
        * Custom command to type and submit query in cypher editor.
        * @example cy.executeCommand(':clear')