From e20eea978a718c5bde7c40ad1d4b50b7dd9cb59c Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 14 Nov 2018 08:07:16 +0100
Subject: [PATCH 01/11] panel-header: Display description in modal

---
 .../dashboard/dashgrid/PanelHeader/PanelHeader.tsx | 14 ++++++++------
 public/app/features/dashboard/panel_model.ts       |  1 +
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 80def11b348..37d9d53cb5d 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 
 import { PanelHeaderMenu } from './PanelHeaderMenu';
+import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
@@ -41,14 +42,15 @@ export class PanelHeader extends PureComponent<Props, State> {
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     const { panel, dashboard, timeInfo } = this.props;
-
+    const cornerCssClass = panel.description ? 'panel-info-corner--info' : '';
     return (
       <div className={panelHeaderClass}>
-        <span className="panel-info-corner">
-          <i className="fa" />
-          <span className="panel-info-corner-inner" />
-        </span>
-
+        <Tooltip content="hello world">
+          <span className={`panel-info-corner ${cornerCssClass}`}>
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
+          </span>
+        </Tooltip>
         {isLoading && (
           <span className="panel-loading">
             <i className="fa fa-spinner fa-spin" />
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index d89f810e95a..e9d7f17812e 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -49,6 +49,7 @@ export class PanelModel {
 
   maxDataPoints?: number;
   interval?: string;
+  description?: string;
 
   // non persisted
   fullscreen: boolean;

From 6cd5bca9abfae2ec632f30353cb718b47fa5979d Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 14 Nov 2018 21:27:25 +0100
Subject: [PATCH 02/11] panel-header: Bump @types/react, @types/react-dom,
 react, react-dom, react-popper to latest versions

---
 package.json |  13 +++--
 yarn.lock    | 155 ++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 137 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 9a04bff77eb..452e4ecb742 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,9 @@
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.2",
     "@types/node": "^8.0.31",
-    "@types/react": "^16.4.14",
+    "@types/react": "^16.7.6",
     "@types/react-custom-scrollbars": "^4.0.5",
-    "@types/react-dom": "^16.0.7",
+    "@types/react-dom": "^16.0.9",
     "@types/react-select": "^2.0.4",
     "angular-mocks": "1.6.6",
     "autoprefixer": "^6.4.0",
@@ -152,12 +152,12 @@
     "prismjs": "^1.6.0",
     "prop-types": "^15.6.2",
     "rc-cascader": "^0.14.0",
-    "react": "^16.5.0",
+    "react": "^16.6.3",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.5.0",
+    "react-dom": "^16.6.3",
     "react-grid-layout": "0.16.6",
     "react-highlight-words": "^0.10.0",
-    "react-popper": "^0.7.5",
+    "react-popper": "^1.3.0",
     "react-redux": "^5.0.7",
     "react-select": "2.1.0",
     "react-sizeme": "^2.3.6",
@@ -180,6 +180,7 @@
     "tslint-react": "^3.6.0"
   },
   "resolutions": {
-    "caniuse-db": "1.0.30000772"
+    "caniuse-db": "1.0.30000772",
+    "**/@types/react": "16.7.6"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 400a432492c..a5d72d5d938 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -365,7 +365,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@^16.0.7":
+"@types/react-dom@*":
   version "16.0.8"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.8.tgz#6e1366ed629cadf55860cbfcc25db533f5d2fa7d"
   integrity sha512-WF/KAOia7pskV+J8f+UlNuFeCRkJuJAkyyeYPPtNe6suw0y7cWyUP/DPdPXsGUwQEkv2qlLVSrgVaoCm/PmO0Q==
@@ -373,6 +373,14 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/react-dom@^16.0.9":
+  version "16.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91"
+  integrity sha512-4Z0bW+75zeQgsEg7RaNuS1k9MKhci7oQqZXxrV5KUGIyXZHHAAL3KA4rjhdH8o6foZ5xsRMSqkoM5A3yRVPR5w==
+  dependencies:
+    "@types/node" "*"
+    "@types/react" "*"
+
 "@types/react-select@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-2.0.4.tgz#232c735539412acdc163751157c0a1c7d8aca40b"
@@ -389,7 +397,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.4.14":
+"@types/react@*":
   version "16.4.16"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.16.tgz#99f91b1200ae8c2062030402006d3b3c3a177043"
   integrity sha512-lxyoipLWweAnLnSsV4Ho2NAZTKKmxeYgkTQ6PaDiPDU9JJBUY2zJVVGiK1smzYv8+ZgbqEmcm5xM74GCpunSEA==
@@ -397,6 +405,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.1.0", "@types/react@^16.7.6":
+  version "16.7.6"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040"
+  integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/tapable@^0":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-0.2.5.tgz#2443fc12da514c81346b1a665675559cee21fa75"
@@ -1031,7 +1047,7 @@ arrify@^1.0.0, arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.0:
+asap@^2.0.0, asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -1854,7 +1870,7 @@ babel-register@^6.26.0, babel-register@^6.9.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -3148,6 +3164,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.0.0, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@@ -3243,6 +3264,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.2.1:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
+  integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
@@ -5090,6 +5119,19 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
+fbjs@^0.8.0:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
@@ -6067,6 +6109,11 @@ grunt@1.0.1:
     path-is-absolute "~1.0.0"
     rimraf "~2.2.8"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gzip-size@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-1.0.0.tgz#66cf8b101047227b95bace6ea1da0c177ed5c22f"
@@ -7247,6 +7294,14 @@ isomorphic-base64@^1.0.2:
   resolved "https://registry.yarnpkg.com/isomorphic-base64/-/isomorphic-base64-1.0.2.tgz#f426aae82569ba8a4ec5ca73ad21a44ab1ee7803"
   integrity sha1-9Caq6CVpuopOxcpzrSGkSrHueAM=
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -9211,6 +9266,14 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@0.7.5:
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
@@ -10383,10 +10446,10 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
-popper.js@^1.12.5:
-  version "1.14.4"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
-  integrity sha1-juwdj/AqWjoVLdQ0FKFce3n9abY=
+popper.js@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.5.tgz#98abcce7c7c34c4ee47fcbc6b3da8af2c0a127bc"
+  integrity sha512-fs4Sd8bZLgEzrk8aS7Em1qh+wcawtE87kRUJQhK6+LndyV1HerX7+LURzAylVaTyWIn5NTB/lyjnWqw/AZ6Yrw==
 
 portfinder@^1.0.9:
   version "1.0.17"
@@ -10953,6 +11016,13 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^0.1.9:
   version "0.1.14"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2"
@@ -11270,15 +11340,15 @@ react-custom-scrollbars@^4.2.1:
     prop-types "^15.5.10"
     raf "^3.1.0"
 
-react-dom@^16.5.0:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7"
-  integrity sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==
+react-dom@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
+  integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.5.0"
+    scheduler "^0.11.2"
 
 react-draggable@3.x, "react-draggable@^2.2.6 || ^3.0.3":
   version "3.0.5"
@@ -11341,13 +11411,18 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-popper@^0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596"
-  integrity sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg==
+react-popper@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.0.tgz#e769199bbe1273611957892f9950ef1d42c3f7ce"
+  integrity sha512-Dbn9kwgFzNFRi8yz/i4Qp7d1hkCYhWX6uJOFz0+PoNNm9uJMnFAqSPNgUUCV49L6p5zz5mKtMiudbgIqjAe1uw==
   dependencies:
-    popper.js "^1.12.5"
-    prop-types "^15.5.10"
+    "@types/react" "^16.1.0"
+    babel-runtime "6.x.x"
+    create-react-context "^0.2.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.5"
+    warning "^3.0.0"
 
 react-portal@^3.1.0:
   version "3.2.0"
@@ -11439,15 +11514,15 @@ react-virtualized@^9.21.0:
     prop-types "^15.6.0"
     react-lifecycles-compat "^3.0.4"
 
-react@^16.5.0:
-  version "16.5.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
-  integrity sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==
+react@^16.6.3:
+  version "16.6.3"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
+  integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    schedule "^0.5.0"
+    scheduler "^0.11.2"
 
 read-chunk@^2.1.0:
   version "2.1.0"
@@ -12245,6 +12320,14 @@ schedule@^0.5.0:
   dependencies:
     object-assign "^4.1.1"
 
+scheduler@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.2.tgz#a8db5399d06eba5abac51b705b7151d2319d33d3"
+  integrity sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
@@ -12399,7 +12482,7 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -13701,6 +13784,11 @@ type-of@^2.0.1:
   resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972"
   integrity sha1-5yoXQYllaOn2KDeNgW1pEvfyOXI=
 
+typed-styles@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.5.tgz#a60df245d482a9b1adf9c06c078d0f06085ed1cf"
+  integrity sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -13711,6 +13799,11 @@ typescript@^3.0.3:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.1.tgz#3362ba9dd1e482ebb2355b02dfe8bcd19a2c7c96"
   integrity sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ==
 
+ua-parser-js@^0.7.18:
+  version "0.7.19"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"
+  integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
+
 uglify-es@^3.3.4:
   version "3.3.9"
   resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@@ -14125,6 +14218,13 @@ walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
+  dependencies:
+    loose-envify "^1.0.0"
+
 warning@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607"
@@ -14359,6 +14459,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
   dependencies:
     iconv-lite "0.4.24"
 
+whatwg-fetch@>=0.10.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
+  integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
+
 whatwg-mimetype@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"

From af859b2f4dffb363357175e0f5ce0233316ef8d0 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 14 Nov 2018 21:39:13 +0100
Subject: [PATCH 03/11] panel-header: Updates for the new react-popper api and
 make it possible to hover the tooltip popper without it closing

---
 .../app/core/components/Tooltip/Popover.tsx   | 39 +++------
 public/app/core/components/Tooltip/Popper.tsx | 42 ++++++++++
 .../app/core/components/Tooltip/Tooltip.tsx   | 37 ++-------
 .../__snapshots__/Popover.test.tsx.snap       |  6 +-
 .../__snapshots__/Tooltip.test.tsx.snap       |  8 +-
 .../core/components/Tooltip/withPopper.tsx    | 83 +++++++++++++++++++
 .../core/components/Tooltip/withTooltip.tsx   | 58 -------------
 public/sass/components/_popper.scss           | 24 +++---
 8 files changed, 165 insertions(+), 132 deletions(-)
 create mode 100644 public/app/core/components/Tooltip/Popper.tsx
 create mode 100644 public/app/core/components/Tooltip/withPopper.tsx
 delete mode 100644 public/app/core/components/Tooltip/withTooltip.tsx

diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx
index ee86d07fb53..136ff98ff9d 100644
--- a/public/app/core/components/Tooltip/Popover.tsx
+++ b/public/app/core/components/Tooltip/Popover.tsx
@@ -1,34 +1,19 @@
-import React from 'react';
-import withTooltip from './withTooltip';
-import { Target } from 'react-popper';
-
-interface PopoverProps {
-  tooltipSetState: (prevState: object) => void;
-}
-
-class Popover extends React.Component<PopoverProps, any> {
-  constructor(props) {
-    super(props);
-    this.toggleTooltip = this.toggleTooltip.bind(this);
-  }
-
-  toggleTooltip() {
-    const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => {
-      return {
-        ...prevState,
-        show: !prevState.show,
-      };
-    });
-  }
+import React, { PureComponent } from 'react';
+import Popper from './Popper';
+import withPopper, { UsingPopperProps } from './withPopper';
 
+class Popover extends PureComponent<UsingPopperProps> {
   render() {
+    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
+
+    const togglePopper = restProps.show === true ? hidePopper : showPopper;
+
     return (
-      <Target className="popper__target" onClick={this.toggleTooltip}>
-        {this.props.children}
-      </Target>
+      <div className={`popper__manager ${className}`} onClick={togglePopper}>
+        <Popper {...restProps}>{children}</Popper>
+      </div>
     );
   }
 }
 
-export default withTooltip(Popover);
+export default withPopper(Popover);
diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
new file mode 100644
index 00000000000..164584ea746
--- /dev/null
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -0,0 +1,42 @@
+import React, { PureComponent } from 'react';
+import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
+
+interface Props {
+  renderContent: (content: any) => any;
+  show: boolean;
+  placement?: any;
+  content: string | ((props: any) => JSX.Element);
+}
+
+class Popper extends PureComponent<Props> {
+  render() {
+    const { children, renderContent, show, placement } = this.props;
+    const { content } = this.props;
+    const modifiers = {
+      flip: { enabled: false },
+      preventOverflow: { enabled: false },
+      hide: { enabled: false },
+    };
+    return (
+      <Manager>
+        <Reference>{({ ref }) => <div ref={ref}>{children}</div>}</Reference>
+        {show && (
+          <ReactPopper placement={placement} modifiers={modifiers}>
+            {({ ref, style, placement, arrowProps }) => {
+              return (
+                <div ref={ref} style={style} data-placement={placement} className="popper">
+                  <div className="popper__background">
+                    {renderContent(content)}
+                    <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                  </div>
+                </div>
+              );
+            }}
+          </ReactPopper>
+        )}
+      </Manager>
+    );
+  }
+}
+
+export default Popper;
diff --git a/public/app/core/components/Tooltip/Tooltip.tsx b/public/app/core/components/Tooltip/Tooltip.tsx
index 62be658f7cf..795da94a03c 100644
--- a/public/app/core/components/Tooltip/Tooltip.tsx
+++ b/public/app/core/components/Tooltip/Tooltip.tsx
@@ -1,36 +1,17 @@
 import React, { PureComponent } from 'react';
-import withTooltip from './withTooltip';
-import { Target } from 'react-popper';
-
-interface Props {
-  tooltipSetState: (prevState: object) => void;
-}
-
-class Tooltip extends PureComponent<Props> {
-  showTooltip = () => {
-    const { tooltipSetState } = this.props;
-
-    tooltipSetState(prevState => ({
-      ...prevState,
-      show: true,
-    }));
-  };
-
-  hideTooltip = () => {
-    const { tooltipSetState } = this.props;
-    tooltipSetState(prevState => ({
-      ...prevState,
-      show: false,
-    }));
-  };
+import Popper from './Popper';
+import withPopper, { UsingPopperProps } from './withPopper';
 
+class Tooltip extends PureComponent<UsingPopperProps> {
   render() {
+    const { children, hidePopper, showPopper, className, ...restProps } = this.props;
+
     return (
-      <Target className="popper__target" onMouseOver={this.showTooltip} onMouseOut={this.hideTooltip}>
-        {this.props.children}
-      </Target>
+      <div className={`popper__manager ${className}`} onMouseEnter={showPopper} onMouseLeave={hidePopper}>
+        <Popper {...restProps}>{children}</Popper>
+      </div>
     );
   }
 }
 
-export default withTooltip(Tooltip);
+export default withPopper(Tooltip);
diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
index 12ec960a017..5cc3881a607 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
@@ -3,11 +3,9 @@
 exports[`Popover renders correctly 1`] = `
 <div
   className="popper__manager test-class"
+  onClick={[Function]}
 >
-  <div
-    className="popper__target"
-    onClick={[Function]}
-  >
+  <div>
     <button>
       Button with Popover
     </button>
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 0ec9bdd86fe..d4c0c051435 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -3,12 +3,10 @@
 exports[`Tooltip renders correctly 1`] = `
 <div
   className="popper__manager test-class"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
 >
-  <div
-    className="popper__target"
-    onMouseOut={[Function]}
-    onMouseOver={[Function]}
-  >
+  <div>
     <a
       href="http://www.grafana.com"
     >
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
new file mode 100644
index 00000000000..247ad104186
--- /dev/null
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+export interface UsingPopperProps {
+  showPopper: (prevState: object) => void;
+  hidePopper: (prevState: object) => void;
+  renderContent: (content: any) => any;
+  show: boolean;
+  placement?: string;
+  content: string | ((props: any) => JSX.Element);
+  className?: string;
+}
+
+interface Props {
+  placement?: string;
+  className?: string;
+  content: string | ((props: any) => JSX.Element);
+}
+
+interface State {
+  placement: string;
+  show: boolean;
+}
+
+export default function withPopper(WrappedComponent) {
+  return class extends React.Component<Props, State> {
+    constructor(props) {
+      super(props);
+      this.setState = this.setState.bind(this);
+      this.state = {
+        placement: this.props.placement || 'auto',
+        show: false,
+      };
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (nextProps.placement && nextProps.placement !== this.state.placement) {
+        this.setState(prevState => {
+          return {
+            ...prevState,
+            placement: nextProps.placement,
+          };
+        });
+      }
+    }
+
+    showPopper = () => {
+      this.setState(prevState => ({
+        ...prevState,
+        show: true,
+      }));
+    };
+
+    hidePopper = () => {
+      this.setState(prevState => ({
+        ...prevState,
+        show: false,
+      }));
+    };
+
+    renderContent(content) {
+      if (typeof content === 'function') {
+        // If it's a function we assume it's a React component
+        const ReactComponent = content;
+        return <ReactComponent />;
+      }
+      return content;
+    }
+
+    render() {
+      const { show, placement } = this.state;
+      return (
+        <WrappedComponent
+          {...this.props}
+          showPopper={this.showPopper}
+          hidePopper={this.hidePopper}
+          renderContent={this.renderContent}
+          show={show}
+          placement={placement}
+        />
+      );
+    }
+  };
+}
diff --git a/public/app/core/components/Tooltip/withTooltip.tsx b/public/app/core/components/Tooltip/withTooltip.tsx
deleted file mode 100644
index a09de67622e..00000000000
--- a/public/app/core/components/Tooltip/withTooltip.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { Manager, Popper, Arrow } from 'react-popper';
-
-interface IwithTooltipProps {
-  placement?: string;
-  content: string | ((props: any) => JSX.Element);
-  className?: string;
-}
-
-export default function withTooltip(WrappedComponent) {
-  return class extends React.Component<IwithTooltipProps, any> {
-    constructor(props) {
-      super(props);
-
-      this.setState = this.setState.bind(this);
-      this.state = {
-        placement: this.props.placement || 'auto',
-        show: false,
-      };
-    }
-
-    componentWillReceiveProps(nextProps) {
-      if (nextProps.placement && nextProps.placement !== this.state.placement) {
-        this.setState(prevState => {
-          return {
-            ...prevState,
-            placement: nextProps.placement,
-          };
-        });
-      }
-    }
-
-    renderContent(content) {
-      if (typeof content === 'function') {
-        // If it's a function we assume it's a React component
-        const ReactComponent = content;
-        return <ReactComponent />;
-      }
-      return content;
-    }
-
-    render() {
-      const { content, className } = this.props;
-
-      return (
-        <Manager className={`popper__manager ${className || ''}`}>
-          <WrappedComponent {...this.props} tooltipSetState={this.setState} />
-          {this.state.show ? (
-            <Popper placement={this.state.placement} className="popper">
-              {this.renderContent(content)}
-              <Arrow className="popper__arrow" />
-            </Popper>
-          ) : null}
-        </Manager>
-      );
-    }
-  };
-}
diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss
index 0b28d5b21f4..ae7cc46435e 100644
--- a/public/sass/components/_popper.scss
+++ b/public/sass/components/_popper.scss
@@ -1,12 +1,8 @@
 .popper {
   position: absolute;
   z-index: $zindex-tooltip;
-  background: $tooltipBackground;
   color: $tooltipColor;
   max-width: 400px;
-  border-radius: 3px;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-  padding: 10px;
   text-align: center;
 }
 
@@ -35,10 +31,18 @@
   left: calc(50% - 5px);
   margin-top: 0;
   margin-bottom: 0;
+  padding-top: 5px;
 }
 
 .popper[data-placement^='bottom'] {
-  margin-top: 5px;
+  padding-top: 5px;
+}
+
+.popper__background {
+  background: $tooltipBackground;
+  border-radius: 3px;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
 }
 
 .popper[data-placement^='bottom'] .popper__arrow {
@@ -46,21 +50,21 @@
   border-left-color: transparent;
   border-right-color: transparent;
   border-top-color: transparent;
-  top: -5px;
-  left: calc(50% - 5px);
+  top: 0;
+  left: calc(50% - 8px);
   margin-top: 0;
   margin-bottom: 0;
 }
 .popper[data-placement^='right'] {
-  margin-left: 5px;
+  padding-left: 5px;
 }
 .popper[data-placement^='right'] .popper__arrow {
   border-width: 5px 5px 5px 0;
   border-left-color: transparent;
   border-top-color: transparent;
   border-bottom-color: transparent;
-  left: -5px;
-  top: calc(50% - 5px);
+  left: 0;
+  top: calc(50% - 8px);
   margin-left: 0;
   margin-right: 0;
 }

From 0a5f920bf5b0383a6a79e1b699e67e8459b6b27f Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Wed, 14 Nov 2018 22:02:50 +0100
Subject: [PATCH 04/11] panel-header: Avoid undefined classNames and use the
 real panel description

---
 public/app/core/components/Tooltip/withPopper.tsx |  3 +++
 .../dashgrid/PanelHeader/PanelHeader.tsx          | 15 ++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
index 247ad104186..b729c7cc3a4 100644
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -68,6 +68,8 @@ export default function withPopper(WrappedComponent) {
 
     render() {
       const { show, placement } = this.state;
+      const className = this.props.className || '';
+
       return (
         <WrappedComponent
           {...this.props}
@@ -76,6 +78,7 @@ export default function withPopper(WrappedComponent) {
           renderContent={this.renderContent}
           show={show}
           placement={placement}
+          className={className}
         />
       );
     }
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 37d9d53cb5d..32f3041bba5 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -42,15 +42,16 @@ export class PanelHeader extends PureComponent<Props, State> {
     const isLoading = false;
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     const { panel, dashboard, timeInfo } = this.props;
-    const cornerCssClass = panel.description ? 'panel-info-corner--info' : '';
     return (
       <div className={panelHeaderClass}>
-        <Tooltip content="hello world">
-          <span className={`panel-info-corner ${cornerCssClass}`}>
-            <i className="fa" />
-            <span className="panel-info-corner-inner" />
-          </span>
-        </Tooltip>
+        {panel.description && (
+          <Tooltip content={panel.description}>
+            <span className="panel-info-corner panel-info-corner--info">
+              <i className="fa" />
+              <span className="panel-info-corner-inner" />
+            </span>
+          </Tooltip>
+        )}
         {isLoading && (
           <span className="panel-loading">
             <i className="fa fa-spinner fa-spin" />

From 0430bb47c2e323da8c12d0a245573609faf20746 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 09:17:39 +0100
Subject: [PATCH 05/11] panel-header: Simplify condition

---
 public/app/core/components/Tooltip/Popover.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/core/components/Tooltip/Popover.tsx b/public/app/core/components/Tooltip/Popover.tsx
index 136ff98ff9d..62397243c1c 100644
--- a/public/app/core/components/Tooltip/Popover.tsx
+++ b/public/app/core/components/Tooltip/Popover.tsx
@@ -6,7 +6,7 @@ class Popover extends PureComponent<UsingPopperProps> {
   render() {
     const { children, hidePopper, showPopper, className, ...restProps } = this.props;
 
-    const togglePopper = restProps.show === true ? hidePopper : showPopper;
+    const togglePopper = restProps.show ? hidePopper : showPopper;
 
     return (
       <div className={`popper__manager ${className}`} onClick={togglePopper}>

From e73466a80d52f0fc398226babcdfc376115931f4 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 12:47:32 +0100
Subject: [PATCH 06/11] panel-header: Make it possible to style the reference
 element and fix so panel description looks good

---
 public/app/core/components/Tooltip/Popper.tsx  | 18 ++++++++++--------
 .../app/core/components/Tooltip/withPopper.tsx |  2 ++
 .../dashgrid/PanelHeader/PanelHeader.tsx       | 12 +++++++-----
 public/sass/utils/_utils.scss                  |  4 ++++
 4 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 164584ea746..25a71c04500 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -6,22 +6,24 @@ interface Props {
   show: boolean;
   placement?: any;
   content: string | ((props: any) => JSX.Element);
+  refClassName?: string;
 }
 
 class Popper extends PureComponent<Props> {
   render() {
-    const { children, renderContent, show, placement } = this.props;
+    const { children, renderContent, show, placement, refClassName } = this.props;
     const { content } = this.props;
-    const modifiers = {
-      flip: { enabled: false },
-      preventOverflow: { enabled: false },
-      hide: { enabled: false },
-    };
     return (
       <Manager>
-        <Reference>{({ ref }) => <div ref={ref}>{children}</div>}</Reference>
+        <Reference>
+          {({ ref }) => (
+            <div className={`popper_ref ${refClassName || ''}`} ref={ref}>
+              {children}
+            </div>
+          )}
+        </Reference>
         {show && (
-          <ReactPopper placement={placement} modifiers={modifiers}>
+          <ReactPopper placement={placement}>
             {({ ref, style, placement, arrowProps }) => {
               return (
                 <div ref={ref} style={style} data-placement={placement} className="popper">
diff --git a/public/app/core/components/Tooltip/withPopper.tsx b/public/app/core/components/Tooltip/withPopper.tsx
index b729c7cc3a4..519b62344bb 100644
--- a/public/app/core/components/Tooltip/withPopper.tsx
+++ b/public/app/core/components/Tooltip/withPopper.tsx
@@ -8,11 +8,13 @@ export interface UsingPopperProps {
   placement?: string;
   content: string | ((props: any) => JSX.Element);
   className?: string;
+  refClassName?: string;
 }
 
 interface Props {
   placement?: string;
   className?: string;
+  refClassName?: string;
   content: string | ((props: any) => JSX.Element);
 }
 
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 32f3041bba5..48d1f1671cf 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -45,11 +45,13 @@ export class PanelHeader extends PureComponent<Props, State> {
     return (
       <div className={panelHeaderClass}>
         {panel.description && (
-          <Tooltip content={panel.description}>
-            <span className="panel-info-corner panel-info-corner--info">
-              <i className="fa" />
-              <span className="panel-info-corner-inner" />
-            </span>
+          <Tooltip
+            content={panel.description}
+            className="absolute"
+            refClassName="panel-info-corner panel-info-corner--info"
+          >
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
           </Tooltip>
         )}
         {isLoading && (
diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss
index 3121a6f0c00..c8abd696f04 100644
--- a/public/sass/utils/_utils.scss
+++ b/public/sass/utils/_utils.scss
@@ -78,3 +78,7 @@ button.close {
 .d-inline-block {
   display: inline-block;
 }
+
+.absolute {
+  position: absolute;
+}

From 2a5f7d1e058474ad38d6430d430672819639da0d Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 13:44:15 +0100
Subject: [PATCH 07/11] panel-header: Add fade in transition to tooltip

---
 public/app/core/components/Tooltip/Popper.tsx | 51 ++++++++++++++-----
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 25a71c04500..69bfe2f5ff9 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -1,5 +1,18 @@
 import React, { PureComponent } from 'react';
 import { Manager, Popper as ReactPopper, Reference } from 'react-popper';
+import Transition from 'react-transition-group/Transition';
+
+const defaultTransitionStyles = {
+  transition: 'opacity 200ms linear',
+  opacity: 0,
+};
+
+const transitionStyles = {
+  exited: { opacity: 0 },
+  entering: { opacity: 0 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+};
 
 interface Props {
   renderContent: (content: any) => any;
@@ -13,6 +26,7 @@ class Popper extends PureComponent<Props> {
   render() {
     const { children, renderContent, show, placement, refClassName } = this.props;
     const { content } = this.props;
+
     return (
       <Manager>
         <Reference>
@@ -22,20 +36,31 @@ class Popper extends PureComponent<Props> {
             </div>
           )}
         </Reference>
-        {show && (
-          <ReactPopper placement={placement}>
-            {({ ref, style, placement, arrowProps }) => {
-              return (
-                <div ref={ref} style={style} data-placement={placement} className="popper">
-                  <div className="popper__background">
-                    {renderContent(content)}
-                    <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+        <Transition in={show} timeout={100}>
+          {transitionState => (
+            <ReactPopper placement={placement}>
+              {({ ref, style, placement, arrowProps }) => {
+                return (
+                  <div
+                    ref={ref}
+                    style={{
+                      ...style,
+                      ...defaultTransitionStyles,
+                      ...transitionStyles[transitionState],
+                    }}
+                    data-placement={placement}
+                    className="popper"
+                  >
+                    <div className="popper__background">
+                      {renderContent(content)}
+                      <div ref={arrowProps.ref} data-placement={placement} className="popper__arrow" />
+                    </div>
                   </div>
-                </div>
-              );
-            }}
-          </ReactPopper>
-        )}
+                );
+              }}
+            </ReactPopper>
+          )}
+        </Transition>
       </Manager>
     );
   }

From 9e9ce80740ddd36b68e124e911b56b8ecb5f1a83 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 13:49:48 +0100
Subject: [PATCH 08/11] panel-header: Updated snapshots for popper

---
 .../__snapshots__/Popover.test.tsx.snap       | 26 ++++++++++++++++++-
 .../__snapshots__/Tooltip.test.tsx.snap       | 26 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
index 5cc3881a607..dee689fb9ab 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
@@ -5,10 +5,34 @@ exports[`Popover renders correctly 1`] = `
   className="popper__manager test-class"
   onClick={[Function]}
 >
-  <div>
+  <div
+    className="popper_ref "
+  >
     <button>
       Button with Popover
     </button>
   </div>
+  <div
+    className="popper"
+    style={
+      Object {
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "top": 0,
+        "transition": "opacity 200ms linear",
+      }
+    }
+  >
+    <div
+      className="popper__background"
+    >
+      Popover text
+      <div
+        className="popper__arrow"
+      />
+    </div>
+  </div>
 </div>
 `;
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index d4c0c051435..6dacaa7247f 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -6,12 +6,36 @@ exports[`Tooltip renders correctly 1`] = `
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}
 >
-  <div>
+  <div
+    className="popper_ref "
+  >
     <a
       href="http://www.grafana.com"
     >
       Link with tooltip
     </a>
   </div>
+  <div
+    className="popper"
+    style={
+      Object {
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "top": 0,
+        "transition": "opacity 200ms linear",
+      }
+    }
+  >
+    <div
+      className="popper__background"
+    >
+      Tooltip text
+      <div
+        className="popper__arrow"
+      />
+    </div>
+  </div>
 </div>
 `;

From e979ed140e4e92840822e2407ef043e4c2394acb Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 14:16:26 +0100
Subject: [PATCH 09/11] panel-header: Unmount popper when not needed.

---
 public/app/core/components/Tooltip/Popper.tsx |  2 +-
 .../__snapshots__/Popover.test.tsx.snap       | 22 -------------------
 .../__snapshots__/Tooltip.test.tsx.snap       | 22 -------------------
 3 files changed, 1 insertion(+), 45 deletions(-)

diff --git a/public/app/core/components/Tooltip/Popper.tsx b/public/app/core/components/Tooltip/Popper.tsx
index 69bfe2f5ff9..343f7ff35d9 100644
--- a/public/app/core/components/Tooltip/Popper.tsx
+++ b/public/app/core/components/Tooltip/Popper.tsx
@@ -36,7 +36,7 @@ class Popper extends PureComponent<Props> {
             </div>
           )}
         </Reference>
-        <Transition in={show} timeout={100}>
+        <Transition in={show} timeout={100} mountOnEnter={true} unmountOnExit={true}>
           {transitionState => (
             <ReactPopper placement={placement}>
               {({ ref, style, placement, arrowProps }) => {
diff --git a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
index dee689fb9ab..b36a4fe9af9 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Popover.test.tsx.snap
@@ -12,27 +12,5 @@ exports[`Popover renders correctly 1`] = `
       Button with Popover
     </button>
   </div>
-  <div
-    className="popper"
-    style={
-      Object {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": 0,
-        "transition": "opacity 200ms linear",
-      }
-    }
-  >
-    <div
-      className="popper__background"
-    >
-      Popover text
-      <div
-        className="popper__arrow"
-      />
-    </div>
-  </div>
 </div>
 `;
diff --git a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
index 6dacaa7247f..c7d680049f4 100644
--- a/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/public/app/core/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -15,27 +15,5 @@ exports[`Tooltip renders correctly 1`] = `
       Link with tooltip
     </a>
   </div>
-  <div
-    className="popper"
-    style={
-      Object {
-        "left": 0,
-        "opacity": 0,
-        "pointerEvents": "none",
-        "position": "absolute",
-        "top": 0,
-        "transition": "opacity 200ms linear",
-      }
-    }
-  >
-    <div
-      className="popper__background"
-    >
-      Tooltip text
-      <div
-        className="popper__arrow"
-      />
-    </div>
-  </div>
 </div>
 `;

From 0fa8ae4fac2f350bfb5f9141d5bc8c65393cf259 Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 14:30:59 +0100
Subject: [PATCH 10/11] panel-header: Move the panel description/links/error
 container outside of panel header to not interfere with the react-grid stuff

---
 .../dashgrid/PanelHeader/PanelHeader.tsx      | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index 48d1f1671cf..b07bc672265 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -43,7 +43,7 @@ export class PanelHeader extends PureComponent<Props, State> {
     const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen });
     const { panel, dashboard, timeInfo } = this.props;
     return (
-      <div className={panelHeaderClass}>
+      <>
         {panel.description && (
           <Tooltip
             content={panel.description}
@@ -60,27 +60,29 @@ export class PanelHeader extends PureComponent<Props, State> {
           </span>
         )}
 
-        <div className="panel-title-container" onClick={this.onMenuToggle}>
-          <div className="panel-title">
-            <span className="icon-gf panel-alert-icon" />
-            <span className="panel-title-text">
-              {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
-            </span>
-
-            {this.state.panelMenuOpen && (
-              <ClickOutsideWrapper onClick={this.closeMenu}>
-                <PanelHeaderMenu panel={panel} dashboard={dashboard} />
-              </ClickOutsideWrapper>
-            )}
-
-            {timeInfo && (
-              <span className="panel-time-info">
-                <i className="fa fa-clock-o" /> {timeInfo}
+        <div className={panelHeaderClass}>
+          <div className="panel-title-container" onClick={this.onMenuToggle}>
+            <div className="panel-title">
+              <span className="icon-gf panel-alert-icon" />
+              <span className="panel-title-text">
+                {panel.title} <span className="fa fa-caret-down panel-menu-toggle" />
               </span>
-            )}
+
+              {this.state.panelMenuOpen && (
+                <ClickOutsideWrapper onClick={this.closeMenu}>
+                  <PanelHeaderMenu panel={panel} dashboard={dashboard} />
+                </ClickOutsideWrapper>
+              )}
+
+              {timeInfo && (
+                <span className="panel-time-info">
+                  <i className="fa fa-clock-o" /> {timeInfo}
+                </span>
+              )}
+            </div>
           </div>
         </div>
-      </div>
+      </>
     );
   }
 }

From 83073dea2fbd7902a682f64d24d497345886403f Mon Sep 17 00:00:00 2001
From: Johannes Schill <johannes.schill@polyester.se>
Date: Thu, 15 Nov 2018 16:52:39 +0100
Subject: [PATCH 11/11] panel-header: Move the corner information in the panel
 header to its own component

---
 .../dashgrid/PanelHeader/PanelHeader.tsx      | 24 ++---
 .../PanelHeader/PanelHeaderCorner.tsx         | 94 +++++++++++++++++++
 public/app/features/dashboard/panel_model.ts  |  1 +
 3 files changed, 102 insertions(+), 17 deletions(-)
 create mode 100644 public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx

diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
index b07bc672265..5e19f5c814a 100644
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 
+import PanelHeaderCorner from './PanelHeaderCorner';
 import { PanelHeaderMenu } from './PanelHeaderMenu';
-import Tooltip from 'app/core/components/Tooltip/Tooltip';
 
 import { DashboardModel } from 'app/features/dashboard/dashboard_model';
 import { PanelModel } from 'app/features/dashboard/panel_model';
@@ -44,23 +44,13 @@ export class PanelHeader extends PureComponent<Props, State> {
     const { panel, dashboard, timeInfo } = this.props;
     return (
       <>
-        {panel.description && (
-          <Tooltip
-            content={panel.description}
-            className="absolute"
-            refClassName="panel-info-corner panel-info-corner--info"
-          >
-            <i className="fa" />
-            <span className="panel-info-corner-inner" />
-          </Tooltip>
-        )}
-        {isLoading && (
-          <span className="panel-loading">
-            <i className="fa fa-spinner fa-spin" />
-          </span>
-        )}
-
+        <PanelHeaderCorner panel={panel} />
         <div className={panelHeaderClass}>
+          {isLoading && (
+            <span className="panel-loading">
+              <i className="fa fa-spinner fa-spin" />
+            </span>
+          )}
           <div className="panel-title-container" onClick={this.onMenuToggle}>
             <div className="panel-title">
               <span className="icon-gf panel-alert-icon" />
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
new file mode 100644
index 00000000000..18d874713a5
--- /dev/null
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
@@ -0,0 +1,94 @@
+import React, { PureComponent } from 'react';
+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',
+  Info = 'Info',
+  Links = 'Links',
+}
+
+interface Props {
+  panel: PanelModel;
+}
+
+export class PanelHeaderCorner extends PureComponent<Props> {
+  timeSrv: TimeSrv = getTimeSrv();
+
+  getInfoMode = () => {
+    const { panel } = this.props;
+    // TODO
+    // if (error) {
+    //   return InfoModes.Error;
+    // }
+    if (!!panel.description) {
+      return InfoModes.Info;
+    }
+    if (panel.links && panel.links.length) {
+      return InfoModes.Links;
+    }
+
+    return undefined;
+  };
+
+  getInfoContent = () => {
+    const { panel } = this.props;
+    const markdown = panel.description;
+    const linkSrv = new LinkSrv(templateSrv, this.timeSrv);
+    const sanitize = str => str; // TODO
+    const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars);
+    const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown);
+
+    const html = (
+      <div className="markdown-html">
+        <div dangerouslySetInnerHTML={{ __html: remarkableInterpolatedMarkdown }} />
+        {panel.links &&
+          panel.links.length > 0 && (
+            <ul>
+              {panel.links.map((link, idx) => {
+                const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars);
+                return (
+                  <li key={idx}>
+                    <a className="panel-menu-link" href={info.href} target={info.target}>
+                      {info.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+      </div>
+    );
+    return sanitize(html);
+  };
+
+  render() {
+    const infoMode: InfoModes | undefined = this.getInfoMode();
+
+    if (!infoMode) {
+      return null;
+    }
+    const infoContent = this.getInfoContent();
+
+    return (
+      <>
+        {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? (
+          <Tooltip
+            content={infoContent}
+            className="absolute"
+            refClassName={`panel-info-corner panel-info-corner--${infoMode.toLowerCase()}`}
+          >
+            <i className="fa" />
+            <span className="panel-info-corner-inner" />
+          </Tooltip>
+        ) : null}
+      </>
+    );
+  }
+}
+
+export default PanelHeaderCorner;
diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts
index e9d7f17812e..20388a0450c 100644
--- a/public/app/features/dashboard/panel_model.ts
+++ b/public/app/features/dashboard/panel_model.ts
@@ -50,6 +50,7 @@ export class PanelModel {
   maxDataPoints?: number;
   interval?: string;
   description?: string;
+  links?: [];
 
   // non persisted
   fullscreen: boolean;