mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
590ed362ab
* Initial commit. * Minor type fixes. * Add a integration for Queues. Refactor some of the integration layout. * Migrate the Cron integration to the new style. * Add useInstalledIntegrations hook. * Add an integration entry for vault. * Add an integration entry for GraphiQL. * Add supabase webhooks. * Feat/integrations get layout (#30538) * scroll based icon * Update header.tsx * remove dep from overview * moar * more table stuff * moar * alt nav put in * fix MotionNumber issues * more * trying both layouts * Fix bunch of type errors. --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> * Migrate Vercel and Github files to their own folders. * Switch all integrations with the new designs. * More fixes for links, pages structure and other random stuff. * Remove unneeded file. * Another set of fixes. Migrated most of the extension integrations. * Migrated Vault and webhooks to the new style. * Various fixes to make the animation work. * Remove extra code. * Tiny fixes 😬 i swear its tiny * Refactor IntegrationOverviewTab * chore/ update integrations routes (#30585) * init * add child support in tabs * add webhooks * Update IntegrationPageHandler.tsx * fix id issues * use messageId instead * animation tweaks * Move the description to the wrappers array. * The useInstalledIntegrations now provides integrations which could be installed. * Add static content for the various integrations. * Move the page handler logic into the integrations definitions. * Clean up some extra code. * Add logic to make the overview tab the default tab. * Don't show the header until the integration id has been checked. * Add logic to the integration pages to avoid weird loading bugs, deselecting tabs if the integration hasn't been installed etc. * Fix the webhooks overview tab. * Fix the buttons for enabling extensions. * Add padding to all custom tab contents. * Small fixes * Prettier lint * Fix icon color + add empty state for when available integrations are all installed * Fix ts errors * Fiox * Add enable webhooks cta * Fix key * Fix all lints * Fix the queues create sheet. * Fix the deletion of wrappers. * Fix the minimum version alert for the wrappers extension. * Make the queues table fit the whole container. * Fix an issue which reset the tab when installing an extension. * Address comments * Add loading state for installed integrations in side nav * Fix edit secret not rendering value in input field after subsequent openings * Fix vault keys auto filling search input with vault * Fix search input placeholder for cron * Minor fix in install database extension copy * Fix a bad redirect when reloading. * Fix bad url redirects. * Fix scrolling in create new/edit wrapper sheet. * Add y padding to the wrappers rows. * Fix merge errors. * More merge fixes. * Fix bad imports during the merge. --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import Link from 'next/link'
|
|
|
|
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
|
import { Badge, cn } from 'ui'
|
|
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
|
|
import { IntegrationDefinition } from './Integrations.constants'
|
|
|
|
type IntegrationCardProps = IntegrationDefinition & {}
|
|
|
|
const INTEGRATION_CARD_STYLE = cn(
|
|
'w-full h-full pl-5 pr-6 py-3 bg-surface-100 hover:bg-surface-200 hover:border-strong',
|
|
'border border-border gap-3 rounded-md inline-flex ease-out duration-200 transition-all'
|
|
)
|
|
|
|
export const IntegrationLoadingCard = () => {
|
|
return (
|
|
<div className={cn(INTEGRATION_CARD_STYLE, 'h-[110px]')}>
|
|
<div className="w-10 h-10 relative">
|
|
<ShimmeringLoader className="w-full h-full bg-white border rounded-md" />
|
|
</div>
|
|
<div className="grow basis-0 w-full flex flex-col justify-between items-start gap-y-2">
|
|
<div className="flex-col justify-start items-start gap-y-1 flex">
|
|
<ShimmeringLoader className="w-20 py-2.5" />
|
|
<ShimmeringLoader className="w-56 py-2.5" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export const IntegrationCard = ({ id, beta, name, icon, description }: IntegrationCardProps) => {
|
|
const { project } = useProjectContext()
|
|
|
|
return (
|
|
<Link href={`/project/${project?.ref}/integrations/${id}/overview`}>
|
|
<div className={INTEGRATION_CARD_STYLE}>
|
|
<div className="w-10 h-10 relative bg-white border rounded-md flex items-center justify-center">
|
|
{icon()}
|
|
</div>
|
|
<div className="grow basis-0 w-full flex flex-col justify-between items-start gap-y-2">
|
|
<div className="flex-col justify-start items-start gap-y-0.5 flex">
|
|
<div className="flex items-center gap-x-2">
|
|
<p className="text-foreground text-sm">{name}</p>
|
|
{beta && (
|
|
<Badge variant="warning" className="py-0 px-1.5">
|
|
Beta
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className="text-foreground-light text-xs">{description}</p>
|
|
</div>
|
|
<Badge className="bg-opacity-100 bg-surface-300 flex items-center gap-x-1.5">
|
|
<span>Official</span>
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|