Monitor shared repos (#5375)

* [shared with me] added 'watch/unwatch file changes' for libraries

* [groups, group] added 'watch/unwatch file changes' for libraries

* [shared with me] only libraries shared with 'r', 'rw' permissions can be monitored

* [groups, group] only libraries shared with 'r', 'rw' permissions can be monitored

* [shared with me] improved the interaction for library items

* [groups, group] cleaned up the code

frontend/src/components/repo-monitored-icon.js

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { UncontrolledTooltip } from 'reactstrap';
+import Icon from '../components/icon';
+import { gettext } from '../utils/constants';
+
+const propTypes = {
+  repoID: PropTypes.string.isRequired
+};
+
+class RepoMonitoredIcon extends React.Component {
+
+  render() {
+    const { repoID } = this.props;
+    return (
+      <Fragment>
+        <span id={`watching-${repoID}`} className="ml-1">
+          <Icon symbol='monitor' />
+        </span>
+        <UncontrolledTooltip
+          placement="bottom"
+          target={`#watching-${repoID}`}
+        >
+          {gettext('You are watching file changes of this library.')}
+        </UncontrolledTooltip>
+      </Fragment>
+    );
+  }
+}
+
+RepoMonitoredIcon.propTypes = propTypes;
+
+export default RepoMonitoredIcon;

frontend/src/components/shared-repo-list-view/shared-repo-list-item.js

@@ -17,6 +17,7 @@ import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
 import toaster from '../toast';
 import RepoAPITokenDialog from '../dialog/repo-api-token-dialog';
 import RepoShareUploadLinksDialog from '../dialog/repo-share-upload-links-dialog';
+import RepoMonitoredIcon from '../../components/repo-monitored-icon';
 
 const propTypes = {
   currentGroup: PropTypes.object,
@@ -29,6 +30,7 @@ const propTypes = {
   onItemDetails: PropTypes.func,
   onItemRename: PropTypes.func,
   onItemDelete: PropTypes.func,
+  onMonitorRepo: PropTypes.func
 };
 
 class SharedRepoListItem extends React.Component {
@@ -163,11 +165,36 @@ class SharedRepoListItem extends React.Component {
       case 'Reset Password':
         this.onResetPasswordToggle();
         break;
-      default:
+      case 'Watch File Changes':
+        this.watchFileChanges();
         break;
+      case 'Unwatch File Changes':
+        this.unwatchFileChanges();
+        break;
+      // no default
     }
   }
 
+  watchFileChanges = () => {
+    const { repo } = this.props;
+    seafileAPI.monitorRepo(repo.repo_id).then(() => {
+      this.props.onMonitorRepo(repo, true);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  unwatchFileChanges = () => {
+    const { repo } = this.props;
+    seafileAPI.unMonitorRepo(repo.repo_id).then(() => {
+      this.props.onMonitorRepo(repo, false);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
   onItemRenameToggle = () => {
     this.props.onFreezedItem();
     this.setState({
@@ -294,6 +321,12 @@ class SharedRepoListItem extends React.Component {
       case 'Reset Password':
         translateResult = gettext('Reset Password');
         break;
+      case 'Watch File Changes':
+        translateResult = gettext('Watch File Changes');
+        break;
+      case 'Unwatch File Changes':
+        translateResult = gettext('Unwatch File Changes');
+        break;
       case 'API Token':
         translateResult = 'API Token'; // translation is not needed here
         break;
@@ -339,6 +372,10 @@ class SharedRepoListItem extends React.Component {
           operations.push('Unshare');
         }
       }
+      if (repo.permission == 'r' || repo.permission == 'rw') {
+        const monitorOp = repo.monitored ? 'Unwatch File Changes' : 'Watch File Changes';
+        operations.push(monitorOp);
+      }
     } else {
       if (isRepoOwner) {
         operations.push('Share');
@@ -400,8 +437,6 @@ class SharedRepoListItem extends React.Component {
         operations.push('Unshare');
       }
     } else {
-      // scene one: (Share, Delete, itemToggle and other operations);
-      // scene two: (Share, Unshare), (Share), (Unshare)
       operations = this.generatorOperations();
     }
     const shareOperation   = <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onItemShare}></a>;
@@ -433,23 +468,41 @@ class SharedRepoListItem extends React.Component {
         </Fragment>
       );
     } else {
-      if (operations.length == 2) {
       return (
         <Fragment>
-            {shareOperation}
+          {operations.map(item => {
-            {unshareOperation}
+            switch (item) {
+              case 'Share':
+                return <Fragment key={item}>{shareOperation}</Fragment>;
+              case 'Unshare':
+                return <Fragment key={item}>{unshareOperation}</Fragment>;
+              case 'Watch File Changes':
+              case 'Unwatch File Changes':
+                return (
+                  <Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu} key={item}>
+                    <DropdownToggle
+                      className="sf-dropdown-toggle sf2-icon-caret-down border-0 p-0"
+                      title={gettext('More Operations')}
+                      data-toggle="dropdown"
+                      aria-expanded={this.state.isItemMenuShow}
+                      aria-haspopup={true}
+                      style={{'minWidth': '0'}}
+                      onClick={this.clickOperationMenuToggle}
+                      onKeyDown={this.onDropdownToggleKeyDown}
+                    />
+                    <DropdownMenu>
+                      {[item].map((item, index) => {
+                        return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{this.translateMenuItem(item)}</DropdownItem>;
+                      })}
+                    </DropdownMenu>
+                  </Dropdown>
+                );
+              // no default
+            }
+          })}
         </Fragment>
       );
     }
-      if (operations.length == 1 && operations[0] === 'Share') {
-        return shareOperation;
-      }
-
-      if (operations.length == 1 && operations[0] === 'Unshare') {
-        return unshareOperation;
-      }
-    }
-    return null;
   }
 
   onToggleStarRepo = (e) => {
@@ -493,7 +546,10 @@ class SharedRepoListItem extends React.Component {
           <td>
             {this.state.isRenaming ?
               <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
+              <Fragment>
                 <Link to={libPath}>{repo.repo_name}</Link>
+                {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} />}
+              </Fragment>
             }
           </td>
           <td>{this.state.isOperationShow && this.generatorPCMenu()}</td>
@@ -522,7 +578,10 @@ class SharedRepoListItem extends React.Component {
           <td onClick={this.visitRepo}>
             {this.state.isRenaming ?
               <Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel} /> :
+              <Fragment>
                 <Link to={libPath}>{repo.repo_name}</Link>
+                {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} />}
+              </Fragment>
             }
             <br />
             <span className="item-meta-info" title={repo.owner_contact_email}>{repo.owner_name}</span>

frontend/src/components/shared-repo-list-view/shared-repo-list-view.js

@@ -99,6 +99,7 @@ class SharedRepoListView extends React.Component {
               onItemDelete={this.props.onItemDelete}
               onItemDetails={this.props.onItemDetails}
               onItemRename={this.props.onItemRename}
+              onMonitorRepo={this.props.onMonitorRepo}
             />
           );
         })}

frontend/src/pages/groups/group-view.js

@@ -252,6 +252,16 @@ class GroupView extends React.Component {
     });
   }
 
+  onMonitorRepo = (repo, monitored) => {
+    let repoList = this.state.repoList.map(item => {
+      if (item.repo_id === repo.repo_id) {
+        item.monitored = monitored;
+      }
+      return item;
+    });
+    this.setState({repoList: repoList});
+  }
+
   onTabNavClick = (tabName) => {
     this.props.onTabNavClick(tabName);
   }
@@ -561,6 +571,7 @@ class GroupView extends React.Component {
                   onItemDelete={this.onItemDelete}
                   onItemDetails={this.onItemDetails}
                   onItemRename={this.onItemRename}
+                  onMonitorRepo={this.onMonitorRepo}
                 />
               }
             </div>

frontend/src/pages/groups/groups-view.js

@@ -75,6 +75,16 @@ class RepoListViewPanel extends React.Component {
     });
   }
 
