feat: Show alert to upgrade DB on queues integration (supabase#30925)

* List all integrations in the landing page.

* Add a configuration in the integration definitions to show an alert if all their dependencies can't be installed.

* Refactor the Integration Overview tab to show an integration specific alert if all its dependencies can't be met because of outdated image.

* Fix smol misspell.

* Update copy.

* Fix copy.

Author: ivasilov

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

@@ -6,7 +6,7 @@ import { Markdown } from 'components/interfaces/Markdown'
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { Badge, Separator } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
 import { INTEGRATIONS } from '../Landing/Integrations.constants'
 import { BuiltBySection } from './BuildBySection'
 import { MarkdownContent } from './MarkdownContent'
@@ -26,23 +26,26 @@ export const IntegrationOverviewTab = ({
 
   const integration = INTEGRATIONS.find((i) => i.id === id)
 
-  const dependsOnExtension = (integration?.requiredExtensions ?? []).length > 0
-
   const { data: extensions } = useDatabaseExtensionsQuery({
     projectRef: project?.ref,
     connectionString: project?.connectionString,
   })
 
-  const neededExtensions = (extensions ?? []).filter((ext) =>
-    (integration?.requiredExtensions ?? []).includes(ext.name)
-  )
-
-  const hasMissingExtensions = neededExtensions.some((x) => !x.installed_version)
-
   if (!integration) {
     return <div>Unsupported integration type</div>
   }
 
+  const dependsOnExtension = (integration.requiredExtensions ?? []).length > 0
+
+  const installableExtensions = (extensions ?? []).filter((ext) =>
+    (integration.requiredExtensions ?? []).includes(ext.name)
+  )
+  const hasToInstallExtensions = installableExtensions.some((x) => !x.installed_version)
+
+  // The integration requires extensions that are not available to install on the current database image
+  const hasMissingExtensions =
+    installableExtensions.length !== integration.requiredExtensions.length
+
   return (
     <div className="flex flex-col gap-8 py-10">
       <BuiltBySection integration={integration} />
@@ -65,19 +68,23 @@ export const IntegrationOverviewTab = ({
               className="max-w-full"
               content={`This integration uses the ${integration.requiredExtensions.map((x) => `\`${x}\``).join(', ')}
               extension${integration.requiredExtensions.length > 1 ? 's' : ''} directly in your Postgres database.
-              ${hasMissingExtensions ? `Install ${integration.requiredExtensions.length > 1 ? 'these' : 'this'} database extension${integration.requiredExtensions.length > 1 ? 's' : ''} to use ${integration.name} in your project.` : ''}
+              ${hasToInstallExtensions && !hasMissingExtensions ? `Install ${integration.requiredExtensions.length > 1 ? 'these' : 'this'} database extension${integration.requiredExtensions.length > 1 ? 's' : ''} to use ${integration.name} in your project.` : ''}
               `}
             />
 
-            <div className="flex flex-row gap-x-2">
-              {neededExtensions.map((extension) => (
-                <MissingExtensionAlert key={extension.name} extension={extension} />
-              ))}
-            </div>
+            {hasMissingExtensions ? (
+              integration.missingExtensionsAlert
+            ) : (
+              <div className="flex flex-row gap-x-2">
+                {installableExtensions.map((extension) => (
+                  <MissingExtensionAlert key={extension.name} extension={extension} />
+                ))}
+              </div>
+            )}
           </Admonition>
         </div>
       )}
-      {!!actions && !hasMissingExtensions && <div className="px-10 max-w-4xl">{actions}</div>}
+      {!!actions && !hasToInstallExtensions && <div className="px-10 max-w-4xl">{actions}</div>}
       <MarkdownContent key={integration.id} integrationId={integration.id} />
       <Separator />
       {children}

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

@@ -6,6 +6,7 @@ import { ComponentType, ReactNode } from 'react'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { BASE_PATH } from 'lib/constants'
 import { cn } from 'ui'
+import { UpgradeDatabaseAlert } from '../Queues/UpgradeDatabaseAlert'
 import { WRAPPERS } from '../Wrappers/Wrappers.constants'
 import { WrapperMeta } from '../Wrappers/Wrappers.types'
 
@@ -35,6 +36,8 @@ export type IntegrationDefinition = {
     websiteUrl: string
   }
   requiredExtensions: string[]
+  /** Optional component to render if the integration requires extensions that are not available on the current database image */
+  missingExtensionsAlert?: ReactNode
   navigation?: Navigation[]
   navigate: (
     id: string,
@@ -53,6 +56,7 @@ const supabaseIntegrations: IntegrationDefinition[] = [
     id: 'queues',
     type: 'postgres_extension' as const,
     requiredExtensions: ['pgmq'],
+    missingExtensionsAlert: <UpgradeDatabaseAlert />,
     name: `Queues`,
     icon: ({ className, ...props } = {}) => (
       <Layers className={cn('inset-0 p-2 text-black w-full h-full', className)} {...props} />

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

@@ -65,26 +65,12 @@ export const useInstalledIntegrations = () => {
     }).sort((a, b) => a.name.localeCompare(b.name))
   }, [wrappers, extensions, isHooksEnabled])
 
-  // available integrations are all integrations that can be installed. If an extension is on available to be installed
-  // on the project, that integration is hidden.
-  const availableIntegrations = useMemo(() => {
-    return INTEGRATIONS.filter((i) => {
-      // special handling for supabase webhooks
-      if (i.id === 'webhooks') {
-        return true
-      }
-      if (i.type === 'wrapper') {
-        return true
-      }
-      if (i.type === 'postgres_extension') {
-        return i.requiredExtensions.every((extName) => {
-          const foundExtension = (extensions ?? []).find((ext) => ext.name === extName)
-          return !!foundExtension
-        })
-      }
-      return false
-    }).sort((a, b) => a.name.localeCompare(b.name))
-  }, [extensions])
+  // available integrations are all integrations that can be installed. If an integration can't be installed (needed
+  // extensions are not available on this DB image), the UI will provide a tooltip explaining why.
+  const availableIntegrations = useMemo(
+    () => INTEGRATIONS.sort((a, b) => a.name.localeCompare(b.name)),
+    []
+  )
 
   const error = fdwError || extensionsError || schemasError
   const isLoading = isSchemasLoading || isFDWLoading || isExtensionsLoading

apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx

@@ -1,10 +1,10 @@
-import { useSelectedProject } from 'hooks/misc/useSelectedProject'
-import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
+import { useParams } from 'common'
 import { useQueuesExposePostgrestStatusQuery } from 'data/database-queues/database-queues-expose-postgrest-status-query'
-import { Admonition } from 'ui-patterns'
-import { Button } from 'ui'
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import Link from 'next/link'
-import { useParams } from 'common'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns'
+import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
 
 export const QueuesOverviewTab = () => {
   const { ref } = useParams()
@@ -24,12 +24,12 @@ export const QueuesOverviewTab = () => {
             title="Queues can be managed via any Supabase client library or PostgREST endpoints"
           >
             <p>
-              You may choose to toggle the exposure of Queues through PostgREST via the queues
+              You may choose to toggle the exposure of Queues through Data APIs via the queues
               settings
             </p>
             <Button asChild type="default">
               <Link href={`/project/${ref}/integrations/queues/settings`}>
-                Head to queues settings
+                Manage queues settings
               </Link>
             </Button>
           </Admonition>

apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx

@@ -12,11 +12,15 @@ import {
   FormPanelContent,
   FormPanelFooter,
 } from 'components/ui/Forms/FormPanel'
+import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { useProjectPostgrestConfigUpdateMutation } from 'data/config/project-postgrest-config-update-mutation'
 import { useQueuesExposePostgrestStatusQuery } from 'data/database-queues/database-queues-expose-postgrest-status-query'
 import {
   QUEUES_SCHEMA,
   useDatabaseQueueToggleExposeMutation,
 } from 'data/database-queues/database-queues-toggle-postgrest-mutation'
+import { useTableUpdateMutation } from 'data/tables/table-update-mutation'
+import { useTablesQuery } from 'data/tables/tables-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import {
@@ -28,12 +32,8 @@ import {
   Switch,
 } from 'ui'
 import { Admonition } from 'ui-patterns'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { useProjectPostgrestConfigUpdateMutation } from 'data/config/project-postgrest-config-update-mutation'
-import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
-import { useTablesQuery } from 'data/tables/tables-query'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import { useTableUpdateMutation } from 'data/tables/table-update-mutation'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 // [Joshen] Not convinced with the UI and layout but getting the functionality out first
 
@@ -179,7 +179,7 @@ export const QueuesSettings = () => {
         <FormHeader
           className="mb-0"
           title="Settings"
-          description="Manage your queues via any client library or PostgREST endpoints"
+          description="Manage your queues via any client library or Data APIs endpoints"
         />
         <Form_Shadcn_ {...form}>
           <form id="pgmq-postgrest" onSubmit={form.handleSubmit(onSubmit)}>

apps/studio/components/interfaces/Integrations/Queues/UpgradeDatabaseAlert.tsx

@@ -0,0 +1,28 @@
+import Link from 'next/link'
+
+import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+export const UpgradeDatabaseAlert = () => {
+  const project = useSelectedProject()
+
+  return (
+    <Admonition
+      type="warning"
+      className="mt-4"
+      title="Database Upgrade Needed"
+      childProps={{ description: { className: 'flex flex-col gap-y-2' } }}
+    >
+      <div className="prose text-sm max-w-full">
+        <p>
+          This integration requires the <code>pgmq</code> extension which is not available on this
+          version of Postgres. The extension is available on version 15.6.1.143 and higher.
+        </p>
+      </div>
+      <Button color="primary" className="w-fit">
+        <Link href={`/project/${project?.ref}/settings/infrastructure`}>Upgrade database</Link>
+      </Button>
+    </Admonition>
+  )
+}