add main panel topbar

frontend/src/pages/org-admin/org-department-item.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
@@ -11,6 +11,7 @@ import DeleteMemberDialog from '../../components/dialog/org-delete-member-dialog
 import AddRepoDialog from '../../components/dialog/org-add-repo-dialog';
 import DeleteRepoDialog from '../../components/dialog/org-delete-repo-dialog';
 import RoleEditor from '../../components/select-editor/role-editor';
+import MainPanelTopbar from './main-panel-topbar';
 import '../../css/org-department-item.css';
 
 class OrgDepartmentItem extends React.Component {
@@ -96,143 +97,152 @@ class OrgDepartmentItem extends React.Component {
     const { members, repos } = this.state;
     const groupID = this.props.groupID;
     return (
-      <div className="main-panel-center flex-row h-100">
-        <div className="cur-view-container o-auto">
-          <div className="cur-view-path">
-            <div className="fleft">
-              <h3 className="sf-heading">
-                {groupID ? 
-                  <Link to={siteRoot + 'org/departmentadmin/'}>{gettext('Departments')}</Link>
-                  : <span>{gettext('Departments')}</span>
-                }
-                {this.state.ancestorGroups.map(ancestor => {
-                  let newHref = siteRoot + 'org/departmentadmin/groups/' + ancestor.id + '/';
-                  return <span key={ancestor.id}>{' / '}<Link to={newHref}>{ancestor.name}</Link></span>;
-                })}
-                {groupID && <span>{' / '}{this.state.groupName}</span>}
-              </h3>
-            </div>
-          </div>
-
-          <div className="cur-view-subcontainer org-groups">
-            <OrgDepartmentsList
-              groupID={groupID}
-              isShowAddDepartDialog={this.props.isShowAddDepartDialog}
-              toggleAddDepartDialog={this.props.toggleAddDepartDialog}
-            />
-          </div>
-          
-          <div className="cur-view-subcontainer org-members">
+      <Fragment>
+        <MainPanelTopbar
+          currentTab={this.props.currentTab}
+          groupID={groupID}
+          toggleAddDepartDialog={this.props.toggleAddDepartDialog}
+          toggleAddMemberDialog={this.props.toggleAddMemberDialog}
+          toggleAddRepoDialog={this.props.toggleAddRepoDialog}
+        />
+        <div className="main-panel-center flex-row h-100">
+          <div className="cur-view-container o-auto">
             <div className="cur-view-path">
               <div className="fleft">
-                <h3 className="sf-heading">{gettext('Members')}</h3>
+                <h3 className="sf-heading">
+                  {groupID ? 
+                    <Link to={siteRoot + 'org/departmentadmin/'}>{gettext('Departments')}</Link>
+                    : <span>{gettext('Departments')}</span>
+                  }
+                  {this.state.ancestorGroups.map(ancestor => {
+                    let newHref = siteRoot + 'org/departmentadmin/groups/' + ancestor.id + '/';
+                    return <span key={ancestor.id}>{' / '}<Link to={newHref}>{ancestor.name}</Link></span>;
+                  })}
+                  {groupID && <span>{' / '}{this.state.groupName}</span>}
+                </h3>
               </div>
             </div>
-            <div className="cur-view-content">
-              {(members && members.length === 1 && members[0].role === 'Owner') ?
-                <p className="no-member">{gettext('No members')}</p> :
-                <table>
-                  <thead>
-                    <tr>
-                      <th width="5%"></th>
-                      <th width="50%">{gettext('Name')}</th>
-                      <th width="15%">{gettext('Role')}</th>
-                      <th width="30%"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {members.map((member, index) => {
-                      return (
-                        <React.Fragment key={index}>
-                          <MemberItem
-                            member={member}
-                            showDeleteMemberDialog={this.showDeleteMemberDialog}
-                            isItemFreezed={this.state.isItemFreezed}
-                            onMemberChanged={this.onMemberChanged}
-                            toggleItemFreezed={this.toggleItemFreezed}
-                            groupID={groupID}
-                          />
-                        </React.Fragment>
-                      );
-                    })}
-                  </tbody>
-                </table>
+
+            <div className="cur-view-subcontainer org-groups">
+              <OrgDepartmentsList
+                groupID={groupID}
+                isShowAddDepartDialog={this.props.isShowAddDepartDialog}
+                toggleAddDepartDialog={this.props.toggleAddDepartDialog}
+              />
+            </div>
+            
+            <div className="cur-view-subcontainer org-members">
+              <div className="cur-view-path">
+                <div className="fleft">
+                  <h3 className="sf-heading">{gettext('Members')}</h3>
+                </div>
+              </div>
+              <div className="cur-view-content">
+                {(members && members.length === 1 && members[0].role === 'Owner') ?
+                  <p className="no-member">{gettext('No members')}</p> :
+                  <table>
+                    <thead>
+                      <tr>
+                        <th width="5%"></th>
+                        <th width="50%">{gettext('Name')}</th>
+                        <th width="15%">{gettext('Role')}</th>
+                        <th width="30%"></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {members.map((member, index) => {
+                        return (
+                          <React.Fragment key={index}>
+                            <MemberItem
+                              member={member}
+                              showDeleteMemberDialog={this.showDeleteMemberDialog}
+                              isItemFreezed={this.state.isItemFreezed}
+                              onMemberChanged={this.onMemberChanged}
+                              toggleItemFreezed={this.toggleItemFreezed}
+                              groupID={groupID}
+                            />
+                          </React.Fragment>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                }
+              </div>
+            </div>
+
+            <div className="cur-view-subcontainer org-libriries">
+              <div className="cur-view-path">
+                <div className="fleft"><h3 className="sf-heading">{gettext('Libraries')}</h3></div>
+              </div>
+              { repos.length > 0 ?
+                <div className="cur-view-content">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th width="5%"></th>
+                        <th width="50%">{gettext('Name')}</th>
+                        <th width="30%">{gettext('Size')}</th>
+                        <th width="15%"></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {repos.map((repo, index) => {
+                        return(
+                          <React.Fragment key={index}>
+                            <RepoItem repo={repo} showDeleteRepoDialog={this.showDeleteRepoDialog}/>
+                          </React.Fragment>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                </div>
+                : <p className="no-libraty">{gettext('No libraries')}</p>
               }
             </div>
-          </div>
 
-          <div className="cur-view-subcontainer org-libriries">
-            <div className="cur-view-path">
-              <div className="fleft"><h3 className="sf-heading">{gettext('Libraries')}</h3></div>
-            </div>
-            { repos.length > 0 ?
-              <div className="cur-view-content">
-                <table>
-                  <thead>
-                    <tr>
-                      <th width="5%"></th>
-                      <th width="50%">{gettext('Name')}</th>
-                      <th width="30%">{gettext('Size')}</th>
-                      <th width="15%"></th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {repos.map((repo, index) => {
-                      return(
-                        <React.Fragment key={index}>
-                          <RepoItem repo={repo} showDeleteRepoDialog={this.showDeleteRepoDialog}/>
-                        </React.Fragment>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-              : <p className="no-libraty">{gettext('No libraries')}</p>
-            }
           </div>
-
+          <React.Fragment>
+            {this.state.showDeleteMemberDialog && (
+              <ModalPortal>
+                <DeleteMemberDialog
+                  toggle={this.toggleCancel}
+                  onMemberChanged={this.onMemberChanged}
+                  member={this.state.deletedMember}
+                  groupID={groupID}
+                />
+              </ModalPortal>
+            )}
+            {this.state.showDeleteRepoDialog && (
+              <ModalPortal>
+                <DeleteRepoDialog
+                  toggle={this.toggleCancel}
+                  onRepoChanged={this.onRepoChanged}
+                  repo={this.state.deletedRepo}
+                  groupID={groupID}
+                />
+              </ModalPortal>
+            )}
+            {this.props.isShowAddMemberDialog && (
+              <ModalPortal>
+                <AddMemberDialog
+                  toggle={this.props.toggleAddMemberDialog}
+                  onMemberChanged={this.onMemberChanged}
+                  groupID={groupID}
+                />
+              </ModalPortal>
+            )}
+            {this.props.isShowAddRepoDialog && (
+              <ModalPortal>
+                <AddRepoDialog
+                  toggle={this.props.toggleAddRepoDialog}
+                  onRepoChanged={this.onRepoChanged}
+                  groupID={groupID}
+                />
+              </ModalPortal>
+            )}
+          </React.Fragment>
         </div>
-        <React.Fragment>
-          {this.state.showDeleteMemberDialog && (
-            <ModalPortal>
-              <DeleteMemberDialog
-                toggle={this.toggleCancel}
-                onMemberChanged={this.onMemberChanged}
-                member={this.state.deletedMember}
-                groupID={groupID}
-              />
-            </ModalPortal>
-          )}
-          {this.state.showDeleteRepoDialog && (
-            <ModalPortal>
-              <DeleteRepoDialog
-                toggle={this.toggleCancel}
-                onRepoChanged={this.onRepoChanged}
-                repo={this.state.deletedRepo}
-                groupID={groupID}
-              />
-            </ModalPortal>
-          )}
-          {this.props.isShowAddMemberDialog && (
-            <ModalPortal>
-              <AddMemberDialog
-                toggle={this.props.toggleAddMemberDialog}
-                onMemberChanged={this.onMemberChanged}
-                groupID={groupID}
-              />
-            </ModalPortal>
-          )}
-          {this.props.isShowAddRepoDialog && (
-            <ModalPortal>
-              <AddRepoDialog
-                toggle={this.props.toggleAddRepoDialog}
-                onRepoChanged={this.onRepoChanged}
-                groupID={groupID}
-              />
-            </ModalPortal>
-          )}
-        </React.Fragment>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/pages/org-admin/org-departments-list.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Link } from '@reach/router';
@@ -9,6 +9,7 @@ import ModalPortal from '../../components/modal-portal';
 import AddDepartDialog from '../../components/dialog/org-add-department-dialog';
 import DeleteDepartDialog from '../../components/dialog/org-delete-department-dialog';
 import SetGroupQuotaDialog from '../../components/dialog/org-set-group-quota-dialog';
+import MainPanelTopbar from './main-panel-topbar';
 import '../../css/org-department-item.css';
 
 moment.locale(lang);
@@ -73,73 +74,84 @@ class OrgDepartmentsList extends React.Component {
     let header = isSub ? gettext('Sub-departments') : gettext('Departments');
     let noGroup = isSub ? gettext('No sub-departments') : gettext('No departments');
     return (
-      <div className="main-panel-center flex-row h-100">
-        <div className="cur-view-container o-auto">
-          <div className="cur-view-path">
-            <div className="fleft"><h3 className="sf-heading">{header}</h3></div>
+      <Fragment>
+        {!isSub &&
+          <MainPanelTopbar
+            currentTab={this.props.currentTab}
+            groupID={this.props.groupID}
+            toggleAddDepartDialog={this.props.toggleAddDepartDialog}
+            toggleAddMemberDialog={this.props.toggleAddMemberDialog}
+            toggleAddRepoDialog={this.props.toggleAddRepoDialog}
+          />
+        }
+        <div className="main-panel-center flex-row h-100">
+          <div className="cur-view-container o-auto">
+            <div className="cur-view-path">
+              <div className="fleft"><h3 className="sf-heading">{header}</h3></div>
+            </div>
+            <div className="cur-view-content">
+              {groups && groups.length > 0 ?
+                <table>
+                  <thead>
+                    <tr>
+                      <th width="40%">{gettext('Name')}</th>
+                      <th width="25%">{gettext('Created At')}</th>
+                      <th width="20%">{gettext('Quota')}</th>
+                      <th width="15%"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {groups.map((group, index) => {
+                      return(
+                        <React.Fragment key={group.id}>
+                          <GroupItem
+                            group={group}
+                            showDeleteDepartDialog={this.showDeleteDepartDialog}
+                            showSetGroupQuotaDialog={this.showSetGroupQuotaDialog}
+                          />
+                        </React.Fragment>
+                      );
+                    })}
+                  </tbody>
+                </table>
+                : 
+                <p className="no-group">{noGroup}</p>
+              }
+            </div>
+            <React.Fragment>
+              {this.props.isShowAddDepartDialog && (
+                <ModalPortal>
+                  <AddDepartDialog
+                    onDepartChanged={this.onDepartChanged}
+                    parentGroupID={this.props.groupID}
+                    groupID={this.state.groupID}
+                    toggle={this.props.toggleAddDepartDialog}
+                  />
+                </ModalPortal>
+              )}
+              {this.state.showDeleteDepartDialog && (
+                <ModalPortal>
+                  <DeleteDepartDialog
+                    toggle={this.toggleCancel}
+                    groupID={this.state.groupID}
+                    groupName={this.state.groupName}
+                    onDepartChanged={this.onDepartChanged}
+                  />
+                </ModalPortal>
+              )}
+              {this.state.showSetGroupQuotaDialog && (
+                <ModalPortal>
+                  <SetGroupQuotaDialog
+                    toggle={this.toggleCancel}
+                    groupID={this.state.groupID}
+                    onDepartChanged={this.onDepartChanged}
+                  />
+                </ModalPortal>
+              )}
+            </React.Fragment>
           </div>
-          <div className="cur-view-content">
-            {groups && groups.length > 0 ?
-              <table>
-                <thead>
-                  <tr>
-                    <th width="40%">{gettext('Name')}</th>
-                    <th width="25%">{gettext('Created At')}</th>
-                    <th width="20%">{gettext('Quota')}</th>
-                    <th width="15%"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {groups.map((group, index) => {
-                    return(
-                      <React.Fragment key={group.id}>
-                        <GroupItem
-                          group={group}
-                          showDeleteDepartDialog={this.showDeleteDepartDialog}
-                          showSetGroupQuotaDialog={this.showSetGroupQuotaDialog}
-                        />
-                      </React.Fragment>
-                    );
-                  })}
-                </tbody>
-              </table>
-              : 
-              <p className="no-group">{noGroup}</p>
-            }
-          </div>
-          <React.Fragment>
-            {this.props.isShowAddDepartDialog && (
-              <ModalPortal>
-                <AddDepartDialog
-                  onDepartChanged={this.onDepartChanged}
-                  parentGroupID={this.props.groupID}
-                  groupID={this.state.groupID}
-                  toggle={this.props.toggleAddDepartDialog}
-                />
-              </ModalPortal>
-            )}
-            {this.state.showDeleteDepartDialog && (
-              <ModalPortal>
-                <DeleteDepartDialog
-                  toggle={this.toggleCancel}
-                  groupID={this.state.groupID}
-                  groupName={this.state.groupName}
-                  onDepartChanged={this.onDepartChanged}
-                />
-              </ModalPortal>
-            )}
-            {this.state.showSetGroupQuotaDialog && (
-              <ModalPortal>
-                <SetGroupQuotaDialog
-                  toggle={this.toggleCancel}
-                  groupID={this.state.groupID}
-                  onDepartChanged={this.onDepartChanged}
-                />
-              </ModalPortal>
-            )}
-          </React.Fragment>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

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

@@ -1,9 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-
 import OrgGroupInfo from '../../models/org-group';
 import Toast from '../../components/toast';
-
+import MainPanelTopbar from './main-panel-topbar';
 import { seafileAPI } from '../../utils/seafile-api';
 import { siteRoot, gettext, orgID } from '../../utils/constants';
 
@@ -73,43 +72,46 @@ class OrgGroups extends Component {
   render() {
     let groups = this.state.orgGroups;
     return (
-      <div className="main-panel-center flex-row">
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext('All Groups')}</h3>
-          </div>
-          <div className="cur-view-content">
-            <table>
-              <thead>
-                <tr>
-                  <th width="30%">{gettext('Name')}</th>
-                  <th width="35%">{gettext('Creator')}</th>
-                  <th width="23%">{gettext('Created At')}</th>
-                  <th width="12%" className="text-center">{gettext('Operations')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {groups.map(item => {
-                  return (
-                    <GroupItem
-                      key={item.id}
-                      group={item}
-                      isItemFreezed={this.state.isItemFreezed}
-                      onFreezedItem={this.onFreezedItem} 
-                      onUnfreezedItem={this.onUnfreezedItem}
-                      deleteGroupItem={this.deleteGroupItem}
-                    />
-                )})}
-              </tbody>
-            </table>
-            <div className="paginator">
-              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
-              {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
-              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+      <Fragment>
+        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('All Groups')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <table>
+                <thead>
+                  <tr>
+                    <th width="30%">{gettext('Name')}</th>
+                    <th width="35%">{gettext('Creator')}</th>
+                    <th width="23%">{gettext('Created At')}</th>
+                    <th width="12%" className="text-center">{gettext('Operations')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {groups.map(item => {
+                    return (
+                      <GroupItem
+                        key={item.id}
+                        group={item}
+                        isItemFreezed={this.state.isItemFreezed}
+                        onFreezedItem={this.onFreezedItem} 
+                        onUnfreezedItem={this.onUnfreezedItem}
+                        deleteGroupItem={this.deleteGroupItem}
+                      />
+                  )})}
+                </tbody>
+              </table>
+              <div className="paginator">
+                {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+                {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
+                {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

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

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, orgMemberQuotaEnabled} from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import MainPanelTopbar from './main-panel-topbar';
 
 class OrgInfo extends Component {
 
@@ -30,25 +31,28 @@ class OrgInfo extends Component {
 
   render() {
     return (
-      <div className="main-panel-center flex-row">
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext('Info')}</h3>
-          </div>
-          <div className="cur-view-content">
-            <dl>
-              <dt>{gettext('Space Used')}</dt>
+      <Fragment>
+        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('Info')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <dl>
+                <dt>{gettext('Space Used')}</dt>
 
-              {(this.state.storage_quota > 0) ? <dd>{Utils.bytesToSize(this.state.storage_usage)} / {Utils.bytesToSize(this.state.storage_quota)}</dd> : <dd>{Utils.bytesToSize(this.state.storage_usage)}</dd>}
+                {(this.state.storage_quota > 0) ? <dd>{Utils.bytesToSize(this.state.storage_usage)} / {Utils.bytesToSize(this.state.storage_quota)}</dd> : <dd>{Utils.bytesToSize(this.state.storage_usage)}</dd>}
 
-              {orgMemberQuotaEnabled ? <dt>{gettext('Active Users')} / {gettext('Total Users')} / {gettext('Limits')}</dt> : <dt>{gettext('Active Users')} / {gettext('Total Users')}</dt>}
+                {orgMemberQuotaEnabled ? <dt>{gettext('Active Users')} / {gettext('Total Users')} / {gettext('Limits')}</dt> : <dt>{gettext('Active Users')} / {gettext('Total Users')}</dt>}
 
-              {orgMemberQuotaEnabled ? <dd>{(this.state.active_members > 0) ? this.state.active_members : '--'} / {(this.state.member_usage > 0) ? this.state.member_usage : '--'} / {(this.state.member_quota > 0) ? this.state.member_quota : '--'}</dd> : <dd>{this.state.active_members > 0 ? this.state.active_members : '--'} / {this.state.member_usage > 0 ? this.state.member_usage : '--'}</dd>}
+                {orgMemberQuotaEnabled ? <dd>{(this.state.active_members > 0) ? this.state.active_members : '--'} / {(this.state.member_usage > 0) ? this.state.member_usage : '--'} / {(this.state.member_quota > 0) ? this.state.member_quota : '--'}</dd> : <dd>{this.state.active_members > 0 ? this.state.active_members : '--'} / {this.state.member_usage > 0 ? this.state.member_usage : '--'}</dd>}
 
-            </dl>
+              </dl>
+            </div>
           </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

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

@@ -1,7 +1,7 @@
 import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-
+import MainPanelTopbar from './main-panel-topbar';
 import OrgAdminRepo from '../../models/org-admin-repo';
 import toaster from '../../components/toast';
 import TransferDialog from '../../components/dialog/transfer-dialog';
@@ -87,46 +87,49 @@ class OrgLibraries extends Component {
   render() {
     let repos = this.state.orgRepos;
     return (
-      <div className="main-panel-center flex-row">
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext('All Libraries')}</h3>
-          </div>
-          <div className="cur-view-content">
-            <table>
-              <thead>
-                <tr>
-                  <th width="4%"></th>
-                  <th width="31%">{gettext('Name')}</th>
-                  <th width="26%">ID</th>
-                  <th width="24%">{gettext('Owner')}</th>
-                  <th width="15%" className="text-center">{gettext('Operations')}</th>
-                </tr>
-              </thead>
-              <tbody>
-                {repos.map(item => {
-                  return (
-                    <RepoItem
-                      key={item.repoID}
-                      repo={item}
-                      isItemFreezed={this.state.isItemFreezed}
-                      onFreezedItem={this.onFreezedItem} 
-                      onUnfreezedItem={this.onUnfreezedItem}
-                      deleteRepoItem={this.deleteRepoItem}
-                      transferRepoItem={this.transferRepoItem}
-                    />
-                  );}
-                )}
-              </tbody>
-            </table>
-            <div className="paginator">
-              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
-              {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
-              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+      <Fragment>
+        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('All Libraries')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <table>
+                <thead>
+                  <tr>
+                    <th width="4%"></th>
+                    <th width="31%">{gettext('Name')}</th>
+                    <th width="26%">ID</th>
+                    <th width="24%">{gettext('Owner')}</th>
+                    <th width="15%" className="text-center">{gettext('Operations')}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {repos.map(item => {
+                    return (
+                      <RepoItem
+                        key={item.repoID}
+                        repo={item}
+                        isItemFreezed={this.state.isItemFreezed}
+                        onFreezedItem={this.onFreezedItem} 
+                        onUnfreezedItem={this.onUnfreezedItem}
+                        deleteRepoItem={this.deleteRepoItem}
+                        transferRepoItem={this.transferRepoItem}
+                      />
+                    );}
+                  )}
+                </tbody>
+              </table>
+              <div className="paginator">
+                {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+                {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
+                {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { seafileAPI } from '../../utils/seafile-api';
 import { siteRoot, gettext } from '../../utils/constants';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import MainPanelTopbar from './main-panel-topbar';
 
 class OrgLinks extends React.Component {
 
@@ -62,46 +63,49 @@ class OrgLinks extends React.Component {
   render() {
     const linkList = this.state.linkList;
     return (
-      <div className="main-panel-center flex-row">
-        <div className="cur-view-container">
-          <div className="cur-view-path">
-            <h3 className="sf-heading">{gettext('All Public Links')}</h3>
-          </div>
-          <div className="cur-view-content">
-            <table>
-              <thead>
-                <tr>
-                  <th width="50%">{gettext('Name')}</th>
-                  <th width="15%">{gettext('Owner')}</th>
-                  <th width="15%">{gettext('Created At')}</th>
-                  <th width="10%">{gettext('Count')}</th>
-                  <th width="10%"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {linkList && linkList.map((item, index) => {
-                  return(
-                    <React.Fragment key={index}>
-                      <RepoItem
-                        link={item}
-                        isItemFreezed={this.state.isItemFreezed}
-                        onFreezedItem={this.onFreezedItem} 
-                        onUnfreezedItem={this.onUnfreezedItem}
-                        deleteOrgLink={this.deleteOrgLink}
-                      />
-                    </React.Fragment>
-                  );
-                })}
-              </tbody>
-            </table>
-            <div className="paginator">
-              {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
-              {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
-              {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+      <Fragment>
+        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext('All Public Links')}</h3>
+            </div>
+            <div className="cur-view-content">
+              <table>
+                <thead>
+                  <tr>
+                    <th width="50%">{gettext('Name')}</th>
+                    <th width="15%">{gettext('Owner')}</th>
+                    <th width="15%">{gettext('Created At')}</th>
+                    <th width="10%">{gettext('Count')}</th>
+                    <th width="10%"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {linkList && linkList.map((item, index) => {
+                    return(
+                      <React.Fragment key={index}>
+                        <RepoItem
+                          link={item}
+                          isItemFreezed={this.state.isItemFreezed}
+                          onFreezedItem={this.onFreezedItem} 
+                          onUnfreezedItem={this.onUnfreezedItem}
+                          deleteOrgLink={this.deleteOrgLink}
+                        />
+                      </React.Fragment>
+                    );
+                  })}
+                </tbody>
+              </table>
+              <div className="paginator">
+                {this.state.page != 1 && <a href="#" onClick={(e) => this.onChangePageNum(e, -1)}>{gettext('Previous')}</a>}
+                {(this.state.page != 1 && this.state.pageNext) && <span> | </span>}
+                {this.state.pageNext && <a href="#" onClick={(e) => this.onChangePageNum(e, 1)}>{gettext('Next')}</a>}
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

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

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
+import MainPanelTopbar from './main-panel-topbar';
 
 class OrgLogs extends Component {
 
@@ -14,24 +15,27 @@ class OrgLogs extends Component {
 
   render() {
     return (
-      <div className="main-panel-center flex-row">
-        <div className="cur-view-container">
-          <div className="cur-view-path org-user-nav">
-            <ul className="nav">
-              <li className="nav-item" onClick={() => this.tabItemClick('logadmin')}>
-                <Link className={`nav-link ${this.props.currentTab === 'logadmin' ? 'active': ''}`} to={siteRoot + 'org/logadmin/'} title={gettext('File Access')}>{gettext('File Access')}</Link>
-              </li>
-              <li className="nav-item" onClick={() => this.tabItemClick('file-update')}>
-                <Link className={`nav-link ${this.props.currentTab === 'file-update' ? 'active': ''}`} to={siteRoot + 'org/logadmin/file-update/'} title={gettext('File Update')}>{gettext('File Update')}</Link>
-              </li>
-              <li className="nav-item" onClick={() => this.tabItemClick('perm-audit')}>
-                <Link className={`nav-link ${this.props.currentTab === 'perm-audit' ? 'active': ''}`} to={siteRoot + 'org/logadmin/perm-audit/'} title={gettext('Permission')}>{gettext('Permission')}</Link>
-              </li>
-            </ul>
+      <Fragment>
+        <MainPanelTopbar currentTab={this.props.currentTab}/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path org-user-nav">
+              <ul className="nav">
+                <li className="nav-item" onClick={() => this.tabItemClick('logadmin')}>
+                  <Link className={`nav-link ${this.props.currentTab === 'logadmin' ? 'active': ''}`} to={siteRoot + 'org/logadmin/'} title={gettext('File Access')}>{gettext('File Access')}</Link>
+                </li>
+                <li className="nav-item" onClick={() => this.tabItemClick('file-update')}>
+                  <Link className={`nav-link ${this.props.currentTab === 'file-update' ? 'active': ''}`} to={siteRoot + 'org/logadmin/file-update/'} title={gettext('File Update')}>{gettext('File Update')}</Link>
+                </li>
+                <li className="nav-item" onClick={() => this.tabItemClick('perm-audit')}>
+                  <Link className={`nav-link ${this.props.currentTab === 'perm-audit' ? 'active': ''}`} to={siteRoot + 'org/logadmin/perm-audit/'} title={gettext('Permission')}>{gettext('Permission')}</Link>
+                </li>
+              </ul>
+            </div>
+            {this.props.children}
           </div>
-          {this.props.children}
         </div>
-      </div>
+      </Fragment>
     );
   }
 }

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

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
+import MainPanelTopbar from './main-panel-topbar';
 
 class OrgUsers extends Component {
 
@@ -14,21 +15,29 @@ class OrgUsers extends Component {
 
   render() {
     return (
-      <div className="main-panel-center flex-row">
-        <div className="cur-view-container">
-          <div className="cur-view-path org-user-nav">
-            <ul className="nav">
-              <li className="nav-item" onClick={() => this.tabItemClick('users')}>
-                <Link className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`} to={siteRoot + 'org/useradmin/'} title={gettext('All')}>{gettext('All')}</Link>
-              </li>
-              <li className="nav-item" onClick={() => this.tabItemClick('admins')}>
-                <Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + 'org/useradmin/admins/'} title={gettext('Admin')}>{gettext('Admin')}</Link>
-              </li>
-            </ul>
+      <Fragment>
+        <MainPanelTopbar
+          currentTab={this.props.currentTab}
+          toggleAddOrgUser={this.props.toggleAddOrgUser}
+          toggleInviteUserDialog={this.props.toggleInviteUserDialog}
+          toggleAddOrgAdmin={this.props.toggleAddOrgAdmin}
+        />
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <div className="cur-view-path org-user-nav">
+              <ul className="nav">
+                <li className="nav-item" onClick={() => this.tabItemClick('users')}>
+                  <Link className={`nav-link ${this.props.currentTab === 'users' ? 'active': ''}`} to={siteRoot + 'org/useradmin/'} title={gettext('All')}>{gettext('All')}</Link>
+                </li>
+                <li className="nav-item" onClick={() => this.tabItemClick('admins')}>
+                  <Link className={`nav-link ${this.props.currentTab === 'admins' ? 'active': ''}`} to={siteRoot + 'org/useradmin/admins/'} title={gettext('Admin')}>{gettext('Admin')}</Link>
+                </li>
+              </ul>
+            </div>
+            {this.props.children}
           </div>
-          {this.props.children}
         </div>
-      </div>
+      </Fragment>
     );
   }
 }