Chore: Rename Popper to Popover (#18543)

* Rename PopperContent to TooltipContent

* Move exports from PopperController

* Change ToolipContent to PopoverContent and PopoverController

* Rename Popper to Popover

* Add forgotten files

* Update snapshot

* Remove generic

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import React, { Component, createRef } from 'react';
 import omit from 'lodash/omit';
-import { PopperController } from '../Tooltip/PopperController';
-import { Popper } from '../Tooltip/Popper';
+import { PopoverController } from '../Tooltip/PopoverController';
+import { Popover } from '../Tooltip/Popover';
 import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover';
 import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
@@ -46,12 +46,12 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
       });
 
       return (
-        <PopperController content={popoverElement} hideAfter={300}>
+        <PopoverController content={popoverElement} hideAfter={300}>
           {(showPopper, hidePopper, popperProps) => {
             return (
               <>
                 {this.pickerTriggerRef.current && (
-                  <Popper
+                  <Popover
                     {...popperProps}
                     referenceElement={this.pickerTriggerRef.current}
                     wrapperClassName="ColorPicker"
@@ -80,7 +80,7 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
               </>
             );
           }}
-        </PopperController>
+        </PopoverController>
       );
     }
   };

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NamedColorsPalette } from './NamedColorsPalette';
 import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
-import { PopperContentProps } from '../Tooltip/PopperController';
+import { PopoverContentProps } from '../Tooltip/Tooltip';
 import SpectrumPalette from './SpectrumPalette';
 import { GrafanaThemeType, Themeable } from '../../types/theme';
 import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation';
@@ -19,7 +19,7 @@ export interface ColorPickerProps extends Themeable {
   enableNamedColors?: boolean;
 }
 
