From d40f086f4aa2a602254d21049db740a587c706ee Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Tue, 14 Nov 2017 10:19:36 -0800
Subject: [PATCH] Update providers page to fit into admin tabs UI

---
 .../admin/components/chronograf/AdminTabs.js  |  7 ++
 .../components/chronograf/ProvidersTable.js   | 74 +++++++++----------
 ui/src/admin/containers/ProvidersPage.js      | 36 +++------
 3 files changed, 51 insertions(+), 66 deletions(-)

diff --git a/ui/src/admin/components/chronograf/AdminTabs.js b/ui/src/admin/components/chronograf/AdminTabs.js
index 8d4be7f9f8..38e28ad0e2 100644
--- a/ui/src/admin/components/chronograf/AdminTabs.js
+++ b/ui/src/admin/components/chronograf/AdminTabs.js
@@ -9,9 +9,11 @@ import {
 import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs'
 import OrganizationsPage from 'src/admin/containers/chronograf/OrganizationsPage'
 import UsersPage from 'src/admin/containers/chronograf/UsersPage'
+import ProvidersPage from 'src/admin/containers/ProvidersPage'
 
 const ORGANIZATIONS_TAB_NAME = 'Organizations'
 const USERS_TAB_NAME = 'Users'
+const PROVIDERS_TAB_NAME = 'Providers'
 
 const AdminTabs = ({
   me: {currentOrganization: meCurrentOrganization, role: meRole, id: meID},
@@ -31,6 +33,11 @@ const AdminTabs = ({
         <UsersPage meID={meID} meCurrentOrganization={meCurrentOrganization} />
       ),
     },
+    {
+      requiredRole: SUPERADMIN_ROLE,
+      type: PROVIDERS_TAB_NAME,
+      component: <ProvidersPage />,
+    },
   ].filter(t => isUserAuthorized(meRole, t.requiredRole))
 
   return (
diff --git a/ui/src/admin/components/chronograf/ProvidersTable.js b/ui/src/admin/components/chronograf/ProvidersTable.js
index 00515215b4..44140b5762 100644
--- a/ui/src/admin/components/chronograf/ProvidersTable.js
+++ b/ui/src/admin/components/chronograf/ProvidersTable.js
@@ -32,52 +32,44 @@ class ProvidersTable extends Component {
       providerMaps.length === 1 ? '1 Map' : `${providerMaps.length} Maps`
 
     return (
-      <div className="container-fluid">
-        <div className="row">
-          <div className="col-xs-12">
-            <div className="panel panel-minimal">
-              <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-                <h2 className="panel-title">
-                  {tableTitle}
-                </h2>
-                <button
-                  className="btn btn-sm btn-primary"
-                  onClick={this.handleClickCreateMap}
-                  disabled={isCreatingMap}
-                >
-                  <span className="icon plus" /> Create Map
-                </button>
-              </div>
-              <div className="panel-body">
-                <div className="providers-labels">
-                  <div className="providers-labels--id">ID</div>
-                  <div className="providers-labels--scheme">Scheme</div>
-                  <div className="providers-labels--provider">Provider</div>
-                  <div className="providers-labels--providerorg">
-                    Provider Org
-                  </div>
-                  <div className="providers-labels--arrow" />
-                  <div className="providers-labels--redirect">Organization</div>
-                  <div className="providers-labels--delete" />
-                </div>
-                {/* {isCreatingMap
+      <div className="panel panel-default">
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <h2 className="panel-title">
+            {tableTitle}
+          </h2>
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={this.handleClickCreateMap}
+            disabled={isCreatingMap}
+          >
+            <span className="icon plus" /> Create Map
+          </button>
+        </div>
+        <div className="panel-body">
+          <div className="providers-labels">
+            <div className="providers-labels--id">ID</div>
+            <div className="providers-labels--scheme">Scheme</div>
+            <div className="providers-labels--provider">Provider</div>
+            <div className="providers-labels--providerorg">Provider Org</div>
+            <div className="providers-labels--arrow" />
+            <div className="providers-labels--redirect">Organization</div>
+            <div className="providers-labels--delete" />
+          </div>
+          {/* {isCreatingMap
                   ? <NewProviderMap
                       onCreateMap={this.handleCreateMap}
                       onDismissCreateMap={this.handleDismissCreateMap}
                     />
                   : null} */}
-                {providerMaps.map(providerMap =>
-                  <ProviderMap
-                    key={providerMap.id}
-                    providerMap={providerMap}
-                    organizations={organizations}
-                    onDelete={onDeleteMap}
-                    onUpdate={onUpdateMap}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
+          {providerMaps.map(providerMap =>
+            <ProviderMap
+              key={providerMap.id}
+              providerMap={providerMap}
+              organizations={organizations}
+              onDelete={onDeleteMap}
+              onUpdate={onUpdateMap}
+            />
+          )}
         </div>
       </div>
     )
diff --git a/ui/src/admin/containers/ProvidersPage.js b/ui/src/admin/containers/ProvidersPage.js
index 4a1748e416..287e4b2d9e 100644
--- a/ui/src/admin/containers/ProvidersPage.js
+++ b/ui/src/admin/containers/ProvidersPage.js
@@ -6,7 +6,6 @@ import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
 import ProvidersTable from 'src/admin/components/chronograf/ProvidersTable'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 import {PROVIDER_MAPS} from 'src/admin/constants/dummyProviderMaps'
 
@@ -23,8 +22,8 @@ class ProvidersPage extends Component {
 
   handleCreateMap = () => {}
 
-  handleUpdateMap = updatedMap => {
-    console.log(updatedMap)
+  handleUpdateMap = _updatedMap => {
+    // console.log(_updatedMap)
   }
 
   handleDeleteMap = () => {}
@@ -32,28 +31,15 @@ class ProvidersPage extends Component {
   render() {
     const {organizations, providerMaps} = this.props
 
-    return (
-      <div className="page">
-        <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Manage Providers</h1>
-            </div>
-          </div>
-        </div>
-        <FancyScrollbar className="page-contents">
-          {organizations
-            ? <ProvidersTable
-                providerMaps={PROVIDER_MAPS} // TODO: replace with providerMaps prop
-                organizations={organizations}
-                onCreateMap={this.handleCreateMap}
-                onUpdateMap={this.handleUpdateMap}
-                onDeleteMap={this.handleDeleteMap}
-              />
-            : <div className="page-spinner" />}
-        </FancyScrollbar>
-      </div>
-    )
+    return organizations
+      ? <ProvidersTable
+          providerMaps={PROVIDER_MAPS} // TODO: replace with providerMaps prop
+          organizations={organizations}
+          onCreateMap={this.handleCreateMap}
+          onUpdateMap={this.handleUpdateMap}
+          onDeleteMap={this.handleDeleteMap}
+        />
+      : <div className="page-spinner" />
   }
 }