From 53221cf3abd685e7680f7f80118ad36cb3bb77e3 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Wed, 4 Sep 2019 17:47:56 +0800
Subject: [PATCH] [system admin] side nav: click & highlight current nav item
 (#4055)

---
 frontend/src/pages/sys-admin/index.js      |  7 +++++-
 frontend/src/pages/sys-admin/side-panel.js | 25 ++++++++++++++++++----
 seahub/urls.py                             |  2 +-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/sys-admin/index.js b/frontend/src/pages/sys-admin/index.js
index da517e2778..269eb0c502 100644
--- a/frontend/src/pages/sys-admin/index.js
+++ b/frontend/src/pages/sys-admin/index.js
@@ -61,7 +61,12 @@ class SysAdmin extends React.Component {
 
     return (
       <div id="main">
-        <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab}/>
+        <SidePanel
+          isSidePanelClosed={isSidePanelClosed}
+          onCloseSidePanel={this.onCloseSidePanel}
+          currentTab={currentTab}
+          tabItemClick={this.tabItemClick}
+        />
         <MainPanel>
           <Router className="reach-router">
             <Info path={siteRoot + 'sys/info'} />
diff --git a/frontend/src/pages/sys-admin/side-panel.js b/frontend/src/pages/sys-admin/side-panel.js
index 0ff961df87..e3cabadab9 100644
--- a/frontend/src/pages/sys-admin/side-panel.js
+++ b/frontend/src/pages/sys-admin/side-panel.js
@@ -11,6 +11,7 @@ const propTypes = {
   isSidePanelClosed: PropTypes.bool.isRequired,
   onCloseSidePanel: PropTypes.func.isRequired,
   currentTab: PropTypes.string.isRequired,
+  tabItemClick: PropTypes.func.isRequired
 };
 
 class SidePanel extends React.Component {
@@ -32,7 +33,11 @@ class SidePanel extends React.Component {
               <ul className="nav nav-pills flex-column nav-container">
                 {canViewSystemInfo &&
                 <li className="nav-item">
-                  <Link className={`nav-link ellipsis ${this.getActiveClass('info')}`} to={siteRoot + 'sys/info/'}>
+                  <Link
+                    className={`nav-link ellipsis ${this.getActiveClass('info')}`}
+                    to={siteRoot + 'sys/info/'}
+                    onClick={() => this.props.tabItemClick('info')}
+                  >
                     <span className="sf2-icon-info" aria-hidden="true"></span>
                     <span className="nav-text">{gettext('Info')}</span>
                   </Link>
@@ -48,7 +53,11 @@ class SidePanel extends React.Component {
                 }
                 {isDefaultAdmin &&
                   <li className="nav-item">
-                    <Link className={`nav-link ellipsis ${this.getActiveClass('devices')}`} to={siteRoot + 'sys/desktop-devices/'}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('devices')}`}
+                      to={siteRoot + 'sys/desktop-devices/'}
+                      onClick={() => this.props.tabItemClick('devices')}
+                    >
                       <span className="sf2-icon-monitor" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('Devices')}</span>
                     </Link>
@@ -136,7 +145,11 @@ class SidePanel extends React.Component {
                 }
                 {isPro && isDefaultAdmin && enableFileScan &&
                   <li className="nav-item">
-                    <Link className='nav-link ellipsis' to={siteRoot + 'sys/file-scan-records/'}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('file-scan-records')}`}
+                      to={siteRoot + 'sys/file-scan-records/'}
+                      onClick={() => this.props.tabItemClick('file-scan-records')}
+                    >
                       <span className="sf2-icon-security" aria-hidden="true"></span>
                       <span className="nav-text">{gettext('File Scan')}</span>
                     </Link>
@@ -176,7 +189,11 @@ class SidePanel extends React.Component {
                 }
                 {isDefaultAdmin && enableWorkWeixin &&
                   <li className="nav-item">
-                    <Link className={`nav-link ellipsis ${this.getActiveClass('departments')}`} to={siteRoot + 'sys/work-weixin/departments/'}>
+                    <Link
+                      className={`nav-link ellipsis ${this.getActiveClass('work-weixin')}`}
+                      to={siteRoot + 'sys/work-weixin/'}
+                      onClick={() => this.props.tabItemClick('work-weixin')}
+                    >
                       <span className="sf3-font-enterprise-wechat sf3-font" aria-hidden="true"></span>
                       <span className="nav-text">{'企业微信集成'}</span>
                     </Link>
diff --git a/seahub/urls.py b/seahub/urls.py
index 5148616910..7a22f0c89c 100644
--- a/seahub/urls.py
+++ b/seahub/urls.py
@@ -654,7 +654,7 @@ urlpatterns = [
     url(r'^sys/mobile-devices/$', sysadmin_react_fake_view, name="sys_mobile_devices"),
     url(r'^sys/device-errors/$', sysadmin_react_fake_view, name="sys_device_errors"),
     url(r'^sys/web-settings/$', sysadmin_react_fake_view, name="sys_web_settings"),
-    url(r'^sys/work-weixin/departments/$', sysadmin_react_fake_view, name="sys_work_weixin_departments"),
+    url(r'^sys/work-weixin/$', sysadmin_react_fake_view, name="sys_work_weixin"),
 
     url(r'^client-login/$', client_token_login, name='client_token_login'),
 ]