feat(taskScheduler): fetch and list scripts (#6295)

* feat(Tasks): fetch and list scripts

* feat: fetchScripts function to handle fetching

* chore: update color of create script in editor

* feat: notification for script fetching error

* fix: prettier

* chore: require scriptsRoutes

* chore: clean up

* chore: add scripts type file

* chore: clean up

* fix: remove type from fetchScript response

Author: blegesse-w

src/scripts/apis/index.ts

@@ -0,0 +1,25 @@
+// Constants
+import {CLOUD} from 'src/shared/constants'
+
+// Types
+import {ServerError, UnauthorizedError} from 'src/types/error'
+import {Scripts} from 'src/types/scripts'
+
+let getScripts
+
+if (CLOUD) {
+  getScripts = require('src/client/scriptsRoutes').getScripts
+}
+
+export const fetchScripts = async (): Promise<Scripts> => {
+  const response = await getScripts({query: {limit: 250}})
+
+  if (response.status === 401) {
+    throw new UnauthorizedError(response.data.message)
+  }
+  if (response.status === 500) {
+    throw new ServerError(response.data.message)
+  }
+
+  return response.data
+}

src/shared/copy/notifications/categories/scripts.ts

@@ -20,3 +20,9 @@ export const deleteScriptFail = (scriptName: string): Notification => ({
   ...defaultErrorNotification,
   message: `${scriptName} failed to delete`,
 })
+
+export const getScriptsFail = (): Notification => ({
+  ...defaultErrorNotification,
+  message:
+    'There was an error fetching Scripts. Please try reloading this page',
+})

src/tasks/components/TaskScheduler/ScriptSelector.tsx

@@ -1,44 +1,152 @@
-import React, {FC} from 'react'
+// Libraries
+import React, {FC, ChangeEvent, useEffect, useState} from 'react'
+import {useDispatch} from 'react-redux'
 import {useHistory, useParams} from 'react-router-dom'
+
+// Components
 import {
   ComponentSize,
   Dropdown,
+  EmptyState,
   Form,
   IconFont,
   Input,
+  RemoteDataState,
+  TechnoSpinner,
 } from '@influxdata/clockface'
 
+// APIs
+import {fetchScripts} from 'src/scripts/apis/index'
+
+// Notifications
+import {getScriptsFail} from 'src/shared/copy/notifications/categories/scripts'
+import {notify} from 'src/shared/actions/notifications'
+
+// Types
+import {Script} from 'src/types/scripts'
+
 // Utils
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
-export const ScriptSelector: FC = () => {
+interface Props {
+  selectedScript: Script
+  setSelectedScript: (script: Script) => void
+}
+
+export const ScriptSelector: FC<Props> = ({
+  selectedScript,
+  setSelectedScript,
+}) => {
+  const [scripts, setScripts] = useState<Script[]>([])
+  const [searchTerm, setSearchTerm] = useState('')
+  const [scriptsLoadingStatus, setScriptsLoadingStatus] = useState(
+    RemoteDataState.NotStarted
+  )
+  const dispatch = useDispatch()
   const {orgID} = useParams<{orgID: string}>()
   const history = useHistory()
+
   const fluxScriptEditorLink = `/orgs/${orgID}/data-explorer?fluxScriptEditor`
 
+  useEffect(() => {
+    setScriptsLoadingStatus(RemoteDataState.Loading)
+    const getScripts = async () => {
+      try {
+        const scripts = await fetchScripts()
+        setScripts(scripts.scripts)
+        setScriptsLoadingStatus(RemoteDataState.Done)
+      } catch (error) {
+        setScriptsLoadingStatus(RemoteDataState.Error)
+        dispatch(notify(getScriptsFail()))
+      }
+    }
+    getScripts()
+  }, [dispatch])
+
+  const filterScripts = () =>
+    scripts.filter(script =>
+      script.name.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())
+    )
+
+  const searchForTerm = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value)
+  }
+
   const openScriptEditor = () => {
     history.push(`/orgs/${orgID}/data-explorer?fluxScriptEditor`)
   }
 
-  const createScriptInEditor = (
-    <Dropdown.Item onClick={openScriptEditor}>
-      + Create Script in Editor
-    </Dropdown.Item>
-  )
+  const handleSelectScript = script => {
+    setSelectedScript(script)
+  }
+
+  let scriptsList
 
