From 8f63ba3ee78384f77e7866c04c27aea08ef29dad Mon Sep 17 00:00:00 2001
From: asingh <11219262+ashutosh16@users.noreply.github.com>
Date: Fri, 16 Jun 2023 13:39:57 -0700
Subject: [PATCH] fix(ui): use react link to route to relative deep-link path
 (#13529)

Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com>
---
 ui/src/app/shared/components/deep-links.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/shared/components/deep-links.tsx b/ui/src/app/shared/components/deep-links.tsx
index f7881bff537d..6d9f614ea966 100644
--- a/ui/src/app/shared/components/deep-links.tsx
+++ b/ui/src/app/shared/components/deep-links.tsx
@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import {Link} from 'react-router-dom';
 import {LinkInfo} from '../models';
 
 export const DeepLinks = (props: {links: LinkInfo[]}) => {
@@ -7,10 +8,17 @@ export const DeepLinks = (props: {links: LinkInfo[]}) => {
         <div style={{margin: '10px 0'}}>
             {(links || []).map((link: LinkInfo) => (
                 <div key={link.title} style={{display: 'flex', alignItems: 'center', height: '35px'}}>
-                    <a href={link.url} target='_blank' style={{display: 'flex', alignItems: 'center', marginRight: '7px'}} rel='noopener'>
-                        <i className={`fa ${link.iconClass ? link.iconClass : 'fa-external-link-alt'}`} style={{marginRight: '5px'}} />
-                        <div>{link.title}</div>
-                    </a>
+                    {link.url.startsWith('http') ? (
+                        <a href={link.url} target='_blank' rel='noopener' style={{display: 'flex', alignItems: 'center', marginRight: '7px'}}>
+                            <i className={`fa ${link.iconClass ? link.iconClass : 'fa-external-link-alt'} custom-style-link`} style={{marginRight: '5px'}} />
+                            <div>{link.title}</div>
+                        </a>
+                    ) : (
+                        <Link to={link.url} style={{display: 'flex', alignItems: 'center', marginRight: '7px'}}>
+                            <i className={`fa ${link.iconClass ? link.iconClass : 'fa-external-link-alt'}`} style={{marginRight: '5px'}} />
+                            <div>{link.title}</div>
+                        </Link>
+                    )}
                     {link.description && <>({link.description})</>}
                 </div>
             ))}