update main panel

frontend/src/pages/org-admin/index.js

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
-import MainPanel from './main-panel';
 import OrgUsers from './org-users';
 import OrgUsersList from './org-users-list';
 import OrgAdminList from './org-admin-list';
@@ -59,7 +58,7 @@ class Org extends React.Component {
 
   tabItemClick = (param) => {
     this.setState({currentTab: param});          
-  }  
+  }
 
   toggleAddOrgUser = () => {
     this.setState({isShowAddOrgUserDialog: !this.state.isShowAddOrgUserDialog});
@@ -89,39 +88,48 @@ class Org extends React.Component {
     let { isSidePanelClosed, currentTab, isShowAddOrgUserDialog, isShowAddOrgAdminDialog, isInviteUserDialogOpen } = this.state;
     return (
       <div id="main">
-        <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} />
-        <MainPanel
+        <SidePanel
+          isSidePanelClosed={isSidePanelClosed}
+          onCloseSidePanel={this.onCloseSidePanel}
           currentTab={currentTab}
-          toggleAddOrgAdmin={this.toggleAddOrgAdmin}
-          toggleAddOrgUser={this.toggleAddOrgUser}
-          toggleInviteUserDialog={this.toggleInviteUserDialog}
-          toggleAddDepartDialog={this.toggleAddDepartDialog}
-          toggleAddMemberDialog={this.toggleAddMemberDialog}
-          toggleAddRepoDialog={this.toggleAddRepoDialog}
-        >
+          tabItemClick={this.tabItemClick}
+        />       
+        <div className="main-panel o-hidden">
           <Router className="reach-router">
-            <OrgInfo path={siteRoot + 'org/orgmanage'} />
+            <OrgInfo path={siteRoot + 'org/orgmanage'} currentTab={currentTab}/>
             <OrgUsers 
               path={siteRoot + 'org/useradmin'}
               currentTab={currentTab} 
               tabItemClick={this.tabItemClick}
-              toggleAddOrgAdmin={this.toggleAddOrgAdmin} 
+              toggleAddOrgAdmin={this.toggleAddOrgAdmin}
               toggleAddOrgUser={this.toggleAddOrgUser} 
             >
-              <OrgUsersList path="/" currentTab={currentTab} isShowAddOrgUserDialog={isShowAddOrgUserDialog} isInviteUserDialogOpen={isInviteUserDialogOpen} toggleAddOrgUser={this.toggleAddOrgUser} toggleInviteUserDialog={this.toggleInviteUserDialog} />
-              <OrgAdminList path="admins" currentTab={currentTab} isShowAddOrgAdminDialog={isShowAddOrgAdminDialog} toggleAddOrgAdmin={this.toggleAddOrgAdmin} />
+              <OrgUsersList path="/"
+                currentTab={currentTab}
+                isShowAddOrgUserDialog={isShowAddOrgUserDialog}
+                isInviteUserDialogOpen={isInviteUserDialogOpen}
+                toggleAddOrgUser={this.toggleAddOrgUser}
+                toggleInviteUserDialog={this.toggleInviteUserDialog}
+              />
+              <OrgAdminList path="admins"
+                currentTab={currentTab}
+                isShowAddOrgAdminDialog={isShowAddOrgAdminDialog}
+                toggleAddOrgAdmin={this.toggleAddOrgAdmin}
+              />
             </OrgUsers>
-            <OrgGroups path={siteRoot + 'org/groupadmin'} />
-            <OrgLibraries path={siteRoot + 'org/repoadmin'} />
-            <OrgLinks path={siteRoot + 'org/publinkadmin'} />
-            <OrgDepartments path={siteRoot + 'org/departmentadmin'}>
+            <OrgGroups path={siteRoot + 'org/groupadmin'} currentTab={currentTab}/>
+            <OrgLibraries path={siteRoot + 'org/repoadmin'} currentTab={currentTab}/>
+            <OrgLinks path={siteRoot + 'org/publinkadmin'} currentTab={currentTab}/>
+            <OrgDepartments path={siteRoot + 'org/departmentadmin'} currentTab={currentTab}>
               <OrgDepartmentsList
                 path='/'
+                currentTab={currentTab}
                 isShowAddDepartDialog={this.state.isShowAddDepartDialog}
                 toggleAddDepartDialog={this.toggleAddDepartDialog}
               />
               <OrgDepartmentItem
                 path='groups/:groupID'
+                currentTab={currentTab}
                 isShowAddDepartDialog={this.state.isShowAddDepartDialog}
                 toggleAddDepartDialog={this.toggleAddDepartDialog}
                 isShowAddMemberDialog={this.state.isShowAddMemberDialog}
@@ -140,7 +148,7 @@ class Org extends React.Component {
               <OrgLogsPermAudit path={siteRoot + 'perm-audit'} currentTab={currentTab} />
             </OrgLogs>
           </Router>
-        </MainPanel>
+        </div>
       </div>
     );
   }

frontend/src/pages/org-admin/main-panel-topbar.js

@@ -0,0 +1,70 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { gettext, invitationLink } from '../../utils/constants';
+import Account from '../../components/common/account';
+
+const propTypes = {
+  currentTab: PropTypes.string,
+  toggleAddOrgUser: PropTypes.func,
+  toggleAddOrgAdmin: PropTypes.func,
+  toggleInviteUserDialog: PropTypes.func,
+  toggleAddDepartDialog: PropTypes.func,
+  toggleAddMemberDialog: PropTypes.func,
+  toggleAddRepoDialog: PropTypes.func,
+};
+
+class MainPanelTopbar extends Component {
+
+  render() {
+    const topBtn = 'btn btn-secondary operation-item';
+    const groupID = this.props.groupID;
+    return (
+      <div className="main-panel-north border-left-show">
+        <div className="cur-view-toolbar">
+          <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu"></span>
+          <div className="operation">
+            {this.props.currentTab === 'users' &&
+              <Fragment>
+                <button className={topBtn} title={gettext('Add user')} onClick={this.props.toggleAddOrgUser}>
+                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add user')}
+                </button>
+                {invitationLink &&
+                  <button className={topBtn} title={gettext('Invite user')} onClick={this.props.toggleInviteUserDialog}>
+                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite user')}</button>
+                }
+              </Fragment>
+            }
+            {this.props.currentTab === 'admins' &&
+              <button className={topBtn} title={gettext('Add admin')} onClick={this.props.toggleAddOrgAdmin}>
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
+              </button>
+            }
+            {this.props.currentTab === 'departmentadmin' && 
+              <Fragment>
+                {!groupID && <button className={topBtn} title={gettext('New Department')}
+                  onClick={this.props.toggleAddDepartDialog}>{gettext('New Department')}</button>
+                }
+                {groupID && <button className={topBtn} title={gettext('New Sub-department')}
+                  onClick={this.props.toggleAddDepartDialog}>{gettext('New Sub-department')}</button>
+                }
+                {groupID && <button className={topBtn} title={gettext('Add Member')}
+                  onClick={this.props.toggleAddMemberDialog}>{gettext('Add Member')}</button>
+                }
+                {groupID && <button className={topBtn} onClick={this.props.toggleAddRepoDialog}
+                  title={gettext('New Library')}>{gettext('New Library')}</button>
+                }
+              </Fragment>
+            }
+          </div>
+        </div>
+        <div className="common-toolbar">
+          <Account isAdminPanel={true}/>
+        </div>
+      </div>
+    );
+  }
+}
+
+MainPanelTopbar.propTypes = propTypes;
+
+export default MainPanelTopbar;

frontend/src/pages/org-admin/main-panel.js

@@ -1,76 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { gettext, invitationLink } from '../../utils/constants';
-import Account from '../../components/common/account';
-
-const groupID = window.org.pageOptions.groupID;
-const propTypes = {
-  currentTab: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired,
-  toggleAddOrgUser: PropTypes.func.isRequired,
-  toggleAddOrgAdmin: PropTypes.func.isRequired,
-  toggleInviteUserDialog: PropTypes.func.isRequired
-};
-
-class MainPanel extends Component {
-
-  toggleAddOrgUser = () => {
-    this.props.toggleAddOrgUser();
-  }
-
-  toggleAddOrgAdmin = () => {
-    this.props.toggleAddOrgAdmin();
-  }
-
-  render() {
-    const topBtn = 'btn btn-secondary operation-item';
-    return (
-      <div className="main-panel o-hidden">
-        <div className="main-panel-north border-left-show">
-          <div className="cur-view-toolbar">
-            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu"></span>
-            <div className="operation">
-              {this.props.currentTab === 'users' && (
-                <Fragment>
-                  <button className="btn btn-secondary operation-item" title={gettext('Add user')} onClick={this.toggleAddOrgUser}>
-                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add user')}
-                  </button>
-                  {invitationLink &&
-                  <button className="btn btn-secondary operation-item" title={gettext('Invite user')} onClick={this.props.toggleInviteUserDialog}>
-                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Invite user')}
-                  </button>
-                  }
-                </Fragment>
-              )}
-              {this.props.currentTab === 'admins' &&
-              <button className="btn btn-secondary operation-item" title={gettext('Add admin')} onClick={this.toggleAddOrgAdmin}>
-                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add admin')}
-              </button>
-              }
-              {this.props.currentTab === 'departmentadmin' && 
-                <Fragment>
-                  {!groupID && <button className={topBtn} title={gettext('New Department')}
-                    onClick={this.props.toggleAddDepartDialog}>{gettext('New Department')}</button>}
-                  {groupID && <button className={topBtn} title={gettext('New Sub-department')}
-                    onClick={this.props.toggleAddDepartDialog}>{gettext('New Sub-department')}</button>}
-                  {groupID && <button className={topBtn} title={gettext('Add Member')}
-                    onClick={this.props.toggleAddMemberDialog}>{gettext('Add Member')}</button>}
-                  {groupID && <button className={topBtn} onClick={this.props.toggleAddRepoDialog}
-                    title={gettext('New Library')}>{gettext('New Library')}</button>}
-                </Fragment>
-              }
-            </div>
-          </div>
-          <div className="common-toolbar">
-            <Account isAdminPanel={true}/>
-          </div>
-        </div>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-MainPanel.propTypes = propTypes;
-
-export default MainPanel;