VariableView() — supabase Function Reference

Source Code

apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx lines 300–434

function VariableView({ variable, className }: { variable: Variable; className?: string }) {
  const isUserLoading = useIsUserLoading()
  const isLoggedIn = useIsLoggedIn()

  const { selectedProject, selectedBranch } = useSnapshot(projectsStore)
  const projectPaused = isProjectPaused(selectedProject)
  const hasBranches = selectedProject?.is_branch_enabled ?? false
  const ref = hasBranches ? selectedBranch?.project_ref : selectedProject?.ref

  const needsApiQuery = variable === 'publishable' || variable === 'anon' || variable === 'url'
  const needsSupavisorQuery = variable === 'sessionPooler'

  const {
    data: apiSettingsData,
    isPending: isApiSettingsPending,
    isError: isApiSettingsError,
  } = useProjectSettingsQuery(
    {
      projectRef: ref,
    },
    { enabled: isLoggedIn && !!ref && !projectPaused && needsApiQuery }
  )

  const {
    data: apiKeysData,
    isPending: isApiKeysPending,
    isError: isApiKeysError,
  } = useProjectKeysQuery(
    {
      projectRef: ref,
    },
    { enabled: isLoggedIn && !!ref && !projectPaused && needsApiQuery }
  )

  const {
    data: supavisorConfig,
    isPending: isSupavisorPending,
    isError: isSupavisorError,
  } = useSupavisorConfigQuery(
    {
      projectRef: ref,
    },
    { enabled: isLoggedIn && !!ref && !projectPaused && needsSupavisorQuery }
  )

  function isInvalidSupavisorData(supavisorData: SupavisorConfigData) {
    return supavisorData.length === 0
  }

  const stateSummary: VariableDataState = isUserLoading
    ? 'userLoading'
    : !isLoggedIn
      ? 'loggedOut'
      : !ref
        ? 'loggedIn.noSelectedProject'
        : projectPaused
          ? 'loggedIn.selectedProject.projectPaused'
          : (needsApiQuery ? isApiSettingsPending || isApiKeysPending : isSupavisorPending)
            ? 'loggedIn.selectedProject.dataPending'
            : (
                  needsApiQuery
                    ? isApiSettingsError || isApiKeysError
                    : isSupavisorError || isInvalidSupavisorData(supavisorConfig!)
                )
              ? 'loggedIn.selectedProject.dataError'
              : 'loggedIn.selectedProject.dataSuccess'

  let variableValue: string = ''

  if (stateSummary === 'loggedIn.selectedProject.dataSuccess') {
    switch (variable) {
      case 'url':
        variableValue = `https://${apiSettingsData?.app_config?.endpoint}`
        break
      case 'anon':
        variableValue =
          apiKeysData?.find((key) => key.type === 'legacy' && key.id === 'anon')?.api_key || ''
        break
      case 'publishable':
        variableValue = apiKeysData?.find((key) => key.type === 'publishable')?.api_key || ''
        break
      case 'sessionPooler':
        variableValue = supavisorConfig?.[0]?.connection_string || ''
    }
  }

  const { copied, handleCopy } = useCopy()

  return (
    <>
      <div className={cn('flex items-center gap-2', className)}>
        <Input
          disabled
          type="text"
          className="font-mono"
          value={
            stateSummary === 'userLoading' ||
            stateSummary === 'loggedIn.selectedProject.dataPending'
              ? 'Loading...'
              : stateSummary === 'loggedIn.selectedProject.projectPaused'
                ? 'PROJECT PAUSED'
                : stateSummary === 'loggedIn.selectedProject.dataSuccess'
                  ? variableValue
                  : `YOUR ${prettyFormatVariable[variable].toUpperCase()}`
          }
        />
        <CopyToClipboard text={variableValue ?? ''}>
          <Button
            disabled={!variableValue}
            variant="ghost"
            className="px-0"
            onClick={handleCopy}
            aria-label="Copy"
          >
            {copied ? <Check /> : <Copy />}
          </Button>
        </CopyToClipboard>
      </div>
      {stateSummary === 'loggedIn.selectedProject.dataError' && (
        <p className="text-foreground-muted text-sm mt-2 mb-0 ml-1">
          You can also copy your {prettyFormatVariable[variable]} from the{' '}
          <Link
            className="text-foreground-muted"
            href="https://supabase.com/dashboard/project/_/settings/api"
            rel="noreferrer noopener"
            target="_blank"
          >
            dashboard
          </Link>
          .
        </p>
      )}
    </>
  )
}