import React, {PureComponent} from 'react'
import ConfirmButton from 'src/shared/components/ConfirmButton'

type BodyType = 'variable' | 'query'

interface Props {
  bodyID: string
  type?: BodyType
  onDeleteBody: (bodyID: string) => void
}

class BodyDelete extends PureComponent<Props> {
  public static defaultProps: Partial<Props> = {
    type: 'query',
  }

  public render() {
    return (
      <ConfirmButton
        icon="trash"
        type="btn-danger"
        confirmText={this.confirmText}
        square={true}
        confirmAction={this.handleDelete}
        position="right"
      />
    )
  }

  private handleDelete = (): void => {
    this.props.onDeleteBody(this.props.bodyID)
  }

  private get confirmText(): string {
    const {type} = this.props

    return `Delete this ${type}`
  }
}

export default BodyDelete

import React, {PureComponent} from 'react'
import ConfirmButton from 'src/shared/components/ConfirmButton'

interface Props {
  bodyID: string
  onDeleteBody: (bodyID: string) => void
}

class BodyDelete extends PureComponent<Props> {
  public render() {
    return (
      <ConfirmButton
        icon="trash"
        type="btn-danger"
        confirmText="Delete this query"
        square={true}
        confirmAction={this.handleDelete}
        position="right"
      />
    )
  }

  private handleDelete = (): void => {
    this.props.onDeleteBody(this.props.bodyID)
  }
}

export default BodyDelete

--- 
+++ 
@@ -1,18 +1,25 @@
 import React, {PureComponent} from 'react'
 import ConfirmButton from 'src/shared/components/ConfirmButton'
 
+type BodyType = 'variable' | 'query'
+
 interface Props {
   bodyID: string
+  type?: BodyType
   onDeleteBody: (bodyID: string) => void
 }
 
 class BodyDelete extends PureComponent<Props> {
+  public static defaultProps: Partial<Props> = {
+    type: 'query',
+  }
+
   public render() {
     return (
       <ConfirmButton
         icon="trash"
         type="btn-danger"
-        confirmText="Delete this query"
+        confirmText={this.confirmText}
         square={true}
         confirmAction={this.handleDelete}
         position="right"
@@ -23,6 +30,12 @@
   private handleDelete = (): void => {
     this.props.onDeleteBody(this.props.bodyID)
   }
+
+  private get confirmText(): string {
+    const {type} = this.props
+
+    return `Delete this ${type}`
+  }
 }
 
 export default BodyDelete
Allow for optional "type" for body delete

Used in the confirmation dialog to refer correctly to the object being
deleted
