Repo history redesign (#7229)

* [repo history] display it with a dialog instead of an independent page

* [repo history] redesigned the 'commit details' dialog

* [repo history] added prop type checking

frontend/src/assets/icons/time.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>time</title>
+<g id="time">
+	<path id="形状" class="st0" d="M28,16c0-6.6-5.4-12-12-12S4,9.4,4,16s5.4,12,12,12S28,22.6,28,16 M31,16c0,8.2-6.8,15-15,15
+		S1,24.2,1,16S7.8,1,16,1S31,7.8,31,16 M25,17.5c0,0.8-0.7,1.5-1.5,1.5h-6c-1.7,0-3-1.3-3-3V8.5C14.5,7.7,15.2,7,16,7
+		s1.5,0.7,1.5,1.5v6c0,0.8,0.7,1.5,1.5,1.5h4.5C24.3,16,25,16.7,25,17.5"/>
+</g>
+</svg>

frontend/src/components/dialog/commit-details.js

@@ -6,6 +6,7 @@ import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Loading from '../loading';
+import Icon from '../icon';
 
 import '../../css/commit-details.css';
 
@@ -45,10 +46,13 @@ class CommitDetails extends React.Component {
   render() {
     const { toggleDialog, commitTime } = this.props;
     return (
-      <Modal isOpen={true} centered={true} toggle={toggleDialog}>
+      <Modal isOpen={true} toggle={toggleDialog}>
         <ModalHeader toggle={toggleDialog}>{gettext('Modification Details')}</ModalHeader>
         <ModalBody>
-          <p className="small">{dayjs(commitTime).format('YYYY-MM-DD HH:mm:ss')}</p>
+          <p className="repo-commit-time mb-6 d-flex align-items-center">
+            <Icon symbol="time" className="mr-1" />
+            {dayjs(commitTime).format('YYYY-MM-DD HH:mm:ss')}
+          </p>
           <Content data={this.state} />
         </ModalBody>
       </Modal>
@@ -87,11 +91,11 @@ class Content extends React.Component {
           }
           return (
             <React.Fragment key={index}>
-              <h6>{item.title}</h6>
-              <ul>
+              <h6 className="mt-4">{item.title}</h6>
+              <ul className="list-unstyled">
                 {
                   data[item.type].map((item, index) => {
-                    return <li key={index} dangerouslySetInnerHTML={{ __html: item }} className="commit-detail-item text-truncate"></li>;
+                    return <li key={index} dangerouslySetInnerHTML={{ __html: item }} className="text-truncate"></li>;
                   })
                 }
               </ul>

frontend/src/components/dialog/edit-repo-commit-labels.js

@@ -57,7 +57,7 @@ class UpdateRepoCommitLabels extends React.Component {
   render() {
     const { formErrorMsg } = this.state;
     return (
-      <Modal isOpen={true} centered={true} toggle={this.props.toggleDialog}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.props.toggleDialog}>{gettext('Edit labels')}</ModalHeader>
         <ModalBody>
           <React.Fragment>

frontend/src/components/dialog/repo-history.js

@@ -0,0 +1,314 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import { gettext, siteRoot, enableRepoSnapshotLabel as showLabel } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import Loading from '../../components/loading';
+import Paginator from '../../components/paginator';
+import ModalPortal from '../../components/modal-portal';
+import CommitDetails from '../../components/dialog/commit-details';
+import UpdateRepoCommitLabels from '../../components/dialog/edit-repo-commit-labels';
+
+import '../../css/repo-history.css';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired,
+  userPerm: PropTypes.string.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired,
+  toggleDialog: PropTypes.func.isRequired
+};
+
+class RepoHistory extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isLoading: true,
+      errorMsg: '',
+      currentPage: 1,
+      perPage: 100,
+      hasNextPage: false,
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    this.getItems(this.state.currentPage);
+  }
+
+  getItems = (page) => {
+    const { repoID } = this.props;
+    seafileAPI.getRepoHistory(repoID, page, this.state.perPage).then((res) => {
+      this.setState({
+        isLoading: false,
+        currentPage: page,
+        items: res.data.data,
+        hasNextPage: res.data.more
+      });
+    }).catch((error) => {
+      this.setState({
+        isLoading: false,
+        errorMsg: Utils.getErrorMsg(error, true) // true: show login tip if 403
+      });
+    });
+  };
+
+  resetPerPage = (perPage) => {
+    this.setState({
+      perPage: perPage
+    }, () => {
+      this.getItems(1);
+    });
+  };
+
+  render() {
+    const { repoID, userPerm, currentRepoInfo, toggleDialog } = this.props;
+    const { repo_name: repoName } = currentRepoInfo;
+
+    let title = gettext('{placeholder} Modification History');
+    title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
+
+    return (
+      <Modal isOpen={true} toggle={toggleDialog} size='xl' id="repo-history-dialog">
+        <ModalHeader toggle={toggleDialog}>
+          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
+        </ModalHeader>
+        <ModalBody>
+          {userPerm == 'rw' && <p className="repo-snapshot-tip">{gettext('Tip: a snapshot will be generated after modification, which records the library state after the modification.')}</p>}
+          <Content
+            isLoading={this.state.isLoading}
+            errorMsg={this.state.errorMsg}
+            items={this.state.items}
+            currentPage={this.state.currentPage}
+            hasNextPage={this.state.hasNextPage}
+            curPerPage={this.state.perPage}
+            resetPerPage={this.resetPerPage}
+            getListByPage={this.getItems}
+            repoID={repoID}
+            userPerm={userPerm}
+          />
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+class Content extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.theadData = showLabel ? [
+      { width: '43%', text: gettext('Description') },
+      { width: '12%', text: gettext('Time') },
+      { width: '9%', text: gettext('Modifier') },
+      { width: '12%', text: `${gettext('Device')} / ${gettext('Version')}` },
+      { width: '12%', text: gettext('Labels') },
+      { width: '12%', text: '' }
+    ] : [
+      { width: '43%', text: gettext('Description') },
+      { width: '15%', text: gettext('Time') },
+      { width: '15%', text: gettext('Modifier') },
+      { width: '15%', text: `${gettext('Device')} / ${gettext('Version')}` },
+      { width: '12%', text: '' }
+    ];
+  }
+
+  getPreviousPage = () => {
+    this.props.getListByPage(this.props.currentPage - 1);
+  };
+
+  getNextPage = () => {
+    this.props.getListByPage(this.props.currentPage + 1);
+  };
+
+  render() {
+    const {
+      isLoading, errorMsg, items,
+      curPerPage, currentPage, hasNextPage
+    } = this.props;
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
+    if (errorMsg) {
+      return <p className="error mt-6 text-center">{errorMsg}</p>;
+    }
+
+    return (
+      <React.Fragment>
+        <table className="table-hover">
+          <thead>
+            <tr>
+              {this.theadData.map((item, index) => {
+                return <th key={index} width={item.width}>{item.text}</th>;
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((item, index) => {
+              item.isFirstCommit = (currentPage == 1) && (index == 0);
+              item.showDetails = hasNextPage || (index != items.length - 1);
+              return <Item key={index} item={item} repoID={this.props.repoID} userPerm={this.props.userPerm} />;
+            })}
+          </tbody>
+        </table>
+        <Paginator
+          gotoPreviousPage={this.getPreviousPage}
+          gotoNextPage={this.getNextPage}
+          currentPage={currentPage}
+          hasNextPage={hasNextPage}
+          curPerPage={curPerPage}
+          resetPerPage={this.props.resetPerPage}
+          noURLUpdate={true}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+Content.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  errorMsg: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  hasNextPage: PropTypes.bool.isRequired,
+  curPerPage: PropTypes.number.isRequired,
+  resetPerPage: PropTypes.func.isRequired,
+  getListByPage: PropTypes.func.isRequired,
+};
+
+class Item extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      labels: this.props.item.tags,
+      isIconShown: false,
+      isCommitLabelUpdateDialogOpen: false,
+      isCommitDetailsDialogOpen: false
+    };
+  }
+
+  handleMouseOver = () => {
+    this.setState({ isIconShown: true });
+  };
+
+  handleMouseOut = () => {
+    this.setState({ isIconShown: false });
+  };
+
+  showCommitDetails = (e) => {
+    e.preventDefault();
+    this.setState({
+      isCommitDetailsDialogOpen: !this.state.isCommitDetailsDialogOpen
+    });
+  };
+
+  toggleCommitDetailsDialog = () => {
+    this.setState({
+      isCommitDetailsDialogOpen: !this.state.isCommitDetailsDialogOpen
+    });
+  };
+
+  editLabel = (e) => {
+    e.preventDefault();
+    this.setState({
+      isCommitLabelUpdateDialogOpen: !this.state.isCommitLabelUpdateDialogOpen
+    });
+  };
+
+  toggleLabelEditDialog = () => {
+    this.setState({
+      isCommitLabelUpdateDialogOpen: !this.state.isCommitLabelUpdateDialogOpen
+    });
+  };
+
+  updateLabels = (labels) => {
+    this.setState({
+      labels: labels
+    });
+  };
+
+  render() {
+    const { item, repoID, userPerm } = this.props;
+    const { isIconShown, isCommitLabelUpdateDialogOpen, isCommitDetailsDialogOpen, labels } = this.state;
+
+    let name = '';
+    if (item.email) {
+      if (!item.second_parent_id) {
+        name = <a href={`${siteRoot}profile/${encodeURIComponent(item.email)}/`}>{item.name}</a>;
+      } else {
+        name = gettext('None');
+      }
+    } else {
+      name = gettext('Unknown');
+    }
+
+    return (
+      <React.Fragment>
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td>
+            {item.description}
+            {item.showDetails &&
+            <a href="#" className="details" onClick={this.showCommitDetails} role="button">{gettext('Details')}</a>
+            }
+          </td>
+          <td title={dayjs(item.time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(item.time).format('YYYY-MM-DD')}</td>
+          <td>{name}</td>
+          <td>
+            {item.client_version ? `${item.device_name} / ${item.client_version}` : 'API / --'}
+          </td>
+          {showLabel &&
+          <td>
+            {labels.map((item, index) => {
+              return <span key={index} className="commit-label">{item}</span>;
+            })}
+            {userPerm == 'rw' &&
+            <a href="#" role="button" className={`attr-action-icon sf3-font sf3-font-rename ${isIconShown ? '' : 'invisible'}`} title={gettext('Edit')} aria-label={gettext('Edit')} onClick={this.editLabel}></a>
+            }
+          </td>
+          }
+          <td>
+            {userPerm == 'rw' && (
+              item.isFirstCommit ?
+                <span className={isIconShown ? '' : 'invisible'}>{gettext('Current Version')}</span> :
+                <a href={`${siteRoot}repo/${repoID}/snapshot/?commit_id=${item.commit_id}`} className={isIconShown ? '' : 'invisible'}>{gettext('View Snapshot')}</a>
+            )}
+          </td>
+        </tr>
+        {isCommitDetailsDialogOpen &&
+          <ModalPortal>
+            <CommitDetails
+              repoID={repoID}
+              commitID={item.commit_id}
+              commitTime={item.time}
+              toggleDialog={this.toggleCommitDetailsDialog}
+            />
+          </ModalPortal>
+        }
+        {isCommitLabelUpdateDialogOpen &&
+          <ModalPortal>
+            <UpdateRepoCommitLabels
+              repoID={repoID}
+              commitID={item.commit_id}
+              commitLabels={labels}
+              updateCommitLabels={this.updateLabels}
+              toggleDialog={this.toggleLabelEditDialog}
+            />
+          </ModalPortal>
+        }
+      </React.Fragment>
+    );
+  }
+}
+
+Item.propTypes = {
+  item: PropTypes.object.isRequired,
+};
+
+RepoHistory.propTypes = propTypes;
+
+export default RepoHistory;

frontend/src/components/dir-view-mode/dir-others/index.js

@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, siteRoot } from '../../../utils/constants';
+import { gettext } from '../../../utils/constants';
 import { Utils } from '../../../utils/utils';
 import TreeSection from '../../tree-section';
 import TrashDialog from '../../dialog/trash-dialog';
 import LibSettingsDialog from '../../dialog/lib-settings';
+import RepoHistoryDialog from '../../dialog/repo-history';
 
 import './index.css';
 
@@ -16,15 +17,15 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
   };
 
   const [showTrashDialog, setShowTrashDialog] = useState(false);
-  let trashUrl = null;
-  const historyUrl = siteRoot + 'repo/history/' + repoID + '/';
-  if (userPerm === 'rw') {
-    trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
-  }
   const toggleTrashDialog = () => {
     setShowTrashDialog(!showTrashDialog);
   };
 
+  let [isRepoHistoryDialogOpen, setRepoHistoryDialogOpen] = useState(false);
+  const toggleRepoHistoryDialog = () => {
+    setRepoHistoryDialogOpen(!isRepoHistoryDialogOpen);
+  };
+
   return (
     <TreeSection title={gettext('Others')} className="dir-others">
       {showSettings && (
@@ -33,14 +34,14 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
           <span className="dir-others-item-text">{gettext('Settings')}</span>
         </div>
       )}
-      {trashUrl && (
+      {userPerm == 'rw' && (
         <div className='dir-others-item text-nowrap' title={gettext('Trash')} onClick={toggleTrashDialog}>
           <span className="sf3-font-trash sf3-font"></span>
           <span className="dir-others-item-text">{gettext('Trash')}</span>
         </div>
       )}
       {Utils.isDesktop() && (
-        <div className='dir-others-item text-nowrap' title={gettext('History')} onClick={() => location.href = historyUrl}>
+        <div className='dir-others-item text-nowrap' title={gettext('History')} onClick={toggleRepoHistoryDialog}>
           <span className="sf3-font-history sf3-font"></span>
           <span className="dir-others-item-text">{gettext('History')}</span>
         </div>
@@ -60,6 +61,14 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
           toggleDialog={toggleSettingsDialog}
         />
       )}
+      {isRepoHistoryDialogOpen && (
+        <RepoHistoryDialog
+          repoID={repoID}
+          userPerm={userPerm}
+          currentRepoInfo={currentRepoInfo}
+          toggleDialog={toggleRepoHistoryDialog}
+        />
+      )}
     </TreeSection>
   );
 };

frontend/src/components/paginator.js

@@ -13,10 +13,11 @@ const propTypes = {
   gotoNextPage: PropTypes.func.isRequired,
   hasNextPage: PropTypes.bool.isRequired,
   resetPerPage: PropTypes.func.isRequired,
-  curPerPage: PropTypes.number.isRequired
+  curPerPage: PropTypes.number.isRequired,
+  noURLUpdate: PropTypes.bool
 };
 
-const PAGES = [25, 50, 100];
+const PER_PAGES = [25, 50, 100];
 
 class Paginator extends Component {
 
@@ -45,6 +46,10 @@ class Paginator extends Component {
   };
 
   updateURL = (page, perPage) => {
+    const { noURLUpdate = false } = this.props;
+    if (noURLUpdate) {
+      return;
+    }
     let url = new URL(location.href);
     let searchParams = new URLSearchParams(url.search);
     searchParams.set('page', page);
@@ -106,7 +111,7 @@ class Paginator extends Component {
             <span className={className('sf3-font sf3-font-down d-inline-block', { 'rotate-180': this.state.isMenuShow })}></span>
           </DropdownToggle>
           <DropdownMenu>
-            {PAGES.map(perPage => {
+            {PER_PAGES.map(perPage => {
               return this.renderDropdownItem(curPerPage, perPage);
             })}
           </DropdownMenu>

frontend/src/css/commit-details.css

@@ -1,3 +1,9 @@
-.commit-detail-item {
-  list-style-type: none;
+.repo-commit-time {
+  font-size: .875rem;
+}
+
+.repo-commit-time .seafile-multicolor-icon-time {
+  width: 1rem;
+  height: 1rem;
+  color: #999;
 }

frontend/src/css/repo-history.css

@@ -39,3 +39,24 @@ body {
 .go-back .sf3-font-down {
   font-size: 1.75rem !important;
 }
+
+/* for the dialog */
+.repo-snapshot-tip {
+  font-size: .875rem;
+  color: #666;
+}
+
+#repo-history-dialog.modal-dialog {
+  max-height: calc(100% - 3.5rem);
+  overflow: hidden;
+  height: calc(100% - 3.5rem);
+}
+
+#repo-history-dialog .modal-content {
+  max-height: 100%;
+  overflow: hidden;
+}
+
+#repo-history-dialog .modal-body {
+  overflow: auto;
+}