improvements: address feedback

frontend/src/hooks/api/identities/mutations.tsx

@@ -923,7 +923,7 @@ export const useAddIdentityTokenAuth = () => {
       });
       queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
       queryClient.invalidateQueries({
-        queryKey: identitiesKeys.getIdentityUniversalAuth(identityId)
+        queryKey: identitiesKeys.getIdentityTokenAuth(identityId)
       });
     }
   });
@@ -959,7 +959,7 @@ export const useUpdateIdentityTokenAuth = () => {
       });
       queryClient.invalidateQueries({ queryKey: identitiesKeys.getIdentityById(identityId) });
       queryClient.invalidateQueries({
-        queryKey: identitiesKeys.getIdentityUniversalAuth(identityId)
+        queryKey: identitiesKeys.getIdentityTokenAuth(identityId)
       });
     }
   });

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -34,7 +34,7 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
         title={
           isSelectedAuthAlreadyConfigured
             ? `Edit ${identityAuthToNameMap[selectedAuthMethod!] ?? ""}`
-            : `Create new ${identityAuthToNameMap[selectedAuthMethod!] ?? ""}`
+            : `Add ${identityAuthToNameMap[selectedAuthMethod!] ?? ""}`
         }
       >
         <IdentityAuthMethodModalContent

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModalContent.tsx

