[pull] master from supabase:master

apps/studio/components/interfaces/Account/AuditLogs.tsx

@@ -29,7 +29,8 @@ const AuditLogs = () => {
     projects: [], // project_ref[]
   })
 
-  const { data: projects } = useProjectsQuery()
+  const { data: projectsData } = useProjectsQuery()
+  const projects = projectsData?.projects ?? []
   const { data: organizations } = useOrganizationsQuery()
   const { data, error, isLoading, isSuccess, isError, isRefetching, refetch } =
     useProfileAuditLogsQuery(

apps/studio/components/interfaces/App/AppBannerWrapper.tsx

@@ -1,9 +1,9 @@
 import { PropsWithChildren } from 'react'
 
+import { useFlag } from 'common'
 import { ClockSkewBanner } from 'components/layouts/AppLayout/ClockSkewBanner'
 import IncidentBanner from 'components/layouts/AppLayout/IncidentBanner'
 import { NoticeBanner } from 'components/layouts/AppLayout/NoticeBanner'
-import { useFlag } from 'hooks/ui/useFlag'
 import { OrganizationResourceBanner } from '../Organization/HeaderBanner'
 
 const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {

apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx

@@ -1,10 +1,10 @@
-import { Forward, Wrench, Building } from 'lucide-react'
+import { Building, Forward, Wrench } from 'lucide-react'
 import { useMemo } from 'react'
 
-import { useProjectsQuery } from 'data/projects/projects-query'
+import { IS_PLATFORM } from 'common'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useProjectsQuery } from 'data/projects/projects-query'
 import { PageType, useRegisterCommands, useRegisterPage, useSetPage } from 'ui-patterns/CommandMenu'
-import { IS_PLATFORM } from 'common'
 import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
 
 const PROJECT_SWITCHER_PAGE_NAME = 'Switch project'
@@ -13,10 +13,10 @@ const ORGANIZATION_SWITCHER_PAGE_NAME = 'Configure organization'
 export function useProjectSwitchCommand() {
   const setPage = useSetPage()
 
-  const { data: _projects } = useProjectsQuery({ enabled: IS_PLATFORM })
+  const { data } = useProjectsQuery({ enabled: IS_PLATFORM })
   const projects = useMemo(
-    () => (_projects ?? []).map(({ name, ref }) => ({ name, ref })),
-    [_projects]
+    () => (data?.projects ?? []).map(({ name, ref }) => ({ name, ref })),
+    [data]
   )
 
   useRegisterPage(

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -10,9 +10,8 @@ import {
   useState,
 } from 'react'
 
-import { FeatureFlagContext, LOCAL_STORAGE_KEYS } from 'common'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
-import { useFlag, useIsRealtimeSettingsFFEnabled } from 'hooks/ui/useFlag'
+import { FeatureFlagContext, LOCAL_STORAGE_KEYS, useFlag } from 'common'
+import { useIsRealtimeSettingsFFEnabled } from 'hooks/ui/useFlag'
 import { EMPTY_OBJ } from 'lib/void'
 import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
 

apps/studio/components/interfaces/App/RouteValidationWrapper.tsx

@@ -77,9 +77,10 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
     }
   }, [orgsInitialized])
 
