misc: redesigned org security settings page

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx

@@ -4,8 +4,17 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
+import {
+  Button,
+  DeleteActionModal,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  TextArea
+} from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
 import {
   useCreateLDAPConfig,
   useGetLDAPConfig,
@@ -32,9 +41,10 @@ type Props = {
   popUp: UsePopUpState<["addLDAP"]>;
   handlePopUpClose: (popUpName: keyof UsePopUpState<["addLDAP"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
+  hideDelete?: boolean;
 };
 
-export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelete }: Props) => {
   const { currentOrg } = useOrganization();
 
   const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
@@ -46,6 +56,39 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     resolver: zodResolver(LDAPFormSchema)
   });
 
+  const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle();
+
+  const handleLdapSoftDelete = async () => {
+    if (!currentOrg) {
+      return;
+    }
+    try {
+      await updateMutateAsync({
+        organizationId: currentOrg.id,
+        isActive: false,
+        url: "",
+        bindDN: "",
+        bindPass: "",
+        searchBase: "",
+        searchFilter: "",
+        uniqueUserAttribute: "",
+        groupSearchBase: "",
+        groupSearchFilter: "",
+        caCert: ""
+      });
+
+      createNotification({
+        text: "Successfully deleted OIDC configuration.",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed deleting OIDC configuration.",
+        type: "error"
+      });
+    }
+  };
+
   const watchUrl = watch("url");
   const watchBindDN = watch("bindDN");
   const watchBindPass = watch("bindPass");
