My librarys (#2584)

frontend/src/app.js

@@ -16,6 +16,8 @@ import ShareAdminFolders from './pages/share-admin/folders';
 import ShareAdminShareLinks from './pages/share-admin/share-links';
 import ShareAdminUploadLinks from './pages/share-admin/upload-links';
 import SharedLibraries from './pages/shared-libs/shared-libs';
+import MyLibraries from './pages/my-libs/my-libs';
+import DirView from './components/dir-view/dir-view';
 import MainContentWrapper from './components/main-content-wrapper';
 
 import 'seafile-ui';
@@ -48,6 +50,7 @@ class App extends Component {
       isLoadingDraft: true,
       currentTab: 'dashboard',
     };
+    this.currentTab = ''; //just for refresh brower
   }
 
   componentDidMount() {
@@ -56,9 +59,10 @@ class App extends Component {
     // TODO: need refactor later
     let href = window.location.href.split('/');
     this.getDrafts();
-    this.setState({
-      currentTab: href[href.length - 2]
-    });
+    this.setState({currentTab: href[href.length - 2]});
+    if (this.currentTab) {
+      this.setState({currentTab: this.currentTab});
+    }
   }
 
   getDrafts = () => {
@@ -94,12 +98,14 @@ class App extends Component {
     //todos
   }
 
-  tabItemClick = (param) => {
-    this.setState({
-      currentTab: param
-    });
+  tabItemClick = (tabName) => {
+    this.setState({currentTab: tabName});
   } 
 
+  updateCurrentTab = (tabName) => {
+    this.currentTab = tabName;
+  }
+
   render() {
     let { currentTab } = this.state;
     return (
@@ -131,6 +137,8 @@ class App extends Component {
             <ShareAdminShareLinksWrapper path={siteRoot + 'share-admin-share-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <ShareAdminUploadLinksWrapper path={siteRoot + 'share-admin-upload-links'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
             <SharedLibrariesWrapper path={siteRoot + 'shared-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <MyLibraries path={siteRoot + 'my-libs'} onShowSidePanel={this.onShowSidePanel} onSearchedClick={this.onSearchedClick} />
+            <DirView path={siteRoot + 'library/:repoID/*'} onMenuClick={this.onShowSidePanel} updateCurrentTab={this.updateCurrentTab}/>
           </Router>
         </MainPanel>
       </div>

frontend/src/components/cur-dir-path/dir-path.js

@@ -45,7 +45,7 @@ class DirPath extends React.Component {
     let pathElem = this.turnPathToLink(currentPath);
     return (
       <div className="path-containter">
-        <a href={siteRoot + '#common/'} className="normal">{gettext('Libraries')}</a>
+        <a href={siteRoot + 'my-libs/'} className="normal">{gettext('Libraries')}</a>
         <span className="path-split">/</span>
         {currentPath === '/' ?
           <span>{repoName}</span>:

frontend/src/components/dir-view/dir-view.js

@@ -12,6 +12,7 @@ import Repo from '../../models/repo';
 
 const propTypes = {
   onMenuClick: PropTypes.func.isRequired,
+  updateCurrentTab: PropTypes.func.isRequired,
 };
 
 class DirView extends React.Component {
@@ -44,8 +45,6 @@ class DirView extends React.Component {
 
   componentDidMount() {
     let repoID = this.props.repoID;
-    let index = location.href.indexOf(repoID) + repoID.length;
-    let path = decodeURIComponent(location.href.slice(index));
     seafileAPI.getRepoInfo(repoID).then(res => {
       let repo = new Repo(res.data);
       this.setState({
@@ -54,9 +53,15 @@ class DirView extends React.Component {
         permission: repo.permission === 'rw',
         currentRepo: repo,
       });
-      this.updateDirentList(path);
+      
+      let repoName = encodeURIComponent(repo.repo_name);
+      let index = location.href.indexOf(repoName) + repoName.length;
+      let path = decodeURIComponent(location.href.slice(index));
       this.setState({path: path});
+      this.updateDirentList(path);
     });
+
+    this.props.updateCurrentTab('my-libs'); // just for refersh brower;
   }
   
   updateDirentList = (filePath) => {
@@ -82,7 +87,7 @@ class DirView extends React.Component {
       this.updateDirentList(direntPath);
       this.setState({path: direntPath});
 
-      let fileUrl = siteRoot + 'librarys/' + this.state.repoID + direntPath;
+      let fileUrl = siteRoot + 'library/' + this.state.repoID + '/' + this.state.repoName + direntPath;
       window.history.pushState({url: fileUrl, path: direntPath}, direntPath, fileUrl);
     } else {
       const w=window.open('about:blank');
@@ -302,7 +307,7 @@ class DirView extends React.Component {
     this.updateDirentList(path);
     this.setState({path: path});
 
-    let fileUrl = siteRoot + 'librarys/' + this.state.repoID + path;
+    let fileUrl = siteRoot + 'library/' + this.state.repoID + '/' + this.state.repoName  + path;
     window.history.pushState({url: fileUrl, path: path}, path, fileUrl);
   }
 

frontend/src/components/main-side-nav.js

@@ -123,10 +123,10 @@ class MainSideNav extends React.Component {
           <h3 className="sf-heading">Files</h3>
           <ul className="side-tabnav-tabs">
             <li className={`tab ${this.props.currentTab === 'my-libs' ? 'tab-cur' : ''}`}>
-              <a href={ siteRoot + '#my-libs' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
+              <Link to={ siteRoot + 'my-libs/' } className="ellipsis" title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
                 <span className="sf2-icon-user" aria-hidden="true"></span>
                 {gettext('My Libraries')}
-              </a>
+              </Link>
             </li>
             <li className={`tab ${this.props.currentTab === 'shared-libs' ? 'tab-cur' : ''}`}>
               <Link to={siteRoot + 'shared-libs/'} className="ellipsis" title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>

frontend/src/pages/my-libs/my-libs.js

@@ -0,0 +1,414 @@
+import React, { Component, Fragment } from 'react';
+import moment from 'moment';
+import { Link } from '@reach/router';
+import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
+import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot, loginUrl, isPro, storages, canGenerateShareLink, canGenerateUploadLink, folderPermEnabled, enableRepoSnapshotLabel } from '../../utils/constants';
+import Loading from '../../components/loading';
+import DeleteItemPopup from './popups/delete-item';
+import GeneralToolBar from '../../components/toolbar/general-toolbar';
+
+class Content extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      deleteItemPopupOpen: false
+    };
+
+    this.toggleDeleteItemPopup = this.toggleDeleteItemPopup.bind(this);
+    this.showDeleteItemPopup = this.showDeleteItemPopup.bind(this);
+
+    this.operations = {
+      showDeleteItemPopup: this.showDeleteItemPopup
+    };
+  }
+
+  toggleDeleteItemPopup() {
+    this.setState({
+      deleteItemPopupOpen: !this.state.deleteItemPopupOpen
+    });
+  }
+
+  showDeleteItemPopup(data) {
+    this.toggleDeleteItemPopup();
+    this.setState({
+      deleteItemPopupData: data
+    });
+  }
+
+  render() {
+    const {loading, errorMsg, items} = this.props.data;
+
+    if (loading) {
+      return <Loading />;
+    } else if (errorMsg) {
+      return <p className="error text-center">{errorMsg}</p>;
+    } else {
+      const emptyTip = (
+        <div className="empty-tip">
+          <h2>{gettext('You have not created any libraries')}</h2>
+          <p>{gettext('You can create a library to organize your files. For example, you can create one for each of your projects. Each library can be synchronized and shared separately.')}</p>
+        </div>
+      );
+
+      // TODO: test 'storage backend'
+      const showStorageBackend = storages.length > 0; // only for desktop
+      const desktopThead = (
+        <thead>
+          <tr>
+            <th width="8%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="34%">{gettext("Name")}<a className="table-sort-op by-name" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-down hide"></span></a></th>
+            <th width="24%"><span className="sr-only">{gettext("Actions")}</span></th>
+
+            <th width={showStorageBackend ? '14%' : '20%'}>{gettext("Size")}</th>
+            {showStorageBackend ? <th width="10%">{gettext('Storage backend')}</th> : null}
+            <th width={showStorageBackend ? '10%' : '14%'}>{gettext("Last Update")}<a className="table-sort-op by-time" href="#">{/*TODO: sort*/}<span className="sort-icon icon-caret-up"></span></a></th>
+          </tr>
+        </thead>
+      );
+
+      const mobileThead = (
+        <thead>
+          <tr>
+            <th width="18%"><span className="sr-only">{gettext("Library Type")}</span></th>
+            <th width="76%">
+              {gettext("Sort:")} {/* TODO: sort */}
+              {gettext("name")}<a className="table-sort-op mobile-table-sort-op by-name" href="#"> <span className="sort-icon icon-caret-down hide"></span></a>
+              {gettext("last update")}<a className="table-sort-op mobile-table-sort-op by-time" href="#"> <span className="sort-icon icon-caret-up"></span></a>
+            </th>
+            <th width="6%"><span className="sr-only">{gettext("Actions")}</span></th>
+          </tr>
+        </thead>
+      );
+
+      const table = (
+        <table>
+          {window.innerWidth >= 768 ? desktopThead : mobileThead}
+          <TableBody items={items} operations={this.operations} />
+        </table>
+      );
+
+      const nonEmpty = (
+        <React.Fragment>
+          {table}
+          <DeleteItemPopup isOpen={this.state.deleteItemPopupOpen} 
+            toggle={this.toggleDeleteItemPopup} data={this.state.deleteItemPopupData} />
+        </React.Fragment>
+      );
+
+      return items.length ? nonEmpty : emptyTip; 
+    }
+  }
+}
+
+class TableBody extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      items: this.props.items
+    };
+  }
+
+  render() {
+    
+    let listItems = this.state.items.map(function(item, index) {
+      return <Item key={index} data={item} operations={this.props.operations} />;
+    }, this);
+
+    return (
+      <tbody>{listItems}</tbody>
+    );
+  }
+}
+
+class Item extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOpIcon: false,
+      operationMenuOpen: false,
+      deleted: false
+    };
+
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseOut = this.handleMouseOut.bind(this);
+    this.toggleOperationMenu = this.toggleOperationMenu.bind(this);
+    this.clickOperationMenuToggle = this.clickOperationMenuToggle.bind(this);
+
+    this.share = this.share.bind(this);
+
+    this.showDeleteItemPopup = this.showDeleteItemPopup.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
+
+    this.rename = this.rename.bind(this);
+    this.transfer = this.transfer.bind(this);
+    this.historySetting = this.historySetting.bind(this);
+    this.changePassword = this.changePassword.bind(this);
+    this.showLinks = this.showLinks.bind(this);
+    this.folderPerm = this.folderPerm.bind(this);
+    this.showDetails = this.showDetails.bind(this);
+    this.label = this.label.bind(this);
+  }
+
+  handleMouseOver() {
+    if (this.state.operationMenuOpen) {
+      return;
+    }
+    this.setState({
+      showOpIcon: true
+    });
+  }
+
+  handleMouseOut() {
+    if (this.state.operationMenuOpen) {
+      return;
+    }
+    this.setState({
+      showOpIcon: false
+    });
+  }
+
+  toggleOperationMenu() {
+    this.setState({
+      operationMenuOpen: !this.state.operationMenuOpen
+    });
+  }
+
+  clickOperationMenuToggle(e) {
+    e.preventDefault();
+    this.toggleOperationMenu();
+  }
+
+  share(e) {
+    e.preventDefault();
+    // TODO
+  }
+
+  showDeleteItemPopup(e) {
+    e.preventDefault(); // for `<a>`
+
+    const data = this.props.data;
+    this.props.operations.showDeleteItemPopup({
+      repoName: data.repo_name,
+      yesCallback: this.deleteItem,
+      _this: this
+    });
+  }
+
+  deleteItem() {
+    const data = this.props.data;
+    seafileAPI.deleteRepo(data.repo_id).then((res) => {
+      this.setState({
+        deleted: true
+      });
+      // TODO: show feedback msg
+    }).catch((error) => {
+        // TODO: show feedback msg
+    });
+  }
+
+  rename() {
+  }
+
+  transfer() {
+  }
+
+  historySetting() {
+  }
+
+  changePassword() {
+  }
+
+  showLinks() {
+  }
+
+  folderPerm() {
+  }
+
+  showDetails() {
+  }
+  
+  label() {
+  }
+
+  render() {
+
+    if (this.state.deleted) {
+      return null;
+    }
+
+    const data = this.props.data;
+    const permission = data.permission;
+
+    let is_readonly = false;
+    if (permission == 'r' || permission == 'preview') {
+      is_readonly = true;
+    }
+    data.icon_url = Utils.getLibIconUrl({
+      is_encrypted: data.encrypted,
+      is_readonly: is_readonly, 
+      size: Utils.isHiDPI() ? 48 : 24
+    }); 
+    data.icon_title = Utils.getLibIconTitle({
+      'encrypted': data.encrypted,
+      'is_admin': data.is_admin,
+      'permission': permission
+    });
+    data.url = `${siteRoot}#my-libs/lib/${data.repo_id}/`;
+
+    let iconVisibility = this.state.showOpIcon ? '' : ' invisible';
+    let shareIconClassName = 'sf2-icon-share sf2-x op-icon' + iconVisibility; 
+    let deleteIconClassName = 'sf2-icon-delete sf2-x op-icon' + iconVisibility;
+    let operationMenuToggleIconClassName = 'sf2-icon-caret-down item-operation-menu-toggle-icon op-icon'; 
+    if (window.innerWidth >= 768) {
+      operationMenuToggleIconClassName += iconVisibility; 
+    }
+
+    const showShareLinks = !data.encrypted && (canGenerateShareLink || canGenerateUploadLink);
+
+    const commonToggle = (
+      <DropdownToggle
+        tag="a" href="#" className={operationMenuToggleIconClassName} title={gettext('More Operations')}
+        onClick={this.clickOperationMenuToggle}
+        data-toggle="dropdown" aria-expanded={this.state.operationMenuOpen}>
+      </DropdownToggle>
+    );
+    const commonOperationsInMenu = (
+      <React.Fragment>
+        <DropdownItem onClick={this.rename}>{gettext('Rename')}</DropdownItem>
+        <DropdownItem onClick={this.transfer}>{gettext('Transfer')}</DropdownItem>
+        <DropdownItem onClick={this.historySetting}>{gettext('History Setting')}</DropdownItem>
+        {data.encrypted ? <DropdownItem onClick={this.changePassword}>{gettext('Change Password')}</DropdownItem> : ''}
+        {showShareLinks ? <DropdownItem onClick={this.showLinks}>{gettext('Share Links')}</DropdownItem> : ''}
+        {folderPermEnabled ? <DropdownItem onClick={this.folderPerm}>{gettext('Folder Permission')}</DropdownItem> : ''}
+        <DropdownItem onClick={this.showDetails}>{gettext('Details')}</DropdownItem>
+      </React.Fragment>
+    );
+
+    const desktopOperations = (
+      <div>
+        <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
+        <a href="#" className={deleteIconClassName} title={gettext("Delete")} onClick={this.showDeleteItemPopup}></a>
+        <Dropdown isOpen={this.state.operationMenuOpen} toggle={this.toggleOperationMenu}>
+          {commonToggle}
+          <DropdownMenu>
+            {commonOperationsInMenu}
+            {enableRepoSnapshotLabel ? <DropdownItem onClick={this.label}>{gettext('Label current state')}</DropdownItem> : ''}
+          </DropdownMenu>
+        </Dropdown>
+      </div>
+    );
+
+    const mobileOperations = (
+      <Dropdown isOpen={this.state.operationMenuOpen} toggle={this.toggleOperationMenu}>
+        {commonToggle}
+        <div className={`${this.state.operationMenuOpen?'':'d-none'}`} onClick={this.toggleOperationMenu}>
+          <div className="mobile-operation-menu-bg-layer"></div>
+          <div className="mobile-operation-menu">
+            <DropdownItem onClick={this.share}>{gettext('Share')}</DropdownItem>
+            <DropdownItem onClick={this.showDeleteItemPopup}>{gettext('Delete')}</DropdownItem>
+            {commonOperationsInMenu}
+          </div>
+        </div>
+      </Dropdown>
+    );
+
+    const desktopItem = (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+        <td>
+          {data.repo_name ?
+            <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link> :
+            gettext('Broken (please contact your administrator to fix this library)')}
+        </td>
+        <td>{data.repo_name ? desktopOperations : ''}</td>
+        <td>{Utils.formatSize({bytes: data.size})}</td>
+        {storages.length ? <td>{data.storage_name}</td> : null}
+        <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
+      </tr>
+    );
+
+    const mobileItem = (
+      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+        <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
+        <td>
+          {data.repo_name ?
+            <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link> :
+            gettext('Broken (please contact your administrator to fix this library)')}
+          <br />
+          <span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
+          <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
+        </td>
+        <td>{data.repo_name ? mobileOperations : ''}</td>
+      </tr>
+    );
+
+    return window.innerWidth >= 768 ? desktopItem : mobileItem;
+  }
+}
+
+class MyLibraries extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: true,
+      errorMsg: '',
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    seafileAPI.listRepos({type:'mine'}).then((res) => {
+      // res: {data: {...}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
+      this.setState({
+        loading: false,
+        items: res.data.repos
+      });
+    }).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>
+        <GeneralToolBar onShowSidePanel={this.props.onShowSidePanel} onSearchedClick={this.props.onSearchedClick}/>
+        <div className="main-panel-center">
+          <div className="cur-view-container">
+            <div className="cur-view-path">
+              <h3 className="sf-heading">{gettext("My Libraries")}</h3>
+            </div>
+            <div className="cur-view-content">
+              <Content data={this.state} />
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default MyLibraries;

frontend/src/pages/my-libs/popups/delete-item.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
+class DeleteItemPopup extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.clickYes = this.clickYes.bind(this);
+  }
+
+  toggle() {
+    this.props.toggle();
+  }
+
+  clickYes() {
+    this.toggle();
+    
+    const data = this.props.data;
+    if (data) {
+      data.yesCallback.bind(data._this)();
+    }
+  }
+
+  render() {
+
+    const data = this.props.data;
+    // TODO:
+    //const repoName = <span class="op-target ellipsis ellipsis-op-target">{data ? data.repoName : null}</span>;
+    const repoName = data ? data.repoName : null;
+    const popup = (
+      <Modal isOpen={this.props.isOpen} toggle={this.toggle} centered={true}>
+        <ModalHeader toggle={this.toggle}>{gettext("Delete Library")}</ModalHeader>
+        <ModalBody>
+          <p>{gettext("Are you sure you want to delete %s ?").replace('%s', repoName)}</p>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={this.clickYes}>{gettext("Yes")}</Button>
+          <Button color="secondary" onClick={this.toggle}>{gettext("No")}</Button>
+        </ModalFooter>
+      </Modal>
+    );
+
+    return popup;
+  }
+}
+
+export default DeleteItemPopup;

frontend/src/pages/shared-libs/shared-libs.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import moment from 'moment';
+import { Link } from '@reach/router';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants';
@@ -50,7 +51,7 @@ class Content extends Component {
       );
 
       const table = (
-        <table className="table table-hover table-vcenter">
+        <table>
           {window.innerWidth >= 768 ? desktopThead : mobileThead}
           <TableBody items={items} />
         </table>
@@ -173,7 +174,7 @@ class Item extends Component {
     const desktopItem = (
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
         <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-        <td><a href={data.url}>{data.repo_name}</a></td>
+        <td><Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link></td>
         <td>
           { isPro && data.is_admin ?
             <a href="#" className={shareIconClassName} title={gettext("Share")} onClick={this.share}></a>
@@ -190,7 +191,7 @@ class Item extends Component {
       <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
         <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
         <td>
-          <a href={data.url}>{data.repo_name}</a><br />
+          <Link to={`${siteRoot}library/${data.repo_id}/${data.repo_name}/`}>{data.repo_name}</Link><br />
           <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
           <span className="item-meta-info">{Utils.formatSize({bytes: data.size})}</span>
           <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>

frontend/src/utils/constants.js

@@ -22,6 +22,8 @@ export const enableFileComment = window.app.pageOptions.enableFileComment ? true
 export const folderPermEnabled = window.app.pageOptions.folderPermEnabled === 'True';
 export const enableUploadFolder = window.app.pageOptions.enableUploadFolder === 'True';
 export const enableResumableFileUpload = window.app.pageOptions.enableResumableFileUpload === 'True';
+export const storages = window.app.pageOptions.storages; // storage backends
+export const enableRepoSnapshotLabel = window.app.pageOptions.enableRepoSnapshotLabel;
 
 // wiki
 export const slug = window.wiki ? window.wiki.config.slug : '';

frontend/src/utils/utils.js

@@ -297,10 +297,10 @@ export const Utils = {
     var bytes = options.bytes;
     var precision = options.precision || 0;
 
-    var kilobyte = 1024;
-    var megabyte = kilobyte * 1024;
-    var gigabyte = megabyte * 1024;
-    var terabyte = gigabyte * 1024;
+    var kilobyte = 1000;
+    var megabyte = kilobyte * 1000;
+    var gigabyte = megabyte * 1000;
+    var terabyte = gigabyte * 1000;
 
     if ((bytes >= 0) && (bytes < kilobyte)) {
       return bytes + ' B';