feat: add basic schema browser in new data explorer (#4650)

* feat: add Schema in basic structure

* feat: add BucketSelector component

* feat: add Dropdown button and menu in BucketSelector

* feat: add search icon in SearchableDropdown

* feat: replace Dropdown with SearchableDropdown

* feat: add icon next to select title

* chore: update Bucket onSelect

* feat: add measurement selector

* feat: add search bar for fields and tags

* feat: add FieldsSelector and TagKeysSelector

* chore: separate SelectorTitle component into its own file and move each instance into each selector component

* feat: add accordion in FieldsSelector and TagKeys Selector

* style: add scrollbar

* chore: update import path to be absolute

* feat: add empty view

* feat: add empty view for TagKeysSelector

* chore: run prettier

* feat: add sample measurement and enable search bar

* feat: enable search bar in BucketSelector

* feat: add question tooltip and test info

* style: expand accordion by default

* feat: wire measurement selector context

* chore: run prettier

* chore: depend fields and tags on measurements

* feat: add loading status for tags and fields

* chore: rename and move newDataExplorer context into context folder

* feat: make measurement selector and filedtag selector depend on bucket

* chore: rename to FieldSelector and TagSelector

* feat: add accordion to tag keys

* chore: rename style class name

* style: wrap long key value text

* chore: run prettier

* chore: add more sample data

* chore: remove not valid title

* style: add side bar to search bar, fields, and tags

* feat: get real buckets from bucket context

* style: add more space for list items

* chore: run prettier

* chore: fix lint error

* chore: restructure data structure for NewDataExplorerContext

* chore: move constant into a separate file

* chore: change selectedBucket from string to Bucket object

* feat: get real measurements using query

* chore: move around import file

* chore: add useCallback and remove not used constant

* chore: update comment

* feat: get real fields from query

* fix: update the query to get fields and use constant to represent queries

* feat: get real tag keys from query

* chore: reorder sort() and limit() func and make limit and constant

* feat: get real tag values from query

* feat: add loading status for tags

* feat: add loading status for fields

* feat: add load more button

* style: add hover effect for field and tag values, rename classnames for tag keys and values

* chore: reset load more config when field values get updated

* feat: get tag values on demand

* chore: remove useCallback on getBucket and getMeasurement

* chore: remove console.log query

* chore: only fetch tag values if no values originally

* fix: change data structure to store status for each tag keys

* fix: run prettier

* refactor: use find to get the selected bucket

* refactor: replace lodash with vanilla js

* refactor: use `slice` only for load more logic

* refactor: remove extra logic for load more button in useEffect

* refactor: simplify the load more logic in FieldSelector

* refactor: simplify the load more logic in TagSelector

* refactor: replace lodash `isEmpty` with vanilla js

* refactor: add more detail in comment on `handleSelectTagValue`

* refactor: rename context function name to `fetchTagValues`

* refactor: replace `Hash` with `Record` for `type Tags`

* refactor: remove unused `loading` context

* refactor: fix lint

* style: update margin-bottom for tag keys

* feat: add loading status for measurements

* refactor: move the logic for handling selection from parent to child `TagValues`

* feat: add icon in the search bar (confirmed by Julia and the design team)

* chore: move measurent context into an independent file

* chore: move fields context into an independent file

* refactor: rename FieldContext to FieldsContext and related names

* chore: move tagss context into an independent file

* chore: reset load status when reset fields

* chore: import RemoteDataState from src/types to keep the code consistent with the rest of the code

* chore: remove `...` in search bar placeholder

* chore: update comment for time range

Author: appletreeisyellow

src/dataExplorer/components/BucketSelector.tsx

@@ -0,0 +1,49 @@
+import React, {FC, useContext, useState} from 'react'
+
+// Components
+import {ComponentStatus} from '@influxdata/clockface'
+import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
+import SearchableDropdown from 'src/shared/components/SearchableDropdown'
+
+// Contexts
+import {NewDataExplorerContext} from 'src/dataExplorer/context/newDataExplorer'
+import {BucketContext} from 'src/shared/contexts/buckets'
+
+const BucketSelector: FC = () => {
+  const {selectedBucket, selectBucket} = useContext(NewDataExplorerContext)
+  const {buckets} = useContext(BucketContext)
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const handleSelectBucket = (name: string) => {
+    const bucket = buckets.find(b => b.name === name)
+    if (!bucket) {
+      return
+    }
+    selectBucket(bucket)
+  }
+
+  const handleChangeSearchTerm = (value: string) => {
+    setSearchTerm(value)
+  }
+
+  return (
+    <div>
+      <SelectorTitle title="Bucket" info="Test info" />
+      <SearchableDropdown
+        searchTerm={searchTerm}
+        searchPlaceholder="Search buckets"
+        selectedOption={selectedBucket?.name || 'Select bucket...'}
+        onSelect={handleSelectBucket}
+        onChangeSearchTerm={handleChangeSearchTerm}
+        options={buckets.map(b => b.name)}
+        buttonStatus={ComponentStatus.Default}
+        testID="bucket-selector--dropdown"
+        buttonTestID="bucket-selector--dropdown-button"
+        menuTestID="bucket-selector--dropdown-menu"
+        emptyText="No Buckets Found"
+      />
+    </div>
+  )
+}
+
+export default BucketSelector

src/dataExplorer/components/FieldSelector.tsx

@@ -0,0 +1,75 @@
+import React, {FC, useContext, useEffect, useMemo, useState} from 'react'
+
+// Components
+import {Accordion} from '@influxdata/clockface'
+import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
+
+// Contexts
+import {LOCAL_LIMIT} from 'src/dataExplorer/context/newDataExplorer'
+import {FieldsContext} from 'src/dataExplorer/context/fields'
+import WaitingText from 'src/shared/components/WaitingText'
+
+// Types
+import {RemoteDataState} from 'src/types'
+
+// Syles
+import './Schema.scss'
+
+const FieldSelector: FC = () => {
+  const {fields, loading} = useContext(FieldsContext)
+  const [fieldsToShow, setFieldsToShow] = useState([])
+
+  useEffect(() => {
+    // Reset
+    setFieldsToShow(fields.slice(0, LOCAL_LIMIT))
+  }, [fields])
+
+  let list: JSX.Element | JSX.Element[] = (
+    <div className="field-selector--list-item">No Fields Found</div>
+  )
+
+  if (loading === RemoteDataState.Error) {
+    list = (
+      <div className="field-selector--list-item">Failed to load fields</div>
+    )
+  } else if (
+    loading === RemoteDataState.Loading ||
+    loading === RemoteDataState.NotStarted
+  ) {
+    list = <WaitingText text="Loading fields" />
+  } else if (loading === RemoteDataState.Done && fieldsToShow.length) {
+    list = fieldsToShow.map(field => (
+      <div key={field} className="field-selector--list-item">
+        {field}
+      </div>
+    ))
+  }
+
+  const handleLoadMore = () => {
+    const newIndex = fieldsToShow.length + LOCAL_LIMIT
+    setFieldsToShow(fields.slice(0, newIndex))
+  }
+
+  return useMemo(() => {
+    const shouldLoadMore = fieldsToShow.length < fields.length
+    const loadMoreButton = shouldLoadMore && (
+      <div className="load-more-button" onClick={handleLoadMore}>
+        + Load more
+      </div>
+    )
+
+    return (
+      <Accordion className="field-selector" expanded={true}>
+        <Accordion.AccordionHeader className="field-selector--header">
+          <SelectorTitle title="Fields" info="Test info" />
+        </Accordion.AccordionHeader>
+        <div className="container-side-bar">
+          {list}
+          {loadMoreButton}
+        </div>
+      </Accordion>
+    )
+  }, [fields, list])
+}
+
+export default FieldSelector

src/dataExplorer/components/MeasurementSelector.tsx

@@ -0,0 +1,67 @@
+import React, {FC, useContext, useMemo, useState} from 'react'
+
+// Components
+import {ComponentStatus} from '@influxdata/clockface'
+import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
+import SearchableDropdown from 'src/shared/components/SearchableDropdown'
+
+// Context
+import {NewDataExplorerContext} from 'src/dataExplorer/context/newDataExplorer'
+import {MeasurementContext} from 'src/dataExplorer/context/measurements'
+
+// Types
+import {RemoteDataState} from 'src/types'
+
+const convertStatus = (remoteDataState: RemoteDataState): ComponentStatus => {
+  switch (remoteDataState) {
+    case RemoteDataState.Error:
+      return ComponentStatus.Error
+    case RemoteDataState.Loading:
+      return ComponentStatus.Loading
+    default:
+      return ComponentStatus.Default
+  }
+}
+
+const MeasurementSelector: FC = () => {
+  const {selectedBucket, selectedMeasurement, selectMeasurement} = useContext(
+    NewDataExplorerContext
+  )
+  const {measurements, loading} = useContext(MeasurementContext)
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const handleSelect = (option: string): void => {
+    selectMeasurement(option)
+  }
+
+  const handleChangeSearchTerm = (value: string) => {
+    setSearchTerm(value)
+  }
+
+  return useMemo(() => {
+    if (!selectedBucket) {
+      return null
+    }
+
+    return (
+      <div>
+        <SelectorTitle title="Measurement" info="Test info" />
+        <SearchableDropdown
+          searchTerm={searchTerm}
+          searchPlaceholder="Search measurements"
+          selectedOption={selectedMeasurement || 'Select measurement...'}
+          onSelect={handleSelect}
+          onChangeSearchTerm={handleChangeSearchTerm}
+          options={measurements}
+          buttonStatus={convertStatus(loading)}
+          testID="measurement-selector--dropdown"
+          buttonTestID="measurement-selector--dropdown-button"
+          menuTestID="measurement-selector--dropdown--menu"
+          emptyText="No Measurements Found"
+        />
+      </div>
+    )
+  }, [selectedBucket, selectedMeasurement, measurements, loading])
+}
+
+export default MeasurementSelector

src/dataExplorer/components/NewDataExplorer.scss

@@ -12,8 +12,4 @@
     min-height: auto;
     width: calc(25% - 60px);
   }
