update transfer repo (#6965)

* update

* optimize code

* optimize

* update sql

* test

* update

* optimize

* update UI

* change style

---------

Co-authored-by: 孙永强 <11704063+s-yongqiang@user.noreply.gitee.com>
Co-authored-by: Michael An <2331806369@qq.com>

frontend/src/components/dialog/transfer-dialog.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter,
-  Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+  Nav, NavItem, NavLink, TabContent, TabPane, Label } from 'reactstrap';
 import makeAnimated from 'react-select/animated';
 import { seafileAPI } from '../../utils/seafile-api';
 import { systemAdminAPI } from '../../utils/system-admin-api';
@@ -10,6 +10,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UserSelect from '../user-select';
 import { SeahubSelect } from '../common/select';
+import Switch from '../common/switch';
 import '../../css/transfer-dialog.css';
 
 const propTypes = {
@@ -34,6 +35,7 @@ class TransferDialog extends React.Component {
       errorMsg: [],
       transferToUser: true,
       transferToGroup: false,
+      reshare: false,
       activeTab: !this.props.isDepAdminTransfer ? TRANS_USER : TRANS_DEPART
     };
     this.options = [];
@@ -44,15 +46,15 @@ class TransferDialog extends React.Component {
   };
 
   submit = () => {
-    const { activeTab } = this.state;
+    const { activeTab, reshare } = this.state;
     if (activeTab === TRANS_DEPART) {
       let department = this.state.selectedOption;
-      this.props.submit(department);
+      this.props.submit(department, reshare);
     } else if (activeTab === TRANS_USER) {
       let selectedOption = this.state.selectedOption;
       if (selectedOption && selectedOption[0]) {
         let user = selectedOption[0];
-        this.props.submit(user);
+        this.props.submit(user, reshare);
       }
     }
   };
@@ -60,13 +62,7 @@ class TransferDialog extends React.Component {
   componentDidMount() {
     if (this.props.isOrgAdmin) {
       seafileAPI.orgAdminListDepartments(orgID).then((res) => {
-        for (let i = 0; i < res.data.length; i++) {
-          let obj = {};
-          obj.value = res.data[i].name;
-          obj.email = res.data[i].email;
-          obj.label = res.data[i].name;
-          this.options.push(obj);
-        }
+        this.updateOptions(res);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -74,27 +70,15 @@ class TransferDialog extends React.Component {
     }
     else if (this.props.isSysAdmin) {
       systemAdminAPI.sysAdminListDepartments().then((res) => {
-        for (let i = 0; i < res.data.length; i++) {
-          let obj = {};
-          obj.value = res.data[i].name;
-          obj.email = res.data[i].email;
-          obj.label = res.data[i].name;
-          this.options.push(obj);
-        }
+        this.updateOptions(res);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
     }
-    else {
+    else if (isPro) {
       seafileAPI.listDepartments().then((res) => {
-        for (let i = 0; i < res.data.length; i++) {
-          let obj = {};
-          obj.value = res.data[i].name;
-          obj.email = res.data[i].email;
-          obj.label = res.data[i].name;
-          this.options.push(obj);
-        }
+        this.updateOptions(res);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
@@ -102,6 +86,17 @@ class TransferDialog extends React.Component {
     }
   }
 
+  updateOptions = (departmentsRes) => {
+    departmentsRes.data.forEach(item => {
+      let option = {
+        value: item.name,
+        email: item.email,
+        label: item.name,
+      };
+      this.options.push(option);
+    });
+  };
+
   onClick = () => {
     this.setState({
       transferToUser: !this.state.transferToUser,
@@ -110,12 +105,23 @@ class TransferDialog extends React.Component {
 
   toggle = (tab) => {
     if (this.state.activeTab !== tab) {
-      this.setState({ activeTab: tab });
+      this.setState({
+        activeTab: tab,
+        reshare: false,
+        selectedOption: null,
+      });
     }
   };
 
+  toggleReshareStatus = () => {
+    this.setState({
+      reshare: !this.state.reshare
+    });
+  };
+
   renderTransContent = () => {
     let activeTab = this.state.activeTab;
+    let reshare = this.state.reshare;
     let canTransferToDept = true;
     if (this.props.canTransferToDept != undefined) {
       canTransferToDept = this.props.canTransferToDept;
@@ -153,15 +159,27 @@ class TransferDialog extends React.Component {
           <TabContent activeTab={this.state.activeTab}>
             <Fragment>
               <TabPane tabId="transUser" role="tabpanel" id="transfer-user-panel">
+                <Label className='transfer-repo-label'>{gettext('Users')}</Label>
                 <UserSelect
                   ref="userSelect"
                   isMulti={false}
                   placeholder={gettext('Select a user')}
                   onSelectChange={this.handleSelectChange}
                 />
+                <Switch
+                  checked={reshare}
+                  disabled={false}
+                  size="large"
+                  textPosition="right"
+                  className='transfer-repo-reshare-switch w-100 mt-3 mb-1'
+                  onChange={this.toggleReshareStatus}
+                  placeholder={gettext('Keep sharing')}
+                />
+                <div className='tip'>{gettext('If the library is shared to another user, the sharing will be ketp.')}</div>
               </TabPane>
               {isPro && canTransferToDept &&
               <TabPane tabId="transDepart" role="tabpanel" id="transfer-depart-panel">
+                <Label className='transfer-repo-label'>{gettext('Departments')}</Label>
                 <SeahubSelect
                   isClearable
                   maxMenuHeight={200}
@@ -171,7 +189,18 @@ class TransferDialog extends React.Component {
                   options={this.options}
                   onChange={this.handleSelectChange}
                   value={this.state.selectedOption}
+                  className="transfer-repo-select-department"
                 />
+                <Switch
+                  checked={reshare}
+                  disabled={false}
+                  size="large"
+                  textPosition="right"
+                  className='transfer-repo-reshare-switch w-100 mt-3 mb-1'
+                  onChange={this.toggleReshareStatus}
+                  placeholder={gettext('Keep sharing')}
+                />
+                <div className='tip'>{gettext('If the library is shared to another department, the sharing will be ketp.')}</div>
               </TabPane>}
             </Fragment>
           </TabContent>

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

@@ -242,10 +242,10 @@ class SharedRepoListItem extends React.Component {
     this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
   };
 
-  onTransferRepo = (user) => {
+  onTransferRepo = (user, reshare) => {
     let repoID = this.props.repo.repo_id;
     let groupID = this.props.currentGroup.id;
-    userAPI.depAdminTransferRepo(repoID, groupID, user.email).then(res => {
+    userAPI.depAdminTransferRepo(repoID, groupID, user.email, reshare).then(res => {
       this.props.onTransferRepo(repoID, groupID, user.email);
       let message = gettext('Successfully transferred the library.');
       toaster.success(message);

frontend/src/components/user-select.js

@@ -114,4 +114,8 @@ class UserSelect extends React.Component {
 
 UserSelect.propTypes = propTypes;
 
+UserSelect.defaultProps = {
+  className: ''
+};
+
 export default UserSelect;

frontend/src/css/switch.css

@@ -1,3 +1,7 @@
+.seahub-switch .custom-switch {
+  cursor: pointer;
+}
+
 .seahub-switch.small .custom-switch-indicator {
   width: 22px;
   height: 12px;

frontend/src/css/transfer-dialog.css

@@ -52,3 +52,41 @@
 .transfer-dialog-content .transfer-dialog-main .tab-pane {
   height: 100%;
 }
+
+.transfer-dialog-content .transfer-dialog-main .transfer-repo-label {
+  color: #666;
+}
+
+.transfer-dialog-content .transfer-dialog-main .user-select,
+.transfer-dialog-content .transfer-dialog-main .transfer-repo-select-department {
+  padding: 8px 0;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.transfer-dialog-content .transfer-dialog-main .transfer-repo-reshare-switch .custom-switch {
+  padding-left: 0;
+}
+
+.transfer-dialog-side .nav-item .nav-link:hover {
+  background-color: #f0f0f0;
+}
+
+.transfer-dialog-side .nav-item .nav-link.active {
+  position: relative;
+  background-color: #f5f5f5;
+  color: #212529;
+  border-bottom: 0.125rem solid transparent;
+}
+
+.transfer-dialog-side .nav-item .nav-link.active::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 3px;
+  height: 28px;
+  left: -4px;
+  top: 3px;
+  background-color: #FF8000;
+  border-radius: 2px;
+}

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

@@ -24,6 +24,7 @@ import RepoShareAdminDialog from '../../components/dialog/repo-share-admin-dialo
 import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
 import { GRID_MODE, LIST_MODE } from '../../components/dir-view-mode/constants';
+import { userAPI } from '../../utils/user-api';
 
 const propTypes = {
   currentViewMode: PropTypes.string,
@@ -267,9 +268,9 @@ class MylibRepoListItem extends React.Component {
     this.setState({ isRenaming: !this.state.isRenaming });
   };
 
-  onTransferRepo = (user) => {
+  onTransferRepo = (user, reshare) => {
     let repoID = this.props.repo.repo_id;
-    seafileAPI.transferRepo(repoID, user.email).then(res => {
+    userAPI.transferRepo(repoID, user.email, reshare).then(res => {
       this.props.onTransferRepo(repoID);
       let message = gettext('Successfully transferred the library.');
       toaster.success(message);

frontend/src/pages/org-admin/libraries/org-all-repos.js

@@ -14,6 +14,7 @@ import { navigate } from '@gatsbyjs/reach-router';
 import OrgAdminRepo from '../../../models/org-admin-repo';
 import MainPanelTopbar from '../main-panel-topbar';
 import ReposNav from './org-repo-nav';
+import { orgAdminAPI } from '../../../utils/org-admin-api';
 
 
 class Content extends Component {
@@ -225,9 +226,9 @@ class RepoItem extends React.Component {
     this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
   };
 
-  onTransferRepo = (user) => {
+  onTransferRepo = (user, reshare) => {
     let repo = this.props.repo;
-    seafileAPI.orgAdminTransferOrgRepo(orgID, repo.repoID, user.email).then(res => {
+    orgAdminAPI.orgAdminTransferOrgRepo(orgID, repo.repoID, user.email, reshare).then(res => {
       this.props.transferRepoItem(repo.repoID, user);
       let msg = gettext('Successfully transferred the library.');
       toaster.success(msg);

frontend/src/pages/sys-admin/repos/repos.js

@@ -168,8 +168,8 @@ class Item extends Component {
     });
   };
 
-  onTransferRepo = (owner) => {
-    systemAdminAPI.sysAdminTransferRepo(this.props.repo.id, owner.email).then((res) => {
+  onTransferRepo = (owner, reshare) => {
+    systemAdminAPI.sysAdminTransferRepo(this.props.repo.id, owner.email, reshare).then((res) => {
       this.props.onTransferRepo(res.data);
       let message = gettext('Successfully transferred the library.');
       toaster.success(message);

frontend/src/pages/sys-admin/users/user-repos.js

@@ -137,8 +137,8 @@ class Item extends Component {
     this.setState({ isTransferDialogOpen: !this.state.isTransferDialogOpen });
   };
 
-  transferRepo = (owner) => {
-    this.props.transferRepo(this.props.item.id, owner.email);
+  transferRepo = (owner, reshare) => {
+    this.props.transferRepo(this.props.item.id, owner.email, reshare);
     this.toggleTransferDialog();
   };
 
@@ -287,8 +287,8 @@ class Repos extends Component {
     });
   };
 
-  transferRepo = (repoID, email) => {
-    systemAdminAPI.sysAdminTransferRepo(repoID, email).then((res) => {
+  transferRepo = (repoID, email, reshare) => {
+    systemAdminAPI.sysAdminTransferRepo(repoID, email, reshare).then((res) => {
       let newRepoList = this.state.repoList.filter(item => {
         return item.id != repoID;
       });

frontend/src/utils/org-admin-api.js

@@ -59,6 +59,14 @@ class OrgAdminAPI {
     return this.req.get(url, { params: params });
   }
 
+  orgAdminTransferOrgRepo(orgID, repoID, email, reshare) {
+    const url = this.server + '/api/v2.1/org/' + orgID + '/admin/repos/' + repoID + '/';
+    const form = new FormData();
+    form.append('email', email);
+    form.append('reshare', reshare);
+    return this.req.put(url, form);
+  }
+
 }
 
 let orgAdminAPI = new OrgAdminAPI();

frontend/src/utils/system-admin-api.js

@@ -221,10 +221,11 @@ class SystemAdminAPI {
     return this.req.delete(url);
   }
 
-  sysAdminTransferRepo(repoID, userEmail) {
+  sysAdminTransferRepo(repoID, userEmail, reshare) {
     const url = this.server + '/api/v2.1/admin/libraries/' + repoID + '/';
     const params = {
-      owner: userEmail
+      owner: userEmail,
+      reshare: reshare,
     };
     return this.req.put(url, params);
   }
@@ -725,6 +726,7 @@ class SystemAdminAPI {
     return this.req.get(url, { params: params });
   }
 
+
   sysAdminListAdminLoginLogs(page, perPage) {
     const url = this.server + '/api/v2.1/admin/admin-login-logs/';
     let params = {

frontend/src/utils/user-api.js

@@ -48,12 +48,21 @@ class UserAPI {
     return this.req.get(url);
   }
 
-  depAdminTransferRepo(repo_id, group_id, email) {
+  depAdminTransferRepo(repo_id, group_id, email, reshare) {
     const url = this.server + '/api/v2.1/groups/' + group_id + '/group-owned-libraries/' + repo_id + '/transfer/';
     const formData = new FormData();
     formData.append('email', email);
+    formData.append('reshare', reshare);
     return this.req.put(url, formData);
   }
+
+  transferRepo(repoID, owner, reshare) {
+    const url = this.server + '/api2/repos/' + repoID + '/owner/';
+    const form = new FormData();
+    form.append('owner', owner);
+    form.append('reshare', reshare);
+    return this.req.put(url, form);
+  }
 }
 
 let userAPI = new UserAPI();