Begin role page

backend/src/ee/routes/v1/org-role-router.ts

@@ -52,6 +52,37 @@ export const registerOrgRoleRouter = async (server: FastifyZodProvider) => {
     }
   });
 
+  server.route({
+    // new: note that doesn't work for default roles
+    method: "GET",
+    url: "/:organizationId/roles/:roleId",
+    config: {
+      rateLimit: readLimit
+    },
+    schema: {
+      params: z.object({
+        organizationId: z.string().trim(),
+        roleId: z.string().trim()
+      }),
+      response: {
+        200: z.object({
+          role: OrgRolesSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      const role = await server.services.orgRole.getRole(
+        req.permission.id,
+        req.params.organizationId,
+        req.params.roleId,
+        req.permission.authMethod,
+        req.permission.orgId
+      );
+      return { role };
+    }
+  });
+
   server.route({
     method: "PATCH",
     url: "/:organizationId/roles/:roleId",

backend/src/services/org/org-role-service.ts

@@ -42,6 +42,20 @@ export const orgRoleServiceFactory = ({ orgRoleDAL, permissionService }: TOrgRol
     return role;
   };
 
+  const getRole = async (
+    userId: string,
+    orgId: string,
+    roleId: string,
+    actorAuthMethod: ActorAuthMethod,
+    actorOrgId: string | undefined
+  ) => {
+    const { permission } = await permissionService.getUserOrgPermission(userId, orgId, actorAuthMethod, actorOrgId);
+    ForbiddenError.from(permission).throwUnlessCan(OrgPermissionActions.Read, OrgPermissionSubjects.Role);
+    const role = await orgRoleDAL.findOne({ id: roleId, orgId });
+    if (!role) throw new BadRequestError({ message: "Role not found", name: "Get role" });
+    return role;
+  };
+
   const updateRole = async (
     userId: string,
     orgId: string,
@@ -144,5 +158,5 @@ export const orgRoleServiceFactory = ({ orgRoleDAL, permissionService }: TOrgRol
     return { permissions: packRules(permission.rules), membership };
   };
 
-  return { createRole, updateRole, deleteRole, listRoles, getUserPermission };
+  return { createRole, getRole, updateRole, deleteRole, listRoles, getUserPermission };
 };

frontend/src/hooks/api/roles/index.tsx

@@ -7,6 +7,7 @@ export {
   useUpdateProjectRole
 } from "./mutation";
 export {
+  useGetOrgRole,
   useGetOrgRoles,
   useGetProjectRoleBySlug,
   useGetProjectRoles,

frontend/src/hooks/api/roles/queries.tsx

@@ -40,6 +40,7 @@ export const roleQueryKeys = {
   getProjectRoleBySlug: (projectSlug: string, roleSlug: string) =>
     ["roles", { projectSlug, roleSlug }] as const,
   getOrgRoles: (orgId: string) => ["org-roles", { orgId }] as const,
+  getOrgRole: (orgId: string, roleId: string) => [{ orgId, roleId }, "org-role"] as const,
   getUserOrgPermissions: ({ orgId }: TGetUserOrgPermissionsDTO) =>
     ["user-permissions", { orgId }] as const,
   getUserProjectPermissions: ({ workspaceId }: TGetUserProjectPermissionDTO) =>
@@ -89,6 +90,18 @@ export const useGetOrgRoles = (orgId: string, enable = true) =>
     enabled: Boolean(orgId) && enable
   });
 
+export const useGetOrgRole = (orgId: string, roleId: string) =>
+  useQuery({
+    queryKey: roleQueryKeys.getOrgRole(orgId, roleId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ role: TProjectRole }>(
+        `/api/v1/organization/${orgId}/roles/${roleId}` // TODO: implement
+      );
+      return data.role;
+    },
+    enabled: Boolean(orgId && roleId)
+  });
+
 const getUserOrgPermissions = async ({ orgId }: TGetUserOrgPermissionsDTO) => {
   if (orgId === "") return { permissions: [], membership: null };
 

frontend/src/pages/org/[id]/roles/[roleId]/index.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { RolePage } from "@app/views/Org/RolePage";
+
+export default function Role() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <RolePage />
+    </>
+  );
+}
+
+Role.requireAuth = true;

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleTable.tsx

@@ -1,4 +1,5 @@
-import { faEllipsis,faPlus } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
@@ -30,6 +31,7 @@ type Props = {
 };
 
 export const OrgRoleTable = ({ onSelectRole }: Props) => {
+  const router = useRouter();
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 
@@ -92,6 +94,7 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
                 <Tr
                   key={`role-list-${id}`}
                   className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                  onClick={() => router.push(`/org/${orgId}/roles/${id}`)}
                 >
                   <Td>{name}</Td>
                   <Td>{slug}</Td>
@@ -114,7 +117,10 @@ export const OrgRoleTable = ({ onSelectRole }: Props) => {
                               className={twMerge(
                                 !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                               )}
-                              onClick={() => onSelectRole(role)}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                onSelectRole(role);
+                              }}
                               disabled={!isAllowed}
                             >
                               Edit Role

frontend/src/views/Org/RolePage/RolePage.tsx

@@ -0,0 +1,285 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  UpgradePlanModal
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { withPermission } from "@app/hoc";
+import {
+  //   useDeleteIdentity,
+  //   useGetIdentityById,
+  //   useRevokeIdentityTokenAuthToken,
+  //   useRevokeIdentityUniversalAuthClientSecret,
+  useGetOrgRole
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { RoleDetailsSection } from "./components";
+
+// import { IdentityAuthMethodModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal";
+// import { IdentityModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal";
+// import { IdentityUniversalAuthClientSecretModal } from "../MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthClientSecretModal";
+// import {
+//   IdentityAuthenticationSection,
+//   IdentityClientSecretModal,
+//   IdentityDetailsSection,
+//   IdentityProjectsSection,
+//   IdentityTokenListModal,
+//   IdentityTokenModal
+// } from "./components";
+
+export const RolePage = withPermission(
+  () => {
+    const router = useRouter();
+    const roleId = router.query.roleId as string;
+    const { currentOrg } = useOrganization();
+    const orgId = currentOrg?.id || "";
+    const { data } = useGetOrgRole(orgId, roleId);
+    console.log("useGetOrgRole data: ", data);
+
+    // const { data } = useGetIdentityById(identityId); // TODO: get role by id
+    // const { mutateAsync: deleteIdentity } = useDeleteIdentity();
+    // const { mutateAsync: revokeToken } = useRevokeIdentityTokenAuthToken();
+    // const { mutateAsync: revokeClientSecret } = useRevokeIdentityUniversalAuthClientSecret();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "identity",
+      "deleteIdentity",
+      "identityAuthMethod",
+      "revokeAuthMethod",
+      "token",
+      "tokenList",
+      "revokeToken",
+      "clientSecret",
+      "revokeClientSecret",
+      "universalAuthClientSecret", // list of client secrets
+      "upgradePlan"
+    ] as const);
+
+    // const onDeleteIdentitySubmit = async (id: string) => {
+    //   try {
+    //     await deleteIdentity({
+    //       identityId: id,
+    //       organizationId: orgId
+    //     });
+
+    //     createNotification({
+    //       text: "Successfully deleted identity",
+    //       type: "success"
+    //     });
+
+    //     handlePopUpClose("deleteIdentity");
+    //     router.push(`/org/${orgId}/members`);
+    //   } catch (err) {
+    //     console.error(err);
+    //     const error = err as any;
+    //     const text = error?.response?.data?.message ?? "Failed to delete identity";
+
+    //     createNotification({
+    //       text,
+    //       type: "error"
+    //     });
+    //   }
+    // };
+
+    // const onRevokeTokenSubmit = async ({
+    //   identityId: parentIdentityId,
+    //   tokenId,
+    //   name
+    // }: {
+    //   identityId: string;
+    //   tokenId: string;
+    //   name: string;
+    // }) => {
+    //   try {
+    //     await revokeToken({
+    //       identityId: parentIdentityId,
+    //       tokenId
+    //     });
+
+    //     handlePopUpClose("revokeToken");
+
+    //     createNotification({
+    //       text: `Successfully revoked token ${name ?? ""}`,
+    //       type: "success"
+    //     });
+    //   } catch (err) {
+    //     console.error(err);
+    //     const error = err as any;
+    //     const text = error?.response?.data?.message ?? "Failed to delete identity";
+
+    //     createNotification({
+    //       text,
+    //       type: "error"
+    //     });
+    //   }
+    // };
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/org/${orgId}/members`);
+              }}
+              className="mb-4"
+            >
+              Roles
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.name}</p>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="rounded-lg">
+                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                    <Tooltip content="More options">
+                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    </Tooltip>
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="p-1">
+                  <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={async () => {
+                          //   handlePopUpOpen("identity", {
+                          //     identityId,
+                          //     name: data.identity.name,
+                          //     role: data.role,
+                          //     customRole: data.customRole
+                          //   });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Edit Role
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                  <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Role}>
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          isAllowed
+                            ? "hover:!bg-red-500 hover:!text-white"
+                            : "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={async () => {
+                          //   handlePopUpOpen("deleteIdentity", {
+                          //     identityId,
+                          //     name: data.identity.name
+                          //   });
+                        }}
+                        disabled={!isAllowed}
+                      >
+                        Delete Role
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
+              </div>
+              Permissions Section
+              {/* <IdentityProjectsSection identityId={identityId} /> */}
+            </div>
+          </div>
+        )}
+        {/* <IdentityModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <IdentityAuthMethodModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <IdentityTokenModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <IdentityTokenListModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <IdentityClientSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+        <IdentityUniversalAuthClientSecretModal
+          popUp={popUp}
+          handlePopUpOpen={handlePopUpOpen}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={(popUp.upgradePlan?.data as { description: string })?.description}
+        />
+        <DeleteActionModal
+          isOpen={popUp.deleteIdentity.isOpen}
+          title={`Are you sure want to delete ${
+            (popUp?.deleteIdentity?.data as { name: string })?.name || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteIdentity", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onDeleteIdentitySubmit(
+              (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+            )
+          }
+        />
+        <DeleteActionModal
+          isOpen={popUp.revokeToken.isOpen}
+          title={`Are you sure want to revoke ${
+            (popUp?.revokeToken?.data as { name: string })?.name || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("revokeToken", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => {
+            const revokeTokenData = popUp?.revokeToken?.data as {
+              identityId: string;
+              tokenId: string;
+              name: string;
+            };
+
+            return onRevokeTokenSubmit(revokeTokenData);
+          }}
+        />
+        <DeleteActionModal
+          isOpen={popUp.revokeClientSecret.isOpen}
+          title={`Are you sure want to delete the client secret ${
+            (popUp?.revokeClientSecret?.data as { clientSecretPrefix: string })
+              ?.clientSecretPrefix || ""
+          }************?`}
+          onChange={(isOpen) => handlePopUpToggle("revokeClientSecret", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => {
+            const deleteClientSecretData = popUp?.revokeClientSecret?.data as {
+              clientSecretId: string;
+              clientSecretPrefix: string;
+            };
+
+            return onDeleteClientSecretSubmit({
+              clientSecretId: deleteClientSecretData.clientSecretId
+            });
+          }}
+        /> */}
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Role }
+);

frontend/src/views/Org/RolePage/components/RoleDetailsSection.tsx

@@ -0,0 +1,87 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects,useOrganization } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetOrgRole } from "@app/hooks/api";
+// import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  roleId: string;
+  //   handlePopUpOpen: (popUpName: keyof UsePopUpState<[]>, data?: {}) => void;
+};
+
+export const RoleDetailsSection = ({ roleId }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { data } = useGetOrgRole(orgId, roleId);
+
+  console.log("useGetOrgRole data: ", data);
+
+  return data ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Details</h3>
+        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Role}>
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit Role">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={() => {
+                    // handlePopUpOpen("identity", {
+                    //   identityId,
+                    //   name: data.identity.name,
+                    //   role: data.role,
+                    //   customRole: data.customRole
+                    // });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Role ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{roleId}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(roleId);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
+          <p className="text-sm text-mineshaft-300">{data.name}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};

frontend/src/views/Org/RolePage/components/index.tsx

@@ -0,0 +1 @@
+export { RoleDetailsSection } from "./RoleDetailsSection";

frontend/src/views/Org/RolePage/index.tsx

@@ -0,0 +1 @@
+export { RolePage } from "./RolePage";