@@ -111,7 +111,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.UNIVERSAL_AUTH]: {
       render: () => (
         <IdentityUniversalAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -121,7 +121,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.OIDC_AUTH]: {
       render: () => (
         <IdentityOidcAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -131,7 +131,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.TOKEN_AUTH]: {
       render: () => (
         <IdentityTokenAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -141,7 +141,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.AZURE_AUTH]: {
       render: () => (
         <IdentityAzureAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -151,7 +151,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.GCP_AUTH]: {
       render: () => (
         <IdentityGcpAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -161,7 +161,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.KUBERNETES_AUTH]: {
       render: () => (
         <IdentityKubernetesAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -171,7 +171,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.AWS_AUTH]: {
       render: () => (
         <IdentityAwsAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />
@@ -181,7 +181,7 @@ export const IdentityAuthMethodModalContent = ({
     [IdentityAuthMethod.JWT_AUTH]: {
       render: () => (
         <IdentityJwtAuthForm
-          identityAuthMethodData={identityAuthMethodData}
+          identityId={identityAuthMethodData.identityId}
           handlePopUpOpen={handlePopUpOpen}
           handlePopUpToggle={handlePopUpToggle}
         />

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,17 +6,27 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAwsAuth,
   useGetIdentityAwsAuth,
   useUpdateIdentityAwsAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z
   .object({
     stsEndpoint: z.string(),
@@ -52,18 +62,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityAwsAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -71,11 +78,9 @@ export const IdentityAwsAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityAwsAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityAwsAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityAwsAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-  const { data } = useGetIdentityAwsAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -143,7 +148,7 @@ export const IdentityAwsAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) return;
+      if (!identityId) return;
 
       if (data) {
         await updateMutateAsync({
@@ -151,7 +156,7 @@ export const IdentityAwsAuthForm = ({
           stsEndpoint,
           allowedPrincipalArns,
           allowedAccountIds,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -160,7 +165,7 @@ export const IdentityAwsAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           stsEndpoint: stsEndpoint || "",
           allowedPrincipalArns: allowedPrincipalArns || "",
           allowedAccountIds: allowedAccountIds || "",
@@ -188,178 +193,194 @@ export const IdentityAwsAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        defaultValue="2592000"
+          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-        name="allowedPrincipalArns"
+            ? IdentityFormTab.Advanced
-        render={({ field, fieldState: { error } }) => (
+            : IdentityFormTab.Configuration
-          <FormControl
+        );
-            label="Allowed Principal ARNs"
+      })}
-            isError={Boolean(error)}
+    >
-            errorText={error?.message}
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-          >
+        <TabList>
-            <Input
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-              {...field}
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-              placeholder="arn:aws:iam::123456789012:role/MyRoleName, arn:aws:iam::123456789012:user/MyUserName..."
+        </TabList>
-              type="text"
+        <TabPanel value={IdentityFormTab.Configuration}>
-            />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="allowedAccountIds"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Allowed Account IDs"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="123456789012, ..." />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="https://sts.amazonaws.com/"
-        name="stsEndpoint"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl label="STS Endpoint" isError={Boolean(error)} errorText={error?.message}>
-            <Input {...field} placeholder="https://sts.amazonaws.com/" type="text" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="allowedPrincipalArns"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Allowed Principal ARNs"
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+              >
-                  errorText={error?.message}
+                <Input
-                >
+                  {...field}
-                  <Input
+                  placeholder="arn:aws:iam::123456789012:role/MyRoleName, arn:aws:iam::123456789012:user/MyUserName..."
-                    value={field.value}
+                  type="text"
-                    onChange={(e) => {
+                />
-                      if (subscription?.ipAllowlisting) {
+              </FormControl>
-                        field.onChange(e);
+            )}
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
           />
-          <IconButton
+          <Controller
-            onClick={() => {
+            control={control}
-              if (subscription?.ipAllowlisting) {
+            name="allowedAccountIds"
-                removeAccessTokenTrustedIp(index);
+            render={({ field, fieldState: { error } }) => (
-                return;
+              <FormControl
-              }
+                label="Allowed Account IDs"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="123456789012, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="https://sts.amazonaws.com/"
+            name="stsEndpoint"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="STS Endpoint" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="https://sts.amazonaws.com/" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeAccessTokenTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {!isUpdate ? "Create" : "Edit"}
-          </Button>
 
-          <Button
+        <Button
-            colorSchema="secondary"
+          colorSchema="secondary"
-            variant="plain"
+          variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
+        >
-            Cancel
+          Cancel
-          </Button>
+        </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,17 +6,27 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAzureAuth,
   useGetIdentityAzureAuth,
   useUpdateIdentityAzureAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z
   .object({
     tenantId: z.string().min(1),
@@ -47,18 +57,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityAzureAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -66,11 +73,9 @@ export const IdentityAzureAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityAzureAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityAzureAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityAzureAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-  const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -139,12 +144,12 @@ export const IdentityAzureAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) return;
+      if (!identityId) return;
 
       if (data) {
         await updateMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           tenantId,
           resource,
           allowedServicePrincipalIds,
@@ -156,7 +161,7 @@ export const IdentityAzureAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           tenantId: tenantId || "",
           resource: resource || "",
           allowedServicePrincipalIds: allowedServicePrincipalIds || "",
@@ -184,178 +189,194 @@ export const IdentityAzureAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        defaultValue="2592000"
+          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-        name="tenantId"
+            ? IdentityFormTab.Advanced
-        render={({ field, fieldState: { error } }) => (
+            : IdentityFormTab.Configuration
-          <FormControl
+        );
-            label="Tenant ID"
+      })}
-            isError={Boolean(error)}
+    >
-            errorText={error?.message}
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-            isRequired
+        <TabList>
-          >
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-            <Input {...field} placeholder="00000000-0000-0000-0000-000000000000" type="text" />
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-          </FormControl>
+        </TabList>
-        )}
+        <TabPanel value={IdentityFormTab.Configuration}>
-      />
-      <Controller
-        control={control}
-        name="resource"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Resource / Audience"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="https://management.azure.com/" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="allowedServicePrincipalIds"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Allowed Service Principal IDs"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="00000000-0000-0000-0000-000000000000, ..." />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="tenantId"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Tenant ID"
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+                isRequired
-                  errorText={error?.message}
+              >
-                >
+                <Input {...field} placeholder="00000000-0000-0000-0000-000000000000" type="text" />
-                  <Input
+              </FormControl>
-                    value={field.value}
+            )}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
           />
-          <IconButton
+          <Controller
-            onClick={() => {
+            control={control}
-              if (subscription?.ipAllowlisting) {
+            name="resource"
-                removeAccessTokenTrustedIp(index);
+            render={({ field, fieldState: { error } }) => (
-                return;
+              <FormControl
-              }
+                label="Resource / Audience"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="https://management.azure.com/" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="allowedServicePrincipalIds"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Service Principal IDs"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="00000000-0000-0000-0000-000000000000, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeAccessTokenTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {!isUpdate ? "Create" : "Edit"}
-          </Button>
 
-          <Button
+        <Button
-            colorSchema="secondary"
+          colorSchema="secondary"
-            variant="plain"
+          variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
+        >
-            Cancel
+          Cancel
-          </Button>
+        </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,17 +6,29 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityGcpAuth,
   useGetIdentityGcpAuth,
   useUpdateIdentityGcpAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z
   .object({
     type: z.enum(["iam", "gce"]),
@@ -48,18 +60,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityGcpAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -67,11 +76,9 @@ export const IdentityGcpAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityGcpAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityGcpAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityGcpAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-  const { data } = useGetIdentityGcpAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -146,11 +153,11 @@ export const IdentityGcpAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) return;
+      if (!identityId) return;
 
       if (data) {
         await updateMutateAsync({
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           organizationId: orgId,
           type,
           allowedServiceAccounts,
@@ -163,7 +170,7 @@ export const IdentityGcpAuthForm = ({
         });
       } else {
         await addMutateAsync({
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           organizationId: orgId,
           type,
           allowedServiceAccounts: allowedServiceAccounts || "",
@@ -193,202 +200,222 @@ export const IdentityGcpAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        name="type"
+          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            ? IdentityFormTab.Advanced
-          <FormControl label="Type" isError={Boolean(error)} errorText={error?.message}>
+            : IdentityFormTab.Configuration
-            <Select
+        );
-              defaultValue={field.value}
+      })}
-              {...field}
+    >
-              onValueChange={(e) => onChange(e)}
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-              className="w-full"
+        <TabList>
-            >
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-              <SelectItem value="gce" key="gce">
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-                GCP ID Token Auth (Recommended)
+        </TabList>
-              </SelectItem>
+        <TabPanel value={IdentityFormTab.Configuration}>
-              <SelectItem value="iam" key="iam">
-                GCP IAM Auth
-              </SelectItem>
-            </Select>
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="allowedServiceAccounts"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Allowed Service Account Emails"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input
-              {...field}
-              placeholder="[email protected], [email protected]"
-              type="text"
-            />
-          </FormControl>
-        )}
-      />
-      {watchedType === "gce" && (
-        <Controller
-          control={control}
-          name="allowedProjects"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl
-              label="Allowed Projects"
-              isError={Boolean(error)}
-              errorText={error?.message}
-            >
-              <Input {...field} placeholder="my-gcp-project, ..." />
-            </FormControl>
-          )}
-        />
-      )}
-      {watchedType === "gce" && (
-        <Controller
-          control={control}
-          name="allowedZones"
-          render={({ field, fieldState: { error } }) => (
-            <FormControl label="Allowed Zones" isError={Boolean(error)} errorText={error?.message}>
-              <Input {...field} placeholder="us-west2-a, us-central1-a, ..." />
-            </FormControl>
-          )}
-        />
-      )}
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            name="type"
-            defaultValue="0.0.0.0/0"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-            render={({ field, fieldState: { error } }) => {
+              <FormControl label="Type" isError={Boolean(error)} errorText={error?.message}>
-              return (
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                >
+                  <SelectItem value="gce" key="gce">
+                    GCP ID Token Auth (Recommended)
+                  </SelectItem>
+                  <SelectItem value="iam" key="iam">
+                    GCP IAM Auth
+                  </SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="allowedServiceAccounts"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Service Account Emails"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input
+                  {...field}
+                  placeholder="[email protected], [email protected]"
+                  type="text"
+                />
+              </FormControl>
+            )}
+          />
+          {watchedType === "gce" && (
+            <Controller
+              control={control}
+              name="allowedProjects"
+              render={({ field, fieldState: { error } }) => (
                 <FormControl
-                  className="mb-0 flex-grow"
+                  label="Allowed Projects"
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
                   isError={Boolean(error)}
                   errorText={error?.message}
                 >
-                  <Input
+                  <Input {...field} placeholder="my-gcp-project, ..." />
-                    value={field.value}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
                 </FormControl>
-              );
+              )}
-            }}
+            />
+          )}
+          {watchedType === "gce" && (
+            <Controller
+              control={control}
+              name="allowedZones"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Allowed Zones"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="us-west2-a, us-central1-a, ..." />
+                </FormControl>
+              )}
+            />
+          )}
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
           />
-          <IconButton
+          <Controller
-            onClick={() => {
+            control={control}
-              if (subscription?.ipAllowlisting) {
+            defaultValue="2592000"
-                removeAccessTokenTrustedIp(index);
+            name="accessTokenMaxTTL"
-                return;
+            render={({ field, fieldState: { error } }) => (
-              }
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeAccessTokenTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {!isUpdate ? "Create" : "Edit"}
-          </Button>
 
-          <Button
+        <Button
-            colorSchema="secondary"
+          colorSchema="secondary"
-            variant="plain"
+          variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
+        >
-            Cancel
+          Cancel
-          </Button>
+        </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityJwtAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -14,17 +14,22 @@ import {
   Input,
   Select,
   SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
   TextArea,
   Tooltip
 } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import { useAddIdentityJwtAuth, useUpdateIdentityJwtAuth } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityJwtConfigurationType } from "@app/hooks/api/identities/enums";
 import { useGetIdentityJwtAuth } from "@app/hooks/api/identities/queries";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const commonSchema = z.object({
   accessTokenTrustedIps: z
     .array(
@@ -88,18 +93,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityJwtAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -107,11 +109,9 @@ export const IdentityJwtAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityJwtAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityJwtAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityJwtAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-  const { data } = useGetIdentityJwtAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -218,13 +218,13 @@ export const IdentityJwtAuthForm = ({
     boundSubject
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) {
+      if (!identityId) {
         return;
       }
 
       if (data) {
         await updateMutateAsync({
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           organizationId: orgId,
           configurationType,
           jwksUrl,
@@ -241,7 +241,7 @@ export const IdentityJwtAuthForm = ({
         });
       } else {
         await addMutateAsync({
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           configurationType,
           jwksUrl,
           jwksCaCert,
@@ -275,56 +275,230 @@ export const IdentityJwtAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        name="configurationType"
+          [
-        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+            "accessTokenTrustedIps",
-          <FormControl
+            "boundIssuer",
-            label="Configuration Type"
+            "boundAudiences",
-            isError={Boolean(error)}
+            "boundSubject",
-            errorText={error?.message}
+            "boundClaims"
-          >
+          ].includes(Object.keys(fields)[0])
-            <Select
+            ? IdentityFormTab.Advanced
-              defaultValue={field.value}
+            : IdentityFormTab.Configuration
-              {...field}
+        );
-              onValueChange={(e) => {
+      })}
-                if (e === IdentityJwtConfigurationType.JWKS) {
+    >
-                  setValue("publicKeys", []);
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-                } else {
+        <TabList>
-                  setValue("publicKeys", [
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-                    {
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-                      value: ""
+        </TabList>
-                    }
+        <TabPanel value={IdentityFormTab.Configuration}>
-                  ]);
-                  setValue("jwksUrl", "");
-                  setValue("jwksCaCert", "");
-                }
-                onChange(e);
-              }}
-              className="w-full"
-            >
-              <SelectItem value={IdentityJwtConfigurationType.JWKS} key="jwks">
-                JWKS
-              </SelectItem>
-              <SelectItem value={IdentityJwtConfigurationType.STATIC} key="static">
-                Static
-              </SelectItem>
-            </Select>
-          </FormControl>
-        )}
-      />
-      {selectedConfigurationType === IdentityJwtConfigurationType.JWKS && (
-        <>
           <Controller
             control={control}
-            name="jwksUrl"
+            name="configurationType"
-            render={({ field, fieldState: { error } }) => (
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
               <FormControl
-                isRequired
+                label="Configuration Type"
-                label="JWKS URL"
                 isError={Boolean(error)}
                 errorText={error?.message}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => {
+                    if (e === IdentityJwtConfigurationType.JWKS) {
+                      setValue("publicKeys", []);
+                    } else {
+                      setValue("publicKeys", [
+                        {
+                          value: ""
+                        }
+                      ]);
+                      setValue("jwksUrl", "");
+                      setValue("jwksCaCert", "");
+                    }
+                    onChange(e);
+                  }}
+                  className="w-full"
+                >
+                  <SelectItem value={IdentityJwtConfigurationType.JWKS} key="jwks">
+                    JWKS
+                  </SelectItem>
+                  <SelectItem value={IdentityJwtConfigurationType.STATIC} key="static">
+                    Static
+                  </SelectItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+          {selectedConfigurationType === IdentityJwtConfigurationType.JWKS && (
+            <>
+              <Controller
+                control={control}
+                name="jwksUrl"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    isRequired
+                    label="JWKS URL"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <Input {...field} type="text" />
+                  </FormControl>
+                )}
+              />
+              <Controller
+                control={control}
+                name="jwksCaCert"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="JWKS CA Certificate"
+                    errorText={error?.message}
+                    isError={Boolean(error)}
+                  >
+                    <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+                  </FormControl>
+                )}
+              />
+            </>
+          )}
+
+          {selectedConfigurationType === IdentityJwtConfigurationType.STATIC && (
+            <>
+              {publicKeyFields.map(({ id }, index) => (
+                <div key={id} className="flex gap-2">
+                  <Controller
+                    control={control}
+                    name={`publicKeys.${index}.value`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        className="flex-grow"
+                        label={`Public Key ${index + 1}`}
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                        icon={
+                          <Tooltip
+                            className="text-center"
+                            content={<span>This field only accepts PEM-formatted public keys</span>}
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        }
+                      >
+                        <TextArea {...field} placeholder="-----BEGIN PUBLIC KEY----- ..." />
+                      </FormControl>
+                    )}
+                  />
+                  <IconButton
+                    onClick={() => {
+                      if (publicKeyFields.length === 1) {
+                        createNotification({
+                          type: "error",
+                          text: "A public key is required for static configurations"
+                        });
+                        return;
+                      }
+
+                      removePublicKeyFields(index);
+                    }}
+                    size="lg"
+                    colorSchema="danger"
+                    variant="plain"
+                    ariaLabel="update"
+                    className="p-3"
+                  >
+                    <FontAwesomeIcon icon={faXmark} />
+                  </IconButton>
+                </div>
+              ))}
+              <div className="my-4 ml-1">
+                <Button
+                  variant="outline_bg"
+                  onClick={() =>
+                    appendPublicKeyFields({
+                      value: ""
+                    })
+                  }
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  size="xs"
+                >
+                  Add Public Key
+                </Button>
+              </div>
+            </>
+          )}
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="boundIssuer"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Issuer" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="boundSubject"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Subject"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                icon={
+                  <Tooltip
+                    className="text-center"
+                    content={<span>This field supports glob patterns</span>}
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                  </Tooltip>
+                }
               >
                 <Input {...field} type="text" />
               </FormControl>
@@ -332,58 +506,79 @@ export const IdentityJwtAuthForm = ({
           />
           <Controller
             control={control}
-            name="jwksCaCert"
+            name="boundAudiences"
             render={({ field, fieldState: { error } }) => (
               <FormControl
-                label="JWKS CA Certificate"
+                label="Audiences"
-                errorText={error?.message}
                 isError={Boolean(error)}
+                errorText={error?.message}
+                icon={
+                  <Tooltip
+                    className="text-center"
+                    content={<span>This field supports glob patterns</span>}
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                  </Tooltip>
+                }
               >
-                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+                <Input {...field} type="text" placeholder="service1, service2" />
               </FormControl>
             )}
           />
-        </>
+          {boundClaimsFields.map(({ id }, index) => (
-      )}
+            <div className="mb-3 flex items-end space-x-2" key={id}>
-
-      {selectedConfigurationType === IdentityJwtConfigurationType.STATIC && (
-        <>
-          {publicKeyFields.map(({ id }, index) => (
-            <div key={id} className="flex gap-2">
               <Controller
                 control={control}
-                name={`publicKeys.${index}.value`}
+                name={`boundClaims.${index}.key`}
-                render={({ field, fieldState: { error } }) => (
+                render={({ field, fieldState: { error } }) => {
-                  <FormControl
+                  return (
-                    className="flex-grow"
+                    <FormControl
-                    label={`Public Key ${index + 1}`}
+                      className="mb-0 flex-grow"
-                    errorText={error?.message}
+                      label={index === 0 ? "Claims" : undefined}
-                    isError={Boolean(error)}
+                      icon={
-                    icon={
+                        index === 0 ? (
-                      <Tooltip
+                          <Tooltip
-                        className="text-center"
+                            className="text-center"
-                        content={<span>This field only accepts PEM-formatted public keys</span>}
+                            content={<span>This field supports glob patterns</span>}
-                      >
+                          >
-                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                      </Tooltip>
+                          </Tooltip>
-                    }
+                        ) : undefined
-                  >
+                      }
-                    <TextArea {...field} placeholder="-----BEGIN PUBLIC KEY----- ..." />
+                      isError={Boolean(error)}
-                  </FormControl>
+                      errorText={error?.message}
-                )}
+                    >
-              />
+                      <Input
-              <IconButton
+                        value={field.value}
-                onClick={() => {
+                        onChange={(e) => field.onChange(e)}
-                  if (publicKeyFields.length === 1) {
+                        placeholder="property"
-                    createNotification({
+                      />
-                      type: "error",
+                    </FormControl>
-                      text: "A public key is required for static configurations"
+                  );
-                    });
-                    return;
-                  }
-
-                  removePublicKeyFields(index);
                 }}
+              />
+              <Controller
+                control={control}
+                name={`boundClaims.${index}.value`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="value1, value2"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+
+              <IconButton
+                onClick={() => removeBoundClaimField(index)}
                 size="lg"
                 colorSchema="danger"
                 variant="plain"
@@ -398,280 +593,106 @@ export const IdentityJwtAuthForm = ({
             <Button
               variant="outline_bg"
               onClick={() =>
-                appendPublicKeyFields({
+                appendBoundClaimField({
+                  key: "",
                   value: ""
                 })
               }
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               size="xs"
             >
-              Add Public Key
+              Add Claims
             </Button>
           </div>
-        </>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
-      )}
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-      <Controller
+                          handlePopUpOpen("upgradePlan");
-        control={control}
+                        }}
-        name="boundIssuer"
+                        placeholder="123.456.789.0"
-        render={({ field, fieldState: { error } }) => (
+                      />
-          <FormControl label="Issuer" isError={Boolean(error)} errorText={error?.message}>
+                    </FormControl>
-            <Input {...field} type="text" />
+                  );
-          </FormControl>
+                }}
-        )}
+              />
-      />
+              <IconButton
-      <Controller
+                onClick={() => {
-        control={control}
+                  if (subscription?.ipAllowlisting) {
-        name="boundSubject"
+                    removeAccessTokenTrustedIp(index);
-        render={({ field, fieldState: { error } }) => (
+                    return;
-          <FormControl
-            label="Subject"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            icon={
-              <Tooltip
-                className="text-center"
-                content={<span>This field supports glob patterns</span>}
-              >
-                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-              </Tooltip>
-            }
-          >
-            <Input {...field} type="text" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="boundAudiences"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Audiences"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            icon={
-              <Tooltip
-                className="text-center"
-                content={<span>This field supports glob patterns</span>}
-              >
-                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-              </Tooltip>
-            }
-          >
-            <Input {...field} type="text" placeholder="service1, service2" />
-          </FormControl>
-        )}
-      />
-      {boundClaimsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
-          <Controller
-            control={control}
-            name={`boundClaims.${index}.key`}
-            render={({ field, fieldState: { error } }) => {
-              return (
-                <FormControl
-                  className="mb-0 flex-grow"
-                  label={index === 0 ? "Claims" : undefined}
-                  icon={
-                    index === 0 ? (
-                      <Tooltip
-                        className="text-center"
-                        content={<span>This field supports glob patterns</span>}
-                      >
-                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-                      </Tooltip>
-                    ) : undefined
                   }
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input
-                    value={field.value}
-                    onChange={(e) => field.onChange(e)}
-                    placeholder="property"
-                  />
-                </FormControl>
-              );
-            }}
-          />
-          <Controller
-            control={control}
-            name={`boundClaims.${index}.value`}
-            render={({ field, fieldState: { error } }) => {
-              return (
-                <FormControl
-                  className="mb-0 flex-grow"
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input
-                    value={field.value}
-                    onChange={(e) => field.onChange(e)}
-                    placeholder="value1, value2"
-                  />
-                </FormControl>
-              );
-            }}
-          />
 
-          <IconButton
+                  handlePopUpOpen("upgradePlan");
-            onClick={() => removeBoundClaimField(index)}
+                }}
-            size="lg"
+                size="lg"
-            colorSchema="danger"
+                colorSchema="danger"
-            variant="plain"
+                variant="plain"
-            ariaLabel="update"
+                ariaLabel="update"
-            className="p-3"
+                className="p-3"
-          >
+              >
-            <FontAwesomeIcon icon={faXmark} />
+                <FontAwesomeIcon icon={faXmark} />
-          </IconButton>
+              </IconButton>
-        </div>
+            </div>
-      ))}
+          ))}
-      <div className="my-4 ml-1">
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() =>
+          size="sm"
-            appendBoundClaimField({
+          type="submit"
-              key: "",
+          isLoading={isSubmitting}
-              value: ""
+          isDisabled={isSubmitting}
-            })
-          }
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add Claims
+          {isUpdate ? "Update" : "Create"}
         </Button>
-      </div>
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
-          <Controller
-            control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
-            defaultValue="0.0.0.0/0"
-            render={({ field, fieldState: { error } }) => {
-              return (
-                <FormControl
-                  className="mb-0 flex-grow"
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input
-                    value={field.value}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
 
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
-          />
-          <IconButton
-            onClick={() => {
-              if (subscription?.ipAllowlisting) {
-                removeAccessTokenTrustedIp(index);
-                return;
-              }
-
-              handlePopUpOpen("upgradePlan");
-            }}
-            size="lg"
-            colorSchema="danger"
-            variant="plain"
-            ariaLabel="update"
-            className="p-3"
-          >
-            <FontAwesomeIcon icon={faXmark} />
-          </IconButton>
-        </div>
-      ))}
-      <div className="my-4 ml-1">
         <Button
-          variant="outline_bg"
+          colorSchema="secondary"
-          onClick={() => {
+          variant="plain"
-            if (subscription?.ipAllowlisting) {
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-              appendAccessTokenTrustedIp({
-                ipAddress: "0.0.0.0/0"
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          Cancel
         </Button>
       </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {isUpdate ? "Update" : "Create"}
-          </Button>
-
-          <Button
-            colorSchema="secondary"
-            variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
-            Cancel
-          </Button>
-        </div>
-      </div>
     </form>
   );
 };

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,17 +6,28 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input, TextArea } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextArea
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityKubernetesAuth,
   useGetIdentityKubernetesAuth,
   useUpdateIdentityKubernetesAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z
   .object({
     kubernetesHost: z.string().min(1),
@@ -50,18 +61,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityKubernetesAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -69,11 +77,9 @@ export const IdentityKubernetesAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityKubernetesAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityKubernetesAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-  const { data } = useGetIdentityKubernetesAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -154,7 +160,7 @@ export const IdentityKubernetesAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) return;
+      if (!identityId) return;
 
       if (data) {
         await updateMutateAsync({
@@ -165,7 +171,7 @@ export const IdentityKubernetesAuthForm = ({
           allowedNamespaces,
           allowedAudience,
           caCert,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -174,7 +180,7 @@ export const IdentityKubernetesAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           kubernetesHost: kubernetesHost || "",
           tokenReviewerJwt,
           allowedNames: allowedNames || "",
@@ -205,230 +211,252 @@ export const IdentityKubernetesAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        defaultValue="2592000"
+          [
-        name="kubernetesHost"
+            "kubernetesHost",
-        render={({ field, fieldState: { error } }) => (
+            "tokenReviewerJwt",
-          <FormControl
+            "accessTokenTTL",
-            label="Kubernetes Host / Base Kubernetes API URL "
+            "accessTokenMaxTTL",
-            isError={Boolean(error)}
+            "accessTokenNumUsesLimit"
-            errorText={error?.message}
+          ].includes(Object.keys(fields)[0])
-            tooltipText="The host string, host:port pair, or URL to the base of the Kubernetes API server. This can usually be obtained by running 'kubectl cluster-info'"
+            ? IdentityFormTab.Configuration
-            isRequired
+            : IdentityFormTab.Advanced
-          >
+        );
-            <Input {...field} placeholder="https://my-example-k8s-api-host.com" type="text" />
+      })}
-          </FormControl>
+    >
-        )}
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-      />
+        <TabList>
-      <Controller
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-        control={control}
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        name="tokenReviewerJwt"
+        </TabList>
-        render={({ field, fieldState: { error } }) => (
+        <TabPanel value={IdentityFormTab.Configuration}>
-          <FormControl
-            label="Token Reviewer JWT"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            tooltipText="A long-lived service account JWT token for Infisical to access the TokenReview API to validate other service account JWT tokens submitted by applications/pods."
-            isRequired
-          >
-            <Input {...field} placeholder="" type="password" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="allowedNames"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Allowed Service Account Names"
-            isError={Boolean(error)}
-            tooltipText="An optional comma-separated list of trusted service account names that are allowed to authenticate with Infisical. Leave empty to allow any service account."
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="service-account-1-name, service-account-1-name" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue=""
-        name="allowedNamespaces"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Allowed Namespaces"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            tooltipText="A comma-separated list of trusted namespaces that service accounts must belong to authenticate with Infisical."
-          >
-            <Input {...field} placeholder="namespaceA, namespaceB" type="text" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue=""
-        name="allowedAudience"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Allowed Audience"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            tooltipText="An optional audience claim that the service account JWT token must have to authenticate with Infisical. Leave empty to allow any audience claim."
-          >
-            <Input {...field} placeholder="" type="text" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="caCert"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="CA Certificate"
-            errorText={error?.message}
-            isError={Boolean(error)}
-            tooltipText="An optional PEM-encoded CA cert for the Kubernetes API server. This is used by the TLS client for secure communication with the Kubernetes API server."
-          >
-            <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token TTL (seconds)"
-            tooltipText="The lifetime for an acccess token in seconds. This value will be referenced at renewal time."
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="kubernetesHost"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Kubernetes Host / Base Kubernetes API URL "
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+                tooltipText="The host string, host:port pair, or URL to the base of the Kubernetes API server. This can usually be obtained by running 'kubectl cluster-info'"
-                  errorText={error?.message}
+                isRequired
-                  tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+              >
-                >
+                <Input {...field} placeholder="https://my-example-k8s-api-host.com" type="text" />
-                  <Input
+              </FormControl>
-                    value={field.value}
+            )}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
           />
-          <IconButton
+          <Controller
-            onClick={() => {
+            control={control}
-              if (subscription?.ipAllowlisting) {
+            name="tokenReviewerJwt"
-                removeAccessTokenTrustedIp(index);
+            render={({ field, fieldState: { error } }) => (
-                return;
+              <FormControl
-              }
+                label="Token Reviewer JWT"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="A long-lived service account JWT token for Infisical to access the TokenReview API to validate other service account JWT tokens submitted by applications/pods."
+                isRequired
+              >
+                <Input {...field} placeholder="" type="password" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token TTL (seconds)"
+                tooltipText="The lifetime for an acccess token in seconds. This value will be referenced at renewal time."
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="2592000"
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum lifetime for an access token in seconds. This value will be referenced at renewal time."
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="The maximum number of times that an access token can be used; a value of 0 implies infinite number of uses."
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="allowedNames"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Service Account Names"
+                isError={Boolean(error)}
+                tooltipText="An optional comma-separated list of trusted service account names that are allowed to authenticate with Infisical. Leave empty to allow any service account."
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="service-account-1-name, service-account-1-name" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="allowedNamespaces"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Namespaces"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="A comma-separated list of trusted namespaces that service accounts must belong to authenticate with Infisical."
+              >
+                <Input {...field} placeholder="namespaceA, namespaceB" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="allowedAudience"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Audience"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                tooltipText="An optional audience claim that the service account JWT token must have to authenticate with Infisical. Leave empty to allow any audience claim."
+              >
+                <Input {...field} placeholder="" type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="caCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                tooltipText="An optional PEM-encoded CA cert for the Kubernetes API server. This is used by the TLS client for secure communication with the Kubernetes API server."
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                      tooltipText="The IPs or CIDR ranges that access tokens can be used from. By default, each token is given the 0.0.0.0/0, allowing usage from any network address."
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeAccessTokenTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {isUpdate ? "Update" : "Create"}
-          </Button>
 
-          <Button
+        <Button
-            colorSchema="secondary"
+          colorSchema="secondary"
-            variant="plain"
+          variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
+        >
-            Cancel
+          Cancel
-          </Button>
+        </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
@@ -7,14 +7,26 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input, TextArea, Tooltip } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextArea,
+  Tooltip
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import { useAddIdentityOidcAuth, useUpdateIdentityOidcAuth } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { useGetIdentityOidcAuth } from "@app/hooks/api/identities/queries";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z.object({
   accessTokenTrustedIps: z
     .array(
@@ -51,18 +63,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityOidcAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -70,11 +79,9 @@ export const IdentityOidcAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityOidcAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityOidcAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityOidcAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-  const { data } = useGetIdentityOidcAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -160,13 +167,13 @@ export const IdentityOidcAuthForm = ({
     boundSubject
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) {
+      if (!identityId) {
         return;
       }
 
       if (data) {
         await updateMutateAsync({
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           organizationId: orgId,
           oidcDiscoveryUrl,
           caCert,
@@ -181,7 +188,7 @@ export const IdentityOidcAuthForm = ({
         });
       } else {
         await addMutateAsync({
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           oidcDiscoveryUrl,
           caCert,
           boundIssuer,
@@ -213,303 +220,329 @@ export const IdentityOidcAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        name="oidcDiscoveryUrl"
+          [
-        render={({ field, fieldState: { error } }) => (
+            "accessTokenTrustedIps",
-          <FormControl
+            "caCert",
-            isRequired
+            "boundAudiences",
-            label="OIDC Discovery URL"
+            "boundSubject",
-            isError={Boolean(error)}
+            "boundClaims"
-            errorText={error?.message}
+          ].includes(Object.keys(fields)[0])
-          >
+            ? IdentityFormTab.Advanced
-            <Input
+            : IdentityFormTab.Configuration
-              {...field}
+        );
-              placeholder="https://token.actions.githubusercontent.com"
+      })}
-              type="text"
+    >
-            />
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-          </FormControl>
+        <TabList>
-        )}
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-      />
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-      <Controller
+        </TabList>
-        control={control}
+        <TabPanel value={IdentityFormTab.Configuration}>
-        name="boundIssuer"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            isRequired
-            label="Issuer"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input
-              {...field}
-              type="text"
-              placeholder="https://token.actions.githubusercontent.com"
-            />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="caCert"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl label="CA Certificate" errorText={error?.message} isError={Boolean(error)}>
-            <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="boundSubject"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Subject"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            icon={
-              <Tooltip
-                className="text-center"
-                content={<span>This field supports glob patterns</span>}
-              >
-                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-              </Tooltip>
-            }
-          >
-            <Input {...field} type="text" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        name="boundAudiences"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Audiences"
-            isError={Boolean(error)}
-            errorText={error?.message}
-            icon={
-              <Tooltip
-                className="text-center"
-                content={<span>This field supports glob patterns</span>}
-              >
-                <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
-              </Tooltip>
-            }
-          >
-            <Input {...field} type="text" placeholder="service1, service2" />
-          </FormControl>
-        )}
-      />
-      {boundClaimsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`boundClaims.${index}.key`}
+            name="oidcDiscoveryUrl"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                isRequired
-                  className="mb-0 flex-grow"
+                label="OIDC Discovery URL"
-                  label={index === 0 ? "Claims" : undefined}
+                isError={Boolean(error)}
-                  icon={
+                errorText={error?.message}
-                    index === 0 ? (
+              >
-                      <Tooltip
+                <Input
-                        className="text-center"
+                  {...field}
-                        content={<span>This field supports glob patterns</span>}
+                  placeholder="https://token.actions.githubusercontent.com"
-                      >
+                  type="text"
-                        <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                />
-                      </Tooltip>
+              </FormControl>
-                    ) : undefined
+            )}
-                  }
-                  isError={Boolean(error)}
-                  errorText={error?.message}
-                >
-                  <Input
-                    value={field.value}
-                    onChange={(e) => field.onChange(e)}
-                    placeholder="property"
-                  />
-                </FormControl>
-              );
-            }}
           />
           <Controller
             control={control}
-            name={`boundClaims.${index}.value`}
+            name="boundIssuer"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                isRequired
-                  className="mb-0 flex-grow"
+                label="Issuer"
-                  isError={Boolean(error)}
+                isError={Boolean(error)}
-                  errorText={error?.message}
+                errorText={error?.message}
-                >
+              >
-                  <Input
+                <Input
-                    value={field.value}
+                  {...field}
-                    onChange={(e) => field.onChange(e)}
+                  type="text"
-                    placeholder="value1, value2"
+                  placeholder="https://token.actions.githubusercontent.com"
-                  />
+                />
-                </FormControl>
+              </FormControl>
-              );
+            )}
-            }}
           />
-
-          <IconButton
-            onClick={() => removeBoundClaimField(index)}
-            size="lg"
-            colorSchema="danger"
-            variant="plain"
-            ariaLabel="update"
-            className="p-3"
-          >
-            <FontAwesomeIcon icon={faXmark} />
-          </IconButton>
-        </div>
-      ))}
-      <div className="my-4 ml-1">
-        <Button
-          variant="outline_bg"
-          onClick={() =>
-            appendBoundClaimField({
-              key: "",
-              value: ""
-            })
-          }
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
-        >
-          Add Claims
-        </Button>
-      </div>
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="accessTokenTTL"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Access Token TTL (seconds)"
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+              >
-                  errorText={error?.message}
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-                >
+              </FormControl>
-                  <Input
+            )}
-                    value={field.value}
+          />
-                    onChange={(e) => {
+          <Controller
-                      if (subscription?.ipAllowlisting) {
+            control={control}
-                        field.onChange(e);
+            defaultValue="2592000"
-                        return;
+            name="accessTokenMaxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          <Controller
+            control={control}
+            name="caCert"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="CA Certificate"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <TextArea {...field} placeholder="-----BEGIN CERTIFICATE----- ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="boundSubject"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Subject"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                icon={
+                  <Tooltip
+                    className="text-center"
+                    content={<span>This field supports glob patterns</span>}
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                  </Tooltip>
+                }
+              >
+                <Input {...field} type="text" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="boundAudiences"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Audiences"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                icon={
+                  <Tooltip
+                    className="text-center"
+                    content={<span>This field supports glob patterns</span>}
+                  >
+                    <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                  </Tooltip>
+                }
+              >
+                <Input {...field} type="text" placeholder="service1, service2" />
+              </FormControl>
+            )}
+          />
+          {boundClaimsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`boundClaims.${index}.key`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Claims" : undefined}
+                      icon={
+                        index === 0 ? (
+                          <Tooltip
+                            className="text-center"
+                            content={<span>This field supports glob patterns</span>}
+                          >
+                            <FontAwesomeIcon icon={faQuestionCircle} size="sm" />
+                          </Tooltip>
+                        ) : undefined
                       }
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="property"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <Controller
+                control={control}
+                name={`boundClaims.${index}.value`}
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => field.onChange(e)}
+                        placeholder="value1, value2"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
 
-                      handlePopUpOpen("upgradePlan");
+              <IconButton
-                    }}
+                onClick={() => removeBoundClaimField(index)}
-                    placeholder="123.456.789.0"
+                size="lg"
-                  />
+                colorSchema="danger"
-                </FormControl>
+                variant="plain"
-              );
+                ariaLabel="update"
-            }}
+                className="p-3"
-          />
+              >
-          <IconButton
+                <FontAwesomeIcon icon={faXmark} />
-            onClick={() => {
+              </IconButton>
-              if (subscription?.ipAllowlisting) {
+            </div>
-                removeAccessTokenTrustedIp(index);
+          ))}
-                return;
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() =>
+                appendBoundClaimField({
+                  key: "",
+                  value: ""
+                })
               }
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add Claims
+            </Button>
+          </div>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeAccessTokenTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {isUpdate ? "Update" : "Create"}
-          </Button>
 
-          <Button
+        <Button
-            colorSchema="secondary"
+          colorSchema="secondary"
-            variant="plain"
+          variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
+        >
-            Cancel
+          Cancel
-          </Button>
+        </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -5,16 +6,27 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityTokenAuth,
   useGetIdentityTokenAuth,
   useUpdateIdentityTokenAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z
   .object({
     accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
@@ -42,18 +54,15 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData?: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityTokenAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -61,12 +70,9 @@ export const IdentityTokenAuthForm = ({
 
   const { mutateAsync: addMutateAsync } = useAddIdentityTokenAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityTokenAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-
-  const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -91,6 +97,30 @@ export const IdentityTokenAuthForm = ({
     remove: removeAccessTokenTrustedIp
   } = useFieldArray({ control, name: "accessTokenTrustedIps" });
 
+  useEffect(() => {
+    if (data) {
+      reset({
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
   const onFormSubmit = async ({
     accessTokenTTL,
     accessTokenMaxTTL,
@@ -98,12 +128,12 @@ export const IdentityTokenAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) return;
+      if (!identityId) return;
 
       if (data) {
         await updateMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -112,7 +142,7 @@ export const IdentityTokenAuthForm = ({
       } else {
         await addMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
           accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
@@ -137,137 +167,153 @@ export const IdentityTokenAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        defaultValue="2592000"
+          ["accessTokenTrustedIps"].includes(Object.keys(fields)[0])
-        name="accessTokenTTL"
+            ? IdentityFormTab.Advanced
-        render={({ field, fieldState: { error } }) => (
+            : IdentityFormTab.Configuration
-          <FormControl
+        );
-            label="Access Token TTL (seconds)"
+      })}
-            isError={Boolean(error)}
+    >
-            errorText={error?.message}
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-          >
+        <TabList>
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          </FormControl>
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        )}
+        </TabList>
-      />
+        <TabPanel value={IdentityFormTab.Configuration}>
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="accessTokenTTL"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Access Token TTL (seconds)"
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+              >
-                  errorText={error?.message}
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-                >
+              </FormControl>
-                  <Input
+            )}
-                    value={field.value}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
           />
-          <IconButton
+          <Controller
-            onClick={() => {
+            control={control}
-              if (subscription?.ipAllowlisting) {
+            defaultValue="2592000"
-                removeAccessTokenTrustedIp(index);
+            name="accessTokenMaxTTL"
-                return;
+            render={({ field, fieldState: { error } }) => (
-              }
+              <FormControl
+                label="Access Token Max TTL (seconds)"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue="0"
+            name="accessTokenNumUsesLimit"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeAccessTokenTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {isUpdate ? "Update" : "Create"}
-          </Button>
 
-          <Button
+        <Button
-            colorSchema="secondary"
+          colorSchema="secondary"
-            variant="plain"
+          variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
+        >
-            Cancel
+          Cancel
-          </Button>
+        </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -6,17 +6,27 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityUniversalAuth,
   useGetIdentityUniversalAuth,
   useUpdateIdentityUniversalAuth
 } from "@app/hooks/api";
-import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityFormTab } from "./types";
+
 const schema = z
   .object({
     accessTokenTTL: z
@@ -55,30 +65,24 @@ type Props = {
     popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
     state?: boolean
   ) => void;
-  identityAuthMethodData?: {
+  identityId?: string;
-    identityId: string;
+  isUpdate?: boolean;
-    name: string;
-    configuredAuthMethods?: IdentityAuthMethod[];
-    authMethod?: IdentityAuthMethod;
-  };
 };
 
 export const IdentityUniversalAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityId,
+  isUpdate
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
   const { subscription } = useSubscription();
   const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
+  const [tabValue, setTabValue] = useState<IdentityFormTab>(IdentityFormTab.Configuration);
 
-  const isUpdate = identityAuthMethodData?.configuredAuthMethods?.includes(
+  const { data } = useGetIdentityUniversalAuth(identityId ?? "", {
-    identityAuthMethodData.authMethod! || ""
-  );
-
-  const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "", {
     enabled: isUpdate
   });
 
@@ -149,13 +153,13 @@ export const IdentityUniversalAuthForm = ({
     accessTokenTrustedIps
   }: FormData) => {
     try {
-      if (!identityAuthMethodData) return;
+      if (!identityId) return;
 
       if (data) {
         // update universal auth configuration
         await updateMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           clientSecretTrustedIps,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -167,7 +171,7 @@ export const IdentityUniversalAuthForm = ({
 
         await addMutateAsync({
           organizationId: orgId,
-          identityId: identityAuthMethodData.identityId,
+          identityId,
           clientSecretTrustedIps,
           accessTokenTTL: Number(accessTokenTTL),
           accessTokenMaxTTL: Number(accessTokenMaxTTL),
@@ -195,204 +199,220 @@ export const IdentityUniversalAuthForm = ({
   };
 
   return (
-    <form onSubmit={handleSubmit(onFormSubmit)}>
+    <form
-      <Controller
+      onSubmit={handleSubmit(onFormSubmit, (fields) => {
-        control={control}
+        setTabValue(
-        defaultValue="2592000"
+          ["accessTokenTrustedIps", "clientSecretTrustedIps"].includes(Object.keys(fields)[0])
-        name="accessTokenTTL"
+            ? IdentityFormTab.Advanced
-        render={({ field, fieldState: { error } }) => (
+            : IdentityFormTab.Configuration
-          <FormControl
+        );
-            label="Access Token TTL (seconds)"
+      })}
-            isError={Boolean(error)}
+    >
-            errorText={error?.message}
+      <Tabs value={tabValue} onValueChange={(value) => setTabValue(value as IdentityFormTab)}>
-          >
+        <TabList>
-            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          <Tab value={IdentityFormTab.Configuration}>Configuration</Tab>
-          </FormControl>
+          <Tab value={IdentityFormTab.Advanced}>Advanced</Tab>
-        )}
+        </TabList>
-      />
+        <TabPanel value={IdentityFormTab.Configuration}>
-      <Controller
-        control={control}
-        defaultValue="2592000"
-        name="accessTokenMaxTTL"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max TTL (seconds)"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      <Controller
-        control={control}
-        defaultValue="0"
-        name="accessTokenNumUsesLimit"
-        render={({ field, fieldState: { error } }) => (
-          <FormControl
-            label="Access Token Max Number of Uses"
-            isError={Boolean(error)}
-            errorText={error?.message}
-          >
-            <Input {...field} placeholder="0" type="number" min="0" step="1" />
-          </FormControl>
-        )}
-      />
-      {clientSecretTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`clientSecretTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="accessTokenTTL"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Access Token TTL (seconds)"
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Client Secret Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+              >
-                  errorText={error?.message}
+                <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
-                >
+              </FormControl>
-                  <Input
+            )}
-                    value={field.value}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
           />
-          <IconButton
-            onClick={() => {
-              if (subscription?.ipAllowlisting) {
-                removeClientSecretTrustedIp(index);
-                return;
-              }
-
-              handlePopUpOpen("upgradePlan");
-            }}
-            size="lg"
-            colorSchema="danger"
-            variant="plain"
-            ariaLabel="update"
-            className="p-3"
-          >
-            <FontAwesomeIcon icon={faXmark} />
-          </IconButton>
-        </div>
-      ))}
-      <div className="my-4 ml-1">
-        <Button
-          variant="outline_bg"
-          onClick={() => {
-            if (subscription?.ipAllowlisting) {
-              appendClientSecretTrustedIp({
-                ipAddress: "0.0.0.0/0"
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
-        >
-          Add IP Address
-        </Button>
-      </div>
-      {accessTokenTrustedIpsFields.map(({ id }, index) => (
-        <div className="mb-3 flex items-end space-x-2" key={id}>
           <Controller
             control={control}
-            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="2592000"
-            defaultValue="0.0.0.0/0"
+            name="accessTokenMaxTTL"
-            render={({ field, fieldState: { error } }) => {
+            render={({ field, fieldState: { error } }) => (
-              return (
+              <FormControl
-                <FormControl
+                label="Access Token Max TTL (seconds)"
-                  className="mb-0 flex-grow"
+                isError={Boolean(error)}
-                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                errorText={error?.message}
-                  isError={Boolean(error)}
+              >
-                  errorText={error?.message}
+                <Input {...field} placeholder="2592000" type="number" min="0" step="1" />
-                >
+              </FormControl>
-                  <Input
+            )}
-                    value={field.value}
-                    onChange={(e) => {
-                      if (subscription?.ipAllowlisting) {
-                        field.onChange(e);
-                        return;
-                      }
-
-                      handlePopUpOpen("upgradePlan");
-                    }}
-                    placeholder="123.456.789.0"
-                  />
-                </FormControl>
-              );
-            }}
           />
-          <IconButton
+          <Controller
-            onClick={() => {
+            control={control}
-              if (subscription?.ipAllowlisting) {
+            defaultValue="0"
-                removeAccessTokenTrustedIp(index);
+            name="accessTokenNumUsesLimit"
-                return;
+            render={({ field, fieldState: { error } }) => (
-              }
+              <FormControl
+                label="Access Token Max Number of Uses"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="0" type="number" min="0" step="1" />
+              </FormControl>
+            )}
+          />
+        </TabPanel>
+        <TabPanel value={IdentityFormTab.Advanced}>
+          {clientSecretTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`clientSecretTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Client Secret Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
 
-              handlePopUpOpen("upgradePlan");
+                          handlePopUpOpen("upgradePlan");
-            }}
+                        }}
-            size="lg"
+                        placeholder="123.456.789.0"
-            colorSchema="danger"
+                      />
-            variant="plain"
+                    </FormControl>
-            ariaLabel="update"
+                  );
-            className="p-3"
+                }}
-          >
+              />
-            <FontAwesomeIcon icon={faXmark} />
+              <IconButton
-          </IconButton>
+                onClick={() => {
-        </div>
+                  if (subscription?.ipAllowlisting) {
-      ))}
+                    removeClientSecretTrustedIp(index);
-      <div className="my-4 ml-1">
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendClientSecretTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+          {accessTokenTrustedIpsFields.map(({ id }, index) => (
+            <div className="mb-3 flex items-end space-x-2" key={id}>
+              <Controller
+                control={control}
+                name={`accessTokenTrustedIps.${index}.ipAddress`}
+                defaultValue="0.0.0.0/0"
+                render={({ field, fieldState: { error } }) => {
+                  return (
+                    <FormControl
+                      className="mb-0 flex-grow"
+                      label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input
+                        value={field.value}
+                        onChange={(e) => {
+                          if (subscription?.ipAllowlisting) {
+                            field.onChange(e);
+                            return;
+                          }
+
+                          handlePopUpOpen("upgradePlan");
+                        }}
+                        placeholder="123.456.789.0"
+                      />
+                    </FormControl>
+                  );
+                }}
+              />
+              <IconButton
+                onClick={() => {
+                  if (subscription?.ipAllowlisting) {
+                    removeAccessTokenTrustedIp(index);
+                    return;
+                  }
+
+                  handlePopUpOpen("upgradePlan");
+                }}
+                size="lg"
+                colorSchema="danger"
+                variant="plain"
+                ariaLabel="update"
+                className="p-3"
+              >
+                <FontAwesomeIcon icon={faXmark} />
+              </IconButton>
+            </div>
+          ))}
+          <div className="my-4 ml-1">
+            <Button
+              variant="outline_bg"
+              onClick={() => {
+                if (subscription?.ipAllowlisting) {
+                  appendAccessTokenTrustedIp({
+                    ipAddress: "0.0.0.0/0"
+                  });
+                  return;
+                }
+
+                handlePopUpOpen("upgradePlan");
+              }}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              size="xs"
+            >
+              Add IP Address
+            </Button>
+          </div>
+        </TabPanel>
+      </Tabs>
+      <div className="flex items-center">
         <Button
-          variant="outline_bg"
+          className="mr-4"
-          onClick={() => {
+          size="sm"
-            if (subscription?.ipAllowlisting) {
+          type="submit"
-              appendAccessTokenTrustedIp({
+          isLoading={isSubmitting}
-                ipAddress: "0.0.0.0/0"
+          isDisabled={isSubmitting}
-              });
-              return;
-            }
-
-            handlePopUpOpen("upgradePlan");
-          }}
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          size="xs"
         >
-          Add IP Address
+          {isUpdate ? "Update" : "Add"}
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          Cancel
         </Button>
-      </div>
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <Button
-            className="mr-4"
-            size="sm"
-            type="submit"
-            isLoading={isSubmitting}
-            isDisabled={isSubmitting}
-          >
-            {isUpdate ? "Edit" : "Create"}
-          </Button>
-          <Button
-            colorSchema="secondary"
-            variant="plain"
-            onClick={() => handlePopUpToggle("identityAuthMethod", false)}
-          >
-            Cancel
-          </Button>
-        </div>
       </div>
     </form>
   );

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/types/index.ts

@@ -0,0 +1,4 @@
+export enum IdentityFormTab {
+  Advanced = "advanced",
+  Configuration = "configuration"
+}

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">
+      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
-        <span className="text-sm text-bunker-300">Access Tokens</span>
+        <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">
+      <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
-        <span className="text-sm text-bunker-300">Client Secrets</span>
+        <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,
+  identityId
-  onEditAuthMethod
 }: 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,
+  handlePopUpToggle,
-  onDelete
+  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,
+  handlePopUpToggle,
-  onDelete
+  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}>
+    <ViewIdentityContentWrapper
-      <IdentityAuthFieldDisplay className="col-span-2" label="Tenant ID">
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
-        {data.tenantId}
+      onDelete={onDelete}
-      </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>
       <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">
+        <div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
-          <span className="text-sm text-bunker-300">Details</span>
+          <span className="text-bunker-300">Details</span>
           <div className="flex items-center gap-2">
-            <Button
+            <DropdownMenu>
-              size="xs"
+              <DropdownMenuTrigger asChild>
-              onClick={onEdit}
+                <Button
-              leftIcon={<FontAwesomeIcon icon={faEdit} />}
+                  size="xs"
-              colorSchema="secondary"
+                  rightIcon={<FontAwesomeIcon className="ml-1" icon={faChevronDown} />}
-            >
+                  colorSchema="secondary"
-              Edit
+                >
-            </Button>
+                  Options
-            <Button
+                </Button>
-              size="xs"
+              </DropdownMenuTrigger>
-              onClick={onDelete}
+              <DropdownMenuContent className="min-w-[120px]" align="end">
-              leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                <DropdownMenuItem onClick={onEdit} icon={<FontAwesomeIcon icon={faEdit} />}>
-              colorSchema="danger"
+                  Edit
-            >
+                </DropdownMenuItem>
-              Delete
+                <DropdownMenuItem onClick={onDelete} icon={<FontAwesomeIcon icon={faTrash} />}>
-            </Button>
+                  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,
+  handlePopUpToggle,
-  onDelete
+  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,
+  handlePopUpToggle,
-  onDelete
+  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.length &&
+            <div className="flex flex-wrap gap-1">
-              data.publicKeys.map((key, index) => (
+              {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,
+  handlePopUpToggle,
-  onDelete
+  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
+        {data.caCert && (
-          side="right"
+          <Tooltip
-          className="max-w-xl p-2"
+            side="right"
-          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
+            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">
+            <div className="w-min">
-              <FontAwesomeIcon icon={faEye} />
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-              <span>Reveal</span>
+                <FontAwesomeIcon icon={faEye} />
-            </Badge>
+                <span>Reveal</span>
-          </div>
+              </Badge>
-        </Tooltip>
+            </div>
-      </IdentityAuthFieldDisplay>
+          </Tooltip>
-      <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/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,
+  handlePopUpToggle,
-  onDelete
+  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
+        {data.caCert && (
-          side="right"
+          <Tooltip
-          className="max-w-xl p-2"
+            side="right"
-          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
+            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">
+            <div className="w-min">
-              <FontAwesomeIcon icon={faEye} />
+              <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
-              <span>Reveal</span>
+                <FontAwesomeIcon icon={faEye} />
-            </Badge>
+                <span>Reveal</span>
-          </div>
+              </Badge>
-        </Tooltip>
+            </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,
+  handlePopUpToggle,
-  onDelete
+  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,
+  handlePopUpToggle,
-  onDelete
+  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">
+        <div className="mb-3 border-b border-mineshaft-500 pb-2">
-          <span className="text-sm text-bunker-300">Client ID</span>
+          <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"]>;
 };