From 48b467a683e109248f53fc58355f77c6827a1032 Mon Sep 17 00:00:00 2001
From: jinapurapu <65002498+jinapurapu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 10:58:08 -0700
Subject: [PATCH] Added permission tooltips, UI and text improvements for
 Policies screens (#2368)

---
 .../src/common/SecureComponent/permissions.ts |  10 +
 .../screens/Console/Policies/ListPolicies.tsx |  55 ++++-
 .../Console/Policies/PolicyDetails.tsx        | 190 +++++++++++-------
 portal-ui/tests/policies/users.json           |   5 +-
 4 files changed, 178 insertions(+), 82 deletions(-)

diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts
index b26d286c9..30beb619f 100644
--- a/portal-ui/src/common/SecureComponent/permissions.ts
+++ b/portal-ui/src/common/SecureComponent/permissions.ts
@@ -515,3 +515,13 @@ export const enableDisableGroupPermissions = [
   IAM_SCOPES.ADMIN_ENABLE_GROUP,
   IAM_SCOPES.ADMIN_DISABLE_GROUP,
 ];
+export const createPolicyPermissions = [IAM_SCOPES.ADMIN_CREATE_POLICY];
+
+export const deletePolicyPermissions = [IAM_SCOPES.ADMIN_DELETE_POLICY];
+
+export const listPolicyPermissions = [IAM_SCOPES.ADMIN_LIST_USER_POLICIES];
+
+export const listGroupPermissions = [
+  IAM_SCOPES.ADMIN_LIST_GROUPS,
+  IAM_SCOPES.ADMIN_GET_GROUP,
+];
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index e698eed97..9e6c9b489 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -39,8 +39,13 @@ import HelpBox from "../../../common/HelpBox";
 import PageLayout from "../Common/Layout/PageLayout";
 import {
   CONSOLE_UI_RESOURCE,
+  createPolicyPermissions,
+  deletePolicyPermissions,
   IAM_PAGES,
   IAM_SCOPES,
+  listPolicyPermissions,
+  permissionTooltipHelper,
+  viewPolicyPermissions,
 } from "../../../common/SecureComponent/permissions";
 import {
   hasPermission,
@@ -85,13 +90,25 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
     IAM_SCOPES.ADMIN_GET_POLICY,
   ]);
 
-  const deletePolicy = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_DELETE_POLICY,
-  ]);
+  const canDeletePolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    deletePolicyPermissions
+  );
 
-  const displayPolicies = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
-  ]);
+  const canDisplayPolicies = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    listPolicyPermissions
+  );
+
+  const canCreatePolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    createPolicyPermissions
+  );
+
+  const canViewPolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    viewPolicyPermissions
+  );
 
   useEffect(() => {
     fetchRecords();
@@ -99,7 +116,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
 
   useEffect(() => {
     if (loading) {
-      if (displayPolicies) {
+      if (canDisplayPolicies) {
         api
           .invoke("GET", `/api/v1/policies`)
           .then((res: PolicyList) => {
@@ -128,7 +145,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
         setLoading(false);
       }
     }
-  }, [loading, setLoading, setRecords, dispatch, displayPolicies]);
+  }, [loading, setLoading, setRecords, dispatch, canDisplayPolicies]);
 
   const fetchRecords = () => {
     setLoading(true);
@@ -161,7 +178,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
       type: "delete",
       onClick: confirmDeletePolicy,
       sendOnlyId: true,
-      disableButtonFunction: () => !deletePolicy,
+      disableButtonFunction: () => !canDeletePolicy,
     },
   ];
 
@@ -194,7 +211,16 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
               resource={CONSOLE_UI_RESOURCE}
               errorProps={{ disabled: true }}
             >
-              <TooltipWrapper tooltip={"Create Policy"}>
+              <TooltipWrapper
+                tooltip={
+                  canCreatePolicy
+                    ? ""
+                    : permissionTooltipHelper(
+                        createPolicyPermissions,
+                        "create a Policy"
+                      )
+                }
+              >
                 <Button
                   id={"create-policy"}
                   label={"Create Policy"}
@@ -203,6 +229,7 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
                   onClick={() => {
                     navigate(`${IAM_PAGES.POLICY_ADD}`);
                   }}
+                  disabled={!canCreatePolicy}
                 />
               </TooltipWrapper>
             </SecureComponent>
@@ -220,6 +247,14 @@ const ListPolicies = ({ classes }: IPoliciesProps) => {
                 records={filteredRecords}
                 entityName="Policies"
                 idField="name"
+                tooltip={
+                  canViewPolicy
+                    ? ""
+                    : permissionTooltipHelper(
+                        viewPolicyPermissions,
+                        "view Policy details"
+                      )
+                }
               />
             </SecureComponent>
           </Grid>
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 8a08056c3..2ffebd147 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -48,8 +48,16 @@ import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import BackLink from "../../../common/BackLink";
 import {
   CONSOLE_UI_RESOURCE,
+  createPolicyPermissions,
+  deletePolicyPermissions,
+  getGroupPermissions,
   IAM_PAGES,
   IAM_SCOPES,
+  listGroupPermissions,
+  listUsersPermissions,
+  permissionTooltipHelper,
+  viewPolicyPermissions,
+  viewUserPermissions,
 } from "../../../common/SecureComponent/permissions";
 import {
   hasPermission,
@@ -131,29 +139,45 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
 
   const displayGroups = hasPermission(
     CONSOLE_UI_RESOURCE,
-    [IAM_SCOPES.ADMIN_LIST_GROUPS, IAM_SCOPES.ADMIN_GET_GROUP],
+    listGroupPermissions,
     true
   );
 
-  const viewGroup = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_GET_GROUP,
-  ]);
+  const viewGroup = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    getGroupPermissions,
+    true
+  );
 
-  const displayUsers = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_LIST_GROUPS,
-  ]);
+  const displayUsers = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    listUsersPermissions,
+    true
+  );
 
