From 818bd9638173f58dc4a4cda0d3cf16ef8238f091 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Sat, 15 Aug 2020 01:44:13 +0200
Subject: [PATCH] Fix detail swatch glitch (#7805)

* Bump jquery and @types/jquery

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Properly close color box span in graph hover detail

jQuery 3.5.0 introcuded a breaking change that was necessary to fix HTML
security issues
(https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/), and as a
result the detail-swatch span wasn't closed properly anymore, because
spans are not valid self-closing tags in
XHTML.

Fixes https://github.com/prometheus/prometheus/issues/7803

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix up tests

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/react-app/package.json                         | 4 ++--
 web/ui/react-app/src/pages/graph/GraphHelpers.test.ts | 4 ++--
 web/ui/react-app/src/pages/graph/GraphHelpers.ts      | 2 +-
 web/ui/react-app/yarn.lock                            | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json
index 6538f121a6..74b19aa632 100644
--- a/web/ui/react-app/package.json
+++ b/web/ui/react-app/package.json
@@ -9,7 +9,7 @@
     "@reach/router": "^1.2.1",
     "@testing-library/react-hooks": "^3.1.1",
     "@types/jest": "^24.0.20",
-    "@types/jquery": "^3.3.29",
+    "@types/jquery": "^3.5.1",
     "@types/node": "^12.11.1",
     "@types/reach__router": "^1.2.6",
     "@types/react": "^16.8.2",
@@ -24,7 +24,7 @@
     "fuzzy": "^0.1.3",
     "i": "^0.3.6",
     "jest-fetch-mock": "^2.1.2",
-    "jquery": "^3.5",
+    "jquery": "^3.5.1",
     "jquery.flot.tooltip": "^0.9.0",
     "jsdom": "^15.2.0",
     "moment": "^2.24.0",
diff --git a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
index a8ecd30fe4..8a44d0d249 100644
--- a/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHelpers.test.ts
@@ -146,7 +146,7 @@ describe('GraphHelpers', () => {
       ).toEqual(`
             <div class="date">1970-01-19 04:42:08 +00:00</div>
             <div>
-              <span class="detail-swatch" style="background-color: " />
+              <span class="detail-swatch" style="background-color: "></span>
               <span>value: <strong>1572128592</strong></span>
             <div>
             <div class="labels mt-1">
@@ -163,7 +163,7 @@ describe('GraphHelpers', () => {
       ).toEqual(`
             <div class="date">1970-01-18 23:42:08 -05:00</div>
             <div>
-              <span class="detail-swatch" style="background-color: " />
+              <span class="detail-swatch" style="background-color: "></span>
               <span>value: <strong>1572128592</strong></span>
             <div>
             <div class="labels mt-1">
diff --git a/web/ui/react-app/src/pages/graph/GraphHelpers.ts b/web/ui/react-app/src/pages/graph/GraphHelpers.ts
index 4bd2f24426..5360167f2a 100644
--- a/web/ui/react-app/src/pages/graph/GraphHelpers.ts
+++ b/web/ui/react-app/src/pages/graph/GraphHelpers.ts
@@ -109,7 +109,7 @@ export const getOptions = (stacked: boolean, useLocalTime: boolean): jquery.flot
         return `
             <div class="date">${dateTime.format('YYYY-MM-DD HH:mm:ss Z')}</div>
             <div>
-              <span class="detail-swatch" style="background-color: ${color}" />
+              <span class="detail-swatch" style="background-color: ${color}"></span>
               <span>${labels.__name__ || 'value'}: <strong>${yval}</strong></span>
             <div>
             <div class="labels mt-1">
diff --git a/web/ui/react-app/yarn.lock b/web/ui/react-app/yarn.lock
index 29fe5e2dc5..28d894fb89 100644
--- a/web/ui/react-app/yarn.lock
+++ b/web/ui/react-app/yarn.lock
@@ -1662,7 +1662,7 @@
   dependencies:
     jest-diff "^24.3.0"
 
-"@types/jquery@*", "@types/jquery@^3.3.29":
+"@types/jquery@*", "@types/jquery@^3.5.1":
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.1.tgz#cebb057acf5071c40e439f30e840c57a30d406c3"
   integrity sha512-Tyctjh56U7eX2b9udu3wG853ASYP0uagChJcQJXLUXEU6C/JiW5qt5dl8ao01VRj1i5pgXPAf8f1mq4+FDLRQg==
@@ -6720,7 +6720,7 @@ jquery.flot.tooltip@^0.9.0:
   resolved "https://registry.yarnpkg.com/jquery.flot.tooltip/-/jquery.flot.tooltip-0.9.0.tgz#ae16bf94b26c2ed9ab4db167bba52dfdb615c1df"
   integrity sha1-rha/lLJsLtmrTbFnu6Ut/bYVwd8=
 
-jquery@^3.0, jquery@^3.5:
+jquery@^3.0, jquery@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.5.1.tgz#d7b4d08e1bfdb86ad2f1a3d039ea17304717abb5"
   integrity sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==