-  const dropdownButtonText = 'Select a Script'
+  if (
+    scriptsLoadingStatus === RemoteDataState.NotStarted ||
+    scriptsLoadingStatus === RemoteDataState.Loading
+  ) {
+    scriptsList = (
+      <div>
+        <TechnoSpinner strokeWidth={ComponentSize.Small} diameterPixels={32} />
+      </div>
+    )
+  }
+
+  if (scriptsLoadingStatus === RemoteDataState.Error) {
+    scriptsList = (
+      <div>
+        <p>Could not get scripts</p>
+      </div>
+    )
+  }
+
+  if (scriptsLoadingStatus === RemoteDataState.Done) {
+    const filteredScripts = filterScripts()
+    scriptsList = (
+      <>
+        {filteredScripts.map(script => (
+          <Dropdown.Item
+            key={script.id}
+            value={script.name}
+            onClick={() => handleSelectScript(script)}
+            selected={script.name === selectedScript?.name}
+          >
+            {script.name}
+          </Dropdown.Item>
+        ))}
+      </>
+    )
+    if (!filteredScripts.length) {
+      if (searchTerm) {
+        scriptsList = (
+          <EmptyState>
+            <p>{`No Scripts match "${searchTerm}"`}</p>
+          </EmptyState>
+        )
+      } else {
+        scriptsList = (
+          <EmptyState>
+            <p>No Scripts found</p>
+          </EmptyState>
+        )
+      }
+    }
+  }
+
+  let dropdownButtonText = 'Select a Script'
+
+  if (scriptsLoadingStatus === RemoteDataState.Done && selectedScript?.name) {
+    dropdownButtonText = selectedScript.name
+  }
 
   return (
     <div className="select-script">
       <div className="create-task-titles script">Select a Script</div>
       <Form.Element label="Script" required={true} className="script-dropdown">
         <Dropdown
           button={(active, onClick) => (
-            <Dropdown.Button
-              active={active}
-              onClick={onClick}
-              testID="variable-type-dropdown--button"
-            >
+            <Dropdown.Button active={active} onClick={onClick}>
               {dropdownButtonText}
             </Dropdown.Button>
           )}
@@ -47,12 +155,18 @@ export const ScriptSelector: FC = () => {
               <Input
                 size={ComponentSize.Small}
                 icon={IconFont.Search_New}
-                value=""
+                value={searchTerm}
                 placeholder="Search Scripts..."
-                onChange={() => {}}
+                onChange={searchForTerm}
               />
               <Dropdown.Menu onCollapse={onCollapse}>
-                {createScriptInEditor}
+                <Dropdown.Item
+                  onClick={openScriptEditor}
+                  className="create-script-btn"
+                >
+                  + Create Script in Editor
+                </Dropdown.Item>
+                {scriptsList}
               </Dropdown.Menu>
             </>
           )}

src/tasks/components/TaskScheduler/TaskScheduler.scss

@@ -59,3 +59,7 @@
   font-weight: 600;
   font-size: 15px;
 }
+
+.create-script-btn {
+  color: #00a3ff;
+}

src/tasks/components/TaskScheduler/TaskScheduler.tsx

@@ -1,4 +1,4 @@
-import React, {FC, ChangeEvent} from 'react'
+import React, {FC, ChangeEvent, useState} from 'react'
 
 // Components
 import {
@@ -21,6 +21,7 @@ import {TaskIntervalForm} from 'src/tasks/components/TaskScheduler/TaskIntervalF
 import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
 // Types
+import {Script} from 'src/types/scripts'
 import {TaskOptions, TaskSchedule} from 'src/types'
 
 import 'src/tasks/components/TaskScheduler/TaskScheduler.scss'
@@ -36,6 +37,8 @@ export const TaskScheduler: FC<Props> = ({
   updateInput,
   updateScheduleType,
 }) => {
+  const [selectedScript, setSelectedScript] = useState<Script>()
+
   const handleChangeScheduleType = (schedule: TaskSchedule): void => {
     updateScheduleType(schedule)
   }
@@ -55,7 +58,10 @@ export const TaskScheduler: FC<Props> = ({
                     Learn More.
                   </SafeBlankLink>{' '}
                 </p>
-                <ScriptSelector />
+                <ScriptSelector
+                  selectedScript={selectedScript}
+                  setSelectedScript={setSelectedScript}
+                />
                 <div className="schedule-task">
                   <div className="create-task-titles">Schedule the Task</div>
                   <p>

src/tasks/containers/TaskPage.tsx

@@ -13,6 +13,9 @@ import TaskForm from 'src/tasks/components/TaskForm'
 import TaskHeader from 'src/tasks/components/TaskHeader'
 import {TaskScheduler} from 'src/tasks/components/TaskScheduler/TaskScheduler'
 
+// Constants
+import {CLOUD} from 'src/shared/constants'
+
 // Actions and Selectors
 import {
   setNewScript,
@@ -59,7 +62,7 @@ class TaskPage extends PureComponent<Props> {
 
   public render(): JSX.Element {
     const {newScript, taskOptions} = this.props
-    const shouldShowNewTasksUI = isFlagEnabled('tasksUiEnhancements')
+    const shouldShowNewTasksUI = isFlagEnabled('tasksUiEnhancements') && CLOUD
 
     return (
       <Page titleTag={pageTitleSuffixer(['Create Task'])}>

src/types/scripts.ts

@@ -0,0 +1,17 @@
+export interface Scripts {
+  scripts?: Script[]
+}
+export interface Script {
+  readonly id?: string
+  name: string
+  description?: string
+  orgID: string
+  script: string
+  language?: ScriptLanguage
+  url?: string
+  readonly createdAt?: string
+  readonly updatedAt?: string
+  labels?: string[]
+}
+
+export type ScriptLanguage = 'flux' | 'sql'