Add error state for ssl enforcement

studio/components/interfaces/Settings/Database/SSLConfiguration.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import { useParams, useStore } from 'hooks'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconDownload, Toggle, IconExternalLink, IconLoader } from 'ui'
+import { Button, IconDownload, Toggle, IconExternalLink, IconLoader, Alert } from 'ui'
 import {
   FormHeader,
   FormPanel,
@@ -25,6 +25,7 @@ const SSLConfiguration = () => {
   })
   const { mutateAsync: updateSSLEnforcement } = useSSLEnforcementUpdateMutation()
 
+  const hasAccessToSSLEnforcement = !sslEnforcementConfiguration?.isNotAllowed
   const env = process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod' ? 'prod' : 'staging'
   const hasSSLCertificate =
     projectSettings?.project !== undefined &&
@@ -39,8 +40,6 @@ const SSLConfiguration = () => {
     }
   }, [isLoading])
 
-  // [Joshen] What is applied successfully = false?
-
   const toggleSSLEnforcement = async () => {
     if (!ref) return console.error('Project ref is required')
 
@@ -63,6 +62,8 @@ const SSLConfiguration = () => {
     }
   }
 
+  if (!hasAccessToSSLEnforcement) return <></>
+
   return (
     <div>
       <div className="flex items-center justify-between">
@@ -81,17 +82,35 @@ const SSLConfiguration = () => {
         <FormSection
           header={
             <FormSectionLabel
+              className="lg:col-span-7"
               description={
-                <p className="text-sm text-scale-1000">
-                  Reject connections made to your database without a valid certificate
-                </p>
+                <div className="space-y-4">
+                  <p className="text-sm text-scale-1000">
+                    Reject connections made to your database without a valid certificate
+                  </p>
+                  {!sslEnforcementConfiguration?.appliedSuccessfully && (
+                    <Alert
+                      withIcon
+                      variant="warning"
+                      title="SSL enforcement was not updated successfully"
+                    >
+                      Please try updating again, or contact{' '}
+                      <Link href="/support/new">
+                        <a target="_blank" className="underline">
+                          support
+                        </a>
+                      </Link>{' '}
+                      if this error persists
+                    </Alert>
+                  )}
+                </div>
               }
             >
               Enforce SSL
             </FormSectionLabel>
           }
         >
-          <FormSectionContent loading={false}>
+          <FormSectionContent loading={false} className="lg:!col-span-5">
             <div className="flex items-center justify-end h-full space-x-2">
               {isSubmitting && <IconLoader className="animate-spin" strokeWidth={1.5} size={16} />}
               <Toggle