mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 12:55:06 +03:00
Joshen LimandKaterina Skroumpelou
9949b75011
## Context Initial ground work for Marketplace Integrations (feature flagged under the flag `marketplaceIntegrations`), in which some integrations will be fetched over a network request (than hard-coded within the repo). Feature flag just controls whether to we need to fetch them. Similarly, categories under "Explore" will also be fetched, and the flag just decides whether that should be enabled. We're also planning to update the overview tab for integrations as well, in which integrations fetched over the network request will use the new UI (altho not functional just yet) ## To test Note that the LOC changes are seemingly large, but that's just because I've added in a types file for the Supabase project that we're using to store the integrations data - [x] Verify that behaviour is status quo with the flag off (Priority) - [x] Verify that behaviour is status quo on CLI / self-host env - [x] Verify that with the flag on you'll see one of the new integrations fetched over network (Grafana), including an additional category "Observability" (and clicking into it will show the new UI) - [x] Verify that all other existing integrations are status quo --------- Co-authored-by: Katerina Skroumpelou <sk.katherine@gmail.com>
98 lines
3.1 KiB
TypeScript
98 lines
3.1 KiB
TypeScript
import { useParams } from 'common'
|
|
import { Markdown } from 'components/interfaces/Markdown'
|
|
import { cn } from 'ui'
|
|
|
|
import { useAvailableIntegrations } from '../../Landing/useAvailableIntegrations'
|
|
import { FilesViewer } from './FilesViewer'
|
|
import { InlineLinkClassName } from '@/components/ui/InlineLink'
|
|
|
|
const getSiteUrlLabel = (url: string | undefined | null) => {
|
|
if (!url) return undefined
|
|
|
|
try {
|
|
return new URL(url).origin
|
|
} catch (error) {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
const isGithubHost = (url: string | undefined | null) => {
|
|
if (!url) return false
|
|
try {
|
|
const hostname = new URL(url).hostname.toLowerCase()
|
|
return hostname === 'github.com' || hostname.endsWith('.github.com')
|
|
} catch (error) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
/**
|
|
* [Joshen] This will serve as the overview tab for remotely fetched integrations
|
|
*/
|
|
export const IntegrationOverviewTabV2 = () => {
|
|
const { id } = useParams()
|
|
|
|
const { data: allIntegrations } = useAvailableIntegrations()
|
|
const integration = allIntegrations.find((i) => i.id === id)
|
|
|
|
if (!integration) {
|
|
return <div>Unsupported integration type</div>
|
|
}
|
|
|
|
const { type, content, docsUrl, siteUrl, files = [] } = integration
|
|
|
|
const docsUrlLabel = docsUrl?.includes('supabase.com/docs')
|
|
? 'Supabase Docs'
|
|
: isGithubHost(docsUrl)
|
|
? 'GitHub Docs'
|
|
: 'Documentation'
|
|
const siteUrlLabel = getSiteUrlLabel(siteUrl)
|
|
|
|
return (
|
|
<div className="grid grid-cols-3 gap-x-8 px-10 py-8">
|
|
<div className="col-span-2 flex flex-col gap-y-8">
|
|
{files.length > 0 && <FilesViewer files={files} />}
|
|
<Markdown className="flex flex-col gap-y-4 text-foreground-light">{content}</Markdown>
|
|
</div>
|
|
|
|
<div className="text-sm col-span-1 flex flex-col gap-y-8">
|
|
<div className="flex flex-col gap-y-4">
|
|
<p>Details</p>
|
|
|
|
<div className="flex flex-col gap-y-1">
|
|
<p className="font-mono uppercase text-foreground-light">Type</p>
|
|
<p className="capitalize">{type === 'oauth' ? 'OAuth' : type}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-y-1">
|
|
<p className="font-mono uppercase text-foreground-light">Built by</p>
|
|
<p className={cn(!integration.author.name && 'text-foreground-lighter')}>
|
|
{integration.author.name || 'Unknown Author'}
|
|
</p>
|
|
</div>
|
|
|
|
{docsUrl && (
|
|
<div className="flex flex-col gap-y-1">
|
|
<p className="font-mono uppercase text-foreground-light">Docs</p>
|
|
<a target="_blank" rel="noreferrer" href={docsUrl} className={InlineLinkClassName}>
|
|
{docsUrlLabel}
|
|
</a>
|
|
</div>
|
|
)}
|
|
|
|
{siteUrl && (
|
|
<div className="flex flex-col gap-y-1">
|
|
<p className="font-mono uppercase text-foreground-light">Website</p>
|
|
<a target="_blank" rel="noreferrer" href={siteUrl} className={InlineLinkClassName}>
|
|
{siteUrlLabel}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Subsequent sections here */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|