[pull] master from supabase:master

apps/docs/spec/cli_v1_commands.yaml

@@ -1,7 +1,7 @@
 clispec: '001'
 info:
   id: cli
-  version: 2.30.4
+  version: 2.31.4
   title: Supabase CLI
   language: sh
   source: https://github.com/supabase/cli

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

@@ -1,4 +1,4 @@
-import { Code, Wind } from 'lucide-react'
+import { Circle, Code, Minus, Plus, Wind } from 'lucide-react'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 
@@ -34,15 +34,31 @@ const fileKey = (fullPath: string) => basename(fullPath)
 const getStatusColor = (status: FileStatus): string => {
   switch (status) {
     case 'added':
-      return 'bg-brand'
+      return 'text-brand'
     case 'removed':
-      return 'bg-destructive'
+      return 'text-destructive'
     case 'modified':
-      return 'bg-warning'
+      return 'text-warning'
     case 'unchanged':
-      return 'bg-muted'
+      return 'text-muted'
     default:
-      return 'bg-muted'
+      return 'text-muted'
+  }
+}
+
+// Helper to get the status icon for file indicators
+const getStatusIcon = (status: FileStatus) => {
+  switch (status) {
+    case 'added':
+      return Plus
+    case 'removed':
+      return Minus
+    case 'modified':
+      return Circle
+    case 'unchanged':
+      return Circle
+    default:
+      return Circle
   }
 }
 
@@ -65,8 +81,12 @@ const FunctionDiff = ({
     }
   }, [allFileKeys, activeFileKey])
 
-  const currentFile = currentBody.find((f) => fileKey(f.name) === activeFileKey)
-  const mainFile = mainBody.find((f) => fileKey(f.name) === activeFileKey)
+  const currentFile = currentBody.find(
+    (f: EdgeFunctionBodyData[number]) => fileKey(f.name) === activeFileKey
+  )
+  const mainFile = mainBody.find(
+    (f: EdgeFunctionBodyData[number]) => fileKey(f.name) === activeFileKey
+  )
 
   const language = useMemo(() => {
     if (!activeFileKey) return 'plaintext'
@@ -96,28 +116,31 @@ const FunctionDiff = ({
         <div className="flex h-full min-h-0">
           <div className="w-48 border-r bg-surface-200 flex flex-col overflow-y-auto">
             <ul className="divide-y divide-border">
-              {fileInfos.map((fileInfo) => (
-                <li key={fileInfo.key} className="flex">
-                  <button
-                    type="button"
-                    onClick={() => setActiveFileKey(fileInfo.key)}
-                    className={cn(
-                      'flex-1 text-left text-xs px-4 py-2 flex items-center gap-2',
-                      activeFileKey === fileInfo.key
-                        ? 'bg-surface-300 text-foreground'
-                        : 'text-foreground-light hover:bg-surface-300'
-                    )}
-                  >
-                    <div
+              {fileInfos.map((fileInfo) => {
+                const Icon = getStatusIcon(fileInfo.status)
+
+                return (
+                  <li key={fileInfo.key} className="flex">
+                    <button
+                      type="button"
+                      onClick={() => setActiveFileKey(fileInfo.key)}
                       className={cn(
-                        'w-1 h-1 rounded-full flex-shrink-0',
-                        getStatusColor(fileInfo.status)
+                        'flex-1 text-left text-xs px-4 py-2 flex items-center gap-2',
+                        activeFileKey === fileInfo.key
+                          ? 'bg-surface-300 text-foreground'
+                          : 'text-foreground-light hover:bg-surface-300'
                       )}
-                    />
-                    <span className="truncate">{fileInfo.key}</span>
-                  </button>
-                </li>
-              ))}
+                    >
+                      <Icon
+                        className={cn('flex-shrink-0', getStatusColor(fileInfo.status))}
+                        size={12}
+                        strokeWidth={1}
+                      />
+                      <span className="truncate">{fileInfo.key}</span>
+                    </button>
+                  </li>
+                )
+              })}
             </ul>
           </div>
           <div className="flex-1 min-h-0">

apps/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx

@@ -48,7 +48,7 @@ export const TimezoneSelection = ({
               : 'Select timezone...'}
           </Button>
         </PopoverTrigger_Shadcn_>
-        <PopoverContent_Shadcn_ className="w-[350px] p-0">
+        <PopoverContent_Shadcn_ portal className="w-[350px] p-0">
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Search timezone..." className="h-9" />
             <CommandList_Shadcn_>

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

@@ -4,9 +4,12 @@ import { ReplicationPipelinesData } from 'data/replication/pipelines-query'
 import { ResponseError } from 'types'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import RowMenu from './RowMenu'
-import PipelineStatus, { PipelineStatusRequestStatus } from './PipelineStatus'
+import PipelineStatus, { PipelineStatusRequestStatus, PipelineStatusName } from './PipelineStatus'
 import { useParams } from 'common'
-import { useReplicationPipelineStatusQuery } from 'data/replication/pipeline-status-query'
+import {
+  ReplicationPipelineStatusData,
+  useReplicationPipelineStatusQuery,
+} from 'data/replication/pipeline-status-query'
 import { useState } from 'react'
 import { toast } from 'sonner'
 import { useStartPipelineMutation } from 'data/replication/start-pipeline-mutation'
@@ -65,10 +68,22 @@ const DestinationRow = ({
   const { mutateAsync: startPipeline } = useStartPipelineMutation()
   const { mutateAsync: stopPipeline } = useStopPipelineMutation()
   const pipelineStatus = pipelineStatusData?.status
+  const getStatusName = (
+    status: ReplicationPipelineStatusData['status'] | undefined
+  ): string | undefined => {
+    if (status && typeof status === 'object' && 'name' in status) {
+      return status.name
+    }
+
+    return undefined
+  }
+
+  const statusName = getStatusName(pipelineStatus)
   if (
     (requestStatus === PipelineStatusRequestStatus.EnableRequested &&
-      pipelineStatus === 'Started') ||
-    (requestStatus === PipelineStatusRequestStatus.DisableRequested && pipelineStatus === 'Stopped')
+      (statusName === PipelineStatusName.STARTED || statusName === PipelineStatusName.FAILED)) ||
+    (requestStatus === PipelineStatusRequestStatus.DisableRequested &&
+      (statusName === PipelineStatusName.STOPPED || statusName === PipelineStatusName.FAILED))
   ) {
     setRequestStatus(PipelineStatusRequestStatus.None)
   }
@@ -190,7 +205,7 @@ const DestinationRow = ({
           sourceId,
           destinationId: destinationId,
           pipelineId: pipeline?.id,
-          enabled: pipelineStatusData?.status === 'Started',
+          enabled: statusName === PipelineStatusName.STARTED,
         }}
       />
     </>