Chore: grafana-toolkit uses grafana-ui and grafana-data workspaces (#30701)

* chore(grafana-toolkit): use workspace versions of grafana/ui and grafana/data

* chore: replace references to popperjs 1 typings with popperjs 2 typings

packages/grafana-toolkit/package.json

@@ -28,10 +28,10 @@
   "dependencies": {
   "dependencies": {
     "@babel/core": "7.9.0",
     "@babel/core": "7.9.0",
     "@babel/preset-env": "7.9.0",
     "@babel/preset-env": "7.9.0",
-    "@grafana/data": "next",
+    "@grafana/data": "7.5.0-pre.0",
     "@grafana/eslint-config": "2.2.0",
     "@grafana/eslint-config": "2.2.0",
     "@grafana/tsconfig": "^1.0.0-rc1",
     "@grafana/tsconfig": "^1.0.0-rc1",
-    "@grafana/ui": "next",
+    "@grafana/ui": "7.5.0-pre.0",
     "@types/command-exists": "^1.2.0",
     "@types/command-exists": "^1.2.0",
     "@types/execa": "^0.9.0",
     "@types/execa": "^0.9.0",
     "@types/expect-puppeteer": "3.3.1",
     "@types/expect-puppeteer": "3.3.1",

packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import uniqueId from 'lodash/uniqueId';
 import uniqueId from 'lodash/uniqueId';
+import { Placement } from '@popperjs/core';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 import { Tooltip } from '../../../Tooltip/Tooltip';
-import * as PopperJS from 'popper.js';
 import { Icon } from '../../..';
 import { Icon } from '../../..';
 
 
 export interface Props {
 export interface Props {
@@ -11,7 +11,7 @@ export interface Props {
   labelClass?: string;
   labelClass?: string;
   switchClass?: string;
   switchClass?: string;
   tooltip?: string;
   tooltip?: string;
-  tooltipPlacement?: PopperJS.Placement;
+  tooltipPlacement?: Placement;
   transparent?: boolean;
   transparent?: boolean;
   onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
   onChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
 }
 }

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import * as PopperJS from 'popper.js';
+import { Placement, VirtualElement } from '@popperjs/core';
 import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
 import { Manager, Popper as ReactPopper, PopperArrowProps } from 'react-popper';
 import { Portal } from '../Portal/Portal';
 import { Portal } from '../Portal/Portal';
 import Transition from 'react-transition-group/Transition';
 import Transition from 'react-transition-group/Transition';
@@ -23,9 +23,9 @@ export type RenderPopperArrowFn = (props: { arrowProps: PopperArrowProps; placem
 
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   show: boolean;
   show: boolean;
-  placement?: PopperJS.Placement;
+  placement?: Placement;
   content: PopoverContent;
   content: PopoverContent;
-  referenceElement: PopperJS.ReferenceObject;
+  referenceElement: HTMLElement | VirtualElement;
   wrapperClassName?: string;
   wrapperClassName?: string;
   renderArrow?: RenderPopperArrowFn;
   renderArrow?: RenderPopperArrowFn;
 }
 }

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

 import React from 'react';
 import React from 'react';
-import * as PopperJS from 'popper.js';
+import { Placement } from '@popperjs/core';
 import { PopoverContent } from './Tooltip';
 import { PopoverContent } from './Tooltip';
 
 
 // This API allows popovers to update Popper's position when e.g. popover content changes
 // This API allows popovers to update Popper's position when e.g. popover content changes
@@ -34,13 +34,13 @@ type PopperControllerRenderProp = (
   hidePopper: () => void,
   hidePopper: () => void,
   popperProps: {
   popperProps: {
     show: boolean;
     show: boolean;
-    placement: PopperJS.Placement;
+    placement: Placement;
     content: PopoverContent;
     content: PopoverContent;
   }
   }
 ) => JSX.Element;
 ) => JSX.Element;
 
 
 interface Props {
 interface Props {
-  placement?: PopperJS.Placement;
+  placement?: Placement;
   content: PopoverContent;
   content: PopoverContent;
   className?: string;
   className?: string;
   children: PopperControllerRenderProp;
   children: PopperControllerRenderProp;

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

 import React, { createRef, FC } from 'react';
 import React, { createRef, FC } from 'react';
-import * as PopperJS from 'popper.js';
+import { VirtualElement } from '@popperjs/core';
 import { Popover } from './Popover';
 import { Popover } from './Popover';
 import { PopoverController, UsingPopperProps } from './PopoverController';
 import { PopoverController, UsingPopperProps } from './PopoverController';
 
 
@@ -14,7 +14,7 @@ export interface PopoverContentProps {
 export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
 export type PopoverContent = string | React.ReactElement<any> | ((props: PopoverContentProps) => JSX.Element);
 
 
 export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => {
 export const Tooltip: FC<TooltipProps> = React.memo(({ children, theme, ...controllerProps }: TooltipProps) => {
-  const tooltipTriggerRef = createRef<PopperJS.ReferenceObject>();
+  const tooltipTriggerRef = createRef<HTMLElement | VirtualElement>();
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
   const popperBackgroundClassName = 'popper__background' + (theme ? ' popper__background--' + theme : '');
 
 
   return (
   return (