feat: remove example section from flux function's flyover panel (#3434)

* feat: adding feature flag in FluxToolbar

* fix: removed example section from flyover panel

* fix: removed extra space from new folder

* chore: update the file path for components

* fix: prettier

* feat: removing category from flux functions

* fix: prettier

* fix: accidently removed example from original folder. added it back

* fix: prettier

* fix: undoing changes made to notebook's script editor

Author: blegesse-w

src/timeMachine/components/FluxToolbar.tsx

@@ -3,12 +3,16 @@ import React, {FC, useState} from 'react'
 
 // Components
 import FluxFunctionsToolbar from 'src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar'
+import DynamicFluxFunctionsToolbar from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar'
 import VariableToolbar from 'src/timeMachine/components/variableToolbar/VariableToolbar'
 import FluxToolbarTab from 'src/timeMachine/components/FluxToolbarTab'
 
 // Types
 import {FluxToolbarFunction} from 'src/types'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
 interface Props {
   activeQueryBuilderTab: string
   onInsertFluxFunction: (func: FluxToolbarFunction) => void
@@ -31,9 +35,17 @@ const FluxToolbar: FC<Props> = ({
   let activeToolbar
 
   if (activeTab === 'functions') {
-    activeToolbar = (
-      <FluxFunctionsToolbar onInsertFluxFunction={onInsertFluxFunction} />
-    )
+    if (isFlagEnabled('fluxDynamicDocs')) {
+      activeToolbar = (
+        <DynamicFluxFunctionsToolbar
+          onInsertFluxFunction={onInsertFluxFunction}
+        />
+      )
+    } else {
+      activeToolbar = (
+        <FluxFunctionsToolbar onInsertFluxFunction={onInsertFluxFunction} />
+      )
+    }
   }
 
   if (activeTab === 'variables') {

src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar.scss

@@ -0,0 +1,44 @@
+@import 'src/style/modules';
+
+.flux-function-docs {
+  width: 420px;
+  height: 330px;
+}
+
+.flux-function-docs--heading {
+  font-weight: $cf-font-weight--bold;
+  margin-top: $cf-space-2xs;
+  margin-bottom: $cf-space-2xs;
+  display: inline-block;
+  width: 100%;
+
+  article:first-child & {
+    margin-top: 0;
+  }
+}
+
+.flux-function-docs--snippet {
+  background-color: $cf-grey-5;
+  border-radius: $cf-radius;
+  margin: $cf-space-3xs 0;
+  padding: $cf-space-2xs;
+  font-family: $cf-code-font;
+}
+
+.flux-function-docs--arguments {
+  span:first-child {
+    font-weight: $cf-font-weight--bold;
+    color: $c-pool;
+    margin-right: $cf-space-3xs;
+  }
+
+  span:nth-child(2) {
+    color: $c-rainforest;
+    font-style: italic;
+    margin-right: $cf-border;
+  }
+
+  div {
+    margin: $cf-space-3xs 0 $cf-space-s 0;
+  }
+}

src/timeMachine/components/dynamicFluxFunctionsToolbar/FluxFunctionsToolbar.tsx

@@ -0,0 +1,63 @@
+// Libraries
+import React, {FC, useMemo, useState, useCallback} from 'react'
+
+// 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 ToolbarFunction from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/ToolbarFunction'
+
+// Constants
+import {FLUX_FUNCTIONS} from 'src/shared/constants/fluxFunctions'
+
+// Types
+import {FluxToolbarFunction} from 'src/types'
+
+interface OwnProps {
+  onInsertFluxFunction: (func: FluxToolbarFunction) => void
+}
+
+const DynamicFluxFunctionsToolbar: FC<OwnProps> = (props: OwnProps) => {
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const handleSearch = (searchTerm: string): void => {
+    setSearchTerm(searchTerm)
+  }
+
+  const handleClickFunction = useCallback(
+    (func: FluxToolbarFunction) => {
+      props.onInsertFluxFunction(func)
+    },
+    [props.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}
+            >
+              {sortedFunctions =>
+                sortedFunctions.map(func => (
+                  <ToolbarFunction
+                    onClickFunction={handleClickFunction}
+                    key={`${func.name}_${func.desc}`}
+                    func={func}
+                    testID={func.name}
+                  />
+                ))
+              }
+            </TransformToolbarFunctions>
+          </div>
+        </DapperScrollbars>
+      </ErrorBoundary>
+    )
+  }, [searchTerm, handleClickFunction])
+}
+
+export default DynamicFluxFunctionsToolbar

src/timeMachine/components/dynamicFluxFunctionsToolbar/FunctionTooltipContents.tsx

@@ -0,0 +1,33 @@
+// Libraries
+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 TooltipLink from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipLink'
+
+// Types
+import {FluxToolbarFunction} from 'src/types/shared'
+
+interface Props {
+  func: FluxToolbarFunction
+}
+
+const FunctionTooltipContents: FunctionComponent<Props> = ({
+  func: {desc, args, link, 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} />
+        </div>
+      </DapperScrollbars>
+    </div>
+  )
+}
+
+export default FunctionTooltipContents

src/timeMachine/components/dynamicFluxFunctionsToolbar/ToolbarFunction.tsx

@@ -0,0 +1,68 @@
+// Libraries
+import React, {FC, createRef} from 'react'
+
+// Component
+import FunctionTooltipContents from 'src/timeMachine/components/dynamicFluxFunctionsToolbar/FunctionTooltipContents'
+import {
+  Popover,
+  PopoverPosition,
+  PopoverInteraction,
+  Appearance,
+  Button,
+  ComponentSize,
+  ComponentColor,
+} from '@influxdata/clockface'
+
+// Types
+import {FluxToolbarFunction} from 'src/types/shared'
+
+interface Props {
+  func: FluxToolbarFunction
+  onClickFunction: (func: FluxToolbarFunction) => void
+  testID: string
+}
+
+const defaultProps = {
+  testID: 'flux-function',
+}
+
+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/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipArguments.tsx

@@ -0,0 +1,42 @@
+import React, {PureComponent} from 'react'
+
+interface Args {
+  name: string
+  type: string
+  desc: string
+}
+
+interface Props {
+  argsList?: Args[]
+}
+
+class TooltipArguments extends PureComponent<Props> {
+  public render() {
+    return (
+      <article>
+        <div className="flux-function-docs--heading">Arguments</div>
+        <div className="flux-function-docs--snippet">{this.arguments}</div>
+      </article>
+    )
+  }
+
+  private get arguments(): JSX.Element | JSX.Element[] {
+    const {argsList} = this.props
+
+    if (argsList.length > 0) {
+      return argsList.map(a => {
+        return (
+          <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--arguments">None</div>
+  }
+}
+
+export default TooltipArguments

src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipDescription.tsx

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

src/timeMachine/components/dynamicFluxFunctionsToolbar/TooltipLink.tsx

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

src/timeMachine/components/dynamicFluxFunctionsToolbar/TransformToolbarFunctions.tsx

@@ -0,0 +1,34 @@
+// Libraries
+import React, {FC, ReactElement} from 'react'
+
+// Components
+import {EmptyState, ComponentSize} from '@influxdata/clockface'
+
+// Types
+import {FluxToolbarFunction} from 'src/types/shared'
+
+interface Props {
+  funcs: FluxToolbarFunction[]
+  searchTerm?: string
+  children: (funcs: FluxToolbarFunction[]) => JSX.Element | JSX.Element[]
+}
+
+const TransformToolbarFunctions: FC<Props> = props => {
+  const {searchTerm, funcs, children} = props
+
+  const filteredFunctions = funcs.filter(func =>
+    func.name.toLowerCase().includes(searchTerm.toLowerCase())
+  )
+
+  if (filteredFunctions.length === 0) {
+    return (
+      <EmptyState size={ComponentSize.ExtraSmall}>
+        <EmptyState.Text>No functions match your search</EmptyState.Text>
+      </EmptyState>
+    )
+  }
+
+  return children(filteredFunctions) as ReactElement<any>
+}
+
+export default TransformToolbarFunctions