feat(resultOptions): add UI of aggregate window (#6248)

* chore: add AggregateWindow interface and default value

* chore: rename Aggregate to AggregateWindow

* chore: apply the renamed import file AggregateWindow

* chore: use persistance session storage to control aggregate window

* feat: add column selector

* feat: add aggregate function selector

* feat: add auto window period

* feat: add fill missing value toggle

* refactor: rewrite setSelection for aggregation window toggle

* refactor: rewrite setSelection for selected column

* refactor: rewrite setSelection for selected aggregate function

* refactor: rewrite setSelection for window period toggle and input form

* chore: fix transparent dropdown menu style

* chore: add search functionality for column and function dropdown

* chore: reset the search terms when toggle aggregate or select a column and a function

* feat: add context and provider for columns

* style: add paddings

* style: adjust paddings

* chore: add de-select for column

* chore: update default window period and aggregate function list

* chore: disable the toggle when no measurement is selected

* chore: use const for default window period

* refactor: move ColumnSelector to a separate FC component

* refactor: move AggregateFunctionSelector to a separate FC component

* chore: import style scss explicitly

* refactor: move WindowPeriod to a separate FC component

* chore: remove console.log

* refactor: move FillValuesToggle to a separate FC component

* chore: remove the ? after `selection` bc it is always decleared

* chore: replace disabled prop with status for ToggleWithLabelTooltip

* refactor: use inline logic instead of using a variable that is used once

Author: appletreeisyellow

src/dataExplorer/components/Aggregate.tsx

@@ -0,0 +1,82 @@
+import React, {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+// Components
+import SearchableDropdown from 'src/shared/components/SearchableDropdown'
+
+// Contexts
+import {
+  AggregateWindow,
+  DEFAULT_AGGREGATE_WINDOW,
+  PersistanceContext,
+} from 'src/dataExplorer/context/persistance'
+
+// Constants
+import {AGGREGATE_FUNCTIONS} from 'src/timeMachine/constants/queryBuilder'
+
+// Utilities
+import {ComponentStatus} from '@influxdata/clockface'
+
+export const AggregateFunctionsSelector: FC = () => {
+  // Contexts
+  const {selection, setSelection} = useContext(PersistanceContext)
+
+  // State
+  const [functionSearchTerm, setFunctionSearchTerm] = useState('')
+
+  const {isOn, fn: selectedFunction}: AggregateWindow =
+    selection.resultOptions?.aggregateWindow || DEFAULT_AGGREGATE_WINDOW
+
+  useEffect(() => {
+    setFunctionSearchTerm('')
+  }, [selection.bucket, selection.measurement])
+
+  useEffect(() => {
+    if (!isOn) {
+      setFunctionSearchTerm('')
+    }
+  }, [isOn])
+
+  const handleSelectFunction = useCallback(
+    (fn: string) => {
+      setSelection({
+        resultOptions: {
+          aggregateWindow: {
+            ...selection.resultOptions?.aggregateWindow,
+            fn,
+          },
+        },
+      })
+      setFunctionSearchTerm('')
+    },
+    [selection.resultOptions?.aggregateWindow, setSelection]
+  )
+
+  return useMemo(() => {
+    return (
+      isOn && (
+        <div className="result-options--item--row">
+          <SearchableDropdown
+            options={AGGREGATE_FUNCTIONS.map(f => f.name)}
+            selectedOption={selectedFunction || 'Select aggregate function'}
+            onSelect={handleSelectFunction}
+            searchPlaceholder="Search aggregate function"
+            searchTerm={functionSearchTerm}
+            onChangeSearchTerm={setFunctionSearchTerm}
+            emptyText="No functions found"
+            buttonStatus={ComponentStatus.Default}
+            testID="aggregate-window--function--dropdown"
+            buttonTestID="aggregate-window--function--dropdown-button"
+            menuTestID="aggregate-window--function--dropdown-menu"
+          />
+        </div>
+      )
+    )
+  }, [isOn, selectedFunction, functionSearchTerm, handleSelectFunction])
+}

src/dataExplorer/components/AggregateFunctionSelector.tsx

@@ -0,0 +1,72 @@
+import React, {FC, useCallback, useContext, useEffect, useMemo} from 'react'
+
+// Components
+import {ComponentStatus} from '@influxdata/clockface'
+import {ToggleWithLabelTooltip} from 'src/dataExplorer/components/ToggleWithLabelTooltip'
+import {ColumnSelector} from 'src/dataExplorer/components/ColumnSelector'
+import {AggregateFunctionsSelector} from 'src/dataExplorer/components/AggregateFunctionSelector'
+import {WindowPeriod} from 'src/dataExplorer/components/WindowPeriod'
+import {FillValuesToggle} from 'src/dataExplorer/components/FillValuesToggle'
+
+// Contexts
+import {
+  AggregateWindow,
+  DEFAULT_AGGREGATE_WINDOW,
+  PersistanceContext,
+} from 'src/dataExplorer/context/persistance'
+
+// Styles
+import './Sidebar.scss'
+
+const AGGREGATE_WINDOW_TOOLTIP = `test`
+
+const AggregateWindow: FC = () => {
+  // Contexts
+  const {selection, setSelection} = useContext(PersistanceContext)
+
+  const {isOn}: AggregateWindow =
+    selection.resultOptions?.aggregateWindow || DEFAULT_AGGREGATE_WINDOW
+
+  useEffect(() => {
+    setSelection({
+      resultOptions: {
+        aggregateWindow: JSON.parse(JSON.stringify(DEFAULT_AGGREGATE_WINDOW)),
+      },
+    })
+  }, [selection.bucket, selection.measurement])
+
+  const handleToggleAggregateWindow = useCallback(() => {
+    setSelection({
+      resultOptions: {
+        aggregateWindow: {
+          ...JSON.parse(JSON.stringify(DEFAULT_AGGREGATE_WINDOW)),
+          isOn: !selection.resultOptions?.aggregateWindow?.isOn,
+        },
+      },
+    })
+  }, [selection.resultOptions?.aggregateWindow, setSelection])
+
+  return useMemo(() => {
+    return (
+      <div>
+        <ToggleWithLabelTooltip
+          label="Aggregate"
+          active={isOn}
+          onChange={handleToggleAggregateWindow}
+          tooltipContents={AGGREGATE_WINDOW_TOOLTIP}
+          status={
+            selection.measurement
+              ? ComponentStatus.Default
+              : ComponentStatus.Disabled
+          }
+        />
+        <ColumnSelector />
+        <AggregateFunctionsSelector />
+        <WindowPeriod />
+        <FillValuesToggle />
+      </div>
+    )
+  }, [isOn, selection.measurement, handleToggleAggregateWindow])
+}
+
+export {AggregateWindow}

src/dataExplorer/components/AggregateWindow.tsx

@@ -0,0 +1,101 @@
+import React, {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+
+// Components
+import SearchableDropdown from 'src/shared/components/SearchableDropdown'
+
+// Contexts
+import {
+  AggregateWindow,
+  DEFAULT_AGGREGATE_WINDOW,
+  PersistanceContext,
+} from 'src/dataExplorer/context/persistance'
+import {ColumnsContext} from 'src/dataExplorer/context/columns'
+
+// Utilities
+import {toComponentStatus} from 'src/shared/utils/toComponentStatus'
+
+// Styles
+import './Sidebar.scss'
+
+export const ColumnSelector: FC = () => {
+  // Contexts
+  const {selection, setSelection} = useContext(PersistanceContext)
+  const {columns, loading, getColumns, resetColumns} =
+    useContext(ColumnsContext)
+
+  // States
+  const [columnSearchTerm, setColumnSearchTerm] = useState('')
+  const {isOn, column: selectedColumn}: AggregateWindow =
+    selection.resultOptions?.aggregateWindow || DEFAULT_AGGREGATE_WINDOW
+
+  useEffect(() => {
+    if (!selection.bucket || !selection.measurement) {
+      resetColumns()
+    } else {
+      getColumns(selection.bucket, selection.measurement)
+    }
+
+    setColumnSearchTerm('')
+  }, [selection.bucket, selection.measurement])
+
+  useEffect(() => {
+    if (!isOn) {
+      setColumnSearchTerm('')
+    }
+  }, [isOn])
+
+  const handleSelectColumn = useCallback(
+    (column: string) => {
+      let _column = column
+      if (selection.resultOptions?.aggregateWindow?.column === column) {
+        _column = ''
+      }
+      setSelection({
+        resultOptions: {
+          aggregateWindow: {
+            ...selection.resultOptions?.aggregateWindow,
+            column: _column,
+          },
+        },
+      })
+      setColumnSearchTerm('')
+    },
+    [selection.resultOptions?.aggregateWindow, setSelection]
+  )
+
+  return useMemo(() => {
+    return (
+      isOn && (
+        <div className="result-options--item--row">
+          <SearchableDropdown
+            options={columns}
+            selectedOption={selectedColumn || 'Select column'}
+            onSelect={handleSelectColumn}
+            searchPlaceholder="Search columns"
+            searchTerm={columnSearchTerm}
+            onChangeSearchTerm={setColumnSearchTerm}
+            emptyText="No columns found"
+            buttonStatus={toComponentStatus(loading)}
+            testID="aggregate-window--column--dropdown"
+            buttonTestID="aggregate-window--column--dropdown-button"
+            menuTestID="aggregate-window--column--dropdown-menu"
+          />
+        </div>
+      )
+    )
+  }, [
+    isOn,
+    columns,
+    loading,
+    selectedColumn,
+    columnSearchTerm,
+    handleSelectColumn,
+  ])
+}

src/dataExplorer/components/ColumnSelector.tsx

@@ -0,0 +1,44 @@
+import React, {FC, useCallback, useContext, useMemo} from 'react'
+
+// Components
+import {ToggleWithLabelTooltip} from 'src/dataExplorer/components/ToggleWithLabelTooltip'
+
+// Contexts
+import {
+  AggregateWindow,
+  DEFAULT_AGGREGATE_WINDOW,
+  PersistanceContext,
+} from 'src/dataExplorer/context/persistance'
+
+// Styles
+import './Sidebar.scss'
+
+export const FillValuesToggle: FC = () => {
+  const {selection, setSelection} = useContext(PersistanceContext)
+  const {isOn, createEmpty}: AggregateWindow =
+    selection.resultOptions?.aggregateWindow || DEFAULT_AGGREGATE_WINDOW
+
+  const handleToggleCreateEmpty = useCallback(() => {
+    const createEmpty = !selection.resultOptions?.aggregateWindow?.createEmpty
+    setSelection({
+      resultOptions: {
+        aggregateWindow: {
+          ...selection.resultOptions?.aggregateWindow,
+          createEmpty,
+        },
+      },
+    })
+  }, [selection.resultOptions?.aggregateWindow, setSelection])
+
+  return useMemo(() => {
+    return (
+      isOn && (
+        <ToggleWithLabelTooltip
+          label="Fill missing values"
+          active={createEmpty}
+          onChange={handleToggleCreateEmpty}
+        />
+      )
+    )
+  }, [isOn, createEmpty, handleToggleCreateEmpty])
+}

src/dataExplorer/components/FillValuesToggle.tsx

@@ -5,10 +5,11 @@ import {useSelector} from 'react-redux'
 import {Accordion} from '@influxdata/clockface'
 import {FieldsAsColumns} from 'src/dataExplorer/components/FieldsAsColumns'
 import {GroupBy} from 'src/dataExplorer/components/GroupBy'
-import {Aggregate} from 'src/dataExplorer/components/Aggregate'
+import {AggregateWindow} from 'src/dataExplorer/components/AggregateWindow'
 
 // Context
 import {GroupKeysProvider} from 'src/dataExplorer/context/groupKeys'
+import {ColumnsProvider} from 'src/dataExplorer/context/columns'
 
 // Utils
 import {getOrg} from 'src/organizations/selectors'
@@ -28,14 +29,16 @@ const ResultOptions: FC = () => {
 
   return (
     <GroupKeysProvider scope={scope}>
-      <Accordion className="result-options" expanded={true}>
-        <Accordion.AccordionHeader className="result-options--header">
-          Result Options
-        </Accordion.AccordionHeader>
-        <FieldsAsColumns />
-        <GroupBy />
-        <Aggregate />
-      </Accordion>
+      <ColumnsProvider scope={scope}>
+        <Accordion className="result-options" expanded={true}>
+          <Accordion.AccordionHeader className="result-options--header">
+            Result Options
+          </Accordion.AccordionHeader>
+          <FieldsAsColumns />
+          <GroupBy />
+          <AggregateWindow />
+        </Accordion>
+      </ColumnsProvider>
     </GroupKeysProvider>
   )
 }