From 79c6fdc0e8fe7bb900a88c3782df8f8870d8a5c1 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 8 Jan 2019 20:51:00 +0100 Subject: [PATCH] wip --- packages/grafana-ui/package.json | 6 ++++-- .../src}/components/Tooltip/Popper.tsx | 0 .../components/Tooltip/PopperController.tsx | 0 .../src}/components/Tooltip/Tooltip.test.tsx | 8 +++++--- .../src}/components/Tooltip/Tooltip.tsx | 19 +++++++++---------- .../src/components/Tooltip/_Tooltip.scss | 0 .../__snapshots__/Tooltip.test.tsx.snap | 0 packages/grafana-ui/src/components/index.scss | 1 + packages/grafana-ui/src/components/index.ts | 1 + public/app/core/components/Label/Label.tsx | 2 +- .../ToggleButtonGroup/ToggleButtonGroup.tsx | 2 +- .../dashboard/dashgrid/DataSourceOption.tsx | 2 +- .../dashboard/dashgrid/PanelEditor.tsx | 2 +- .../PanelHeader/PanelHeaderCorner.tsx | 6 +++--- .../permissions/DashboardPermissions.tsx | 2 +- .../features/folders/FolderPermissions.tsx | 2 +- public/app/features/teams/TeamGroupSync.tsx | 2 +- public/sass/_grafana.scss | 1 - yarn.lock | 18 ++++++++++++++++-- 19 files changed, 46 insertions(+), 28 deletions(-) rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Popper.tsx (100%) rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/PopperController.tsx (100%) rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Tooltip.test.tsx (69%) rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/Tooltip.tsx (63%) rename public/sass/components/_popper.scss => packages/grafana-ui/src/components/Tooltip/_Tooltip.scss (100%) rename {public/app/core => packages/grafana-ui/src}/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap (100%) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index 2fb210e3b46..f48b8221f9c 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -11,6 +11,8 @@ "license": "ISC", "dependencies": { "@torkelo/react-select": "2.1.1", + "@types/react-test-renderer": "^16.0.3", + "@types/react-transition-group": "^2.0.15", "classnames": "^2.2.5", "jquery": "^3.2.1", "lodash": "^4.17.10", @@ -23,11 +25,11 @@ "react-virtualized": "^9.21.0" }, "devDependencies": { + "@types/classnames": "^2.2.6", "@types/jest": "^23.3.2", + "@types/jquery": "^1.10.35", "@types/lodash": "^4.14.119", "@types/react": "^16.7.6", - "@types/classnames": "^2.2.6", - "@types/jquery": "^1.10.35", "typescript": "^3.2.2" } } diff --git a/public/app/core/components/Tooltip/Popper.tsx b/packages/grafana-ui/src/components/Tooltip/Popper.tsx similarity index 100% rename from public/app/core/components/Tooltip/Popper.tsx rename to packages/grafana-ui/src/components/Tooltip/Popper.tsx diff --git a/public/app/core/components/Tooltip/PopperController.tsx b/packages/grafana-ui/src/components/Tooltip/PopperController.tsx similarity index 100% rename from public/app/core/components/Tooltip/PopperController.tsx rename to packages/grafana-ui/src/components/Tooltip/PopperController.tsx diff --git a/public/app/core/components/Tooltip/Tooltip.test.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx similarity index 69% rename from public/app/core/components/Tooltip/Tooltip.test.tsx rename to packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx index 4a6def738e0..95d01c7f2fe 100644 --- a/public/app/core/components/Tooltip/Tooltip.test.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.test.tsx @@ -1,13 +1,15 @@ import React from 'react'; import renderer from 'react-test-renderer'; -import Tooltip from './Tooltip'; +import { Tooltip } from './Tooltip'; describe('Tooltip', () => { it('renders correctly', () => { const tree = renderer .create( - - Link with tooltip + + + Link with tooltip + ) .toJSON(); diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx similarity index 63% rename from public/app/core/components/Tooltip/Tooltip.tsx rename to packages/grafana-ui/src/components/Tooltip/Tooltip.tsx index 8fcc4793ba9..9cffb151d83 100644 --- a/public/app/core/components/Tooltip/Tooltip.tsx +++ b/packages/grafana-ui/src/components/Tooltip/Tooltip.tsx @@ -1,10 +1,9 @@ import React, { createRef } from 'react'; import * as PopperJS from 'popper.js'; - import Popper from './Popper'; import PopperController, { UsingPopperProps } from './PopperController'; -const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => { +export const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperProps) => { const tooltipTriggerRef = createRef(); return ( @@ -12,12 +11,14 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro {(showPopper, hidePopper, popperProps) => { return ( <> - + {tooltipTriggerRef.current && ( + + )} {React.cloneElement(children, { ref: tooltipTriggerRef, onMouseEnter: showPopper, @@ -29,5 +30,3 @@ const Tooltip = ({ children, renderContent, ...controllerProps }: UsingPopperPro ); }; - -export default Tooltip; diff --git a/public/sass/components/_popper.scss b/packages/grafana-ui/src/components/Tooltip/_Tooltip.scss similarity index 100% rename from public/sass/components/_popper.scss rename to packages/grafana-ui/src/components/Tooltip/_Tooltip.scss diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap similarity index 100% rename from public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap rename to packages/grafana-ui/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index d52508c946c..fd10d21f9f1 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1 +1,2 @@ @import 'DeleteButton/DeleteButton'; +@import 'Tooltip/Tooltip'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index b57b9bcfdb7..8b9b11404c2 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -1 +1,2 @@ export { DeleteButton } from './DeleteButton/DeleteButton'; +export { Tooltip } from './Tooltip/Tooltip'; diff --git a/public/app/core/components/Label/Label.tsx b/public/app/core/components/Label/Label.tsx index 956678283f6..5d60efa056a 100644 --- a/public/app/core/components/Label/Label.tsx +++ b/public/app/core/components/Label/Label.tsx @@ -1,5 +1,5 @@ import React, { SFC, ReactNode } from 'react'; -import Tooltip from '../Tooltip/Tooltip'; +import { Tooltip } from '@grafana/ui'; interface Props { tooltip?: string; diff --git a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx index 2524a265054..86e15923bda 100644 --- a/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx +++ b/public/app/core/components/ToggleButtonGroup/ToggleButtonGroup.tsx @@ -1,5 +1,5 @@ import React, { SFC, ReactNode, PureComponent } from 'react'; -import Tooltip from 'app/core/components/Tooltip/Tooltip'; +import { Tooltip } from '@grafana/ui'; interface ToggleButtonGroupProps { label?: string; diff --git a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx index 0adfc4abe16..9a3ce527510 100644 --- a/public/app/features/dashboard/dashgrid/DataSourceOption.tsx +++ b/public/app/features/dashboard/dashgrid/DataSourceOption.tsx @@ -1,5 +1,5 @@ import React, { SFC } from 'react'; -import Tooltip from 'app/core/components/Tooltip/Tooltip'; +import { Tooltip } from '@grafana/ui'; interface Props { label: string; diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index bce9af252ee..22921a4f98e 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -15,7 +15,7 @@ import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; import { PanelPlugin } from 'app/types/plugins'; -import Tooltip from 'app/core/components/Tooltip/Tooltip'; +import { Tooltip } from '@grafana/ui'; interface PanelEditorProps { panel: PanelModel; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx index 3346f4b902d..82b8d57b64a 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx @@ -1,10 +1,10 @@ import React, { Component } from 'react'; +import Remarkable from 'remarkable'; +import { Tooltip } from '@grafana/ui'; import { PanelModel } from 'app/features/dashboard/panel_model'; -import Tooltip from 'app/core/components/Tooltip/Tooltip'; import templateSrv from 'app/features/templating/template_srv'; import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv'; import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv'; -import Remarkable from 'remarkable'; enum InfoModes { Error = 'Error', @@ -78,7 +78,7 @@ export class PanelHeaderCorner extends Component { {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (