Rename prop to "RenderPageControls"

ui/src/alerts/containers/AlertsApp.tsx

@@ -97,7 +97,7 @@ class AlertsApp extends PureComponent<Props, State> {
       <div className="page alert-history-page">
         <PageHeader
           title="Alert History"
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <div className="page-contents">
@@ -111,7 +111,7 @@ class AlertsApp extends PureComponent<Props, State> {
     )
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {timeRange} = this.state
 
     return (

ui/src/dashboards/components/DashboardHeader.tsx

@@ -52,14 +52,14 @@ class DashboardHeader extends Component<Props> {
       <PageHeader
         fullWidth={true}
         sourceIndicator={true}
-        renderTitle={this.title}
-        renderOptions={this.options}
+        renderTitle={this.renderPageTitle}
+        renderPageControls={this.renderPageControls}
         inPresentationMode={isHidden}
       />
     )
   }
 
-  private title = (): JSX.Element => {
+  private renderPageTitle = (): JSX.Element => {
     return (
       <>
         {this.dashboardSwitcher}
@@ -68,7 +68,7 @@ class DashboardHeader extends Component<Props> {
     )
   }
 
-  private options = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {
       handleChooseAutoRefresh,
       onManualRefresh,

ui/src/data_explorer/containers/DataExplorer.tsx

@@ -119,7 +119,7 @@ export class DataExplorer extends PureComponent<Props, State> {
         <PageHeader
           title="Data Explorer"
           fullWidth={true}
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <ResizeContainer
@@ -186,7 +186,7 @@ export class DataExplorer extends PureComponent<Props, State> {
     return buildRawText(this.activeQuery, timeRange)
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {
       timeRange,
       autoRefresh,

ui/src/flux/components/FluxHeader.tsx

@@ -22,12 +22,12 @@ class FluxHeader extends PureComponent<Props> {
       <PageHeader
         title="Flux Editor"
         fullWidth={true}
-        renderOptions={this.renderOptions}
+        renderPageControls={this.renderPageControls}
       />
     )
   }
 
-  private renderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     return (
       <button onClick={this.overlay} className="btn btn-sm btn-default">
         Edit Connection

ui/src/hosts/containers/HostsPage.js

@@ -116,7 +116,7 @@ export class HostsPage extends Component {
       <div className="page hosts-list-page">
         <PageHeader
           title="Host List"
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <div className="page-contents">
@@ -137,7 +137,7 @@ export class HostsPage extends Component {
     )
   }
 
-  renderHeaderOptions = () => {
+  renderPageControls = () => {
     const {autoRefresh, onChooseAutoRefresh, onManualRefresh} = this.props
 
     return (

ui/src/kapacitor/components/KapacitorRule.js

@@ -167,7 +167,7 @@ class KapacitorRule extends Component {
     ruleActions.updateRuleValues(rule.id, rule.trigger, {period: text})
   }
 
-  renderHeaderOptions = () => {
+  renderPageControls = () => {
     return (
       <RuleHeaderSave
         onSave={this.handleSave}
@@ -192,7 +192,7 @@ class KapacitorRule extends Component {
       <div className="page">
         <PageHeader
           title="Alert Rule Builder"
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
           sourceIndicator={true}
         />
         <FancyScrollbar className="page-contents fancy-scroll--kapacitor">

ui/src/kapacitor/components/TickscriptHeader.tsx

@@ -23,30 +23,31 @@ class TickscriptHeader extends PureComponent<Props> {
         title="TICKscript Editor"
         fullWidth={true}
         sourceIndicator={true}
-        renderCenter={this.logsToggle}
-        renderOptions={this.saveAndExit}
+        renderPageControls={this.renderPageControls}
       />
     )
   }
 
-  private logsToggle = (): JSX.Element => {
-    const {areLogsEnabled, areLogsVisible, onToggleLogsVisibility} = this.props
-
-    return (
-      <LogsToggle
-        areLogsEnabled={areLogsEnabled}
-        areLogsVisible={areLogsVisible}
-        onToggleLogsVisibility={onToggleLogsVisibility}
-      />
-    )
-  }
-
-  private saveAndExit = (): JSX.Element => {
-    const {task, onSave, onExit, unsavedChanges, isNewTickscript} = this.props
+  private renderPageControls = (): JSX.Element => {
+    const {
+      task,
+      onSave,
+      onExit,
+      unsavedChanges,
+      isNewTickscript,
+      areLogsEnabled,
+      areLogsVisible,
+      onToggleLogsVisibility,
+    } = this.props
 
     if (unsavedChanges) {
       return (
         <>
+          <LogsToggle
+            areLogsEnabled={areLogsEnabled}
+            areLogsVisible={areLogsVisible}
+            onToggleLogsVisibility={onToggleLogsVisibility}
+          />
           <TickscriptSave
             task={task}
             onSave={onSave}

ui/src/kapacitor/containers/KapacitorRulesPage.tsx

@@ -91,7 +91,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   <div className="page">
     <PageHeader
       title="Manage Tasks"
-      renderOptions={renderHeaderOptions}
+      renderPageControls={renderPageControls}
       sourceIndicator={true}
     />
     <FancyScrollbar className="page-contents fancy-scroll--kapacitor">
@@ -104,7 +104,7 @@ const PageContents: SFC<PageContentsProps> = ({children}) => (
   </div>
 )
 
-const renderHeaderOptions = (): JSX.Element => {
+const renderPageControls = (): JSX.Element => {
   return (
     <QuestionMarkTooltip
       tipID="manage-tasks--tooltip"

ui/src/logs/components/LogViewerHeader.tsx

@@ -33,7 +33,7 @@ class LogViewerHeader extends PureComponent<Props> {
       <PageHeader
         renderTitle={this.renderHeaderTitle}
         fullWidth={true}
-        renderOptions={this.renderHeaderOptions}
+        renderPageControls={this.renderPageControls}
       />
     )
   }
@@ -47,7 +47,7 @@ class LogViewerHeader extends PureComponent<Props> {
     )
   }
 
-  private renderHeaderOptions = (): JSX.Element => {
+  private renderPageControls = (): JSX.Element => {
     const {timeRange} = this.props
 
     return (

ui/src/shared/components/PageHeader.tsx

@@ -7,7 +7,7 @@ import SourceIndicator from 'src/shared/components/SourceIndicator'
 interface Props {
   title?: string
   renderTitle?: () => ReactElement<any>
-  renderOptions?: () => ReactElement<any>
+  renderPageControls?: () => ReactElement<any>
   fullWidth?: boolean
   sourceIndicator?: boolean
   inPresentationMode?: boolean
@@ -59,13 +59,13 @@ class PageHeader extends Component<Props> {
   }
 
   private get renderRight(): JSX.Element {
-    const {renderOptions} = this.props
+    const {renderPageControls} = this.props
 
-    if (!renderOptions) {
+    if (!renderPageControls) {
       return
     }
 
-    return renderOptions()
+    return renderPageControls()
   }
 
   private get className(): string {

ui/src/status/containers/StatusPage.js

@@ -61,7 +61,7 @@ class StatusPage extends Component {
         <PageHeader
           title="Status"
           fullWidth={true}
-          renderOptions={this.renderHeaderOptions}
+          renderPageControls={this.renderPageControls}
         />
         <FancyScrollbar className="page-contents">
           <div className="dashboard container-fluid full-width">
@@ -85,7 +85,7 @@ class StatusPage extends Component {
     )
   }
 
-  renderHeaderOptions = () => {
+  renderPageControls = () => {
     return <SourceIndicator />
   }
 }