Merge pull request #3740 from influxdata/flux/delete-funcnode-and-yield

Delete func node and yield in builder

ui/src/flux/components/ExpressionNode.tsx

@@ -75,7 +75,6 @@ class ExpressionNode extends PureComponent<Props, State> {
                 if (func.name === 'filter') {
                   isAfterFilter = true
                 }
-
                 const isYieldable = isAfterFilter && isAfterRange
 
                 const funcNode = (

ui/src/flux/components/FuncNode.tsx

@@ -2,6 +2,7 @@ import React, {PureComponent, MouseEvent} from 'react'
 import classnames from 'classnames'
 import _ from 'lodash'
 
+import {getDeep} from 'src/utils/wrappers'
 import BodyDelete from 'src/flux/components/BodyDelete'
 import FuncArgs from 'src/flux/components/FuncArgs'
 import FuncArgsPreview from 'src/flux/components/FuncArgsPreview'
@@ -13,6 +14,7 @@ import {
   Func,
 } from 'src/types/flux'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+
 import {Service} from 'src/types'
 
 interface Props {
@@ -166,9 +168,31 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   private handleDelete = (): void => {
-    const {func, bodyID, declarationID} = this.props
+    const {
+      func,
+      funcs,
+      index,
+      bodyID,
+      declarationID,
+      isYielding,
+      isYieldedInScript,
+      onToggleYieldWithLast,
+    } = this.props
 
-    this.props.onDelete({funcID: func.id, bodyID, declarationID})
+    let yieldFuncNodeID: string
+
+    if (isYieldedInScript) {
+      yieldFuncNodeID = getDeep<string>(funcs, `${index + 1}.id`, '')
+    } else if (isYielding) {
+      onToggleYieldWithLast(index)
+    }
+
+    this.props.onDelete({
+      funcID: func.id,
+      yieldNodeID: yieldFuncNodeID,
+      bodyID,
+      declarationID,
+    })
   }
 
   private handleToggleEdit = (e: MouseEvent<HTMLElement>): void => {

ui/src/flux/containers/FluxPage.tsx

@@ -522,7 +522,7 @@ export class FluxPage extends PureComponent<Props, State> {
   }
 
   private handleDeleteFuncNode = (ids: DeleteFuncNodeArgs): void => {
-    const {funcID, declarationID = '', bodyID} = ids
+    const {funcID, declarationID = '', bodyID, yieldNodeID = ''} = ids
 
     const script = this.state.body
       .map((body, bodyIndex) => {
@@ -541,12 +541,17 @@ export class FluxPage extends PureComponent<Props, State> {
             return
           }
 
-          const functions = declaration.funcs.filter(f => f.id !== funcID)
+          const functions = declaration.funcs.filter(
+            f => f.id !== funcID && f.id !== yieldNodeID
+          )
+
           const s = this.funcsToSource(functions)
           return `${declaration.name} = ${this.formatLastSource(s, isLast)}`
         }
 
-        const funcs = body.funcs.filter(f => f.id !== funcID)
+        const funcs = body.funcs.filter(
+          f => f.id !== funcID && f.id !== yieldNodeID
+        )
         const source = this.funcsToSource(funcs)
         return this.formatLastSource(source, isLast)
       })

ui/src/types/flux.ts

@@ -45,6 +45,7 @@ export interface DeleteFuncNodeArgs {
   funcID: string
   bodyID: string
   declarationID?: string
+  yieldNodeID?: string
 }
 
 export interface InputArg {