Permission Error handling and Tooltips for upload file, object action buttons (#2338)

![Screen Shot 2022-09-26 at 11 51 34
AM](https://user-images.githubusercontent.com/65002498/192357633-2f551441-8c27-450e-873e-1766d388cdb0.png)

<img width="706" alt="Screen Shot 2022-09-23 at 11 38 59 AM"
src="https://user-images.githubusercontent.com/65002498/192035299-093f814e-4821-4610-8fc5-c20565ea7c38.png">
<img width="642" alt="Screen Shot 2022-09-23 at 11 47 15 AM"
src="https://user-images.githubusercontent.com/65002498/192036512-f8891625-e050-42fd-9c43-173dd61c4df3.png">

Author: jinapurapu

portal-ui/src/common/SecureComponent/permissions.ts

@@ -435,13 +435,13 @@ export const CONSOLE_UI_RESOURCE = "console-ui";
 
 export const permissionTooltipHelper = (scopes: string[], name: string) => {
   return (
-    "You require additional permissions in order to enable " +
+    "You require additional permissions in order to " +
     name +
     ". Please ask your MinIO administrator to grant you " +
     scopes +
     " permission" +
     (scopes.length > 1 ? "s" : "") +
-    " in order to enable " +
+    " in order to " +
     name +
     "."
   );

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ActionsListSection.tsx

@@ -19,6 +19,7 @@ import ObjectActionButton from "./ObjectActionButton";
 import { withStyles } from "@mui/styles";
 import createStyles from "@mui/styles/createStyles";
 import { detailsPanel } from "../../../../Common/FormComponents/common/styleLibrary";
+import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper";
 
 const styles = () =>
   createStyles({
@@ -52,12 +53,14 @@ const ActionsListSection = ({
         {items.map((actionItem, index) => {
           return (
             <li key={`action-element-${index.toString()}`}>
-              <ObjectActionButton
-                label={actionItem.label}
-                icon={actionItem.icon}
-                onClick={actionItem.action}
-                disabled={actionItem.disabled}
-              />
+              <TooltipWrapper tooltip={actionItem.tooltip || ""}>
+                <ObjectActionButton
+                  label={actionItem.label}
+                  icon={actionItem.icon}
+                  onClick={actionItem.action}
+                  disabled={actionItem.disabled}
+                />
+              </TooltipWrapper>
             </li>
           );
         })}

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -71,7 +71,10 @@ import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
 import { AppState, useAppDispatch } from "../../../../../../store";
 import PageLayout from "../../../../Common/Layout/PageLayout";
 
-import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
+import {
+  IAM_SCOPES,
+  permissionTooltipHelper,
+} from "../../../../../../common/SecureComponent/permissions";
 import {
   hasPermission,
   SecureComponent,
@@ -1055,11 +1058,23 @@ const ListObjects = () => {
 
   const onDrop = useCallback(
     (acceptedFiles: any[]) => {
-      if (acceptedFiles && acceptedFiles.length > 0) {
+      if (acceptedFiles && acceptedFiles.length > 0 && canUpload) {
         let newFolderPath: string = acceptedFiles[0].path;
         uploadObject(acceptedFiles, newFolderPath);
       }
+      if (!canUpload) {
+        dispatch(
+          setErrorSnackMessage({
+            errorMessage: "Upload not allowed",
+            detailedError: permissionTooltipHelper(
+              [IAM_SCOPES.S3_PUT_OBJECT],
+              "upload objects to this location"
+            ),
+          })
+        );
+      }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [uploadObject]
   );
 
@@ -1221,6 +1236,10 @@ const ListObjects = () => {
     uploadPath = uploadPath.concat(currentPath);
   }
 
+  const canDownload = hasPermission(bucketName, [IAM_SCOPES.S3_GET_OBJECT]);
+  const canDelete = hasPermission(bucketName, [IAM_SCOPES.S3_DELETE_OBJECT]);
+  const canUpload = hasPermission(uploadPath, [IAM_SCOPES.S3_PUT_OBJECT]);
+
   const onClosePanel = (forceRefresh: boolean) => {
     dispatch(setSelectedObjectView(null));
     dispatch(setVersionsModeEnabled({ status: false }));
@@ -1272,23 +1291,28 @@ const ListObjects = () => {
     {
       action: downloadSelected,
       label: "Download",
-      disabled: selectedObjects.length === 0,
+      disabled: !canDownload || selectedObjects.length === 0,
       icon: <DownloadIcon />,
-      tooltip: "Download Selected",
+      tooltip: canDownload
+        ? "Download Selected"
+        : permissionTooltipHelper(
+            [IAM_SCOPES.S3_GET_OBJECT],
+            "download objects from this bucket"
+          ),
     },
     {
       action: openShare,
       label: "Share",
       disabled: selectedObjects.length !== 1 || !canShareFile,
       icon: <ShareIcon />,
-      tooltip: "Share Selected File",
+      tooltip: canShareFile ? "Share Selected File" : "Sharing unavailable",
     },
     {
       action: openPreview,
       label: "Preview",
       disabled: selectedObjects.length !== 1 || !canPreviewFile,
       icon: <PreviewIcon />,
-      tooltip: "Preview Selected File",
+      tooltip: canPreviewFile ? "Preview Selected File" : "Preview unavailable",
     },
     {
       action: () => {
@@ -1297,10 +1321,13 @@ const ListObjects = () => {
       label: "Delete",
       icon: <DeleteIcon />,
       disabled:
-        !hasPermission(bucketName, [IAM_SCOPES.S3_DELETE_OBJECT]) ||
-        selectedObjects.length === 0 ||
-        !displayDeleteObject,
-      tooltip: "Delete Selected Files",
+        !canDelete || selectedObjects.length === 0 || !displayDeleteObject,
+      tooltip: canDelete
+        ? "Delete Selected Files"
+        : permissionTooltipHelper(
+            [IAM_SCOPES.S3_DELETE_OBJECT],
+            "delete objects in this bucket"
+          ),
     },
   ];