improve upload interactive (#3941)

* improve upload interactive

* improve code

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

@@ -24,7 +24,16 @@ class DirPath extends React.Component {
     this.props.onPathClick(path);
   }
 
-  onTabNavClick = (tabName, id) => {
+  onTabNavClick = (e, tabName, id) => {
+    if (window.uploader && 
+      window.uploader.isUploadProgressDialogShow && 
+      window.uploader.totalProgress !== 100) {
+        if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
+          e.preventDefault();
+          return false;
+        }
+        window.uploader.isUploadProgressDialogShow = false;
+    }
     this.props.onTabNavClick(tabName, id);
   }
 
@@ -72,20 +81,20 @@ class DirPath extends React.Component {
         {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
           return (
             <Fragment key={index}>
-              <Link to={item.url} className="normal" onClick={() => this.onTabNavClick(item.name, item.id)}>{gettext(item.showName)}</Link>
+              <Link to={item.url} className="normal" onClick={(e) => this.onTabNavClick(e, item.name, item.id)}>{gettext(item.showName)}</Link>
               <span className="path-split">/</span>
             </Fragment>
           );
         })}
         {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
           <Fragment>
-            <Link to={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick('my-libs')}>{gettext('Libraries')}</Link>
+            <Link to={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
             <span className="path-split">/</span>
           </Fragment>
         )}
         {!this.props.pathPrefix && (
           <Fragment>
-            <Link href={siteRoot + 'my-libs/'} className="normal" onClick={() => this.onTabNavClick('my-libs')}>{gettext('Libraries')}</Link>
+            <Link href={siteRoot + 'my-libs/'} className="normal" onClick={(e) => this.onTabNavClick(e, 'my-libs')}>{gettext('Libraries')}</Link>
             <span className="path-split">/</span>
           </Fragment>
         )}

frontend/src/components/file-uploader/file-uploader.js

@@ -53,6 +53,7 @@ class FileUploader extends React.Component {
     this.timestamp = null;
     this.loaded = 0;
     this.bitrateInterval = 500; // Interval in milliseconds to calculate the bitrate
+    window.onbeforeunload = this.onbeforeunload;
   }
 
   componentDidMount() {
@@ -86,11 +87,20 @@ class FileUploader extends React.Component {
   }
 
   componentWillUnmount = () => {
+    window.onbeforeunload = null;
     if (this.props.dragAndDrop === true) {
       this.resumable.disableDropOnDocument();
     }
   }
 
+  onbeforeunload = () => {
+    if (window.uploader && 
+        window.uploader.isUploadProgressDialogShow && 
+        window.uploader.totalProgress !== 100) {
+      return '';
+    }
+  }
+
   bindCallbackHandler = () => {
     let {maxFilesErrorCallback, minFileSizeErrorCallback, maxFileSizeErrorCallback, fileTypeErrorCallback } = this.props;
 
@@ -207,6 +217,7 @@ class FileUploader extends React.Component {
       isUploadProgressDialogShow: true,
       uploadFileList: uploadFileList,
     });
+    Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', true);
   }
 
   buildCustomFileObj = (resumableFile) => {
@@ -261,6 +272,7 @@ class FileUploader extends React.Component {
       totalProgress: progress,
       uploadBitrate: uploadBitrate
     });
+    Utils.registerGlobalVariable('uploader', 'totalProgress', progress);
   }
 
   onFileUploadSuccess = (resumableFile, message) => {
@@ -466,6 +478,7 @@ class FileUploader extends React.Component {
   onCloseUploadDialog = () => {
     this.resumable.files = [];
     this.setState({isUploadProgressDialogShow: false, uploadFileList: []});
+    Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', false);
   }
 
   onUploadCancel = (uploadingItem) => {
@@ -529,6 +542,7 @@ class FileUploader extends React.Component {
     }, () => {
       this.resumable.upload();
     });
+    Utils.registerGlobalVariable('uploader', 'isUploadProgressDialogShow', true);
   }
 
   cancelFileUpload = () => {

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

@@ -62,7 +62,16 @@ class MainSideNav extends React.Component {
     });
   }
 
