GUI Storage admin role (#3389): add storage admin role (#3392)

* GUI Storage admin role (#3389): add storage admin role

* GUI Storage admin role (#3389): restrict grant user permissions search input to minimum 3 character length

* GUI Storage admin role (#3389): grant user permissions search input - fix placeholder

* GUI Storage admin role (#3389): small fixes

* GUI Storage admin role (#3389): grant user permissions search input - style adjustments

client/src/components/pipelines/browser/Folder.js

@@ -68,7 +68,7 @@ import ConfigurationDelete from '../../../models/configuration/ConfigurationDele
 import CreateDataStorage from '../../../models/dataStorage/DataStorageSave';
 import UpdateDataStorage from '../../../models/dataStorage/DataStorageUpdate';
 import DataStorageUpdateStoragePolicy
-  from '../../../models/dataStorage/DataStorageUpdateStoragePolicy';
+from '../../../models/dataStorage/DataStorageUpdateStoragePolicy';
 import DataStorageDelete from '../../../models/dataStorage/DataStorageDelete';
 import {METADATA_KEYS} from './metadata-controls/get-default-metadata-properties';
 import Metadata, {SpecialTags} from '../../special/metadata/Metadata';
@@ -519,7 +519,10 @@ export default class Folder extends localization.LocalizedReactComponent {
         }
         break;
       case ItemTypes.storage:
-        if (roleModel.writeAllowed(item)) {
+        if (
+          roleModel.isManager.storageAdmin(this) ||
+          roleModel.writeAllowed(item)
+        ) {
           actions.push(
             <Button
               key="edit"
@@ -1403,7 +1406,10 @@ export default class Folder extends localization.LocalizedReactComponent {
           (this.showMetadata && this.props.folderId !== undefined) &&
           <Metadata
             key={METADATA_PANEL_KEY}
-            readOnly={!roleModel.isOwner(this.props.folder.value)}
+            readOnly={!(
+              roleModel.isOwner(this.props.folder.value) ||
+              roleModel.isManager.storageAdmin(this)
+            )}
             entityName={this.props.folder.value.name}
             entityId={this.props.folderId} entityClass="FOLDER" />
         }
@@ -1563,7 +1569,9 @@ export default class Folder extends localization.LocalizedReactComponent {
           );
         }
       }
-      if (roleModel.isManager.storage(this)) {
+      if (roleModel.isManager.storage(this) ||
+      (roleModel.isManager.storageAdmin(this) && roleModel.writeAllowed(this.props.folder.value))
+      ) {
         const fsMountsAvailable = this.props.awsRegions.loaded &&
           extractFileShareMountList(this.props.awsRegions.value).length > 0;
         createActions.push(
@@ -1864,12 +1872,15 @@ export default class Folder extends localization.LocalizedReactComponent {
         );
       }
       if (
-        !this.props.readOnly &&
-        roleModel.writeAllowed(this.props.folder.value) &&
-        roleModel.isManager.folder(this)
+        !this.props.readOnly && (
+          roleModel.isManager.storageAdmin(this) || (
+            roleModel.writeAllowed(this.props.folder.value) &&
+            roleModel.isManager.folder(this)
+          )
+        )
       ) {
         if (editActions.length > 0) {
-          editActions.push(<Divider key="divider"/>);
+          editActions.push(<Divider key="divider" />);
         }
         editActions.push(
           <MenuItem
@@ -1930,7 +1941,7 @@ export default class Folder extends localization.LocalizedReactComponent {
                 size="small"
                 className={styles.dropDownTrigger}
               >
-                <Icon type="setting" style={{lineHeight: 'inherit', verticalAlign: 'middle'}}/>
+                <Icon type="setting" style={{lineHeight: 'inherit', verticalAlign: 'middle'}} />
               </Button>
             </Dropdown>
           </DropDownWrapper>

client/src/components/pipelines/browser/data-storage/index.js

@@ -285,6 +285,7 @@ export default class DataStorage extends React.Component {
       const isAdmin = authenticatedUserInfo.value.admin;
       const isOwner = roleModel.isOwner(this.storage.info);
       return isAdmin ||
+        roleModel.isManager.storageAdmin(this) ||
         (isOwner && preferences.storagePolicyBackupVisibleNonAdmins);
     }
     return false;
@@ -309,15 +310,15 @@ export default class DataStorage extends React.Component {
     const readAllowed = roleModel.readAllowed(this.storage.info);
     const writeAllowed = roleModel.writeAllowed(this.storage.info);
     return {
-      read: (
+      read: roleModel.isManager.storageAdmin(this) || ((
         roleModel.isOwner(this.storage.info) ||
         roleModel.isManager.archiveManager(this) ||
         roleModel.isManager.archiveReader(this)
-      ) && readAllowed && isS3,
-      write: (
+      ) && readAllowed && isS3),
+      write: roleModel.isManager.storageAdmin(this) || ((
         roleModel.isOwner(this.storage.info) ||
         roleModel.isManager.archiveManager(this)
-      ) && writeAllowed && isS3
+      ) && writeAllowed && isS3)
     };
   }
 
@@ -403,10 +404,11 @@ export default class DataStorage extends React.Component {
       ? authenticatedUserInfo.value.admin
       : false;
     // Whilst in the restricted tag access mode, only admins and users (including owners) with roles
-    // STORAGE_MANAGER or STORAGE_TAG_MANAGER are allowed to edit file's tags.
+    // STORAGE_MANAGER STORAGE_ADMIN or STORAGE_TAG_MANAGER are allowed to edit file's tags.
     const restrictedAccessCheck = isAdmin ||
       roleModel.isManager.storage(this) ||
-      roleModel.isManager.storageTag(this);
+      roleModel.isManager.storageTag(this) ||
+      roleModel.isManager.storageAdmin(this);
     const storageFileTagsEditable = this.storageTagRestrictedAccess
       ? restrictedAccessCheck
       // If restricted tag access mode is off, all users with WRITE permissions are

client/src/components/pipelines/browser/forms/DataStorageEditDialog.js

@@ -103,7 +103,8 @@ export class DataStorageEditDialog extends React.Component {
       authenticatedUserInfo &&
       authenticatedUserInfo.loaded;
     if (loaded) {
-      const isAdmin = authenticatedUserInfo.value.admin;
+      const isAdmin = authenticatedUserInfo.value.admin ||
+        roleModel.isManager.storageAdmin(this);
       const isOwner = roleModel.isOwner(dataStorage);
       return isAdmin ||
         (isOwner && preferences.storagePolicyBackupVisibleNonAdmins);
@@ -172,15 +173,15 @@ export class DataStorageEditDialog extends React.Component {
     const readAllowed = roleModel.readAllowed(dataStorage);
     const writeAllowed = roleModel.writeAllowed(dataStorage);
     return {
-      read: (
+      read: roleModel.isManager.storageAdmin(this) || ((
         roleModel.isOwner(dataStorage) ||
         roleModel.isManager.archiveManager(this) ||
         roleModel.isManager.archiveReader(this)
-      ) && readAllowed,
-      write: (
+      ) && readAllowed),
+      write: roleModel.isManager.storageAdmin(this) || ((
         roleModel.isOwner(dataStorage) ||
         roleModel.isManager.archiveManager(this)
-      ) && writeAllowed
+      ) && writeAllowed)
     };
   }
 
@@ -253,20 +254,25 @@ export class DataStorageEditDialog extends React.Component {
 
   getEditFooter = () => {
     if (
-      roleModel.isOwner(this.props.dataStorage) &&
+      (roleModel.isManager.storageAdmin(this) || roleModel.isOwner(this.props.dataStorage)) &&
       !this.state.restrictedAccess
     ) {
       return (
         <Row type="flex" justify="space-between">
           <Col span={12}>
             <Row type="flex" justify="start">
               {
-                roleModel.manager.storage(
-                  <Button
-                    id="edit-storage-dialog-delete-button"
-                    type="danger"
-                    onClick={this.openDeleteDialog}>DELETE</Button>
-                )
+                roleModel.isManager.storage(this) ||
+                roleModel.isManager.storageAdmin(this)
+                  ? (
+                    <Button
+                      id="edit-storage-dialog-delete-button"
+                      type="danger"
+                      onClick={this.openDeleteDialog}
+                    >
+                      DELETE
+                    </Button>
+                  ) : null
               }
             </Row>
           </Col>
@@ -371,9 +377,10 @@ export class DataStorageEditDialog extends React.Component {
     const isReadOnly = this.props.dataStorage
       ? (
         this.props.dataStorage.locked ||
-        !roleModel.isOwner(this.props.dataStorage) ||
-        this.state.restrictedAccess
-      )
+        this.state.restrictedAccess || (
+          !roleModel.isOwner(this.props.dataStorage) &&
+          !roleModel.isManager.storageAdmin(this)
+        ))
       : false;
     const modalFooter = this.props.pending || this.state.restrictedAccessCheckInProgress ? false : (
       this.props.dataStorage ? this.getEditFooter() : this.getCreateFooter()