feat: remove example and category from notebook's flux functions (#3439)

* feat: created new files for feature flag

* feat: remove example from notebook's flux func

* feat: removed categories from notebook's flux functions

* fix: prettier

Author: blegesse-w

src/flows/pipes/RawFluxEditor/dynamicFunction.tsx

@@ -0,0 +1,115 @@
+// Libraries
+import React, {FC, createRef} from 'react'
+
+// Component
+import {
+  Popover,
+  PopoverPosition,
+  PopoverInteraction,
+  Appearance,
+  Button,
+  ComponentSize,
+  ComponentColor,
+  DapperScrollbars,
+} from '@influxdata/clockface'
+
+// Types
+import {FluxToolbarFunction} from 'src/types/shared'
+
+interface Props {
+  func: FluxToolbarFunction
+  onClickFunction: (func: FluxToolbarFunction) => void
+  testID: string
+}
+
+interface TooltipProps {
+  func: FluxToolbarFunction
+}
+
+const defaultProps = {
+  testID: 'flux-function',
+}
+
+const FunctionTooltipContents: FC<TooltipProps> = ({func}) => {
+  let argComponent = <div className="flux-function-docs--arguments">None</div>
+
+  if (func.args.length > 0) {
+    argComponent = (
+      <>
+        {func.args.map(a => (
+          <div className="flux-function-docs--arguments" key={a.name}>
+            <span>{a.name}:</span>
+            <span>{a.type}</span>
+            <div>{a.desc}</div>
+          </div>
+        ))}
+      </>
+    )
+  }
+
+  return (
+    <div className="flux-function-docs" data-testid={`flux-docs--${func.name}`}>
+      <DapperScrollbars autoHide={false}>
+        <div className="flux-toolbar--popover">
+          <article className="flux-functions-toolbar--description">
+            <div className="flux-function-docs--heading">Description</div>
+            <span>{func.desc}</span>
+          </article>
+          <article>
+            <div className="flux-function-docs--heading">Arguments</div>
+            <div className="flux-function-docs--snippet">{argComponent}</div>
+          </article>
+          <p className="tooltip--link">
+            Still have questions? Check out the{' '}
+            <a target="_blank" rel="noreferrer" href={func.link}>
+              Flux Docs
+            </a>
+            .
+          </p>
+        </div>
+      </DapperScrollbars>
+    </div>
+  )
+}
+
+const ToolbarFunction: FC<Props> = ({func, onClickFunction, testID}) => {
+  const functionRef = createRef<HTMLDListElement>()
+  const handleClickFunction = () => {
+    onClickFunction(func)
+  }
+
+  return (
+    <>
+      <Popover
+        appearance={Appearance.Outline}
+        enableDefaultStyles={false}
+        position={PopoverPosition.ToTheLeft}
+        triggerRef={functionRef}
+        showEvent={PopoverInteraction.Hover}
+        hideEvent={PopoverInteraction.Hover}
+        distanceFromTrigger={8}
+        testID="toolbar-popover"
+        contents={() => <FunctionTooltipContents func={func} />}
+      />
+      <dd
+        ref={functionRef}
+        data-testid={`flux--${testID}`}
+        className="flux-toolbar--list-item flux-toolbar--function"
+      >
+        <code>{func.name}</code>
+        <Button
+          testID={`flux--${testID}--inject`}
+          text="Inject"
+          onClick={handleClickFunction}
+          size={ComponentSize.ExtraSmall}
+          className="flux-toolbar--injector"
+          color={ComponentColor.Primary}
+        />
+      </dd>
+    </>
+  )
+}
+
+ToolbarFunction.defaultProps = defaultProps
+
+export default ToolbarFunction

src/flows/pipes/RawFluxEditor/dynamicFunctions.tsx

@@ -0,0 +1,64 @@
+import React, {FC, useState, useMemo, useCallback} from 'react'
+
+import {EmptyState, ComponentSize} from '@influxdata/clockface'
+import {FLUX_FUNCTIONS} from 'src/shared/constants/fluxFunctions'
+import {FluxToolbarFunction} from 'src/types/shared'
+import Fn from 'src/flows/pipes/RawFluxEditor/dynamicFunction'
+import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
+
+interface Props {
+  onSelect: (fn: FluxToolbarFunction) => void
+}
+
+const DynamicFunctions: FC<Props> = ({onSelect}) => {
+  const [search, setSearch] = useState('')
+  const updateSearch = useCallback(
+    text => {
+      setSearch(text)
+    },
+    [search, setSearch]
+  )
+
+  const filteredFunctions = FLUX_FUNCTIONS.filter(func =>
+    func.name.toLowerCase().includes(search.toLowerCase())
+  )
+
+  return useMemo(() => {
+    let fnComponent
+
+    if (!filteredFunctions.length) {
+      fnComponent = (
+        <EmptyState size={ComponentSize.ExtraSmall}>
+          <EmptyState.Text>No functions match your search</EmptyState.Text>
+        </EmptyState>
+      )
+    } else {
+      fnComponent = filteredFunctions.map(fn => (
+        <Fn
+          onClickFunction={onSelect}
+          key={`${fn.name}_${fn.desc}`}
+          func={fn}
+          testID={fn.name}
+        />
+      ))
+    }
+
+    return (
+      <div className="flux-toolbar">
+        <div className="flux-toolbar--search">
+          <SearchWidget
+            placeholderText="Filter Functions..."
+            onSearch={updateSearch}
+            searchTerm={search}
+            testID="flux-toolbar-search--input"
+          />
+        </div>
+        <div className="flux-toolbar--list" data-testid="flux-toolbar--list">
+          {fnComponent}
+        </div>
+      </div>
+    )
+  }, [search, onSelect])
+}
+
+export default DynamicFunctions

src/flows/pipes/RawFluxEditor/view.tsx

@@ -25,12 +25,14 @@ import {PipeProp} from 'src/types/flows'
 import {PipeContext} from 'src/flows/context/pipe'
 import {SidebarContext} from 'src/flows/context/sidebar'
 import Functions from 'src/flows/pipes/RawFluxEditor/functions'
+import DynamicFunctions from 'src/flows/pipes/RawFluxEditor/dynamicFunctions'
 
 // Styles
 import 'src/flows/pipes/RawFluxEditor/style.scss'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const FluxMonacoEditor = lazy(() =>
   import('src/shared/components/FluxMonacoEditor')
@@ -126,7 +128,11 @@ const Query: FC<PipeProp> = ({Context}) => {
     } else {
       event('Flux Panel (Notebooks) - Toggle Functions - On')
       show(id)
-      showSub(<Functions onSelect={inject} />)
+      if (isFlagEnabled('fluxDynamicDocs')) {
+        showSub(<DynamicFunctions onSelect={inject} />)
+      } else {
+        showSub(<Functions onSelect={inject} />)
+      }
     }
   }