chore: cleaning up code styling (#18223)

ui/src/notebooks/components/Notebook.tsx

@@ -2,7 +2,7 @@ import React, {FC} from 'react'
 
 import {Page} from '@influxdata/clockface'
 import {NotebookProvider} from 'src/notebooks/context/notebook'
-import Header from 'src/notebooks/components/Header'
+import Header from 'src/notebooks/components/header'
 import PipeList from 'src/notebooks/components/PipeList'
 
 // NOTE: uncommon, but using this to scope the project

ui/src/notebooks/components/NotebookPipe.tsx

@@ -0,0 +1,33 @@
+import React, {FC, createElement, useMemo} from 'react'
+
+import {PipeContextProps, PipeData} from 'src/notebooks'
+import Pipe from 'src/notebooks/components/Pipe'
+import NotebookPanel from 'src/notebooks/components/panel/NotebookPanel'
+
+export interface NotebookPipeProps {
+  index: number
+  data: PipeData
+  onUpdate: (index: number, pipe: PipeData) => void
+}
+
+const NotebookPipe: FC<NotebookPipeProps> = ({index, data, onUpdate}) => {
+  const panel: FC<PipeContextProps> = useMemo(
+    () => props => {
+      const _props = {
+        ...props,
+        index,
+      }
+
+      return createElement(NotebookPanel, _props)
+    },
+    [index]
+  )
+
+  const _onUpdate = (data: PipeData) => {
+    onUpdate(index, data)
+  }
+
+  return <Pipe data={data} onUpdate={_onUpdate} Context={panel} />
+}
+
+export default NotebookPipe

ui/src/notebooks/components/PipeList.tsx

@@ -1,34 +1,6 @@
-import React, {FC, useContext, useCallback, createElement, useMemo} from 'react'
-import {PipeContextProps, PipeData} from 'src/notebooks'
-import Pipe from 'src/notebooks/components/Pipe'
+import React, {FC, useContext, useCallback} from 'react'
 import {NotebookContext} from 'src/notebooks/context/notebook'
-import NotebookPanel from 'src/notebooks/components/panel/NotebookPanel'
-
-interface NotebookPipeProps {
-  index: number
-  data: PipeData
-  onUpdate: (index: number, pipe: PipeData) => void
-}
-
-const NotebookPipe: FC<NotebookPipeProps> = ({index, data, onUpdate}) => {
-  const panel: FC<PipeContextProps> = useMemo(
-    () => props => {
-      const _props = {
-        ...props,
-        index,
-      }
-
-      return createElement(NotebookPanel, _props)
-    },
-    [index]
-  )
-
-  const _onUpdate = (data: PipeData) => {
-    onUpdate(index, data)
-  }
-
-  return <Pipe data={data} onUpdate={_onUpdate} Context={panel} />
-}
+import NotebookPipe from 'src/notebooks/components/NotebookPipe'
 
 const PipeList: FC = () => {
   const {id, pipes, updatePipe} = useContext(NotebookContext)

ui/src/notebooks/components/header/AutoRefreshDropdown.tsx

@@ -0,0 +1,34 @@
+import React, {FC, useMemo} from 'react'
+import {default as StatelessAutoRefreshDropdown} from 'src/shared/components/dropdown_auto_refresh/AutoRefreshDropdown'
+import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
+import {TimeBlock} from 'src/notebooks/context/time'
+import {AutoRefreshStatus} from 'src/types'
+
+const AutoRefreshDropdown: FC<TimeContextProps> = ({context, update}) => {
+  const {refresh} = context
+
+  const updateRefresh = (interval: number) => {
+    const status =
+      interval === 0 ? AutoRefreshStatus.Paused : AutoRefreshStatus.Active
+
+    update({
+      refresh: {
+        status,
+        interval,
+      },
+    } as TimeBlock)
+  }
+
+  return useMemo(
+    () => (
+      <StatelessAutoRefreshDropdown
+        selected={refresh}
+        onChoose={updateRefresh}
+        showManualRefresh={false}
+      />
+    ),
+    [refresh]
+  )
+}
+
+export default AutoRefreshDropdown

ui/src/notebooks/components/header/Buttons.tsx

@@ -0,0 +1,57 @@
+import React, {FC, useContext, useCallback} from 'react'
+
+import {NotebookContext} from 'src/notebooks/context/notebook'
+import {TimeProvider, TimeContext, TimeBlock} from 'src/notebooks/context/time'
+import AppSettingProvider from 'src/notebooks/context/app'
+
+import TimeZoneDropdown from 'src/notebooks/components/header/TimeZoneDropdown'
+import TimeRangeDropdown from 'src/notebooks/components/header/TimeRangeDropdown'
+import AutoRefreshDropdown from 'src/notebooks/components/header/AutoRefreshDropdown'
+
+import {SubmitQueryButton} from 'src/timeMachine/components/SubmitQueryButton'
+import {RemoteDataState} from 'src/types'
+
+export interface TimeContextProps {
+  context: TimeBlock
+  update: (data: TimeBlock) => void
+}
+
+const Buttons: FC = () => {
+  const {id} = useContext(NotebookContext)
+  const {timeContext, addTimeContext, updateTimeContext} = useContext(
+    TimeContext
+  )
+
+  const update = useCallback(
+    (data: TimeBlock) => {
+      updateTimeContext(id, data)
+    },
+    [id]
+  )
+
+  function submit() {} // eslint-disable-line @typescript-eslint/no-empty-function
+
+  if (!timeContext.hasOwnProperty(id)) {
+    addTimeContext(id)
+    return null
+  }
+
+  return (
+    <TimeProvider>
+      <AppSettingProvider>
+        <div className="notebook-header--buttons">
+          <TimeZoneDropdown />
+          <TimeRangeDropdown context={timeContext[id]} update={update} />
+          <AutoRefreshDropdown context={timeContext[id]} update={update} />
+          <SubmitQueryButton
+            submitButtonDisabled={false}
+            queryStatus={RemoteDataState.NotStarted}
+            onSubmit={submit}
+          />
+        </div>
+      </AppSettingProvider>
+    </TimeProvider>
+  )
+}
+
+export default Buttons

ui/src/notebooks/components/header/TimeRangeDropdown.tsx

@@ -0,0 +1,25 @@
+import React, {FC, useMemo} from 'react'
+import {default as StatelessTimeRangeDropdown} from 'src/shared/components/TimeRangeDropdown'
+import {TimeContextProps} from 'src/notebooks/components/header/Buttons'
+import {TimeBlock} from 'src/notebooks/context/time'
+
+const TimeRangeDropdown: FC<TimeContextProps> = ({context, update}) => {
+  const {range} = context
+
+  const updateRange = range => {
+    update({
+      range,
+    } as TimeBlock)
+  }
+
+  return useMemo(() => {
+    return (
+      <StatelessTimeRangeDropdown
+        timeRange={range}
+        onSetTimeRange={updateRange}
+      />
+    )
+  }, [range])
+}
+
+export default TimeRangeDropdown

ui/src/notebooks/components/header/TimeZoneDropdown.tsx

@@ -0,0 +1,18 @@
+import React, {FC, useContext} from 'react'
+
+import {AppSettingContext} from 'src/notebooks/context/app'
+
+import {TimeZoneDropdown as StatelessTimeZoneDropdown} from 'src/shared/components/TimeZoneDropdown'
+
+const TimeZoneDropdown: FC = React.memo(() => {
+  const {timeZone, onSetTimeZone} = useContext(AppSettingContext)
+
+  return (
+    <StatelessTimeZoneDropdown
+      timeZone={timeZone}
+      onSetTimeZone={onSetTimeZone}
+    />
+  )
+})
+
+export default TimeZoneDropdown

ui/src/notebooks/components/header/index.tsx

@@ -0,0 +1,25 @@
+import React, {FC} from 'react'
+
+import {Page} from '@influxdata/clockface'
+import AddButtons from 'src/notebooks/components/AddButtons'
+import Buttons from 'src/notebooks/components/header/Buttons'
+
+const FULL_WIDTH = true
+
+const Header: FC = () => (
+  <>
+    <Page.Header fullWidth={FULL_WIDTH}>
+      <Page.Title title="Notebooks" />
+    </Page.Header>
+    <Page.ControlBar fullWidth={FULL_WIDTH}>
+      <Page.ControlBarLeft>
+        <AddButtons />
+      </Page.ControlBarLeft>
+      <Page.ControlBarRight>
+        <Buttons />
+      </Page.ControlBarRight>
+    </Page.ControlBar>
+  </>
+)
+
+export default Header