[org admin] user: rewrote it with react (#3936)

frontend/src/components/dialog/set-org-user-contact-email.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  contactEmail: PropTypes.string.isRequired,
+  updateContactEmail: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserContactEmail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.contactEmail,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const contactEmail = this.state.inputValue.trim();
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    seafileAPI.setOrgUserContactEmail(orgID, email, contactEmail).then((res) => {
+      const newContactEmail = contactEmail ? res.data.contact_email : '';
+      this.props.updateContactEmail(newContactEmail);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user contact email')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserContactEmail.propTypes = propTypes;
+
+export default SetOrgUserContactEmail;

frontend/src/components/dialog/set-org-user-name.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  updateName: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserName extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: this.props.name,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const name = this.state.inputValue.trim();
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    // when name is '', api returns the previous name
+    // but newName needs to be ''
+    seafileAPI.setOrgUserName(orgID, email, name).then((res) => {
+      const newName = name ? res.data.name : '';
+      this.props.updateName(newName);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user name')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserName.propTypes = propTypes;
+
+export default SetOrgUserName;

frontend/src/components/dialog/set-org-user-quota.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; 
+import { gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  orgID: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  quotaTotal: PropTypes.string.isRequired,
+  updateQuota: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class SetOrgUserQuota extends React.Component {
+
+  constructor(props) {
+    super(props);
+    const initialQuota = this.props.quotaTotal < 0 ? '' :
+      this.props.quotaTotal / (1000 * 1000);
+    this.state = {
+      inputValue: initialQuota,
+      submitBtnDisabled: false
+    };
+  }
+
+  handleInputChange = (e) => {
+    this.setState({
+      inputValue: e.target.value 
+    });
+  }
+
+  formSubmit = () => {
+    const { orgID, email } = this.props;
+    const quota = this.state.inputValue.trim();
+
+    if (!quota) {
+      this.setState({
+        formErrorMsg: gettext('It is required.')
+      });
+      return false;
+    }
+
+    this.setState({
+      submitBtnDisabled: true 
+    });
+
+    seafileAPI.setOrgUserQuota(orgID, email, quota).then((res) => {
+      this.props.updateQuota(res.data.quota_total);
+      this.props.toggleDialog();
+    }).catch((error) => {
+      let errorMsg = Utils.getErrorMsg(error);
+      this.setState({
+        formErrorMsg: errorMsg,
+        submitBtnDisabled: false
+      }); 
+    });
+  }
+
+  render() {
+    const { inputValue, formErrorMsg, submitBtnDisabled } = this.state;
+    return (
+      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.toggleDialog}>{gettext('Set user quota')}</ModalHeader>
+        <ModalBody>
+          <React.Fragment>
+            <InputGroup>
+              <input type="text" className="form-control" value={inputValue} onChange={this.handleInputChange} />
+              <InputGroupAddon addonType="append">
+                <InputGroupText>MB</InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+            <p className="small text-secondary mt-2 mb-2">{gettext('Tip: 0 means default limit')}</p>
+            {formErrorMsg && <p className="error m-0 mt-2">{formErrorMsg}</p>}
+          </React.Fragment>
+        </ModalBody>
+        <ModalFooter>
+          <button className="btn btn-secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</button>
+          <button className="btn btn-primary" disabled={submitBtnDisabled} onClick={this.formSubmit}>{gettext('Submit')}</button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+
+SetOrgUserQuota.propTypes = propTypes;
+
+export default SetOrgUserQuota;

frontend/src/components/org-admin-user-nav.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { siteRoot, gettext } from '../utils/constants'; 
+
+const propTypes = {
+  email: PropTypes.string.isRequired,
+  currentItem: PropTypes.string.isRequired
+};
+
+class OrgAdminUserNav extends React.Component {
+
+  render() {
+    const { email, currentItem } = this.props;
+    const urlBase = `${siteRoot}org/useradmin/info/${encodeURIComponent(email)}/`;
+    return (
+      <div className="cur-view-path org-admin-user-nav">
+        <ul className="nav">
+          <li className="nav-item">
+            <Link to={urlBase} className={`nav-link${currentItem == 'profile' ? ' active' : ''}`}>{gettext('Profile')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}repos/`} className={`nav-link${currentItem == 'owned-repos' ? ' active' : ''}`}>{gettext('Owned Libraries')}</Link>
+          </li>
+          <li className="nav-item">
+            <Link to={`${urlBase}shared-repos/`} className={`nav-link${currentItem == 'shared-repos' ? ' active' : ''}`}>{gettext('Shared Libraries')}</Link>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+OrgAdminUserNav.propTypes = propTypes;
+
+export default OrgAdminUserNav;

frontend/src/css/org-admin-user.css

@@ -0,0 +1,3 @@
+.cur-view-path.org-admin-user-nav {
+  padding: 0 16px 1px;
+}

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

@@ -5,6 +5,9 @@ import { Router } from '@reach/router';
 import { siteRoot } from '../../utils/constants';
 import SidePanel from './side-panel';
 import OrgUsers from './org-users';
+import OrgUserProfile from './org-user-profile';
+import OrgUserRepos from './org-user-repos';
+import OrgUserSharedRepos from './org-user-shared-repos';
 import OrgGroups from './org-groups';
 import OrgLibraries from './org-libraries';
 import OrgInfo from './org-info';
@@ -61,6 +64,9 @@ class Org extends React.Component {
           <Router className="reach-router">
             <OrgInfo path={siteRoot + 'org/orgmanage'}/>
             <OrgUsers path={siteRoot + 'org/useradmin'} currentTab={currentTab} tabItemClick={this.tabItemClick}/>
+            <OrgUserProfile path={siteRoot + 'org/useradmin/info/:email/'} />
+            <OrgUserRepos path={siteRoot + 'org/useradmin/info/:email/repos/'} />
+            <OrgUserSharedRepos path={siteRoot + 'org/useradmin/info/:email/shared-repos/'} />
             <OrgGroups path={siteRoot + 'org/groupadmin'}/>
             <OrgLibraries path={siteRoot + 'org/repoadmin'}/>
             <OrgLinks path={siteRoot + 'org/publinkadmin'}/>

frontend/src/pages/org-admin/org-user-profile.js

@@ -0,0 +1,202 @@
+import React, { Component, Fragment } from 'react';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import OrgAdminUserNav from '../../components/org-admin-user-nav';
+import SetOrgUserName from '../../components/dialog/set-org-user-name';
+import SetOrgUserContactEmail from '../../components/dialog/set-org-user-contact-email';
+import SetOrgUserQuota from '../../components/dialog/set-org-user-quota';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID, orgName } = window.org.pageOptions;
+
+class OrgUserProfile extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getOrgUserInfo(orgID, this.props.email).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  updateName = (name) => {
+    this.setState({
+      name: name 
+    });
+  }
+
+  updateContactEmail = (contactEmail) => {
+    this.setState({
+      contact_email: contactEmail 
+    });
+  }
+
+  updateQuota = (quota) => {
+    this.setState({
+      quota_total: quota 
+    });
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminUserNav email={this.props.email} currentItem='profile' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+                updateName={this.updateName}
+                updateContactEmail={this.updateContactEmail}
+                updateQuota={this.updateQuota}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSetNameDialogOpen: false,
+      isSetContactEmailDialogOpen: false,
+      isSetQuotaDialogOpen: false
+    };
+  }
+
+  toggleSetNameDialog = () => {
+    this.setState({
+      isSetNameDialogOpen: !this.state.isSetNameDialogOpen
+    });
+  }
+
+  toggleSetContactEmailDialog = () => {
+    this.setState({
+      isSetContactEmailDialogOpen: !this.state.isSetContactEmailDialogOpen
+    });
+  }
+
+  toggleSetQuotaDialog = () => {
+    this.setState({
+      isSetQuotaDialogOpen: !this.state.isSetQuotaDialogOpen
+    });
+  }
+
+  render() {
+    const {
+      loading, errorMsg,
+      avatar_url, email, contact_email,
+      name, quota_total, quota_usage
+    } = this.props.data;
+    const { isSetNameDialogOpen, isSetContactEmailDialogOpen, isSetQuotaDialogOpen } = this.state;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <dl>
+          <dt>{gettext('Avatar')}</dt>
+          <dd>
+            <img src={avatar_url} width="48" height="48" className="rounded" alt="" />
+          </dd>
+
+          <dt>ID</dt>
+          <dd>{email}</dd>
+
+          <dt>{gettext('Name')}</dt>
+          <dd>
+            {name || '--'}
+            <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetNameDialog}></span>
+          </dd>
+
+          <dt>{gettext('Contact Email')}</dt>
+          <dd>
+            {contact_email || '--'}
+            <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetContactEmailDialog}></span>
+          </dd>
+
+          <dt>{gettext('Organization')}</dt>
+          <dd>{orgName}</dd>
+
+          <dt>{gettext('Space Used / Quota')}</dt>
+          <dd>
+            {`${Utils.bytesToSize(quota_usage)}${quota_total > 0 ? ' / ' + Utils.bytesToSize(quota_total) : ''}`}
+            <span title={gettext('Edit')} className="attr-action-icon fa fa-pencil-alt" onClick={this.toggleSetQuotaDialog}></span>
+          </dd>
+        </dl>
+        {isSetNameDialogOpen && 
+        <SetOrgUserName
+          orgID={orgID}
+          email={email}
+          name={name}
+          updateName={this.props.updateName}
+          toggleDialog={this.toggleSetNameDialog}
+        />
+        }
+        {isSetContactEmailDialogOpen && 
+        <SetOrgUserContactEmail
+          orgID={orgID}
+          email={email}
+          contactEmail={contact_email}
+          updateContactEmail={this.props.updateContactEmail}
+          toggleDialog={this.toggleSetContactEmailDialog}
+        />
+        }
+        {isSetQuotaDialogOpen && 
+        <SetOrgUserQuota
+          orgID={orgID}
+          email={email}
+          quotaTotal={quota_total}
+          updateQuota={this.props.updateQuota}
+          toggleDialog={this.toggleSetQuotaDialog}
+        />
+        }
+      </Fragment>
+    ); 
+  }
+}
+
+export default OrgUserProfile;

frontend/src/pages/org-admin/org-user-repos.js

@@ -0,0 +1,195 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import toaster from '../../components/toast';
+import OrgAdminUserNav from '../../components/org-admin-user-nav';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgUserOwnedRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getOrgUserOwnedRepos(orgID, this.props.email).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminUserNav email={this.props.email} currentItem='owned-repos' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, repo_list
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              <th width="4%">{/*icon*/}</th>
+              <th width="35%">{gettext('Name')}</th>
+              <th width="16%">{gettext('Size')}</th>
+              <th width="25%">{gettext('Last Update')}</th>
+              <th width="20%"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {repo_list.map((item, index) => {
+              return <Item key={index} data={item} />;
+            })}
+          </tbody>
+        </table>
+      </Fragment>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpIconShown: false,
+      deleted: false,
+      isDeleteRepoDialogOpen: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({
+      isOpIconShown: true
+    }); 
+  }
+
+  handleMouseOut = () => {
+    this.setState({
+      isOpIconShown: false
+    });
+  }
+
+  handleDeleteIconClick = (e) => {
+    e.preventDefault();
+    this.toggleDeleteRepoDialog();
+  }
+
+  toggleDeleteRepoDialog = () => {
+    this.setState({
+      isDeleteRepoDialogOpen: !this.state.isDeleteRepoDialogOpen
+    });
+  }
+
+  deleteRepo = () => {
+    const repo = this.props.data;
+    seafileAPI.deleteOrgRepo(orgID, repo.repo_id).then((res) => {
+      this.setState({
+        deleted: true
+      });
+      const msg = gettext('Successfully deleted {name}.').replace('{name}', repo.repo_name);
+      toaster.success(msg);
+    }).catch((error) => {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+    });
+  }
+
+  render() {
+    const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
+    const repo = this.props.data; 
+
+    if (deleted) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td>
+            <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" /> 
+          </td>
+          <td>{repo.repo_name}</td>
+          <td>{Utils.bytesToSize(repo.size)}</td>
+          <td title={moment(repo.last_modified).format('LLLL')}>{moment(repo.last_modified).format('YYYY-MM-DD')}</td>
+          <td>
+            <a href="#" className={`action-icon sf2-icon-delete${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
+          </td>
+        </tr>
+        {isDeleteRepoDialogOpen && 
+        <DeleteRepoDialog
+          repo={repo}
+          onDeleteRepo={this.deleteRepo}
+          toggle={this.toggleDeleteRepoDialog}
+        />
+        }
+      </Fragment>
+    );
+  }
+}
+
+export default OrgUserOwnedRepos;

frontend/src/pages/org-admin/org-user-shared-repos.js

@@ -0,0 +1,132 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+import { seafileAPI } from '../../utils/seafile-api';
+import { gettext, loginUrl } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Loading from '../../components/loading';
+import OrgAdminUserNav from '../../components/org-admin-user-nav';
+import MainPanelTopbar from './main-panel-topbar';
+
+import '../../css/org-admin-user.css';
+
+const { orgID } = window.org.pageOptions;
+
+class OrgUserSharedRepos extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: ''
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.getOrgUserBesharedRepos(orgID, this.props.email).then((res) => {
+      this.setState(Object.assign({
+        loading: false
+      }, res.data)); 
+    }).catch((error) => {
+      if (error.response) {
+        if (error.response.status == 403) {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Permission denied')
+          }); 
+          location.href = `${loginUrl}?next=${encodeURIComponent(location.href)}`;
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: gettext('Error')
+          }); 
+        }   
+      } else {
+        this.setState({
+          loading: false,
+          errorMsg: gettext('Please check the network.')
+        }); 
+      }   
+    }); 
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <MainPanelTopbar/>
+        <div className="main-panel-center flex-row">
+          <div className="cur-view-container">
+            <OrgAdminUserNav email={this.props.email} currentItem='shared-repos' />
+            <div className="cur-view-content">
+              <Content 
+                data={this.state}
+              />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      loading, errorMsg, repo_list
+    } = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    }
+    if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <table className="table-hover">
+        <thead>
+          <tr>
+            <th width="4%">{/*icon*/}</th>
+            <th width="30%">{gettext('Name')}</th>
+            <th width="26%">{gettext('Owner')}</th>
+            <th width="15%">{gettext('Size')}</th>
+            <th width="25%">{gettext('Last Update')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {repo_list.map((item, index) => {
+            return <Item key={index} data={item} />;
+          })}
+        </tbody>
+      </table>
+    ); 
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const repo = this.props.data; 
+    return (
+      <tr>
+        <td>
+          <img src={Utils.getLibIconUrl(repo, false)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" /> 
+        </td>
+        <td>{repo.repo_name}</td>
+        <td>{repo.owner_name}</td>
+        <td>{Utils.bytesToSize(repo.size)}</td>
+        <td title={moment(repo.last_modified).format('LLLL')}>{moment(repo.last_modified).format('YYYY-MM-DD')}</td>
+      </tr>
+    );
+  }
+}
+
+export default OrgUserSharedRepos;