Move BodyDelete into func node menu

ui/src/flux/components/BodyBuilder.tsx

@@ -26,13 +26,10 @@ class BodyBuilder extends PureComponent<Props> {
 
     const bodybuilder = body.map((b, i) => {
       if (b.declarations.length) {
-        return b.declarations.map((d, dIndex) => {
+        return b.declarations.map(d => {
           if (d.funcs) {
             return (
               <div className="declaration" key={i}>
-                {!dIndex && (
-                  <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
-                )}
                 <VariableNode name={d.name} assignedToQuery={true} />
                 <ExpressionNode
                   bodyID={b.id}
@@ -41,6 +38,7 @@ class BodyBuilder extends PureComponent<Props> {
                   funcs={d.funcs}
                   declarationsFromBody={this.declarationsFromBody}
                   isLastBody={this.isLastBody(i)}
+                  onDeleteBody={onDeleteBody}
                 />
               </div>
             )
@@ -65,13 +63,13 @@ class BodyBuilder extends PureComponent<Props> {
 
       return (
         <div className="declaration" key={i}>
-          <BodyDelete bodyID={b.id} onDeleteBody={onDeleteBody} />
           <ExpressionNode
             bodyID={b.id}
             funcs={b.funcs}
             funcNames={this.funcNames}
             declarationsFromBody={this.declarationsFromBody}
             isLastBody={this.isLastBody(i)}
+            onDeleteBody={onDeleteBody}
           />
         </div>
       )

ui/src/flux/components/ExpressionNode.tsx

@@ -15,6 +15,7 @@ interface Props {
   declarationID?: string
   declarationsFromBody: string[]
   isLastBody: boolean
+  onDeleteBody: (bodyID: string) => void
 }
 
 interface State {
@@ -42,6 +43,7 @@ class ExpressionNode extends PureComponent<Props, State> {
       funcNames,
       funcs,
       declarationsFromBody,
+      onDeleteBody,
     } = this.props
 
     const {nonYieldableIndexesToggled} = this.state
@@ -106,6 +108,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                     onGenerateScript={onGenerateScript}
                     declarationsFromBody={declarationsFromBody}
                     onToggleYieldWithLast={this.handleToggleYieldWithLast}
+                    onDeleteBody={onDeleteBody}
                   />
                 )
 
@@ -152,6 +155,7 @@ class ExpressionNode extends PureComponent<Props, State> {
                         onGenerateScript={onGenerateScript}
                         declarationsFromBody={declarationsFromBody}
                         onToggleYieldWithLast={this.handleToggleYieldWithLast}
+                        onDeleteBody={onDeleteBody}
                       />
                       <YieldFuncNode
                         index={i}

ui/src/flux/components/FuncNode.tsx

@@ -2,7 +2,7 @@ import React, {PureComponent, MouseEvent} from 'react'
 import classnames from 'classnames'
 import _ from 'lodash'
 
-import ConfirmButton from 'src/shared/components/ConfirmButton'
+import BodyDelete from 'src/flux/components/BodyDelete'
 import FuncArgs from 'src/flux/components/FuncArgs'
 import FuncArgsPreview from 'src/flux/components/FuncArgsPreview'
 import {
@@ -29,6 +29,7 @@ interface Props {
   declarationsFromBody: string[]
   isYielding: boolean
   isYieldable: boolean
+  onDeleteBody: (bodyID: string) => void
 }
 
 interface State {
@@ -138,19 +139,10 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   private get deleteButton(): JSX.Element {
-    const {name} = this.props.func
+    const {func, bodyID, onDeleteBody} = this.props
 
-    if (name === 'from') {
-      return (
-        <ConfirmButton
-          icon="trash"
-          type="btn-danger"
-          confirmText="Delete this query"
-          square={true}
-          confirmAction={this.handleDelete}
-          position="right"
-        />
-      )
+    if (func.name === 'from') {
+      return <BodyDelete onDeleteBody={onDeleteBody} bodyID={bodyID} />
     }
 
     return (