From 0a8acb654e8c040c8e67c6df41d85cf93b56df29 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Sun, 9 Feb 2020 13:39:44 +0100
Subject: [PATCH] React UI: Use null value for determining consoles link
 display (#6790)

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/react-app/public/index.html   | 4 ++--
 web/ui/react-app/src/Navbar.test.tsx | 2 +-
 web/ui/react-app/src/Navbar.tsx      | 4 ++--
 web/ui/react-app/src/index.tsx       | 5 +++--
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/ui/react-app/public/index.html b/web/ui/react-app/public/index.html
index e5943537b4..5ecd832b49 100755
--- a/web/ui/react-app/public/index.html
+++ b/web/ui/react-app/public/index.html
@@ -15,8 +15,8 @@
       to Prometheus, both for asset loading as well as API accesses.
 
       The GLOBAL_CONSOLES_LINK placeholder magic value is replaced during serving by Prometheus
-      and set to the consoles link if it exists. It will render a "Consoles" link in the navbar when 
-      it is non-empty. 
+      and set to the consoles link if it exists. It will render a "Consoles" link in the navbar when
+      it is non-empty.
     -->
     <script>
       const GLOBAL_PATH_PREFIX='PATH_PREFIX_PLACEHOLDER';
diff --git a/web/ui/react-app/src/Navbar.test.tsx b/web/ui/react-app/src/Navbar.test.tsx
index 08fc72c34f..6a8a5b4cdf 100644
--- a/web/ui/react-app/src/Navbar.test.tsx
+++ b/web/ui/react-app/src/Navbar.test.tsx
@@ -18,7 +18,7 @@ describe('Navbar should contain console Link', () => {
 
 describe('Navbar should not contain consoles link', () => {
   it('with empty string in consolesLink', () => {
-    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink="" />);
+    const app = shallow(<Navigation pathPrefix="/path/prefix" consolesLink={null} />);
     expect(
       app.contains(
         <NavItem>
diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx
index 031b58fdfc..51c072add4 100644
--- a/web/ui/react-app/src/Navbar.tsx
+++ b/web/ui/react-app/src/Navbar.tsx
@@ -29,9 +29,9 @@ const Navigation: FC<PathPrefixProps & NavbarProps> = ({ pathPrefix, consolesLin
       </Link>
       <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
         <Nav className="ml-0" navbar>
-          {consolesLink !== '' && (
+          {consolesLink !== null && (
             <NavItem>
-              <NavLink href={`${consolesLink}`}>Consoles</NavLink>
+              <NavLink href={consolesLink}>Consoles</NavLink>
             </NavItem>
           )}
           <NavItem>
diff --git a/web/ui/react-app/src/index.tsx b/web/ui/react-app/src/index.tsx
index 557069907c..f6e672829a 100755
--- a/web/ui/react-app/src/index.tsx
+++ b/web/ui/react-app/src/index.tsx
@@ -10,7 +10,8 @@ declare const GLOBAL_PATH_PREFIX: string;
 declare const GLOBAL_CONSOLES_LINK: string;
 
 let prefix = GLOBAL_PATH_PREFIX;
-let consolesLink = GLOBAL_CONSOLES_LINK;
+let consolesLink: string | null = GLOBAL_CONSOLES_LINK;
+
 if (GLOBAL_PATH_PREFIX === 'PATH_PREFIX_PLACEHOLDER' || GLOBAL_PATH_PREFIX === '/' || !isPresent(GLOBAL_PATH_PREFIX)) {
   // Either we are running the app outside of Prometheus, so the placeholder value in
   // the index.html didn't get replaced, or we have a '/' prefix, which we also need to
@@ -24,7 +25,7 @@ if (
   GLOBAL_CONSOLES_LINK === '' ||
   !isPresent(GLOBAL_CONSOLES_LINK)
 ) {
-  consolesLink = '';
+  consolesLink = null;
 }
 
 ReactDOM.render(<App pathPrefix={prefix} consolesLink={consolesLink} />, document.getElementById('root'));