fix: make the list of scripts 250 (#6174)

* fix: make the list of scripts 250

* feat: integrate API searches

Author: asalem1

src/dataExplorer/components/OpenScript.tsx

@@ -6,7 +6,7 @@ import {
   ComponentStatus,
   IconFont,
   Input,
-  List,
+  Dropdown,
   TechnoSpinner,
   Overlay,
   EmptyState,
@@ -19,6 +19,7 @@ import {useSelector} from 'react-redux'
 import {getOrg} from 'src/organizations/selectors'
 import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
 import {QueryContext} from 'src/shared/contexts/query'
+import {debouncer} from 'src/dataExplorer/shared/utils'
 
 let getScripts
 
@@ -41,11 +42,11 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
   const history = useHistory()
   const org = useSelector(getOrg)
 
-  const handleGetScripts = useCallback(async () => {
+  const handleGetScripts = useCallback(async (name: string = '') => {
     try {
       if (getScripts) {
         setLoading(RemoteDataState.Loading)
-        const resp = await getScripts({})
+        const resp = await getScripts({query: {limit: 250, name}})
 
         if (resp.status !== 200) {
           throw new Error(resp.data.message)
@@ -60,7 +61,17 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
       setLoading(RemoteDataState.Error)
       console.error({error})
     }
-  }, [getScripts])
+  }, [])
+
+  const handleSearchTerm = useCallback(
+    (name: string) => {
+      setSearchTerm(name)
+      debouncer(() => {
+        handleGetScripts(name)
+      })
+    },
+    [handleGetScripts]
+  )
 
   const handleOpenScript = () => {
     setStatus(RemoteDataState.NotStarted)
@@ -96,33 +107,27 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
   }
 
   if (loading === RemoteDataState.Done) {
-    const filteredScripts = scripts.filter(script =>
-      script.name.includes(searchTerm)
-    )
-
     let list = (
-      <List>
-        {filteredScripts.map(script => (
-          <List.Item
+      <>
+        {scripts.map(script => (
+          <Dropdown.Item
             key={script.id}
             value={script.name}
             onClick={() => setSelectedScript(script)}
             selected={script.name === selectedScript?.name}
-            title={script}
-            wrapText={true}
           >
             {script.name}
-          </List.Item>
+          </Dropdown.Item>
         ))}
-      </List>
+      </>
     )
-    if (filteredScripts.length === 0 && searchTerm) {
+    if (scripts.length === 0 && searchTerm) {
       list = (
         <EmptyState className="data-source--list__no-results">
           <p>{`No Scripts match "${searchTerm}"`}</p>
         </EmptyState>
       )
-    } else if (filteredScripts.length === 0 && !searchTerm) {
+    } else if (scripts.length === 0 && !searchTerm) {
       list = (
         <EmptyState className="data-source--list__no-results">
           <p>No Scripts found</p>
@@ -139,9 +144,11 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
             size={ComponentSize.Medium}
             value={searchTerm}
             placeholder="Search Scripts"
-            onChange={evt => setSearchTerm(evt.target.value)}
+            onChange={evt => handleSearchTerm(evt.target.value)}
           />
-          <List>{list}</List>
+          <Dropdown.Menu className="open-script__menu-items" maxHeight={300}>
+            {list}
+          </Dropdown.Menu>
         </Overlay.Body>
         <Overlay.Footer>
           <Button

src/dataExplorer/components/SaveAsScript.scss

@@ -1,3 +1,18 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.data-source--list__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  color: $cf-grey-45;
+  height: 300px;
+}
+
+.open-script__menu-items {
+  background-color: #000;
+}
+
 .save-script-overlay__warning-text {
   margin-bottom: 25px;
 }

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -13,21 +13,10 @@ import {MeasurementsContext} from 'src/dataExplorer/context/measurements'
 import {FieldsContext} from 'src/dataExplorer/context/fields'
 import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 import {TagsContext} from 'src/dataExplorer/context/tags'
-
+import {debouncer} from 'src/dataExplorer/shared/utils'
 // Types
 import {Bucket, TagKeyValuePair} from 'src/types'
 
-const DEBOUNCE_TIMEOUT = 500
-let timer: ReturnType<typeof setTimeout>
-type NOOP = () => void
-const debouncer = (action: NOOP): void => {
-  clearTimeout(timer)
-  timer = setTimeout(() => {
-    action()
-    timer = null
-  }, DEBOUNCE_TIMEOUT)
-}
-
 const DEFAULT_SELECTED_TAG_VALUES: SelectedTagValues = {}
 interface SelectedTagValues {
   [key: string]: string[]

src/dataExplorer/shared/utils.ts

@@ -76,3 +76,14 @@ export const useSessionStorage = (keyName: string, defaultValue: any) => {
 
   return [storedValue, setValue]
 }
+
+const DEBOUNCE_TIMEOUT = 500
+let timer: ReturnType<typeof setTimeout>
+type NOOP = () => void
+export const debouncer = (action: NOOP): void => {
+  clearTimeout(timer)
+  timer = setTimeout(() => {
+    action()
+    timer = null
+  }, DEBOUNCE_TIMEOUT)
+}