Begin role page

2026-10-15 21:40:31 +00:00 · 2024-07-18 20:12:52 +07:00
parent ce26a06129
commit 7127f6d1e1
10 changed files with 462 additions and 3 deletions
@@ -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
@@ -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 }
+);
@@ -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 />
+  );
+};
@@ -0,0 +1 @@
+export { RoleDetailsSection } from "./RoleDetailsSection";
@@ -0,0 +1 @@
+export { RolePage } from "./RolePage";
				`@@ -0,0 +1 @@`
				`export { RoleDetailsSection } from "./RoleDetailsSection";`