feat: new marketplace db (#44574)

This PR integrates with the new marketplace db to allow Grafana (and
other partners) OAuth apps to install from the integrations page. A demo
of this working locally is available here:
https://supabase.slack.com/archives/C01GN60J0BS/p1775551752479709. End
to end flow is documented here:
https://www.notion.so/supabase/Grafana-Integration-Flow-33a5004b775f80eeaf91c098beb8071f.

TODO:

- [ ] Make sure `NEXT_PUBLIC_MARKETPLACE_API_URL` variable is set to the
new marketplace db.
- [x] Test with the `marketplaceIntegrations` enabled and disabled in
staging once https://github.com/supabase/platform/pull/31298 is merged
and available in staging.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Add OAuth "Install integration" button that detects installed
integrations and supports GET/POST install flows
* Marketplace listings now include install links, installation method,
partner info, and listing assets/logos

* **Infrastructure**
* Allow marketplace API origin for images and content in security and
image config
* Centralize marketplace types and switch marketplace data source for
more reliable listings
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/FilesViewer.tsx

@@ -1,28 +1,43 @@
 import { useState } from 'react'
-import { cn } from 'ui'
+import { cn, Dialog, DialogContent } from 'ui'
 
 export const FilesViewer = ({ files }: { files: string[] }) => {
   const [selected, setSelected] = useState(files[0])
+  const [showDialog, setShowDialog] = useState(false)
 
   return (
-    <div className="flex flex-col gap-y-4">
-      <img alt={selected} src={selected} className="rounded-md border" />
-      {files.length > 1 && (
-        <div className="grid grid-cols-10 gap-x-2">
-          {files.map((x) => (
-            <button key={x} onClick={() => setSelected(x)}>
-              <img
-                alt={x}
-                src={x}
-                className={cn(
-                  'col-span-1 bg-surface-100 rounded-md object-cover aspect-square border transition',
-                  selected === x ? 'border-stronger' : 'border-secondary'
-                )}
-              />
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+    <>
+      <div className="flex flex-col gap-y-4">
+        <button onClick={() => setShowDialog(true)}>
+          <img
+            alt={selected}
+            src={selected}
+            className="rounded-md border object-cover aspect-video"
+          />
+        </button>
+
+        {files.length > 1 && (
+          <div className="grid grid-cols-10 gap-x-2">
+            {files.map((x) => (
+              <button key={x} onClick={() => setSelected(x)}>
+                <img
+                  alt={x}
+                  src={x}
+                  className={cn(
+                    'col-span-1 bg-surface-100 rounded-md object-cover aspect-square border transition',
+                    selected === x ? 'border-button-hover' : 'border-secondary'
+                  )}
+                />
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+      <Dialog open={showDialog} onOpenChange={setShowDialog}>
+        <DialogContent size="xxlarge">
+          <img alt={selected} src={selected} className="rounded-md border" />
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }

apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton.tsx

@@ -0,0 +1,81 @@
+import { useParams } from 'common'
+import { useMemo } from 'react'
+import { toast } from 'sonner'
+import { Button } from 'ui'
+
+import type { IntegrationDefinition } from '@/components/interfaces/Integrations/Landing/Integrations.constants'
+import { useAPIKeysQuery } from '@/data/api-keys/api-keys-query'
+import { useInstallOAuthIntegrationMutation } from '@/data/marketplace/install-oauth-integration-mutation'
+
+interface InstallOAuthIntegrationButtonProps {
+  integration: IntegrationDefinition
+}
+
+export function InstallOAuthIntegrationButton({ integration }: InstallOAuthIntegrationButtonProps) {
+  const { ref: projectRef } = useParams()
+
+  const { data: apiKeys, isLoading: isApiKeysLoading } = useAPIKeysQuery(
+    { projectRef, reveal: false },
+    { enabled: !!projectRef }
+  )
+
+  const { mutate: installOAuthIntegration, isPending: isInstalling } =
+    useInstallOAuthIntegrationMutation({
+      onSuccess: (data) => {
+        if ('redirectUrl' in data) {
+          if (!data.redirectUrl) {
+            toast.error('Failed to redirect because redirect URL is invalid')
+            return
+          }
+          window.location.href = data.redirectUrl
+        } else {
+          toast.error('Failed to start integration installation')
+        }
+      },
+    })
+
+  const isLoading =
+    integration.installIdentificationMethod === 'secret_key_prefix' && isApiKeysLoading
+
+  const isIntegrationInstalled = useMemo(() => {
+    if (!integration) return false
+
+    const prefix = integration.secretKeyPrefix
+
+    if (integration.installIdentificationMethod !== 'secret_key_prefix' || !prefix) return false
+    if (isApiKeysLoading || !apiKeys) return false
+
+    return apiKeys.some((k) => k.type === 'secret' && k.name.startsWith(prefix))
+  }, [apiKeys, integration, isApiKeysLoading])
+
+  const handleInstallClick = async () => {
+    if (!integration || !projectRef) return
+
+    if (integration.installUrlType === 'post') {
+      if (!integration.listingId) return toast.error('Listing ID is required')
+      installOAuthIntegration({ projectRef, id: integration.listingId })
+    } else {
+      window.location.href = integration.installUrl ?? '/'
+    }
+  }
+
+  return (
+    <>
+      {isIntegrationInstalled ? (
+        <Button disabled type="outline" className="shrink-0">
+          Installed
+        </Button>
+      ) : (
+        <Button
+          type="primary"
+          className="shrink-0"
+          loading={isInstalling || isLoading}
+          disabled={isLoading}
+          onClick={handleInstallClick}
+        >
+          Install integration
+        </Button>
+      )}
+    </>
+  )
+}