IntegrationConnection() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx lines 148–233

  (
    { connection, type, actions, showNode = true, orientation = 'horizontal', className, ...props },
    ref
  ) => {
    const { data: project } = useProjectDetailQuery({ ref: connection.supabase_project_ref })

    return (
      <li
        ref={ref}
        key={connection.id}
        {...props}
        className={cn(showNode && 'pl-8 ml-6 border-l border-muted', 'relative')}
      >
        {showNode && (
          <div className="absolute w-8 rounded-bl-full border-b border-l border-muted h-10 -left-px"></div>
        )}
        <div
          className={cn(
            orientation === 'horizontal'
              ? 'flex items-center justify-between gap-2'
              : 'flex flex-col gap-3',
            'bg-surface-100 border shadow-sm px-6 py-4 rounded-lg',
            className
          )}
        >
          <div className="flex flex-col gap-1 min-w-0">
            <div className="flex items-center gap-2">
              <div className="flex-shrink-0 flex gap-x-2 items-center max-w-40 ">
                <HandleIcon type={'Supabase'} />
                <span title={project?.name} className="text-sm truncate">
                  {project?.name}
                </span>
              </div>

              <ArrowRight
                size={14}
                className="flex-shrink-0 text-foreground-lighter"
                strokeWidth={1.5}
              />

              <div className="flex-1 min-w-0 flex gap-2 items-center">
                {!connection?.metadata?.framework ? (
                  <div className="bg-black text-white w-4 h-4 rounded flex items-center justify-center">
                    <HandleIcon type={type} className={'!w-2.5'} />
                  </div>
                ) : (
                  <img
                    src={`${BASE_PATH}/img/icons/frameworks/${connection.metadata.framework}.svg`}
                    width={21}
                    height={21}
                    alt={`icon`}
                  />
                )}
                {type === 'GitHub' ? (
                  <a
                    title={connection.metadata.name}
                    href={`https://github.com/${connection.metadata?.name}`}
                    className="text-sm truncate"
                    target="_blank"
                    rel="noreferrer"
                  >
                    {connection.metadata?.name}
                  </a>
                ) : (
                  <span title={connection.metadata.name} className="text-sm truncate">
                    {connection.metadata?.name}
                  </span>
                )}
              </div>
            </div>

            <div className="flex flex-col gap-0">
              <span className="text-foreground-lighter text-xs">
                Connected {dayjs(connection?.inserted_at).fromNow()}
              </span>
              <span className="text-foreground-lighter text-xs">
                Added by {connection?.added_by?.primary_email}
              </span>
            </div>
          </div>

          <div className="flex-shrink-0">{actions}</div>
        </div>
      </li>
    )
  }