-
-  h1 {
-    text-align: center;
-  }
 }

src/dataExplorer/components/NewDataExplorer.tsx

@@ -1,9 +1,13 @@
 import React, {FC, useState} from 'react'
+
+// Components
 import {DraggableResizer, Orientation} from '@influxdata/clockface'
 import {QueryProvider} from 'src/shared/contexts/query'
 import {ResultsProvider} from 'src/dataExplorer/components/ResultsContext'
 import ResultsPane from 'src/dataExplorer/components/ResultsPane'
+import Schema from 'src/dataExplorer/components/Schema'
 
+// Styles
 import './NewDataExplorer.scss'
 
 const INITIAL_VERT_RESIZER_HANDLE = 0.2
@@ -21,7 +25,7 @@ const NewDataExplorer: FC = () => {
         onChangePositions={setVertDragPosition}
       >
         <DraggableResizer.Panel>
-          <h1>[ schema ]</h1>
+          <Schema />
         </DraggableResizer.Panel>
         <DraggableResizer.Panel className="new-data-explorer-rightside">
           <ResultsProvider>

src/dataExplorer/components/Schema.scss

@@ -0,0 +1,86 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.scroll--container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+}
+
+.data-schema {
+  padding-right: $cf-space-xs;
+}
+
+.container-side-bar {
+  border-left: 1px solid $cf-grey-25;
+  padding-left: $cf-space-2xs;
+  margin-top: $cf-space-xs;
+}
+
+.selector-title {
+  padding-bottom: $cf-space-2xs;
+}
+
+.selector-title--icon {
+  padding-left: $cf-space-2xs;
+}
+
+.selector-title--icon .cf-question-mark-tooltip {
+  background-color: $cf-grey-35;
+}
+
+.field-selector,
+.tag-selector-key {
+  padding-top: $cf-space-2xs;
+}
+
+.field-selector .cf-accordion--icon,
+.tag-selector-key .cf-accordion--icon,
+.tag-selector-value .cf-accordion--icon {
+  color: gray;
+}
+
+.field-selector--header,
+.tag-selector-key--header,
+.tag-selector-value--header {
+  background-color: transparent;
+  min-height: 0;
+  padding: 0;
+}
+
+.field-selector--list-item,
+.tag-selector-value--list-item {
+  padding: $cf-space-2xs 0 $cf-space-2xs $cf-space-2xs;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tag-selector-key--list-item {
+  padding: $cf-space-3xs 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.field-selector--list-item:hover,
+.tag-selector-value--list-item:hover {
+  cursor: pointer;
+  color: $c-krypton;
+  background-color: $cf-grey-25;
+}
+
+.field-selector .container-side-bar,
+.tag-selector-key .container-side-bar {
+  margin-top: 0;
+}
+
+.load-more-button {
+  color: $c-pool;
+  cursor: pointer;
+  padding: $cf-space-2xs 0 $cf-space-xs 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}