From db7c26d0bfd446522492edd1234fd4f7021af8bd Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 27 Jul 2018 16:35:52 -0700
Subject: [PATCH] Implement Panel component on a page

---
 .../components/DashboardsPageContents.tsx     | 90 +++++++++----------
 1 file changed, 44 insertions(+), 46 deletions(-)

diff --git a/ui/src/dashboards/components/DashboardsPageContents.tsx b/ui/src/dashboards/components/DashboardsPageContents.tsx
index c09b14dfc..d9cd63136 100644
--- a/ui/src/dashboards/components/DashboardsPageContents.tsx
+++ b/ui/src/dashboards/components/DashboardsPageContents.tsx
@@ -8,6 +8,7 @@ import SearchBar from 'src/hosts/components/SearchBar'
 import FancyScrollbar from 'src/shared/components/FancyScrollbar'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import OverlayTechnology from 'src/reusable_ui/components/overlays/OverlayTechnology'
+import Panel from 'src/reusable_ui/components/panel/Panel'
 
 import {Dashboard} from 'src/types'
 import {Notification} from 'src/types/notifications'
@@ -51,27 +52,30 @@ class DashboardsPageContents extends Component<Props, State> {
     } = this.props
 
     return (
-      <FancyScrollbar className="page-contents">
-        <div className="container-fluid">
-          <div className="row">
-            <div className="col-md-12">
-              <div className="panel">
-                {this.renderPanelHeading}
-                <div className="panel-body">
-                  <DashboardsTable
-                    dashboards={this.filteredDashboards}
-                    onDeleteDashboard={onDeleteDashboard}
-                    onCreateDashboard={onCreateDashboard}
-                    onCloneDashboard={onCloneDashboard}
-                    onExportDashboard={onExportDashboard}
-                    dashboardLink={dashboardLink}
-                  />
-                </div>
+      <>
+        <FancyScrollbar className="page-contents">
+          <div className="container-fluid">
+            <div className="row">
+              <div className="col-md-12">
+                <Panel>
+                  {this.renderPanelHeading}
+                  <Panel.Body>
+                    <DashboardsTable
+                      dashboards={this.filteredDashboards}
+                      onDeleteDashboard={onDeleteDashboard}
+                      onCreateDashboard={onCreateDashboard}
+                      onCloneDashboard={onCloneDashboard}
+                      onExportDashboard={onExportDashboard}
+                      dashboardLink={dashboardLink}
+                    />
+                  </Panel.Body>
+                </Panel>
               </div>
             </div>
           </div>
-        </div>
-      </FancyScrollbar>
+        </FancyScrollbar>
+        {this.renderImportOverlay}
+      </>
     )
   }
 
@@ -79,34 +83,28 @@ class DashboardsPageContents extends Component<Props, State> {
     const {onCreateDashboard} = this.props
 
     return (
-      <>
-        <div className="panel-heading">
-          <h2 className="panel-title">{this.panelTitle}</h2>
-          <div className="panel-controls">
-            <SearchBar
-              placeholder="Filter by Name..."
-              onSearch={this.filterDashboards}
-            />
-            <Authorized requiredRole={EDITOR_ROLE}>
-              <>
-                <button
-                  className="btn btn-sm btn-default"
-                  onClick={this.handleToggleOverlay}
-                >
-                  <span className="icon import" /> Import Dashboard
-                </button>
-                <button
-                  className="btn btn-sm btn-primary"
-                  onClick={onCreateDashboard}
-                >
-                  <span className="icon plus" /> Create Dashboard
-                </button>
-              </>
-            </Authorized>
-          </div>
-        </div>
-        {this.renderImportOverlay}
-      </>
+      <Panel.Header title={this.panelTitle}>
+        <SearchBar
+          placeholder="Filter by Name..."
+          onSearch={this.filterDashboards}
+        />
+        <Authorized requiredRole={EDITOR_ROLE}>
+          <>
+            <button
+              className="btn btn-sm btn-default"
+              onClick={this.handleToggleOverlay}
+            >
+              <span className="icon import" /> Import Dashboard
+            </button>
+            <button
+              className="btn btn-sm btn-primary"
+              onClick={onCreateDashboard}
+            >
+              <span className="icon plus" /> Create Dashboard
+            </button>
+          </>
+        </Authorized>
+      </Panel.Header>
     )
   }