From cba69aba5fad9a2900ed5aab6edb34a6e3b03c62 Mon Sep 17 00:00:00 2001 From: Ariel Salem Date: Fri, 1 Nov 2019 06:53:05 -0700 Subject: [PATCH] fix(toolbar): refactored toolbar and variable to overlay (#15681) fix(toolbar): refactored toolbar and variable to overlay --- ui/cypress/e2e/explorer.test.ts | 21 ++++ ui/src/shared/components/BoxTooltip.scss | 4 + .../FluxFunctionsToolbar.scss | 16 ++- .../FunctionTooltipContents.tsx | 14 +-- .../fluxFunctionsToolbar/ToolbarFunction.tsx | 109 +++++++----------- .../fluxFunctionsToolbar/TooltipLink.tsx | 2 +- .../variableToolbar/VariableItem.tsx | 43 +++---- .../VariableTooltipContents.tsx | 2 +- 8 files changed, 104 insertions(+), 107 deletions(-) diff --git a/ui/cypress/e2e/explorer.test.ts b/ui/cypress/e2e/explorer.test.ts index 6ee4516f47..3dce59f4da 100644 --- a/ui/cypress/e2e/explorer.test.ts +++ b/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', () => { diff --git a/ui/src/shared/components/BoxTooltip.scss b/ui/src/shared/components/BoxTooltip.scss index e255e13058..8dd36c10de 100644 --- a/ui/src/shared/components/BoxTooltip.scss +++ b/ui/src/shared/components/BoxTooltip.scss @@ -90,3 +90,7 @@ $box-tooltip--caret-size: 6px; right: 0; } } + +.tooltip--link { + padding-bottom: 10px; +} diff --git a/ui/src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss b/ui/src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss index 6aa5617aed..3009a00b7b 100644 --- a/ui/src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss +++ b/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; diff --git a/ui/src/timeMachine/components/fluxFunctionsToolbar/FunctionTooltipContents.tsx b/ui/src/timeMachine/components/fluxFunctionsToolbar/FunctionTooltipContents.tsx index 2fe1567ed2..02cad96a44 100644 --- a/ui/src/timeMachine/components/fluxFunctionsToolbar/FunctionTooltipContents.tsx +++ b/ui/src/timeMachine/components/fluxFunctionsToolbar/FunctionTooltipContents.tsx @@ -21,14 +21,12 @@ const FunctionTooltipContents: FunctionComponent = ({ func: {desc, args, example, link}, }) => { return ( -
- - - - - - -
+ + + + + + ) } diff --git a/ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx b/ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx index 90367ee0f8..0893386b00 100644 --- a/ui/src/timeMachine/components/fluxFunctionsToolbar/ToolbarFunction.tsx +++ b/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 { - isActive: boolean +const defaultProps = { + testID: 'toolbar-function', } -class ToolbarFunction extends PureComponent { - public static defaultProps = { - testID: 'toolbar-function', - } - - public state: State = {isActive: false} - - private functionRef = createRef() - - public render() { - const {func, testID} = this.props - const {isActive} = this.state - - return ( -
- {isActive && ( - - - - )} -
- {func.name} {this.helperText} -
-
- ) - } - - 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 ( - Click to Add - ) - } - - return null - } - - private handleHover = () => { - this.setState({isActive: true}) - } - - private handleStopHover = () => { - this.setState({isActive: false}) - } - - private handleClickFunction = () => { - const {func, onClickFunction} = this.props - +const ToolbarFunction: FC = ({func, onClickFunction, testID}) => { + const functionRef = createRef() + const handleClickFunction = () => { onClickFunction(func) } + return ( +
+ } + /> +
+ {func.name} +   + Click to Add +
+
+ ) } +ToolbarFunction.defaultProps = defaultProps + export default ToolbarFunction diff --git a/ui/src/timeMachine/components/fluxFunctionsToolbar/TooltipLink.tsx b/ui/src/timeMachine/components/fluxFunctionsToolbar/TooltipLink.tsx index fca3f21431..e3b094a034 100644 --- a/ui/src/timeMachine/components/fluxFunctionsToolbar/TooltipLink.tsx +++ b/ui/src/timeMachine/components/fluxFunctionsToolbar/TooltipLink.tsx @@ -5,7 +5,7 @@ interface Props { } const TooltipLink: SFC = ({link}) => ( -

+

Still have questions? Check out the{' '} Flux Docs diff --git a/ui/src/timeMachine/components/variableToolbar/VariableItem.tsx b/ui/src/timeMachine/components/variableToolbar/VariableItem.tsx index 712dd5b85d..6c0e6f4555 100644 --- a/ui/src/timeMachine/components/variableToolbar/VariableItem.tsx +++ b/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 = ({ - variable, - onClickVariable, -}) => { +const VariableItem: FC = ({variable, onClickVariable}) => { const trigger = useRef(null) - const [tooltipVisible, setTooltipVisible] = useState(false) - - let triggerRect: DOMRect = null - - if (trigger.current) { - triggerRect = trigger.current.getBoundingClientRect() as DOMRect - } return ( -