feat: list flux functions from fluxdocsd (#4058)

* feat: fetch flux packages from fluxdocsd

* fix: prettier

* fix: prettier

* chore: clean up

* feat: add flux docs to redux store

* fix: prettier

* fix: prettier

* chore: clean up

* feat: memoize function search

* chore: cleanup

* chore: clean up

* feat: remove action type from thunks

* chore: disable hook/exhaustive-deps rule

* feat: add useMemo to sorted func

* chore: clean up

Author: blegesse-w

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

@@ -132,3 +132,8 @@ export const getResourcesTokensFailure = (
   ...defaultErrorNotification,
   message: `Failed to fetch all resources for creating ${tokenType}`,
 })
+
+export const getFluxPackagesFailed = (message: string): Notification => ({
+  ...defaultErrorNotification,
+  message: `Failed to fetch flux functions: ${message}`,
+})

src/store/configureStore.ts

@@ -22,6 +22,7 @@ import flagReducer from 'src/shared/reducers/flags'
 import currentDashboardReducer from 'src/shared/reducers/currentDashboard'
 import currentExplorerReducer from 'src/shared/reducers/currentExplorer'
 import currentPageReducer from 'src/shared/reducers/currentPage'
+import fluxDocsReducer from 'src/timeMachine/reducers/fluxDocsReducer'
 import tasksReducer from 'src/tasks/reducers'
 import rangesReducer from 'src/dashboards/reducers/ranges'
 import {dashboardsReducer} from 'src/dashboards/reducers/dashboards'
