[pull] master from supabase:master

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

@@ -23,6 +23,7 @@ import { DatePickerValue, LogsDatePicker } from '../Settings/Logs/Logs.DatePicke
 import { REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
 import type { ReportFilterItem } from './Reports.types'
 import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/shadcn/ui/popover'
+import { Network } from 'lucide-react'
 
 interface ReportFilterBarProps {
   filters: ReportFilterItem[]
@@ -46,40 +47,35 @@ const PRODUCT_FILTERS = [
     key: 'rest',
     filterKey: 'request.path',
     filterValue: '/rest',
-    label: 'REST',
-    description: 'Requests made to PostgREST',
+    label: 'Data API (PostgREST)',
     icon: Database,
   },
   {
     key: 'auth',
     filterKey: 'request.path',
     filterValue: '/auth',
     label: 'Auth',
-    description: 'Auth and authorization requests',
     icon: Auth,
   },
   {
     key: 'storage',
     filterKey: 'request.path',
     filterValue: '/storage',
     label: 'Storage',
-    description: 'Storage asset requests',
     icon: Storage,
   },
   {
     key: 'realtime',
     filterKey: 'request.path',
     filterValue: '/realtime',
     label: 'Realtime',
-    description: 'Realtime connection requests',
     icon: Realtime,
   },
   {
     key: 'graphql',
     filterKey: 'request.path',
     filterValue: '/graphql',
-    label: 'GraphQL',
-    description: 'Requests made to pg_graphql',
+    label: 'GraphQL (pg_graphql)',
     icon: null,
   },
 ]
@@ -210,7 +206,8 @@ const ReportFilterBar = ({
             </DropdownMenuTrigger>
             <DropdownMenuContent side="bottom" align="start">
               <DropdownMenuItem onClick={() => handleProductFilterChange(null)}>
-                <p>All Requests</p>
+                <Network size={14} strokeWidth={1.5} className="mr-2" />
+                All Requests
               </DropdownMenuItem>
               <DropdownMenuSeparator />
               {PRODUCT_FILTERS.map((productFilter) => {
@@ -226,13 +223,13 @@ const ReportFilterBar = ({
                     {productFilter.key === 'graphql' ? (
                       <SVG
                         src={`${BASE_PATH}/img/graphql.svg`}
-                        className="w-[20px] h-[20px] mr-2"
+                        className="w-[14px] h-[14px] mr-2"
                         preProcessor={(code) =>
                           code.replace(/svg/, 'svg class="m-auto text-color-inherit"')
                         }
                       />
                     ) : Icon !== null ? (
-                      <Icon size={20} strokeWidth={1.5} className="mr-2" />
+                      <Icon size={14} strokeWidth={1.5} className="mr-2" />
                     ) : null}
                     <div className="flex flex-col">
                       <p
@@ -243,9 +240,6 @@ const ReportFilterBar = ({
                       >
                         {productFilter.label}
                       </p>
-                      <p className=" text-left text-foreground-light inline-block w-[180px]">
-                        {productFilter.description}
-                      </p>
                     </div>
                   </DropdownMenuItem>
                 )

apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx

@@ -10,6 +10,7 @@ import { useResetPasswordMutation } from 'data/misc/reset-password-mutation'
 import { BASE_PATH } from 'lib/constants'
 import { auth } from 'lib/gotrue'
 import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Input_Shadcn_ } from 'ui'
+import { Admonition } from 'ui-patterns'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 const forgotPasswordSchema = z.object({
@@ -78,6 +79,11 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
         className="flex flex-col pt-4 space-y-4"
         onSubmit={codeForm.handleSubmit(onCodeEntered)}
       >
+        <Admonition
+          type="default"
+          title="Check your email for a reset code"
+          description="You'll receive an email if an account associated with the email address exists"
+        />
         <FormField_Shadcn_
           control={codeForm.control}
           name="code"

apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx

@@ -175,7 +175,12 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
             </li>
           )}
           <li>
-            <Link href="/logout">Force sign out and clear cookies</Link>
+            <Link
+              href="/logout"
+              className="text-sm transition text-foreground-light hover:text-foreground"
+            >
+              Force sign out and clear cookies
+            </Link>
           </li>
           <li>
             <Link

apps/studio/components/interfaces/Storage/BucketRow.tsx

@@ -44,13 +44,14 @@ export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: Bucke
       {/* Even though we trim whitespaces from bucket names, there may be some existing buckets with trailing whitespaces. */}
       <Link
         href={`/project/${projectRef}/storage/buckets/${encodeURIComponent(bucket.id)}`}
-        className={'py-1 px-3 grow'}
+        className="py-1 pl-3 pr-1 flex-grow min-w-0"
       >
         <div className="flex items-center justify-between space-x-2 truncate w-full">
           <p
-            className={`text-sm group-hover:text-foreground transition truncate ${
+            className={cn(
+              'text-sm group-hover:text-foreground transition truncate',
               isSelected ? 'text-foreground' : 'text-foreground-light'
-            }`}
+            )}
             title={bucket.name}
           >
             {bucket.name}
@@ -106,7 +107,7 @@ export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: Bucke
           </DropdownMenuContent>
         </DropdownMenu>
       ) : (
-        <div className="w-7 mr-1" />
+        <div className="min-w-6 mr-1" />
       )}
 
       <EditBucketModal visible={modal === `edit`} bucket={bucket} onClose={onClose} />

apps/studio/components/interfaces/Support/Success.tsx

@@ -2,25 +2,24 @@ import { Check, ExternalLink, Mail, Search } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
 
+import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 import { useProfile } from 'lib/profile'
 import { Button, Input, Separator } from 'ui'
 import { CATEGORY_OPTIONS } from './Support.constants'
 
 interface SuccessProps {
   sentCategory?: string
   selectedProject?: string
-  projects?: any[]
 }
 
-const Success = ({
-  sentCategory = '',
-  selectedProject = 'no-project',
-  projects = [],
-}: SuccessProps) => {
+export const Success = ({ sentCategory = '', selectedProject = 'no-project' }: SuccessProps) => {
   const { profile } = useProfile()
   const respondToEmail = profile?.primary_email ?? 'your email'
 
-  const project = projects.find((p) => p.ref === selectedProject)
+  const { data: project } = useProjectDetailQuery(
+    { ref: selectedProject },
+    { enabled: selectedProject !== 'no-project' }
+  )
   const projectName = project ? project.name : 'No specific project'
 
   const categoriesToShowAdditionalResources = ['Problem', 'Unresponsive', 'Performance']
@@ -98,5 +97,3 @@ const Success = ({
     </div>
   )
 }
-
-export default Success