-  tabItemClick = (param, id) => {
+  tabItemClick = (e, param, id) => {
+    if (window.uploader && 
+      window.uploader.isUploadProgressDialogShow && 
+      window.uploader.totalProgress !== 100) {
+        if (!window.confirm(gettext('A file is being uploaded. Are you sure you want to leave this page?'))) {
+          e.preventDefault();
+          return false;
+        }
+        window.uploader.isUploadProgressDialogShow = false;
+    }
     this.props.tabItemClick(param, id);
   }
 
@@ -78,7 +87,7 @@ class MainSideNav extends React.Component {
     return (
       <ul className={`nav sub-nav nav-pills flex-column grp-list ${this.state.groupsExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style}>
         <li className="nav-item"> 
-          <Link to={siteRoot + 'groups/'}  className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={() => this.tabItemClick('groups')}>
+          <Link to={siteRoot + 'groups/'}  className={`nav-link ellipsis ${this.getActiveClass('groups')}`} onClick={(e) => this.tabItemClick(e, 'groups')}>
             <span className="sharp" aria-hidden="true">#</span>
             <span className="nav-text">{gettext('All Groups')}</span>
           </Link>
@@ -86,7 +95,7 @@ class MainSideNav extends React.Component {
         {this.state.groupItems.map(item => {
           return (
             <li key={item.id} className="nav-item"> 
-              <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={() => this.tabItemClick(item.name, item.id)}>
+              <Link to={siteRoot + 'group/' + item.id + '/'} className={`nav-link ellipsis ${this.getActiveClass(item.name)}`} onClick={(e) => this.tabItemClick(e, item.name, item.id)}>
                 <span className="sharp" aria-hidden="true">#</span>
                 <span className="nav-text">{item.name}</span>
               </Link>
@@ -111,7 +120,7 @@ class MainSideNav extends React.Component {
     if (canGenerateShareLink) {
       linksNavItem = (
         <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-share-links')}>
+          <Link to={siteRoot + 'share-admin-share-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-share-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-share-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
           </Link>
@@ -120,7 +129,7 @@ class MainSideNav extends React.Component {
     } else if (canGenerateUploadLink) {
       linksNavItem = (
         <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={() => this.tabItemClick('share-admin-upload-links')}>
+          <Link to={siteRoot + 'share-admin-upload-links/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-upload-links')}`} title={gettext('Links')} onClick={(e) => this.tabItemClick(e, 'share-admin-upload-links')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Links')}</span>
           </Link>
@@ -131,14 +140,14 @@ class MainSideNav extends React.Component {
       <ul className={`nav sub-nav nav-pills flex-column ${this.state.sharedExtended ? 'side-panel-slide' : 'side-panel-slide-up'}`} style={style} >
         {canAddRepo && (
           <li className="nav-item">
-            <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={() => this.tabItemClick('share-admin-libs')}>
+            <Link to={siteRoot + 'share-admin-libs/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-libs')}`} title={gettext('Libraries')} onClick={(e) => this.tabItemClick(e, 'share-admin-libs')}>
               <span aria-hidden="true" className="sharp">#</span>
               <span className="nav-text">{gettext('Libraries')}</span>
             </Link>
           </li>
         )}
         <li className="nav-item">
-          <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={() => this.tabItemClick('share-admin-folders')}>
+          <Link to={siteRoot + 'share-admin-folders/'} className={`nav-link ellipsis ${this.getActiveClass('share-admin-folders')}`} title={gettext('Folders')} onClick={(e) => this.tabItemClick(e, 'share-admin-folders')}>
             <span aria-hidden="true" className="sharp">#</span>
             <span className="nav-text">{gettext('Folders')}</span>
           </Link>
@@ -157,20 +166,20 @@ class MainSideNav extends React.Component {
           <ul className="nav nav-pills flex-column nav-container">
             {canAddRepo && (
               <li className="nav-item">
-                <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={() => this.tabItemClick('my-libs')}>
+                <Link to={ siteRoot + 'my-libs/' } className={`nav-link ellipsis ${this.getActiveClass('my-libs') || this.getActiveClass('deleted') }`} title={gettext('My Libraries')} onClick={(e) => this.tabItemClick(e, 'my-libs')}>
                   <span className="sf2-icon-user" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('My Libraries')}</span>
                 </Link>
               </li>
             )}
             <li className="nav-item">
-              <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={() => this.tabItemClick('shared-libs')}>
+              <Link to={siteRoot + 'shared-libs/'} className={`nav-link ellipsis ${this.getActiveClass('shared-libs')}`} title={gettext('Shared with me')} onClick={(e) => this.tabItemClick(e, 'shared-libs')}>
                 <span className="sf2-icon-share" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Shared with me')}</span>
               </Link>
             </li>
             { canViewOrg &&
-              <li className="nav-item" onClick={() => this.tabItemClick('org')}>
+              <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'org')}>
                 <Link to={ siteRoot + 'org/' } className={`nav-link ellipsis ${this.getActiveClass('org')}`} title={gettext('Shared with all')}>
                   <span className="sf2-icon-organization" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Shared with all')}</span>
@@ -190,14 +199,14 @@ class MainSideNav extends React.Component {
           <h3 className="sf-heading">{gettext('Tools')}</h3>
           <ul className="nav nav-pills flex-column nav-container">
             <li className="nav-item">
-              <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={() => this.tabItemClick('starred')}>
+              <Link className={`nav-link ellipsis ${this.getActiveClass('starred')}`} to={siteRoot + 'starred/'} title={gettext('Favorites')} onClick={(e) => this.tabItemClick(e, 'starred')}>
                 <span className="sf2-icon-star" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Favorites')}</span>
               </Link>
             </li>
             {showActivity &&
               <li className="nav-item">
-                <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={() => this.tabItemClick('dashboard')}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('dashboard')}`} to={siteRoot + 'dashboard/'} title={gettext('Activities')} onClick={(e) => this.tabItemClick(e, 'dashboard')}>
                   <span className="sf2-icon-clock" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Activities')}</span>
                 </Link>
@@ -205,14 +214,14 @@ class MainSideNav extends React.Component {
             }
             {enableWiki &&
               <li className="nav-item">
-                <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={() => this.tabItemClick('published')}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('published')}`} to={siteRoot + 'published/'} title={gettext('Published Libraries')} onClick={(e) => this.tabItemClick(e, 'published')}>
                   <span className="sf2-icon-wiki-view" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Published Libraries')}</span>
                 </Link>
               </li>
             }
             {isDocs &&
-              <li className="nav-item" onClick={() => this.tabItemClick('drafts')}>
+              <li className="nav-item" onClick={(e) => this.tabItemClick(e, 'drafts')}>
                 <Link className={`nav-link ellipsis ${this.getActiveClass('drafts')}`} to={siteRoot + 'drafts/'} title={gettext('Drafts')}>
                   <span className="sf2-icon-edit" aria-hidden="true"></span>
                   <span className="draft-info nav-text">
@@ -223,14 +232,14 @@ class MainSideNav extends React.Component {
               </li>
             }
             <li className="nav-item">
-              <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={() => this.tabItemClick('linked-devices')}>
+              <Link className={`nav-link ellipsis ${this.getActiveClass('linked-devices')}`} to={siteRoot + 'linked-devices/'} title={gettext('Linked Devices')} onClick={(e) => this.tabItemClick(e, 'linked-devices')}>
                 <span className="sf2-icon-monitor" aria-hidden="true"></span>
                 <span className="nav-text">{gettext('Linked Devices')}</span>
               </Link>
             </li>
             {canInvitePeople &&
               <li className="nav-item">
-                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={() => this.tabItemClick('invitations')}>
+                <Link className={`nav-link ellipsis ${this.getActiveClass('invitations')}`} to={siteRoot + 'invitations/'} title={gettext('Invite People')} onClick={(e) => this.tabItemClick(e, 'invitations')}>
                   <span className="sf2-icon-invite" aria-hidden="true"></span>
                   <span className="nav-text">{gettext('Invite People')}</span>
                 </Link>

frontend/src/utils/utils.js

@@ -983,6 +983,13 @@ export const Utils = {
     }
 
     return false;
+  },
+
+  registerGlobalVariable(namespace, key, value) {
+    if (!window[namespace]) {
+      window[namespace] = {};
+    }
+    window[namespace][key] = value;
   }
 
 };