@@ -83,6 +84,7 @@ export const rootReducer = (history: History) => (state, action) => {
     currentPage: currentPageReducer,
     currentDashboard: currentDashboardReducer,
     currentExplorer: currentExplorerReducer,
+    fluxDocs: fluxDocsReducer,
     dataLoading: dataLoadingReducer,
     me: meReducer,
     flags: flagReducer,

src/timeMachine/actions/scriptEditorThunks.ts

@@ -0,0 +1,42 @@
+// Libraries
+import {Dispatch} from 'react'
+import {get} from 'lodash'
+
+// API
+import {FluxdocsArray, getFluxdocs} from 'src/client/fluxdocsdRoutes'
+
+// Actions
+import {getFluxPackagesFailed} from 'src/shared/copy/notifications/categories/alerts'
+import {notify} from 'src/shared/actions/notifications'
+
+// Types
+import {NotificationAction} from 'src/types'
+
+export const GET_FLUX_DOCS = 'GET_FLUX_DOCS'
+
+export type Action = ReturnType<typeof setFluxFunc>
+
+export const setFluxFunc = (data: FluxdocsArray) => ({
+  type: 'GET_FLUX_DOCS',
+  payload: {
+    data,
+  },
+})
+
+export const getFluxPackages = () => async (
+  dispatch: Dispatch<Action | NotificationAction>
+) => {
+  try {
+    const resp = await getFluxdocs({})
+
+    if (resp.status !== 200) {
+      throw new Error(resp.data.message)
+    }
+
+    dispatch(setFluxFunc(resp.data))
+  } catch (error) {
+    console.error(error)
+    const message = get(error, 'response.data.message', '')
+    dispatch(notify(getFluxPackagesFailed(message)))
+  }
+}

src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar.tsx

@@ -1,63 +1,115 @@
 // Libraries
-import React, {FC, useMemo, useState, useCallback} from 'react'
+import React, {FC, useCallback, useEffect, useMemo, useState} from 'react'
+import {connect, ConnectedProps} from 'react-redux'
 
 // Components
-import TransformToolbarFunctions from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TransformToolbarFunctions'
-import FluxToolbarSearch from 'src/timeMachine/components/FluxToolbarSearch'
 import {DapperScrollbars} from '@influxdata/clockface'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
+import FluxToolbarSearch from 'src/timeMachine/components/FluxToolbarSearch'
+import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
+import TransformToolbarFunctions from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TransformToolbarFunctions'
 import ToolbarFunction from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/ToolbarFunction'
 
-// Constants
-import {FLUX_FUNCTIONS} from 'src/shared/constants/fluxFunctions'
+// Actions
+import {getFluxPackages} from 'src/timeMachine/actions/scriptEditorThunks'
 
 // Types
-import {FluxToolbarFunction} from 'src/types'
+import {AppState} from 'src/types'
+import {Fluxdocs} from 'src/client/fluxdocsdRoutes'
+import {RemoteDataState} from 'src/types'
 
 interface OwnProps {
-  onInsertFluxFunction: (func: FluxToolbarFunction) => void
+  onInsertFluxFunction: (func) => void
 }
 
-const DynamicFluxFunctionsToolbar: FC<OwnProps> = (props: OwnProps) => {
+interface DispatchProps {
+  getFluxPackages: () => void
+}
+
+type ReduxProps = ConnectedProps<typeof connector>
+type Props = ReduxProps & OwnProps & DispatchProps
+
+const DynamicFluxFunctionsToolbar: FC<Props> = (props: Props) => {
   const [searchTerm, setSearchTerm] = useState('')
+  const [fluxLoadingState, setFluxLoadingState] = useState<RemoteDataState>(
+    RemoteDataState.NotStarted
+  )
+
+  useEffect(() => {
+    const getFluxFuncs = async () => {
+      try {
+        setFluxLoadingState(RemoteDataState.Loading)
+
+        if (fluxFunctions.length === 0) {
+          await getFluxPackages()
+          setFluxLoadingState(RemoteDataState.Done)
+        }
+        setFluxLoadingState(RemoteDataState.Done)
+      } catch (err) {
+        console.error(err)
+        setFluxLoadingState(RemoteDataState.Error)
+      }
+    }
+    getFluxFuncs()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const {onInsertFluxFunction, fluxFunctions, getFluxPackages} = props
 
   const handleSearch = (searchTerm: string): void => {
     setSearchTerm(searchTerm)
   }
 
   const handleClickFunction = useCallback(
-    (func: FluxToolbarFunction) => {
-      props.onInsertFluxFunction(func)
+    (func: Fluxdocs) => {
+      onInsertFluxFunction(func)
     },
-    [props.onInsertFluxFunction]
+    [onInsertFluxFunction]
   )
 
   return useMemo(() => {
     return (
-      <ErrorBoundary>
-        <FluxToolbarSearch onSearch={handleSearch} resourceName="Functions" />
-        <DapperScrollbars className="flux-toolbar--scroll-area">
-          <div className="flux-toolbar--list" data-testid="flux-toolbar--list">
-            <TransformToolbarFunctions
-              funcs={FLUX_FUNCTIONS}
-              searchTerm={searchTerm}
+      <SpinnerContainer
+        loading={fluxLoadingState}
+        spinnerComponent={<TechnoSpinner />}
+      >
+        <ErrorBoundary>
+          <FluxToolbarSearch onSearch={handleSearch} resourceName="Functions" />
+          <DapperScrollbars className="flux-toolbar--scroll-area">
+            <div
+              className="flux-toolbar--list"
+              data-testid="flux-toolbar--list"
             >
-              {sortedFunctions =>
-                sortedFunctions.map(func => (
-                  <ToolbarFunction
-                    onClickFunction={handleClickFunction}
-                    key={`${func.name}_${func.desc}`}
-                    func={func}
-                    testID={func.name}
-                  />
-                ))
-              }
-            </TransformToolbarFunctions>
-          </div>
-        </DapperScrollbars>
-      </ErrorBoundary>
+              <TransformToolbarFunctions
+                funcs={fluxFunctions}
+                searchTerm={searchTerm}
+              >
+                {sortedFunctions =>
+                  sortedFunctions.map((func, index) => (
+                    <ToolbarFunction
+                      onClickFunction={handleClickFunction}
+                      key={index}
+                      func={func}
+                      testID={func.name}
+                    />
+                  ))
+                }
+              </TransformToolbarFunctions>
+            </div>
+          </DapperScrollbars>
+        </ErrorBoundary>
+      </SpinnerContainer>
     )
-  }, [searchTerm, handleClickFunction])
+  }, [fluxFunctions, fluxLoadingState, handleClickFunction, searchTerm])
+}
+
+const mstp = (state: AppState) => {
+  const fluxFunctions = state.fluxDocs.fluxDocs
+  return {fluxFunctions}
+}
+
+const mdtp = {
+  getFluxPackages,
 }
+const connector = connect(mstp, mdtp)
 
-export default DynamicFluxFunctionsToolbar
+export default connector(DynamicFluxFunctionsToolbar)

src/timeMachine/components/dynamicFluxFunctionsToolbar/FunctionTooltipContents.tsx

@@ -3,31 +3,29 @@ import React, {FunctionComponent} from 'react'
 
 // Components
 import {DapperScrollbars} from '@influxdata/clockface'
-import TooltipDescription from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipDescription'
 import TooltipArguments from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipArguments'
+import TooltipDescription from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipDescription'
 import TooltipLink from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipLink'
 
 // Types
-import {FluxToolbarFunction} from 'src/types/shared'
-
+import {Fluxdocs} from 'src/client/fluxdocsdRoutes'
 interface Props {
-  func: FluxToolbarFunction
+  func: Fluxdocs
 }
 
 const FunctionTooltipContents: FunctionComponent<Props> = ({
-  func: {desc, args, link, name},
+  func: {headline, fluxParameters, name},
 }) => {
   return (
     <div className="flux-function-docs" data-testid={`flux-docs--${name}`}>
       <DapperScrollbars autoHide={false}>
         <div className="flux-toolbar--popover">
-          <TooltipDescription description={desc} />
-          <TooltipArguments argsList={args} />
-          <TooltipLink link={link} />
+          <TooltipDescription description={headline} />
+          <TooltipArguments argsList={fluxParameters} />
+          <TooltipLink />
         </div>
       </DapperScrollbars>
     </div>
   )
 }
-
 export default FunctionTooltipContents

src/timeMachine/components/dynamicFluxFunctionsToolbar/ToolbarFunction.tsx

@@ -4,21 +4,21 @@ import React, {FC, createRef} from 'react'
 // Component
 import FunctionTooltipContents from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/FunctionTooltipContents'
 import {
-  Popover,
-  PopoverPosition,
-  PopoverInteraction,
   Appearance,
   Button,
-  ComponentSize,
   ComponentColor,
+  ComponentSize,
+  Popover,
+  PopoverInteraction,
+  PopoverPosition,
 } from '@influxdata/clockface'
 
 // Types
-import {FluxToolbarFunction} from 'src/types/shared'
+import {Fluxdocs} from 'src/client/fluxdocsdRoutes'
 
 interface Props {
-  func: FluxToolbarFunction
-  onClickFunction: (func: FluxToolbarFunction) => void
+  func: Fluxdocs
+  onClickFunction: (func: Fluxdocs) => void
   testID: string
 }
 
@@ -49,7 +49,7 @@ const ToolbarFunction: FC<Props> = ({func, onClickFunction, testID}) => {
         data-testid={`flux--${testID}`}
         className="flux-toolbar--list-item flux-toolbar--function"
       >
-        <code>{func.name}</code>
+        <code>{`${func.package}.${func.name}`}</code>
         <Button
           testID={`flux--${testID}--inject`}
           text="Inject"
@@ -62,7 +62,5 @@ const ToolbarFunction: FC<Props> = ({func, onClickFunction, testID}) => {
     </>
   )
 }
-
 ToolbarFunction.defaultProps = defaultProps
-
 export default ToolbarFunction

src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipArguments.tsx

@@ -1,15 +1,15 @@
 import React, {PureComponent} from 'react'
 
 interface Args {
+  headline: string
   name: string
-  type: string
-  desc: string
+  required: boolean
+  description?: string
 }
 
 interface Props {
   argsList?: Args[]
 }
-
 class TooltipArguments extends PureComponent<Props> {
   public render() {
     return (
@@ -19,24 +19,21 @@ class TooltipArguments extends PureComponent<Props> {
       </article>
     )
   }
-
   private get arguments(): JSX.Element | JSX.Element[] {
     const {argsList} = this.props
 
     if (argsList.length > 0) {
-      return argsList.map(a => {
+      return argsList.map(argument => {
+        const description = argument.headline.slice(argument.name.length + 1)
         return (
-          <div className="flux-function-docs--arguments" key={a.name}>
-            <span>{a.name}:</span>
-            <span>{a.type}</span>
-            <div>{a.desc}</div>
+          <div className="flux-function-docs--arguments" key={argument.name}>
+            <span>{argument.name}:</span>
+            <div>{description}</div>
           </div>
         )
       })
     }
-
     return <div className="flux-function-docs--arguments">None</div>
   }
 }
-
 export default TooltipArguments

src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipDescription.tsx

@@ -1,10 +1,10 @@
-import React, {SFC} from 'react'
+import React, {FC} from 'react'
 
 interface Props {
   description: string
 }
 
-const TooltipDescription: SFC<Props> = ({description}) => (
+const TooltipDescription: FC<Props> = ({description}) => (
   <article className="flux-functions-toolbar--description">
     <div className="flux-function-docs--heading">Description</div>
     <span>{description}</span>

src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipLink.tsx

@@ -1,17 +1,16 @@
-import React, {SFC} from 'react'
+import React from 'react'
 
-interface Props {
-  link: string
-}
-
-const TooltipLink: SFC<Props> = ({link}) => (
+const TooltipLink = () => (
   <p className="tooltip--link">
     Still have questions? Check out the{' '}
-    <a target="_blank" rel="noreferrer" href={link}>
+    <a
+      target="_blank"
+      rel="noreferrer"
+      href="https://docs.influxdata.com/flux/v0.x/stdlib/"
+    >
       Flux Docs
     </a>
     .
   </p>
 )
-
 export default TooltipLink