SidePanelVercelProjectLinker() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx lines 27–160

export const SidePanelVercelProjectLinker = () => {
  const { ref } = useParams()
  const { data: selectedOrganization } = useSelectedOrganizationQuery()
  const sidePanelStateSnapshot = useSidePanelsStateSnapshot()
  const organizationIntegrationId = sidePanelStateSnapshot.vercelConnectionsIntegrationId

  const { data: integrationData } = useOrgIntegrationsQuery({
    orgSlug: selectedOrganization?.slug,
  })
  const vercelIntegrations = integrationData?.filter(
    (integration) => integration.integration.name === 'Vercel'
  ) // vercel

  /**
   * Find the right integration
   *
   * we use the snapshot.organizationIntegrationId which should be set whenever this sidepanel is opened
   */
  const selectedIntegration = vercelIntegrations?.find((x) => x.id === organizationIntegrationId)

  const { data: vercelProjectsData } = useVercelProjectsQuery(
    {
      organization_integration_id: organizationIntegrationId,
    },
    { enabled: organizationIntegrationId !== undefined }
  )

  const vercelProjects = useMemo(() => vercelProjectsData ?? EMPTY_ARR, [vercelProjectsData])
  const vercelProjectsById = useMemo(() => keyBy(vercelProjects, 'id'), [vercelProjects])

  const getForeignProjectIcon = useCallback(
    (_project: ForeignProject) => {
      const project = vercelProjectsById[_project.id]

      return !project?.framework ? (
        vercelIcon
      ) : (
        <img
          src={`${BASE_PATH}/img/icons/frameworks/${project.framework}.svg`}
          width={21}
          height={21}
          alt={`icon`}
        />
      )
    },
    [vercelProjectsById]
  )

  const { mutate: createConnections, isPending: isCreatingConnection } =
    useIntegrationVercelConnectionsCreateMutation({
      async onSuccess({ env_sync_error: envSyncError }) {
        if (envSyncError) {
          toast.error(
            `Failed to sync environment variables: ${envSyncError.message}. Please try re-syncing manually from settings.`
          )
        }

        sidePanelStateSnapshot.setVercelConnectionsOpen(false)
      },
    })

  const onCreateConnections = useCallback(
    (vars: any) => {
      createConnections({
        ...vars,
        connection: {
          ...vars.connection,
          metadata: {
            ...vars.connection.metadata,
            supabaseConfig: {
              projectEnvVars: {
                write: true,
              },
            },
          },
        },
      })
    },
    [createConnections]
  )

  return (
    <SidePanel
      hideFooter
      size="large"
      header="Add new Vercel project connection"
      visible={sidePanelStateSnapshot.vercelConnectionsOpen}
      onCancel={() => sidePanelStateSnapshot.setVercelConnectionsOpen(false)}
    >
      <div className="py-6 flex flex-col gap-6 bg-studio h-full">
        <SidePanel.Content>
          <Markdown
            content={`
### Choose repository to connect to

Check the details below before proceeding
          `}
          />
        </SidePanel.Content>
        <SidePanel.Content className="flex flex-col gap-2">
          <ProjectLinker
            slug={selectedOrganization?.slug}
            defaultSupabaseProjectRef={ref}
            organizationIntegrationId={selectedIntegration?.id}
            foreignProjects={vercelProjects}
            onCreateConnections={onCreateConnections}
            installedConnections={selectedIntegration?.connections}
            isLoading={isCreatingConnection}
            integrationIcon={VERCEL_ICON}
            getForeignProjectIcon={getForeignProjectIcon}
            choosePrompt="Choose Vercel Project"
            mode="Vercel"
          />
          <Markdown
            content={`
The following environment variables will be added:

${ENV_VAR_RAW_KEYS.map((x) => {
  return `\n - \`${x}\``
})}
`}
          />
        </SidePanel.Content>
        <SidePanel.Content>
          <ul>
            <li className="border px-10">
              {/* <IntegrationConnectionOption connection={githubIntegrations[0]} /> */}
            </li>
          </ul>
        </SidePanel.Content>
      </div>
    </SidePanel>
  )
}