diff --git a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx index a2b6777f7d6..c27ef8867ef 100644 --- a/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx +++ b/apps/studio/components/interfaces/ProjectCreation/OrganizationSelector.tsx @@ -1,10 +1,13 @@ import { PermissionAction } from '@supabase/shared-types/out/constants' +import { useQueryClient } from '@tanstack/react-query' import { useRouter } from 'next/router' +import { useEffect } from 'react' import { UseFormReturn } from 'react-hook-form' import { useParams } from 'common' import { NoPermission } from 'components/ui/NoPermission' import Panel from 'components/ui/Panel' +import { permissionKeys } from 'data/permissions/keys' import { useOrganizationsQuery } from 'data/organizations/organizations-query' import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' @@ -30,9 +33,17 @@ interface OrganizationSelectorProps { export const OrganizationSelector = ({ form }: OrganizationSelectorProps) => { const router = useRouter() const { slug } = useParams() + const queryClient = useQueryClient() const { data: currentOrg } = useSelectedOrganizationQuery() const { can: isAdmin } = useAsyncCheckPermissions(PermissionAction.CREATE, 'projects') + // Permissions may be stale for newly created accounts due to replication lag between + // org setup and the permissions endpoint. Invalidate in the background on mount so the + // check reflects the latest state before the user tries to create a project. + useEffect(() => { + queryClient.invalidateQueries({ queryKey: permissionKeys.list() }) + }, [queryClient]) + const { data: organizations, isSuccess: isOrganizationsSuccess } = useOrganizationsQuery() const isInvalidSlug = isOrganizationsSuccess && currentOrg === undefined const orgNotFound = (organizations?.length ?? 0) > 0 && isInvalidSlug