From 0b421004ea3a41aa73fba414010ecbe5fa687f20 Mon Sep 17 00:00:00 2001
From: Patrick O'Carroll <ocarroll.patrick@gmail.com>
Date: Fri, 20 Jul 2018 09:59:04 +0200
Subject: [PATCH] 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      | 19 +----
 .../components/DeleteButton/DeleteButton.tsx  | 78 +++++++++++++++++++
 public/sass/_grafana.scss                     |  1 +
 public/sass/components/_delete_button.scss    | 49 ++++++++++++
 4 files changed, 131 insertions(+), 16 deletions(-)
 create mode 100644 public/app/core/components/DeleteButton/DeleteButton.tsx
 create mode 100644 public/sass/components/_delete_button.scss

diff --git a/public/app/containers/Teams/TeamList.tsx b/public/app/containers/Teams/TeamList.tsx
index 4429764b1cc..475f8762c69 100644
--- a/public/app/containers/Teams/TeamList.tsx
+++ b/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>
diff --git a/public/app/core/components/DeleteButton/DeleteButton.tsx b/public/app/core/components/DeleteButton/DeleteButton.tsx
new file mode 100644
index 00000000000..61a322b591e
--- /dev/null
+++ b/public/app/core/components/DeleteButton/DeleteButton.tsx
@@ -0,0 +1,78 @@
+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>
+    );
+  }
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 9e3bec267ed..3a72bd45a1a 100644
--- a/public/sass/_grafana.scss
+++ b/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';
diff --git a/public/sass/components/_delete_button.scss b/public/sass/components/_delete_button.scss
new file mode 100644
index 00000000000..19f32189d81
--- /dev/null
+++ b/public/sass/components/_delete_button.scss
@@ -0,0 +1,49 @@
+.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;
+  }
+}