@@ -175,6 +218,7 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   };
 
   return (
+    <>
       <Modal
         isOpen={popUp?.addLDAP?.isOpen}
         onOpenChange={(isOpen) => {
@@ -292,7 +336,8 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                 </FormControl>
               )}
             />
-          <div className="mt-8 flex items-center">
+            <div className="mt-8 flex justify-between">
+              <div className="flex items-center">
                 <Button
                   className="mr-4"
                   size="sm"
@@ -305,8 +350,22 @@ export const LDAPModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                   Test Connection
                 </Button>
               </div>
+              {!hideDelete && (
+                <Button colorSchema="danger" onClick={() => setIsDeletePopupOpen.on()}>
+                  Delete
+                </Button>
+              )}
+            </div>
           </form>
         </ModalContent>
       </Modal>
+      <DeleteActionModal
+        isOpen={isDeletePopupOpen}
+        title="Are you sure want to delete LDAP?"
+        onChange={() => setIsDeletePopupOpen.toggle()}
+        deleteKey="confirm"
+        onDeleteApproved={handleLdapSoftDelete}
+      />
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx

@@ -6,6 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import {
   Button,
+  DeleteActionModal,
   FormControl,
   Input,
   Modal,
@@ -28,6 +29,7 @@ type Props = {
   popUp: UsePopUpState<["addOIDC"]>;
   handlePopUpClose: (popUpName: keyof UsePopUpState<["addOIDC"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addOIDC"]>, state?: boolean) => void;
+  hideDelete?: boolean;
 };
 
 const schema = z
@@ -94,11 +96,13 @@ const schema = z
 
 export type OIDCFormData = z.infer<typeof schema>;
 
-export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelete }: Props) => {
   const { currentOrg } = useOrganization();
 
   const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateOIDCConfig();
   const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateOIDCConfig();
+  const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle(false);
+
   const { data } = useGetOIDCConfig(currentOrg?.slug ?? "");
 
   const { control, handleSubmit, reset, setValue, watch } = useForm<OIDCFormData>({
@@ -112,6 +116,36 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   const [isClientSecretFocused, setIsClientSecretFocused] = useToggle();
 
   const configurationTypeValue = watch("configurationType");
+  const handleOidcSoftDelete = async () => {
+    if (!currentOrg) {
+      return;
+    }
+    try {
+      await updateMutateAsync({
+        issuer: "",
+        discoveryURL: "",
+        authorizationEndpoint: "",
+        allowedEmailDomains: "",
+        jwksUri: "",
+        tokenEndpoint: "",
+        userinfoEndpoint: "",
+        clientId: "",
+        clientSecret: "",
+        isActive: false,
+        orgSlug: currentOrg.slug
+      });
+
+      createNotification({
+        text: "Successfully deleted OIDC configuration.",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed deleting OIDC configuration.",
+        type: "error"
+      });
+    }
+  };
 
   useEffect(() => {
     if (data) {
@@ -193,6 +227,7 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   };
 
   return (
+    <>
       <Modal
         isOpen={popUp?.addOIDC?.isOpen}
         onOpenChange={(isOpen) => {
@@ -312,7 +347,11 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                   control={control}
                   name="jwksUri"
                   render={({ field, fieldState: { error } }) => (
-                  <FormControl label="JWKS URI" errorText={error?.message} isError={Boolean(error)}>
+                    <FormControl
+                      label="JWKS URI"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
                       <Input
                         {...field}
                         placeholder="https://www.googleapis.com/oauth2/v3/certs"
@@ -380,7 +419,8 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                 </FormControl>
               )}
             />
-          <div className="mt-8 flex items-center">
+            <div className="mt-8 flex justify-between">
+              <div className="flex items-center">
                 <Button
                   className="mr-4"
                   size="sm"
@@ -397,8 +437,22 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                   Cancel
                 </Button>
               </div>
+              {!hideDelete && (
+                <Button colorSchema="danger" onClick={() => setIsDeletePopupOpen.on()}>
+                  Delete
+                </Button>
+              )}
+            </div>
           </form>
         </ModalContent>
       </Modal>
+      <DeleteActionModal
+        isOpen={isDeletePopupOpen}
+        title="Are you sure want to delete OIDC?"
+        onChange={() => setIsDeletePopupOpen.toggle()}
+        deleteKey="confirm"
+        onDeleteApproved={handleOidcSoftDelete}
+      />
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -1,34 +1,189 @@
-import { OrgPermissionActions, OrgPermissionSubjects, useServerConfig } from "@app/context";
+import { twMerge } from "tailwind-merge";
+
+import { Button, ContentLoader, UpgradePlanModal } from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useServerConfig,
+  useSubscription
+} from "@app/context";
 import { withPermission } from "@app/hoc";
+import { usePopUp } from "@app/hooks";
+import { useGetLDAPConfig, useGetOIDCConfig, useGetSSOConfig } from "@app/hooks/api";
 import { LoginMethod } from "@app/hooks/api/admin/types";
 
+import { LDAPModal } from "./LDAPModal";
+import { OIDCModal } from "./OIDCModal";
 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
 import { OrgLDAPSection } from "./OrgLDAPSection";
 import { OrgOIDCSection } from "./OrgOIDCSection";
 import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";
+import { SSOModal } from "./SSOModal";
 
 export const OrgAuthTab = withPermission(
   () => {
     const {
       config: { enabledLoginMethods }
     } = useServerConfig();
+    const { currentOrg } = useOrganization();
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "addLDAP",
+      "addSSO",
+      "addOIDC",
+      "upgradePlan"
+    ] as const);
+
+    const { subscription } = useSubscription();
+
+    const { data: oidcConfig, isLoading: isLoadingOidcConfig } = useGetOIDCConfig(
+      currentOrg?.slug ?? ""
+    );
+    const { data: samlConfig, isLoading: isLoadingSamlConfig } = useGetSSOConfig(
+      currentOrg?.id ?? ""
+    );
+    const { data: ldapConfig, isLoading: isLdapConfig } = useGetLDAPConfig(currentOrg?.id ?? "");
+    const areConfigsLoading = isLoadingOidcConfig || isLoadingSamlConfig || isLdapConfig;
 
     const shouldDisplaySection = (method: LoginMethod) =>
       !enabledLoginMethods || enabledLoginMethods.includes(method);
 
-    return (
+    const isOidcConfigured = oidcConfig && (oidcConfig.discoveryURL || oidcConfig.issuer);
-      <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+    const isSamlConfigured = samlConfig && samlConfig.entryPoint;
-        {shouldDisplaySection(LoginMethod.SAML) && (
+    const isLdapConfigured = ldapConfig && ldapConfig.url;
+
+    const shouldShowCreateIdentityProviderView =
+      !isOidcConfigured && !isSamlConfigured && !isLdapConfigured;
+
+    const createIdentityProviderView = (shouldDisplaySection(LoginMethod.SAML) ||
+      shouldDisplaySection(LoginMethod.OIDC) ||
+      shouldDisplaySection(LoginMethod.LDAP)) && (
       <>
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+          <p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
+          <p className="mb-2 mt-1 text-gray-400">
+            Connect your identity provider to simplify user management
+          </p>
+          {shouldDisplaySection(LoginMethod.SAML) && (
+            <div
+              className={twMerge(
+                "mt-4 flex items-center justify-between",
+                (shouldDisplaySection(LoginMethod.OIDC) ||
+                  shouldDisplaySection(LoginMethod.LDAP)) &&
+                  "border-b border-mineshaft-500 pb-4"
+              )}
+            >
+              <p className="text-lg text-gray-200">SAML</p>
+              <Button
+                colorSchema="secondary"
+                onClick={() => {
+                  if (!subscription?.samlSSO) {
+                    handlePopUpOpen("upgradePlan", { feature: "SAML SSO", plan: "Pro" });
+                    return;
+                  }
+
+                  handlePopUpOpen("addSSO");
+                }}
+              >
+                Connect
+              </Button>
+            </div>
+          )}
+          {shouldDisplaySection(LoginMethod.OIDC) && (
+            <div
+              className={twMerge(
+                "mt-4 flex items-center justify-between",
+                shouldDisplaySection(LoginMethod.LDAP) && "border-b border-mineshaft-500 pb-4"
+              )}
+            >
+              <p className="text-lg text-gray-200">OIDC</p>
+              <Button
+                colorSchema="secondary"
+                onClick={() => {
+                  if (!subscription?.oidcSSO) {
+                    handlePopUpOpen("upgradePlan", { feature: "OIDC SSO", plan: "Pro" });
+                    return;
+                  }
+
+                  handlePopUpOpen("addOIDC");
+                }}
+              >
+                Connect
+              </Button>
+            </div>
+          )}
+          {shouldDisplaySection(LoginMethod.LDAP) && (
+            <div className="mt-4 flex items-center justify-between">
+              <p className="text-lg text-gray-200">LDAP</p>
+              <Button
+                colorSchema="secondary"
+                onClick={() => {
+                  if (!subscription?.ldap) {
+                    handlePopUpOpen("upgradePlan", { feature: "LDAP", plan: "Enterprise" });
+                    return;
+                  }
+
+                  handlePopUpOpen("addLDAP");
+                }}
+              >
+                Connect
+              </Button>
+            </div>
+          )}
+        </div>
+        <SSOModal
+          hideDelete
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <OIDCModal
+          hideDelete
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <LDAPModal
+          hideDelete
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+      </>
+    );
+
+    if (areConfigsLoading) {
+      return <ContentLoader />;
+    }
+
+    return (
+      <>
+        {shouldShowCreateIdentityProviderView ? (
+          createIdentityProviderView
+        ) : (
+          <>
+            {isSamlConfigured && shouldDisplaySection(LoginMethod.SAML) && (
+              <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
                 <OrgGeneralAuthSection />
                 <OrgSSOSection />
+              </div>
+            )}
+            {isOidcConfigured && shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
+            {isLdapConfigured && shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
           </>
         )}
-        {shouldDisplaySection(LoginMethod.OIDC) && <OrgOIDCSection />}
-        {shouldDisplaySection(LoginMethod.LDAP) && <OrgLDAPSection />}
         <OrgScimSection />
-      </div>
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text={`You can use ${
+            (popUp.upgradePlan.data as { feature: string })?.feature
+          } if you switch to Infisical's ${
+            (popUp.upgradePlan.data as { plan: string })?.plan
+          } plan.`}
+        />
+      </>
     );
   },
   { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.Sso }

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx

@@ -87,7 +87,6 @@ export const OrgGeneralAuthSection = () => {
           Enforce members to authenticate via SAML to access this organization
         </p>
       </div>
-      <hr className="border-mineshaft-600" />
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx

@@ -94,7 +94,7 @@ export const OrgLDAPSection = (): JSX.Element => {
   };
 
   return (
-    <>
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">LDAP</h2>
@@ -151,7 +151,6 @@ export const OrgLDAPSection = (): JSX.Element => {
           </p>
         </div>
       )}
-      <hr className="border-mineshaft-600" />
       <LDAPModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
@@ -167,6 +166,6 @@ export const OrgLDAPSection = (): JSX.Element => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
       />
-    </>
+    </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx

@@ -60,7 +60,7 @@ export const OrgOIDCSection = (): JSX.Element => {
   };
 
   return (
-    <>
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">OIDC</h2>
@@ -102,7 +102,6 @@ export const OrgOIDCSection = (): JSX.Element => {
           </p>
         </div>
       )}
-      <hr className="border-mineshaft-600" />
       <OIDCModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
@@ -113,6 +112,6 @@ export const OrgOIDCSection = (): JSX.Element => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use OIDC SSO if you switch to Infisical's Pro plan."
       />
-    </>
+    </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx

@@ -57,7 +57,8 @@ export const OrgScimSection = () => {
   };
 
   return (
-    <>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <p className="text-xl font-semibold text-gray-200">Provision users via SCIM</p>
       <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
           <h2 className="text-md text-mineshaft-100">SCIM</h2>
@@ -68,7 +69,7 @@ export const OrgScimSection = () => {
                 colorSchema="secondary"
                 isDisabled={!isAllowed}
               >
-                Manage
+                Configure
               </Button>
             )}
           </OrgPermissionCan>
@@ -109,6 +110,6 @@ export const OrgScimSection = () => {
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
         text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
       />
-    </>
+    </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx

@@ -115,7 +115,6 @@ export const OrgSSOSection = (): JSX.Element => {
           Allow members to authenticate into Infisical with SAML
         </p>
       </div>
-      <hr className="border-mineshaft-600" />
       <SSOModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -6,6 +6,7 @@ import { z } from "zod";
 import { createNotification } from "@app/components/notifications";
 import {
   Button,
+  DeleteActionModal,
   FormControl,
   Input,
   Modal,
@@ -15,6 +16,7 @@ import {
   TextArea
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { useCreateSSOConfig, useGetSSOConfig, useUpdateSSOConfig } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
@@ -49,13 +51,15 @@ type Props = {
   popUp: UsePopUpState<["addSSO"]>;
   handlePopUpClose: (popUpName: keyof UsePopUpState<["addSSO"]>) => void;
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["addSSO"]>, state?: boolean) => void;
+  hideDelete?: boolean;
 };
 
-export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle, hideDelete }: Props) => {
   const { currentOrg } = useOrganization();
 
   const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateSSOConfig();
   const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateSSOConfig();
+  const [isDeletePopupOpen, setIsDeletePopupOpen] = useToggle();
   const { data } = useGetSSOConfig(currentOrg?.id ?? "");
 
   const { control, handleSubmit, reset, watch } = useForm<AddSSOFormData>({
@@ -76,6 +80,31 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     }
   }, [data]);
 
+  const handleSamlSoftDelete = async () => {
+    if (!currentOrg) {
+      return;
+    }
+    try {
+      await updateMutateAsync({
+        organizationId: currentOrg.id,
+        isActive: false,
+        entryPoint: "",
+        issuer: "",
+        cert: ""
+      });
+
+      createNotification({
+        text: "Successfully deleted SAML SSO configuration.",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed deleting SAML SSO configuration.",
+        type: "error"
+      });
+    }
+  };
+
   const onSSOModalSubmit = async ({ authProvider, entryPoint, issuer, cert }: AddSSOFormData) => {
     try {
       if (!currentOrg) return;
@@ -177,6 +206,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
   const authProvider = watch("authProvider");
 
   return (
+    <>
       <Modal
         isOpen={popUp?.addSSO?.isOpen}
         onOpenChange={(isOpen) => {
@@ -210,7 +240,9 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
             {authProvider && data && (
               <>
                 <div className="mb-4">
-                <h3 className="text-sm text-mineshaft-400">{renderLabels(authProvider).acsUrl}</h3>
+                  <h3 className="text-sm text-mineshaft-400">
+                    {renderLabels(authProvider).acsUrl}
+                  </h3>
                   <p className="text-md break-all text-gray-400">{`${window.origin}/api/v1/sso/saml2/${data.id}`}</p>
                 </div>
                 <div className="mb-4">
@@ -244,7 +276,10 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                       errorText={error?.message}
                       isError={Boolean(error)}
                     >
-                    <Input {...field} placeholder={renderLabels(authProvider).issuerPlaceholder} />
+                      <Input
+                        {...field}
+                        placeholder={renderLabels(authProvider).issuerPlaceholder}
+                      />
                     </FormControl>
                   )}
                 />
@@ -264,7 +299,8 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
               </>
             )}
 
-          <div className="mt-8 flex items-center">
+            <div className="mt-8 flex justify-between">
+              <div className="flex items-center">
                 <Button
                   className="mr-4"
                   size="sm"
@@ -281,8 +317,22 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
                   Cancel
                 </Button>
               </div>
+              {!hideDelete && (
+                <Button colorSchema="danger" onClick={() => setIsDeletePopupOpen.on()}>
+                  Delete
+                </Button>
+              )}
+            </div>
           </form>
         </ModalContent>
       </Modal>
+      <DeleteActionModal
+        isOpen={isDeletePopupOpen}
+        title="Are you sure want to delete SAML SSO?"
+        onChange={() => setIsDeletePopupOpen.toggle()}
+        deleteKey="confirm"
+        onDeleteApproved={handleSamlSoftDelete}
+      />
+    </>
   );
 };