[pull] master from supabase:master

apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTab.tsx

@@ -49,9 +49,13 @@ export const IntegrationOverviewTab = ({
   return (
     <div className="flex flex-col gap-8 py-10">
       <BuiltBySection integration={integration} status={status} />
-      {alert && <div className="px-10 max-w-4xl">{alert}</div>}
+
+      {!!alert && <div className="px-10 max-w-4xl">{alert}</div>}
+
       <MarkdownContent key={integration.id} integrationId={integration.id} />
+
       <Separator />
+
       {dependsOnExtension && (
         <div className="px-4 md:px-10 max-w-4xl flex flex-col gap-y-4">
           <h4>Required extensions</h4>
@@ -66,16 +70,12 @@ export const IntegrationOverviewTab = ({
                   return (
                     <li
                       key={requiredExtension}
-                      className={[
+                      className={cn(
                         'flex items-center justify-between gap-3 py-2 px-3',
-                        !isLastRow ? 'border-b' : '',
-                      ].join(' ')}
+                        !isLastRow ? 'border-b' : ''
+                      )}
                     >
-                      <div className="flex items-center gap-2 min-w-0">
-                        <span className="truncate">
-                          <code>{requiredExtension}</code>
-                        </span>
-                      </div>
+                      <code className="text-xs">{requiredExtension}</code>
 
                       <div className="shrink-0">
                         {extension ? (
@@ -100,6 +100,7 @@ export const IntegrationOverviewTab = ({
           </Card>
         </div>
       )}
+
       {!!actions && (
         <div
           aria-disabled={hasToInstallExtensions}

apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx

@@ -13,7 +13,7 @@ import { INTEGRATIONS } from './Integrations.constants'
 import {
   isInstalled as checkIsInstalled,
   findStripeSchema,
-  parseStripeSchemaStatus,
+  parseStripeSchema,
 } from '@/components/interfaces/Integrations/templates/StripeSyncEngine/stripe-sync-status'
 
 export const useInstalledIntegrations = () => {
@@ -86,8 +86,8 @@ export const useInstalledIntegrations = () => {
         }
         if (integration.id === 'stripe_sync_engine') {
           const stripeSchema = findStripeSchema(schemas)
-          const status = parseStripeSchemaStatus(stripeSchema)
-          return checkIsInstalled(status)
+          const parsedSchema = parseStripeSchema(stripeSchema)
+          return checkIsInstalled(parsedSchema.status)
         }
         if (integration.type === 'wrapper') {
           return wrappers.find((w) => wrapperMetaComparator(integration.meta, w))

apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx

@@ -0,0 +1,60 @@
+import { useParams } from 'common'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
+
+import { ContactSupportButton } from '@/components/ui/AlertError'
+
+export const InstallationError = ({
+  error,
+  handleUninstall,
+  handleOpenInstallSheet,
+}: {
+  error: 'install' | 'uninstall'
+  handleUninstall: () => void
+  handleOpenInstallSheet: () => void
+}) => {
+  const { ref } = useParams()
+
+  if (error === 'uninstall') {
+    return (
+      <Admonition
+        type="warning"
+        layout="responsive"
+        title="Failed to uninstall Stripe Sync Engine"
+        description="There was an error during the uninstallation of the Stripe Sync Engine, please try again. If the problem persists, contact support."
+        actions={
+          <div className="flex items-center gap-x-2">
+            <Button type="default" onClick={handleUninstall}>
+              Retry uninstall
+            </Button>
+            <ContactSupportButton
+              projectRef={ref}
+              subject="Failed to uninstall Stripe Sync Engine"
+            />
+          </div>
+        }
+      />
+    )
+  }
+
+  if (error === 'install') {
+    return (
+      <Admonition
+        type="warning"
+        layout="responsive"
+        title="Failed to install Stripe Sync Engine"
+        description="There was an error during the installation of the Stripe Sync Engine, please try reinstalling the integration. If the problem persists, contact support."
+        actions={
+          <div className="flex items-center gap-x-2">
+            <Button type="default" onClick={handleOpenInstallSheet}>
+              Retry install
+            </Button>
+            <ContactSupportButton projectRef={ref} subject="Failed to install Stripe Sync Engine" />
+          </div>
+        }
+      />
+    )
+  }
+
+  return null
+}