Merge pull request #13928 from supabase/chore/custom-domains-handle-validation-timed-out-state

Custom domains handle validation timed out state

studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx

@@ -5,7 +5,10 @@ import { IconAlertCircle } from 'ui'
 import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
 import { useProjectApiQuery } from 'data/config/project-api-query'
-import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
+import {
+  CustomDomainResponse,
+  useCustomDomainsQuery,
+} from 'data/custom-domains/custom-domains-query'
 import Panel from 'components/ui/Panel'
 import { FormHeader } from 'components/ui/Forms'
 import UpgradeToPro from 'components/ui/UpgradeToPro'
@@ -75,7 +78,9 @@ const CustomDomainConfig = () => {
         <Panel>
           {isSuccess && (
             <div className="flex flex-col">
-              {(data.status === '2_initiated' || data.status === '3_challenge_verified') && (
+              {(data.status === '1_not_started' ||
+                data.status === '2_initiated' ||
+                data.status === '3_challenge_verified') && (
                 <CustomDomainVerify
                   projectRef={ref}
                   customDomain={data.customDomain}

studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx

@@ -126,58 +126,65 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
           </Alert>
         )}
 
-        <div className="space-y-2">
-          <div className="flex gap-4">
-            <div className="w-[50px]">
-              <p className="text-scale-1100 text-sm">Type</p>
-            </div>
-            <div className="text-sm grid gap-2 md:grid md:grid-cols-12 md:gap-x-4 input-mono flex-1">
-              <div className="flex flex-row space-x-2 justify-between col-span-12">
-                <label className="block text-scale-1100 text-sm break-all">Name</label>
+        {customDomain.ssl.status === 'validation_timed_out' ? (
+          <Alert withIcon variant="warning" title="Validation timed out">
+            Please click "Verify" again to retry the validation of the records
+          </Alert>
+        ) : (
+          <div className="space-y-2">
+            <div className="flex gap-4">
+              <div className="w-[50px]">
+                <p className="text-scale-1100 text-sm">Type</p>
+              </div>
+              <div className="text-sm grid gap-2 md:grid md:grid-cols-12 md:gap-x-4 input-mono flex-1">
+                <div className="flex flex-row space-x-2 justify-between col-span-12">
+                  <label className="block text-scale-1100 text-sm break-all">Name</label>
+                </div>
+              </div>
+              <div className="text-sm grid gap-2 md:grid md:grid-cols-12 md:gap-x-4 input-mono flex-1">
+                <div className="flex flex-row space-x-2 justify-between col-span-12">
+                  <label className="block text-scale-1100 text-sm break-all">Content</label>
+                </div>
               </div>
             </div>
-            <div className="text-sm grid gap-2 md:grid md:grid-cols-12 md:gap-x-4 input-mono flex-1">
-              <div className="flex flex-row space-x-2 justify-between col-span-12">
-                <label className="block text-scale-1100 text-sm break-all">Content</label>
+
+            {customDomain.verification_errors?.includes(
+              'custom hostname does not CNAME to this zone.'
+            ) && (
+              <DNSRecord
+                type="CNAME"
+                name={customDomain.hostname}
+                value={settings?.autoApiService.endpoint ?? 'Loading...'}
+              />
+            )}
+
+            {customDomain.ownership_verification && (
+              <DNSRecord
+                type={customDomain.ownership_verification.type}
+                name={customDomain.ownership_verification.name}
+                value={customDomain.ownership_verification.value}
+              />
+            )}
+
+            {customDomain.ssl.status === 'pending_validation' && (
+              <DNSRecord
+                type="TXT"
+                name={customDomain.ssl.txt_name ?? 'Loading...'}
+                value={customDomain.ssl.txt_value ?? 'Loading...'}
+              />
+            )}
+
+            {customDomain.ssl.status === 'pending_deployment' && (
+              <div className="flex items-center justify-center space-x-2 py-8">
+                <IconAlertCircle size={16} strokeWidth={1.5} />
+                <p className="text-sm text-scale-1100">
+                  SSL certificate is being deployed. Please wait a few minutes and try again.
+                </p>
               </div>
-            </div>
+            )}
           </div>
+        )}
 
-          {customDomain.verification_errors?.includes(
-            'custom hostname does not CNAME to this zone.'
-          ) && (
-            <DNSRecord
-              type="CNAME"
-              name={customDomain.hostname}
-              value={settings?.autoApiService.endpoint ?? 'Loading...'}
-            />
-          )}
-
-          {customDomain.ownership_verification && (
-            <DNSRecord
-              type={customDomain.ownership_verification.type}
-              name={customDomain.ownership_verification.name}
-              value={customDomain.ownership_verification.value}
-            />
-          )}
-
-          {customDomain.ssl.status === 'pending_validation' && (
-            <DNSRecord
-              type="TXT"
-              name={customDomain.ssl.txt_name ?? 'Loading...'}
-              value={customDomain.ssl.txt_value ?? 'Loading...'}
-            />
-          )}
-
-          {customDomain.ssl.status === 'pending_deployment' && (
-            <div className="flex items-center justify-center space-x-2 py-8">
-              <IconAlertCircle size={16} strokeWidth={1.5} />
-              <p className="text-sm text-scale-1100">
-                SSL certificate is being deployed. Please wait a few minutes and try again.
-              </p>
-            </div>
-          )}
-        </div>
         <div className="!mt-4">
           <p className="text-sm text-scale-1000">
             One of the records requires you to replace the CNAME record set up in the first step

studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx

@@ -57,6 +57,7 @@ const CustomDomainsConfigureHostname = () => {
       })
     } catch (error: any) {
       ui.setNotification({
+        error,
         category: 'error',
         message: error.message,
       })

studio/data/custom-domains/custom-domains-query.ts

@@ -27,7 +27,7 @@ type Ssl = {
   id: string
   type: string
   method: string
-  status: string
+  status: 'pending_validation' | 'pending_deployment' | 'validation_timed_out'
   txt_name?: string
   txt_value?: string
   settings: Settings