-  const viewUser = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_GET_USER,
-  ]);
+  const viewUser = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    viewUserPermissions,
+    true
+  );
 
-  const displayPolicy = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_GET_POLICY,
-  ]);
+  const displayPolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    viewPolicyPermissions,
+    true
+  );
 
-  const editPolicy = hasPermission(CONSOLE_UI_RESOURCE, [
-    IAM_SCOPES.ADMIN_CREATE_POLICY,
-  ]);
+  const canDeletePolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    deletePolicyPermissions,
+    true
+  );
+
+  const canEditPolicy = hasPermission(
+    CONSOLE_UI_RESOURCE,
+    createPolicyPermissions,
+    true
+  );
 
   const saveRecord = (event: React.FormEvent) => {
     event.preventDefault();
@@ -161,7 +185,7 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
       return;
     }
     setAddLoading(true);
-    if (editPolicy) {
+    if (canEditPolicy) {
       api
         .invoke("POST", "/api/v1/policies", {
           name: policyName,
@@ -355,13 +379,23 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
                   resource={CONSOLE_UI_RESOURCE}
                   errorProps={{ disabled: true }}
                 >
-                  <TooltipWrapper tooltip={"Delete Policy"}>
+                  <TooltipWrapper
+                    tooltip={
+                      canDeletePolicy
+                        ? ""
+                        : permissionTooltipHelper(
+                            deletePolicyPermissions,
+                            "delete Policies"
+                          )
+                    }
+                  >
                     <Button
                       id={"delete-policy"}
                       label={"Delete Policy"}
                       variant="secondary"
                       icon={<TrashIcon />}
                       onClick={deletePolicy}
+                      disabled={!canDeletePolicy}
                     />
                   </TooltipWrapper>
                 </SecureComponent>
@@ -405,33 +439,34 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
               <Fragment>
                 <div className={classes.sectionTitle}>Users</div>
                 <Grid container>
-                  <Grid item xs={12} className={classes.actionsTray}>
-                    <TextField
-                      placeholder="Search Users"
-                      className={classes.searchField}
-                      id="search-resource"
-                      label=""
-                      onChange={(val) => {
-                        setFilterUsers(val.target.value);
-                      }}
-                      InputProps={{
-                        disableUnderline: true,
-                        startAdornment: (
-                          <InputAdornment position="start">
-                            <SearchIcon />
-                          </InputAdornment>
-                        ),
-                      }}
-                      variant="standard"
-                    />
-                  </Grid>
-
+                  {userList.length > 0 && (
+                    <Grid item xs={12} className={classes.actionsTray}>
+                      <TextField
+                        placeholder="Search Users"
+                        className={classes.searchField}
+                        id="search-resource"
+                        label=""
+                        onChange={(val) => {
+                          setFilterUsers(val.target.value);
+                        }}
+                        InputProps={{
+                          disableUnderline: true,
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <SearchIcon />
+                            </InputAdornment>
+                          ),
+                        }}
+                        variant="standard"
+                      />
+                    </Grid>
+                  )}
                   <TableWrapper
                     itemActions={userTableActions}
                     columns={[{ label: "Name", elementKey: "name" }]}
                     isLoading={loadingUsers}
                     records={filteredUsers}
-                    entityName="Users"
+                    entityName="Users with this Policy associated"
                     idField="name"
                   />
                 </Grid>
@@ -447,32 +482,34 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
               <Fragment>
                 <div className={classes.sectionTitle}>Groups</div>
                 <Grid container>
-                  <Grid item xs={12} className={classes.actionsTray}>
-                    <TextField
-                      placeholder="Search Groups"
-                      className={classes.searchField}
-                      id="search-resource"
-                      label=""
-                      onChange={(val) => {
-                        setFilterGroups(val.target.value);
-                      }}
-                      InputProps={{
-                        disableUnderline: true,
-                        startAdornment: (
-                          <InputAdornment position="start">
-                            <SearchIcon />
-                          </InputAdornment>
-                        ),
-                      }}
-                      variant="standard"
-                    />
-                  </Grid>
+                  {groupList.length > 0 && (
+                    <Grid item xs={12} className={classes.actionsTray}>
+                      <TextField
+                        placeholder="Search Groups"
+                        className={classes.searchField}
+                        id="search-resource"
+                        label=""
+                        onChange={(val) => {
+                          setFilterGroups(val.target.value);
+                        }}
+                        InputProps={{
+                          disableUnderline: true,
+                          startAdornment: (
+                            <InputAdornment position="start">
+                              <SearchIcon />
+                            </InputAdornment>
+                          ),
+                        }}
+                        variant="standard"
+                      />
+                    </Grid>
+                  )}
                   <TableWrapper
                     itemActions={groupTableActions}
                     columns={[{ label: "Name", elementKey: "name" }]}
                     isLoading={loadingGroups}
                     records={filteredGroups}
-                    entityName="Groups"
+                    entityName="Groups with this Policy associated"
                     idField="name"
                   />
                 </Grid>
@@ -494,7 +531,7 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
                   <Grid container>
                     <Grid item xs={12}>
                       <CodeMirrorWrapper
-                        readOnly={!editPolicy}
+                        readOnly={!canEditPolicy}
                         value={policyDefinition}
                         onBeforeChange={(editor, data, value) => {
                           setPolicyDefinition(value);
@@ -520,14 +557,27 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
                         resource={CONSOLE_UI_RESOURCE}
                         errorProps={{ disabled: true }}
                       >
-                        <Button
-                          id={"save"}
-                          type="submit"
-                          variant="callAction"
-                          color="primary"
-                          disabled={addLoading || !validSave}
-                          label={"Save"}
-                        />
+                        <TooltipWrapper
+                          tooltip={
+                            canEditPolicy
+                              ? ""
+                              : permissionTooltipHelper(
+                                  createPolicyPermissions,
+                                  "edit a Policy"
+                                )
+                          }
+                        >
+                          <Button
+                            id={"save"}
+                            type="submit"
+                            variant="callAction"
+                            color="primary"
+                            disabled={
+                              addLoading || !validSave || !canEditPolicy
+                            }
+                            label={"Save"}
+                          />
+                        </TooltipWrapper>
                       </SecureComponent>
                     </Grid>
                     {addLoading && (
diff --git a/portal-ui/tests/policies/users.json b/portal-ui/tests/policies/users.json
index 8d438a5b5..b21e03174 100644
--- a/portal-ui/tests/policies/users.json
+++ b/portal-ui/tests/policies/users.json
@@ -11,10 +11,11 @@
         "admin:DisableUser",
         "admin:ListUserPolicies",
         "admin:ListGroups",
+        "admin:GetPolicy",
         "admin:AttachUserOrGroupPolicy",
-        "admin:RemoveUserFromGroup",
         "admin:AddUserToGroup",
-        "admin:GetPolicy"
+        "admin:RemoveUserFromGroup",
+        "admin:GetGroup"
       ],
       "Effect": "Allow",
       "Resource": ["arn:aws:s3:::*"],