fix(toolbar): refactored toolbar and variable to overlay (#15681)

fix(toolbar): refactored toolbar and variable to overlay

ui/cypress/e2e/explorer.test.ts

@@ -192,6 +192,27 @@ describe('DataExplorer', () => {
 
       cy.getByTestID('query-builder').should('exist')
     })
+
+    it('should display the popover when hovering', () => {
+      cy.getByTestID('selector-list my_meas')
+        .click()
+        .then(() => {
+          cy.getByTestID('selector-list my_field')
+            .click()
+            .then(() => {
+              cy.getByTestID('switch-to-script-editor').click()
+              cy.getByTestID('flux-editor').should('exist')
+
+              cy.getByTestID('toolbar-popover--contents').should('not.exist')
+
+              cy.getByTestID('flux-function aggregateWindow').trigger(
+                'mouseover'
+              )
+
+              cy.getByTestID('toolbar-popover--contents').should('exist')
+            })
+        })
+    })
   })
 
   describe('raw script editing', () => {

ui/src/shared/components/BoxTooltip.scss

@@ -90,3 +90,7 @@ $box-tooltip--caret-size: 6px;
     right: 0;
   }
 }
+
+.tooltip--link {
+  padding-bottom: 10px;
+}

ui/src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss

@@ -37,15 +37,23 @@
   }
 }
 
-.flux-functions-toolbar--function {
-  position: relative;
-}
-
 .flux-functions-toolbar--helper {
   color: $g10-wolf;
   padding: 15px;
+  visibility: hidden;
 }
 
