From f18f51ada955842b6ac0579c51aed344091a3028 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 1 Aug 2018 16:42:17 -0700
Subject: [PATCH] Revert usage of panel components in page

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

diff --git a/ui/src/dashboards/components/DashboardsPageContents.tsx b/ui/src/dashboards/components/DashboardsPageContents.tsx
index d9cd63136..c09b14dfc 100644
--- a/ui/src/dashboards/components/DashboardsPageContents.tsx
+++ b/ui/src/dashboards/components/DashboardsPageContents.tsx
@@ -8,7 +8,6 @@ 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'
@@ -52,30 +51,27 @@ 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">
-                <Panel>
-                  {this.renderPanelHeading}
-                  <Panel.Body>
-                    <DashboardsTable
-                      dashboards={this.filteredDashboards}
-                      onDeleteDashboard={onDeleteDashboard}
-                      onCreateDashboard={onCreateDashboard}
-                      onCloneDashboard={onCloneDashboard}
-                      onExportDashboard={onExportDashboard}
-                      dashboardLink={dashboardLink}
-                    />
-                  </Panel.Body>
-                </Panel>
+      <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>
               </div>
             </div>
           </div>
-        </FancyScrollbar>
-        {this.renderImportOverlay}
-      </>
+        </div>
+      </FancyScrollbar>
     )
   }
 
@@ -83,28 +79,34 @@ class DashboardsPageContents extends Component<Props, State> {
     const {onCreateDashboard} = this.props
 
     return (
-      <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>
+      <>
+        <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}
+      </>
     )
   }