feat: add delete and reset buttons to Domain Verification UI (#18371)

Co-authored-by: suisuixia42 <[email protected]>

Author: pmossman

airbyte-webapp/src/core/api/hooks/domainVerification.ts

@@ -2,7 +2,13 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { useCurrentOrganizationId } from "area/organization/utils/useCurrentOrganizationId";
 
-import { checkDomainVerification, createDomainVerification, listDomainVerifications } from "../generated/AirbyteClient";
+import {
+  checkDomainVerification,
+  createDomainVerification,
+  deleteDomainVerification,
+  listDomainVerifications,
+  resetDomainVerification,
+} from "../generated/AirbyteClient";
 import { SCOPE_ORGANIZATION } from "../scopes";
 import { useRequestOptions } from "../useRequestOptions";
 
@@ -113,7 +119,68 @@ export const useCheckDomainVerification = () => {
   return useMutation({
     mutationFn: (domainVerificationId: string) => checkDomainVerification({ domainVerificationId }, requestOptions),
     onSuccess: () => {
-      // Invalidate the list query to refresh the domain list with updated status
+      queryClient.invalidateQueries({ queryKey: domainVerificationKeys.list(organizationId) });
+    },
+  });
+};
+
+/**
+ * Hook to delete a domain verification.
+ *
+ * Permanently removes a domain verification from the organization.
+ * If the domain is verified and being used for SSO login enforcement,
+ * those enforcements will be removed.
+ *
+ * @returns React Query mutation result
+ *
+ * @example
+ * const { mutate: deleteDomain, isLoading } = useDeleteDomainVerification();
+ *
+ * deleteDomain(domainId, {
+ *   onSuccess: () => {
+ *     console.log("Domain deleted successfully");
+ *   }
+ * });
+ */
+export const useDeleteDomainVerification = () => {
+  const requestOptions = useRequestOptions();
+  const queryClient = useQueryClient();
+  const organizationId = useCurrentOrganizationId();
+
+  return useMutation({
+    mutationFn: (domainVerificationId: string) => deleteDomainVerification({ domainVerificationId }, requestOptions),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: domainVerificationKeys.list(organizationId) });
+    },
+  });
+};
+
+/**
+ * Hook to reset a failed or expired domain verification.
+ *
+ * Resets the verification status back to PENDING and resumes checking for
+ * the DNS TXT record. This is useful when a user wants to retry verification
+ * after a failure or expiration.
+ *
+ * @returns React Query mutation result
+ *
+ * @example
+ * const { mutate: resetDomain, isLoading } = useResetDomainVerification();
+ *
+ * resetDomain(domainId, {
+ *   onSuccess: () => {
+ *     console.log("Domain verification reset successfully");
+ *   }
+ * });
+ */
+export const useResetDomainVerification = () => {
+  const requestOptions = useRequestOptions();
+  const queryClient = useQueryClient();
+  const organizationId = useCurrentOrganizationId();
+
+  return useMutation({
+    mutationFn: (domainVerificationId: string) => resetDomainVerification({ domainVerificationId }, requestOptions),
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: domainVerificationKeys.list(organizationId) });
     },
   });

airbyte-webapp/src/locales/en.json

@@ -1432,6 +1432,19 @@
   "settings.organizationSettings.domainVerification.checkNow": "Check Status",
   "settings.organizationSettings.domainVerification.checkError": "Failed to check domain verification status. Please try again.",
   "settings.organizationSettings.domainVerification.viewDnsInfo": "View DNS Info",
