[FE-1722] fix: race condition in permissions hooks (supabase#37288)

fix: race condition in permissions hooks

Author: alaister

apps/studio/hooks/misc/useCheckPermissions.ts

@@ -6,8 +6,8 @@ import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 import { IS_PLATFORM } from 'lib/constants'
 import type { Permission } from 'types'
-import { useSelectedOrganization } from './useSelectedOrganization'
-import { useSelectedProject } from './useSelectedProject'
+import { useSelectedOrganizationQuery } from './useSelectedOrganization'
+import { useSelectedProjectQuery } from './useSelectedProject'
 
 const toRegexpString = (actionOrResource: string) =>
   `^${actionOrResource.replace('.', '\\.').replace('%', '.*')}$`
@@ -80,30 +80,50 @@ export function useGetProjectPermissions(
   projectRefOverride?: string,
   enabled = true
 ) {
-  const { data, isLoading, isSuccess } = usePermissionsQuery({
+  const {
+    data,
+    isLoading: isLoadingPermissions,
+    isSuccess: isSuccessPermissions,
+  } = usePermissionsQuery({
     enabled: permissionsOverride === undefined && enabled,
   })
-
   const permissions = permissionsOverride === undefined ? data : permissionsOverride
 
-  const organizationResult = useSelectedOrganization({
-    enabled: organizationSlugOverride === undefined && enabled,
+  const organizationsQueryEnabled = organizationSlugOverride === undefined && enabled
+  const {
+    data: organizationData,
+    isLoading: isLoadingOrganization,
+    isSuccess: isSuccessOrganization,
+  } = useSelectedOrganizationQuery({
+    enabled: organizationsQueryEnabled,
   })
-
   const organization =
-    organizationSlugOverride === undefined ? organizationResult : { slug: organizationSlugOverride }
+    organizationSlugOverride === undefined ? organizationData : { slug: organizationSlugOverride }
   const organizationSlug = organization?.slug
 
-  const projectResult = useSelectedProject({
-    enabled: projectRefOverride === undefined && enabled,
+  const projectsQueryEnabled = projectRefOverride === undefined && enabled
+  const {
+    data: projectData,
+    isLoading: isLoadingProject,
+    isSuccess: isSuccessProject,
+  } = useSelectedProjectQuery({
+    enabled: projectsQueryEnabled,
   })
-
   const project =
-    projectRefOverride === undefined || projectResult?.parent_project_ref
-      ? projectResult
+    projectRefOverride === undefined || projectData?.parent_project_ref
+      ? projectData
       : { ref: projectRefOverride, parent_project_ref: undefined }
   const projectRef = project?.parent_project_ref ? project.parent_project_ref : project?.ref
 
+  const isLoading =
+    isLoadingPermissions ||
+    (organizationsQueryEnabled && isLoadingOrganization) ||
+    (projectsQueryEnabled && isLoadingProject)
+  const isSuccess =
+    isSuccessPermissions &&
+    (!organizationsQueryEnabled || isSuccessOrganization) &&
+    (!projectsQueryEnabled || isSuccessProject)
+
   return {
     permissions,
     organizationSlug,
@@ -196,22 +216,33 @@ export function useAsyncCheckProjectPermissions(
     isSuccess: isPermissionsSuccess,
   } = useGetProjectPermissions(permissions, organizationSlug, projectRef, isLoggedIn)
 
-  if (!isLoggedIn)
+  if (!isLoggedIn) {
     return {
       isLoading: true,
       isSuccess: false,
       can: false,
     }
-  if (!IS_PLATFORM)
+  }
+  if (!IS_PLATFORM) {
     return {
       isLoading: false,
       isSuccess: true,
       can: true,
     }
+  }
+
+  const can = doPermissionsCheck(
+    allPermissions,
+    action,
+    resource,
+    data,
+    _organizationSlug,
+    _projectRef
+  )
 
   return {
     isLoading: isPermissionsLoading,
     isSuccess: isPermissionsSuccess,
-    can: doPermissionsCheck(allPermissions, action, resource, data, _organizationSlug, _projectRef),
+    can,
   }
 }

apps/studio/hooks/misc/useSelectedOrganization.ts

@@ -2,8 +2,20 @@ import { useIsLoggedIn, useParams } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useMemo } from 'react'
 
-import { useProjectByRef } from './useSelectedProject'
+import { useProjectByRef, useProjectByRefQuery } from './useSelectedProject'
 
+/**
+ * @deprecated Use useSelectedOrganizationQuery instead for access to loading states etc
+ *
+ * Example migration:
+ * ```
+ * // Old:
+ * const organization = useSelectedOrganization(ref)
+ *
+ * // New:
+ * const { data: organization } = useSelectedOrganizationQuery(ref)
+ * ```
+ */
 export function useSelectedOrganization({ enabled = true } = {}) {
   const isLoggedIn = useIsLoggedIn()
 
@@ -20,3 +32,21 @@ export function useSelectedOrganization({ enabled = true } = {}) {
     })
   }, [data, selectedProject, slug])
 }
+
+export function useSelectedOrganizationQuery({ enabled = true } = {}) {
+  const isLoggedIn = useIsLoggedIn()
+
+  const { ref, slug } = useParams()
+  const { data: selectedProject } = useProjectByRefQuery(ref)
+
+  return useOrganizationsQuery({
+    enabled: isLoggedIn && enabled,
+    select: (data) => {
+      return data.find((org) => {
+        if (slug !== undefined) return org.slug === slug
+        if (selectedProject !== undefined) return org.id === selectedProject.organization_id
+        return undefined
+      })
+    },
+  })
+}

apps/studio/hooks/misc/useSelectedProject.ts

@@ -5,6 +5,18 @@ import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 import { ProjectInfo, useProjectsQuery } from 'data/projects/projects-query'
 import { PROVIDERS } from 'lib/constants'
 
+/**
+ * @deprecated Use useSelectedProjectQuery instead for access to loading states etc
+ *
+ * Example migration:
+ * ```
+ * // Old:
+ * const project = useSelectedProject()
+ *
+ * // New:
+ * const { data: project } = useSelectedProjectQuery()
+ * ```
+ */
 export function useSelectedProject({ enabled = true } = {}) {
   const { ref } = useParams()
   const { data } = useProjectDetailQuery({ ref }, { enabled })
@@ -15,6 +27,32 @@ export function useSelectedProject({ enabled = true } = {}) {
   )
 }
 
+export function useSelectedProjectQuery({ enabled = true } = {}) {
+  const { ref } = useParams()
+
+  return useProjectDetailQuery(
+    { ref },
+    {
+      enabled,
+      select: (data) => {
+        return { ...data, parentRef: data.parent_project_ref ?? data.ref }
+      },
+    }
+  )
+}
+
+/**
+ * @deprecated Use useProjectByRefQuery instead for access to loading states etc
+ *
+ * Example migration:
+ * ```
+ * // Old:
+ * const project = useProjectByRef(ref)
+ *
+ * // New:
+ * const { data: project } = useProjectByRefQuery(ref)
+ * ```
+ */
 export function useProjectByRef(
   ref?: string
 ): Omit<ProjectInfo, 'organization_slug' | 'preview_branch_refs'> | undefined {
@@ -34,6 +72,28 @@ export function useProjectByRef(
   }, [project, projects, ref])
 }
 
+export function useProjectByRefQuery(ref?: string) {
+  const isLoggedIn = useIsLoggedIn()
+
+  const projectQuery = useProjectDetailQuery({ ref }, { enabled: isLoggedIn })
+
+  // [Alaister]: This is here for the purpose of improving performance.
+  // Chances are, the user will already have the list of projects in the cache.
+  // We can't exclusively rely on this method, as useProjectsQuery does not return branch projects.
+  const projectsQuery = useProjectsQuery({
+    enabled: isLoggedIn,
+    select: (data) => {
+      return data.find((project) => project.ref === ref)
+    },
+  })
+
+  if (projectQuery.isSuccess) {
+    return projectQuery
+  }
+
+  return projectsQuery
+}
+
 export const useIsAwsCloudProvider = () => {
   const project = useSelectedProject()
   const isAws = project?.cloud_provider === PROVIDERS.AWS.id