IntegrationCard() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/IntegrationCard.tsx lines 177–226

export const IntegrationCard = ({
  integration,
  canUpdateConfig,
  onDelete,
}: IntegrationCardProps) => {
  let type = getIntegrationType(integration)

  if (type === 'custom') {
    return null
  }

  return (
    <>
      <div className="bg-surface-100 border overflow-hidden shadow px-5 py-4 flex flex-row first:rounded-t-md last:rounded-b-md space-x-4">
        <div className="py-1">
          <Image src={getIntegrationTypeIcon(type)} width={21} height={21} alt={`${type} icon`} />
        </div>
        <div className="flex flex-col flex-0 overflow-y-auto w-full gap-y-4">
          <div className="text-sm flex flex-col">
            <span className="text-foreground">{getIntegrationTypeLabel(type)}</span>
            <div className="text-foreground-lighter">{getIntegrationTypeDescription(type)}</div>
          </div>

          <IntegrationTypeContent type={type} integration={integration} />
          <div>
            {/* TODO: this should be a configure integration where it would show the sheet and the user can disable or delete the integration
              but there's no "edit integration" endpoing for now. */}
            <Button type="danger" disabled={!canUpdateConfig} onClick={() => onDelete()}>
              Delete integration
            </Button>
          </div>
        </div>
        <div className="flex-1">
          {true ? (
            <Badge className="space-x-1" variant="success">
              <div className="h-3.5 w-3.5 bg-brand rounded-full flex justify-center items-center">
                <Check className="h-2 w-2 text-background-overlay" strokeWidth={6} />
              </div>
              <span>Enabled</span>
            </Badge>
          ) : (
            <Badge variant="warning">
              <span>Disabled</span>
            </Badge>
          )}
        </div>
      </div>
    </>
  )
}