Add loading icon when dialog is init (#7878)

* 01 system admin share base to user

* 02 system admin share base to group

* 03 share sub folder set user permission

* 04 share sub folder set group permission

* 05 share repo to user

* 06 share repo to group add loading

* 07 share to invite users

* 08 share to other server

* 09 link emails

* 10 link emails

* 11 fix code format

frontend/src/components/dialog/lib-sub-folder-set-group-permission-dialog.js

@@ -10,6 +10,8 @@ import FileChooser from '../file-chooser';
 import GroupSelect from '../common/group-select';
 import toaster from '../../components/toast';
 import BackIcon from '../../components/back-icon';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';
 
 class GroupItem extends React.Component {
 
@@ -118,7 +120,8 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
       permission: 'rw',
       groupPermissionItems: [],
       folderPath: '',
-      showFileChooser: false
+      showFileChooser: false,
+      isLoading: true
     };
     this.options = [];
     if (!isPro) {
@@ -157,10 +160,14 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
     request.then((res) => {
       if (res.data.length !== 0) {
         this.setState({
-          groupPermissionItems: res.data
+          groupPermissionItems: res.data,
+          isLoading: false
         });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -378,6 +385,13 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.groupPermissionItems.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                 <table className="table-thead-hidden w-xs-250">
                   {thead}
                   <tbody>
@@ -396,6 +410,9 @@ class LibSubFolderSetGroupPermissionDialog extends React.Component {
                     })}
                   </tbody>
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/dialog/lib-sub-folder-set-user-permission-dialog.js

@@ -10,6 +10,8 @@ import SharePermissionEditor from '../select-editor/share-permission-editor';
 import FileChooser from '../file-chooser';
 import toaster from '../../components/toast';
 import BackIcon from '../../components/back-icon';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';
 
 class UserItem extends React.Component {
 
@@ -121,7 +123,8 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
       permission: 'rw',
       userFolderPermItems: [],
       folderPath: '',
-      showFileChooser: false
+      showFileChooser: false,
+      isLoading: true
     };
     if (!isPro) {
       this.permissions = ['r', 'rw'];
@@ -141,9 +144,15 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
       seafileAPI.listUserFolderPerm(repoID, folderPath);
     request.then((res) => {
       if (res.data.length !== 0) {
-        this.setState({ userFolderPermItems: res.data });
+        this.setState({
+          userFolderPermItems: res.data,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -341,6 +350,13 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {userFolderPermItems.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                 <table className="table-thead-hidden w-xs-250">
                   {thead}
                   <tbody>
@@ -359,6 +375,9 @@ class LibSubFolderSetUserPermissionDialog extends React.Component {
                     })}
                   </tbody>
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/dialog/share-to-group.js

@@ -10,6 +10,8 @@ import SharePermissionEditor from '../select-editor/share-permission-editor';
 import EventBus from '../common/event-bus';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 import GroupSelect from '../common/group-select';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';
 
 class GroupItem extends React.Component {
 
@@ -178,7 +180,8 @@ class ShareToGroup extends React.Component {
       errorMsg: [],
       permission: 'rw',
       sharedItems: [],
-      isWiki: this.props.repoType === 'wiki'
+      isWiki: this.props.repoType === 'wiki',
+      isLoading: true
     };
     this.permissions = [];
     let { itemType, isRepoOwner } = props;
@@ -253,10 +256,14 @@ class ShareToGroup extends React.Component {
     seafileAPI.listSharedItems(repoID, path, 'group').then((res) => {
       if (res.data.length !== 0) {
         this.setState({
-          sharedItems: res.data
+          sharedItems: res.data,
+          isLoading: false
         });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -466,6 +473,13 @@ class ShareToGroup extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} />
+              ) : (
                 <table className="table-thead-hidden">
                   {thead}
                   <GroupList
@@ -476,6 +490,9 @@ class ShareToGroup extends React.Component {
                     onChangeUserPermission={this.onChangeUserPermission}
                   />
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/dialog/share-to-invite-people.js

@@ -9,6 +9,7 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import Loading from '../loading';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
+import EmptyTip from '../empty-tip';
 import '../../css/invitations.css';
 
 class UserItem extends React.Component {
@@ -140,6 +141,7 @@ class ShareToInvitePeople extends React.Component {
       sharedItems: [],
       emails: '',
       isSubmitting: false,
+      isLoading: true
     };
     this.permissions = ['rw', 'r'];
   }
@@ -168,9 +170,15 @@ class ShareToInvitePeople extends React.Component {
     const repoID = this.props.repoID;
     seafileAPI.listRepoShareInvitations(repoID, path).then((res) => {
       if (res.data.length !== 0) {
-        this.setState({ sharedItems: res.data.repo_share_invitation_list });
+        this.setState({
+          sharedItems: res.data.repo_share_invitation_list,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       const errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -327,6 +335,13 @@ class ShareToInvitePeople extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                 <table className="w-xs-200">
                   <thead>
                     <tr>
@@ -344,6 +359,9 @@ class ShareToInvitePeople extends React.Component {
                     onChangeUserPermission={this.onChangeUserPermission}
                   />
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/dialog/share-to-other-server.js

@@ -9,6 +9,8 @@ import toaster from '../toast';
 import OpIcon from '../op-icon';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import { SeahubSelect } from '../common/select';
+import EmptyTip from '../empty-tip';
+import Loading from '../loading';
 
 class ShareItem extends React.Component {
 
@@ -60,15 +62,6 @@ class ShareItem extends React.Component {
         <td><a href={item.to_server_url} target="_blank" rel="noreferrer">{item.to_server_name}</a></td>
         <td>{item.to_user}</td>
         <td>{Utils.sharePerms(item.permission)}</td>
-        {/* <td>
-          <SharePermissionEditor
-            isTextMode={true}
-            isEditIconShow={this.state.isOperationShow}
-            currentPermission={currentPermission}
-            permissions={this.props.permissions}
-            onPermissionChanged={this.onChangeUserPermission}
-          />
-        </td> */}
         <td>
           <OpIcon
             className={`sf3-font sf3-font-x-01 op-icon ${isOperationShow && !isOpFrozen ? '' : 'd-none'}`}
@@ -140,18 +133,23 @@ class ShareToOtherServer extends React.Component {
       permission: 'rw',
       btnDisabled: true,
       isSubmitting: false,
-      ocmShares: []
+      ocmShares: [],
+      isLoading: true
     };
     this.permissions = ['rw', 'r'];
   }
 
   componentDidMount() {
     seafileAPI.listOCMSharesPrepare(this.props.repoID).then((res) => {
-      this.setState({ ocmShares: res.data.ocm_share_list });
+      this.setState({
+        ocmShares: res.data.ocm_share_list,
+        isLoading: false
+      });
     }).catch(error => {
       let errMessage = Utils.getErrorMsg(error);
       this.setState({
-        errorMsg: errMessage
+        errorMsg: errMessage,
+        isLoading: false
       });
     });
   }
@@ -275,13 +273,22 @@ class ShareToOtherServer extends React.Component {
             </tr>
           </tbody>
         </table>
-        {errorMsg ?
+        {errorMsg ? (
-          <p className="error text-center mt-4">{errorMsg}</p> :
+          <p className="error text-center mt-4">{errorMsg}</p>
+        ) : this.state.isLoading ? (
+          <Loading />
+        ) : (
+          <>
+            {ocmShares.length === 0 ? (
+              <EmptyTip text={gettext('No results')} />
+            ) : (
               <ShareList
                 items={ocmShares}
                 deleteShareItem={this.deleteShareItem}
               />
-        }
+            )}
+          </>
+        )}
       </Fragment>
     );
   }

frontend/src/components/dialog/share-to-user.js

@@ -9,6 +9,8 @@ import toaster from '../toast';
 import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import DepartmentDetailDialog from './department-detail-dialog';
+import EmptyTip from '../../components/empty-tip';
+import Loading from '../../components/loading';
 
 import '../../css/invitations.css';
 import '../../css/share-to-user.css';
@@ -246,7 +248,8 @@ class ShareToUser extends React.Component {
       isWiki: this.props.repoType === 'wiki',
       tmpUserList: [],
       enableSelectMembersFromDept: false,
-      isShowDepartmentDetailDialog: false
+      isShowDepartmentDetailDialog: false,
+      isLoading: true
     };
     this.options = [];
     this.permissions = [];
@@ -287,9 +290,16 @@ class ShareToUser extends React.Component {
             'permission': item.permission
           };
         });
-        this.setState({ sharedItems: res.data, tmpUserList: tmpUserList });
+        this.setState({
+          sharedItems: res.data,
+          tmpUserList: tmpUserList,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -606,6 +616,13 @@ class ShareToUser extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} />
+              ) : (
                 <table className="table-thead-hidden">
                   {thead}
                   <UserList
@@ -616,6 +633,9 @@ class ShareToUser extends React.Component {
                     onChangeUserPermission={this.onChangeUserPermission}
                   />
                 </table>
+              )}
+            </>
+          )}
           {this.state.isShowDepartmentDetailDialog &&
           <DepartmentDetailDialog
             toggleDepartmentDetailDialog={this.toggleDepartmentDetailDialog}

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-group.js

@@ -6,8 +6,10 @@ import { seafileAPI } from '../../../utils/seafile-api';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
 import toaster from '../../toast';
+import EmptyTip from '../../../components/empty-tip';
 import SharePermissionEditor from '../../select-editor/share-permission-editor';
 import GroupSelect from '../../common/group-select';
+import Loading from '../../../components/loading';
 
 class GroupItem extends React.Component {
 
@@ -119,7 +121,8 @@ class SysAdminShareToGroup extends React.Component {
       selectedOptions: [],
       errorMsg: [],
       permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isLoading: true
     };
     this.options = [];
     this.permissions = ['rw', 'r'];
@@ -175,10 +178,14 @@ class SysAdminShareToGroup extends React.Component {
     systemAdminAPI.sysAdminListRepoSharedItems(repoID, 'group').then((res) => {
       if (res.data.length !== 0) {
         this.setState({
-          sharedItems: res.data
+          sharedItems: res.data,
+          isLoading: false
         });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -301,6 +308,13 @@ class SysAdminShareToGroup extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} className="mt-8 mb-8" />
+              ) : (
                 <table className="table-thead-hidden">
                   <thead>
                     <tr>
@@ -316,6 +330,9 @@ class SysAdminShareToGroup extends React.Component {
                     onChangeUserPermission={this.onChangeUserPermission}
                   />
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/dialog/sysadmin-dialog/sysadmin-share-to-user.js

@@ -4,6 +4,8 @@ import { isPro, gettext } from '../../../utils/constants';
 import { Button } from 'reactstrap';
 import { systemAdminAPI } from '../../../utils/system-admin-api';
 import { Utils } from '../../../utils/utils';
+import EmptyTip from '../../../components/empty-tip';
+import Loading from '../../loading';
 import toaster from '../../toast';
 import UserSelect from '../../user-select';
 import SharePermissionEditor from '../../select-editor/share-permission-editor';
@@ -117,7 +119,8 @@ class SysAdminShareToUser extends React.Component {
       selectedUsers: [],
       errorMsg: [],
       permission: 'rw',
-      sharedItems: []
+      sharedItems: [],
+      isLoading: true
     };
     this.options = [];
     this.permissions = ['rw', 'r'];
@@ -135,9 +138,15 @@ class SysAdminShareToUser extends React.Component {
     let repoID = this.props.repoID;
     systemAdminAPI.sysAdminListRepoSharedItems(repoID, 'user').then((res) => {
       if (res.data.length !== 0) {
-        this.setState({ sharedItems: res.data });
+        this.setState({
+          sharedItems: res.data,
+          isLoading: false
+        });
+      } else {
+        this.setState({ isLoading: false });
       }
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -273,6 +282,13 @@ class SysAdminShareToUser extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {this.state.sharedItems.length === 0 ? (
+                <EmptyTip text={gettext('No share link')} className="mt-8 mb-8" />
+              ) : (
                 <table className="table-thead-hidden">
                   <thead>
                     <tr>
@@ -288,6 +304,9 @@ class SysAdminShareToUser extends React.Component {
                     onChangeUserPermission={this.onChangeUserPermission}
                   />
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/share-link-panel/link-authenticated-emails.js

@@ -6,6 +6,8 @@ import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import { shareLinkAPI } from '../../utils/share-link-api';
 import BackIcon from '../back-icon';
+import EmptyTip from '../empty-tip';
+import Loading from '../loading';
 
 class EmailItem extends React.Component {
 
@@ -84,7 +86,8 @@ class LinkAuthenticatedEmails extends React.Component {
     this.state = {
       inputEmails: '',
       authEmails: [],
-      isSubmitting: false
+      isSubmitting: false,
+      isLoading: true
     };
   }
 
@@ -95,8 +98,12 @@ class LinkAuthenticatedEmails extends React.Component {
   getItems = () => {
     const { linkToken, path } = this.props;
     shareLinkAPI.listShareLinkAuthEmails(linkToken, path).then(res => {
-      this.setState({ authEmails: res.data.auth_list });
+      this.setState({
+        authEmails: res.data.auth_list,
+        isLoading: false
+      });
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -198,6 +205,13 @@ class LinkAuthenticatedEmails extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {authEmails.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                 <table className="table-thead-hidden w-xs-200">
                   {thead}
                   <tbody>
@@ -213,6 +227,9 @@ class LinkAuthenticatedEmails extends React.Component {
                     })}
                   </tbody>
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );

frontend/src/components/share-link-panel/link-authenticated-users.js

@@ -7,6 +7,8 @@ import { Utils } from '../../utils/utils';
 import UserSelect from '../user-select';
 import toaster from '../toast';
 import BackIcon from '../../components/back-icon';
+import EmptyTip from '../empty-tip';
+import Loading from '../loading';
 
 class UserItem extends React.Component {
 
@@ -90,7 +92,8 @@ class LinkAuthenticatedUsers extends React.Component {
     super(props);
     this.state = {
       selectedUsers: [],
-      authUsers: []
+      authUsers: [],
+      isLoading: true
     };
   }
 
@@ -101,8 +104,12 @@ class LinkAuthenticatedUsers extends React.Component {
   listLinkAuthUsers = () => {
     const { linkToken, path } = this.props;
     shareLinkAPI.listShareLinkAuthUsers(linkToken, path).then(res => {
-      this.setState({ authUsers: res.data.auth_list });
+      this.setState({
+        authUsers: res.data.auth_list,
+        isLoading: false
+      });
     }).catch(error => {
+      this.setState({ isLoading: false });
       let errMessage = Utils.getErrorMsg(error);
       toaster.danger(errMessage);
     });
@@ -199,6 +206,13 @@ class LinkAuthenticatedUsers extends React.Component {
           </tbody>
         </table>
         <div className="share-list-container">
+          {this.state.isLoading ? (
+            <Loading />
+          ) : (
+            <>
+              {authUsers.length === 0 ? (
+                <EmptyTip text={gettext('No results')} />
+              ) : (
                 <table className="table-thead-hidden w-xs-200">
                   {thead}
                   <tbody>
@@ -214,6 +228,9 @@ class LinkAuthenticatedUsers extends React.Component {
                     })}
                   </tbody>
                 </table>
+              )}
+            </>
+          )}
         </div>
       </Fragment>
     );