From 333ca0a827a69c9740d83a66584546bfc954a994 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 16:34:31 -0700
Subject: [PATCH] Permissions Tooltip guidance for ListUsers and UserDetails
 screens (#2347)

---
 .../src/common/SecureComponent/permissions.ts |  32 ++++
 .../src/screens/Console/Users/ListUsers.tsx   | 155 +++++++++++++-----
 .../src/screens/Console/Users/UserDetails.tsx | 133 ++++++++++++---
 portal-ui/tests/policies/users.json           |   3 +-
 4 files changed, 260 insertions(+), 63 deletions(-)

diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts
index 62253687b..37f836099 100644
--- a/portal-ui/src/common/SecureComponent/permissions.ts
+++ b/portal-ui/src/common/SecureComponent/permissions.ts
@@ -447,3 +447,35 @@ export const permissionTooltipHelper = (scopes: string[], name: string) => {
     "."
   );
 };
+
+export const listUsersPermissions = [IAM_SCOPES.ADMIN_LIST_USERS];
+export const viewUserPermissions = [IAM_SCOPES.ADMIN_GET_USER];
+export const addUserToGroupPermissions = [IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP];
+export const deleteUserPermissions = [IAM_SCOPES.ADMIN_DELETE_USER];
+export const enableUserPermissions = [IAM_SCOPES.ADMIN_ENABLE_USER];
+export const disableUserPermissions = [IAM_SCOPES.ADMIN_DISABLE_USER];
+export const assignIAMPolicyPermissions = [
+  IAM_SCOPES.ADMIN_ATTACH_USER_OR_GROUP_POLICY,
+  IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
+  IAM_SCOPES.ADMIN_GET_POLICY,
+];
+
+export const assignGroupPermissions = [
+  IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP,
+  IAM_SCOPES.ADMIN_REMOVE_USER_FROM_GROUP,
+  IAM_SCOPES.ADMIN_LIST_GROUPS,
+  IAM_SCOPES.ADMIN_ENABLE_USER,
+];
+
+export const getGroupPermissions = [IAM_SCOPES.ADMIN_GET_GROUP];
+
+export const enableDisableUserPermissions = [
+  IAM_SCOPES.ADMIN_ENABLE_USER,
+  IAM_SCOPES.ADMIN_DISABLE_USER,
+];
+
+export const editServiceAccountPermissions = [
+  IAM_SCOPES.ADMIN_LIST_SERVICEACCOUNTS,
+  IAM_SCOPES.ADMIN_UPDATE_SERVICEACCOUNT,
+  IAM_SCOPES.ADMIN_REMOVE_SERVICEACCOUNT,
+];
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index 75ec9b423..a07b60e34 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -43,10 +43,15 @@ import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
 import withSuspense from "../Common/Components/withSuspense";
 import {
+  addUserToGroupPermissions,
   CONSOLE_UI_RESOURCE,
+  deleteUserPermissions,
   IAM_PAGES,
   IAM_SCOPES,
+  listUsersPermissions,
+  permissionTooltipHelper,
   S3_ALL_RESOURCES,
+  viewUserPermissions,
 } from "../../../common/SecureComponent/permissions";
 
 import {
@@ -88,21 +93,19 @@ const ListUsers = ({ classes }: IUsersProps) => {
   const [filter, setFilter] = useState<string>("");
   const [checkedUsers, setCheckedUsers] = useState<string[]>([]);
 
-  const displayListUsers = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_LIST_USERS,
-  ]);
+  const displayListUsers = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    listUsersPermissions
+  );
 
-  const viewUser = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_GET_USER,
-  ]);
+  const viewUser = hasPermission(CONSOLE_UI_RESOURCE, viewUserPermissions);
 
-  const addUserToGroup = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP,
-  ]);
+  const addUserToGroup = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    addUserToGroupPermissions
+  );
 