+  onMonitorRepo = (repo, monitored) => {
+    let repoList = this.state.repoList.map(item => {
+      if (item.repo_id === repo.repo_id) {
+        item.monitored = monitored;
+      }
+      return item;
+    });
+    this.setState({repoList: repoList});
+  }
+
   render() {
     let group = this.props.group;
     const emptyTip = <p className="group-item-empty-tip">{gettext('No libraries')}</p>;
@@ -94,6 +104,7 @@ class RepoListViewPanel extends React.Component {
             onItemDelete={this.onItemDelete}
             onItemDetails={this.props.onItemDetails}
             onItemRename={this.onItemRename}
+            onMonitorRepo={this.onMonitorRepo}
           />
         }
       </div>

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import MediaQuery from 'react-responsive';
 import moment from 'moment';
 import { Link, navigate } from '@gatsbyjs/reach-router';
-import { UncontrolledTooltip } from 'reactstrap';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, storages } from '../../utils/constants';
@@ -22,7 +21,7 @@ import MylibRepoMenu from './mylib-repo-menu';
 import RepoAPITokenDialog from '../../components/dialog/repo-api-token-dialog';
 import RepoShareUploadLinksDialog from '../../components/dialog/repo-share-upload-links-dialog';
 import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
-import Icon from '../../components/icon';
+import RepoMonitoredIcon from '../../components/repo-monitored-icon';
 
 const propTypes = {
   repo: PropTypes.object.isRequired,
@@ -337,19 +336,7 @@ class MylibRepoListItem extends React.Component {
           {!this.state.isRenaming && repo.repo_name && (
             <Fragment>
               <Link to={repoURL}>{repo.repo_name}</Link>
-              {repo.monitored && (
+              {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} />}
-                <Fragment>
-                  <span id={`watching-${repo.repo_id}`} className="ml-1">
-                    <Icon symbol='monitor' />
-                  </span>
-                  <UncontrolledTooltip
-                    placement="bottom"
-                    target={`#watching-${repo.repo_id}`}
-                  >
-                    {gettext('You are watching file changes of this library.')}
-                  </UncontrolledTooltip>
-                </Fragment>
-              )}
             </Fragment>
           )}
           {!this.state.isRenaming && !repo.repo_name &&
@@ -398,19 +385,7 @@ class MylibRepoListItem extends React.Component {
           {!this.state.isRenaming && repo.repo_name && (
             <div>
               <Link to={repoURL}>{repo.repo_name}</Link>
-              {repo.monitored && (
+              {repo.monitored && <RepoMonitoredIcon repoID={repo.repo_id} />}
-                <Fragment>
-                  <span id={`watching-${repo.repo_id}`} className="ml-1">
-                    <Icon symbol='monitor' />
-                  </span>
-                  <UncontrolledTooltip
-                    placement="bottom"
-                    target={`#watching-${repo.repo_id}`}
-                  >
-                    {gettext('You are watching file changes of this library.')}
-                  </UncontrolledTooltip>
-                </Fragment>
-              )}
             </div>
           )}
           {!this.state.isRenaming && !repo.repo_name &&

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

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react';
-import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import cookie from 'react-cookies';
@@ -15,9 +15,23 @@ import LibsMobileThead from '../../components/libs-mobile-thead';
 import ModalPotal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import SortOptionsDialog from '../../components/dialog/sort-options';
+import RepoMonitoredIcon from '../../components/repo-monitored-icon';
 
 class Content extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false
+    };
+  }
+
+  freezeItem = (freezed) => {
+    this.setState({
+      isItemFreezed: freezed
+    });
+  }
+
   sortByName = (e) => {
     e.preventDefault();
     const sortBy = 'name';
@@ -80,7 +94,14 @@ class Content extends Component {
           {isDesktop ? desktopThead : <LibsMobileThead />}
           <tbody>
             {items.map((item, index) => {
-              return <Item key={index} data={item} isDesktop={isDesktop} />;
+              return <Item
+                key={index}
+                data={item}
+                isDesktop={isDesktop}
+                isItemFreezed={this.state.isItemFreezed}
+                freezeItem={this.freezeItem}
+                onMonitorRepo={this.props.onMonitorRepo}
+              />;
             })}
           </tbody>
         </table>
@@ -97,7 +118,8 @@ Content.propTypes = {
   items: PropTypes.array.isRequired,
   sortBy: PropTypes.string.isRequired,
   sortOrder: PropTypes.string.isRequired,
-  sortItems: PropTypes.func.isRequired
+  sortItems: PropTypes.func.isRequired,
+  onMonitorRepo: PropTypes.func.isRequired
 };
 
 class Item extends Component {
@@ -105,31 +127,40 @@ class Item extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      highlight: false,
       showOpIcon: false,
       unshared: false,
       isShowSharedDialog: false,
       isStarred: this.props.data.starred,
-      isOpMenuOpen: false // for mobile
+      isOpMenuOpen: false
     };
   }
 
   toggleOpMenu = () => {
     this.setState({
       isOpMenuOpen: !this.state.isOpMenuOpen
+    }, () => {
+      this.props.freezeItem(this.state.isOpMenuOpen);
     });
   }
 
   handleMouseOver = () => {
+    if (!this.props.isItemFreezed) {
       this.setState({
+        highlight: true,
         showOpIcon: true
       });
     }
+  }
 
   handleMouseOut = () => {
+    if (!this.props.isItemFreezed) {
       this.setState({
+        highlight: false,
         showOpIcon: false
       });
     }
+  }
 
   share = (e) => {
     e.preventDefault();
@@ -199,6 +230,26 @@ class Item extends Component {
     navigate(this.repoURL);
   }
 
+  watchFileChanges = () => {
+    const { data: repo } = this.props;
+    seafileAPI.monitorRepo(repo.repo_id).then(() => {
+      this.props.onMonitorRepo(repo, true);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
+  unwatchFileChanges = () => {
+    const { data: repo } = this.props;
+    seafileAPI.unMonitorRepo(repo.repo_id).then(() => {
+      this.props.onMonitorRepo(repo, false);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  }
+
   render() {
     if (this.state.unshared) {
       return null;
@@ -213,21 +264,47 @@ class Item extends Component {
     let shareIconClassName = 'op-icon sf2-icon-share repo-share-btn' + iconVisibility;
     let leaveShareIconClassName = 'op-icon sf2-icon-x3' + iconVisibility;
     let shareRepoUrl = this.repoURL = `${siteRoot}library/${data.repo_id}/${Utils.encodePath(data.repo_name)}/`;
+
+    // at present, only repo shared with 'r', 'rw' can be monitored.(Fri Feb 10 16:24:49 CST 2023)
+    const enableMonitorRepo = isPro && (data.permission == 'r' || data.permission == 'rw');
+
     const desktopItem = (
       <Fragment>
-        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+        <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
           <td className="text-center">
             <a href="#" role="button" aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} onClick={this.onToggleStarRepo}>
               <i className={`fa-star ${this.state.isStarred ? 'fas' : 'far star-empty'}`}></i>
             </a>
           </td>
           <td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
-          <td><Link to={shareRepoUrl}>{data.repo_name}</Link></td>
+          <td>
+            <Fragment>
+              <Link to={shareRepoUrl}>{data.repo_name}</Link>
+              {data.monitored && <RepoMonitoredIcon repoID={data.repo_id} />}
+            </Fragment>
+          </td>
           <td>
             {(isPro && data.is_admin) &&
               <a href="#" className={shareIconClassName} title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.share}></a>
             }
             <a href="#" className={leaveShareIconClassName} title={gettext('Leave Share')} role="button" aria-label={gettext('Leave Share')} onClick={this.leaveShare}></a>
+            {enableMonitorRepo &&
+            <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+              <DropdownToggle
+                tag="i"
+                role="button"
+                tabIndex="0"
+                className={`sf-dropdown-toggle sf2-icon-caret-down${iconVisibility}`}
+                title={gettext('More Operations')}
+                aria-label={gettext('More Operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.isOpMenuOpen}
+              />
+              <DropdownMenu>
+                <DropdownItem onClick={data.monitored ? this.unwatchFileChanges : this.watchFileChanges}>{data.monitored ? gettext('Unwatch File Changes') : gettext('Watch File Changes')}</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+            }
           </td>
           <td>{data.size}</td>
           <td title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</td>
@@ -256,7 +333,9 @@ class Item extends Component {
         <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
           <td onClick={this.visitRepo}><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
           <td onClick={this.visitRepo}>
-            <Link to={shareRepoUrl}>{data.repo_name}</Link><br />
+            <Link to={shareRepoUrl}>{data.repo_name}</Link>
+            {data.monitored && <RepoMonitoredIcon repoID={data.repo_id} />}
+            <br />
             <span className="item-meta-info" title={data.owner_contact_email}>{data.owner_name}</span>
             <span className="item-meta-info">{data.size}</span>
             <span className="item-meta-info" title={moment(data.last_modified).format('llll')}>{moment(data.last_modified).fromNow()}</span>
@@ -274,10 +353,9 @@ class Item extends Component {
                 <div className="mobile-operation-menu-bg-layer"></div>
                 <div className="mobile-operation-menu">
                   <DropdownItem className="mobile-menu-item" onClick={this.onToggleStarRepo}>{this.state.isStarred ? gettext('Unstar') : gettext('Star')}</DropdownItem>
-                  {(isPro && data.is_admin) &&
+                  {(isPro && data.is_admin) && <DropdownItem className="mobile-menu-item" onClick={this.share}>{gettext('Share')}</DropdownItem>}
-                  <DropdownItem className="mobile-menu-item" onClick={this.share}>{gettext('Share')}</DropdownItem>
-                  }
                   <DropdownItem className="mobile-menu-item" onClick={this.leaveShare}>{gettext('Leave Share')}</DropdownItem>
+                  {enableMonitorRepo && <DropdownItem className="mobile-menu-item" onClick={data.monitored ? this.unwatchFileChanges : this.watchFileChanges}>{data.monitored ? gettext('Unwatch File Changes') : gettext('Watch File Changes')}</DropdownItem>}
                 </div>
               </div>
             </Dropdown>
@@ -307,7 +385,10 @@ class Item extends Component {
 
 Item.propTypes = {
   isDesktop: PropTypes.bool.isRequired,
-  data: PropTypes.object.isRequired
+  data: PropTypes.object.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  freezeItem: PropTypes.func.isRequired,
+  onMonitorRepo: PropTypes.func.isRequired
 };
 
 class SharedLibraries extends Component {
@@ -356,6 +437,16 @@ class SharedLibraries extends Component {
     });
   }
 
+  onMonitorRepo = (repo, monitored) => {
+    let items = this.state.items.map(item => {
+      if (item.repo_id === repo.repo_id) {
+        item.monitored = monitored;
+      }
+      return item;
+    });
+    this.setState({items: items});
+  }
+
   render() {
     return (
       <Fragment>
@@ -373,6 +464,7 @@ class SharedLibraries extends Component {
                 sortBy={this.state.sortBy}
                 sortOrder={this.state.sortOrder}
                 sortItems={this.sortItems}
+                onMonitorRepo={this.onMonitorRepo}
               />
             </div>
           </div>