fix(ui): updated default positioning for adding aggregate funcs when …

…toggling from query builder (#17028)

fix(ui): updated default positioning for adding aggregate funcs when toggling from query builder

CHANGELOG.md

@@ -3,9 +3,11 @@
 ### Features
 
 ### Bug Fixes
+
 1. [17039](https://github.com/influxdata/influxdb/pull/17039): Fixed issue where tasks are exported for notification rules
 1. [17042](https://github.com/influxdata/influxdb/pull/17042): Fixed issue where tasks are not exported when exporting by org id
 1. [17070](https://github.com/influxdata/influxdb/pull/17070): Fixed issue where tasks with imports in query break in pkger
+1. [17028](https://github.com/influxdata/influxdb/pull/17028): Fixed issue where selecting an aggregate function in the script editor was not adding the function to a new line
 
 ## v2.0.0-beta.5 [2020-02-27]
 

ui/cypress/e2e/explorer.test.ts

@@ -369,6 +369,15 @@ describe('DataExplorer', () => {
       cy.getByTestID('switch-to-script-editor')
         .should('be.visible')
         .click()
+      cy.getByTestID('flux-function aggregate.rate').click()
+      // check to see if import is defaulted to the top
+      cy.get('.view-line')
+        .first()
+        .contains('import')
+      // check to see if new aggregate rate is at the bottom
+      cy.get('.view-line')
+        .last()
+        .contains('aggregate.')
       cy.getByTestID('flux-editor').should('exist')
       cy.getByTestID('flux-editor').within(() => {
         cy.get('textarea').type('yoyoyoyoyo', {force: true})

ui/src/timeMachine/components/TimeMachineFluxEditor.tsx

@@ -73,14 +73,28 @@ const TimeMachineFluxEditor: FC<Props> = ({
 
   const handleInsertFluxFunction = (func: FluxToolbarFunction): void => {
     const p = editorInstance.getPosition()
+    // sets the range based on the current position
+    let range = new window.monaco.Range(
+      p.lineNumber,
+      p.column,
+      p.lineNumber,
+      p.column
+    )
+    // edge case for when user toggles to the script editor
+    // this defaults the cursor to the initial position (top-left, 1:1 position)
+    if (p.lineNumber === 1 && p.column === 1) {
+      const [currentRange] = editorInstance.getVisibleRanges()
+      // adds the function to the end of the query
+      range = new window.monaco.Range(
+        currentRange.endLineNumber + 1,
+        p.column,
+        currentRange.endLineNumber + 1,
+        p.column
+      )
+    }
     const edits = [
       {
-        range: new window.monaco.Range(
-          p.lineNumber,
-          p.column,
-          p.lineNumber,
-          p.column
-        ),
+        range,
         text: formatFunctionForInsert(func.name, func.example),
       },
     ]

ui/src/timeMachine/utils/insertFunction.test.ts

@@ -0,0 +1,27 @@
+import {
+  generateImport,
+  formatFunctionForInsert,
+} from 'src/timeMachine/utils/insertFunction'
+
+describe('insertFunction', () => {
+  test('generateImport', () => {
+    const emptyImport = generateImport('', '')
+    expect(emptyImport).toEqual(false)
+    const func = 'aggregateWindow'
+    const script = `from(bucket: "b0")
+    |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
+    |> filter(fn: (r) => r._measurement == "m0")`
+    const actual = generateImport(func, script)
+    expect(actual).toEqual(`import "${func}"`)
+  })
+
+  test('formatFunctionForInsert', () => {
+    const fluxFunc = 'funky'
+    const union = 'union'
+    const requiresNewLine = formatFunctionForInsert(union, fluxFunc)
+    expect(requiresNewLine).toEqual(`\n${fluxFunc}`)
+    const to = 'to'
+    const fluxNewLine = formatFunctionForInsert(to, fluxFunc)
+    expect(fluxNewLine).toEqual(`\n  |> ${fluxFunc}`)
+  })
+})

ui/src/timeMachine/utils/insertFunction.ts

@@ -20,7 +20,7 @@ export const formatFunctionForInsert = (
     return `\n${fluxFunction}`
   }
 
-  return `  |> ${fluxFunction}`
+  return `\n  |> ${fluxFunction}`
 }
 
 export const generateImport = (