-  const deleteUser = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_DELETE_USER,
-  ]);
+  const deleteUser = hasPermission(CONSOLE_UI_RESOURCE, deleteUserPermissions);
 
   const closeDeleteModalAndRefresh = (refresh: boolean) => {
     setDeleteOpen(false);
@@ -216,7 +219,18 @@ const ListUsers = ({ classes }: IUsersProps) => {
             matchAll
             errorProps={{ disabled: true }}
           >
-            <TooltipWrapper tooltip={"Delete Selected"}>
+            <TooltipWrapper
+              tooltip={
+                hasPermission("console", [IAM_SCOPES.ADMIN_DELETE_USER])
+                  ? checkedUsers.length === 0
+                    ? "Select Users to delete"
+                    : "Delete Selected"
+                  : permissionTooltipHelper(
+                      [IAM_SCOPES.ADMIN_DELETE_USER],
+                      "delete users"
+                    )
+              }
+            >
               <Button
                 id={"delete-selected-users"}
                 onClick={() => {
@@ -235,7 +249,18 @@ const ListUsers = ({ classes }: IUsersProps) => {
             resource={CONSOLE_UI_RESOURCE}
             errorProps={{ disabled: true }}
           >
-            <TooltipWrapper tooltip={"Add to Group"}>
+            <TooltipWrapper
+              tooltip={
+                hasPermission("console", [IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP])
+                  ? checkedUsers.length === 0
+                    ? "Select Users to group"
+                    : "Add to Group"
+                  : permissionTooltipHelper(
+                      [IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP],
+                      "add users to groups"
+                    )
+              }
+            >
               <Button
                 id={"add-to-group"}
                 label={"Add to Group"}
@@ -260,7 +285,30 @@ const ListUsers = ({ classes }: IUsersProps) => {
             matchAll
             errorProps={{ disabled: true }}
           >
-            <TooltipWrapper tooltip={"Create User"}>
+            <TooltipWrapper
+              tooltip={
+                hasPermission(
+                  "console",
+                  [
+                    IAM_SCOPES.ADMIN_CREATE_USER,
+                    IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
+                    IAM_SCOPES.ADMIN_LIST_GROUPS,
+                    IAM_SCOPES.ADMIN_ATTACH_USER_OR_GROUP_POLICY,
+                  ],
+                  true
+                )
+                  ? "Create User"
+                  : permissionTooltipHelper(
+                      [
+                        IAM_SCOPES.ADMIN_CREATE_USER,
+                        IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
+                        IAM_SCOPES.ADMIN_LIST_GROUPS,
+                        IAM_SCOPES.ADMIN_ATTACH_USER_OR_GROUP_POLICY,
+                      ],
+                      "create users"
+                    )
+              }
+            >
               <Button
                 id={"create-user"}
                 label={"Create User"}
@@ -269,6 +317,18 @@ const ListUsers = ({ classes }: IUsersProps) => {
                   navigate(`${IAM_PAGES.USER_ADD}`);
                 }}
                 variant={"callAction"}
+                disabled={
+                  !hasPermission(
+                    "console",
+                    [
+                      IAM_SCOPES.ADMIN_CREATE_USER,
+                      IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
+                      IAM_SCOPES.ADMIN_LIST_GROUPS,
+                      IAM_SCOPES.ADMIN_ATTACH_USER_OR_GROUP_POLICY,
+                    ],
+                    true
+                  )
+                }
               />
             </TooltipWrapper>
           </SecureComponent>
@@ -279,35 +339,46 @@ const ListUsers = ({ classes }: IUsersProps) => {
           <Fragment>
             {records.length > 0 && (
               <Fragment>
-                <Grid
-                  item
-                  xs={12}
-                  className={classes.tableBlock}
-                  marginBottom={"15px"}
+                <TooltipWrapper
+                  tooltip={
+                    viewUser
+                      ? ""
+                      : permissionTooltipHelper(
+                          [IAM_SCOPES.ADMIN_GET_USER],
+                          "view user details"
+                        )
+                  }
                 >
-                  <SecureComponent
-                    scopes={[IAM_SCOPES.ADMIN_LIST_USERS]}
-                    resource={CONSOLE_UI_RESOURCE}
-                    errorProps={{ disabled: true }}
+                  <Grid
+                    item
+                    xs={12}
+                    className={classes.tableBlock}
+                    marginBottom={"15px"}
                   >
-                    <TableWrapper
-                      itemActions={tableActions}
-                      columns={[
-                        { label: "Access Key", elementKey: "accessKey" },
-                      ]}
-                      onSelect={
-                        addUserToGroup || deleteUser
-                          ? selectionChanged
-                          : undefined
-                      }
-                      selectedItems={checkedUsers}
-                      isLoading={loading}
-                      records={filteredRecords}
-                      entityName="Users"
-                      idField="accessKey"
-                    />
-                  </SecureComponent>
-                </Grid>
+                    <SecureComponent
+                      scopes={[IAM_SCOPES.ADMIN_LIST_USERS]}
+                      resource={CONSOLE_UI_RESOURCE}
+                      errorProps={{ disabled: true }}
+                    >
+                      <TableWrapper
+                        itemActions={tableActions}
+                        columns={[
+                          { label: "Access Key", elementKey: "accessKey" },
+                        ]}
+                        onSelect={
+                          addUserToGroup || deleteUser
+                            ? selectionChanged
+                            : undefined
+                        }
+                        selectedItems={checkedUsers}
+                        isLoading={loading}
+                        records={filteredRecords}
+                        entityName="Users"
+                        idField="accessKey"
+                      />
+                    </SecureComponent>
+                  </Grid>
+                </TooltipWrapper>
                 <HelpBox
                   title={"Users"}
                   iconComponent={<UsersIcon />}
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 913cd2ff6..10293b153 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -55,9 +55,17 @@ import BackLink from "../../../common/BackLink";
 import { decodeURLString, encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import {
+  assignGroupPermissions,
+  assignIAMPolicyPermissions,
   CONSOLE_UI_RESOURCE,
+  deleteUserPermissions,
+  disableUserPermissions,
+  editServiceAccountPermissions,
+  enableDisableUserPermissions,
+  enableUserPermissions,
+  getGroupPermissions,
   IAM_PAGES,
-  IAM_SCOPES,
+  permissionTooltipHelper,
 } from "../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../common/SecureComponent";
 import { useAppDispatch } from "../../../store";
@@ -111,6 +119,11 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const [hasPolicy, setHasPolicy] = useState<boolean>(false);
 
+  const enableEnabled =
+    hasPermission(CONSOLE_UI_RESOURCE, enableUserPermissions) && !enabled;
+  const disableEnabled =
+    hasPermission(CONSOLE_UI_RESOURCE, disableUserPermissions) && enabled;
+
   const userName = decodeURLString(params.userName || "");
 
   const changeUserPassword = () => {
@@ -121,9 +134,19 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
     setDeleteOpen(true);
   };
 
-  const viewGroup = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_GET_GROUP,
-  ]);
+  const userLoggedIn = localStorage.getItem("userLoggedIn") || "";
+  const canAssignPolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    assignIAMPolicyPermissions,
+    true
+  );
+  const canAssignGroup = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    assignGroupPermissions,
+    true
+  );
+
+  const viewGroup = hasPermission(CONSOLE_UI_RESOURCE, getGroupPermissions);
 
   const getUserInformation = useCallback(() => {
     if (userName === "") {
@@ -270,25 +293,69 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
                 <span className={classes.statusValue}>
                   {enabled ? "Enabled" : "Disabled"}
                 </span>
-                <FormSwitchWrapper
-                  indicatorLabels={["Enabled", "Disabled"]}
-                  checked={enabled}
-                  value={"group_enabled"}
-                  id="group-status"
-                  name="group-status"
-                  onChange={() => {
-                    setEnabled(!enabled);
-                    saveRecord(!enabled);
-                  }}
-                  switchOnly
-                />
-
-                <TooltipWrapper tooltip={"Delete User"}>
+                <TooltipWrapper
+                  tooltip={
+                    enableEnabled || disableEnabled
+                      ? ""
+                      : hasPermission(
+                          CONSOLE_UI_RESOURCE,
+                          enableUserPermissions
+                        )
+                      ? permissionTooltipHelper(
+                          disableUserPermissions,
+                          "disable users"
+                        )
+                      : hasPermission(
+                          CONSOLE_UI_RESOURCE,
+                          disableUserPermissions
+                        )
+                      ? permissionTooltipHelper(
+                          enableUserPermissions,
+                          "enable users"
+                        )
+                      : permissionTooltipHelper(
+                          enableDisableUserPermissions,
+                          "enable or disable users"
+                        )
+                  }
+                >
+                  <FormSwitchWrapper
+                    indicatorLabels={["Enabled", "Disabled"]}
+                    checked={enabled}
+                    value={"group_enabled"}
+                    id="group-status"
+                    name="group-status"
+                    onChange={() => {
+                      setEnabled(!enabled);
+                      saveRecord(!enabled);
+                    }}
+                    switchOnly
+                    disabled={!enableEnabled && !disableEnabled}
+                  />
+                </TooltipWrapper>
+                <TooltipWrapper
+                  tooltip={
+                    hasPermission(CONSOLE_UI_RESOURCE, deleteUserPermissions)
+                      ? userLoggedIn === userName
+                        ? "You cannot delete the currently logged in User"
+                        : "Delete User"
+                      : permissionTooltipHelper(
+                          deleteUserPermissions,
+                          "delete user"
+                        )
+                  }
+                >
                   <Button
                     id={"delete-user"}
                     onClick={deleteUser}
                     icon={<TrashIcon />}
                     variant={"secondary"}
+                    disabled={
+                      !hasPermission(
+                        CONSOLE_UI_RESOURCE,
+                        deleteUserPermissions
+                      ) || userLoggedIn === userName
+                    }
                   />
                 </TooltipWrapper>
 
@@ -310,12 +377,22 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
             {{
               tabConfig: {
                 label: "Groups",
+                disabled: !canAssignGroup,
               },
               content: (
                 <React.Fragment>
                   <div className={classes.actionsTray}>
                     <PanelTitle>Groups</PanelTitle>
-                    <TooltipWrapper tooltip={"Add to Groups"}>
+                    <TooltipWrapper
+                      tooltip={
+                        canAssignGroup
+                          ? "Assign groups"
+                          : permissionTooltipHelper(
+                              assignGroupPermissions,
+                              "add users to groups"
+                            )
+                      }
+                    >
                       <Button
                         id={"add-groups"}
                         label={"Add to Groups"}
@@ -324,6 +401,7 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
                         }}
                         icon={<AddIcon />}
                         variant={"callAction"}
+                        disabled={!canAssignGroup}
                       />
                     </TooltipWrapper>
                   </div>
@@ -343,6 +421,10 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
             {{
               tabConfig: {
                 label: "Service Accounts",
+                disabled: !hasPermission(
+                  CONSOLE_UI_RESOURCE,
+                  editServiceAccountPermissions
+                ),
               },
               content: (
                 <UserServiceAccountsPanel
@@ -354,13 +436,23 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
             {{
               tabConfig: {
                 label: "Policies",
+                disabled: !canAssignPolicy,
               },
               content: (
                 <Fragment>
                   <div className={classes.actionsTray}>
                     <PanelTitle>Policies</PanelTitle>
 
-                    <TooltipWrapper tooltip={"Assign Policies"}>
+                    <TooltipWrapper
+                      tooltip={
+                        canAssignPolicy
+                          ? "Assign Policies"
+                          : permissionTooltipHelper(
+                              assignIAMPolicyPermissions,
+                              "assign policies"
+                            )
+                      }
+                    >
                       <Button
                         id={"assign-policies"}
                         label={"Assign Policies"}
@@ -369,6 +461,7 @@ const UserDetails = ({ classes }: IUserDetailsProps) => {
                         }}
                         icon={<IAMPoliciesIcon />}
                         variant={"callAction"}
+                        disabled={!canAssignPolicy}
                       />
                     </TooltipWrapper>
                   </div>
diff --git a/portal-ui/tests/policies/users.json b/portal-ui/tests/policies/users.json
index 293332e8e..8d438a5b5 100644
--- a/portal-ui/tests/policies/users.json
+++ b/portal-ui/tests/policies/users.json
@@ -13,7 +13,8 @@
         "admin:ListGroups",
         "admin:AttachUserOrGroupPolicy",
         "admin:RemoveUserFromGroup",
-        "admin:AddUserToGroup"
+        "admin:AddUserToGroup",
+        "admin:GetPolicy"
       ],
       "Effect": "Allow",
       "Resource": ["arn:aws:s3:::*"],