feat: adding function path ui (#5262)

Author: drdelambre

src/shared/components/DynamicFunctionsList.tsx

@@ -1,7 +1,9 @@
 import React, {FC, useCallback, useEffect, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
+import {DapperScrollbars} from '@influxdata/clockface'
 
 // Components
+import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import {FluxFunction} from 'src/types/shared'
 import Fn from 'src/shared/components/FilterList/InjectionOption'
 import FilterList from 'src/shared/components/FilterList/FilterList'
@@ -15,6 +17,7 @@ import {getAllFluxFunctions} from 'src/shared/selectors/app'
 import {event} from 'src/cloud/utils/reporting'
 import {getFluxExample} from 'src/shared/utils/fluxExample'
 import {sortFuncs} from 'src/shared/utils/functions'
+import {isFlagEnabled} from '../utils/featureFlag'
 
 interface Props {
   onSelect: (fn: FluxFunction) => void
@@ -27,6 +30,7 @@ const DynamicFunctionsList: FC<Props> = ({onSelect}) => {
   const [termRecorded, setTermRecorded] = useState('')
   const [tooltipPopup, setTooltipPopup] = useState(false)
   const [hoveredFunction, setHoverdFunction] = useState('')
+  const [search, onSearch] = useState<string>('')
 
   const dispatch = useDispatch()
   const fluxFunctions = useSelector(getAllFluxFunctions)
@@ -60,6 +64,74 @@ const DynamicFunctionsList: FC<Props> = ({onSelect}) => {
     [onSelect]
   )
 
+  if (isFlagEnabled('showFnPath')) {
+    const _search = search.toLocaleLowerCase()
+    const filteredpaths = fluxFunctions
+      .filter(fn =>
+        `${fn.path} ${fn.package} ${fn.name}`
+          .toLocaleLowerCase()
+          .includes(_search)
+      )
+      .reduce((acc, curr) => {
+        if (!acc[curr.path]) {
+          acc[curr.path] = []
+        }
+
+        acc[curr.path].push(curr)
+        return acc
+      }, {})
+    const filtereditems = Object.keys(filteredpaths)
+      .sort((a, b) =>
+        a.toLocaleLowerCase().localeCompare(b.toLocaleLowerCase())
+      )
+      .reduce((acc, curr) => {
+        acc.push(
+          <div className="flux-toolbar--path" key={`fn-head-${curr}`}>
+            {curr}
+          </div>
+        )
+
+        return acc.concat(
+          filteredpaths[curr]
+            .sort((a, b) =>
+              `${a.package} ${a.name}`
+                .toLocaleLowerCase()
+                .localeCompare(`${b.package} ${b.name}`.toLocaleLowerCase())
+            )
+            .map(fn => (
+              <Fn
+                onClick={handleSelectItem}
+                extractor={fn =>
+                  `${(fn as FluxFunction).package}.${(fn as FluxFunction).name}`
+                }
+                key={`${fn.path}-${fn.package}-${fn.name}`}
+                option={fn}
+                testID={fn.name}
+                ToolTipContent={FluxDocsTooltipContent}
+                setToolTipPopup={setTooltipPopup}
+                setHoverdFunction={setHoverdFunction}
+              />
+            ))
+        )
+      }, [])
+
+    return (
+      <div className="flux-toolbar">
+        <div className="flux-toolbar--search">
+          <SearchWidget
+            placeholderText="Filter by Package or Function"
+            onSearch={onSearch}
+            searchTerm={search}
+            testID="flux-toolbar-search--input"
+          />
+        </div>
+        <div className="flux-toolbar--list" data-testid="flux-toolbar--list">
+          <DapperScrollbars>{filtereditems}</DapperScrollbars>
+        </div>
+      </div>
+    )
+  }
+
   const render = fn => (
     <Fn
       onClick={handleSelectItem}

src/timeMachine/components/FluxToolbar.scss

@@ -17,6 +17,18 @@ $flux-toolbar--gap: $cf-space-2xs;
   width: $cf-form-md-height;
   flex: 0 0 $cf-form-md-height;
 }
+.flux-toolbar--path {
+  color: $cf-grey-55;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  border-radius: 1px;
+  border-bottom: 2px solid $cf-grey-15;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  padding: $cf-space-2xs $cf-space-xs;
+}
 
 .flux-toolbar--tab {
   border-radius: $cf-radius;