+.flux-functions-toolbar--function {
+  position: relative;
+
+  &:hover {
+    .flux-functions-toolbar--helper {
+      visibility: visible;
+    }
+  }
+}
+
+
 .flux-functions-toolbar--heading {
   font-weight: 600;
   margin-bottom: $ix-marg-a;

ui/src/timeMachine/components/fluxFunctionsToolbar/FunctionTooltipContents.tsx

@@ -21,14 +21,12 @@ const FunctionTooltipContents: FunctionComponent<Props> = ({
   func: {desc, args, example, link},
 }) => {
   return (
-    <div className="box-tooltip--contents">
+    <FancyScrollbar autoHeight={true} maxHeight={MAX_HEIGHT} autoHide={false}>
-      <FancyScrollbar autoHeight={true} maxHeight={MAX_HEIGHT} autoHide={false}>
+      <TooltipDescription description={desc} />
-        <TooltipDescription description={desc} />
+      <TooltipArguments argsList={args} />
-        <TooltipArguments argsList={args} />
+      <TooltipExample example={example} />
-        <TooltipExample example={example} />
+      <TooltipLink link={link} />
-        <TooltipLink link={link} />
+    </FancyScrollbar>
-      </FancyScrollbar>
-    </div>
   )
 }
 

ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx

@@ -1,9 +1,14 @@
 // Libraries
-import React, {PureComponent, createRef} from 'react'
+import React, {FC, createRef} from 'react'
 
 // Component
 import FunctionTooltipContents from 'src/timeMachine/components/fluxFunctionsToolbar/FunctionTooltipContents'
-import BoxTooltip from 'src/shared/components/BoxTooltip'
+import {
+  Popover,
+  PopoverPosition,
+  PopoverInteraction,
+  PopoverType,
+} from '@influxdata/clockface'
 
 // Types
 import {FluxToolbarFunction} from 'src/types/shared'
@@ -14,77 +19,43 @@ interface Props {
   testID: string
 }
 
-interface State {
+const defaultProps = {
-  isActive: boolean
+  testID: 'toolbar-function',
 }
 
-class ToolbarFunction extends PureComponent<Props, State> {
+const ToolbarFunction: FC<Props> = ({func, onClickFunction, testID}) => {
-  public static defaultProps = {
+  const functionRef = createRef<HTMLDivElement>()
-    testID: 'toolbar-function',
+  const handleClickFunction = () => {
-  }
-
-  public state: State = {isActive: false}
-
-  private functionRef = createRef<HTMLDivElement>()
-
-  public render() {
-    const {func, testID} = this.props
-    const {isActive} = this.state
-
-    return (
-      <div
-        className="flux-functions-toolbar--function"
-        ref={this.functionRef}
-        onMouseEnter={this.handleHover}
-        onMouseLeave={this.handleStopHover}
-        data-testid={testID}
-      >
-        {isActive && (
-          <BoxTooltip triggerRect={this.domRect}>
-            <FunctionTooltipContents func={func} />
-          </BoxTooltip>
-        )}
-        <dd
-          onClick={this.handleClickFunction}
-          data-testid={`flux-function ${func.name}`}
-        >
-          {func.name} {this.helperText}
-        </dd>
-      </div>
-    )
-  }
-
-  private get domRect(): DOMRect {
-    if (!this.functionRef.current) {
-      return null
-    }
-
-    return this.functionRef.current.getBoundingClientRect() as DOMRect
-  }
-
-  private get helperText(): JSX.Element | null {
-    if (this.state.isActive) {
-      return (
-        <span className="flux-functions-toolbar--helper">Click to Add</span>
-      )
-    }
-
-    return null
-  }
-
-  private handleHover = () => {
-    this.setState({isActive: true})
-  }
-
-  private handleStopHover = () => {
-    this.setState({isActive: false})
-  }
-
-  private handleClickFunction = () => {
-    const {func, onClickFunction} = this.props
-
     onClickFunction(func)
   }
+  return (
+    <div
+      className="flux-functions-toolbar--function"
+      ref={functionRef}
+      data-testid={testID}
+    >
+      <Popover
+        type={PopoverType.Outline}
+        position={PopoverPosition.ToTheLeft}
+        triggerRef={functionRef}
+        showEvent={PopoverInteraction.Hover}
+        hideEvent={PopoverInteraction.Hover}
+        distanceFromTrigger={8}
+        testID="toolbar-popover"
+        contents={() => <FunctionTooltipContents func={func} />}
+      />
+      <dd
+        onClick={handleClickFunction}
+        data-testid={`flux-function ${func.name}`}
+      >
+        {func.name}
+        &nbsp;
+        <span className="flux-functions-toolbar--helper">Click to Add</span>
+      </dd>
+    </div>
+  )
 }
 
+ToolbarFunction.defaultProps = defaultProps
+
 export default ToolbarFunction

ui/src/timeMachine/components/fluxFunctionsToolbar/TooltipLink.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 const TooltipLink: SFC<Props> = ({link}) => (
-  <p>
+  <p className="tooltip--link">
     Still have questions? Check out the{' '}
     <a target="_blank" href={link}>
       Flux Docs

ui/src/timeMachine/components/variableToolbar/VariableItem.tsx

@@ -1,9 +1,14 @@
 // Libraries
-import React, {FunctionComponent, useRef, useState} from 'react'
+import React, {FC, useRef} from 'react'
 
 // Components
 import VariableTooltipContents from 'src/timeMachine/components/variableToolbar/VariableTooltipContents'
-import BoxTooltip from 'src/shared/components/BoxTooltip'
+import {
+  Popover,
+  PopoverPosition,
+  PopoverInteraction,
+  PopoverType,
+} from '@influxdata/clockface'
 
 // Types
 import {IVariable as Variable} from '@influxdata/influx'
@@ -14,32 +19,22 @@ interface Props {
   onClickVariable: (variableName: string) => void
 }
 
-const VariableItem: FunctionComponent<Props> = ({
+const VariableItem: FC<Props> = ({variable, onClickVariable}) => {
-  variable,
-  onClickVariable,
-}) => {
   const trigger = useRef<HTMLDivElement>(null)
-  const [tooltipVisible, setTooltipVisible] = useState(false)
-
-  let triggerRect: DOMRect = null
-
-  if (trigger.current) {
-    triggerRect = trigger.current.getBoundingClientRect() as DOMRect
-  }
 
   return (
-    <div
+    <div className="variables-toolbar--item" ref={trigger}>
-      className="variables-toolbar--item"
-      onMouseEnter={() => setTooltipVisible(true)}
-      onMouseLeave={() => setTooltipVisible(false)}
-      ref={trigger}
-    >
       <VariableLabel name={variable.name} onClickVariable={onClickVariable} />
-      {tooltipVisible && (
+      <Popover
-        <BoxTooltip triggerRect={triggerRect}>
+        type={PopoverType.Outline}
-          <VariableTooltipContents variableID={variable.id} />
+        position={PopoverPosition.ToTheLeft}
-        </BoxTooltip>
+        triggerRef={trigger}
-      )}
+        showEvent={PopoverInteraction.Hover}
+        hideEvent={PopoverInteraction.Hover}
+        distanceFromTrigger={8}
+        testID="toolbar-popover"
+        contents={() => <VariableTooltipContents variableID={variable.id} />}
+      />
     </div>
   )
 }

ui/src/timeMachine/components/variableToolbar/VariableTooltipContents.tsx

@@ -81,7 +81,7 @@ const VariableTooltipContents: FunctionComponent<Props> = ({
   }
 
   return (
-    <div className="box-tooltip--contents" onMouseEnter={handleMouseEnter}>
+    <div onMouseEnter={handleMouseEnter}>
       <Form.Element label="Value">
         <SelectDropdown
           buttonIcon={icon}