From 98893a40f140ab412be6195031fa6f631feb79e1 Mon Sep 17 00:00:00 2001
From: Akhil Mohan <akhilmhdh@gmail.com>
Date: Wed, 6 Sep 2023 17:06:28 +0530
Subject: [PATCH] feat(rbac): made changes from testing with maidul

---
 .../src/controllers/v1/workspaceController.ts |  19 +-
 backend/src/routes/v1/workspace.ts            |   8 +
 .../permissions/OrgPermissionCan.tsx          |  10 +
 .../permissions/ProjectPermissionCan.tsx      |  10 +
 .../src/components/v2/Checkbox/Checkbox.tsx   |   2 +-
 frontend/src/hooks/api/roles/types.ts         |  36 +-
 frontend/src/layouts/AppLayout/AppLayout.tsx  |  48 +-
 frontend/src/pages/org/[id]/billing/index.tsx |   2 +-
 frontend/src/styles/globals.css               |  12 +-
 .../src/views/DashboardPage/DashboardPage.tsx |   1 -
 .../SecretDropzone/SecretDropzone.tsx         | 668 +++++++++---------
 .../OrgRoleModifySection.utils.ts             |  60 +-
 .../SimpleLevelPermissionOptions.tsx          |  29 +-
 .../WorkspacePermission.tsx                   |   4 +-
 .../OrgRoleTabSection/OrgRoleTable.tsx        |  73 +-
 .../ProjectRoleList/ProjectRoleList.tsx       |  51 +-
 .../ProjectRoleModifySection.utils.ts         |  98 ++-
 .../WsProjectPermission.tsx                   |   8 +-
 .../OrgGeneralTab/OrgGeneralTab.tsx           |   2 -
 19 files changed, 612 insertions(+), 529 deletions(-)

