:param v2

e2e_tests/integration/0.index.spec.js

@@ -39,7 +39,9 @@ describe('Neo4j Browser', () => {
   })
   it('populates the editor when clicking the connect banner', () => {
     cy.get('[data-testid="disconnectedBannerCode"]').click()
-    cy.get('.ReactCodeMirror').should('contain', ':server connect')
+    cy.get('[data-testid="frameCommand"]')
+      .first()
+      .should('contain', ':server connect')
     cy.get(ClearEditorButton).click()
   })
   it('can connect', () => {

e2e_tests/integration/multistatements.spec.js

@@ -74,7 +74,7 @@ describe('Multi statements', () => {
     cy.get('[data-testid="frameCommand"]', { timeout: 10000 })
       .first()
       .should('contain', validQuery)
-    cy.get('[data-testid="frameStatusbar"]', { timeout: 10000 })
+    cy.get('[data-testid="frameContents"]', { timeout: 10000 })
       .first()
       .should('contain', 'Error')
 

e2e_tests/integration/params.spec.js

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

jest.config.js

@@ -12,7 +12,9 @@ module.exports = {
     '/dist/',
     '/node_modules/'
   ],
-  transformIgnorePatterns: [`/node_modules/(?!lodash-es)`],
+  transformIgnorePatterns: [
+    `/node_modules/(?!lodash-es|@neo4j/browser-lambda-parser)`
+  ],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html)$':
       '<rootDir>/test_utils/__mocks__/fileMock.js',

package.json

@@ -123,6 +123,7 @@
     "xml2js": "^0.4.19"
   },
   "dependencies": {
+    "@neo4j/browser-lambda-parser": "^1.0.3",
     "ascii-data-table": "^2.1.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.29.0",

src/browser/components/Directives.jsx

@@ -69,10 +69,6 @@ const directives = [
   }
 ]
 
-const prependHelpIcon = element => {
-  prependIcon(element, 'fa fa-question-circle-o')
-}
-
 const prependPlayIcon = element => {
   prependIcon(element, 'fa fa-play-circle-o')
 }
@@ -106,9 +102,7 @@ export const Directives = props => {
         const elems = elem.querySelectorAll(directive.selector)
         Array.from(elems).forEach(e => {
           if (e.firstChild.nodeName !== 'I') {
-            directive.selector === '[help-topic]'
-              ? prependHelpIcon(e)
-              : prependPlayIcon(e)
+            prependPlayIcon(e)
           }
 
           e.onclick = () => {

src/browser/components/__snapshots__/Directives.test.js.snap

@@ -9,7 +9,7 @@ exports[`Directives should attach all directives when contents has both attribut
         help-topic="help"
       >
         <i
-          class="fa fa-question-circle-o"
+          class="fa fa-play-circle-o"
           style="padding-right:4px"
         />
         help
@@ -37,7 +37,7 @@ exports[`Directives should attach help topic directive when contents has a play-
       help-topic="hello"
     >
       <i
-        class="fa fa-question-circle-o"
+        class="fa fa-play-circle-o"
         style="padding-right:4px"
       />
       link

src/browser/modules/Help/html/param.html

@@ -18,6 +18,12 @@
         <code>:param x => 1</code> and to set it as a float, do
         <code>:param x => 1.0</code>.
       </p>
+      <p>
+        If you need more fine-grained control or advanced Cypher queries, you can use the explicit syntax: <code>x => { ... RETURN 1 as foo }</code>
+        <br/> Explicit returns yield a list of records, matching that of your Cypher query: <code>x => { RETURN 1 as foo }</code> yields <code>$x = [{foo: 1}]</code>
+        <br/> You can pick out individual values from your result using destructuring: <code> [{foo}] => { RETURN 1 as foo }</code> yields <code>$foo = 1</code>
+        <br/> You can also rename destructured params: <code> [{foo: bar}] => { RETURN 1 as foo }</code> yields <code>$bar = 1</code>
+      </p>
       <p>Cypher query example with a param:&nbsp;
         <code>MATCH (n:Person) WHERE n.name = $name</code>
       </p>

src/browser/modules/Main/Main.jsx

@@ -26,19 +26,17 @@ import {
 import Editor from '../Editor/Editor'
 import Stream from '../Stream/Stream'
 import Render from 'browser-components/Render'
-import ClickToCode from '../ClickToCode'
 import {
   StyledMain,
   WarningBanner,
   ErrorBanner,
-  NotAuthedBanner,
-  StyledCodeBlockAuthBar,
-  StyledCodeBlockErrorBar
+  NotAuthedBanner
 } from './styled'
 import SyncReminderBanner from './SyncReminderBanner'
 import SyncConsentBanner from './SyncConsentBanner'
 import ErrorBoundary from 'browser-components/ErrorBoundary'
 import { useSlowConnectionState } from './main.hooks'
+import AutoExecButton from '../Stream/auto-exec-button'
 
 const Main = React.memo(function Main (props) {
   const [past5Sec, past10Sec] = useSlowConnectionState(props)
@@ -51,11 +49,8 @@ const Main = React.memo(function Main (props) {
       <Render if={props.showUnknownCommandBanner}>
         <ErrorBanner>
           Type&nbsp;
-          <ClickToCode CodeComponent={StyledCodeBlockErrorBar}>
-            {props.cmdchar}
-            help commands
-          </ClickToCode>
-          &nbsp; for a list of available commands.
+          <AutoExecButton cmd={`${props.cmdchar}help commands`} />
+          &nbsp;for a list of available commands.
         </ErrorBanner>
       </Render>
       <Render if={props.errorMessage}>
@@ -66,13 +61,10 @@ const Main = React.memo(function Main (props) {
       <Render if={props.connectionState === DISCONNECTED_STATE}>
         <NotAuthedBanner data-testid='disconnectedBanner'>
           Database access not available. Please use&nbsp;
-          <ClickToCode
+          <AutoExecButton
+            cmd={`${props.cmdchar}server connect`}
             data-testid='disconnectedBannerCode'
-            CodeComponent={StyledCodeBlockAuthBar}
-          >
-            {props.cmdchar}
-            server connect
-          </ClickToCode>
+          />
           &nbsp; to establish connection. There's a graph waiting for you.
         </NotAuthedBanner>
       </Render>

src/browser/modules/Stream/CypherFrame/ErrorsView.jsx

@@ -35,7 +35,7 @@ import { errorMessageFormater } from './../errorMessageFormater'
 import {
   StyledCypherErrorMessage,
   StyledHelpContent,
-  StyledH4,
+  StyledErrorH4,
   StyledPreformattedArea,
   StyledHelpDescription,
   StyledDiv,
@@ -54,14 +54,14 @@ export class ErrorsView extends Component {
     if (!error || !error.code) {
       return null
     }
-    const fullError = errorMessageFormater(error.code, error.message)
+    const fullError = errorMessageFormater(null, error.message)
 
     return (
       <StyledHelpFrame>
         <StyledHelpContent>
           <StyledHelpDescription>
             <StyledCypherErrorMessage>ERROR</StyledCypherErrorMessage>
-            <StyledH4>{error.code}</StyledH4>
+            <StyledErrorH4>{error.code}</StyledErrorH4>
           </StyledHelpDescription>
           <StyledDiv>
             <StyledPreformattedArea>{fullError.message}</StyledPreformattedArea>

src/browser/modules/Stream/CypherFrame/__snapshots__/AsciiView.test.js.snap

@@ -3,7 +3,7 @@
 exports[`AsciiViews AsciiStatusbar displays statusBarMessage if no rows 1`] = `
 <div>
   <div
-    class="styled__StyledStatsBar-sc-1dtvgs1-32 hNrxzW"
+    class="styled__StyledStatsBar-sc-1dtvgs1-33 cjTact"
   >
     <div
       class="Ellipsis-sc-1dn9bou-0 gzqRPC"
@@ -17,17 +17,17 @@ exports[`AsciiViews AsciiStatusbar displays statusBarMessage if no rows 1`] = `
 exports[`AsciiViews AsciiStatusbar displays statusBarMessage if no rows 2`] = `
 <div>
   <div
-    class="styled__StyledStatsBar-sc-1dtvgs1-32 hNrxzW"
+    class="styled__StyledStatsBar-sc-1dtvgs1-33 cjTact"
   >
     <div
-      class="styled__StyledRightPartial-sc-1dtvgs1-41 zWSxr"
+      class="styled__StyledRightPartial-sc-1dtvgs1-42 ifFzJO"
     >
       <div
-        class="styled__StyledWidthSliderContainer-sc-1dtvgs1-43 dWMHAj"
+        class="styled__StyledWidthSliderContainer-sc-1dtvgs1-44 eZIjEo"
       >
         Max column width:
         <input
-          class="styled__StyledWidthSlider-sc-1dtvgs1-44 dMpTet"
+          class="styled__StyledWidthSlider-sc-1dtvgs1-45 gkWCPI"
           max="3"
           min="3"
           type="range"
@@ -45,7 +45,7 @@ exports[`AsciiViews AsciiView displays bodyMessage if no rows 1`] = `
     class="styled__PaddedDiv-sc-1dtvgs1-6 ccSRli"
   >
     <div
-      class="styled__StyledBodyMessage-sc-1dtvgs1-35 hfUgGP"
+      class="styled__StyledBodyMessage-sc-1dtvgs1-36 dLAxdh"
     >
       (no changes, no records)
     </div>

src/browser/modules/Stream/CypherFrame/__snapshots__/CodeView.test.js.snap

@@ -3,7 +3,7 @@
 exports[`CodeViews CodeStatusbar displays no statusBarMessage 1`] = `
 <div>
   <div
-    class="styled__StyledStatsBar-sc-1dtvgs1-32 hNrxzW"
+    class="styled__StyledStatsBar-sc-1dtvgs1-33 cjTact"
   >
     <div
       class="Ellipsis-sc-1dn9bou-0 gzqRPC"
@@ -15,7 +15,7 @@ exports[`CodeViews CodeStatusbar displays no statusBarMessage 1`] = `
 exports[`CodeViews CodeStatusbar displays statusBarMessage 1`] = `
 <div>
   <div
-    class="styled__StyledStatsBar-sc-1dtvgs1-32 hNrxzW"
+    class="styled__StyledStatsBar-sc-1dtvgs1-33 cjTact"
   >
     <div
       class="Ellipsis-sc-1dn9bou-0 gzqRPC"
@@ -34,85 +34,85 @@ exports[`CodeViews CodeView displays request and response info if successful que
     class="styled__PaddedDiv-sc-1dtvgs1-6 ccSRli"
   >
     <table
-      class="styled__StyledTable-sc-1dtvgs1-45 gRxPNQ"
+      class="styled__StyledTable-sc-1dtvgs1-46 fTaAJu"
     >
       <tbody
-        class="styled__StyledTBody-sc-1dtvgs1-46 kjlJBA"
+        class="styled__StyledTBody-sc-1dtvgs1-47 bwJrql"
       >
         <tr
-          class="styled__StyledAlteringTr-sc-1dtvgs1-48 bVMTCr"
+          class="styled__StyledAlteringTr-sc-1dtvgs1-49 dgZoom"
         >
           <td
-            class="styled__StyledStrongTd-sc-1dtvgs1-49 cyBixT"
+            class="styled__StyledStrongTd-sc-1dtvgs1-50 iVZzKL"
           >
             Server version
           </td>
           <td
-            class="styled__StyledTd-sc-1dtvgs1-50 eFHdOJ"
+            class="styled__StyledTd-sc-1dtvgs1-51 gDipvD"
           >
             xx1
           </td>
         </tr>
         <tr
-          class="styled__StyledAlteringTr-sc-1dtvgs1-48 bVMTCr"
+          class="styled__StyledAlteringTr-sc-1dtvgs1-49 dgZoom"
         >
           <td
-            class="styled__StyledStrongTd-sc-1dtvgs1-49 cyBixT"
+            class="styled__StyledStrongTd-sc-1dtvgs1-50 iVZzKL"
           >
             Server address
           </td>
           <td
-            class="styled__StyledTd-sc-1dtvgs1-50 eFHdOJ"
+            class="styled__StyledTd-sc-1dtvgs1-51 gDipvD"
           >
             xx2
           </td>
         </tr>
         <tr
-          class="styled__StyledAlteringTr-sc-1dtvgs1-48 bVMTCr"
+          class="styled__StyledAlteringTr-sc-1dtvgs1-49 dgZoom"
         >
           <td
-            class="styled__StyledStrongTd-sc-1dtvgs1-49 cyBixT"
+            class="styled__StyledStrongTd-sc-1dtvgs1-50 iVZzKL"
           >
             Query
           </td>
           <td
-            class="styled__StyledTd-sc-1dtvgs1-50 eFHdOJ"
+            class="styled__StyledTd-sc-1dtvgs1-51 gDipvD"
           >
             MATCH xx0
           </td>
         </tr>
         <tr
-          class="styled__StyledAlteringTr-sc-1dtvgs1-48 bVMTCr"
+          class="styled__StyledAlteringTr-sc-1dtvgs1-49 dgZoom"
         >
           <td
-            class="styled__StyledStrongTd-sc-1dtvgs1-49 cyBixT"
+            class="styled__StyledStrongTd-sc-1dtvgs1-50 iVZzKL"
           >
             Summary
             <div
-              class="fa fa-caret-right styled__StyledExpandable-sc-1dtvgs1-47 eeYvUX"
+              class="fa fa-caret-right styled__StyledExpandable-sc-1dtvgs1-48 jBrOTl"
               title="Expand section"
             />
           </td>
           <td
-            class="styled__StyledTd-sc-1dtvgs1-50 eFHdOJ"
+            class="styled__StyledTd-sc-1dtvgs1-51 gDipvD"
           >
             {,  "server": {,    "version": "xx1", ...
           </td>
         </tr>
         <tr
-          class="styled__StyledAlteringTr-sc-1dtvgs1-48 bVMTCr"
+          class="styled__StyledAlteringTr-sc-1dtvgs1-49 dgZoom"
         >
           <td
-            class="styled__StyledStrongTd-sc-1dtvgs1-49 cyBixT"
+            class="styled__StyledStrongTd-sc-1dtvgs1-50 iVZzKL"
           >
             Response
             <div
-              class="fa fa-caret-right styled__StyledExpandable-sc-1dtvgs1-47 eeYvUX"
+              class="fa fa-caret-right styled__StyledExpandable-sc-1dtvgs1-48 jBrOTl"
               title="Expand section"
             />
           </td>
           <td
-            class="styled__StyledTd-sc-1dtvgs1-50 eFHdOJ"
+            class="styled__StyledTd-sc-1dtvgs1-51 gDipvD"
           >
             [,  {,    "res": "xx3" ...
           </td>

src/browser/modules/Stream/CypherFrame/__snapshots__/ErrorsView.test.js.snap

@@ -6,7 +6,7 @@ exports[`ErrorsViews ErrorsStatusbar displays error 1`] = `
     class="Ellipsis-sc-1dn9bou-0 gzqRPC"
   >
     <span
-      class="styled__ErrorText-sc-1dtvgs1-29 dMsRZb"
+      class="styled__ErrorText-sc-1dtvgs1-30 kqUQfd"
       title="Test.Error: Test error description"
     >
       <i
@@ -40,7 +40,7 @@ exports[`ErrorsViews ErrorsView displays procedure link if unknown procedure 1`]
           ERROR
         </div>
         <h4
-          class="styled__StyledH4-sc-1dtvgs1-26 jXSkte"
+          class="styled__StyledErrorH4-sc-1dtvgs1-27 kqKuFe"
         >
           Neo.ClientError.Procedure.ProcedureNotFound
         </h4>
@@ -49,9 +49,9 @@ exports[`ErrorsViews ErrorsView displays procedure link if unknown procedure 1`]
         class="styled__StyledDiv-sc-1dtvgs1-17 kkPWFM"
       >
         <pre
-          class="styled__StyledPreformattedArea-sc-1dtvgs1-28 fxWKEH"
+          class="styled__StyledPreformattedArea-sc-1dtvgs1-29 ezHXzL"
         >
-          Neo.ClientError.Procedure.ProcedureNotFound: not found
+          not found
         </pre>
       </div>
       <div
@@ -88,7 +88,7 @@ exports[`ErrorsViews ErrorsView does displays an error 1`] = `
           ERROR
         </div>
         <h4
-          class="styled__StyledH4-sc-1dtvgs1-26 jXSkte"
+          class="styled__StyledErrorH4-sc-1dtvgs1-27 kqKuFe"
         >
           Test.Error
         </h4>
@@ -97,9 +97,9 @@ exports[`ErrorsViews ErrorsView does displays an error 1`] = `
         class="styled__StyledDiv-sc-1dtvgs1-17 kkPWFM"
       >
         <pre
-          class="styled__StyledPreformattedArea-sc-1dtvgs1-28 fxWKEH"
+          class="styled__StyledPreformattedArea-sc-1dtvgs1-29 ezHXzL"
         >
-          Test.Error: Test error description
+          Test error description
         </pre>
       </div>
     </div>