[pull] master from supabase:master

apps/docs/spec/cli_v1_commands.yaml

@@ -1,7 +1,7 @@
 clispec: '001'
 info:
   id: cli
-  version: 2.34.3
+  version: 2.39.2
   title: Supabase CLI
   language: sh
   source: https://github.com/supabase/cli
@@ -70,6 +70,10 @@ flags:
       - id: yaml
         name: yaml
         type: '[ env | pretty | json | toml | yaml ]'
+  - id: profile
+    name: --profile <string>
+    description: use a specific profile for connecting to Supabase API
+    default_value: supabase
   - id: workdir
     name: --workdir <string>
     description: path to a Supabase project directory

apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx

@@ -8,6 +8,7 @@ export interface AuthorizeRequesterDetailsProps {
   name: string
   domain: string
   scopes: OAuthScope[]
+  showOnlyScopes?: boolean
 }
 
 export const ScopeSection = ({
@@ -55,31 +56,43 @@ export const AuthorizeRequesterDetails = ({
   name,
   domain,
   scopes,
+  showOnlyScopes = false,
 }: AuthorizeRequesterDetailsProps) => {
   return (
     <div className="flex gap-y-4 flex-col">
-      <div className="flex flex-row gap-x-4 items-center">
-        <div className="flex items-center">
-          <div
-            className="w-14 h-14 md:w-16 md:h-16 bg-center bg-no-repeat bg-cover flex items-center justify-center rounded-md border border-control"
-            style={{
-              backgroundImage: !!icon ? `url('${icon}')` : 'none',
-            }}
-          >
-            {!icon && <p className="text-foreground-light text-lg">{name[0]}</p>}
+      {!showOnlyScopes && (
+        <div className="flex flex-row gap-x-4 items-center">
+          <div className="flex items-center">
+            <div
+              className="w-12 h-12 md:w-14 md:h-14 bg-center bg-no-repeat bg-cover flex items-center justify-center rounded-md border border-control"
+              style={{
+                backgroundImage: !!icon ? `url('${icon}')` : 'none',
+              }}
+            >
+              {!icon && <p className="text-foreground-light text-lg">{name[0]}</p>}
+            </div>
           </div>
+          <p className="text-foreground">
+            {name} ({domain}) is requesting API access to an organization.
+          </p>
         </div>
-        <p className="text-foreground">
-          {name} ({domain}) is requesting API access to an organization.
-        </p>
-      </div>
+      )}
       <div>
-        <h2>Permissions</h2>
-        <p className="text-sm text-foreground-light">
-          The following scopes will apply for the{' '}
-          <span className="text-amber-900">selected organization and all of its projects.</span>
-        </p>
+        {!showOnlyScopes && (
+          <>
+            <h3>Permissions</h3>
+            <p className="text-sm text-foreground-light">
+              The following scopes will apply for the{' '}
+              <span className="text-amber-900">selected organization and all of its projects.</span>
+            </p>
+          </>
+        )}
         <div className="pt-2">
+          {scopes.length === 0 && (
+            <p className="text-foreground-lighter text-sm">
+              No permissions requested, {name} will not have access to your organization or projects
+            </p>
+          )}
           <ScopeSection
             description={PERMISSIONS_DESCRIPTIONS.ANALYTICS}
             hasReadScope={scopes.includes(OAuthScope.ANALYTICS_READ)}

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

@@ -4,17 +4,19 @@ import { PropsWithChildren, ReactNode } from 'react'
 import { UserDropdown } from 'components/interfaces/UserDropdown'
 import { FeedbackDropdown } from 'components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown'
 import { BASE_PATH } from 'lib/constants'
-import { Separator } from 'ui'
+import { cn, Separator } from 'ui'
 
 export const ProjectClaimLayout = ({
   children,
   title,
+  className,
 }: PropsWithChildren<{
   title: ReactNode
+  className?: string
 }>) => {
   return (
     <>
-      <div className="flex flex-row justify-between flex-grow mx-auto w-full h-[52px] items-center px-4">
+      <div className="flex flex-row justify-between mx-auto w-full h-[52px] items-center px-4">
         <div className="flex items-center gap-2">
           <span className="sr-only">Supabase</span>
           <Image
@@ -31,8 +33,13 @@ export const ProjectClaimLayout = ({
         </div>
       </div>
       <Separator />
-      <div className="overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center">
-        <div className="w-full max-w-md">{children}</div>
+      <div
+        className={cn(
+          'overflow-y-auto max-h-[calc(100vh-70px)] flex justify-center flex-grow',
+          className
+        )}
+      >
+        <div className="w-full h-full max-w-md">{children}</div>
       </div>
     </>
   )

apps/studio/components/ui/Charts/AreaChart.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { Area, AreaChart as RechartAreaChart, Tooltip, XAxis } from 'recharts'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 
 import { CHART_COLORS, DateTimeFormats } from 'components/ui/Charts/Charts.constants'
 import ChartHeader from './ChartHeader'
@@ -35,11 +35,9 @@ const AreaChart = ({
   syncId,
 }: AreaChartProps) => {
   const { Container } = useChartSize(size)
-  const {
-    state: syncState,
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
   const day = (value: number | string) => (displayDateInUtc ? dayjs(value).utc() : dayjs(value))
@@ -102,21 +100,12 @@ const AreaChart = ({
               setFocusDataIndex(e.activeTooltipIndex)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
           }}
           onMouseLeave={() => {
             setFocusDataIndex(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
         >
           <defs>
@@ -137,16 +126,13 @@ const AreaChart = ({
           />
           <Tooltip
             content={(props) =>
-              syncId && syncState.isHovering && syncState.activeIndex !== null ? (
+              syncId && syncTooltip && hoveredIndex !== null ? (
                 <div className="bg-black/90 text-white p-2 rounded text-xs">
                   <div className="font-medium">
-                    {dayjs(data[syncState.activeIndex]?.[xAxisKey]).format(customDateFormat)}
+                    {dayjs(data[hoveredIndex]?.[xAxisKey]).format(customDateFormat)}
                   </div>
                   <div>
-                    {numberFormatter(
-                      Number(data[syncState.activeIndex]?.[yAxisKey]) || 0,
-                      valuePrecision
-                    )}
+                    {numberFormatter(Number(data[hoveredIndex]?.[yAxisKey]) || 0, valuePrecision)}
                     {format}
                   </div>
                 </div>

apps/studio/components/ui/Charts/BarChart.tsx

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import { ComponentProps, useState, useMemo } from 'react'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import {
   Bar,
   CartesianGrid,
@@ -58,11 +58,9 @@ const BarChart = ({
   syncId,
 }: BarChartProps) => {
   const { Container } = useChartSize(size)
-  const {
-    state: syncState,
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
 
   // Transform data to ensure yAxisKey values are numbers
@@ -151,21 +149,12 @@ const BarChart = ({
               setFocusDataIndex(e.activeTooltipIndex)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
           }}
           onMouseLeave={() => {
             setFocusDataIndex(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
           onClick={(tooltipData) => {
             const datum = tooltipData?.activePayload?.[0]?.payload
@@ -188,16 +177,13 @@ const BarChart = ({
           />
           <Tooltip
             content={(props) =>
-              syncId && syncState.isHovering && syncState.activeIndex !== null ? (
+              syncId && syncTooltip && hoveredIndex !== null ? (
                 <div className="bg-black/90 text-white p-2 rounded text-xs">
                   <div className="font-medium">
-                    {dayjs(data[syncState.activeIndex]?.[xAxisKey]).format(customDateFormat)}
+                    {dayjs(data[hoveredIndex]?.[xAxisKey]).format(customDateFormat)}
                   </div>
                   <div>
-                    {numberFormatter(
-                      Number(data[syncState.activeIndex]?.[yAxisKey]) || 0,
-                      valuePrecision
-                    )}
+                    {numberFormatter(Number(data[hoveredIndex]?.[yAxisKey]) || 0, valuePrecision)}
                     {typeof format === 'string' ? format : ''}
                   </div>
                 </div>

apps/studio/components/ui/Charts/ChartHandler.tsx

@@ -33,6 +33,7 @@ interface ChartHandlerProps {
   isLoading?: boolean
   format?: string
   highlightedValue?: string | number
+  syncId?: string
 }
 
 /**
@@ -59,6 +60,7 @@ const ChartHandler = ({
   isLoading,
   format,
   highlightedValue,
+  syncId,
   ...otherProps
 }: PropsWithChildren<ChartHandlerProps>) => {
   const router = useRouter()
@@ -176,6 +178,7 @@ const ChartHandler = ({
           highlightedValue={_highlightedValue}
           title={label}
           customDateFormat={customDateFormat}
+          syncId={syncId}
           {...otherProps}
         />
       ) : (
@@ -187,6 +190,7 @@ const ChartHandler = ({
           highlightedValue={_highlightedValue}
           title={label}
           customDateFormat={customDateFormat}
+          syncId={syncId}
           {...otherProps}
         />
       )}

apps/studio/components/ui/Charts/ChartHeader.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { formatBytes } from 'lib/helpers'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import { numberFormatter } from './Charts.utils'
 
 export interface ChartHeaderProps {
@@ -58,7 +58,7 @@ const ChartHeader = ({
   isNetworkChart = false,
   attributes,
 }: ChartHeaderProps) => {
-  const { state: syncState } = useChartSync(syncId)
+  const { hoveredIndex, syncHover } = useChartHoverState(syncId || 'default')
   const [localHighlightedValue, setLocalHighlightedValue] = useState(highlightedValue)
   const [localHighlightedLabel, setLocalHighlightedLabel] = useState(highlightedLabel)
 
@@ -76,8 +76,8 @@ const ChartHeader = ({
   }
 
   useEffect(() => {
-    if (syncId && syncState.activeIndex !== null && data && xAxisKey && yAxisKey) {
-      const activeDataPoint = data[syncState.activeIndex]
+    if (syncId && hoveredIndex !== null && syncHover && data && xAxisKey && yAxisKey) {
+      const activeDataPoint = data[hoveredIndex]
       if (activeDataPoint) {
         // For stacked charts, we need to calculate the total of all attributes
         // that should be included in the total (excluding reference lines, max values, etc.)
@@ -127,7 +127,8 @@ const ChartHeader = ({
       setLocalHighlightedLabel(highlightedLabel)
     }
   }, [
-    syncState,
+    hoveredIndex,
+    syncHover,
     syncId,
     data,
     xAxisKey,

apps/studio/components/ui/Charts/ComposedChart.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import { formatBytes } from 'lib/helpers'
 import { useTheme } from 'next-themes'
 import { ComponentProps, useEffect, useState } from 'react'
-import { useChartSync } from './useChartSync'
+import { useChartHoverState } from './useChartHoverState'
 import {
   Area,
   Bar,
@@ -102,11 +102,9 @@ export default function ComposedChart({
   docsUrl,
 }: ComposedChartProps) {
   const { resolvedTheme } = useTheme()
-  const {
-    state: syncState,
-    updateState: updateSyncState,
-    clearState: clearSyncState,
-  } = useChartSync(syncId)
+  const { hoveredIndex, syncTooltip, setHover, clearHover } = useChartHoverState(
+    syncId || 'default'
+  )
   const [_activePayload, setActivePayload] = useState<any>(null)
   const [_showMaxValue, setShowMaxValue] = useState(showMaxValue)
   const [focusDataIndex, setFocusDataIndex] = useState<number | null>(null)
@@ -339,14 +337,7 @@ export default function ComposedChart({
               setActivePayload(e.activePayload)
             }
 
-            if (syncId) {
-              updateSyncState({
-                activeIndex: e.activeTooltipIndex,
-                activePayload: e.activePayload,
-                activeLabel: e.activeLabel,
-                isHovering: true,
-              })
-            }
+            setHover(e.activeTooltipIndex)
 
             const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
             chartHighlight?.handleMouseMove({
@@ -367,9 +358,7 @@ export default function ComposedChart({
             setFocusDataIndex(null)
             setActivePayload(null)
 
-            if (syncId) {
-              clearSyncState()
-            }
+            clearHover()
           }}
           onClick={(tooltipData) => {
             const datum = tooltipData?.activePayload?.[0]?.payload
@@ -404,7 +393,9 @@ export default function ComposedChart({
                   attributes={attributes}
                   valuePrecision={valuePrecision}
                   showTotal={showTotal}
-                  isActiveHoveredChart={isActiveHoveredChart || (!!syncId && syncState.isHovering)}
+                  isActiveHoveredChart={
+                    isActiveHoveredChart || (!!syncId && syncTooltip && hoveredIndex !== null)
+                  }
                 />
               ) : null
             }