-export interface Props<T> extends ColorPickerProps, PopperContentProps {
+export interface Props<T> extends ColorPickerProps, PopoverContentProps {
   customPickers?: T;
 }
 

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -1,11 +1,11 @@
 import React, { FunctionComponent } from 'react';
 
 import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
-import { PopperContentProps } from '../Tooltip/PopperController';
+import { PopoverContentProps } from '../Tooltip/Tooltip';
 import { Switch } from '../Switch/Switch';
 import { withTheme } from '../../themes/ThemeContext';
 
-export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopperContentProps {
+export interface SeriesColorPickerPopoverProps extends ColorPickerProps, PopoverContentProps {
   yaxis?: number;
   onToggleAxis?: () => void;
 }

packages/grafana-ui/src/components/FormField/FormField.tsx

@@ -1,10 +1,10 @@
 import React, { InputHTMLAttributes, FunctionComponent } from 'react';
 import { FormLabel } from '../FormLabel/FormLabel';
-import { PopperContent } from '../Tooltip/PopperController';
+import { PopoverContent } from '../Tooltip/Tooltip';
 import { cx } from 'emotion';
 export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
-  tooltip?: PopperContent<any>;
+  tooltip?: PopoverContent;
   labelWidth?: number;
   inputWidth?: number;
   inputEl?: React.ReactNode;

packages/grafana-ui/src/components/FormLabel/FormLabel.tsx

@@ -1,7 +1,6 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
-import { Tooltip } from '../Tooltip/Tooltip';
-import { PopperContent } from '../Tooltip/PopperController';
+import { Tooltip, PopoverContent } from '../Tooltip/Tooltip';
 
 interface Props {
   children: ReactNode;
@@ -9,7 +8,7 @@ interface Props {
   htmlFor?: string;
   isFocused?: boolean;
   isInvalid?: boolean;
-  tooltip?: PopperContent<any>;
+  tooltip?: PopoverContent;
   width?: number;
 }
 

packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Tooltip, TooltipProps } from '../Tooltip/Tooltip';
-import { PopperContent } from '../Tooltip/PopperController';
+import { Tooltip, TooltipProps, PopoverContent } from '../Tooltip/Tooltip';
 
 interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> {
-  children: PopperContent<any>;
+  children: PopoverContent;
 }
 
 export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {

packages/grafana-ui/src/components/Select/ButtonSelect.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent, ReactElement } from 'react';
 import Select from './Select';
-import { PopperContent } from '../Tooltip/PopperController';
+import { PopoverContent } from '../Tooltip/Tooltip';
 import { SelectableValue } from '@grafana/data';
 
 interface ButtonComponentProps {
@@ -38,7 +38,7 @@ export interface Props<T> {
   components?: any;
   maxMenuHeight?: number;
   onChange: (item: SelectableValue<T>) => void;
-  tooltipContent?: PopperContent<any>;
+  tooltipContent?: PopoverContent;
   isMenuOpen?: boolean;
   onOpenMenu?: () => void;
   onCloseMenu?: () => void;

packages/grafana-ui/src/components/Select/Select.tsx

@@ -17,7 +17,7 @@ import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import resetSelectStyles from './resetSelectStyles';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
-import { PopperContent } from '../Tooltip/PopperController';
+import { PopoverContent } from '../Tooltip/Tooltip';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { SelectableValue } from '@grafana/data';
 
@@ -43,7 +43,7 @@ export interface CommonProps<T> {
   backspaceRemovesValue?: boolean;
   isOpen?: boolean;
   components?: any;
-  tooltipContent?: PopperContent<any>;
+  tooltipContent?: PopoverContent;
   onOpenMenu?: () => void;
   onCloseMenu?: () => void;
   tabSelectsValue?: boolean;
@@ -269,7 +269,7 @@ export interface TooltipWrapperProps {
   onOpenMenu?: () => void;
   onCloseMenu?: () => void;
   isOpen?: boolean;
-  tooltipContent?: PopperContent<any>;
+  tooltipContent?: PopoverContent;
 }
 
 export interface TooltipWrapperState {

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -225,7 +225,7 @@ exports[`Render should render with base threshold 1`] = `
                           }
                         }
                       >
-                        <PopperController
+                        <PopoverController
                           content={
                             <ColorPickerPopover
                               color="green"
@@ -439,7 +439,7 @@ exports[`Render should render with base threshold 1`] = `
                               </div>
                             </div>
                           </ForwardRef(ColorPickerTrigger)>
-                        </PopperController>
+                        </PopoverController>
                       </ColorPicker>
                     </WithTheme(ColorPicker)>
                   </div>

packages/grafana-ui/src/components/Tooltip/Popper.tsx → packages/grafana-ui/src/components/Tooltip/Popover.tsx

@@ -3,7 +3,7 @@ import * as PopperJS from 'popper.js';
 import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
 import { Portal } from '../Portal/Portal';
 import Transition from 'react-transition-group/Transition';
-import { PopperContent } from './PopperController';
+import { PopoverContent } from './Tooltip';
 
 const defaultTransitionStyles = {
   transition: 'opacity 200ms linear',
@@ -22,14 +22,14 @@ export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placem
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;
   placement?: PopperJS.Placement;
-  content: PopperContent<any>;
+  content: PopoverContent;
   referenceElement: PopperJS.ReferenceObject;
   wrapperClassName?: string;
   renderArrow?: RenderPopperArrowFn;
   eventsEnabled?: boolean;
 }
 
-class Popper extends PureComponent<Props> {
+class Popover extends PureComponent<Props> {
   static defaultProps: Partial<Props> = {
     eventsEnabled: true,
   };
@@ -101,4 +101,4 @@ class Popper extends PureComponent<Props> {
   }
 }
 
-export { Popper };
+export { Popover };

packages/grafana-ui/src/components/Tooltip/PopperController.tsx → packages/grafana-ui/src/components/Tooltip/PopoverController.tsx

@@ -1,18 +1,14 @@
 import React from 'react';
 import * as PopperJS from 'popper.js';
+import { PopoverContent } from './Tooltip';
 
 // This API allows popovers to update Popper's position when e.g. popover content changes
 // updatePopperPosition is delivered to content by react-popper
-export interface PopperContentProps {
-  updatePopperPosition?: () => void;
-}
-
-export type PopperContent<T extends PopperContentProps> = string | React.ReactElement<T> | ((props: T) => JSX.Element);
 
 export interface UsingPopperProps {
   show?: boolean;
   placement?: PopperJS.Placement;
-  content: PopperContent<any>;
+  content: PopoverContent;
   children: JSX.Element;
 }
 
@@ -22,13 +18,13 @@ type PopperControllerRenderProp = (
   popperProps: {
     show: boolean;
     placement: PopperJS.Placement;
-    content: PopperContent<any>;
+    content: PopoverContent;
   }
 ) => JSX.Element;
 
 interface Props {
   placement?: PopperJS.Placement;
-  content: PopperContent<any>;
+  content: PopoverContent;
   className?: string;
   children: PopperControllerRenderProp;
   hideAfter?: number;
@@ -39,7 +35,7 @@ interface State {
   show: boolean;
 }
 
-class PopperController extends React.Component<Props, State> {
+class PopoverController extends React.Component<Props, State> {
   private hideTimeout: any;
 
   constructor(props: Props) {
@@ -101,4 +97,4 @@ class PopperController extends React.Component<Props, State> {
   }
 }
 
-export { PopperController };
+export { PopoverController };

packages/grafana-ui/src/components/Tooltip/Tooltip.tsx

@@ -1,17 +1,24 @@
 import React, { createRef } from 'react';
 import * as PopperJS from 'popper.js';
-import { Popper } from './Popper';
-import { PopperController, UsingPopperProps } from './PopperController';
+import { Popover } from './Popover';
+import { PopoverController, UsingPopperProps } from './PopoverController';
 
 export interface TooltipProps extends UsingPopperProps {
   theme?: 'info' | 'error';
 }
+
+export interface PopoverContentProps {
+  updatePopperPosition?: () => void;
+}
+
+export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
+
 export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) => {
   const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
 
   return (
-    <PopperController {...controllerProps}>
+    <PopoverController {...controllerProps}>
       {(showPopper, hidePopper, popperProps) => {
         {
           /* Override internal 'show' state if passed in as prop */
@@ -23,7 +30,7 @@ export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) =
         return (
           <>
             {tooltipTriggerRef.current && (
-              <Popper
+              <Popover
                 {...payloadProps}
                 onMouseEnter={showPopper}
                 onMouseLeave={hidePopper}
@@ -43,6 +50,6 @@ export const Tooltip = ({ children, theme, ...controllerProps }: TooltipProps) =
           </>
         );
       }}
-    </PopperController>
+    </PopoverController>
   );
 };

packages/grafana-ui/src/components/index.ts

@@ -1,7 +1,7 @@
 export { DeleteButton } from './DeleteButton/DeleteButton';
-export { Tooltip } from './Tooltip/Tooltip';
-export { PopperController, PopperContent } from './Tooltip/PopperController';
-export { Popper } from './Tooltip/Popper';
+export { Tooltip, PopoverContent } from './Tooltip/Tooltip';
+export { PopoverController } from './Tooltip/PopoverController';
+export { Popover } from './Tooltip/Popover';
 export { Portal } from './Portal/Portal';
 export { CustomScrollbar } from './CustomScrollbar/CustomScrollbar';
 

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import { renderMarkdown } from '@grafana/data';
-import { Tooltip, ScopedVars, PopperContent } from '@grafana/ui';
+import { Tooltip, ScopedVars, PopoverContent } from '@grafana/ui';
 import { DataLink } from '@grafana/data';
 
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
@@ -71,7 +71,7 @@ export class PanelHeaderCorner extends Component<Props> {
     );
   };
 
-  renderCornerType(infoMode: InfoMode, content: PopperContent<any>) {
+  renderCornerType(infoMode: InfoMode, content: PopoverContent) {
     const theme = infoMode === InfoMode.Error ? 'error' : 'info';
     return (
       <Tooltip content={content} placement="top-start" theme={theme}>

public/app/features/plugins/PluginStateInfo.tsx

@@ -1,13 +1,13 @@
 import React, { FC, useContext } from 'react';
 import { css } from 'emotion';
 import { PluginState, Tooltip, ThemeContext } from '@grafana/ui';
-import { PopperContent } from '@grafana/ui/src/components/Tooltip/PopperController';
+import { PopoverContent } from '@grafana/ui/src/components/Tooltip/Tooltip';
 
 interface Props {
   state?: PluginState;
 }
 
-function getPluginStateInfoText(state?: PluginState): PopperContent<any> | null {
+function getPluginStateInfoText(state?: PluginState): PopoverContent | null {
   switch (state) {
     case PluginState.alpha:
       return (

public/app/plugins/datasource/graphite/FunctionEditor.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopperController, Popper } from '@grafana/ui';
+import { PopoverController, Popover } from '@grafana/ui';
 // @ts-ignore
 import rst2html from 'rst2html';
 import { FunctionDescriptor, FunctionEditorControlsProps, FunctionEditorControls } from './FunctionEditorControls';
@@ -68,12 +68,12 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
 
   render() {
     return (
-      <PopperController content={this.renderContent} placement="top" hideAfter={300}>
+      <PopoverController content={this.renderContent} placement="top" hideAfter={300}>
         {(showPopper, hidePopper, popperProps) => {
           return (
             <>
               {this.triggerRef && (
-                <Popper
+                <Popover
                   {...popperProps}
                   referenceElement={this.triggerRef.current}
                   wrapperClassName="popper"
@@ -103,7 +103,7 @@ class FunctionEditor extends React.PureComponent<FunctionEditorProps, FunctionEd
             </>
           );
         }}
-      </PopperController>
+      </PopoverController>
     );
   }
 }