feat(6063): suppport import statements with composition (#6088)

* chore(6063): add testcase for the composition supporting import statements outside block

* feat(6063): allow onChange detection based on snapshots of editor tech prior to change. That way we can compare the change postional info, with the snapshot state (where the composition block was) at the time that the change was applied. This also allows us to have lines added before the composition block, such as import statements, without diverging.

* chore: debug fluxQueryBuilder test suite

Author: wiedld

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -504,9 +504,27 @@ describe('Script Builder', () => {
             'disabled'
           )
 
+          cy.log(
+            'does not diverge, when adding import statement outside of block'
+          )
+          cy.getByTestID('flux-toolbar-search--input')
+            .should('exist')
+            .type('fieldsAsCols')
+          cy.get('.flux-toolbar--list-item').first().click()
+          cy.getByTestID('flux-editor').contains('import')
+          cy.getByTestID('flux-sync--toggle').should(
+            'not.have.class',
+            'disabled'
+          )
+
+          /// FIXME: Does not work yet, since the LSP response for applyEdit starts at line 0
+          // cy.log(
+          //   'does not diverge, when further modifying block (with imports at top)'
+          // )
+
           cy.log('does diverge, within block')
           cy.getByTestID('flux-editor').monacoType(
-            '{enter}{upArrow}{upArrow}{upArrow} // make diverge'
+            '{enter}{upArrow}{upArrow}{upArrow}{upArrow} // make diverge'
           )
           cy.log('toggle is now disabled')
           cy.getByTestID('flux-sync--toggle').should('have.class', 'disabled')

src/languageSupport/languages/flux/lsp/connection.ts

@@ -34,12 +34,18 @@ import {event} from 'src/cloud/utils/reporting'
 
 // hardcoded in LSP
 const COMPOSITION_YIELD = '_editor_composition'
-const COMPOSITION_INIT_LINE = 1
+
+const findLastIndex = (arr, fn) =>
+  (arr
+    .map((val, i) => [i, val])
+    .filter(([i, val]) => fn(val, i, arr))
+    .pop() || [-1])[0]
 
 class LspConnectionManager {
   private _worker: Worker
   private _editor: EditorType
   private _model: MonacoTypes.editor.IModel
+  private _snapshot: MonacoTypes.editor.ITextSnapshot
   private _preludeModel: MonacoTypes.editor.IModel
   private _variables: Variable[] = []
   private _compositionStyle: string[] = []
@@ -121,14 +127,19 @@ class LspConnectionManager {
     this._worker.postMessage(msg)
   }
 
-  _getCompositionBlockLines() {
-    const query = this._model.getValue()
-    if (!query.includes(COMPOSITION_YIELD)) {
+  _getCompositionBlockLines(query) {
+    if (!query || !query.includes(COMPOSITION_YIELD)) {
       return null
     }
-    const startLine = COMPOSITION_INIT_LINE
+    const lines = query.split('\n')
+    // monacoEditor line indexing starts at 1..n
     const endLine =
-      query.split('\n').findIndex(line => line.includes(COMPOSITION_YIELD)) + 1
+      lines.findIndex(line => line.includes(COMPOSITION_YIELD)) + 1
+    const startLine =
+      findLastIndex(lines.slice(0, endLine - 1), line =>
+        line.includes('from(')
+      ) + 1
+
     return {startLine, endLine}
   }
 
@@ -154,7 +165,11 @@ class LspConnectionManager {
   }
 
   _editorChangeIsWithinComposition(change) {
-    const compositionBlock = this._getCompositionBlockLines()
+    const compositionBlock = this._getCompositionBlockLines(
+      this._snapshot.read()
+    )
+    this._snapshot = this._model.createSnapshot()
+
     if (!compositionBlock) {
       return false
     }
@@ -196,7 +211,9 @@ class LspConnectionManager {
     })
 
     comments(this._editor, selection => {
-      const compositionBlock = this._getCompositionBlockLines()
+      const compositionBlock = this._getCompositionBlockLines(
+        this._model.getValue()
+      )
       if (!compositionBlock) {
         return
       }
@@ -241,19 +258,21 @@ class LspConnectionManager {
   }
 
   _setEditorBlockStyle(schema: CompositionSelection = this._session) {
-    const compositionBlock = this._getCompositionBlockLines()
+    const compositionBlock = this._getCompositionBlockLines(
+      this._model.getValue()
+    )
 
     const removeAllStyles = !compositionBlock || schema.composition.diverged
 
-    const compositionSyncStyle = this._compositionSyncStyle(
-      compositionBlock?.startLine,
-      compositionBlock?.endLine,
-      schema.composition.synced
-    )
-
     this._compositionStyle = this._editor.deltaDecorations(
       this._compositionStyle,
-      removeAllStyles ? [] : compositionSyncStyle
+      removeAllStyles
+        ? []
+        : this._compositionSyncStyle(
+            compositionBlock?.startLine,
+            compositionBlock?.endLine,
+            schema.composition.synced
+          )
     )
   }
 
@@ -404,6 +423,8 @@ class LspConnectionManager {
   }
 
   _initCompositionHandlers() {
+    this._snapshot = this._model.createSnapshot()
+
     // handlers to trigger end composition
     this._setEditorIrreversibleExit()