From b6544c9048c4a777358ff9818048a74b459321e5 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Mon, 8 Feb 2021 22:24:49 +0100
Subject: [PATCH] Fix label name leak into class name

Similar to https://github.com/prometheus/prometheus/pull/7902, this could lead
to style bugs for label names that correspond to styled CSS class names.

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../react-app/src/pages/targets/EndpointLink.test.tsx  | 10 +++++-----
 web/ui/react-app/src/pages/targets/EndpointLink.tsx    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx b/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx
index 6b29d43c2..e48efa64d 100644
--- a/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx
+++ b/web/ui/react-app/src/pages/targets/EndpointLink.test.tsx
@@ -24,10 +24,10 @@ describe('EndpointLink', () => {
     expect(anchor.children().text()).toEqual('http://100.99.128.71:9115/probe');
     expect(endpointLink.find('br')).toHaveLength(1);
     expect(badges).toHaveLength(2);
-    const moduleLabel = badges.filterWhere(badge => badge.hasClass('module'));
-    expect(moduleLabel.children().text()).toEqual('module="http_2xx"');
-    const targetLabel = badges.filterWhere(badge => badge.hasClass('target'));
-    expect(targetLabel.children().text()).toEqual('target="http://some-service"');
+    const moduleLabel = badges.filterWhere(badge => badge.children().text() === 'module="http_2xx"');
+    expect(moduleLabel.length).toEqual(1);
+    const targetLabel = badges.filterWhere(badge => badge.children().text() === 'target="http://some-service"');
+    expect(targetLabel.length).toEqual(1);
   });
 
   it('renders an alert if url is invalid', () => {
@@ -37,7 +37,7 @@ describe('EndpointLink', () => {
   });
 
   it('handles params with multiple values correctly', () => {
-    const consoleSpy = jest.spyOn(console, "warn");
+    const consoleSpy = jest.spyOn(console, 'warn');
     const endpoint = `http://example.com/federate?match[]={__name__="name1"}&match[]={__name__="name2"}&match[]={__name__="name3"}`;
     const globalURL = 'http://example.com/federate';
     const endpointLink = mount(<EndpointLink endpoint={endpoint} globalUrl={globalURL} />);
diff --git a/web/ui/react-app/src/pages/targets/EndpointLink.tsx b/web/ui/react-app/src/pages/targets/EndpointLink.tsx
index a86a93429..d0376a140 100644
--- a/web/ui/react-app/src/pages/targets/EndpointLink.tsx
+++ b/web/ui/react-app/src/pages/targets/EndpointLink.tsx
@@ -27,7 +27,7 @@ const EndpointLink: FC<EndpointLinkProps> = ({ endpoint, globalUrl }) => {
       {params.length > 0 ? <br /> : null}
       {params.map(([labelName, labelValue]: [string, string]) => {
         return (
-          <Badge color="primary" className={`mr-1 ${labelName}`} key={`${labelName}/${labelValue}`}>
+          <Badge color="primary" className="mr-1" key={`${labelName}/${labelValue}`}>
             {`${labelName}="${labelValue}"`}
           </Badge>
         );