Implement PageHeader on data explorer

Also removing header component in the process

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -12,10 +12,14 @@ import {stripPrefix} from 'src/utils/basepath'
 import QueryMaker from 'src/data_explorer/components/QueryMaker'
 import Visualization from 'src/data_explorer/components/Visualization'
 import WriteDataForm from 'src/data_explorer/components/WriteDataForm'
-import Header from 'src/data_explorer/containers/Header'
 import ResizeContainer from 'src/shared/components/ResizeContainer'
 import OverlayTechnologies from 'src/shared/components/OverlayTechnologies'
 import ManualRefresh from 'src/shared/components/ManualRefresh'
+import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
+import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
+import SourceIndicator from 'src/shared/components/SourceIndicator'
+import GraphTips from 'src/shared/components/GraphTips'
+import PageHeader from 'src/shared/components/PageHeader'
 
 import {VIS_VIEWS, AUTO_GROUP_BY, TEMPLATES} from 'src/shared/constants'
 import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants'
@@ -93,11 +97,9 @@ export class DataExplorer extends PureComponent<Props, State> {
       autoRefresh,
       queryConfigs,
       manualRefresh,
-      onManualRefresh,
       errorThrownAction,
       writeLineProtocol,
       queryConfigActions,
-      handleChooseAutoRefresh,
     } = this.props
 
     const {showWriteForm} = this.state
@@ -115,13 +117,10 @@ export class DataExplorer extends PureComponent<Props, State> {
             />
           </OverlayTechnologies>
         ) : null}
-        <Header
-          timeRange={timeRange}
-          autoRefresh={autoRefresh}
-          showWriteForm={this.handleOpenWriteData}
-          onChooseTimeRange={this.handleChooseTimeRange}
-          onChooseAutoRefresh={handleChooseAutoRefresh}
-          onManualRefresh={onManualRefresh}
+        <PageHeader
+          title="Data Explorer"
+          fullWidth={true}
+          renderOptions={this.renderHeaderOptions}
         />
         <ResizeContainer
           containerClass="page-contents"
@@ -186,6 +185,41 @@ export class DataExplorer extends PureComponent<Props, State> {
     const {timeRange} = this.props
     return buildRawText(this.activeQuery, timeRange)
   }
+
+  private renderHeaderOptions = (): JSX.Element => {
+    const {
+      timeRange,
+      autoRefresh,
+      onManualRefresh,
+      handleChooseAutoRefresh,
+    } = this.props
+
+    return (
+      <>
+        <GraphTips />
+        <SourceIndicator />
+        <div
+          className="btn btn-sm btn-default"
+          onClick={this.handleOpenWriteData}
+          data-test="write-data-button"
+        >
+          <span className="icon pencil" />
+          Write Data
+        </div>
+        <AutoRefreshDropdown
+          iconName="refresh"
+          selected={autoRefresh}
+          onChoose={handleChooseAutoRefresh}
+          onManualRefresh={onManualRefresh}
+        />
+        <TimeRangeDropdown
+          selected={timeRange}
+          page="DataExplorer"
+          onChooseTimeRange={this.handleChooseTimeRange}
+        />
+      </>
+    )
+  }
 }
 
 const mapStateToProps = state => {

ui/src/data_explorer/containers/Header.tsx

@@ -1,63 +0,0 @@
-import React, {PureComponent} from 'react'
-
-import AutoRefreshDropdown from 'src/shared/components/AutoRefreshDropdown'
-import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
-import SourceIndicator from 'src/shared/components/SourceIndicator'
-import GraphTips from 'src/shared/components/GraphTips'
-import {TimeRange} from 'src/types'
-
-interface Props {
-  onChooseAutoRefresh: () => void
-  onManualRefresh: () => void
-  onChooseTimeRange: (timeRange: TimeRange) => void
-  showWriteForm: () => void
-  autoRefresh: number
-  timeRange: TimeRange
-}
-
-class Header extends PureComponent<Props> {
-  public render() {
-    const {
-      timeRange,
-      autoRefresh,
-      showWriteForm,
-      onManualRefresh,
-      onChooseTimeRange,
-      onChooseAutoRefresh,
-    } = this.props
-    return (
-      <div className="page-header full-width">
-        <div className="page-header--container">
-          <div className="page-header--left">
-            <h1 className="page-header--title">Data Explorer</h1>
-          </div>
-          <div className="page-header--right">
-            <GraphTips />
-            <SourceIndicator />
-            <div
-              className="btn btn-sm btn-default"
-              onClick={showWriteForm}
-              data-test="write-data-button"
-            >
-              <span className="icon pencil" />
-              Write Data
-            </div>
-            <AutoRefreshDropdown
-              iconName="refresh"
-              selected={autoRefresh}
-              onChoose={onChooseAutoRefresh}
-              onManualRefresh={onManualRefresh}
-            />
-            <TimeRangeDropdown
-              selected={timeRange}
-              page="DataExplorer"
-              onChooseTimeRange={onChooseTimeRange}
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-export default Header