[pull] master from supabase:master

apps/studio/components/grid/components/grid/Grid.utils.tsx

@@ -14,7 +14,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
-import { Dictionary } from 'types'
+import type { Dictionary } from 'types'
 
 export function useOnRowsChange(rows: SupaRow[]) {
   const queryClient = useQueryClient()

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

@@ -1,9 +1,9 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import { noop } from 'lodash'
+import { HelpCircle } from 'lucide-react'
 import { useEffect } from 'react'
 
 import SqlEditor from 'components/ui/SqlEditor'
-import { usePrevious } from 'hooks/deprecated'
-import { HelpCircle } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 interface PolicyDefinitionProps {

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

@@ -44,15 +44,19 @@ export const PolicyTableRowHeader = ({
 
   return (
     <div id={table.id.toString()} className="flex w-full items-center justify-between">
-      <div className="flex gap-x-4 text-left">
+      <div className="flex gap-x-4 text-left flex-wrap">
         <EditorTablePageLink
           projectRef={ref}
           id={String(table.id)}
-          className="flex items-center gap-x-3"
+          className="flex items-center gap-3 flex-wrap"
         >
           <Table strokeWidth={1.5} size={16} className="text-foreground-muted" />
           <CardTitle className="m-0 normal-case">{table.name}</CardTitle>
-          {!table.rls_enabled && <Badge variant="warning">RLS Disabled</Badge>}
+          {!table.rls_enabled && (
+            <Badge variant="warning" className="shrink-0">
+              RLS Disabled
+            </Badge>
+          )}
         </EditorTablePageLink>
         {isTableLocked && (
           <Badge>

apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx

@@ -56,8 +56,8 @@ export const EnumeratedTypes = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-2">
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-2 flex-wrap">
           <SchemaSelector
             className="w-full lg:w-[180px]"
             size="tiny"

apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx

@@ -7,12 +7,11 @@ import { useParams } from 'common'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { Loading } from 'components/ui/Loading'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { Card, LogoLoader, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { PublicationsTableItem } from './PublicationsTableItem'
@@ -87,7 +86,7 @@ export const PublicationsTables = () => {
 
       {(isLoading || isLoadingPermissions) && (
         <div className="mt-8">
-          <Loading />
+          <LogoLoader />
         </div>
       )}
 

apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx

@@ -16,7 +16,7 @@ import {
   PipelineStatusRequestStatus,
   usePipelineRequestStatus,
 } from 'state/replication-pipeline-request-status'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import { DeleteDestination } from './DeleteDestination'

apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx

@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { InlineLink } from 'components/ui/InlineLink'
 import { ReplicationPipelineStatusData } from 'data/replication/pipeline-status-query'
 import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { cn, Tooltip, TooltipContent, TooltipTrigger, WarningIcon } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import { getPipelineStateMessages } from './Pipeline.utils'

apps/studio/components/interfaces/Database/Replication/RowMenu.tsx

@@ -11,7 +11,7 @@ import {
   PipelineStatusRequestStatus,
   usePipelineRequestStatus,
 } from 'state/replication-pipeline-request-status'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   DropdownMenu,

apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx

@@ -97,7 +97,7 @@ const TriggersList = ({
   return (
     <div className="space-y-4">
       <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-2">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-2 flex-wrap">
           <SchemaSelector
             className="w-full lg:w-[180px]"
             size="tiny"

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

@@ -187,13 +187,13 @@ export const AdvisorWidget = () => {
   }
 
   return (
-    <div>
+    <div className="@container">
       {isLoadingLints ? (
         <ShimmeringLoader className="w-96 mb-6" />
       ) : (
         <div className="flex justify-between items-center mb-6">{titleContent}</div>
       )}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
         <Card className="h-80">
           <Tabs value={selectedTab} className="h-full flex flex-col">
             <CardHeader className="h-10 py-0 pl-4 pr-2 flex flex-row items-center justify-between flex-0">

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

@@ -213,7 +213,7 @@ export const Home = () => {
 
       <>
         <div className="py-16 border-b border-muted">
-          <div className="mx-auto max-w-7xl space-y-16">
+          <div className="mx-auto max-w-7xl space-y-16 @container">
             {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
               <>{isNewProject ? <NewProjectPanel /> : <ProjectUsageSection />}</>
             )}
@@ -222,7 +222,7 @@ export const Home = () => {
         </div>
 
         <div className="bg-surface-100/5 py-16">
-          <div className="mx-auto max-w-7xl space-y-16">
+          <div className="mx-auto max-w-7xl space-y-16 @container">
             {project?.status !== PROJECT_STATUS.INACTIVE && (
               <>
                 <div className="space-y-8">

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

@@ -7,7 +7,7 @@ import type { IntegrationProjectConnection } from 'data/integrations/integration
 import { getComputeSize, OrgProject } from 'data/projects/org-projects-infinite-query'
 import type { ResourceWarning } from 'data/usage/resource-warnings-query'
 import { BASE_PATH } from 'lib/constants'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import { TableCell, TableRow } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
 import { inferProjectStatus } from './ProjectCard.utils'

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

@@ -195,8 +195,8 @@ const ProjectUsage = () => {
           Statistics for {selectedInterval.label.toLowerCase()}
         </span>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4">
-        <Panel className="mb-0 md:mb-0">
+      <div className="grid grid-cols-1 @md:grid-cols-2 gap-4 @2xl:grid-cols-4">
+        <Panel className="mb-0">
           <Panel.Content className="space-y-4">
             <PanelHeader
               icon={

apps/studio/components/interfaces/HomeNew/ActivityStats.tsx

@@ -55,7 +55,7 @@ export const ActivityStats = () => {
 
   return (
     <div className="@container">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-6 flex-wrap">
+      <div className="grid grid-cols-1 @md:grid-cols-2 gap-2 @md:gap-6 flex-wrap">
         <ServiceStatus />
 
         <SingleStat

apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx

@@ -9,8 +9,8 @@ import {
 import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from '@dnd-kit/sortable'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import dayjs from 'dayjs'
-import type { CSSProperties, DragEvent, ReactNode } from 'react'
 import { Plus, RefreshCw } from 'lucide-react'
+import type { CSSProperties, DragEvent, ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 

apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx

@@ -77,9 +77,9 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
   }
 
   return (
-    <Card className="overflow-hidden">
-      <div className="flex flex-col lg:flex-row">
-        <aside className="hidden border-r lg:block lg:w-[calc(1/3*100%-16px)]">
+    <Card className="overflow-hidden @container">
+      <div className="flex flex-col @2xl:flex-row">
+        <aside className="hidden border-r @2xl:block @2xl:w-[calc(1/3*100%-16px)]">
           <ol>
             {steps.map((step, index) => {
               const isActive = step.key === activeStep.key
@@ -130,7 +130,7 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
         </aside>
 
         <CardContent className="flex flex-1 flex-col gap-0 p-0 overflow-y-auto border-b-0">
-          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 lg:hidden">
+          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 @2xl:hidden">
             <span className="text-xs shrink-0 font-mono text-foreground-light w-7 h-7 bg border flex items-center justify-center rounded-md">
               {activeStepIndex + 1}
             </span>
@@ -186,7 +186,7 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
               <h3>{activeStep.title}</h3>
               <Badge
                 variant={activeStep.status === 'complete' ? 'success' : 'default'}
-                className="capitalize hidden lg:inline-flex"
+                className="capitalize hidden @2xl:inline-flex"
               >
                 {activeStep.status}
               </Badge>

apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx

@@ -6,13 +6,13 @@ import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
-import { Loading } from 'components/ui/Loading'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { getRoleImpersonationJWT } from 'lib/role-impersonation'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
+import { LogoLoader } from 'ui'
 
 export const GraphiQLTab = () => {
   const { resolvedTheme } = useTheme()
@@ -73,7 +73,7 @@ export const GraphiQLTab = () => {
   }, [projectRef, getImpersonatedRoleState, jwtSecret, accessToken, serviceKey, secretKey?.api_key])
 
   if ((IS_PLATFORM && !accessToken) || !isFetched) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   return <GraphiQL fetcher={fetcher} theme={currentTheme} />

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx

@@ -7,7 +7,7 @@ import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
 
 import AlertError from 'components/ui/AlertError'
 import { PostgresQueueMessage } from 'data/database-queues/database-queue-messages-infinite-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { Badge, Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { DATE_FORMAT, MessageDetailsPanel } from './MessageDetailsPanel'

apps/studio/components/interfaces/Integrations/Vault/Secrets/__tests__/EditSecretModal.test.tsx

@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { render } from 'tests/helpers'
 import { addAPIMock } from 'tests/lib/msw'
 import { routerMock } from 'tests/lib/route-mock'
-import { VaultSecret } from 'types'
+import type { VaultSecret } from 'types'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import EditSecretModal from '../EditSecretModal'
 

apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx

@@ -17,7 +17,7 @@ import {
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useOrganizationLinkAwsMarketplaceMutation } from 'data/organizations/organization-link-aws-marketplace-mutation'
 import { DOCS_URL } from 'lib/constants'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import {
   Button,
   Collapsible_Shadcn_,

apps/studio/components/interfaces/Organization/OrganizationCard.tsx

@@ -5,7 +5,7 @@ import { useIsMFAEnabled } from 'common'
 import { ActionCard } from 'components/ui/ActionCard'
 import { useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query'
 import { Fragment } from 'react'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 export const OrganizationCard = ({

apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx

@@ -12,7 +12,7 @@ import { useOrganizationProjectClaimMutation } from 'data/organizations/organiza
 import { OrganizationProjectClaimResponse } from 'data/organizations/organization-project-claim-query'
 import { projectKeys } from 'data/projects/keys'
 import { BASE_PATH } from 'lib/constants'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import {
   Button,
   cn,

apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx

@@ -4,7 +4,7 @@ import AlertError from 'components/ui/AlertError'
 import { OrganizationInviteByToken } from 'data/organization-members/organization-invitation-token-query'
 import { useSignOut } from 'lib/auth'
 import { useProfile } from 'lib/profile'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { cn } from 'ui'
 
 interface OrganizationInviteError {

apps/studio/components/interfaces/Reports/GridResize.tsx

@@ -15,7 +15,7 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import { createSqlSnippetSkeletonV2 } from '../SQLEditor/SQLEditor.utils'
 import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
 import { ReportBlock } from './ReportBlock/ReportBlock'

apps/studio/components/interfaces/Reports/MetricOptions.tsx

@@ -8,7 +8,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { Metric, METRIC_CATEGORIES, METRICS } from 'lib/constants/metrics'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import {
   Command_Shadcn_,
   CommandEmpty_Shadcn_,

apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx

@@ -19,7 +19,7 @@ import { METRICS } from 'lib/constants/metrics'
 import { Activity, BarChartIcon, Loader2 } from 'lucide-react'
 import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import { WarningIcon } from 'ui'
 import { METRIC_THRESHOLDS } from './ReportBlock.constants'
 import { ReportBlockContainer } from './ReportBlockContainer'

apps/studio/components/interfaces/Reports/Reports.tsx

@@ -11,7 +11,6 @@ import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { DateRangePicker } from 'components/ui/DateRangePicker'
-import { Loading } from 'components/ui/Loading'
 import NoPermission from 'components/ui/NoPermission'
 import { DEFAULT_CHART_CONFIG } from 'components/ui/QueryBlock/QueryBlock'
 import { AnalyticsInterval } from 'data/analytics/constants'
@@ -29,8 +28,8 @@ import { Metric, TIME_PERIODS_REPORTS } from 'lib/constants/metrics'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Dashboards } from 'types'
-import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
+import type { Dashboards } from 'types'
+import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, LogoLoader } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { createSqlSnippetSkeletonV2 } from '../SQLEditor/SQLEditor.utils'
 import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
@@ -392,7 +391,7 @@ const Reports = () => {
   }, [hasEdits, confirmNavigate, router])
 
   if (isLoading || isLoadingPermissions) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   if (!canReadReport) {

apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx

@@ -11,17 +11,17 @@ import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import BarChart from 'components/ui/Charts/BarChart'
 import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Alert_Shadcn_,
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
   Button,
   Collapsible,
-  WarningIcon,
   Collapsible_Shadcn_,
-  CollapsibleTrigger_Shadcn_,
   CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+  WarningIcon,
 } from 'ui'
 import { queryParamsToObject } from '../Reports.utils'
 import { ReportWidgetProps, ReportWidgetRendererProps } from '../ReportWidget'

apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx

@@ -12,7 +12,7 @@ import { useLocalStorage } from 'hooks/misc/useLocalStorage'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   cn,

apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx

@@ -13,7 +13,7 @@ import { useUrlState } from 'hooks/ui/useUrlState'
 import { IS_PLATFORM } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   CodeBlock,

apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx

@@ -1,7 +1,7 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import { AlertCircle, Check, Loader2, RefreshCcw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
-import { usePrevious } from 'hooks/deprecated'
 import { useProfile } from 'lib/profile'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'