From 2ed079830ada5c8f6f1a0d6cb969828c202ab60d Mon Sep 17 00:00:00 2001
From: Maidul Islam <maidul98@gmail.com>
Date: Wed, 6 Sep 2023 11:27:50 -0400
Subject: [PATCH] make org permissions more readable

---
 .../OrgRoleModifySection.tsx                  | 20 +++++++++----------
 .../SimpleLevelPermissionOptions.tsx          | 18 +++++++++++++++++
 .../WorkspacePermission.tsx                   |  6 +++---
 .../ProjectRoleModifySection.tsx              |  2 +-
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx
index 8c648c532..c1dfa5691 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx
@@ -35,20 +35,20 @@ type Props = {
 
 const SIMPLE_PERMISSION_OPTIONS = [
   {
-    title: "Members",
-    subtitle: "Project member management control",
+    title: "Members management",
+    subtitle: "Invite, view and remove members from the organization",
     icon: faUsers,
     formName: "member"
   },
   {
-    title: "Billing",
-    subtitle: "Billing management control",
+    title: "Billing & usage",
+    subtitle: "Modify organization subscription plan",
     icon: faMoneyBill,
     formName: "billing"
   },
   {
-    title: "Role",
-    subtitle: "Org role management control",
+    title: "Role management",
+    subtitle: "Create, modify and remove organization roles",
     icon: faUserCog,
     formName: "role"
   },
@@ -59,8 +59,8 @@ const SIMPLE_PERMISSION_OPTIONS = [
     formName: "incident-contact"
   },
   {
-    title: "Settings",
-    subtitle: "Settings management control",
+    title: "Organization profile",
+    subtitle: "View & update organization metadata such as name",
     icon: faCog,
     formName: "settings"
   },
@@ -72,7 +72,7 @@ const SIMPLE_PERMISSION_OPTIONS = [
   },
   {
     title: "SSO",
-    subtitle: "SSO management control",
+    subtitle: "Define organization level SSO requirements",
     icon: faSignIn,
     formName: "sso"
   }
@@ -155,7 +155,7 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
           </Button>
         </div>
         <p className="mb-8 text-gray-400">
-          Roles are used to grant access to particular resources in your organization
+          Organization-level roles allow you to define permissions for resources at a high level across the organization
         </p>
         <div className="flex flex-col space-y-6">
           <FormControl
diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
index 060d5fe66..1eba6f9fe 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
@@ -41,6 +41,20 @@ const SECRET_SCANNING_PERMISSIONS = [
   { action: "delete", label: "Remove integrations" }
 ] as const;
 
+const INCIDENT_CONTACTS_PERMISSIONS = [
+  { action: "read", label: "View contacts" },
+  { action: "create", label: "Add new contacts" },
+  { action: "edit", label: "Edit contacts" },
+  { action: "delete", label: "Remove contacts" }
+] as const;
+
+const MEMBERS_PERMISSIONS = [
+  { action: "read", label: "View all members" },
+  { action: "create", label: "Invite members" },
+  { action: "edit", label: "Edit members" },
+  { action: "delete", label: "Remove members" }
+] as const;
+
 const BILLING_PERMISSIONS = [
   { action: "read", label: "View bills" },
   { action: "create", label: "Add payment methods" },
@@ -54,6 +68,10 @@ const getPermissionList = (option: Props["formName"]) => {
       return SECRET_SCANNING_PERMISSIONS;
     case "billing":
       return BILLING_PERMISSIONS;
+    case "incident-contact":
+      return INCIDENT_CONTACTS_PERMISSIONS;
+    case "member":
+      return MEMBERS_PERMISSIONS
     default:
       return PERMISSIONS;
   }
diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
index 6d54a56b9..915fa12c5 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
@@ -24,8 +24,8 @@ enum Permission {
 }
 
 const PERMISSIONS = [
-  { action: "read", label: "View" },
-  { action: "create", label: "Create" }
+  { action: "read", label: "View projects" },
+  { action: "create", label: "Create new projects" }
 ] as const;
 
 export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props) => {
@@ -87,7 +87,7 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
         <div className="flex-grow flex flex-col">
           <div className="font-medium mb-1 text-lg">Project</div>
           <div className="text-xs font-light">
-            More fine granined project access control can be defined with project level roles
+            View and create new projects in this organization
           </div>
         </div>
         <div>
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx
index 61f056258..31406c1a9 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx
@@ -186,7 +186,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
           </Button>
         </div>
         <p className="mb-8 text-gray-400">
-          Roles are used to grant access to particular resources in your organization
+          Project-level roles allow you to define permissions for resources within projects at a granular level
         </p>
         <div className="flex flex-col space-y-6">
           <FormControl