feat: add loader to the measurement selector (#5100)

Author: asalem1

package.json

@@ -164,7 +164,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@docsearch/react": "^3.0.0-alpha.37",
-    "@influxdata/clockface": "^4.7.4",
+    "@influxdata/clockface": "^4.8.0",
     "@influxdata/flux-lsp-browser": "0.8.21",
     "@influxdata/giraffe": "^2.32.0",
     "@influxdata/influxdb-templates": "0.9.0",

src/dataExplorer/components/MeasurementSelector.tsx

@@ -1,14 +1,7 @@
-import React, {
-  FC,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import React, {FC, useCallback, useContext, useEffect, useState} from 'react'
 
 // Components
-import {ComponentStatus} from '@influxdata/clockface'
+import {toComponentStatus} from 'src/shared/utils/toComponentStatus'
 import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
 import SearchableDropdown from 'src/shared/components/SearchableDropdown'
 
@@ -17,7 +10,6 @@ import {FluxQueryBuilderContext} from 'src/dataExplorer/context/fluxQueryBuilder
 import {MeasurementsContext} from 'src/dataExplorer/context/measurements'
 
 // Types
-import {RemoteDataState} from 'src/types'
 import {event} from 'src/cloud/utils/reporting'
 
 const MEASUREMENT_TOOLTIP = `The measurement acts as a container for tags, \
@@ -26,17 +18,6 @@ the data that are stored in the associated fields. Measurement names are \
 strings, and, for any SQL users out there, a measurement is conceptually \
 similar to a table.`
 
-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(
     FluxQueryBuilderContext
@@ -60,37 +41,28 @@ const MeasurementSelector: FC = () => {
     setSearchTerm(value)
   }
 
-  return useMemo(() => {
-    if (!selectedBucket) {
-      return null
-    }
+  if (!selectedBucket) {
+    return null
+  }
 
-    return (
-      <div>
-        <SelectorTitle title="Measurement" info={MEASUREMENT_TOOLTIP} />
-        <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,
-    searchTerm,
-    handleSelect,
-  ])
+  return (
+    <div>
+      <SelectorTitle title="Measurement" info={MEASUREMENT_TOOLTIP} />
+      <SearchableDropdown
+        searchTerm={searchTerm}
+        searchPlaceholder="Search measurements"
+        selectedOption={selectedMeasurement || 'Select measurement...'}
+        onSelect={handleSelect}
+        onChangeSearchTerm={handleChangeSearchTerm}
+        options={measurements}
+        buttonStatus={toComponentStatus(loading)}
+        testID="measurement-selector--dropdown"
+        buttonTestID="measurement-selector--dropdown-button"
+        menuTestID="measurement-selector--dropdown--menu"
+        emptyText="No Measurements Found"
+      />
+    </div>
+  )
 }
 
 export default MeasurementSelector

yarn.lock

@@ -1458,10 +1458,10 @@
     gud "^1.0.0"
     warning "^4.0.3"
 
-"@influxdata/clockface@^4.7.4":
-  version "4.7.4"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-4.7.4.tgz#df5e4323121b7f0e12ddc9cf04c0a869fa635b80"
-  integrity sha512-4Mo+qGOqqZST+udOMwCP6pFM9fdoGrO4mxa0RJPLzvfjoGbyZzhxUbSDs4hWJwIzwPxGBAIykAfNwoc39skXHQ==
+"@influxdata/clockface@^4.8.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-4.8.0.tgz#40882117dc95888316c0ec51603588d539e591f6"
+  integrity sha512-e4NI7k+evCNMCs/Hm/ci7hMVhY1iPIojPMkB8jMEY2SPB7YtTvFIKgtBTDypUNXXnZ/d/djuB8bvVJ13JQJWqA==
   dependencies:
     "@types/react-window" "^1.8.5"
     react-window "^1.8.7"