Merge pull request #3096 from influxdata/polish/confirmation-buttons

Standardize Confirmation Buttons
2018-03-30 11:21:21 -07:00 · 2018-03-30 11:21:21 -07:00 · 99d32f68fa
parent e9ce13f18d ae004b9617
commit 99d32f68fa
34 changed files with 516 additions and 731 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,6 +6,9 @@

 ### UI Improvements

+1.  [#3096](https://github.com/influxdata/chronograf/pull/3096): Standardize delete confirmation interactions
+1.  [#3096](https://github.com/influxdata/chronograf/pull/3096): Standardize save & cancel interactions
+
 ### Bug Fixes

 1.  [#2950](https://github.com/influxdata/chronograf/pull/2094): Always save template variables on first edit
@ -58,6 +61,7 @@
 ## v1.4.2.1 [2018-02-28]

 ### Features
+
 1.  [#2837](https://github.com/influxdata/chronograf/pull/2837): Prevent execution of queries in cells that are not in view on the dashboard page
 1.  [#2829](https://github.com/influxdata/chronograf/pull/2829): Add an optional persistent legend which can toggle series visibility to dashboard cells
 1.  [#2846](https://github.com/influxdata/chronograf/pull/2846): Allow user to annotate graphs via UI or API
--- a/ui/src/admin/components/ChangePassRow.js
+++ b/ui/src/admin/components/ChangePassRow.js
@ -2,7 +2,7 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'

 import OnClickOutside from 'shared/components/OnClickOutside'
-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'

 class ChangePassRow extends Component {
  constructor(props) {
@ -59,7 +59,7 @@ class ChangePassRow extends Component {
            onKeyPress={this.handleKeyPress(user)}
            autoFocus={true}
          />
-          <ConfirmButtons
+          <ConfirmOrCancel
            onConfirm={this.handleSubmit}
            item={user}
            onCancel={this.handleCancel}
--- a/ui/src/admin/components/DatabaseRow.js
+++ b/ui/src/admin/components/DatabaseRow.js
@ -8,7 +8,7 @@ import onClickOutside from 'react-onclickoutside'
 import {notify as notifyAction} from 'shared/actions/notifications'

 import {formatRPDuration} from 'utils/formatting'
-import YesNoButtons from 'shared/components/YesNoButtons'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import {DATABASE_TABLE} from 'src/admin/constants/tableSizing'
 import {notifyRetentionPolicyCantHaveEmptyFields} from 'shared/copy/notifications'

@ -17,7 +17,6 @@ class DatabaseRow extends Component {
    super(props)
    this.state = {
      isEditing: false,
-      isDeleting: false,
    }
  }

@ -39,7 +38,6 @@ class DatabaseRow extends Component {
    }

    this.handleEndEdit()
-    this.handleEndDelete()
  }

  handleStartEdit = () => {
@ -50,14 +48,6 @@ class DatabaseRow extends Component {
    this.setState({isEditing: false})
  }

-  handleStartDelete = () => {
-    this.setState({isDeleting: true})
-  }
-
-  handleEndDelete = () => {
-    this.setState({isDeleting: false})
-  }
-
  handleCreate = () => {
    const {database, retentionPolicy, onCreate} = this.props
    const validInputs = this.getInputValues()
@ -140,7 +130,7 @@ class DatabaseRow extends Component {
      isDeletable,
      isRFDisplayed,
    } = this.props
-    const {isEditing, isDeleting} = this.state
+    const {isEditing} = this.state

    const formattedDuration = formatRPDuration(duration)

@ -198,11 +188,18 @@ class DatabaseRow extends Component {
            className="text-right"
            style={{width: `${DATABASE_TABLE.colDelete}px`}}
          >
-            <YesNoButtons
-              buttonSize="btn-xs"
-              onConfirm={isNew ? this.handleCreate : this.handleUpdate}
-              onCancel={isNew ? this.handleRemove : this.handleEndEdit}
-            />
+            <button
+              className="btn btn-xs btn-info"
+              onClick={isNew ? this.handleRemove : this.handleEndEdit}
+            >
+              Cancel
+            </button>
+            <button
+              className="btn btn-xs btn-success"
+              onClick={isNew ? this.handleCreate : this.handleUpdate}
+            >
+              Save
+            </button>
          </td>
        </tr>
      )
@ -216,17 +213,11 @@ class DatabaseRow extends Component {
            <span className="default-source-label">default</span>
          ) : null}
        </td>
-        <td
-          onClick={this.handleStartEdit}
-          style={{width: `${DATABASE_TABLE.colDuration}px`}}
-        >
+        <td style={{width: `${DATABASE_TABLE.colDuration}px`}}>
          {formattedDuration}
        </td>
        {isRFDisplayed ? (
-          <td
-            onClick={this.handleStartEdit}
-            style={{width: `${DATABASE_TABLE.colReplication}px`}}
-          >
+          <td style={{width: `${DATABASE_TABLE.colReplication}px`}}>
            {replication}
          </td>
        ) : null}
@ -234,21 +225,20 @@ class DatabaseRow extends Component {
          className="text-right"
          style={{width: `${DATABASE_TABLE.colDelete}px`}}
        >
-          {isDeleting ? (
-            <YesNoButtons
-              onConfirm={onDelete(database, retentionPolicy)}
-              onCancel={this.handleEndDelete}
-              buttonSize="btn-xs"
-            />
-          ) : (
-            <button
-              className="btn btn-danger btn-xs table--show-on-row-hover"
-              style={isDeletable ? {} : {visibility: 'hidden'}}
-              onClick={this.handleStartDelete}
-            >
-              {`Delete ${name}`}
-            </button>
-          )}
+          <button
+            className="btn btn-xs btn-info table--show-on-row-hover"
+            onClick={this.handleStartEdit}
+          >
+            Edit
+          </button>
+          <ConfirmButton
+            text={`Delete ${name}`}
+            confirmAction={onDelete(database, retentionPolicy)}
+            size="btn-xs"
+            type="btn-danger"
+            customClass="table--show-on-row-hover"
+            disabled={!isDeletable}
+          />
        </td>
      </tr>
    )
--- a/ui/src/admin/components/DatabaseTableHeader.js
+++ b/ui/src/admin/components/DatabaseTableHeader.js
@ -5,7 +5,7 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'

 import {notify as notifyAction} from 'shared/actions/notifications'
-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
 import {notifyDatabaseDeleteConfirmationRequired} from 'shared/copy/notifications'

 const DatabaseTableHeader = ({
@ -101,7 +101,7 @@ const Header = ({
        autoComplete={false}
        spellCheck={false}
      />
-      <ConfirmButtons
+      <ConfirmOrCancel
        item={database}
        onConfirm={onConfirm}
        onCancel={onCancel}
@ -132,7 +132,11 @@ const EditHeader = ({database, onEdit, onKeyDown, onConfirm, onCancel}) => (
      spellCheck={false}
      autoComplete={false}
    />
-    <ConfirmButtons item={database} onConfirm={onConfirm} onCancel={onCancel} />
+    <ConfirmOrCancel
+      item={database}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    />
  </div>
 )

--- a/ui/src/admin/components/QueryRow.js
+++ b/ui/src/admin/components/QueryRow.js
@ -1,72 +1,43 @@
-import React, {Component} from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'

-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import {QUERIES_TABLE} from 'src/admin/constants/tableSizing'

-class QueryRow extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      confirmingKill: false,
-    }
+const QueryRow = ({query, onKill}) => {
+  const {database, duration} = query
+  const wrappedKill = () => {
+    onKill(query.id)
  }

-  handleInitiateKill = () => {
-    this.setState({confirmingKill: true})
-  }
-
-  handleFinishHim = () => {
-    this.props.onKill(this.props.query.id)
-  }
-
-  handleShowMercy = () => {
-    this.setState({confirmingKill: false})
-  }
-
-  render() {
-    const {query: {database, query, duration}} = this.props
-
-    return (
-      <tr>
-        <td
-          style={{width: `${QUERIES_TABLE.colDatabase}px`}}
-          className="monotype"
-        >
-          {database}
-        </td>
-        <td>
-          <code>{query}</code>
-        </td>
-        <td
-          style={{width: `${QUERIES_TABLE.colRunning}px`}}
-          className="monotype"
-        >
-          {duration}
-        </td>
-        <td
-          style={{width: `${QUERIES_TABLE.colKillQuery}px`}}
-          className="text-right"
-        >
-          {this.state.confirmingKill ? (
-            <ConfirmButtons
-              onConfirm={this.handleFinishHim}
-              onCancel={this.handleShowMercy}
-              buttonSize="btn-xs"
-            />
-          ) : (
-            <button
-              className="btn btn-xs btn-danger table--show-on-row-hover"
-              onClick={this.handleInitiateKill}
-            >
-              Kill
-            </button>
-          )}
-        </td>
-      </tr>
-    )
-  }
+  return (
+    <tr>
+      <td
+        style={{width: `${QUERIES_TABLE.colDatabase}px`}}
+        className="monotype"
+      >
+        {database}
+      </td>
+      <td>
+        <code>{query.query}</code>
+      </td>
+      <td style={{width: `${QUERIES_TABLE.colRunning}px`}} className="monotype">
+        {duration}
+      </td>
+      <td
+        style={{width: `${QUERIES_TABLE.colKillQuery}px`}}
+        className="text-right"
+      >
+        <ConfirmButton
+          text="Kill"
+          confirmAction={wrappedKill}
+          size="btn-xs"
+          type="btn-danger"
+          customClass="table--show-on-row-hover"
+        />
+      </td>
+    </tr>
+  )
 }

 const {func, shape} = PropTypes
--- a/ui/src/admin/components/RoleRow.js
+++ b/ui/src/admin/components/RoleRow.js
@ -6,8 +6,8 @@ import classnames from 'classnames'

 import RoleEditingRow from 'src/admin/components/RoleEditingRow'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
-import ConfirmButtons from 'shared/components/ConfirmButtons'
-import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import {ROLES_TABLE} from 'src/admin/constants/tableSizing'

 const RoleRow = ({
@ -51,7 +51,7 @@ const RoleRow = ({
          className="text-right"
          style={{width: `${ROLES_TABLE.colDelete}px`}}
        >
-          <ConfirmButtons
+          <ConfirmOrCancel
            item={role}
            onConfirm={onSave}
            onCancel={onCancel}
@ -62,6 +62,10 @@ const RoleRow = ({
    )
  }

+  const wrappedDelete = () => {
+    onDelete(role)
+  }
+
  return (
    <tr>
      <td style={{width: `${ROLES_TABLE.colName}px`}}>{roleName}</td>
@ -97,11 +101,15 @@ const RoleRow = ({
          />
        ) : null}
      </td>
-      <DeleteConfirmTableCell
-        onDelete={onDelete}
-        item={role}
-        buttonSize="btn-xs"
-      />
+      <td className="text-right">
+        <ConfirmButton
+          customClass="table--show-on-row-hover"
+          size="btn-xs"
+          type="btn-danger"
+          text="Delete Role"
+          confirmAction={wrappedDelete}
+        />
+      </td>
    </tr>
  )
 }
--- a/ui/src/admin/components/UserRow.js
+++ b/ui/src/admin/components/UserRow.js
@ -7,8 +7,8 @@ import classnames from 'classnames'
 import UserEditName from 'src/admin/components/UserEditName'
 import UserNewPassword from 'src/admin/components/UserNewPassword'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
-import ConfirmButtons from 'shared/components/ConfirmButtons'
-import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import ChangePassRow from 'src/admin/components/ChangePassRow'
 import {USERS_TABLE} from 'src/admin/constants/tableSizing'

@ -46,6 +46,10 @@ const UserRow = ({

  const perms = _.get(permissions, ['0', 'allowed'], [])

+  const wrappedDelete = () => {
+    onDelete(user)
+  }
+
  if (isEditing) {
    return (
      <tr className="admin-table--edit-row">
@ -62,7 +66,7 @@ const UserRow = ({
          className="text-right"
          style={{width: `${USERS_TABLE.colDelete}px`}}
        >
-          <ConfirmButtons
+          <ConfirmOrCancel
            item={user}
            onConfirm={onSave}
            onCancel={onCancel}
@ -118,11 +122,15 @@ const UserRow = ({
          />
        ) : null}
      </td>
-      <DeleteConfirmTableCell
-        onDelete={onDelete}
-        item={user}
-        buttonSize="btn-xs"
-      />
+      <td className="text-right" style={{width: `${USERS_TABLE.colDelete}px`}}>
+        <ConfirmButton
+          size="btn-xs"
+          type="btn-danger"
+          text="Delete User"
+          confirmAction={wrappedDelete}
+          customClass="table--show-on-row-hover"
+        />
+      </td>
    </tr>
  )
 }
--- a/ui/src/admin/components/chronograf/OrganizationsTableRow.js
+++ b/ui/src/admin/components/chronograf/OrganizationsTableRow.js
@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {withRouter} from 'react-router'

-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import Dropdown from 'shared/components/Dropdown'
 import InputClickToEdit from 'shared/components/InputClickToEdit'

@ -13,32 +13,7 @@ import {meChangeOrganizationAsync} from 'shared/actions/auth'
 import {DEFAULT_ORG_ID} from 'src/admin/constants/chronografAdmin'
 import {USER_ROLES} from 'src/admin/constants/chronografAdmin'

-const OrganizationsTableRowDeleteButton = ({organization, onClickDelete}) =>
-  organization.id === DEFAULT_ORG_ID ? (
-    <button
-      className="btn btn-sm btn-default btn-square orgs-table--delete"
-      disabled={true}
-    >
-      <span className="icon trash" />
-    </button>
-  ) : (
-    <button
-      className="btn btn-sm btn-default btn-square"
-      onClick={onClickDelete}
-    >
-      <span className="icon trash" />
-    </button>
-  )
-
 class OrganizationsTableRow extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      isDeleting: false,
-    }
-  }
-
  handleChangeCurrentOrganization = async () => {
    const {router, links, meChangeOrganization, organization} = this.props

@ -49,13 +24,6 @@ class OrganizationsTableRow extends Component {
    const {organization, onRename} = this.props
    onRename(organization, newName)
  }
-  handleDeleteClick = () => {
-    this.setState({isDeleting: true})
-  }
-
-  handleDismissDeleteConfirmation = () => {
-    this.setState({isDeleting: false})
-  }

  handleDeleteOrg = organization => {
    const {onDelete} = this.props
@ -68,7 +36,6 @@ class OrganizationsTableRow extends Component {
  }

  render() {
-    const {isDeleting} = this.state
    const {organization, currentOrganization} = this.props

    const dropdownRolesItems = USER_ROLES.map(role => ({
@ -76,10 +43,6 @@ class OrganizationsTableRow extends Component {
      text: role.name,
    }))

-    const defaultRoleClassName = isDeleting
-      ? 'fancytable--td orgs-table--default-role deleting'
-      : 'fancytable--td orgs-table--default-role'
-
    return (
      <div className="fancytable--row">
        <div className="fancytable--td orgs-table--active">
@ -101,7 +64,7 @@ class OrganizationsTableRow extends Component {
          wrapperClass="fancytable--td orgs-table--name"
          onBlur={this.handleUpdateOrgName}
        />
-        <div className={defaultRoleClassName}>
+        <div className="fancytable--td orgs-table--default-role">
          <Dropdown
            items={dropdownRolesItems}
            onChoose={this.handleChooseDefaultRole}
@ -109,21 +72,14 @@ class OrganizationsTableRow extends Component {
            className="dropdown-stretch"
          />
        </div>
-        {isDeleting ? (
-          <ConfirmButtons
-            item={organization}
-            onCancel={this.handleDismissDeleteConfirmation}
-            onConfirm={this.handleDeleteOrg}
-            onClickOutside={this.handleDismissDeleteConfirmation}
-            confirmLeft={true}
-            confirmTitle="Delete"
-          />
-        ) : (
-          <OrganizationsTableRowDeleteButton
-            organization={organization}
-            onClickDelete={this.handleDeleteClick}
-          />
-        )}
+        <ConfirmButton
+          confirmAction={this.handleDeleteOrg}
+          confirmText="Delete Organization?"
+          size="btn-sm"
+          square={true}
+          icon="trash"
+          disabled={organization.id === DEFAULT_ORG_ID}
+        />
      </div>
    )
  }
@ -161,15 +117,6 @@ OrganizationsTableRow.propTypes = {
  meChangeOrganization: func.isRequired,
 }

-OrganizationsTableRowDeleteButton.propTypes = {
-  organization: shape({
-    id: string, // when optimistically created, organization will not have an id
-    name: string.isRequired,
-    defaultRole: string.isRequired,
-  }).isRequired,
-  onClickDelete: func.isRequired,
-}
-
 const mapDispatchToProps = dispatch => ({
  meChangeOrganization: bindActionCreators(meChangeOrganizationAsync, dispatch),
 })
--- a/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js
+++ b/ui/src/admin/components/chronograf/OrganizationsTableRowNew.js
@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'

-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
 import Dropdown from 'shared/components/Dropdown'

 import {USER_ROLES} from 'src/admin/constants/chronografAdmin'
@ -74,7 +74,7 @@ class OrganizationsTableRowNew extends Component {
            ref={r => (this.inputRef = r)}
          />
        </div>
-        <div className="fancytable--td orgs-table--default-role deleting">
+        <div className="fancytable--td orgs-table--default-role creating">
          <Dropdown
            items={dropdownRolesItems}
            onChoose={this.handleChooseDefaultRole}
@ -82,7 +82,7 @@ class OrganizationsTableRowNew extends Component {
            className="dropdown-stretch"
          />
        </div>
-        <ConfirmButtons
+        <ConfirmOrCancel
          disabled={isSaveDisabled}
          onCancel={onCancelCreateOrganization}
          onConfirm={this.handleClickSave}
--- a/ui/src/admin/components/chronograf/ProvidersTableRow.js
+++ b/ui/src/admin/components/chronograf/ProvidersTableRow.js
@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'

-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmButton from 'shared/components/ConfirmButton'
 import Dropdown from 'shared/components/Dropdown'
 import InputClickToEdit from 'shared/components/InputClickToEdit'

@ -13,21 +13,11 @@ class ProvidersTableRow extends Component {

    this.state = {
      ...this.props.mapping,
-      isDeleting: false,
    }
  }

-  handleDeleteClick = () => {
-    this.setState({isDeleting: true})
-  }
-
-  handleDismissDeleteConfirmation = () => {
-    this.setState({isDeleting: false})
-  }
-
  handleDeleteMap = mapping => {
    const {onDelete} = this.props
-    this.setState({isDeleting: false})
    onDelete(mapping)
  }

@ -106,22 +96,13 @@ class ProvidersTableRow extends Component {
            disabled={isDefaultMapping}
          />
        </div>
-        {isDeleting ? (
-          <ConfirmButtons
-            item={mapping}
-            onCancel={this.handleDismissDeleteConfirmation}
-            onConfirm={this.handleDeleteMap}
-            onClickOutside={this.handleDismissDeleteConfirmation}
-            confirmTitle="Delete"
-          />
-        ) : (
-          <button
-            className="btn btn-sm btn-default btn-square"
-            onClick={this.handleDeleteClick}
-          >
-            <span className="icon trash" />
-          </button>
-        )}
+        <ConfirmButton
+          square={true}
+          icon="trash"
+          confirmAction={this.handleDeleteMap}
+          confirmText="Delete this Mapping?"
+          disabled={isDefaultMapping}
+        />
      </div>
    )
  }
--- a/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
+++ b/ui/src/admin/components/chronograf/ProvidersTableRowNew.tsx
@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react'

-import ConfirmButtons from 'src/shared/components/ConfirmButtons'
+import ConfirmOrCancel from 'src/shared/components/ConfirmOrCancel'
 import Dropdown from 'src/shared/components/Dropdown'
 import InputClickToEdit from 'src/shared/components/InputClickToEdit'

@ -89,7 +89,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
        <div className="fancytable--td provider--arrow">
          <span />
        </div>
-        <div className="fancytable--td provider--redirect deleting">
+        <div className="fancytable--td provider--redirect creating">
          <Dropdown
            items={dropdownItems}
            onChoose={this.handleChooseOrganization}
@ -97,7 +97,7 @@ class ProvidersTableRowNew extends PureComponent<Props, State> {
            className="dropdown-stretch"
          />
        </div>
-        <ConfirmButtons
+        <ConfirmOrCancel
          onCancel={onCancel}
          onConfirm={this.handleSaveNewMapping}
          isDisabled={preventCreate}
--- a/ui/src/admin/components/chronograf/UsersTableRow.js
+++ b/ui/src/admin/components/chronograf/UsersTableRow.js
@ -58,14 +58,16 @@ const UsersTableRow = ({
      </td>
      <td style={{width: colProvider}}>{user.provider}</td>
      <td style={{width: colScheme}}>{user.scheme}</td>
-      <ConfirmButton
-        confirmText={removeWarning}
-        confirmAction={wrappedDelete}
-        size="btn-xs"
-        type="btn-danger"
-        text="Remove"
-        customClass="table--show-on-row-hover"
-      />
+      <td className="text-right">
+        <ConfirmButton
+          confirmText={removeWarning}
+          confirmAction={wrappedDelete}
+          size="btn-xs"
+          type="btn-danger"
+          text="Remove"
+          customClass="table--show-on-row-hover"
+        />
+      </td>
    </tr>
  )
 }
--- a/ui/src/admin/constants/tableSizing.js
+++ b/ui/src/admin/constants/tableSizing.js
@ -3,13 +3,13 @@ export const USERS_TABLE = {
  colPassword: 186,
  colRoles: 190,
  colPermissions: 190,
-  colDelete: 70,
+  colDelete: 110,
 }
 export const ROLES_TABLE = {
  colName: 280,
  colUsers: 200,
  colPermissions: 200,
-  colDelete: 70,
+  colDelete: 110,
 }
 export const QUERIES_TABLE = {
  colDatabase: 160,
--- a/ui/src/dashboards/components/DashboardsTable.js
+++ b/ui/src/dashboards/components/DashboardsTable.js
@ -5,7 +5,7 @@ import _ from 'lodash'

 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'

-import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
+import ConfirmButton from 'shared/components/ConfirmButton'

 const AuthorizedEmptyState = ({onCreateDashboard}) => (
  <div className="generic-empty-state">
@ -35,6 +35,9 @@ const DashboardsTable = ({
  onCreateDashboard,
  dashboardLink,
 }) => {
+  const wrappedDelete = dashboard => () => {
+    onDeleteDashboard(dashboard)
+  }
  return dashboards && dashboards.length ? (
    <table className="table v-center admin-table table-highlight">
      <thead>
@ -67,11 +70,15 @@ const DashboardsTable = ({
              requiredRole={EDITOR_ROLE}
              replaceWithIfNotAuthorized={<td />}
            >
-              <DeleteConfirmTableCell
-                onDelete={onDeleteDashboard}
-                item={dashboard}
-                buttonSize="btn-xs"
-              />
+              <td className="text-right">
+                <ConfirmButton
+                  confirmAction={wrappedDelete}
+                  size="btn-xs"
+                  type="btn-danger"
+                  text="Delete"
+                  customClass="table--show-on-row-hover"
+                />
+              </td>
            </Authorized>
          </tr>
        ))}
--- a/ui/src/dashboards/components/OverlayControls.js
+++ b/ui/src/dashboards/components/OverlayControls.js
@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'

-import ConfirmButtons from 'shared/components/ConfirmButtons'
+import ConfirmOrCancel from 'shared/components/ConfirmOrCancel'
 import SourceSelector from 'src/dashboards/components/SourceSelector'

 const OverlayControls = ({
@ -44,7 +44,7 @@ const OverlayControls = ({
      </li>
    </ul>
    <div className="overlay-controls--right">
-      <ConfirmButtons
+      <ConfirmOrCancel
        onCancel={onCancel}
        onConfirm={onSave}
        isDisabled={!isSavable}
--- a/ui/src/dashboards/components/template_variables/Row.js
+++ b/ui/src/dashboards/components/template_variables/Row.js
@ -12,7 +12,7 @@ import Dropdown from 'shared/components/Dropdown'
 import TemplateQueryBuilder from 'src/dashboards/components/template_variables/TemplateQueryBuilder'
 import TableInput from 'src/dashboards/components/template_variables/TableInput'
 import RowValues from 'src/dashboards/components/template_variables/RowValues'
-import RowButtons from 'src/dashboards/components/template_variables/RowButtons'
+import ConfirmButton from 'src/shared/components/ConfirmButton'

 import {runTemplateVariableQuery as runTemplateVariableQueryAJAX} from 'src/dashboards/apis'

@ -95,15 +95,31 @@ const TemplateVariableRow = ({
        autoFocusTarget={autoFocusTarget}
      />
    </div>
-    <div className="tvm--col-4">
-      <RowButtons
-        onStartEdit={onStartEdit}
-        isEditing={isEditing}
-        onCancelEdit={onCancelEdit}
-        onDelete={onDeleteTempVar}
-        id={id}
-        selectedType={selectedType}
-      />
+    <div className={`tvm--col-4${isEditing ? ' editing' : ''}`}>
+      {isEditing ? (
+        <div className="tvm-actions">
+          <button
+            className="btn btn-sm btn-info btn-square"
+            type="button"
+            onClick={onCancelEdit}
+          >
+            <span className="icon remove" />
+          </button>
+          <button className="btn btn-sm btn-success btn-square" type="submit">
+            <span className="icon checkmark" />
+          </button>
+        </div>
+      ) : (
+        <div className="tvm-actions">
+          <ConfirmButton
+            type="btn-danger"
+            confirmText="Delete template variable?"
+            confirmAction={onDeleteTempVar(id)}
+            icon="trash"
+            square={true}
+          />
+        </div>
+      )}
    </div>
  </form>
 )
--- a/ui/src/dashboards/components/template_variables/RowButtons.js
+++ b/ui/src/dashboards/components/template_variables/RowButtons.js
@ -1,51 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
-
-const RowButtons = ({onStartEdit, isEditing, onCancelEdit, onDelete, id}) => {
-  if (isEditing) {
-    return (
-      <div className="tvm-actions">
-        <button
-          className="btn btn-sm btn-info btn-square"
-          type="button"
-          onClick={onCancelEdit}
-        >
-          <span className="icon remove" />
-        </button>
-        <button className="btn btn-sm btn-success btn-square" type="submit">
-          <span className="icon checkmark" />
-        </button>
-      </div>
-    )
-  }
-  return (
-    <div className="tvm-actions">
-      <DeleteConfirmButtons
-        onDelete={onDelete(id)}
-        icon="remove"
-        square={true}
-      />
-      <button
-        className="btn btn-sm btn-info btn-edit btn-square"
-        type="button"
-        onClick={onStartEdit('tempVar')}
-      >
-        <span className="icon pencil" />
-      </button>
-    </div>
-  )
-}
-
-const {bool, func, string} = PropTypes
-
-RowButtons.propTypes = {
-  onStartEdit: func.isRequired,
-  isEditing: bool.isRequired,
-  onCancelEdit: func.isRequired,
-  onDelete: func.isRequired,
-  id: string.isRequired,
-  selectedType: string.isRequired,
-}
-
-export default RowButtons
--- a/ui/src/shared/components/ConfirmOrCancel.tsx
+++ b/ui/src/shared/components/ConfirmOrCancel.tsx
@ -18,16 +18,19 @@ interface CancelProps {
  buttonSize: string
  onCancel: () => void
  icon: string
+  title: string
 }
-interface ConfirmButtonsProps {
+
+interface ConfirmOrCancelProps {
  onConfirm: (item: Item) => void
  item: Item
  onCancel: (item: Item) => void
  buttonSize?: string
  isDisabled?: boolean
  onClickOutside?: (item: Item) => void
-  confirmLeft?: boolean
+  reversed?: boolean
  confirmTitle?: string
+  cancelTitle?: string
 }

 export const Confirm: SFC<ConfirmProps> = ({
@ -39,9 +42,12 @@ export const Confirm: SFC<ConfirmProps> = ({
 }) => (
  <button
    data-test="confirm"
-    className={classnames('btn btn-success btn-square', {
-      [buttonSize]: buttonSize,
-    })}
+    className={classnames(
+      'confirm-or-cancel--confirm btn btn-success btn-square',
+      {
+        [buttonSize]: buttonSize,
+      }
+    )}
    disabled={isDisabled}
    title={isDisabled ? `Cannot ${title}` : title}
    onClick={onConfirm}
@ -50,22 +56,29 @@ export const Confirm: SFC<ConfirmProps> = ({
  </button>
 )

-export const Cancel: SFC<CancelProps> = ({buttonSize, onCancel, icon}) => (
+export const Cancel: SFC<CancelProps> = ({
+  buttonSize,
+  onCancel,
+  icon,
+  title,
+}) => (
  <button
    data-test="cancel"
-    className={classnames('btn btn-info btn-square', {
+    className={classnames('confirm-or-cancel--cancel btn btn-info btn-square', {
      [buttonSize]: buttonSize,
    })}
    onClick={onCancel}
+    title={title}
  >
    <span className={icon} />
  </button>
 )

-class ConfirmButtons extends PureComponent<ConfirmButtonsProps, {}> {
-  public static defaultProps: Partial<ConfirmButtonsProps> = {
+class ConfirmOrCancel extends PureComponent<ConfirmOrCancelProps, {}> {
+  public static defaultProps: Partial<ConfirmOrCancelProps> = {
    buttonSize: 'btn-sm',
    confirmTitle: 'Save',
+    cancelTitle: 'Cancel',
    onClickOutside: () => {},
  }

@ -86,29 +99,23 @@ class ConfirmButtons extends PureComponent<ConfirmButtonsProps, {}> {
  }

  public render() {
-    const {item, buttonSize, isDisabled, confirmLeft, confirmTitle} = this.props
+    const {
+      item,
+      buttonSize,
+      isDisabled,
+      reversed,
+      confirmTitle,
+      cancelTitle,
+    } = this.props

-    return confirmLeft ? (
-      <div className="confirm-buttons">
-        <Confirm
-          buttonSize={buttonSize}
-          isDisabled={isDisabled}
-          onConfirm={this.handleConfirm(item)}
-          icon="icon checkmark"
-          title={confirmTitle}
-        />
-        <Cancel
-          buttonSize={buttonSize}
-          onCancel={this.handleCancel(item)}
-          icon="icon remove"
-        />
-      </div>
-    ) : (
-      <div className="confirm-buttons">
+    const className = `confirm-or-cancel${reversed ? ' reversed' : ''}`
+    return (
+      <div className={className}>
        <Cancel
          buttonSize={buttonSize}
          onCancel={this.handleCancel(item)}
          icon="icon remove"
+          title={cancelTitle}
        />
        <Confirm
          buttonSize={buttonSize}
@ -122,4 +129,4 @@ class ConfirmButtons extends PureComponent<ConfirmButtonsProps, {}> {
  }
 }

-export default OnClickOutside(ConfirmButtons)
+export default OnClickOutside(ConfirmOrCancel)
--- a/ui/src/shared/components/DeleteConfirmButtons.js
+++ b/ui/src/shared/components/DeleteConfirmButtons.js
@ -1,116 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import OnClickOutside from 'shared/components/OnClickOutside'
-import ConfirmButtons from 'shared/components/ConfirmButtons'
-
-const DeleteButton = ({
-  onClickDelete,
-  buttonSize,
-  icon,
-  square,
-  text,
-  disabled,
-}) => (
-  <button
-    className={classnames('btn btn-danger table--show-on-row-hover', {
-      [buttonSize]: buttonSize,
-      'btn-square': square,
-      disabled,
-    })}
-    onClick={onClickDelete}
-  >
-    {icon ? <span className={`icon ${icon}`} /> : null}
-    {square ? null : text}
-  </button>
-)
-
-class DeleteConfirmButtons extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      isConfirming: false,
-    }
-  }
-
-  handleClickDelete = () => {
-    this.setState({isConfirming: true})
-  }
-
-  handleCancel = () => {
-    this.setState({isConfirming: false})
-  }
-
-  handleClickOutside() {
-    this.setState({isConfirming: false})
-  }
-
-  render() {
-    const {
-      onDelete,
-      item,
-      buttonSize,
-      icon,
-      square,
-      text,
-      disabled,
-    } = this.props
-    const {isConfirming} = this.state
-
-    if (square && !icon) {
-      console.error(
-        'DeleteButton component requires both icon if passing in square.'
-      )
-    }
-
-    return isConfirming ? (
-      <ConfirmButtons
-        onConfirm={onDelete}
-        item={item}
-        onCancel={this.handleCancel}
-        buttonSize={buttonSize}
-      />
-    ) : (
-      <DeleteButton
-        text={text}
-        onClickDelete={disabled ? () => {} : this.handleClickDelete}
-        buttonSize={buttonSize}
-        icon={icon}
-        square={square}
-        disabled={disabled}
-      />
-    )
-  }
-}
-
-const {bool, func, oneOfType, shape, string} = PropTypes
-
-DeleteButton.propTypes = {
-  onClickDelete: func.isRequired,
-  buttonSize: string,
-  icon: string,
-  square: bool,
-  disabled: bool,
-  text: string.isRequired,
-}
-
-DeleteButton.defaultProps = {
-  text: 'Delete',
-}
-
-DeleteConfirmButtons.propTypes = {
-  text: string,
-  item: oneOfType([(string, shape())]),
-  onDelete: func.isRequired,
-  buttonSize: string,
-  square: bool,
-  icon: string,
-  disabled: bool,
-}
-
-DeleteConfirmButtons.defaultProps = {
-  buttonSize: 'btn-sm',
-}
-
-export default OnClickOutside(DeleteConfirmButtons)
--- a/ui/src/shared/components/DeleteConfirmTableCell.js
+++ b/ui/src/shared/components/DeleteConfirmTableCell.js
@ -1,12 +0,0 @@
-import React from 'react'
-
-import DeleteConfirmButtons from 'shared/components/DeleteConfirmButtons'
-import {ADMIN_TABLE} from 'src/admin/constants/tableSizing'
-
-const DeleteConfirmTableCell = props => (
-  <td className="text-right" style={{width: `${ADMIN_TABLE.colDelete}px`}}>
-    <DeleteConfirmButtons {...props} />
-  </td>
-)
-
-export default DeleteConfirmTableCell
--- a/ui/src/shared/components/YesNoButtons.js
+++ b/ui/src/shared/components/YesNoButtons.js
@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-const YesNoButtons = ({onConfirm, onCancel, buttonSize}) => (
-  <div>
-    <button
-      className={classnames('btn btn-square btn-info', {
-        [buttonSize]: buttonSize,
-      })}
-      onClick={onCancel}
-    >
-      <span className="icon remove" />
-    </button>
-    <button
-      className={classnames('btn btn-square btn-success', {
-        [buttonSize]: buttonSize,
-      })}
-      onClick={onConfirm}
-    >
-      <span className="icon checkmark" />
-    </button>
-  </div>
-)
-
-const {func, string} = PropTypes
-
-YesNoButtons.propTypes = {
-  onConfirm: func.isRequired,
-  onCancel: func.isRequired,
-  buttonSize: string,
-}
-YesNoButtons.defaultProps = {
-  buttonSize: 'btn-sm',
-}
-
-export default YesNoButtons
--- a/ui/src/sources/components/InfluxTable.js
+++ b/ui/src/sources/components/InfluxTable.js
@ -7,6 +7,7 @@ import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'

 import Dropdown from 'shared/components/Dropdown'
 import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
+import ConfirmButton from 'shared/components/ConfirmButton'

 const kapacitorDropdown = (
  kapacitors,
@ -96,117 +97,124 @@ const InfluxTable = ({
  handleDeleteKapacitor,
  isUsingAuth,
  me,
-}) => (
-  <div className="row">
-    <div className="col-md-12">
-      <div className="panel">
-        <div className="panel-heading">
-          <h2 className="panel-title">
-            {isUsingAuth ? (
-              <span>
-                Connections for <em>{me.currentOrganization.name}</em>
-              </span>
-            ) : (
-              <span>Connections</span>
-            )}
-          </h2>
-          <Authorized requiredRole={EDITOR_ROLE}>
-            <Link
-              to={`/sources/${source.id}/manage-sources/new`}
-              className="btn btn-sm btn-primary"
-            >
-              <span className="icon plus" /> Add Connection
-            </Link>
-          </Authorized>
-        </div>
-        <div className="panel-body">
-          <table className="table v-center margin-bottom-zero table-highlight">
-            <thead>
-              <tr>
-                <th className="source-table--connect-col" />
-                <th>InfluxDB Connection</th>
-                <th className="text-right" />
-                <th>
-                  Kapacitor Connection{' '}
-                  <QuestionMarkTooltip
-                    tipID="kapacitor-node-helper"
-                    tipContent={
-                      '<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
-                    }
-                  />
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {sources.map(s => {
-                return (
-                  <tr
-                    key={s.id}
-                    className={s.id === source.id ? 'highlight' : null}
-                  >
-                    <td>
-                      {s.id === source.id ? (
-                        <div className="btn btn-success btn-xs source-table--connect">
-                          Connected
-                        </div>
-                      ) : (
-                        <Link
-                          className="btn btn-default btn-xs source-table--connect"
-                          to={`/sources/${s.id}/hosts`}
-                        >
-                          Connect
-                        </Link>
-                      )}
-                    </td>
-                    <td>
-                      <h5 className="margin-zero">
-                        <Authorized
-                          requiredRole={EDITOR_ROLE}
-                          replaceWithIfNotAuthorized={<strong>{s.name}</strong>}
-                        >
+}) => {
+  const wrappedDelete = s => () => {
+    handleDeleteSource(s)
+  }
+  return (
+    <div className="row">
+      <div className="col-md-12">
+        <div className="panel">
+          <div className="panel-heading">
+            <h2 className="panel-title">
+              {isUsingAuth ? (
+                <span>
+                  Connections for <em>{me.currentOrganization.name}</em>
+                </span>
+              ) : (
+                <span>Connections</span>
+              )}
+            </h2>
+            <Authorized requiredRole={EDITOR_ROLE}>
+              <Link
+                to={`/sources/${source.id}/manage-sources/new`}
+                className="btn btn-sm btn-primary"
+              >
+                <span className="icon plus" /> Add Connection
+              </Link>
+            </Authorized>
+          </div>
+          <div className="panel-body">
+            <table className="table v-center margin-bottom-zero table-highlight">
+              <thead>
+                <tr>
+                  <th className="source-table--connect-col" />
+                  <th>InfluxDB Connection</th>
+                  <th className="text-right" />
+                  <th>
+                    Kapacitor Connection{' '}
+                    <QuestionMarkTooltip
+                      tipID="kapacitor-node-helper"
+                      tipContent={
+                        '<p>Kapacitor Connections are<br/>scoped per InfluxDB Connection.<br/>Only one can be active at a time.</p>'
+                      }
+                    />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {sources.map(s => {
+                  return (
+                    <tr
+                      key={s.id}
+                      className={s.id === source.id ? 'highlight' : null}
+                    >
+                      <td>
+                        {s.id === source.id ? (
+                          <div className="btn btn-success btn-xs source-table--connect">
+                            Connected
+                          </div>
+                        ) : (
                          <Link
-                            to={`${location.pathname}/${s.id}/edit`}
-                            className={
-                              s.id === source.id ? 'link-success' : null
+                            className="btn btn-default btn-xs source-table--connect"
+                            to={`/sources/${s.id}/hosts`}
+                          >
+                            Connect
+                          </Link>
+                        )}
+                      </td>
+                      <td>
+                        <h5 className="margin-zero">
+                          <Authorized
+                            requiredRole={EDITOR_ROLE}
+                            replaceWithIfNotAuthorized={
+                              <strong>{s.name}</strong>
                            }
                          >
-                            <strong>{s.name}</strong>
-                            {s.default ? ' (Default)' : null}
-                          </Link>
+                            <Link
+                              to={`${location.pathname}/${s.id}/edit`}
+                              className={
+                                s.id === source.id ? 'link-success' : null
+                              }
+                            >
+                              <strong>{s.name}</strong>
+                              {s.default ? ' (Default)' : null}
+                            </Link>
+                          </Authorized>
+                        </h5>
+                        <span>{s.url}</span>
+                      </td>
+                      <td className="text-right">
+                        <Authorized requiredRole={EDITOR_ROLE}>
+                          <ConfirmButton
+                            customClass="delete-source table--show-on-row-hover"
+                            type="btn-danger"
+                            size="btn-xs"
+                            text="Delete Connection"
+                            confirmAction={wrappedDelete(s)}
+                          />
                        </Authorized>
-                      </h5>
-                      <span>{s.url}</span>
-                    </td>
-                    <td className="text-right">
-                      <Authorized requiredRole={EDITOR_ROLE}>
-                        <a
-                          className="btn btn-xs btn-danger table--show-on-row-hover"
-                          href="#"
-                          onClick={handleDeleteSource(s)}
-                        >
-                          Delete Connection
-                        </a>
-                      </Authorized>
-                    </td>
-                    <td className="source-table--kapacitor">
-                      {kapacitorDropdown(
-                        s.kapacitors,
-                        s,
-                        router,
-                        setActiveKapacitor,
-                        handleDeleteKapacitor
-                      )}
-                    </td>
-                  </tr>
-                )
-              })}
-            </tbody>
-          </table>
+                      </td>
+                      <td className="source-table--kapacitor">
+                        {kapacitorDropdown(
+                          s.kapacitors,
+                          s,
+                          router,
+                          setActiveKapacitor,
+                          handleDeleteKapacitor
+                        )}
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
        </div>
      </div>
    </div>
-  </div>
-)
+  )
+}

 const {array, bool, func, shape, string} = PropTypes

--- a/ui/src/style/chronograf.scss
+++ b/ui/src/style/chronograf.scss
@ -35,11 +35,9 @@
@import 'components/crosshairs';
@import 'components/ceo-display-options';
@import 'components/confirm-button';
-@import 'components/confirm-buttons';
+@import 'components/confirm-or-cancel';
@import 'components/code-mirror-theme';
@import 'components/color-dropdown';
-@import 'components/confirm-button';
-@import 'components/confirm-buttons';
@import 'components/custom-time-range';
@import 'components/customize-fields';
@import 'components/dygraphs';
--- a/ui/src/style/components/confirm-buttons.scss
+++ b/ui/src/style/components/confirm-buttons.scss
@ -1,18 +0,0 @@
-/*
-  Confirmation Buttons
-  ------------------------------------------------------
-*/
-.confirm-buttons {
-  display: flex !important;
-  align-items: center;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-
-  & > * {
-    margin: 0 0 0 4px !important;
-
-    &:first-child {
-      margin: 0 !important;
-    }
-  }
-}
--- a/ui/src/style/components/confirm-or-cancel.scss
+++ b/ui/src/style/components/confirm-or-cancel.scss
@ -0,0 +1,30 @@
+/*
+    "Confirm or Cancel" Buttons
+    ----------------------------------------------------------------------------
+*/
+
+.confirm-or-cancel {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+
+  .confirm-or-cancel--confirm {
+    order: 2;
+    margin-left: 4px;
+  }
+  .confirm-or-cancel--cancel {
+    order: 1;
+  }
+
+  &.reversed {
+    .confirm-or-cancel--confirm {
+      order: 1;
+      margin-left: 0;
+    }
+    .confirm-or-cancel--cancel {
+      order: 2;
+      margin-left: 4px;
+    }
+  }
+}
--- a/ui/src/style/components/fancy-table.scss
+++ b/ui/src/style/components/fancy-table.scss
@ -12,7 +12,8 @@ $fancytable--table--margin: 4px;
  flex-wrap: nowrap;
  align-items: center;

-  > div:not(.confirm-buttons) {
+  > div:not(.confirm-or-cancel),
+  > div:not(.confirm-button) {
    margin-right: $fancytable--table--margin;
  }
 }
--- a/ui/src/style/components/organizations-table.scss
+++ b/ui/src/style/components/organizations-table.scss
@ -27,9 +27,11 @@ $orgs-table--delete-width: 30px;
  justify-content: center;
  @include no-user-select();

-  .btn {width: 100%;}
+  .btn {
+    width: 100%;
+  }
 }
-.orgs-table--default-role.deleting {
+.orgs-table--default-role.creating {
  width: (
    $orgs-table--default-role-width - $fancytable--table--margin -
      $orgs-table--delete-width
--- a/ui/src/style/components/template-variables-manager.scss
+++ b/ui/src/style/components/template-variables-manager.scss
@ -28,22 +28,35 @@ $tvmp-table-gutter: 8px;
  }
 }
 .template-variable-manager--body {
-  padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter ($tvmp-gutter - $tvmp-table-gutter);
+  padding: 18px ($tvmp-gutter - $tvmp-table-gutter) $tvmp-gutter
+    ($tvmp-gutter - $tvmp-table-gutter);
  border-radius: 0 0 $radius $radius;
  min-height: $tvmp-min-height;
  max-height: $tvmp-max-height;
-  @include gradient-v($g2-kevlar,$g0-obsidian);
-  @include custom-scrollbar-round($g0-obsidian,$g3-castle);
+  @include gradient-v($g2-kevlar, $g0-obsidian);
+  @include custom-scrollbar-round($g0-obsidian, $g3-castle);
 }
 .template-variable-manager--table,
 .template-variable-manager--table-container {
  width: 100%;
 }
 /* Column Widths */
-.tvm--col-1 {flex: 0 0 140px;}
-.tvm--col-2 {flex: 0 0 140px;}
-.tvm--col-3 {flex: 1 0 0;}
-.tvm--col-4 {flex: 0 0 68px;}
+.tvm--col-1 {
+  flex: 0 0 140px;
+}
+.tvm--col-2 {
+  flex: 0 0 140px;
+}
+.tvm--col-3 {
+  flex: 1 0 0;
+}
+.tvm--col-4 {
+  flex: 0 0 30px;
+
+  &.editing {
+    flex: 0 0 68px;
+  }
+}

 /* Table Column Labels */
 .template-variable-manager--table-heading {
@ -61,7 +74,9 @@ $tvmp-table-gutter: 8px;
    @include no-user-select();
    padding-left: 6px;
    margin-right: $tvmp-table-gutter;
-    &:last-child {margin-right: 0;}
+    &:last-child {
+      margin-right: 0;
+    }
  }
 }

@ -84,7 +99,9 @@ $tvmp-table-gutter: 8px;

  > * {
    margin-right: $tvmp-table-gutter;
-    &:last-child {margin-right: 0;}
+    &:last-child {
+      margin-right: 0;
+    }
  }
 }

@ -110,8 +127,7 @@ $tvmp-table-gutter: 8px;
  border: 2px solid $g5-pepper;
  background-color: $g2-kevlar;
  overflow: hidden;
-  transition:
-    border-color 0.25s ease;
+  transition: border-color 0.25s ease;

  &:hover {
    cursor: text;
@ -167,12 +183,16 @@ $tvmp-table-gutter: 8px;
    margin-bottom: 2px;
    margin-right: 2px;
  }
-  > *:last-child {margin-right: 0;}
+  > *:last-child {
+    margin-right: 0;
+  }

  .dropdown {
-    flex: 1 0 0%;
+    flex: 1 0 0;

-    & > .dropdown-toggle {width: 100%;}
+    & > .dropdown-toggle {
+      width: 100%;
+    }
  }
 }
 .tvm-query-builder--text {
@ -188,29 +208,13 @@ $tvmp-table-gutter: 8px;
  font-weight: 600;
  font-family: $code-font;
 }
+
 .tvm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

-  .btn-edit {
-    order: 1;
-  }
-
-  > .btn:first-child {
+  & > .btn:nth-child(2) {
    margin-left: $tvmp-table-gutter;
  }
-
-  /* Override confirm buttons styles */
-  /* Janky, but doing this quick & dirty for now  */
-  .btn-danger {
-    order: 2;
-  }
-  .confirm-buttons > .btn {
-    margin-left: $tvmp-table-gutter !important;
-  }
-  /* Hide the edit button when confirming a delete */
-  .confirm-buttons + .btn-edit {
-    display: none;
-  }
 }
--- a/ui/src/style/pages/manage-providers.scss
+++ b/ui/src/style/pages/manage-providers.scss
@ -10,24 +10,38 @@ $provider--providerorg-width: 210px;
 $provider--redirect-width: 220px;
 $provider--delete-width: 30px;

-
-.provider--id {width: $provider--id-width;}
-.provider--scheme {width: $provider--scheme-width;}
-.provider--provider {width: $provider--provider-width;}
-.provider--providerorg {width: $provider--providerorg-width;}
-.provider--redirect {width: $provider--redirect-width;}
+.provider--id {
+  width: $provider--id-width;
+}
+.provider--scheme {
+  width: $provider--scheme-width;
+}
+.provider--provider {
+  width: $provider--provider-width;
+}
+.provider--providerorg {
+  width: $provider--providerorg-width;
+}
+.provider--redirect {
+  width: $provider--redirect-width;
+}
 .provider--delete {
  width: $provider--delete-width;
  min-width: $provider--delete-width;
 }
-.provider--arrow {flex: 1 0 0;}
+.provider--arrow {
+  flex: 1 0 0;
+}

 .fancytable--td.provider--id,
 .fancytable--th.provider--id {
  padding: 0 8px;
 }
-.provider--redirect.deleting {
-  width: ($provider--redirect-width - $fancytable--table--margin - $provider--delete-width);
+.provider--redirect.creating {
+  width: (
+    $provider--redirect-width - $fancytable--table--margin -
+      $provider--delete-width
+  );
 }

 .provider--arrow {
@ -43,7 +57,7 @@ $provider--delete-width: 30px;
    position: relative;
    height: 2px;
    width: 100%;
-    @include gradient-h($c-pool,$c-star);
+    @include gradient-h($c-pool, $c-star);

    &:before,
    &:after {
--- a/ui/src/style/pages/overlay-technology.scss
+++ b/ui/src/style/pages/overlay-technology.scss
@ -88,7 +88,7 @@ $overlay-z: 100;
 .overlay-technology--editor .query-maker--empty {
  margin-bottom: 8px;
 }
-.overlay-controls .confirm-buttons {
+.overlay-controls .confirm-or-cancel {
  margin-left: 32px;
 }

--- a/ui/src/style/theme/_tables.scss
+++ b/ui/src/style/theme/_tables.scss
@ -13,7 +13,8 @@ $table--highlight-color: $g4-onyx;
  border-collapse: collapse;
  margin: 0;

-  th, td {
+  th,
+  td {
    font-size: 13px;
    text-align: left;

@ -22,14 +23,20 @@ $table--highlight-color: $g4-onyx;
      letter-spacing: 0;
    }

-    &.text-left {text-align: left;}
-    &.text-center {text-align: center;}
-    &.text-right {text-align: right;}
+    &.text-left {
+      text-align: left;
+    }
+    &.text-center {
+      text-align: center;
+    }
+    &.text-right {
+      text-align: right;
+    }
  }

  // Header
  > thead > tr > th,
-  > thead > tr > td, {
+  > thead > tr > td {
    color: $g17-whisper;
    font-weight: 600;
    padding: 8px;
@ -39,7 +46,7 @@ $table--highlight-color: $g4-onyx;
  }

  // Body
-  > tbody > tr > td, {
+  > tbody > tr > td {
    text-align: left;
    color: $g13-mist;
    font-weight: 500;
@ -71,17 +78,26 @@ $table--highlight-color: $g4-onyx;

 .table.table-striped {
  > tbody > tr {
-    &:nth-child(odd) {background-color: $table--highlight-color;}
-    &:nth-child(even) {background-color: transparent;}
+    &:nth-child(odd) {
+      background-color: $table--highlight-color;
+    }
+    &:nth-child(even) {
+      background-color: transparent;
+    }
  }
 }

-.table.table-highlight > tbody > tr:hover {background-color: $table--highlight-color;}
+.table.table-highlight > tbody > tr:hover {
+  background-color: $table--highlight-color;
+}

-.table > tbody > tr .table--show-on-row-hover {visibility: hidden;}
+.table > tbody > tr .table--show-on-row-hover {
+  visibility: hidden;
+}
 .table > tbody > tr:hover .table--show-on-row-hover,
-.table > tbody > tr .table--show-on-row-hover.active {visibility: visible;}
-
+.table > tbody > tr .table--show-on-row-hover.active {
+  visibility: visible;
+}

 // For use in a Status column
 .table-dot {
@ -91,9 +107,25 @@ $table--highlight-color: $g4-onyx;
  border-radius: 50%;
  background-color: $g17-whisper;

-  &.dot-success {background-color: $c-rainforest;}
-  &.dot-primary {background-color: $c-pool;}
-  &.dot-warning {background-color: $c-pineapple;}
-  &.dot-danger {background-color: $c-dreamsicle;}
-  &.dot-critical {background-color: $c-fire;}
+  &.dot-success {
+    background-color: $c-rainforest;
+  }
+  &.dot-primary {
+    background-color: $c-pool;
+  }
+  &.dot-warning {
+    background-color: $c-pineapple;
+  }
+  &.dot-danger {
+    background-color: $c-dreamsicle;
+  }
+  &.dot-critical {
+    background-color: $c-fire;
+  }
+}
+
+// Ensuring buttons inside tables don't get huge
+.table th .btn,
+.table td .btn {
+  display: inline-block;
 }
--- a/ui/src/style/unsorted.scss
+++ b/ui/src/style/unsorted.scss
@ -203,7 +203,7 @@ br {
  margin-bottom: 4px;

  &.intro {
-    @include gradient-h($c-pool,$c-star);
+    @include gradient-h($c-pool, $c-star);
    color: $g20-white;
  }

@ -306,7 +306,7 @@ $tick-script-overlay-margin: 30px;
  -----------------------------------------------------------------------------
 */
 .icon.download.dlcsv:before {
-  content: "\e91d";
+  content: '\e91d';
  font-weight: bold;
  color: #bec2cc;
 }
@ -403,23 +403,23 @@ $dash-editable-header-padding: 7px;

 .page-header__left.page-header__dash-editable,
 .dashboard-title,
-.dashboard-title input[type="text"].form-control.dashboard-title--input,
+.dashboard-title input[type='text'].form-control.dashboard-title--input,
 .dashboard-title h1 {
  flex: 1 0 0;
 }
 .dashboard-title {
  display: flex;

-  input[type="text"].form-control.dashboard-title--input,
-  input[type="text"].form-control.dashboard-title--input:focus,
+  input[type='text'].form-control.dashboard-title--input,
+  input[type='text'].form-control.dashboard-title--input:focus,
  h1 {
    font-size: $page-header-size;
    font-weight: $page-header-weight;
    padding: 0 $dash-editable-header-padding;
  }

-  input[type="text"].form-control.dashboard-title--input,
-  input[type="text"].form-control.dashboard-title--input:focus {
+  input[type='text'].form-control.dashboard-title--input,
+  input[type='text'].form-control.dashboard-title--input:focus {
    font-size: $page-header-size;
    font-weight: $page-header-weight;
  }
@ -439,7 +439,7 @@ $dash-editable-header-padding: 7px;
      border-color 0.25s ease;

    &:after {
-      content: "\f058";
+      content: '\f058';
      font-family: 'icomoon';
      position: absolute;
      font-size: 15px;
@ -550,3 +550,11 @@ div.dropdown.dropdown-stretch > div.dropdown-toggle,
 div.dropdown.dropdown-stretch > button.dropdown-toggle {
  width: 100%;
 }
+
+/*
+  Delete Source
+  -----------------------------------------------------------------------------
+*/
+.delete-source {
+  display: inline-block;
+}
--- a/ui/test/shared/components/ConfirmOrCancel.test.tsx
+++ b/ui/test/shared/components/ConfirmOrCancel.test.tsx
@ -1,16 +1,17 @@
 import React from 'react'
-import ConfirmButtons, {
+import ConfirmOrCancel, {
  Cancel,
  Confirm,
-} from 'src/shared/components/ConfirmButtons'
+} from 'src/shared/components/ConfirmOrCancel'

 import {shallow} from 'enzyme'

 const setup = (override = {}) => {
  const props = {
    buttonSize: '',
-    confirmLeft: false,
+    reversed: false,
    confirmTitle: '',
+    cancelTitle: '',
    isDisabled: false,
    item: '',
    onCancel: () => {},
@ -19,7 +20,7 @@ const setup = (override = {}) => {
    ...override,
  }

-  const wrapper = shallow(<ConfirmButtons {...props} />)
+  const wrapper = shallow(<ConfirmOrCancel {...props} />)

  return {
    props,
@ -27,7 +28,7 @@ const setup = (override = {}) => {
  }
 }

-describe('Componenets.Shared.ConfirmButtons', () => {
+describe('Componenets.Shared.ConfirmOrCancel', () => {
  describe('rendering', () => {
    it('has a confirm and cancel button', () => {
      const {wrapper} = setup()
@ -38,30 +39,6 @@ describe('Componenets.Shared.ConfirmButtons', () => {
      expect(cancel.exists()).toBe(true)
    })

-    describe('confirmLeft is true', () => {
-      it('has a confirm button to the left of the cancel button', () => {
-        const {wrapper} = setup({confirmLeft: true})
-        const buttons = wrapper.dive().children()
-        const firstButton = buttons.first()
-        const lastButton = buttons.last()
-
-        expect(firstButton.find(Confirm).exists()).toBe(true)
-        expect(lastButton.find(Cancel).exists()).toBe(true)
-      })
-    })
-
-    describe('confirmLeft is false', () => {
-      it('has a confirm button to the right of the cancel button', () => {
-        const {wrapper} = setup({confirmLeft: false})
-        const buttons = wrapper.dive().children()
-        const firstButton = buttons.first()
-        const lastButton = buttons.last()
-
-        expect(firstButton.find(Cancel).exists()).toBe(true)
-        expect(lastButton.find(Confirm).exists()).toBe(true)
-      })
-    })
-
    describe('confirmTitle', () => {
      describe('is not defined', () => {
        it('has a default title', () => {
--- a/ui/test/shared/components/ProvidersTableRowNew.test.tsx
+++ b/ui/test/shared/components/ProvidersTableRowNew.test.tsx
@ -1,6 +1,6 @@
 import React from 'react'
 import ProvidersTableRowNew from 'src/admin/components/chronograf/ProvidersTableRowNew'
-import ConfirmButtons from 'src/shared/components/ConfirmButtons'
+import ConfirmOrCancel from 'src/shared/components/ConfirmOrCancel'
 import InputClickToEdit from 'src/shared/components/InputClickToEdit'

 import {shallow} from 'enzyme'
@ -37,10 +37,10 @@ describe('Components.Shared.ProvidersTableRowNew', () => {
        const organizations = [{id: 'default', name: 'default'}]
        const {row} = setup({organizations})

-        const confirmButtons = row.find(ConfirmButtons)
-        const confirmButtonsDisabled = confirmButtons.prop('isDisabled')
+        const confirmOrCancel = row.find(ConfirmOrCancel)
+        const confirmOrCancelDisabled = confirmOrCancel.prop('isDisabled')

-        expect(confirmButtonsDisabled).toBe(true)
+        expect(confirmOrCancelDisabled).toBe(true)
      })
    })

@ -54,10 +54,10 @@ describe('Components.Shared.ProvidersTableRowNew', () => {
        providerInput.simulate('click')
        providerInput.simulate('change', '*')

-        const confirmButtons = row.find(ConfirmButtons)
-        const confirmButtonsDisabled = confirmButtons.prop('isDisabled')
+        const confirmOrCancel = row.find(ConfirmOrCancel)
+        const confirmOrCancelDisabled = confirmOrCancel.prop('isDisabled')

-        expect(confirmButtonsDisabled).toBe(true)
+        expect(confirmOrCancelDisabled).toBe(true)
      })
    })

@ -71,10 +71,10 @@ describe('Components.Shared.ProvidersTableRowNew', () => {
        providerOrganizationInput.simulate('click')
        providerOrganizationInput.simulate('change', '*')

-        const confirmButtons = row.find(ConfirmButtons)
-        const confirmButtonsDisabled = confirmButtons.prop('isDisabled')
+        const confirmOrCancel = row.find(ConfirmOrCancel)
+        const confirmOrCancelDisabled = confirmOrCancel.prop('isDisabled')

-        expect(confirmButtonsDisabled).toBe(true)
+        expect(confirmOrCancelDisabled).toBe(true)
      })
    })

@ -92,10 +92,10 @@ describe('Components.Shared.ProvidersTableRowNew', () => {
        providerOrganizationInput.simulate('click')
        providerOrganizationInput.simulate('change', '*')

-        const confirmButtons = row.find(ConfirmButtons)
-        const confirmButtonsDisabled = confirmButtons.prop('isDisabled')
+        const confirmOrCancel = row.find(ConfirmOrCancel)
+        const confirmOrCancelDisabled = confirmOrCancel.prop('isDisabled')

-        expect(confirmButtonsDisabled).toBe(false)
+        expect(confirmOrCancelDisabled).toBe(false)
      })
    })
  })