[incubator-devlake] branch main updated: fix: fix sidebar href (#3327)

[e2...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

e2corporation pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new ba31b968 fix: fix sidebar href (#3327)
ba31b968 is described below

commit ba31b968ce63afbbc5a3360d96a9295ee65ba52e
Author: Likyh <l...@likyh.com>
AuthorDate: Wed Oct 12 09:52:11 2022 +0800

    fix: fix sidebar href (#3327)
    
    * fix: fix sidebar href
    
    * fix: fix for review
    
    Co-authored-by: linyh <ya...@meri.co>
---
 config-ui/src/components/Sidebar/SidebarMenu.jsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/config-ui/src/components/Sidebar/SidebarMenu.jsx b/config-ui/src/components/Sidebar/SidebarMenu.jsx
index 6b1a38db..65b9d4d7 100644
--- a/config-ui/src/components/Sidebar/SidebarMenu.jsx
+++ b/config-ui/src/components/Sidebar/SidebarMenu.jsx
@@ -18,13 +18,24 @@
 import React, { useEffect, Fragment } from 'react'
 import { Menu } from '@blueprintjs/core'
 import '@/styles/sidebar-menu.scss'
+import { useHistory } from 'react-router-dom'
 
 const SidebarMenu = (props) => {
+  const history = useHistory()
   const { menu } = props
   // const activeRoute = useRouteMatch()
 
   useEffect(() => {}, [menu])
 
+  const handleProviderClick = (e, route) => {
+    // use history when route is not absolute url.
+    if (route && !route.includes('//')) {
+      e.preventDefault()
+      e.stopPropagation()
+      history.push(route)
+    }
+  }
+
   return (
     <>
       <Menu className='sidebarMenu' style={{ marginTop: '10px' }}>
@@ -36,6 +47,7 @@ const SidebarMenu = (props) => {
               icon={m.icon}
               text={m.label}
               href={m.route}
+              onClick={(e) => handleProviderClick(e, m.route)}
               target={m.target}
               disabled={m.disabled}
             />
@@ -47,13 +59,15 @@ const SidebarMenu = (props) => {
               text={m.label}
               icon={m.icon}
               href={m.route}
+              onClick={(e) => handleProviderClick(e, m.route)}
               disabled={m.disabled}
             >
               {m.children.map((mS, mSidx) => (
                 <Menu.Item
                   active={mS.active}
                   key={`submenu-${mIdx}-item-key${mSidx}`}
-                  href={mS.route}
+                  href={m.route}
+                  onClick={(e) => handleProviderClick(e, mS.route)}
                   icon={mS.icon}
                   text={mS.label}
                   disabled={mS.disabled}