improvement: move edit/delete identity buttons to dropdown

frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -1,21 +1,11 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "@tanstack/react-router";
-import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import {
+import { DeleteActionModal, PageHeader } from "@app/components/v2";
-  Button,
-  DeleteActionModal,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  PageHeader,
-  Tooltip
-} from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
 import { useDeleteIdentity, useGetIdentityById } from "@app/hooks/api";
@@ -85,81 +75,7 @@ const Page = () => {
     <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">
-          <PageHeader title={data.identity.name}>
+          <PageHeader title={data.identity.name} />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild className="rounded-lg">
-                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                  <Tooltip content="More options">
-                    <Button variant="outline_bg">More</Button>
-                  </Tooltip>
-                </div>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-                  {(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 Identity
-                    </DropdownMenuItem>
-                  )}
-                </OrgPermissionCan>
-                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
-                  {(isAllowed) => (
-                    <DropdownMenuItem
-                      className={twMerge(
-                        !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                      )}
-                      onClick={async () => {
-                        handlePopUpOpen("identityAuthMethod", {
-                          identityId,
-                          name: data.identity.name,
-                          allAuthMethods: data.identity.authMethods
-                        });
-                      }}
-                      disabled={!isAllowed}
-                    >
-                      Add new auth method
-                    </DropdownMenuItem>
-                  )}
-                </OrgPermissionCan>
-                <OrgPermissionCan
-                  I={OrgPermissionActions.Delete}
-                  a={OrgPermissionSubjects.Identity}
-                >
-                  {(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 Identity
-                    </DropdownMenuItem>
-                  )}
-                </OrgPermissionCan>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </PageHeader>
           <div className="flex">
             <div className="mr-4 w-96">
               <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />

frontend/src/pages/organization/IdentityDetailsByIDPage/components/IdentityDetailsSection.tsx

@@ -1,8 +1,25 @@
-import { faCheck, faCopy, faKey, faPencil } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCheck,
+  faChevronDown,
+  faCopy,
+  faEdit,
+  faKey,
+  faTrash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { OrgPermissionCan } from "@app/components/permissions";
-import { IconButton, Tag, Tooltip } from "@app/components/v2";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconButton,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { useTimedReset } from "@app/hooks";
 import { useGetIdentityById } from "@app/hooks/api";
@@ -11,7 +28,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 type Props = {
   identityId: string;
   handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["identity", "identityAuthMethod"]>,
+    popUpName: keyof UsePopUpState<["identity", "identityAuthMethod", "deleteIdentity"]>,
     data?: object
   ) => void;
 };
@@ -26,31 +43,61 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
     <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">Identity Details</h3>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+        <DropdownMenu>
-          {(isAllowed) => {
+          <DropdownMenuTrigger asChild>
-            return (
+            <Button
-              <Tooltip content="Edit Identity">
+              size="xs"
-                <IconButton
+              rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
-                  isDisabled={!isAllowed}
+              colorSchema="secondary"
-                  ariaLabel="copy icon"
+            >
-                  variant="plain"
+              Options
-                  className="group relative"
+            </Button>
-                  onClick={() => {
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="min-w-[120px]" align="end">
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Identity}>
+              {(isAllowed) => (
+                <DropdownMenuItem
+                  className={twMerge(
+                    !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                  )}
+                  icon={<FontAwesomeIcon icon={faEdit} />}
+                  onClick={async () => {
                     handlePopUpOpen("identity", {
                       identityId,
                       name: data.identity.name,
                       role: data.role,
-                      customRole: data.customRole,
+                      customRole: data.customRole
-                      metadata: data.metadata
                     });
                   }}
+                  disabled={!isAllowed}
                 >
-                  <FontAwesomeIcon icon={faPencil} />
+                  Edit Identity
-                </IconButton>
+                </DropdownMenuItem>
-              </Tooltip>
+              )}
-            );
+            </OrgPermissionCan>
-          }}
+            <OrgPermissionCan I={OrgPermissionActions.Delete} a={OrgPermissionSubjects.Identity}>
-        </OrgPermissionCan>
+              {(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
+                    });
+                  }}
+                  icon={<FontAwesomeIcon icon={faTrash} />}
+                  disabled={!isAllowed}
+                >
+                  Delete Identity
+                </DropdownMenuItem>
+              )}
+            </OrgPermissionCan>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <div className="pt-4">
         <div className="mb-4">