+  "settings.organizationSettings.domainVerification.delete": "Delete",
+  "settings.organizationSettings.domainVerification.reset": "Reset",
+  "settings.organizationSettings.domainVerification.deleteDomain": "Delete Domain",
+  "settings.organizationSettings.domainVerification.deleteConfirmation": "Are you sure you want to delete the domain {domain}? This action cannot be undone.",
+  "settings.organizationSettings.domainVerification.deleteButton": "Delete Domain",
+  "settings.organizationSettings.domainVerification.deleteSsoWarning": "Warning: This domain is verified and being used for SSO login enforcement. Deleting it will remove SSO login requirements for users with email addresses on this domain.",
+  "settings.organizationSettings.domainVerification.deleted": "Domain deleted successfully.",
+  "settings.organizationSettings.domainVerification.deleteError": "Failed to delete domain. Please try again.",
+  "settings.organizationSettings.domainVerification.resetDomain": "Reset Domain Verification",
+  "settings.organizationSettings.domainVerification.resetConfirmation": "Are you sure you want to reset the verification for {domain}? The domain status will be changed to PENDING and the system will resume checking for the DNS record.",
+  "settings.organizationSettings.domainVerification.resetButton": "Reset Verification",
+  "settings.organizationSettings.domainVerification.resetSuccess": "Domain verification reset successfully. The system will now check for the DNS record.",
+  "settings.organizationSettings.domainVerification.resetError": "Failed to reset domain verification. Please try again.",
   "settings.accountSettings": "Account Settings",
   "settings.userId": "User ID: {id}",
   "settings.userId.copy": "Copy user ID",

airbyte-webapp/src/pages/SettingsPage/components/DomainVerification/DeleteDomainConfirmationModal.tsx

@@ -0,0 +1,69 @@
+import { FormattedMessage } from "react-intl";
+
+import { ConfirmationModal } from "components/ConfirmationModal";
+import { Box } from "components/ui/Box";
+import { Text } from "components/ui/Text";
+
+import { useDeleteDomainVerification } from "core/api";
+import { DomainVerificationResponse, SSOConfigRead } from "core/api/types/AirbyteClient";
+import { useNotificationService } from "hooks/services/Notification";
+
+interface DeleteDomainConfirmationModalProps {
+  domain: DomainVerificationResponse;
+  ssoConfig: SSOConfigRead | null;
+  onClose: () => void;
+}
+
+export const DeleteDomainConfirmationModal: React.FC<DeleteDomainConfirmationModalProps> = ({
+  domain,
+  ssoConfig,
+  onClose,
+}) => {
+  const { registerNotification } = useNotificationService();
+  const { mutateAsync: deleteDomain } = useDeleteDomainVerification();
+
+  const hasActiveSso = ssoConfig?.status === "active";
+  const isVerifiedDomain = domain.status === "VERIFIED";
+  const showSsoWarning = hasActiveSso && isVerifiedDomain;
+
+  const handleDelete = async () => {
+    try {
+      await deleteDomain(domain.id);
+
+      registerNotification({
+        id: "domain-verification-deleted",
+        text: <FormattedMessage id="settings.organizationSettings.domainVerification.deleted" />,
+        type: "success",
+      });
+
+      onClose();
+    } catch (error) {
+      registerNotification({
+        id: "domain-verification-delete-error",
+        text: <FormattedMessage id="settings.organizationSettings.domainVerification.deleteError" />,
+        type: "error",
+      });
+    }
+  };
+
+  return (
+    <ConfirmationModal
+      title="settings.organizationSettings.domainVerification.deleteDomain"
+      text="settings.organizationSettings.domainVerification.deleteConfirmation"
+      textValues={{ domain: domain.domain }}
+      additionalContent={
+        showSsoWarning && (
+          <Box pt="lg">
+            <Text color="red">
+              <FormattedMessage id="settings.organizationSettings.domainVerification.deleteSsoWarning" />
+            </Text>
+          </Box>
+        )
+      }
+      onCancel={onClose}
+      onSubmit={handleDelete}
+      submitButtonText="settings.organizationSettings.domainVerification.deleteButton"
+      submitButtonVariant="danger"
+    />
+  );
+};

airbyte-webapp/src/pages/SettingsPage/components/DomainVerification/DomainVerificationItem.tsx

