Release GQL Errors and Notifications support

e2e_tests/integration/editor.spec.ts

@@ -42,7 +42,7 @@ describe('Cypher Editor', () => {
     // It can take a little while for the label meta-data to update in the background
     cy.getEditor().type(selectAllAndDelete)
     cy.executeCommand('return extraTimeForMetadataupdate')
-    cy.resultContains('extraTimeForMetadataupdate')
+    cy.resultContains('ERROR')
     cy.wait(5000)
 
     cy.getEditor().type(selectAllAndDelete)

e2e_tests/integration/multistatements.spec.ts

@@ -32,6 +32,7 @@ describe('Multi statements', () => {
   after(() => {
     cy.disableMultiStatement()
   })
+
   it('can connect', () => {
     const password = Cypress.config('password')
     cy.connect('neo4j', password)
@@ -69,7 +70,7 @@ describe('Multi statements', () => {
     )
     cy.get('[data-testid="frameContents"]', { timeout: 10000 })
       .first()
-      .should('contain', 'Error')
+      .should('contain', 'ERROR')
 
     cy.get('[data-testid="navigationSettings"]').click()
     cy.get('[data-testid="setting-enableMultiStatementMode"]').click()
@@ -94,6 +95,7 @@ describe('Multi statements', () => {
       .first()
       .should('contain', 'ERROR')
   })
+
   it('Takes any statements (not just valid cypher and client commands)', () => {
     cy.executeCommand(':clear')
     const query = 'RETURN 1; hello1; RETURN 2; hello2;'
@@ -112,6 +114,7 @@ describe('Multi statements', () => {
       .first()
       .should('contain', 'ERROR')
   })
+
   if (Cypress.config('serverVersion') >= 4.1) {
     if (isEnterpriseEdition()) {
       it('Can use :use command in multi-statements', () => {

e2e_tests/integration/params.spec.ts

@@ -150,8 +150,8 @@ testData.forEach(testData => {
     it('can generate a set params template to use if query is missing params', () => {
       cy.executeCommand(':clear')
       cy.executeCommand('return $test1, $test2')
-      const expectedMessage = `Expected parameter(s): test1, test2`
-      cy.get('[data-testid="cypherFrameErrorMessage"]', { timeout: 20000 })
+      const expectedMessage = `Use this template to add missing parameter(s):`
+      cy.get('[data-testid="frameContents"]', { timeout: 20000 })
         .first()
         .should('contain', expectedMessage)
 

src/browser/modules/Stream/CypherFrame/ErrorsView/ErrorsView.test.tsx

@@ -38,8 +38,7 @@ const mount = (props: Partial<ErrorsViewProps>, state?: any) => {
     params: {},
     executeCmd: jest.fn(),
     setEditorContent: jest.fn(),
-    neo4jVersion: null,
-    gqlErrorsEnabled: true
+    neo4jVersion: null
   }
 
   const combinedProps = {
@@ -97,7 +96,7 @@ describe('ErrorsView', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('does display an error for gql status codes', () => {
+  test('does display an error for GQL status codes', () => {
     // Given
     const error: BrowserError = {
       code: 'Test.Error',
@@ -116,11 +115,8 @@ describe('ErrorsView', () => {
     const state = {
       meta: {
         server: {
-          version: '5.26.0'
+          version: '5.27.0'
         }
-      },
-      settings: {
-        enableGqlErrorsAndNotifications: true
       }
     }
 
@@ -131,7 +127,7 @@ describe('ErrorsView', () => {
     expect(container).toMatchSnapshot()
   })
 
-  test('does display a nested error for gql status codes', () => {
+  test('does display a nested error for GQL status codes', () => {
     // Given
     const error: BrowserError = {
       code: 'Test.Error',
@@ -159,11 +155,8 @@ describe('ErrorsView', () => {
     const state = {
       meta: {
         server: {
-          version: '5.26.0'
+          version: '5.27.0'
         }
-      },
-      settings: {
-        enableGqlErrorsAndNotifications: true
       }
     }
 

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

@@ -57,14 +57,50 @@ import {
 import { BrowserError } from 'services/exceptions'
 import { deepEquals } from 'neo4j-arc/common'
 import { getSemanticVersion } from 'shared/modules/dbMeta/dbMetaDuck'
-import { gte, SemVer } from 'semver'
+import { SemVer } from 'semver'
 import {
+  flattenAndInvertErrors,
   formatError,
-  formatErrorGqlStatusObject,
-  hasPopulatedGqlFields
+  FormattedError
 } from '../errorUtils'
-import { FIRST_GQL_ERRORS_SUPPORT } from 'shared/modules/features/versionedFeatures'
-import { shouldShowGqlErrorsAndNotifications } from 'shared/modules/settings/settingsDuck'
+import { gqlErrorsAndNotificationsEnabled } from 'services/gqlUtils'
+import styled from 'styled-components'
+
+const StyledErrorsViewInnerComponentContent = styled.div<{ nested: boolean }>`
+  padding-left: ${props => (props.nested ? '20px' : '0')};
+`
+
+type ErrorsViewInnerProps = {
+  formattedError: FormattedError
+  nested?: boolean
+}
+
+class ErrorsViewInnerComponent extends Component<ErrorsViewInnerProps> {
+  render(): null | JSX.Element {
+    const { formattedError, nested = false } = this.props
+
+    return (
+      <StyledErrorsViewInnerComponentContent nested={nested}>
+        <StyledHelpDescription>
+          {!nested && (
+            <React.Fragment>
+              <StyledCypherErrorMessage>ERROR</StyledCypherErrorMessage>
+              <StyledErrorH4>{formattedError.title}</StyledErrorH4>
+            </React.Fragment>
+          )}
+          {nested && <h6>{formattedError.title}</h6>}
+        </StyledHelpDescription>
+        {formattedError.description && (
+          <StyledDiv>
+            <StyledPreformattedArea data-testid={'cypherFrameErrorMessage'}>
+              {formattedError?.description}
+            </StyledPreformattedArea>
+          </StyledDiv>
+        )}
+      </StyledErrorsViewInnerComponentContent>
+    )
+  }
+}
 
 export type ErrorsViewProps = {
   result: BrowserRequestResult
@@ -74,14 +110,26 @@ export type ErrorsViewProps = {
   executeCmd: (cmd: string) => void
   setEditorContent: (cmd: string) => void
   depth?: number
-  gqlErrorsEnabled: boolean
+  gqlErrorsAndNotificationsEnabled?: boolean
+}
+
+type ErrorsViewState = {
+  nestedErrorsToggled: boolean
 }
 
-class ErrorsViewComponent extends Component<ErrorsViewProps> {
-  shouldComponentUpdate(props: ErrorsViewProps): boolean {
+class ErrorsViewComponent extends Component<ErrorsViewProps, ErrorsViewState> {
+  state = {
+    nestedErrorsToggled: false
+  }
+
+  shouldComponentUpdate(
+    props: ErrorsViewProps,
+    state: ErrorsViewState
+  ): boolean {
     return (
       !deepEquals(props.result, this.props.result) ||
-      !deepEquals(props.params, this.props.params)
+      !deepEquals(props.params, this.props.params) ||
+      !deepEquals(state, this.state)
     )
   }
 
@@ -92,19 +140,32 @@ class ErrorsViewComponent extends Component<ErrorsViewProps> {
       executeCmd,
       setEditorContent,
       neo4jVersion,
-      depth = 0,
-      gqlErrorsEnabled
+      gqlErrorsAndNotificationsEnabled = false
     } = this.props
 
     const error = this.props.result as BrowserError
+
+    const invertedErrors = flattenAndInvertErrors(
+      error,
+      gqlErrorsAndNotificationsEnabled
+    )
+    const [deepestError] = invertedErrors
+    const nestedErrors = invertedErrors.slice(1)
+    const togglable = nestedErrors.length > 0
+    const setNestedErrorsToggled = (toggled: boolean) => {
+      this.setState({
+        nestedErrorsToggled: toggled
+      })
+    }
+
     if (!error) {
       return null
     }
 
-    const formattedError =
-      gqlErrorsEnabled && hasPopulatedGqlFields(error)
-        ? formatErrorGqlStatusObject(error)
-        : formatError(error)
+    const formattedError = formatError(
+      deepestError,
+      gqlErrorsAndNotificationsEnabled
+    )
 
     if (!formattedError?.title) {
       return null
@@ -115,24 +176,9 @@ class ErrorsViewComponent extends Component<ErrorsViewProps> {
     }
 
     return (
-      <StyledHelpFrame nested={depth > 0}>
+      <StyledHelpFrame>
         <StyledHelpContent>
-          <StyledHelpDescription>
-            {depth === 0 && (
-              <StyledCypherErrorMessage>ERROR</StyledCypherErrorMessage>
-            )}
-            <StyledErrorH4>{formattedError.title}</StyledErrorH4>
-          </StyledHelpDescription>
-          {formattedError.description && (
-            <StyledDiv>
-              <StyledPreformattedArea data-testid={'cypherFrameErrorMessage'}>
-                {formattedError?.description}
-              </StyledPreformattedArea>
-            </StyledDiv>
-          )}
-          {formattedError.innerError && (
-            <ErrorsView result={formattedError.innerError} depth={depth + 1} />
-          )}
+          <ErrorsViewInnerComponent formattedError={formattedError} />
           {isUnknownProcedureError(error) && (
             <StyledLinkContainer>
               <StyledLink
@@ -170,24 +216,39 @@ class ErrorsViewComponent extends Component<ErrorsViewProps> {
               }
             />
           )}
+          {togglable && (
+            <StyledLinkContainer>
+              <StyledLink
+                onClick={() =>
+                  setNestedErrorsToggled(!this.state.nestedErrorsToggled)
+                }
+              >
+                &nbsp;
+                {this.state.nestedErrorsToggled ? 'Show less' : 'Show more'}
+              </StyledLink>
+            </StyledLinkContainer>
+          )}
+          {this.state.nestedErrorsToggled &&
+            nestedErrors.map((nestedError, index) => (
+              <ErrorsViewInnerComponent
+                key={index}
+                nested={true}
+                formattedError={formatError(
+                  nestedError,
+                  gqlErrorsAndNotificationsEnabled
+                )}
+              />
+            ))}
         </StyledHelpContent>
       </StyledHelpFrame>
     )
   }
 }
 
-const gqlErrorsEnabled = (state: GlobalState): boolean => {
-  const featureEnabled = shouldShowGqlErrorsAndNotifications(state)
-  const version = getSemanticVersion(state)
-  return version
-    ? featureEnabled && gte(version, FIRST_GQL_ERRORS_SUPPORT)
-    : false
-}
-
 const mapStateToProps = (state: GlobalState) => ({
   params: getParams(state),
   neo4jVersion: getSemanticVersion(state),
-  gqlErrorsEnabled: gqlErrorsEnabled(state)
+  gqlErrorsAndNotificationsEnabled: gqlErrorsAndNotificationsEnabled(state)
 })
 
 const mapDispatchToProps = (
@@ -206,6 +267,7 @@ const mapDispatchToProps = (
     }
   }
 }
+
 export const ErrorsView = withBus(
   connect(mapStateToProps, mapDispatchToProps)(ErrorsViewComponent)
 )