From eee9b94cc24b90c82cfc61c1ed6c38907055a08e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 29 Mar 2018 10:50:22 -0700
Subject: [PATCH] Use ConfirmButton when deleting a InfluxDB Connection

---
 ui/src/sources/components/InfluxTable.js | 216 ++++++++++++-----------
 ui/src/style/unsorted.scss               |  24 ++-
 2 files changed, 128 insertions(+), 112 deletions(-)

diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js
index 617484c4bc..476f8caef3 100644
--- 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
 
diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss
index 0d819a428c..d7eb036d7f 100644
--- 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;
+}