built a component for delete button in tables, instead of using a modal to…

built a component for delete button in tables, instead of using a modal to confirm it now does it in the row of the table, created a sass file for the component, the component uses css transitions for animation

public/app/containers/Teams/TeamList.tsx

@@ -6,6 +6,7 @@ import { NavStore } from 'app/stores/NavStore/NavStore';
 import { TeamsStore, ITeam } from 'app/stores/TeamsStore/TeamsStore';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import appEvents from 'app/core/app_events';
+import DeleteButton from 'app/core/components/DeleteButton/DeleteButton';
 
 interface Props {
   nav: typeof NavStore.Type;
@@ -28,18 +29,6 @@ export class TeamList extends React.Component<Props, any> {
   }
 
   deleteTeam(team: ITeam) {
-    appEvents.emit('confirm-modal', {
-      title: 'Delete',
-      text: 'Are you sure you want to delete Team ' + team.name + '?',
-      yesText: 'Delete',
-      icon: 'fa-warning',
-      onConfirm: () => {
-        this.deleteTeamConfirmed(team);
-      },
-    });
-  }
-
-  deleteTeamConfirmed(team) {
     this.props.backendSrv.delete('/api/teams/' + team.id).then(this.fetchTeams.bind(this));
   }
 
@@ -67,9 +56,7 @@ export class TeamList extends React.Component<Props, any> {
           <a href={teamUrl}>{team.memberCount}</a>
         </td>
         <td className="text-right">
-          <a onClick={() => this.deleteTeam(team)} className="btn btn-danger btn-small">
-            <i className="fa fa-remove" />
-          </a>
+          <DeleteButton confirmDelete={() => this.deleteTeam(team)} />
         </td>
       </tr>
     );
@@ -102,7 +89,7 @@ export class TeamList extends React.Component<Props, any> {
             </a>
           </div>
 
-          <div className="admin-list-table">
+          <div className="admin-list-table tr-overflow">
             <table className="filter-table filter-table--hover form-inline">
               <thead>
                 <tr>

public/app/core/components/DeleteButton/DeleteButton.tsx

+import React, { Component } from 'react';
+
+export default class DeleteButton extends Component<any, any> {
+  state = {
+    deleteButton: 'delete-button--show',
+    confirmSpan: 'confirm-delete--removed',
+  };
+
+  handleDelete = event => {
+    if (event) {
+      event.preventDefault();
+    }
+
+    this.setState({
+      deleteButton: 'delete-button--hide',
+    });
+
+    setTimeout(() => {
+      this.setState({
+        deleteButton: 'delete-button--removed',
+      });
+    }, 100);
+
+    setTimeout(() => {
+      this.setState({
+        confirmSpan: 'confirm-delete--hide',
+      });
+    }, 100);
+
+    setTimeout(() => {
+      this.setState({
+        confirmSpan: 'confirm-delete--show',
+      });
+    }, 150);
+  };
+
+  cancelDelete = event => {
+    event.preventDefault();
+
+    this.setState({
+      confirmSpan: 'confirm-delete--hide',
+    });
+
+    setTimeout(() => {
+      this.setState({
+        confirmSpan: 'confirm-delete--removed',
+        deleteButton: 'delete-button--hide',
+      });
+    }, 140);
+
+    setTimeout(() => {
+      this.setState({
+        deleteButton: 'delete-button--show',
+      });
+    }, 190);
+  };
+
+  render() {
+    const { confirmDelete } = this.props;
+    return (
+      <span className="delete-button-container">
+        <a className={this.state.deleteButton + ' btn btn-danger btn-small'} onClick={this.handleDelete}>
+          <i className="fa fa-remove" />
+        </a>
+        <span className="confirm-delete-container">
+          <span className={this.state.confirmSpan}>
+            <a className="btn btn-small" onClick={this.cancelDelete}>
+              Cancel
+            </a>
+            <a className="btn btn-danger btn-small" onClick={confirmDelete}>
+              Confirm Delete
+            </a>
+          </span>
+        </span>
+      </span>
+    );
+  }
+}

public/sass/_grafana.scss

@@ -93,6 +93,7 @@
 @import 'components/form_select_box';
 @import 'components/user-picker';
 @import 'components/description-picker';
+@import 'components/delete_button';
 
 // PAGES
 @import 'pages/login';

public/sass/components/_delete_button.scss

+.delete-button-container {
+  max-width: 24px;
+  width: 24px;
+  direction: rtl;
+  max-height: 38px;
+  display: block;
+}
+
+.confirm-delete-container {
+  overflow: hidden;
+  width: 145px;
+  display: block;
+}
+
+.delete-button {
+  &--show {
+    display: inline-block;
+    opacity: 1;
+    transition: opacity 0.1s ease;
+  }
+
+  &--hide {
+    display: inline-block;
+    opacity: 0;
+    transition: opacity 0.1s ease;
+  }
+  &--removed {
+    display: none;
+  }
+}
+
+.confirm-delete {
+  &--show {
+    display: inline-block;
+    opacity: 1;
+    transition: opacity 0.08s ease-out, transform 0.1s ease-out;
+    transform: translateX(0);
+  }
+
+  &--hide {
+    display: inline-block;
+    opacity: 0;
+    transition: opacity 0.12s ease-in, transform 0.14s ease-in;
+    transform: translateX(100px);
+  }
+  &--removed {
+    display: none;
+  }
+}