diff --git a/backend/src/controllers/v1/workspaceController.ts b/backend/src/controllers/v1/workspaceController.ts
index 1b5787671..6c017d6be 100644
--- a/backend/src/controllers/v1/workspaceController.ts
+++ b/backend/src/controllers/v1/workspaceController.ts
@@ -191,7 +191,15 @@ export const createWorkspace = async (req: Request, res: Response) => {
  * @returns
  */
 export const deleteWorkspace = async (req: Request, res: Response) => {
-  const { workspaceId } = req.params;
+  const {
+    params: { workspaceId }
+  } = await validateRequest(reqValidator.DeleteWorkspaceV1, req);
+
+  const { permission } = await getUserProjectPermissions(req.user._id, workspaceId);
+  ForbiddenError.from(permission).throwUnlessCan(
+    ProjectPermissionActions.Delete,
+    ProjectPermissionSub.Workspace
+  );
 
   // delete workspace
   await deleteWork({
@@ -246,7 +254,14 @@ export const changeWorkspaceName = async (req: Request, res: Response) => {
  * @returns
  */
 export const getWorkspaceIntegrations = async (req: Request, res: Response) => {
-  const { workspaceId } = req.params;
+  const {
+    params: { workspaceId }
+  } = await validateRequest(reqValidator.GetWorkspaceIntegrationsV1, req);
+  const { permission } = await getUserProjectPermissions(req.user._id, workspaceId);
+  ForbiddenError.from(permission).throwUnlessCan(
+    ProjectPermissionActions.Read,
+    ProjectPermissionSub.Integrations
+  );
 
   const integrations = await Integration.find({
     workspace: workspaceId
diff --git a/backend/src/routes/v1/workspace.ts b/backend/src/routes/v1/workspace.ts
index b6a28819a..4dbc121b9 100644
--- a/backend/src/routes/v1/workspace.ts
+++ b/backend/src/routes/v1/workspace.ts
@@ -44,6 +44,14 @@ router.post(
   workspaceController.createWorkspace
 );
 
+router.delete(
+  "/:workspaceId",
+  requireAuth({
+    acceptedAuthModes: [AuthMode.JWT]
+  }),
+  workspaceController.deleteWorkspace
+);
+
 router.post(
   "/:workspaceId/name",
   requireAuth({
diff --git a/frontend/src/components/permissions/OrgPermissionCan.tsx b/frontend/src/components/permissions/OrgPermissionCan.tsx
index 679fe1069..8d1f3fb7b 100644
--- a/frontend/src/components/permissions/OrgPermissionCan.tsx
+++ b/frontend/src/components/permissions/OrgPermissionCan.tsx
@@ -7,12 +7,18 @@ import { Tooltip } from "../v2";
 
 type Props = {
   label?: ReactNode;
+  // this prop is used when there exist already a tooltip as helper text for users
+  // so when permission is allowed same tooltip will be reused  to show helpertext
+  renderTooltip?: boolean;
+  allowedLabel?: string;
 } & BoundCanProps<TOrgPermission>;
 
 export const OrgPermissionCan: FunctionComponent<Props> = ({
   label = "Permission Denied. Kindly contact your org admin",
   children,
   passThrough = true,
+  renderTooltip,
+  allowedLabel,
   ...props
 }) => {
   const permission = useOrgPermission();
@@ -30,6 +36,10 @@ export const OrgPermissionCan: FunctionComponent<Props> = ({
           return <Tooltip content={label}>{finalChild}</Tooltip>;
         }
 
+        if (isAllowed && renderTooltip) {
+          return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
+        }
+
         if (!isAllowed) return null;
 
         return finalChild;
diff --git a/frontend/src/components/permissions/ProjectPermissionCan.tsx b/frontend/src/components/permissions/ProjectPermissionCan.tsx
index 2371450fb..6c76afde9 100644
--- a/frontend/src/components/permissions/ProjectPermissionCan.tsx
+++ b/frontend/src/components/permissions/ProjectPermissionCan.tsx
@@ -7,12 +7,18 @@ import { Tooltip } from "../v2";
 
 type Props = {
   label?: ReactNode;
+  // this prop is used when there exist already a tooltip as helper text for users
+  // so when permission is allowed same tooltip will be reused  to show helpertext
+  renderTooltip?: boolean;
+  allowedLabel?: string;
 } & BoundCanProps<TProjectPermission>;
 
 export const ProjectPermissionCan: FunctionComponent<Props> = ({
   label = "Permission Denied. Kindly contact your project admin",
   children,
   passThrough = true,
+  renderTooltip,
+  allowedLabel,
   ...props
 }) => {
   const permission = useProjectPermission();
@@ -30,6 +36,10 @@ export const ProjectPermissionCan: FunctionComponent<Props> = ({
           return <Tooltip content={label}>{finalChild}</Tooltip>;
         }
 
+        if (isAllowed && renderTooltip) {
+          return <Tooltip content={allowedLabel}>{finalChild}</Tooltip>;
+        }
+
         if (!isAllowed) return null;
 
         return finalChild;
diff --git a/frontend/src/components/v2/Checkbox/Checkbox.tsx b/frontend/src/components/v2/Checkbox/Checkbox.tsx
index 64ec0a54a..8c79a5ff2 100644
--- a/frontend/src/components/v2/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/v2/Checkbox/Checkbox.tsx
@@ -45,7 +45,7 @@ export const Checkbox = ({
           <FontAwesomeIcon icon={faCheck} size="sm" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <label className="text-sm" htmlFor={id}>
+      <label className="text-sm whitespace-nowrap" htmlFor={id}>
         {children}
         {isRequired && <span className="pl-1 text-red">*</span>}
       </label>
diff --git a/frontend/src/hooks/api/roles/types.ts b/frontend/src/hooks/api/roles/types.ts
index fbdda2516..8cf578fa6 100644
--- a/frontend/src/hooks/api/roles/types.ts
+++ b/frontend/src/hooks/api/roles/types.ts
@@ -15,40 +15,16 @@ export type TRole<T extends string | undefined> = {
   updatedAt: string;
 };
 
-export type TPermission = TWorkspacePermission | TGeneralPermission;
-
-type TGeneralPermission = {
+export type TPermission = {
   conditions?: Record<string, any>;
-  action: "read" | "edit" | "create" | "delete";
-  subject: "member" | "role" | "incident-contact" | "sso" | "billing" | "settings";
+  action: string;
+  subject: string;
 };
 
-type TWorkspacePermission = {
+export type TProjectPermission = {
   conditions?: Record<string, any>;
-  action: "read" | "create";
-  subject: "workspace";
-};
-
-export type TProjectPermission = TProjectGeneralPermission | TProjectWorkspacePermission;
-
-type TProjectGeneralPermission = {
-  conditions?: Record<string, any>;
-  action: "read" | "edit" | "create" | "delete";
-  subject:
-    | "member"
-    | "role"
-    | "settings"
-    | "secrets"
-    | "environments"
-    | "folders"
-    | "secret-imports"
-    | "service-tokens";
-};
-
-type TProjectWorkspacePermission = {
-  conditions?: Record<string, any>;
-  action: "delete" | "edit";
-  subject: "workspace";
+  action: string;
+  subject: string;
 };
 
 export type TCreateRoleDTO<T extends string | undefined> = {
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 525524b5a..bd4152b7c 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -31,6 +31,7 @@ import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import onboardingCheck from "@app/components/utilities/checks/OnboardingCheck";
 import { tempLocalStorage } from "@app/components/utilities/checks/tempLocalStorage";
 import { encryptAssymmetric } from "@app/components/utilities/cryptography/crypto";
@@ -50,7 +51,14 @@ import {
   SelectItem,
   UpgradePlanModal
 } from "@app/components/v2";
-import { useOrganization, useSubscription, useUser, useWorkspace } from "@app/context";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription,
+  useUser,
+  useWorkspace
+} from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
   fetchOrgUsers,
@@ -395,22 +403,30 @@ export const AppLayout = ({ children }: LayoutProps) => {
                         </div>
                         <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
                         <div className="w-full">
-                          <Button
-                            className="w-full bg-mineshaft-700 py-2 text-bunker-200"
-                            colorSchema="primary"
-                            variant="outline_bg"
-                            size="sm"
-                            onClick={() => {
-                              if (isAddingProjectsAllowed) {
-                                handlePopUpOpen("addNewWs");
-                              } else {
-                                handlePopUpOpen("upgradePlan");
-                              }
-                            }}
-                            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Create}
+                            a={OrgPermissionSubjects.Workspace}
                           >
-                            Add Project
-                          </Button>
+                            {(isAllowed) => (
+                              <Button
+                                className="w-full bg-mineshaft-700 py-2 text-bunker-200"
+                                colorSchema="primary"
+                                variant="outline_bg"
+                                size="sm"
+                                isDisabled={!isAllowed}
+                                onClick={() => {
+                                  if (isAddingProjectsAllowed) {
+                                    handlePopUpOpen("addNewWs");
+                                  } else {
+                                    handlePopUpOpen("upgradePlan");
+                                  }
+                                }}
+                                leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                              >
+                                Add Project
+                              </Button>
+                            )}
+                          </OrgPermissionCan>
                         </div>
                       </Select>
                     </div>
diff --git a/frontend/src/pages/org/[id]/billing/index.tsx b/frontend/src/pages/org/[id]/billing/index.tsx
index 643ad4b30..12e71e69a 100644
--- a/frontend/src/pages/org/[id]/billing/index.tsx
+++ b/frontend/src/pages/org/[id]/billing/index.tsx
@@ -20,7 +20,7 @@ const SettingsBilling = withPermission<{}, TOrgPermission>(
       </div>
     );
   },
-  { action: OrgPermissionActions.Delete, subject: OrgPermissionSubjects.Billing }
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Billing }
 );
 
 Object.assign(SettingsBilling, { requireAuth: true });
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 6d5070fe0..fe1015485 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -1,6 +1,10 @@
 @tailwind base;
 @tailwind components;
 
+html {
+  @apply overflow-hidden;
+}
+
 .rdp-day,
 .rdp-nav_button {
   @apply rounded-md hover:text-mineshaft-500;
@@ -108,7 +112,13 @@
   }
 }
 .tags-conic-bg {
-  background: conic-gradient(rgb(235, 87, 87), rgb(242, 201, 76), rgb(76, 183, 130), rgb(78, 167, 252), rgb(250, 96, 122));
+  background: conic-gradient(
+    rgb(235, 87, 87),
+    rgb(242, 201, 76),
+    rgb(76, 183, 130),
+    rgb(78, 167, 252),
+    rgb(250, 96, 122)
+  );
 }
 
 .show-tags {
diff --git a/frontend/src/views/DashboardPage/DashboardPage.tsx b/frontend/src/views/DashboardPage/DashboardPage.tsx
index 50efcf487..5c93b6192 100644
--- a/frontend/src/views/DashboardPage/DashboardPage.tsx
+++ b/frontend/src/views/DashboardPage/DashboardPage.tsx
@@ -1138,7 +1138,6 @@ export const DashboardPage = withProjectPermission(
                 onEnvCompare={(key) => handlePopUpOpen("compareSecrets", key)}
               />
             </FormProvider>
-
             <SecretDropzone
               workspaceId={workspaceId}
               isSmaller={!isEmptyPage}
diff --git a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
index 5e9505241..d7d5da131 100644
--- a/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx
@@ -15,6 +15,7 @@ import { twMerge } from "tailwind-merge";
 import * as yup from "yup";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { ProjectPermissionCan } from "@app/components/permissions";
 // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionality
 import { parseDotEnv } from "@app/components/utilities/parseDotEnv";
 import {
@@ -33,7 +34,6 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
 import { useDebounce, usePopUp, useToggle } from "@app/hooks";
 import { useGetProjectSecrets } from "@app/hooks/api";
 import { UserWsKeyPair } from "@app/hooks/api/types";
@@ -80,343 +80,355 @@ type Props = {
   decryptFileKey: UserWsKeyPair;
 };
 
-export const SecretDropzone = withProjectPermission(
-  ({
-    isSmaller,
-    onParsedEnv,
-    onAddNewSecret,
-    environments = [],
+export const SecretDropzone = ({
+  isSmaller,
+  onParsedEnv,
+  onAddNewSecret,
+  environments = [],
+  workspaceId,
+  decryptFileKey
+}: Props): JSX.Element => {
+  const { t } = useTranslation();
+  const [isDragActive, setDragActive] = useToggle();
+  const [isLoading, setIsLoading] = useToggle();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpClose, handlePopUpToggle } = usePopUp(["importSecEnv"] as const);
+  const [searchFilter, setSearchFilter] = useState("");
+  const [shouldIncludeValues, setShouldIncludeValues] = useState(true);
+
+  const {
+    handleSubmit,
+    control,
+    watch,
+    register,
+    reset,
+    setValue,
+    formState: { isDirty }
+  } = useForm<TFormSchema>({
+    resolver: yupResolver(formSchema),
+    defaultValues: { secretPath: "/", environment: environments?.[0]?.slug }
+  });
+
+  const secretPath = watch("secretPath");
+  const selectedEnvSlug = watch("environment");
+  const debouncedSecretPath = useDebounce(secretPath);
+
+  const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
     workspaceId,
+    env: selectedEnvSlug,
+    secretPath: debouncedSecretPath,
+    isPaused:
+      !(Boolean(workspaceId) && Boolean(selectedEnvSlug) && Boolean(debouncedSecretPath)) &&
+      !popUp.importSecEnv.isOpen,
     decryptFileKey
-  }: Props): JSX.Element => {
-    const { t } = useTranslation();
-    const [isDragActive, setDragActive] = useToggle();
-    const [isLoading, setIsLoading] = useToggle();
-    const { createNotification } = useNotificationContext();
-    const { popUp, handlePopUpClose, handlePopUpToggle } = usePopUp(["importSecEnv"] as const);
-    const [searchFilter, setSearchFilter] = useState("");
-    const [shouldIncludeValues, setShouldIncludeValues] = useState(true);
+  });
 
-    const {
-      handleSubmit,
-      control,
-      watch,
-      register,
-      reset,
-      setValue,
-      formState: { isDirty }
-    } = useForm<TFormSchema>({
-      resolver: yupResolver(formSchema),
-      defaultValues: { secretPath: "/", environment: environments?.[0]?.slug }
-    });
+  useEffect(() => {
+    setValue("secrets", {});
+    setSearchFilter("");
+  }, [debouncedSecretPath]);
 
-    const secretPath = watch("secretPath");
-    const selectedEnvSlug = watch("environment");
-    const debouncedSecretPath = useDebounce(secretPath);
-
-    const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({
-      workspaceId,
-      env: selectedEnvSlug,
-      secretPath: debouncedSecretPath,
-      isPaused:
-        !(Boolean(workspaceId) && Boolean(selectedEnvSlug) && Boolean(debouncedSecretPath)) &&
-        !popUp.importSecEnv.isOpen,
-      decryptFileKey
-    });
-
-    useEffect(() => {
-      setValue("secrets", {});
-      setSearchFilter("");
-    }, [debouncedSecretPath]);
-
-    const handleDrag = (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (e.type === "dragenter" || e.type === "dragover") {
-        setDragActive.on();
-      } else if (e.type === "dragleave") {
-        setDragActive.off();
-      }
-    };
-
-    const parseFile = (file?: File, isJson?: boolean) => {
-      const reader = new FileReader();
-      if (!file) {
-        createNotification({
-          text: "You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.",
-          type: "error",
-          timeoutMs: 10000
-        });
-        return;
-      }
-      // const fileType = file.name.split('.')[1];
-      setIsLoading.on();
-      reader.onload = (event) => {
-        if (!event?.target?.result) return;
-        // parse function's argument looks like to be ArrayBuffer
-        const env = isJson
-          ? parseJson(event.target.result as ArrayBuffer)
-          : parseDotEnv(event.target.result as ArrayBuffer);
-        setIsLoading.off();
-        onParsedEnv(env);
-      };
-
-      // If something is wrong show an error
-      try {
-        reader.readAsText(file);
-      } catch (error) {
-        console.log(error);
-      }
-    };
-
-    const handleDrop = (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (!e.dataTransfer) {
-        return;
-      }
-
-      e.dataTransfer.dropEffect = "copy";
+  const handleDrag = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive.on();
+    } else if (e.type === "dragleave") {
       setDragActive.off();
-      parseFile(e.dataTransfer.files[0]);
-    };
+    }
+  };
 
-    const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
-      e.preventDefault();
-      parseFile(e.target?.files?.[0], e.target?.files?.[0]?.type === "application/json");
-    };
-
-    const handleFormSubmit = (data: TFormSchema) => {
-      const secretsToBePulled: Record<string, { value: string; comments: string[] }> = {};
-      Object.keys(data.secrets || {}).forEach((key) => {
-        if (data.secrets[key]) {
-          secretsToBePulled[key] = {
-            value: (shouldIncludeValues && data.secrets[key]) || "",
-            comments: [""]
-          };
-        }
+  const parseFile = (file?: File, isJson?: boolean) => {
+    const reader = new FileReader();
+    if (!file) {
+      createNotification({
+        text: "You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.",
+        type: "error",
+        timeoutMs: 10000
       });
-      onParsedEnv(secretsToBePulled);
-      handlePopUpClose("importSecEnv");
-      reset();
+      return;
+    }
+    // const fileType = file.name.split('.')[1];
+    setIsLoading.on();
+    reader.onload = (event) => {
+      if (!event?.target?.result) return;
+      // parse function's argument looks like to be ArrayBuffer
+      const env = isJson
+        ? parseJson(event.target.result as ArrayBuffer)
+        : parseDotEnv(event.target.result as ArrayBuffer);
+      setIsLoading.off();
+      onParsedEnv(env);
     };
 
-    const handleSecSelectAll = () => {
-      if (secrets?.secrets) {
-        setValue(
-          "secrets",
-          secrets?.secrets?.reduce((prev, curr) => ({ ...prev, [curr.key]: curr.value }), {}),
-          { shouldDirty: true }
-        );
+    // If something is wrong show an error
+    try {
+      reader.readAsText(file);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!e.dataTransfer) {
+      return;
+    }
+
+    e.dataTransfer.dropEffect = "copy";
+    setDragActive.off();
+    parseFile(e.dataTransfer.files[0]);
+  };
+
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    parseFile(e.target?.files?.[0], e.target?.files?.[0]?.type === "application/json");
+  };
+
+  const handleFormSubmit = (data: TFormSchema) => {
+    const secretsToBePulled: Record<string, { value: string; comments: string[] }> = {};
+    Object.keys(data.secrets || {}).forEach((key) => {
+      if (data.secrets[key]) {
+        secretsToBePulled[key] = {
+          value: (shouldIncludeValues && data.secrets[key]) || "",
+          comments: [""]
+        };
       }
-    };
+    });
+    onParsedEnv(secretsToBePulled);
+    handlePopUpClose("importSecEnv");
+    reset();
+  };
 
-    return (
-      <div
-        onDragEnter={handleDrag}
-        onDragLeave={handleDrag}
-        onDragOver={handleDrag}
-        onDrop={handleDrop}
-        className={twMerge(
-          "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 py-4 text-sm px-2 text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
-          isDragActive && "opacity-100",
-          !isSmaller && "w-full max-w-3xl flex-col space-y-4 py-20",
-          isLoading && "bg-bunker-800"
-        )}
-      >
-        {isLoading ? (
-          <div className="mb-16 flex items-center justify-center pt-16">
-            <img
-              src="/images/loading/loading.gif"
-              height={70}
-              width={120}
-              alt="loading animation"
-            />
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit(handleFormSubmit)}>
-            <div className="flex items-center justify-cente flex-col space-y-2">
-              <div>
-                <FontAwesomeIcon icon={faUpload} size={isSmaller ? "2x" : "5x"} />
-              </div>
-              <div>
-                <p className="">{t(isSmaller ? "common.drop-zone-keys" : "common.drop-zone")}</p>
-              </div>
-              <input
-                id="fileSelect"
-                type="file"
-                className="absolute h-full w-full cursor-pointer opacity-0"
-                accept=".txt,.env,.yml,.yaml,.json"
-                onChange={handleFileUpload}
-              />
-              <div
-                className={twMerge(
-                  "flex w-full flex-row items-center justify-center py-4",
-                  isSmaller && "py-1"
-                )}
-              >
-                <div className="w-1/5 border-t border-mineshaft-700" />
-                <p className="mx-4 text-xs text-mineshaft-400">OR</p>
-                <div className="w-1/5 border-t border-mineshaft-700" />
-              </div>
-              <div className="flex items-center justify-center space-x-8">
-                <Modal
-                  isOpen={popUp.importSecEnv.isOpen}
-                  onOpenChange={(isOpen) => {
-                    handlePopUpToggle("importSecEnv", isOpen);
-                    reset();
-                    setSearchFilter("");
-                  }}
-                >
-                  <ModalTrigger asChild>
-                    <Button variant="star" size={isSmaller ? "xs" : "sm"}>
-                      Copy Secrets From An Environment
-                    </Button>
-                  </ModalTrigger>
-                  <ModalContent
-                    className="max-w-2xl"
-                    title="Copy Secret From An Environment"
-                    subTitle="Copy/paste secrets from other environments into this context"
-                  >
-                    <form>
-                      <div className="flex items-center space-x-2">
-                        <Controller
-                          control={control}
-                          name="environment"
-                          render={({ field: { value, onChange } }) => (
-                            <FormControl label="Environment" isRequired className="w-1/3">
-                              <Select
-                                value={value}
-                                onValueChange={(val) => onChange(val)}
-                                className="w-full border border-mineshaft-500"
-                                defaultValue={environments?.[0]?.slug}
-                                position="popper"
-                              >
-                                {environments.map((sourceEnvironment) => (
-                                  <SelectItem
-                                    value={sourceEnvironment.slug}
-                                    key={`source-environment-${sourceEnvironment.slug}`}
-                                  >
-                                    {sourceEnvironment.name}
-                                  </SelectItem>
-                                ))}
-                              </Select>
-                            </FormControl>
-                          )}
-                        />
-                        <FormControl label="Secret Path" className="flex-grow" isRequired>
-                          <Input
-                            {...register("secretPath")}
-                            placeholder="Provide a path, default is /"
-                          />
-                        </FormControl>
-                      </div>
-                      <div className="border-t border-mineshaft-600 pt-4">
-                        <div className="mb-4 flex items-center justify-between">
-                          <div>Secrets</div>
-                          <div className="w-1/2 flex items-center space-x-2">
-                            <Input
-                              placeholder="Search for secret"
-                              value={searchFilter}
-                              size="xs"
-                              leftIcon={<FontAwesomeIcon icon={faSearch} />}
-                              onChange={(evt) => setSearchFilter(evt.target.value)}
-                            />
-                            <Tooltip content="Select All">
-                              <IconButton
-                                ariaLabel="Select all"
-                                variant="outline_bg"
-                                size="xs"
-                                onClick={handleSecSelectAll}
-                              >
-                                <FontAwesomeIcon icon={faSquareCheck} size="lg" />
-                              </IconButton>
-                            </Tooltip>
-                            <Tooltip content="Unselect All">
-                              <IconButton
-                                ariaLabel="UnSelect all"
-                                variant="outline_bg"
-                                size="xs"
-                                onClick={() => reset()}
-                              >
-                                <FontAwesomeIcon icon={faSquareXmark} size="lg" />
-                              </IconButton>
-                            </Tooltip>
-                          </div>
-                        </div>
-                        {!isSecretsLoading && !secrets?.secrets?.length && (
-                          <EmptyState title="No secrets found" icon={faKey} />
-                        )}
-                        <div className="grid grid-cols-2 gap-4 max-h-64 overflow-auto thin-scrollbar ">
-                          {isSecretsLoading &&
-                            Array.apply(0, Array(2)).map((_x, i) => (
-                              <Skeleton
-                                key={`secret-pull-loading-${i + 1}`}
-                                className="bg-mineshaft-700"
-                              />
-                            ))}
+  const handleSecSelectAll = () => {
+    if (secrets?.secrets) {
+      setValue(
+        "secrets",
+        secrets?.secrets?.reduce((prev, curr) => ({ ...prev, [curr.key]: curr.value }), {}),
+        { shouldDirty: true }
+      );
+    }
+  };
 
-                          {secrets?.secrets
-                            ?.filter(({ key }) =>
-                              key.toLowerCase().includes(searchFilter.toLowerCase())
-                            )
-                            ?.map(({ _id, key, value: secVal }) => (
-                              <Controller
-                                key={`pull-secret--${_id}`}
-                                control={control}
-                                name={`secrets.${key}`}
-                                render={({ field: { value, onChange } }) => (
-                                  <Checkbox
-                                    id={`pull-secret-${_id}`}
-                                    isChecked={Boolean(value)}
-                                    onCheckedChange={(isChecked) =>
-                                      onChange(isChecked ? secVal : "")
-                                    }
-                                  >
-                                    {key}
-                                  </Checkbox>
-                                )}
-                              />
-                            ))}
-                        </div>
-                        <div className="mt-6 mb-4">
-                          <Checkbox
-                            id="populate-include-value"
-                            isChecked={shouldIncludeValues}
-                            onCheckedChange={(isChecked) =>
-                              setShouldIncludeValues(isChecked as boolean)
-                            }
-                          >
-                            Include secret values
-                          </Checkbox>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Button
-                            leftIcon={<FontAwesomeIcon icon={faClone} />}
-                            type="submit"
-                            isDisabled={!isDirty}
-                          >
-                            Paste Secrets
-                          </Button>
-                          <Button variant="plain" colorSchema="secondary">
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    </form>
-                  </ModalContent>
-                </Modal>
-                {!isSmaller && (
-                  <Button variant="star" onClick={onAddNewSecret}>
-                    Add a new secret
-                  </Button>
-                )}
-              </div>
+  return (
+    <div
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+      className={twMerge(
+        "relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 py-4 text-sm px-2 text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
+        isDragActive && "opacity-100",
+        !isSmaller && "w-full max-w-3xl flex-col space-y-4 py-20",
+        isLoading && "bg-bunker-800"
+      )}
+    >
+      {isLoading ? (
+        <div className="mb-16 flex items-center justify-center pt-16">
+          <img src="/images/loading/loading.gif" height={70} width={120} alt="loading animation" />
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <div className="flex items-center justify-cente flex-col space-y-2">
+            <div>
+              <FontAwesomeIcon icon={faUpload} size={isSmaller ? "2x" : "5x"} />
             </div>
-          </form>
-        )}
-      </div>
-    );
-  },
-  { action: ProjectPermissionActions.Create, subject: ProjectPermissionSub.Secrets }
-);
+            <div>
+              <p className="">{t(isSmaller ? "common.drop-zone-keys" : "common.drop-zone")}</p>
+            </div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Create}
+              a={ProjectPermissionSub.Secrets}
+            >
+              {(isAllowed) => (
+                <input
+                  id="fileSelect"
+                  disabled={!isAllowed}
+                  type="file"
+                  className="absolute h-full w-full cursor-pointer opacity-0"
+                  accept=".txt,.env,.yml,.yaml,.json"
+                  onChange={handleFileUpload}
+                />
+              )}
+            </ProjectPermissionCan>
+            <div
+              className={twMerge(
+                "flex w-full flex-row items-center justify-center py-4",
+                isSmaller && "py-1"
+              )}
+            >
+              <div className="w-1/5 border-t border-mineshaft-700" />
+              <p className="mx-4 text-xs text-mineshaft-400">OR</p>
+              <div className="w-1/5 border-t border-mineshaft-700" />
+            </div>
+            <div className="flex items-center justify-center space-x-8">
+              <Modal
+                isOpen={popUp.importSecEnv.isOpen}
+                onOpenChange={(isOpen) => {
+                  handlePopUpToggle("importSecEnv", isOpen);
+                  reset();
+                  setSearchFilter("");
+                }}
+              >
+                <ModalTrigger asChild>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Create}
+                    a={ProjectPermissionSub.Secrets}
+                  >
+                    {(isAllowed) => (
+                      <Button isDisabled={!isAllowed} variant="star" size={isSmaller ? "xs" : "sm"}>
+                        Copy Secrets From An Environment
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                </ModalTrigger>
+                <ModalContent
+                  className="max-w-2xl"
+                  title="Copy Secret From An Environment"
+                  subTitle="Copy/paste secrets from other environments into this context"
+                >
+                  <form>
+                    <div className="flex items-center space-x-2">
+                      <Controller
+                        control={control}
+                        name="environment"
+                        render={({ field: { value, onChange } }) => (
+                          <FormControl label="Environment" isRequired className="w-1/3">
+                            <Select
+                              value={value}
+                              onValueChange={(val) => onChange(val)}
+                              className="w-full border border-mineshaft-500"
+                              defaultValue={environments?.[0]?.slug}
+                              position="popper"
+                            >
+                              {environments.map((sourceEnvironment) => (
+                                <SelectItem
+                                  value={sourceEnvironment.slug}
+                                  key={`source-environment-${sourceEnvironment.slug}`}
+                                >
+                                  {sourceEnvironment.name}
+                                </SelectItem>
+                              ))}
+                            </Select>
+                          </FormControl>
+                        )}
+                      />
+                      <FormControl label="Secret Path" className="flex-grow" isRequired>
+                        <Input
+                          {...register("secretPath")}
+                          placeholder="Provide a path, default is /"
+                        />
+                      </FormControl>
+                    </div>
+                    <div className="border-t border-mineshaft-600 pt-4">
+                      <div className="mb-4 flex items-center justify-between">
+                        <div>Secrets</div>
+                        <div className="w-1/2 flex items-center space-x-2">
+                          <Input
+                            placeholder="Search for secret"
+                            value={searchFilter}
+                            size="xs"
+                            leftIcon={<FontAwesomeIcon icon={faSearch} />}
+                            onChange={(evt) => setSearchFilter(evt.target.value)}
+                          />
+                          <Tooltip content="Select All">
+                            <IconButton
+                              ariaLabel="Select all"
+                              variant="outline_bg"
+                              size="xs"
+                              onClick={handleSecSelectAll}
+                            >
+                              <FontAwesomeIcon icon={faSquareCheck} size="lg" />
+                            </IconButton>
+                          </Tooltip>
+                          <Tooltip content="Unselect All">
+                            <IconButton
+                              ariaLabel="UnSelect all"
+                              variant="outline_bg"
+                              size="xs"
+                              onClick={() => reset()}
+                            >
+                              <FontAwesomeIcon icon={faSquareXmark} size="lg" />
+                            </IconButton>
+                          </Tooltip>
+                        </div>
+                      </div>
+                      {!isSecretsLoading && !secrets?.secrets?.length && (
+                        <EmptyState title="No secrets found" icon={faKey} />
+                      )}
+                      <div className="grid grid-cols-2 gap-4 max-h-64 overflow-auto thin-scrollbar ">
+                        {isSecretsLoading &&
+                          Array.apply(0, Array(2)).map((_x, i) => (
+                            <Skeleton
+                              key={`secret-pull-loading-${i + 1}`}
+                              className="bg-mineshaft-700"
+                            />
+                          ))}
+
+                        {secrets?.secrets
+                          ?.filter(({ key }) =>
+                            key.toLowerCase().includes(searchFilter.toLowerCase())
+                          )
+                          ?.map(({ _id, key, value: secVal }) => (
+                            <Controller
+                              key={`pull-secret--${_id}`}
+                              control={control}
+                              name={`secrets.${key}`}
+                              render={({ field: { value, onChange } }) => (
+                                <Checkbox
+                                  id={`pull-secret-${_id}`}
+                                  isChecked={Boolean(value)}
+                                  onCheckedChange={(isChecked) => onChange(isChecked ? secVal : "")}
+                                >
+                                  {key}
+                                </Checkbox>
+                              )}
+                            />
+                          ))}
+                      </div>
+                      <div className="mt-6 mb-4">
+                        <Checkbox
+                          id="populate-include-value"
+                          isChecked={shouldIncludeValues}
+                          onCheckedChange={(isChecked) =>
+                            setShouldIncludeValues(isChecked as boolean)
+                          }
+                        >
+                          Include secret values
+                        </Checkbox>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Button
+                          leftIcon={<FontAwesomeIcon icon={faClone} />}
+                          type="submit"
+                          isDisabled={!isDirty}
+                        >
+                          Paste Secrets
+                        </Button>
+                        <Button variant="plain" colorSchema="secondary">
+                          Cancel
+                        </Button>
+                      </div>
+                    </div>
+                  </form>
+                </ModalContent>
+              </Modal>
+              {!isSmaller && (
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Create}
+                  a={ProjectPermissionSub.Secrets}
+                >
+                  {(isAllowed) => (
+                    <Button variant="star" onClick={onAddNewSecret} isDisabled={!isAllowed}>
+                      Add a new secret
+                    </Button>
+                  )}
+                </ProjectPermissionCan>
+              )}
+            </div>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts
index d121d4538..92353d653 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts
@@ -16,37 +16,37 @@ export const formSchema = z.object({
   name: z.string().trim(),
   description: z.string().trim().optional(),
   slug: z.string().trim(),
-  permissions: z.object({
-    workspace: z
-      .object({
-        read: z.boolean().optional(),
-        create: z.boolean().optional()
-      })
-      .optional(),
-    member: generalPermissionSchema,
-    role: generalPermissionSchema,
-    settings: generalPermissionSchema,
-    "service-account": generalPermissionSchema,
-    "incident-contact": generalPermissionSchema,
-    "secret-scanning": generalPermissionSchema,
-    sso: generalPermissionSchema,
-    billing: generalPermissionSchema
-  })
+  permissions: z
+    .object({
+      workspace: z
+        .object({
+          read: z.boolean().optional(),
+          create: z.boolean().optional()
+        })
+        .optional(),
+      member: generalPermissionSchema,
+      role: generalPermissionSchema,
+      settings: generalPermissionSchema,
+      "service-account": generalPermissionSchema,
+      "incident-contact": generalPermissionSchema,
+      "secret-scanning": generalPermissionSchema,
+      sso: generalPermissionSchema,
+      billing: generalPermissionSchema
+    })
+    .optional()
 });
 
 export type TFormSchema = z.infer<typeof formSchema>;
 
 // convert role permission to form compatiable  data structure
 export const rolePermission2Form = (permissions: TPermission[] = []) => {
-  const formVal: Partial<TFormSchema["permissions"]> = {};
-
+  // any because if it set it as form type due to the discriminated union type of ts
+  // i would have to write a if loop with both conditions same
+  const formVal: Record<string, any> = {};
   permissions.forEach((permission) => {
     const { subject, action } = permission;
     if (!formVal?.[subject]) formVal[subject] = {};
-
-    // akhilmhdh: this is typecast as  something other than workspace key else i would need an if loop with same condition on both side
-    const key = subject as keyof TFormSchema["permissions"];
-    (formVal[key] as Exclude<TFormSchema["permissions"]["member"], undefined>)[action] = true;
+    formVal[subject][action] = true;
   });
 
   return formVal;
@@ -54,19 +54,13 @@ export const rolePermission2Form = (permissions: TPermission[] = []) => {
 
 export const formRolePermission2API = (formVal: TFormSchema["permissions"]) => {
   const permissions: TPermission[] = [];
-  (Object.keys(formVal) as Array<keyof typeof formVal>).forEach((rule) => {
-    // all these type annotations are due to Object.keys of ts cannot infer and put it just a string[]
-    // quite annoying i know
-    const actions = Object.keys(formVal[rule] || {}) as Array<
-      keyof z.infer<typeof generalPermissionSchema>
-    >;
-
-    actions.forEach((action) => {
-      // akhilmhdh: set it as any due to the union type bug i would end up writing an if else with same condition on both side
-      if (formVal?.[rule]?.[action as keyof typeof formVal.workspace]) {
-        permissions.push({ subject: rule, action } as any);
+  Object.entries(formVal || {}).forEach(([rule, actions]) => {
+    Object.entries(actions).forEach(([action, isAllowed]) => {
+      if (isAllowed) {
+        permissions.push({ subject: rule, action });
       }
     });
   });
+
   return permissions;
 };
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 59690b9f9..060d5fe66 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/SimpleLevelPermissionOptions.tsx
@@ -11,7 +11,7 @@ import { useToggle } from "@app/hooks";
 import { TFormSchema } from "./OrgRoleModifySection.utils";
 
 type Props = {
-  formName: keyof Omit<TFormSchema["permissions"], "workspace">;
+  formName: keyof Omit<Exclude<TFormSchema["permissions"], undefined>, "workspace">;
   isNonEditable?: boolean;
   setValue: UseFormSetValue<TFormSchema>;
   control: Control<TFormSchema>;
@@ -34,6 +34,31 @@ const PERMISSIONS = [
   { action: "delete", label: "Remove" }
 ] as const;
 
+const SECRET_SCANNING_PERMISSIONS = [
+  { action: "read", label: "View risks" },
+  { action: "create", label: "Add integrations" },
+  { action: "edit", label: "Edit risk status" },
+  { action: "delete", label: "Remove integrations" }
+] as const;
+
+const BILLING_PERMISSIONS = [
+  { action: "read", label: "View bills" },
+  { action: "create", label: "Add payment methods" },
+  { action: "edit", label: "Edit payments" },
+  { action: "delete", label: "Remove payments" }
+] as const;
+
+const getPermissionList = (option: Props["formName"]) => {
+  switch (option) {
+    case "secret-scanning":
+      return SECRET_SCANNING_PERMISSIONS;
+    case "billing":
+      return BILLING_PERMISSIONS;
+    default:
+      return PERMISSIONS;
+  }
+};
+
 export const SimpleLevelPermissionOption = ({
   isNonEditable,
   setValue,
@@ -138,7 +163,7 @@ export const SimpleLevelPermissionOption = ({
         className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
       >
         {isCustom &&
-          PERMISSIONS.map(({ action, label }) => (
+          getPermissionList(formName).map(({ action, label }) => (
             <Controller
               name={`permissions.${formName}.${action}`}
               key={`permissions.${formName}.${action}`}
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 2fb6f9374..6d54a56b9 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/WorkspacePermission.tsx
@@ -86,7 +86,9 @@ export const WorkspacePermission = ({ isNonEditable, setValue, control }: Props)
         </div>
         <div className="flex-grow flex flex-col">
           <div className="font-medium mb-1 text-lg">Project</div>
-          <div className="text-xs font-light">Project management control</div>
+          <div className="text-xs font-light">
+            More fine granined project access control can be defined with project level roles
+          </div>
         </div>
         <div>
           <Select
diff --git a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx
index 5a7d631fc..860469036 100644
--- a/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx
+++ b/frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
@@ -16,10 +17,9 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
-import { useOrganization } from "@app/context";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useDeleteRole } from "@app/hooks/api";
 import { TRole } from "@app/hooks/api/roles/types";
@@ -65,9 +65,17 @@ export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props
             placeholder="Search roles..."
           />
         </div>
-        <Button leftIcon={<FontAwesomeIcon icon={faPlus} />} onClick={() => onSelectRole()}>
-          Add Role
-        </Button>
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
+          {(isAllowed) => (
+            <Button
+              isDisabled={!isAllowed}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => onSelectRole()}
+            >
+              Add Role
+            </Button>
+          )}
+        </OrgPermissionCan>
       </div>
       <div>
         <TableContainer>
@@ -95,27 +103,42 @@ export const OrgRoleTable = ({ isRolesLoading, roles = [], onSelectRole }: Props
                     </Td>
                     <Td>
                       <div className="flex space-x-2 items-center">
-                        <Tooltip content="Edit">
-                          <IconButton
-                            ariaLabel="edit"
-                            onClick={() => onSelectRole(role)}
-                            variant="plain"
-                          >
-                            <FontAwesomeIcon icon={faEdit} />
-                          </IconButton>
-                        </Tooltip>
-                        <Tooltip
-                          content={isNonMutatable ? "Reserved roles are non-removable" : "Delete"}
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Edit}
+                          a={OrgPermissionSubjects.Role}
+                          renderTooltip
+                          allowedLabel="Edit"
                         >
-                          <IconButton
-                            ariaLabel="delete"
-                            onClick={() => handlePopUpOpen("deleteRole", role)}
-                            variant="plain"
-                            isDisabled={isNonMutatable}
-                          >
-                            <FontAwesomeIcon icon={faTrash} />
-                          </IconButton>
-                        </Tooltip>
+                          {(isAllowed) => (
+                            <IconButton
+                              isDisabled={!isAllowed}
+                              ariaLabel="edit"
+                              onClick={() => onSelectRole(role)}
+                              variant="plain"
+                            >
+                              <FontAwesomeIcon icon={faEdit} />
+                            </IconButton>
+                          )}
+                        </OrgPermissionCan>
+                        <OrgPermissionCan
+                          I={OrgPermissionActions.Delete}
+                          a={OrgPermissionSubjects.Role}
+                          renderTooltip
+                          allowedLabel={
+                            isNonMutatable ? "Reserved roles are non-removable" : "Delete"
+                          }
+                        >
+                          {(isAllowed) => (
+                            <IconButton
+                              ariaLabel="delete"
+                              onClick={() => handlePopUpOpen("deleteRole", role)}
+                              variant="plain"
+                              isDisabled={isNonMutatable || !isAllowed}
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
+                          )}
+                        </OrgPermissionCan>
                       </div>
                     </Td>
                   </Tr>
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
index c8545683d..f9f1b8695 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
@@ -17,7 +17,6 @@ import {
   Td,
   Th,
   THead,
-  Tooltip,
   Tr
 } from "@app/components/v2";
 import {
@@ -116,43 +115,37 @@ export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Pr
                         <ProjectPermissionCan
                           I={ProjectPermissionActions.Edit}
                           a={ProjectPermissionSub.Role}
+                          renderTooltip
+                          allowedLabel="Edit"
                         >
                           {(isAllowed) => (
-                            <div>
-                              <Tooltip content="Edit">
-                                <IconButton
-                                  isDisabled={!isAllowed}
-                                  ariaLabel="edit"
-                                  onClick={() => onSelectRole(role)}
-                                  variant="plain"
-                                >
-                                  <FontAwesomeIcon icon={faEdit} />
-                                </IconButton>
-                              </Tooltip>
-                            </div>
+                            <IconButton
+                              isDisabled={!isAllowed}
+                              ariaLabel="edit"
+                              onClick={() => onSelectRole(role)}
+                              variant="plain"
+                            >
+                              <FontAwesomeIcon icon={faEdit} />
+                            </IconButton>
                           )}
                         </ProjectPermissionCan>
                         <ProjectPermissionCan
                           I={ProjectPermissionActions.Delete}
                           a={ProjectPermissionSub.Role}
+                          renderTooltip
+                          allowedLabel={
+                            isNonMutatable ? "Reserved roles are non-removable" : "Delete"
+                          }
                         >
                           {(isAllowed) => (
-                            <div>
-                              <Tooltip
-                                content={
-                                  isNonMutatable ? "Reserved roles are non-removable" : "Delete"
-                                }
-                              >
-                                <IconButton
-                                  ariaLabel="delete"
-                                  onClick={() => handlePopUpOpen("deleteRole", role)}
-                                  variant="plain"
-                                  isDisabled={isNonMutatable || !isAllowed}
-                                >
-                                  <FontAwesomeIcon icon={faTrash} />
-                                </IconButton>
-                              </Tooltip>
-                            </div>
+                            <IconButton
+                              ariaLabel="delete"
+                              onClick={() => handlePopUpOpen("deleteRole", role)}
+                              variant="plain"
+                              isDisabled={isNonMutatable || !isAllowed}
+                            >
+                              <FontAwesomeIcon icon={faTrash} />
+                            </IconButton>
                           )}
                         </ProjectPermissionCan>
                       </div>
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts
index 55ad78bb8..1cfddd7c6 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts
@@ -29,39 +29,41 @@ export const formSchema = z.object({
   name: z.string().trim(),
   description: z.string().trim().optional(),
   slug: z.string().trim(),
-  permissions: z.object({
-    secrets: z.record(multiEnvPermissionSchema).optional(),
-    folders: z.record(multiEnvPermissionSchema).optional(),
-    "secret-imports": z.record(multiEnvPermissionSchema).optional(),
-    member: generalPermissionSchema,
-    role: generalPermissionSchema,
-    integrations: generalPermissionSchema,
-    webhooks: generalPermissionSchema,
-    "service-tokens": generalPermissionSchema,
-    settings: generalPermissionSchema,
-    environments: generalPermissionSchema,
-    tags: generalPermissionSchema,
-    "audit-logs": generalPermissionSchema,
-    "ip-allowlist": generalPermissionSchema,
-    workspace: z
-      .object({
-        edit: z.boolean().optional(),
-        delete: z.boolean().optional()
-      })
-      .optional(),
-    "secret-rollback": z
-      .object({
-        read: z.boolean().optional(),
-        create: z.boolean().optional()
-      })
-      .optional()
-  })
+  permissions: z
+    .object({
+      secrets: z.record(multiEnvPermissionSchema).optional(),
+      folders: z.record(multiEnvPermissionSchema).optional(),
+      "secret-imports": z.record(multiEnvPermissionSchema).optional(),
+      member: generalPermissionSchema,
+      role: generalPermissionSchema,
+      integrations: generalPermissionSchema,
+      webhooks: generalPermissionSchema,
+      "service-tokens": generalPermissionSchema,
+      settings: generalPermissionSchema,
+      environments: generalPermissionSchema,
+      tags: generalPermissionSchema,
+      "audit-logs": generalPermissionSchema,
+      "ip-allowlist": generalPermissionSchema,
+      workspace: z
+        .object({
+          edit: z.boolean().optional(),
+          delete: z.boolean().optional()
+        })
+        .optional(),
+      "secret-rollback": z
+        .object({
+          read: z.boolean().optional(),
+          create: z.boolean().optional()
+        })
+        .optional()
+    })
+    .optional()
 });
 
 export type TFormSchema = z.infer<typeof formSchema>;
 
 const multiEnvApi2Form = (
-  formVal: TFormSchema["permissions"]["secrets"],
+  formVal: Record<string, { secretPath?: string } & { [key: string]: boolean }>,
   permission: TProjectPermission
 ) => {
   const isCustomRule = Boolean(permission?.conditions?.environment);
@@ -76,28 +78,26 @@ const multiEnvApi2Form = (
   if (formVal && !formVal?.[secretEnv]) {
     formVal[secretEnv] = { read: false, edit: false, create: false, delete: false, secretPath };
   }
-  formVal![secretEnv]![permission.action] = true;
+
+  formVal[secretEnv][permission.action] = true;
 };
 
 // convert role permission to form compatiable  data structure
 export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
-  const formVal: Partial<TFormSchema["permissions"]> = {};
+  // any because if it set it as form type due to the discriminated union type of ts
+  // i would have to write a if loop with both conditions same
+  const formVal: Record<string, any> = {};
 
   permissions.forEach((permission) => {
     const { subject, action } = permission;
     if (!formVal?.[subject]) formVal[subject] = {};
 
     if (["secrets", "folders", "secret-imports"].includes(subject)) {
-      multiEnvApi2Form(formVal[subject] as TFormSchema["permissions"]["secrets"], permission);
+      multiEnvApi2Form(formVal[subject], permission);
     } else {
       // everything else follows same pattern
       // formVal[settings][read | write] = true
-      formVal[
-        subject as keyof Omit<
-          TFormSchema["permissions"],
-          "secrets" | "workspace" | "secret-rollback"
-        >
-      ]![action] = true;
+      formVal[subject][action] = true;
     }
   });
 
@@ -106,7 +106,7 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
 
 const multiEnvForm2Api = (
   permissions: TProjectPermission[],
-  formVal: TFormSchema["permissions"]["secrets"],
+  formVal: Record<string, { secretPath?: string } & { [key: string]: boolean }>,
   subject: (typeof MULTI_ENV_KEY)[number]
 ) => {
   const isFullAccess = PERMISSION_ACTIONS.every((action) => formVal?.all?.[action]);
@@ -142,24 +142,16 @@ const multiEnvForm2Api = (
 export const formRolePermission2API = (formVal: TFormSchema["permissions"]) => {
   const permissions: TProjectPermission[] = [];
   MULTI_ENV_KEY.forEach((formName) => {
-    multiEnvForm2Api(permissions, JSON.parse(JSON.stringify(formVal[formName] || {})), formName);
+    multiEnvForm2Api(permissions, JSON.parse(JSON.stringify(formVal?.[formName] || {})), formName);
   });
   // other than workspace everything else follows same
   // if in future there is a different follow the above on how workspace is done
-  (Object.keys(formVal) as Array<keyof typeof formVal>)
-    .filter((key) => !["secret-imports", "folders", "secrets"].includes(key))
-    .forEach((rule) => {
-      // all these type annotations are due to Object.keys of ts cannot infer and put it just a string[]
-      // quite annoying i know
-      const actions = Object.keys(formVal[rule] || {}) as Array<
-        keyof z.infer<typeof generalPermissionSchema>
-      >;
-      actions.forEach((action) => {
-        // akhilmhdh: set it as any due to the union type bug i would end up writing an if else with same condition on both side
-        if (formVal[rule]?.[action as keyof typeof formVal.workspace]) {
-          permissions.push({ subject: rule, action } as any);
-        }
-      });
+  Object.entries(formVal || {}).forEach(([rule, actions]) => {
+    Object.entries(actions).forEach(([action, isAllowed]) => {
+      if (isAllowed) {
+        permissions.push({ subject: rule, action });
+      }
     });
+  });
   return permissions;
 };
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx
index b52848ca4..c08dbdb9b 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/WsProjectPermission.tsx
@@ -23,8 +23,8 @@ enum Permission {
 }
 
 const PERMISSIONS = [
-  { action: "edit", label: "Update" },
-  { action: "delete", label: "Remove" }
+  { action: "edit", label: "Update workspace details" },
+  { action: "delete", label: "Delete workspace" }
 ] as const;
 
 export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props) => {
@@ -80,8 +80,8 @@ export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props)
           <FontAwesomeIcon icon={faPuzzlePiece} className="text-4xl" />
         </div>
         <div className="flex-grow flex flex-col">
-          <div className="font-medium mb-1 text-lg">Workspace</div>
-          <div className="text-xs font-light">Workspace control actions</div>
+          <div className="font-medium mb-1 text-lg">Project</div>
+          <div className="text-xs font-light">Project control actions</div>
         </div>
         <div>
           <Select
diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
index 3c9c016a8..178992f7f 100644
--- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
+++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx
@@ -1,12 +1,10 @@
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
-import { OrgServiceAccountsTable } from "../OrgServiceAccountsTable";
 
 export const OrgGeneralTab = () => {
   return (
     <div>
       <OrgNameChangeSection />
-      <OrgServiceAccountsTable />
       <OrgIncidentContactsSection />
     </div>
   );