Implement Panel component on a page

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,13 +52,14 @@ 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">
+                <Panel>
                   {this.renderPanelHeading}
-                <div className="panel-body">
+                  <Panel.Body>
                     <DashboardsTable
                       dashboards={this.filteredDashboards}
                       onDeleteDashboard={onDeleteDashboard}
@@ -66,12 +68,14 @@ class DashboardsPageContents extends Component<Props, State> {
                       onExportDashboard={onExportDashboard}
                       dashboardLink={dashboardLink}
                     />
-                </div>
-              </div>
+                  </Panel.Body>
+                </Panel>
               </div>
             </div>
           </div>
         </FancyScrollbar>
+        {this.renderImportOverlay}
+      </>
     )
   }
 
@@ -79,10 +83,7 @@ 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">
+      <Panel.Header title={this.panelTitle}>
         <SearchBar
           placeholder="Filter by Name..."
           onSearch={this.filterDashboards}
@@ -103,10 +104,7 @@ class DashboardsPageContents extends Component<Props, State> {
             </button>
           </>
         </Authorized>
-          </div>
-        </div>
-        {this.renderImportOverlay}
-      </>
+      </Panel.Header>
     )
   }