feat: allow users to replace auth methods

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -54,7 +54,7 @@ const identityAuthMethods = [
 
 const schema = yup
   .object({
-    authMethod: yup.string().required("Auth method is required")
+    authMethod: yup.mixed<IdentityAuthMethod>().oneOf(Object.values(IdentityAuthMethod)).required("Auth method is required")
   })
   .required();
 
@@ -71,21 +71,27 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
   const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeOidcAuth } = useDeleteIdentityOidcAuth();
-
+  
-  const { control, watch, setValue } = useForm<FormData>({
+  const initialAuthMethod = popUp?.identityAuthMethod?.data?.authMethod;
-    resolver: yupResolver(schema),
+    
-    defaultValues: {
+    const { control, watch, setValue } = useForm<FormData>({
-      authMethod: IdentityAuthMethod.UNIVERSAL_AUTH
+      resolver: yupResolver(schema),
-    }
+      defaultValues: {
-  });
+        authMethod: initialAuthMethod
-
+      }
-  const identityAuthMethodData = popUp?.identityAuthMethod?.data as {
+    });
-    identityId: string;
+    
-    name: string;
+    const identityAuthMethodData = {
-    authMethod?: IdentityAuthMethod;
+      identityId: popUp?.identityAuthMethod.data?.identityId,
+      name: popUp?.identityAuthMethod?.data?.name,
+      authMethod: watch("authMethod")
+    } as {
+      identityId: string;
+      name: string;
+      authMethod?: IdentityAuthMethod;
   };
 
-  useEffect(() => {
+    useEffect(() => {
     if (identityAuthMethodData?.authMethod) {
       setValue("authMethod", identityAuthMethodData.authMethod);
       return;
@@ -94,85 +100,11 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
     setValue("authMethod", IdentityAuthMethod.UNIVERSAL_AUTH);
   }, [identityAuthMethodData?.authMethod]);
 
-  const authMethod = watch("authMethod");
+  const onRevokeAuthMethodSubmit = async (authMethod: IdentityAuthMethod) => {
-
+    if (!orgId || !authMethod) return;
-  const renderIdentityAuthForm = () => {
-    switch (identityAuthMethodData?.authMethod ?? authMethod) {
-      case IdentityAuthMethod.AWS_AUTH: {
-        return (
-          <IdentityAwsAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      case IdentityAuthMethod.KUBERNETES_AUTH: {
-        return (
-          <IdentityKubernetesAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      case IdentityAuthMethod.GCP_AUTH: {
-        return (
-          <IdentityGcpAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      case IdentityAuthMethod.AZURE_AUTH: {
-        return (
-          <IdentityAzureAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      case IdentityAuthMethod.UNIVERSAL_AUTH: {
-        return (
-          <IdentityUniversalAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      case IdentityAuthMethod.OIDC_AUTH: {
-        return (
-          <IdentityOidcAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      case IdentityAuthMethod.TOKEN_AUTH: {
-        return (
-          <IdentityTokenAuthForm
-            handlePopUpOpen={handlePopUpOpen}
-            handlePopUpToggle={handlePopUpToggle}
-            identityAuthMethodData={identityAuthMethodData}
-          />
-        );
-      }
-      default: {
-        return <div />;
-      }
-    }
-  };
-
-  const onRevokeAuthMethodSubmit = async () => {
-    if (!identityAuthMethodData.authMethod) return;
-    if (!orgId) return;
     try {
       console.log("onRevokeAuthMethodSubmit identityId: ", identityAuthMethodData);
-      switch (identityAuthMethodData.authMethod) {
+      switch (authMethod) {
         case IdentityAuthMethod.UNIVERSAL_AUTH: {
           await revokeUniversalAuth({
             identityId: identityAuthMethodData.identityId,
@@ -228,7 +160,7 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
 
       createNotification({
         text: `Successfully removed ${
-          identityAuthToNameMap[identityAuthMethodData.authMethod]
+          identityAuthToNameMap[authMethod]
         } on ${identityAuthMethodData.name}`,
         type: "success"
       });
@@ -238,13 +170,97 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
     } catch (err) {
       console.error(err);
       createNotification({
-        text: `Failed to remove ${identityAuthToNameMap[identityAuthMethodData.authMethod]} on ${
+        text: `Failed to remove ${identityAuthToNameMap[authMethod]} on ${
           identityAuthMethodData.name
         }`,
         type: "error"
       });
     }
   };
+  const renderIdentityAuthForm = () => {
+    switch (identityAuthMethodData.authMethod) {
+      case IdentityAuthMethod.AWS_AUTH: {
+        return (
+          <IdentityAwsAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      case IdentityAuthMethod.KUBERNETES_AUTH: {
+        return (
+          <IdentityKubernetesAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      case IdentityAuthMethod.GCP_AUTH: {
+        return (
+          <IdentityGcpAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      case IdentityAuthMethod.AZURE_AUTH: {
+        return (
+          <IdentityAzureAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      case IdentityAuthMethod.UNIVERSAL_AUTH: {
+        return (
+          <IdentityUniversalAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      case IdentityAuthMethod.OIDC_AUTH: {
+        return (
+          <IdentityOidcAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      case IdentityAuthMethod.TOKEN_AUTH: {
+        return (
+          <IdentityTokenAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+            initialAuthMethod={initialAuthMethod!}
+            revokeAuth={onRevokeAuthMethodSubmit}
+          />
+        );
+      }
+      default: {
+        return <div />;
+      }
+    }
+  };
 
   return (
     <Modal
@@ -255,8 +271,8 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
     >
       <ModalContent
         title={`${
-          identityAuthMethodData?.authMethod ? "Update" : "Configure"
+          identityAuthMethodData.authMethod === initialAuthMethod ? "Update" : "Configure"
-        } Identity Auth Method for ${identityAuthMethodData?.name ?? ""}`}
+        } Identity Auth Method for ${identityAuthToNameMap[identityAuthMethodData.authMethod!] ?? ""}`}
       >
         <Controller
           control={control}
@@ -267,9 +283,8 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
               <Select
                 defaultValue={field.value}
                 {...field}
-                onValueChange={(e) => onChange(e)}
+                onValueChange={(e) => {onChange(e)}}
                 className="w-full"
-                isDisabled={!!identityAuthMethodData?.authMethod}
               >
                 {identityAuthMethods.map(({ label, value }) => (
                   <SelectItem value={String(value || "")} key={label}>
@@ -295,7 +310,7 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
           } on ${identityAuthMethodData?.name ?? ""}?`}
           onChange={(isOpen) => handlePopUpToggle("revokeAuthMethod", isOpen)}
           deleteKey="confirm"
-          onDeleteApproved={onRevokeAuthMethodSubmit}
+          onDeleteApproved={() => onRevokeAuthMethodSubmit(identityAuthMethodData.authMethod!)}
         />
       </ModalContent>
     </Modal>

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAwsAuthForm.tsx

@@ -6,7 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import { Button, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAwsAuth,
@@ -15,7 +15,7 @@ import {
 } 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 { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
@@ -64,12 +64,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityAwsAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  initialAuthMethod,
+  revokeAuth
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -80,6 +84,10 @@ export const IdentityAwsAuthForm = ({
 
   const { data } = useGetIdentityAwsAuth(identityAuthMethodData?.identityId ?? "");
 
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
+
   const {
     control,
     handleSubmit,
@@ -175,9 +183,8 @@ export const IdentityAwsAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
@@ -345,15 +352,24 @@ export const IdentityAwsAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+        {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+            >
-          </Button>
+              Overwrite
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -362,7 +378,7 @@ export const IdentityAwsAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -374,6 +390,15 @@ export const IdentityAwsAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { await revokeAuth(initialAuthMethod); handleSubmit(onFormSubmit)(); }}
+        />
     </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm.tsx

@@ -6,7 +6,7 @@ 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, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityAzureAuth,
@@ -15,11 +15,11 @@ import {
 } 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 { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
-    tenantId: z.string(),
+    tenantId: z.string().min(1),
     resource: z.string(),
     allowedServicePrincipalIds: z.string(),
     accessTokenTTL: z.string().refine((val) => Number(val) <= 315360000, {
@@ -52,12 +52,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityAzureAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  initialAuthMethod,
+  revokeAuth
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -68,10 +72,15 @@ export const IdentityAzureAuthForm = ({
 
   const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "");
 
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
+
   const {
     control,
     handleSubmit,
     reset,
+    trigger,
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -163,9 +172,8 @@ export const IdentityAzureAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
@@ -333,15 +341,23 @@ export const IdentityAzureAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+        {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}>
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+              Overwrite
-          </Button>
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -350,7 +366,7 @@ export const IdentityAzureAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -362,6 +378,28 @@ export const IdentityAzureAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { 
+            const result = await trigger();
+            if(result){
+              await revokeAuth(initialAuthMethod); 
+              handleSubmit(onFormSubmit)(); 
+            }else{
+              createNotification({
+                text: "Please fill in all required fields",
+                type: "error"
+              });
+              popup.handlePopUpToggle("overwriteAuthMethod", false);
+            }
+          }}
+        />
+
     </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityGcpAuthForm.tsx

@@ -6,7 +6,7 @@ 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, DeleteActionModal, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityGcpAuth,
@@ -15,7 +15,7 @@ import {
 } 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 { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
@@ -53,12 +53,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityGcpAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  revokeAuth,
+  initialAuthMethod
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -68,13 +72,16 @@ export const IdentityGcpAuthForm = ({
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityGcpAuth();
 
   const { data } = useGetIdentityGcpAuth(identityAuthMethodData?.identityId ?? "");
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
 
   const {
     control,
     handleSubmit,
     reset,
     formState: { isSubmitting },
-    watch
+    watch,
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
@@ -100,7 +107,7 @@ export const IdentityGcpAuthForm = ({
   useEffect(() => {
     if (data) {
       reset({
-        type: data.type,
+        type: data.type || "gce",
         allowedServiceAccounts: data.allowedServiceAccounts,
         allowedProjects: data.allowedProjects,
         allowedZones: data.allowedZones,
@@ -117,7 +124,7 @@ export const IdentityGcpAuthForm = ({
       });
     } else {
       reset({
-        type: "iam",
+        type: "gce",
         allowedServiceAccounts: "",
         allowedProjects: "",
         allowedZones: "",
@@ -173,12 +180,12 @@ export const IdentityGcpAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
+
       reset();
     } catch (err) {
       createNotification({
@@ -201,10 +208,10 @@ export const IdentityGcpAuthForm = ({
               onValueChange={(e) => onChange(e)}
               className="w-full"
             >
-              <SelectItem value="gce" key="gcp-type-gce">
+              <SelectItem value="gce" key="gce">
                 GCP ID Token Auth (Recommended)
               </SelectItem>
-              <SelectItem value="iam" key="gcpiam">
+              <SelectItem value="iam" key="iam">
                 GCP IAM Auth
               </SelectItem>
             </Select>
@@ -367,15 +374,24 @@ export const IdentityGcpAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+        {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+            >
-          </Button>
+              Overwrite
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -384,7 +400,7 @@ export const IdentityGcpAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -396,6 +412,15 @@ export const IdentityGcpAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { await revokeAuth(initialAuthMethod); handleSubmit(onFormSubmit)(); }}
+        />
     </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -6,7 +6,7 @@ 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, DeleteActionModal, FormControl, IconButton, Input, TextArea } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityKubernetesAuth,
@@ -15,12 +15,12 @@ import {
 } 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 { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
-    kubernetesHost: z.string(),
+    kubernetesHost: z.string().min(1),
-    tokenReviewerJwt: z.string(),
+    tokenReviewerJwt: z.string().min(1),
     allowedNames: z.string(),
     allowedNamespaces: z.string(),
     allowedAudience: z.string(),
@@ -55,12 +55,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityKubernetesAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  initialAuthMethod,
+  revokeAuth
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -70,12 +74,16 @@ export const IdentityKubernetesAuthForm = ({
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityKubernetesAuth();
 
   const { data } = useGetIdentityKubernetesAuth(identityAuthMethodData?.identityId ?? "");
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
 
   const {
     control,
     handleSubmit,
     reset,
-    formState: { isSubmitting }
+    trigger,
+    formState: { isSubmitting },
   } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: {
@@ -184,9 +192,8 @@ export const IdentityKubernetesAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
@@ -404,15 +411,24 @@ export const IdentityKubernetesAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+        {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+            >
-          </Button>
+              Overwrite
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -421,7 +437,7 @@ export const IdentityKubernetesAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -433,6 +449,27 @@ export const IdentityKubernetesAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { 
+            const result = await trigger();
+            if(result){
+              await revokeAuth(initialAuthMethod); 
+              handleSubmit(onFormSubmit)(); 
+            }else{
+              createNotification({
+                text: "Please fill in all required fields",
+                type: "error"
+              });
+              popup.handlePopUpToggle("overwriteAuthMethod", false);
+            }
+          }}
+        />
     </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityOidcAuthForm.tsx

@@ -7,13 +7,13 @@ 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, DeleteActionModal,FormControl, IconButton, Input, 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 { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z.object({
   accessTokenTrustedIps: z
@@ -56,12 +56,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityOidcAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  initialAuthMethod,
+  revokeAuth
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -71,11 +75,15 @@ export const IdentityOidcAuthForm = ({
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityOidcAuth();
 
   const { data } = useGetIdentityOidcAuth(identityAuthMethodData?.identityId ?? "");
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
 
   const {
     control,
     handleSubmit,
     reset,
+    trigger,
     formState: { isSubmitting }
   } = useForm<FormData>({
     resolver: zodResolver(schema),
@@ -193,9 +201,8 @@ export const IdentityOidcAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
@@ -488,15 +495,24 @@ export const IdentityOidcAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+        {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+            >
-          </Button>
+              Overwrite
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -505,7 +521,7 @@ export const IdentityOidcAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -517,6 +533,27 @@ export const IdentityOidcAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { 
+            const result = await trigger();
+            if(result){
+              await revokeAuth(initialAuthMethod); 
+              handleSubmit(onFormSubmit)(); 
+            }else{
+              createNotification({
+                text: "Please fill in all required fields",
+                type: "error"
+              });
+              popup.handlePopUpToggle("overwriteAuthMethod", false);
+            }
+          }}
+        />
     </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTokenAuthForm.tsx

@@ -5,7 +5,7 @@ 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, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityTokenAuth,
@@ -13,7 +13,7 @@ import {
   useUpdateIdentityTokenAuth
 } from "@app/hooks/api";
 import { IdentityAuthMethod } from "@app/hooks/api/identities";
-import { UsePopUpState } from "@app/hooks/usePopUp";
+import { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z
   .object({
@@ -47,12 +47,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityTokenAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  initialAuthMethod,
+  revokeAuth
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -62,6 +66,9 @@ export const IdentityTokenAuthForm = ({
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityTokenAuth();
 
   const { data } = useGetIdentityTokenAuth(identityAuthMethodData?.identityId ?? "");
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
 
   const {
     control,
@@ -116,16 +123,15 @@ export const IdentityTokenAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
       reset();
     } catch (err) {
       createNotification({
-        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        text: `Failed to ${identityAuthMethodData?.authMethod === initialAuthMethod ? "update" : "configure"} identity`,
         type: "error"
       });
     }
@@ -245,15 +251,23 @@ export const IdentityTokenAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+          {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}>
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+              Overwrite
-          </Button>
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -262,7 +276,7 @@ export const IdentityTokenAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -274,6 +288,15 @@ export const IdentityTokenAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { await revokeAuth(initialAuthMethod); handleSubmit(onFormSubmit)(); }}
+        />
     </form>
   );
 };

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityUniversalAuthForm.tsx

@@ -6,7 +6,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import { Button, DeleteActionModal, FormControl, IconButton, Input } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
 import {
   useAddIdentityUniversalAuth,
@@ -15,7 +15,7 @@ import {
 } 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 { usePopUp, UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = yup
   .object({
@@ -70,12 +70,16 @@ type Props = {
     name: string;
     authMethod?: IdentityAuthMethod;
   };
+  initialAuthMethod: IdentityAuthMethod;
+  revokeAuth: (authMethod: IdentityAuthMethod) => Promise<void>;
 };
 
 export const IdentityUniversalAuthForm = ({
   handlePopUpOpen,
   handlePopUpToggle,
-  identityAuthMethodData
+  identityAuthMethodData,
+  initialAuthMethod,
+  revokeAuth
 }: Props) => {
   const { currentOrg } = useOrganization();
   const orgId = currentOrg?.id || "";
@@ -83,6 +87,9 @@ export const IdentityUniversalAuthForm = ({
   const { mutateAsync: addMutateAsync } = useAddIdentityUniversalAuth();
   const { mutateAsync: updateMutateAsync } = useUpdateIdentityUniversalAuth();
   const { data } = useGetIdentityUniversalAuth(identityAuthMethodData?.identityId ?? "");
+  const popup = usePopUp([
+    "overwriteAuthMethod",
+  ] as const);
 
   const {
     control,
@@ -181,9 +188,8 @@ export const IdentityUniversalAuthForm = ({
       handlePopUpToggle("identityAuthMethod", false);
 
       createNotification({
-        text: `Successfully ${
+        text: `Successfully ${identityAuthMethodData?.authMethod === initialAuthMethod ? "updated" : "configured"
-          identityAuthMethodData?.authMethod ? "updated" : "configured"
+          } auth method`,
-        } auth method`,
         type: "success"
       });
 
@@ -384,15 +390,24 @@ export const IdentityUniversalAuthForm = ({
       </div>
       <div className="flex justify-between">
         <div className="flex items-center">
-          <Button
+        {(initialAuthMethod && identityAuthMethodData?.authMethod !== initialAuthMethod) ?
-            className="mr-4"
+            <Button
-            size="sm"
+              className="mr-4"
-            type="submit"
+              size="sm"
-            isLoading={isSubmitting}
+              isLoading={isSubmitting}
-            isDisabled={isSubmitting}
+              isDisabled={isSubmitting}
-          >
+              onClick={() => popup.handlePopUpToggle("overwriteAuthMethod", true)}
-            {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+            >
-          </Button>
+              Overwrite
+            </Button>
+            : <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >Submit</Button>
+          }
           <Button
             colorSchema="secondary"
             variant="plain"
@@ -401,7 +416,7 @@ export const IdentityUniversalAuthForm = ({
             Cancel
           </Button>
         </div>
-        {identityAuthMethodData?.authMethod && (
+        {identityAuthMethodData?.authMethod === initialAuthMethod && (
           <Button
             size="sm"
             colorSchema="danger"
@@ -413,6 +428,15 @@ export const IdentityUniversalAuthForm = ({
           </Button>
         )}
       </div>
+      <DeleteActionModal
+          isOpen={popup.popUp.overwriteAuthMethod?.isOpen}
+          title={`Are you sure want to overwrite ${
+            initialAuthMethod || "the auth method"
+          } on ${identityAuthMethodData?.name ?? ""}?`}
+          onChange={(isOpen) => popup.handlePopUpToggle("overwriteAuthMethod", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={async () => { await revokeAuth(initialAuthMethod); handleSubmit(onFormSubmit)(); }}
+        />
     </form>
   );
 };