improvements: address feedback

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

@@ -201,14 +201,6 @@ const Page = () => {
         onOpenChange={(isOpen) => handlePopUpToggle("viewAuthMethod", isOpen)}
         authMethod={popUp.viewAuthMethod.data}
         identityId={identityId}
-        onEditAuthMethod={(authMethod) =>
-          handlePopUpOpen("identityAuthMethod", {
-            identityId,
-            name: data?.identity.name,
-            allAuthMethods: data?.identity.authMethods,
-            authMethod
-          })
-        }
       />
     </div>
   );

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityAuthFieldDisplay.tsx

@@ -9,11 +9,11 @@ type Props = {
 export const IdentityAuthFieldDisplay = ({ label, children, className }: Props) => {
   return (
     <div className={className}>
-      <span className="text-xs font-medium text-mineshaft-400">{label}</span>
+      <span className="text-sm text-mineshaft-400">{label}</span>
       {children ? (
-        <p className="break-words text-sm leading-4">{children}</p>
+        <p className="break-words text-base leading-4">{children}</p>
       ) : (
-        <p className="text-sm italic leading-4 text-bunker-400">Not set</p>
+        <p className="text-base italic leading-4 text-bunker-400">Not set</p>
       )}
     </div>
   );

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityTokenAuthTokensTable.tsx

@@ -75,8 +75,8 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
 
   return (
     <div className="col-span-2 mt-3">
-      <div className="flex items-baseline justify-between border-b border-mineshaft-500 pb-1">
-        <span className="text-sm text-bunker-300">Access Tokens</span>
+      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
+        <span className="text-bunker-300">Access Tokens</span>
         <Button
           size="xs"
           onClick={() => {

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/IdentityUniversalAuthClientSecretsTable.tsx

@@ -64,8 +64,8 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
 
   return (
     <div className="col-span-2">
-      <div className="flex items-baseline justify-between border-b border-mineshaft-500 pb-1">
-        <span className="text-sm text-bunker-300">Client Secrets</span>
+      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
+        <span className="text-bunker-300">Client Secrets</span>
         <Button
           size="xs"
           onClick={() => {

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

@@ -1,3 +1,4 @@
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { DeleteActionModal, Modal, ModalContent } from "@app/components/v2";
 import { useOrganization } from "@app/context";
@@ -30,7 +31,6 @@ type Props = {
   authMethod?: IdentityAuthMethod;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
-  onEditAuthMethod: (authMethod: IdentityAuthMethod) => void;
   onDeleteAuthMethod: () => void;
 };
 
@@ -42,13 +42,16 @@ type TRevokeOptions = {
 export const Content = ({
   identityId,
   authMethod,
-  onEditAuthMethod,
   onDeleteAuthMethod
-}: Pick<Props, "authMethod" | "identityId" | "onEditAuthMethod" | "onDeleteAuthMethod">) => {
+}: Pick<Props, "authMethod" | "identityId" | "onDeleteAuthMethod">) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
 
-  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["revokeAuthMethod"] as const);
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+    "revokeAuthMethod",
+    "upgradePlan",
+    "identityAuthMethod"
+  ] as const);
 
   const { mutateAsync: revokeUniversalAuth } = useDeleteIdentityUniversalAuth();
   const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
@@ -128,7 +131,9 @@ export const Content = ({
       <Component
         identityId={identityId}
         onDelete={handleDelete}
-        onEdit={() => onEditAuthMethod(authMethod)}
+        popUp={popUp}
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
       />
       <DeleteActionModal
         isOpen={popUp?.revokeAuthMethod?.isOpen}
@@ -138,6 +143,11 @@ export const Content = ({
         buttonText="Remove"
         onDeleteApproved={handleDeleteAuthMethod}
       />
+      <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      />
     </>
   );
 };
@@ -146,8 +156,7 @@ export const ViewIdentityAuthModal = ({
   isOpen,
   onOpenChange,
   authMethod,
-  identityId,
-  onEditAuthMethod
+  identityId
 }: Omit<Props, "onDeleteAuthMethod">) => {
   if (!identityId || !authMethod) return null;
 
@@ -157,7 +166,6 @@ export const ViewIdentityAuthModal = ({
         <Content
           identityId={identityId}
           authMethod={authMethod}
-          onEditAuthMethod={onEditAuthMethod}
           onDeleteAuthMethod={() => onOpenChange(false)}
         />
       </ModalContent>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAwsAuthContent.tsx

@@ -2,6 +2,7 @@ import { faBan } from "@fortawesome/free-solid-svg-icons";
 
 import { EmptyState, Spinner } from "@app/components/v2";
 import { useGetIdentityAwsAuth } from "@app/hooks/api";
+import { IdentityAwsAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
 import { ViewAuthMethodProps } from "./types";
@@ -9,8 +10,10 @@ import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
 
 export const ViewIdentityAwsAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityAwsAuth(identityId);
 
@@ -28,8 +31,34 @@ export const ViewIdentityAwsAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityAwsAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Principal ARNs">
         {data.allowedPrincipalArns
           ?.split(",")
@@ -45,18 +74,6 @@ export const ViewIdentityAwsAuthContent = ({
       <IdentityAuthFieldDisplay className="col-span-2" label="STS Endpoint">
         {data.stsEndpoint}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );
 };

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAzureAuthContent.tsx

@@ -2,6 +2,7 @@ import { faBan } from "@fortawesome/free-solid-svg-icons";
 
 import { EmptyState, Spinner } from "@app/components/v2";
 import { useGetIdentityAzureAuth } from "@app/hooks/api";
+import { IdentityAzureAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
 import { ViewAuthMethodProps } from "./types";
@@ -9,8 +10,10 @@ import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
 
 export const ViewIdentityAzureAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityAzureAuth(identityId);
 
@@ -28,20 +31,22 @@ export const ViewIdentityAzureAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityAzureAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Tenant ID">
-        {data.tenantId}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Resource / Audience">
-        {data.resource}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Principal IDs">
-        {data.allowedServicePrincipalIds
-          ?.split(",")
-          .map((id) => id.trim())
-          .join(", ")}
-      </IdentityAuthFieldDisplay>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
       <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
@@ -54,6 +59,18 @@ export const ViewIdentityAzureAuthContent = ({
       <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
         {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
       </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Tenant ID">
+        {data.tenantId}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Resource / Audience">
+        {data.resource}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Principal IDs">
+        {data.allowedServicePrincipalIds
+          ?.split(",")
+          .map((id) => id.trim())
+          .join(", ")}
+      </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );
 };

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper.tsx

@@ -1,8 +1,14 @@
 import { ReactNode } from "react";
-import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Button } from "@app/components/v2";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@app/components/v2";
 
 type Props = {
   children: ReactNode;
@@ -14,25 +20,28 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <div className="flex items-baseline justify-between border-b border-mineshaft-500 pb-1">
-          <span className="text-sm text-bunker-300">Details</span>
+        <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
+          <span className="text-bunker-300">Details</span>
           <div className="flex items-center gap-2">
-            <Button
-              size="xs"
-              onClick={onEdit}
-              leftIcon={<FontAwesomeIcon icon={faEdit} />}
-              colorSchema="secondary"
-            >
-              Edit
-            </Button>
-            <Button
-              size="xs"
-              onClick={onDelete}
-              leftIcon={<FontAwesomeIcon icon={faTrash} />}
-              colorSchema="danger"
-            >
-              Delete
-            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  size="xs"
+                  rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
+                  colorSchema="secondary"
+                >
+                  Options
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="min-w-[120px]" align="end">
+                <DropdownMenuItem onClick={onEdit} icon={<FontAwesomeIcon icon={faEdit} />}>
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={onDelete} icon={<FontAwesomeIcon icon={faTrash} />}>
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
         <div className="mt-3 grid grid-cols-2 gap-3">{children}</div>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityGcpAuthContent.tsx

@@ -2,6 +2,7 @@ import { faBan } from "@fortawesome/free-solid-svg-icons";
 
 import { EmptyState, Spinner } from "@app/components/v2";
 import { useGetIdentityGcpAuth } from "@app/hooks/api";
+import { IdentityGcpAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
 import { ViewAuthMethodProps } from "./types";
@@ -9,8 +10,10 @@ import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
 
 export const ViewIdentityGcpAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityGcpAuth(identityId);
 
@@ -28,8 +31,34 @@ export const ViewIdentityGcpAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityGcpAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Type">
         {data.type === "gce" ? "GCP ID Token Auth" : "GCP IAM Auth"}
       </IdentityAuthFieldDisplay>
@@ -55,18 +84,6 @@ export const ViewIdentityGcpAuthContent = ({
           </IdentityAuthFieldDisplay>
         </>
       )}
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );
 };

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityJwtAuthContent.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
 import { useGetIdentityJwtAuth } from "@app/hooks/api";
 import { IdentityJwtConfigurationType } from "@app/hooks/api/identities/enums";
+import { IdentityJwtAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityJwtAuthForm";
 import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
@@ -11,8 +12,10 @@ import { ViewAuthMethodProps } from "./types";
 
 export const ViewIdentityJwtAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityJwtAuth(identityId);
 
@@ -30,38 +33,66 @@ export const ViewIdentityJwtAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityJwtAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay label="Configuration Type">
         {data.configurationType === IdentityJwtConfigurationType.JWKS ? "JWKS" : "Static"}
       </IdentityAuthFieldDisplay>
       {data.configurationType === IdentityJwtConfigurationType.JWKS ? (
         <>
-          <IdentityAuthFieldDisplay className="col-span-2" label="JWKS CA Certificate">
-            <Tooltip
-              side="right"
-              className="max-w-xl p-2"
-              content={
-                <p className="break-words rounded bg-mineshaft-600 p-2">{data.jwksCaCert}</p>
-              }
-            >
-              <div className="w-min">
-                <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-                  <FontAwesomeIcon icon={faEye} />
-                  <span>Reveal</span>
-                </Badge>
-              </div>
-            </Tooltip>
-          </IdentityAuthFieldDisplay>
           <IdentityAuthFieldDisplay className="col-span-2" label="JWKS URL">
             {data.jwksUrl}
           </IdentityAuthFieldDisplay>
+          <IdentityAuthFieldDisplay className="col-span-2" label="JWKS CA Certificate">
+            {data.jwksCaCert && (
+              <Tooltip
+                side="right"
+                className="max-w-xl p-2"
+                content={
+                  <p className="break-words rounded bg-mineshaft-600 p-2">{data.jwksCaCert}</p>
+                }
+              >
+                <div className="w-min">
+                  <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                    <FontAwesomeIcon icon={faEye} />
+                    <span>Reveal</span>
+                  </Badge>
+                </div>
+              </Tooltip>
+            )}
+          </IdentityAuthFieldDisplay>
         </>
       ) : (
         <IdentityAuthFieldDisplay className="col-span-2" label="Public Keys">
-          <div className="flex flex-wrap gap-1">
-            {data.publicKeys.length &&
-              data.publicKeys.map((key, index) => (
+          {data.publicKeys.length && (
+            <div className="flex flex-wrap gap-1">
+              {data.publicKeys.map((key, index) => (
                 <Tooltip
                   side="right"
                   className="max-w-xl p-2"
@@ -80,7 +111,8 @@ export const ViewIdentityJwtAuthContent = ({
                   </div>
                 </Tooltip>
               ))}
-          </div>
+            </div>
+          )}
         </IdentityAuthFieldDisplay>
       )}
       <IdentityAuthFieldDisplay className="col-span-2" label="Issuer">
@@ -115,18 +147,6 @@ export const ViewIdentityJwtAuthContent = ({
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );
 };

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityKubernetesAuthContent.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
 import { useGetIdentityKubernetesAuth } from "@app/hooks/api";
+import { IdentityKubernetesAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
 import { ViewAuthMethodProps } from "./types";
@@ -10,8 +11,10 @@ import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
 
 export const ViewIdentityKubernetesAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityKubernetesAuth(identityId);
 
@@ -32,8 +35,34 @@ export const ViewIdentityKubernetesAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityKubernetesAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay
         className="col-span-2"
         label="Kubernetes Host / Base Kubernetes API URL"
@@ -72,30 +101,20 @@ export const ViewIdentityKubernetesAuthContent = ({
         {data.allowedAudience}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
-        <Tooltip
-          side="right"
-          className="max-w-xl p-2"
-          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
-        >
-          <div className="w-min">
-            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-              <FontAwesomeIcon icon={faEye} />
-              <span>Reveal</span>
-            </Badge>
-          </div>
-        </Tooltip>
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+        {data.caCert && (
+          <Tooltip
+            side="right"
+            className="max-w-xl p-2"
+            content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
+          >
+            <div className="w-min">
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faEye} />
+                <span>Reveal</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
       </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityOidcAuthContent.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
 import { useGetIdentityOidcAuth } from "@app/hooks/api";
+import { IdentityOidcAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm";
 import { ViewIdentityContentWrapper } from "@app/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityContentWrapper";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
@@ -10,8 +11,10 @@ import { ViewAuthMethodProps } from "./types";
 
 export const ViewIdentityOidcAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityOidcAuth(identityId);
 
@@ -29,8 +32,34 @@ export const ViewIdentityOidcAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityOidcAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="OIDC Discovery URL">
         {data.oidcDiscoveryUrl}
       </IdentityAuthFieldDisplay>
@@ -38,18 +67,20 @@ export const ViewIdentityOidcAuthContent = ({
         {data.boundIssuer}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
-        <Tooltip
-          side="right"
-          className="max-w-xl p-2"
-          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
-        >
-          <div className="w-min">
-            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-              <FontAwesomeIcon icon={faEye} />
-              <span>Reveal</span>
-            </Badge>
-          </div>
-        </Tooltip>
+        {data.caCert && (
+          <Tooltip
+            side="right"
+            className="max-w-xl p-2"
+            content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
+          >
+            <div className="w-min">
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+                <FontAwesomeIcon icon={faEye} />
+                <span>Reveal</span>
+              </Badge>
+            </div>
+          </Tooltip>
+        )}
       </IdentityAuthFieldDisplay>
       <IdentityAuthFieldDisplay className="col-span-2" label="Subject">
         {data.boundSubject}
@@ -80,18 +111,6 @@ export const ViewIdentityOidcAuthContent = ({
           </Tooltip>
         )}
       </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
-        {data.accessTokenTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max TLL (seconds)">
-        {data.accessTokenMaxTTL}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
-        {data.accessTokenNumUsesLimit}
-      </IdentityAuthFieldDisplay>
-      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
-        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
-      </IdentityAuthFieldDisplay>
     </ViewIdentityContentWrapper>
   );
 };

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTokenAuthContent.tsx

@@ -2,6 +2,7 @@ import { faBan } from "@fortawesome/free-solid-svg-icons";
 
 import { EmptyState, Spinner } from "@app/components/v2";
 import { useGetIdentityTokenAuth, useGetIdentityTokensTokenAuth } from "@app/hooks/api";
+import { IdentityTokenAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
 import { IdentityTokenAuthTokensTable } from "./IdentityTokenAuthTokensTable";
@@ -10,8 +11,10 @@ import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
 
 export const ViewIdentityTokenAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityTokenAuth(identityId);
   const { data: tokens = [], isPending: clientSecretsPending } =
@@ -31,8 +34,22 @@ export const ViewIdentityTokenAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityTokenAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
       <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityUniversalAuthContent.tsx

@@ -7,6 +7,7 @@ import {
   useGetIdentityUniversalAuth,
   useGetIdentityUniversalAuthClientSecrets
 } from "@app/hooks/api";
+import { IdentityUniversalAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm";
 
 import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
 import { IdentityUniversalAuthClientSecretsTable } from "./IdentityUniversalAuthClientSecretsTable";
@@ -15,8 +16,10 @@ import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
 
 export const ViewIdentityUniversalAuthContent = ({
   identityId,
-  onEdit,
-  onDelete
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
 }: ViewAuthMethodProps) => {
   const { data, isPending } = useGetIdentityUniversalAuth(identityId);
   const { data: clientSecrets = [], isPending: clientSecretsPending } =
@@ -43,8 +46,22 @@ export const ViewIdentityUniversalAuthContent = ({
     );
   }
 
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityUniversalAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
   return (
-    <ViewIdentityContentWrapper onEdit={onEdit} onDelete={onDelete}>
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
       <IdentityAuthFieldDisplay label="Access Token TLL (seconds)">
         {data.accessTokenTTL}
       </IdentityAuthFieldDisplay>
@@ -61,8 +78,8 @@ export const ViewIdentityUniversalAuthContent = ({
         {data.clientSecretTrustedIps.map((ip) => ip.ipAddress).join(", ")}
       </IdentityAuthFieldDisplay>
       <div className="col-span-2 my-3">
-        <div className="mb-2 border-b border-mineshaft-500">
-          <span className="text-sm text-bunker-300">Client ID</span>
+        <div className="mb-3 border-b border-mineshaft-500 pb-2">
+          <span className="text-bunker-300">Client ID</span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-sm">{data.clientId}</span>

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/types/index.ts

@@ -1,5 +1,12 @@
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
 export type ViewAuthMethodProps = {
   identityId: string;
-  onEdit: () => void;
   onDelete: () => void;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan", "identityAuthMethod"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  popUp: UsePopUpState<["revokeAuthMethod", "upgradePlan", "identityAuthMethod"]>;
 };