new org admin info page (#3123)

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

@@ -10,6 +10,7 @@ import OrgUsersList from './org-users-list';
 import OrgAdminList from './org-admin-list';
 import OrgGroups from './org-groups';
 import OrgLibraries from './org-libraries';
+import OrgInfo from './org-info';
 
 import '../../assets/css/fa-solid.css';
 import '../../assets/css/fa-regular.css';
@@ -66,6 +67,7 @@ class Org extends React.Component {
         <SidePanel isSidePanelClosed={isSidePanelClosed} onCloseSidePanel={this.onCloseSidePanel} currentTab={currentTab} tabItemClick={this.tabItemClick} />
         <MainPanel currentTab={currentTab} toggleAddOrgAdmin={this.toggleAddOrgAdmin} toggleAddOrgUser={this.toggleAddOrgUser} toggleInviteUserDialog={this.toggleInviteUserDialog}>
           <Router>
+            <OrgInfo path={siteRoot + 'org/orgmanage'} />
             <OrgUsers 
               path={siteRoot + 'org/useradmin'}
               currentTab={currentTab} 

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

@@ -0,0 +1,57 @@
+import React, { Fragment, Component } from 'react';
+
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, orgID, orgMemberQuotaEnabled} from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+
+class OrgInfo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      storage_quota: 0,
+      storage_usage: 0,
+      member_quota: 0,
+      member_usage: 0,
+      active_members: 0
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.orgAdminGetOrgInfo().then(res => {
+      this.setState({
+        storage_quota: res.data.storage_quota,
+        storage_usage: res.data.storage_usage,
+        member_quota: res.data.member_quota,
+        member_usage: res.data.member_usage,
+        active_members: res.data.active_members
+      });
+    });
+  }
+
+  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>
+
+              {(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 ? <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>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default OrgInfo;

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

@@ -33,10 +33,10 @@ class SidePanel extends React.Component {
               <h3 className="sf-heading" style={{ 'color': '#f7941d' }}>{gettext('Admin')}</h3>
               <ul className="nav nav-pills flex-column nav-container">
                 <li className="nav-item">
-                  <a className='nav-link ellipsis' href={siteRoot + 'org/orgmanage/'}>
-                    <span className="sf2-icon-monitor" aria-hidden="true"></span>
+                  <Link className={`nav-link ellipsis ${this.getActiveClass('orginfo')}`} to={siteRoot + 'org/orgmanage/'} onClick={() => this.tabItemClick('orginfo')} >
+                    <span className="sf2-icon-library"></span>
                     <span className="nav-text">{gettext('Info')}</span>
-                  </a>
+                  </Link>
                 </li>
                 <li className="nav-item">
                   <Link className={`nav-link ellipsis ${this.getActiveClass('repoadmin')}`} to={siteRoot + 'org/repoadmin/'} onClick={() => this.tabItemClick('repoadmin')} >

frontend/src/utils/constants.js

@@ -76,6 +76,7 @@ export const originFileExists = window.draft ? window.draft.config.originFileExi
 // org admin
 export const orgID = window.org ? window.org.pageOptions.orgID : '';
 export const invitationLink = window.org ? window.org.pageOptions.invitationLink : '';
+export const orgMemberQuotaEnabled = window.org ? window.org.pageOptions.orgMemberQuotaEnabled : '';
 
 // sys admin
 export const constanceEnabled = window.sysadmin ? window.sysadmin.pageOptions.constance_enabled : '';

media/css/seahub_react.css

@@ -103,6 +103,9 @@
 
 /* common class and element style*/
 body { overflow-y: auto; }
+dl { margin:1.5em 0; }
+dt { color:#666; margin:24px 0 2px; font-weight:normal; }
+dd { margin-bottom:.8em; color:#222; }
 a { color:#eb8205; }
 a:hover { color:#eb8205; }
 .vam { vertical-align:middle; }