Dir view permission fixup (#7383)

* ['dir view' page] fixed permission for creating files when the library is empty

* ['dir view' page] fixed permission for rotating images in the image preview dialog

frontend/src/components/dir-view-mode/dir-files.js

@@ -362,8 +362,20 @@ class DirFiles extends React.Component {
   };
 
   render() {
-    const { repoID, currentRepoInfo } = this.props;
+    const { repoID, currentRepoInfo, userPerm } = this.props;
-    const repoEncrypted = currentRepoInfo.encrypted;
+    const { encrypted: repoEncrypted } = currentRepoInfo;
+
+    let canModifyFile = false;
+    if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
+      canModifyFile = true;
+    } else {
+      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+      if (isCustomPermission) {
+        const { modify } = customPermission.permission;
+        canModifyFile = modify;
+      }
+    }
+
     return (
       <>
         <TreeSection
@@ -456,7 +468,7 @@ class DirFiles extends React.Component {
               moveToNextImage={this.moveToNextImage}
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
-              enableRotate={!repoEncrypted}
+              enableRotate={canModifyFile}
             />
           </ModalPortal>
         )}

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -843,14 +843,25 @@ class DirentGridView extends React.Component {
   };
 
   render() {
-    let { direntList, selectedDirentList, path } = this.props;
+    const { direntList, selectedDirentList, path, currentRepoInfo, userPerm } = this.props;
+    const { encrypted: repoEncrypted } = currentRepoInfo;
     let dirent = this.state.activeDirent ? this.state.activeDirent : '';
     let direntPath = Utils.joinPath(path, dirent.name);
 
+    let canModifyFile = false;
+    if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
+      canModifyFile = true;
+    } else {
+      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+      if (isCustomPermission) {
+        const { modify } = customPermission.permission;
+        canModifyFile = modify;
+      }
+    }
+
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }
-    const repoEncrypted = this.props.currentRepoInfo.encrypted;
 
     return (
       <Fragment>
@@ -1025,7 +1036,7 @@ class DirentGridView extends React.Component {
               moveToNextImage={this.moveToNextImage}
               onDeleteImage={this.deleteImage}
               onRotateImage={this.rotateImage}
-              enableRotate={!repoEncrypted}
+              enableRotate={canModifyFile}
             />
           </ModalPortal>
         )}

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -749,10 +749,20 @@ class DirentListView extends React.Component {
   };
 
   render() {
-    const { direntList } = this.props;
+    const { direntList, currentRepoInfo, userPerm } = this.props;
-
+    const { encrypted: repoEncrypted } = currentRepoInfo;
     const isDesktop = Utils.isDesktop();
-    const repoEncrypted = this.props.currentRepoInfo.encrypted;
+
+    let canModifyFile = false;
+    if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
+      canModifyFile = true;
+    } else {
+      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+      if (isCustomPermission) {
+        const { modify } = customPermission.permission;
+        canModifyFile = modify;
+      }
+    }
 
     return (
       <div
@@ -856,7 +866,7 @@ class DirentListView extends React.Component {
                 moveToNextImage={this.moveToNextImage}
                 onDeleteImage={this.deleteImage}
                 onRotateImage={this.rotateImage}
-                enableRotate={!repoEncrypted}
+                enableRotate={canModifyFile}
               />
             </ModalPortal>
           )}

frontend/src/components/dirent-list-view/dirent-none-view.js

@@ -162,31 +162,36 @@ class DirentNoneView extends React.Component {
     if (this.props.isDirentListLoading) {
       return (<Loading />);
     }
-    const { currentRepoInfo } = this.props;
+    const { currentRepoInfo, userPerm } = this.props;
+    let canCreateFile = false;
+    if (['rw', 'cloud-edit'].indexOf(userPerm) != -1) {
+      canCreateFile = true;
+    } else {
+      const { isCustomPermission, customPermission } = Utils.getUserPermission(userPerm);
+      if (isCustomPermission) {
+        const { create } = customPermission.permission;
+        canCreateFile = create;
+      }
+    }
 
     return (
       <div className="tip-for-new-file-container" onContextMenu={this.onContainerContextMenu}>
         <div className="tip-for-new-file">
           <p className="text-secondary text-center">{gettext('This folder has no content at this time.')}</p>
+          {canCreateFile && (
+            <>
               <p className="text-secondary text-center">{gettext('You can create files quickly')}{' +'}</p>
-          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
+              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>{'+ Markdown'}</button>
-            {'+ Markdown'}
+              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>{'+ PPT'}</button>
-          </button>
-          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
-            {'+ PPT'}
-          </button>
               <br />
-          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>
+              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>{'+ Word'}</button>
-            {'+ Word'}
+              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>{'+ Excel'}</button>
-          </button>
-          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
-            {'+ Excel'}
-          </button>
               <br />
               {enableSeadoc && !currentRepoInfo.encrypted &&
-          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.sdoc')}>
+                <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.sdoc')}>{'+ SeaDoc'}</button>
-            {'+ SeaDoc'}
+              }
-          </button>}
+            </>
+          )}
         </div>
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>