@@ -15,6 +15,8 @@ import styles from "./DomainVerification.module.scss";
 interface DomainVerificationItemProps {
   domain: DomainVerificationResponse;
   onViewDnsInfo: (domain: DomainVerificationResponse) => void;
+  onDelete: (domain: DomainVerificationResponse) => void;
+  onReset: (domain: DomainVerificationResponse) => void;
 }
 
 const getStatusBadgeVariant = (status: DomainVerificationResponseStatus): "green" | "yellow" | "red" | "grey" => {
@@ -34,7 +36,12 @@ const getStatusBadgeVariant = (status: DomainVerificationResponseStatus): "green
 
 const MINIMUM_LOADING_DELAY = 800; // milliseconds
 
-export const DomainVerificationItem: React.FC<DomainVerificationItemProps> = ({ domain, onViewDnsInfo }) => {
+export const DomainVerificationItem: React.FC<DomainVerificationItemProps> = ({
+  domain,
+  onViewDnsInfo,
+  onDelete,
+  onReset,
+}) => {
   const { mutateAsync: checkNow } = useCheckDomainVerification();
   const { registerNotification } = useNotificationService();
   const [isChecking, setIsChecking] = useState(false);
@@ -50,7 +57,6 @@ export const DomainVerificationItem: React.FC<DomainVerificationItemProps> = ({
   const handleCheckNow = async () => {
     setIsChecking(true);
     try {
-      // Ensure a minimum loading time to prevent jarring UI flicker
       await Promise.all([checkNow(domain.id), new Promise((resolve) => setTimeout(resolve, MINIMUM_LOADING_DELAY))]);
     } catch (error) {
       registerNotification({
@@ -63,6 +69,8 @@ export const DomainVerificationItem: React.FC<DomainVerificationItemProps> = ({
     }
   };
 
+  const canReset = domain.status === "FAILED" || domain.status === "EXPIRED";
+
   return (
     <div className={styles.domainItem}>
       <FlexContainer justifyContent="space-between" alignItems="center">
@@ -99,6 +107,14 @@ export const DomainVerificationItem: React.FC<DomainVerificationItemProps> = ({
               <FormattedMessage id="settings.organizationSettings.domainVerification.checkNow" />
             </Button>
           )}
+          {canReset && (
+            <Button variant="secondary" size="sm" icon="reset" onClick={() => onReset(domain)}>
+              <FormattedMessage id="settings.organizationSettings.domainVerification.reset" />
+            </Button>
+          )}
+          <Button variant="danger" size="sm" icon="trash" onClick={() => onDelete(domain)}>
+            <FormattedMessage id="settings.organizationSettings.domainVerification.delete" />
+          </Button>
         </FlexContainer>
       </FlexContainer>
     </div>

airbyte-webapp/src/pages/SettingsPage/components/DomainVerification/DomainVerificationList.tsx

@@ -11,12 +11,16 @@ interface DomainVerificationListProps {
   domains: DomainVerificationResponse[];
   isLoading: boolean;
   onViewDnsInfo: (domain: DomainVerificationResponse) => void;
+  onDelete: (domain: DomainVerificationResponse) => void;
+  onReset: (domain: DomainVerificationResponse) => void;
 }
 
 export const DomainVerificationList: React.FC<DomainVerificationListProps> = ({
   domains,
   isLoading,
   onViewDnsInfo,
+  onDelete,
+  onReset,
 }) => {
   if (isLoading) {
     return (
@@ -41,7 +45,13 @@ export const DomainVerificationList: React.FC<DomainVerificationListProps> = ({
   return (
     <FlexContainer direction="column" gap="md">
       {domains.map((domain) => (
-        <DomainVerificationItem key={domain.id} domain={domain} onViewDnsInfo={onViewDnsInfo} />
+        <DomainVerificationItem
+          key={domain.id}
+          domain={domain}
+          onViewDnsInfo={onViewDnsInfo}
+          onDelete={onDelete}
+          onReset={onReset}
+        />
       ))}
     </FlexContainer>
   );

airbyte-webapp/src/pages/SettingsPage/components/DomainVerification/DomainVerificationSection.tsx

@@ -7,21 +7,26 @@ import { Heading } from "components/ui/Heading";
 import { Text } from "components/ui/Text";
 
 import { useCurrentOrganizationId } from "area/organization/utils/useCurrentOrganizationId";
-import { useListDomainVerifications } from "core/api";
+import { useListDomainVerifications, useSSOConfigManagement } from "core/api";
 import { DomainVerificationResponse } from "core/api/types/AirbyteClient";
 import { useIntent } from "core/utils/rbac";
 
+import { DeleteDomainConfirmationModal } from "./DeleteDomainConfirmationModal";
 import styles from "./DomainVerification.module.scss";
 import { DomainVerificationList } from "./DomainVerificationList";
 import { DomainVerificationModal } from "./DomainVerificationModal";
+import { ResetDomainConfirmationModal } from "./ResetDomainConfirmationModal";
 
 export const DomainVerificationSection: React.FC = () => {
   const organizationId = useCurrentOrganizationId();
   const canUpdateOrganization = useIntent("UpdateOrganization", { organizationId });
   const { data, isLoading } = useListDomainVerifications();
+  const { ssoConfig } = useSSOConfigManagement();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedDomain, setSelectedDomain] = useState<DomainVerificationResponse | undefined>(undefined);
+  const [deleteModalDomain, setDeleteModalDomain] = useState<DomainVerificationResponse | undefined>(undefined);
+  const [resetModalDomain, setResetModalDomain] = useState<DomainVerificationResponse | undefined>(undefined);
 
   const domains = data?.domainVerifications || [];
 
@@ -40,6 +45,14 @@ export const DomainVerificationSection: React.FC = () => {
     setSelectedDomain(undefined);
   };
 
+  const handleDelete = (domain: DomainVerificationResponse) => {
+    setDeleteModalDomain(domain);
+  };
+
+  const handleReset = (domain: DomainVerificationResponse) => {
+    setResetModalDomain(domain);
+  };
+
   return (
     <div className={styles.section}>
       <FlexContainer direction="column" gap="lg">
@@ -64,9 +77,27 @@ export const DomainVerificationSection: React.FC = () => {
           <FormattedMessage id="settings.organizationSettings.domainVerification.description" />
         </Text>
 
-        <DomainVerificationList domains={domains} isLoading={isLoading} onViewDnsInfo={handleViewDnsInfo} />
+        <DomainVerificationList
+          domains={domains}
+          isLoading={isLoading}
+          onViewDnsInfo={handleViewDnsInfo}
+          onDelete={handleDelete}
+          onReset={handleReset}
+        />
 
         {isModalOpen && <DomainVerificationModal onClose={handleCloseModal} existingDomain={selectedDomain} />}
+
+        {deleteModalDomain && (
+          <DeleteDomainConfirmationModal
+            domain={deleteModalDomain}
+            ssoConfig={ssoConfig}
+            onClose={() => setDeleteModalDomain(undefined)}
+          />
+        )}
+
+        {resetModalDomain && (
+          <ResetDomainConfirmationModal domain={resetModalDomain} onClose={() => setResetModalDomain(undefined)} />
+        )}
       </FlexContainer>
     </div>
   );

airbyte-webapp/src/pages/SettingsPage/components/DomainVerification/ResetDomainConfirmationModal.tsx

@@ -0,0 +1,49 @@
+import { FormattedMessage } from "react-intl";
+
+import { ConfirmationModal } from "components/ConfirmationModal";
+
+import { useResetDomainVerification } from "core/api";
+import { DomainVerificationResponse } from "core/api/types/AirbyteClient";
+import { useNotificationService } from "hooks/services/Notification";
+
+interface ResetDomainConfirmationModalProps {
+  domain: DomainVerificationResponse;
+  onClose: () => void;
+}
+
+export const ResetDomainConfirmationModal: React.FC<ResetDomainConfirmationModalProps> = ({ domain, onClose }) => {
+  const { registerNotification } = useNotificationService();
+  const { mutateAsync: resetDomain } = useResetDomainVerification();
+
+  const handleReset = async () => {
+    try {
+      await resetDomain(domain.id);
+
+      registerNotification({
+        id: "domain-verification-reset",
+        text: <FormattedMessage id="settings.organizationSettings.domainVerification.resetSuccess" />,
+        type: "success",
+      });
+
+      onClose();
+    } catch (error) {
+      registerNotification({
+        id: "domain-verification-reset-error",
+        text: <FormattedMessage id="settings.organizationSettings.domainVerification.resetError" />,
+        type: "error",
+      });
+    }
+  };
+
+  return (
+    <ConfirmationModal
+      title="settings.organizationSettings.domainVerification.resetDomain"
+      text="settings.organizationSettings.domainVerification.resetConfirmation"
+      textValues={{ domain: domain.domain }}
+      onCancel={onClose}
+      onSubmit={handleReset}
+      submitButtonText="settings.organizationSettings.domainVerification.resetButton"
+      submitButtonVariant="primary"
+    />
+  );
+};