Merge remote-tracking branch 'grafana/master' into single-stat-data-f…

…rame * grafana/master: Rewrite user profile edit to react (grafana#17917) Docs: remove codecov badge (grafana#18623) Prometheus: Prevents panel editor crash when switching to Prometheus datasource (grafana#18616) Chore: Rename Popper to Popover (grafana#18543)
ryantxu · Aug 19, 2019 · de58d9d · de58d9d
2 parents 1f28e0e + e3e2cd8
commit de58d9d
Show file tree

Hide file tree

Showing 30 changed files with 294 additions and 145 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# [Grafana](https://grafana.com) [![Circle CI](https://circleci.com/gh/grafana/grafana.svg?style=svg)](https://circleci.com/gh/grafana/grafana) [![Go Report Card](https://goreportcard.com/badge/github.com/grafana/grafana)](https://goreportcard.com/report/github.com/grafana/grafana) [![codecov](https://codecov.io/gh/grafana/grafana/branch/master/graph/badge.svg)](https://codecov.io/gh/grafana/grafana)
+# [Grafana](https://grafana.com) [![Circle CI](https://circleci.com/gh/grafana/grafana.svg?style=svg)](https://circleci.com/gh/grafana/grafana) [![Go Report Card](https://goreportcard.com/badge/github.com/grafana/grafana)](https://goreportcard.com/report/github.com/grafana/grafana) 
 
 [Website](https://grafana.com) |
 [Twitter](https://twitter.com/grafana) |

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx b/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>
       );
     }
   };

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/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;
 }
 

diff --git a/packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx b/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;
 }

diff --git a/packages/grafana-ui/src/components/FormField/FormField.tsx b/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;

diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx
@@ -1,15 +1,14 @@
 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;
   className?: string;
   htmlFor?: string;
   isFocused?: boolean;
   isInvalid?: boolean;
-  tooltip?: PopperContent<any>;
+  tooltip?: PopoverContent;
   width?: number;
 }
 

diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/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) => {

diff --git a/packages/grafana-ui/src/components/Select/ButtonSelect.tsx b/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;

diff --git a/packages/grafana-ui/src/components/Select/Select.tsx b/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 {

diff --git a/...s/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/...s/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>

diff --git a/...fana-ui/src/components/Tooltip/Popper.tsx → ...ana-ui/src/components/Tooltip/Popover.tsx b/...fana-ui/src/components/Tooltip/Popper.tsx → ...ana-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 };
diff --git a/...c/components/Tooltip/PopperController.tsx → .../components/Tooltip/PopoverController.tsx b/...c/components/Tooltip/PopperController.tsx → .../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 };
diff --git a/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx b/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>
   );
 };
diff --git a/packages/grafana-ui/src/components/index.ts b/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';
 

diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
@@ -11,6 +11,7 @@ import { ColorPicker, SeriesColorPickerPopoverWithTheme, SecretFormField, DataLi
 import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor';
 import { SearchField } from './components/search/SearchField';
 import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu';
+import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper';
 
 export function registerAngularDirectives() {
   react2AngularDirective('sidemenu', SideMenu, []);
@@ -87,4 +88,6 @@ export function registerAngularDirectives() {
     'suggestions',
     ['onChange', { watchDepth: 'reference', wrapApply: true }],
   ]);
+
+  react2AngularDirective('reactProfileWrapper', ReactProfileWrapper, []);
 }