-  const { data: projects, isSuccess: projectsInitialized } = useProjectsQuery({
+  const { data, isSuccess: projectsInitialized } = useProjectsQuery({
     enabled: isLoggedIn,
   })
+  const projects = data?.projects ?? []
   const projectsRef = useLatest(projects)
 
   useEffect(() => {

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx

@@ -8,7 +8,7 @@ interface PolicyNameProps {
 
 const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
   return (
-    <div className="flex flex-col md:flew-row gap-4 md:gap-12">
+    <div className="flex flex-col md:flex-row gap-4 md:gap-12">
       <div className="flex md:w-1/3 flex-col space-y-2">
         <label className="text-base text-foreground-light" htmlFor="policy-name">
           Policy name

apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx

@@ -34,7 +34,7 @@ const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps)
   })
 
   return (
-    <div className="flex flex-col md:flew-row gap-4 md:gap-12">
+    <div className="flex flex-col md:flex-row gap-4 md:gap-12">
       <div className="flex md:w-1/3 flex-col space-y-2">
         <label className="text-foreground-light text-base" htmlFor="policy-name">
           Target roles

apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx

@@ -9,16 +9,14 @@ import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import {
-  Badge,
   Button,
-  cn,
-  TableRow,
-  TableCell,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
+  TableCell,
+  TableRow,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -29,12 +27,12 @@ interface PolicyRowProps {
   policy: PostgresPolicy
   onSelectEditPolicy: (policy: PostgresPolicy) => void
   onSelectDeletePolicy: (policy: PostgresPolicy) => void
-  isLocked: boolean
+  isLocked?: boolean
 }
 
-const PolicyRow = ({
+export const PolicyRow = ({
   policy,
-  isLocked: isLockedDefault,
+  isLocked: isLockedDefault = false,
   onSelectEditPolicy = noop,
   onSelectDeletePolicy = noop,
 }: PolicyRowProps) => {
@@ -57,6 +55,13 @@ const PolicyRow = ({
     authConfig?.EXTERNAL_ANONYMOUS_USERS_ENABLED &&
     (policy.roles.includes('authenticated') || policy.roles.includes('public'))
 
+  const displayedRoles = (() => {
+    const rolesWithAnonymous = appliesToAnonymousUsers
+      ? [...policy.roles, 'anonymous sign-ins']
+      : policy.roles
+    return rolesWithAnonymous
+  })()
+
   return (
     <TableRow>
       <TableCell className="w-[40%] truncate">
@@ -68,34 +73,32 @@ const PolicyRow = ({
           >
             {policy.name}
           </Button>
-          {appliesToAnonymousUsers ? (
-            <Badge color="yellow">Applies to anonymous users</Badge>
-          ) : null}
         </div>
       </TableCell>
       <TableCell className="w-[20%] truncate">
         <code className="text-foreground-light text-xs">{policy.command}</code>
       </TableCell>
       <TableCell className="w-[30%] truncate">
         <div className="flex items-center gap-x-1">
-          <div className="text-foreground-lighter text-sm">
-            {policy.roles.slice(0, 3).map((role, i) => (
+          <div className="text-foreground-lighter text-sm truncate">
+            {displayedRoles.slice(0, 2).map((role, i) => (
               <span key={`policy-${role}-${i}`}>
                 <code className="text-foreground-light text-xs">{role}</code>
-                {i < Math.min(policy.roles.length, 3) - 1 ? ', ' : ' '}
+                {i < Math.min(displayedRoles.length, 2) - 1 ? ', ' : ' '}
               </span>
             ))}
-            {policy.roles.length > 1 ? 'roles' : 'role'}
           </div>
-          {policy.roles.length > 3 && (
+          {displayedRoles.length > 2 && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <code key="policy-etc" className="text-foreground-light text-xs">
-                  + {policy.roles.length - 3} more roles
-                </code>
+                <div>
+                  <code key="policy-etc" className="text-foreground-light text-xs">
+                    + {displayedRoles.length - 2} more
+                  </code>
+                </div>
               </TooltipTrigger>
               <TooltipContent side="bottom" align="center">
-                {policy.roles.slice(3).join(', ')}
+                {displayedRoles.join(', ')}
               </TooltipContent>
             </Tooltip>
           )}
@@ -166,5 +169,3 @@ const PolicyRow = ({
     </TableRow>
   )
 }
-
-export default PolicyRow

apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx

@@ -26,7 +26,7 @@ interface PolicyTableRowHeaderProps {
   onSelectCreatePolicy: () => void
 }
 
-const PolicyTableRowHeader = ({
+export const PolicyTableRowHeader = ({
   table,
   isLocked,
   onSelectToggleRLS = noop,
@@ -134,5 +134,3 @@ const PolicyTableRowHeader = ({
     </div>
   )
 }
-
-export default PolicyTableRowHeader

apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx

@@ -20,8 +20,8 @@ import {
   TableRow,
 } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import PolicyRow from './PolicyRow'
-import PolicyTableRowHeader from './PolicyTableRowHeader'
+import { PolicyRow } from './PolicyRow'
+import { PolicyTableRowHeader } from './PolicyTableRowHeader'
 
 export interface PolicyTableRowProps {
   table: {

apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/AddIntegrationDropdown.tsx

@@ -1,6 +1,7 @@
 import { ChevronDown } from 'lucide-react'
 import Image from 'next/image'
 
+import { useFlag } from 'common'
 import {
   Button,
   cn,
@@ -11,7 +12,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from 'ui'
-import { useFlag } from 'hooks/ui/useFlag'
 import {
   getIntegrationTypeIcon,
   getIntegrationTypeLabel,

apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx

@@ -1,16 +1,17 @@
 import { useProjectsQuery } from 'data/projects/projects-query'
+import Link from 'next/link'
 import type { Organization } from 'types'
 import { Admonition } from 'ui-patterns'
-import Link from 'next/link'
 
 interface NoProjectsOnPaidOrgInfoProps {
   organization?: Organization
 }
 
 export const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInfoProps) => {
-  const { data: allProjects } = useProjectsQuery({})
+  const { data } = useProjectsQuery({})
   const projectCount =
-    allProjects?.filter((project) => project.organization_id === organization?.id).length ?? 0
+    (data?.projects ?? []).filter((project) => project.organization_id === organization?.id)
+      .length ?? 0
 
   if (
     projectCount > 0 ||

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -10,7 +10,7 @@ import { toast } from 'sonner'
 import * as z from 'zod'
 
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
 import { useIsBranching2Enabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { BranchingPITRNotice } from 'components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice'
 import AlertError from 'components/ui/AlertError'
@@ -27,7 +27,6 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { useFlag } from 'hooks/ui/useFlag'
 import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import {
@@ -51,15 +50,16 @@ import {
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 export const CreateBranchModal = () => {
-  const allowDataBranching = useFlag('allowDataBranching')
   const { ref } = useParams()
   const router = useRouter()
   const queryClient = useQueryClient()
   const { data: projectDetails } = useSelectedProjectQuery()
   const { data: selectedOrg } = useSelectedOrganizationQuery()
-  const gitlessBranching = useIsBranching2Enabled()
   const { showCreateBranchModal, setShowCreateBranchModal } = useAppStateSnapshot()
 
+  const gitlessBranching = useIsBranching2Enabled()
+  const allowDataBranching = useFlag('allowDataBranching')
+
   const isProPlanAndUp = selectedOrg?.plan?.id !== 'free'
   const promptProPlanUpgrade = IS_PLATFORM && !isProPlanAndUp
 

apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx

@@ -35,12 +35,14 @@ export const ProjectList = ({
   const organization = organization_ ?? selectedOrganization
 
   const {
-    data: allProjects = [],
+    data,
     isLoading: isLoadingProjects,
     isSuccess: isSuccessProjects,
     isError: isErrorProjects,
     error: projectsError,
   } = useProjectsQuery()
+  const allProjects = data?.projects ?? []
+
   const {
     isLoading: _isLoadingPermissions,
     isError: isErrorPermissions,

apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx

@@ -34,8 +34,10 @@ const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectio
     const { data: org } = useSelectedOrganizationQuery()
 
     const { type, connection } = props
-    const { data: projects } = useProjectsQuery()
-    const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
+    const { data } = useProjectsQuery()
+    const project = (data?.projects ?? []).find(
+      (project) => project.ref === connection.supabase_project_ref
+    )
     const isBranchingEnabled = project?.is_branch_enabled === true
 
     const [isOpen, setIsOpen] = useState(false)

apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationPanels.tsx

@@ -149,8 +149,10 @@ const IntegrationConnection = forwardRef<HTMLLIElement, IntegrationConnectionPro
     { connection, type, actions, showNode = true, orientation = 'horizontal', className, ...props },
     ref
   ) => {
-    const { data: projects } = useProjectsQuery()
-    const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
+    const { data } = useProjectsQuery()
+    const project = (data?.projects ?? []).find(
+      (project) => project.ref === connection.supabase_project_ref
+    )
 
     return (
       <li
@@ -236,8 +238,10 @@ const IntegrationConnection = forwardRef<HTMLLIElement, IntegrationConnectionPro
 
 const IntegrationConnectionOption = forwardRef<HTMLLIElement, IntegrationConnectionProps>(
   ({ connection, type, ...props }, ref) => {
-    const { data: projects } = useProjectsQuery()
-    const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
+    const { data } = useProjectsQuery()
+    const project = (data?.projects ?? []).find(
+      (project) => project.ref === connection.supabase_project_ref
+    )
 
     return (
       <li

apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx

@@ -3,7 +3,7 @@ import { RotateCw, Timer } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useLegacyAPIKeysStatusQuery } from 'data/api-keys/legacy-api-keys-status-query'
 import { useJWTSigningKeyDeleteMutation } from 'data/jwt-signing-keys/jwt-signing-key-delete-mutation'
@@ -12,7 +12,6 @@ import { JWTSigningKey, useJWTSigningKeysQuery } from 'data/jwt-signing-keys/jwt
 import { useLegacyJWTSigningKeyCreateMutation } from 'data/jwt-signing-keys/legacy-jwt-signing-key-create-mutation'
 import { useLegacyJWTSigningKeyQuery } from 'data/jwt-signing-keys/legacy-jwt-signing-key-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { useFlag } from 'hooks/ui/useFlag'
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -48,7 +47,7 @@ import { SigningKeyRow } from './signing-key-row'
 
 type DialogType = 'legacy' | 'create' | 'rotate' | 'key-details' | 'revoke' | 'delete'
 
-export default function JWTSecretKeysTable() {
+export const JWTSecretKeysTable = () => {
   const { ref: projectRef } = useParams()
   const { data: project, isLoading: isProjectLoading } = useSelectedProjectQuery()
 

apps/studio/components/interfaces/JwtSecrets/jwt-settings.tsx

@@ -4,7 +4,8 @@ import {
   JwtSecretUpdateProgress,
   JwtSecretUpdateStatus,
 } from '@supabase/shared-types/out/events'
-import { useParams } from 'common'
+
+import { useFlag, useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { FormActions } from 'components/ui/Forms/FormActions'
 import Panel from 'components/ui/Panel'
@@ -16,7 +17,6 @@ import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import { useLegacyJWTSigningKeyQuery } from 'data/jwt-signing-keys/legacy-jwt-signing-key-query'
 import { useAsyncCheckProjectPermissions } from 'hooks/misc/useCheckPermissions'
-import { useFlag } from 'hooks/ui/useFlag'
 import { uuidv4 } from 'lib/helpers'
 import {
   AlertCircle,