[pull] master from supabase:master

apps/design-system/content/docs/icons.mdx

@@ -69,7 +69,6 @@ Leave attributes like `stroke-width` as they are. The conversion to camel-case f
 
 ```tsx
 import { MyNewIcon } from 'icons'
-
 ;<MyNewIcon size={16} strokeWidth={1} />
 ```
 

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -10,37 +10,42 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
   Button,
+  cn,
+  Form_Shadcn_,
   FormControl_Shadcn_,
   FormField_Shadcn_,
   FormItem_Shadcn_,
   FormLabel_Shadcn_,
   FormMessage_Shadcn_,
-  Form_Shadcn_,
   Input_Shadcn_,
   RadioGroupCard,
   RadioGroupCardItem,
+  Select_Shadcn_,
   SelectContent_Shadcn_,
   SelectGroup_Shadcn_,
   SelectItem_Shadcn_,
   SelectLabel_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  Select_Shadcn_,
   Sheet,
   SheetContent,
   SheetFooter,
   SheetHeader,
   SheetSection,
   SheetTitle,
   Switch,
-  cn,
 } from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { z } from 'zod'
 
 import { urlRegex } from '../Auth/Auth.constants'
-import { DATADOG_REGIONS, LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
+import {
+  DATADOG_REGIONS,
+  LAST9_REGIONS,
+  LOG_DRAIN_TYPES,
+  LogDrainType,
+} from './LogDrains.constants'
 
 const FORM_ID = 'log-drain-destination-form'
 
@@ -112,6 +117,15 @@ const formUnion = z.discriminatedUnion('type', [
     api_token: z.string().min(1, { message: 'API token is required' }),
     dataset_name: z.string().min(1, { message: 'Dataset name is required' }),
   }),
+  z.object({
+    type: z.literal('last9'),
+    region: z.string().min(1, { message: 'Region is required' }),
+    username: z.string().min(1, { message: 'Username is required' }),
+    password: z.string().min(1, { message: 'Password is required' }),
+  }),
+  z.object({
+    type: z.literal('otlp'),
+  }),
 ])
 
 const formSchema = z
@@ -183,6 +197,7 @@ export function LogDrainDestinationSheetForm({
   const sentryEnabled = useFlag('SentryLogDrain')
   const s3Enabled = useFlag('S3logdrain')
   const axiomEnabled = useFlag('axiomLogDrain')
+  const last9Enabled = useFlag('Last9LogDrain')
 
   const { ref } = useParams()
   const { data: logDrains } = useLogDrainsQuery({
@@ -328,9 +343,7 @@ export function LogDrainDestinationSheetForm({
                     <Select_Shadcn_
                       defaultValue={defaultType}
                       value={form.getValues('type')}
-                      onValueChange={(v: Exclude<LogDrainType, 'axiom'>) =>
-                        form.setValue('type', v)
-                      }
+                      onValueChange={(v: LogDrainType) => form.setValue('type', v)}
                     >
                       <SelectTrigger_Shadcn_>
                         {LOG_DRAIN_TYPES.find((t) => t.value === type)?.name}
@@ -340,6 +353,7 @@ export function LogDrainDestinationSheetForm({
                           if (t.value === 'sentry') return sentryEnabled
                           if (t.value === 's3') return s3Enabled
                           if (t.value === 'axiom') return axiomEnabled
+                          if (t.value === 'last9') return last9Enabled
                           return true
                         }).map((type) => (
                           <SelectItem_Shadcn_
@@ -592,6 +606,60 @@ export function LogDrainDestinationSheetForm({
                     />
                   </div>
                 )}
+                {type === 'last9' && (
+                  <div className="grid gap-4 px-content">
+                    <FormField_Shadcn_
+                      name="region"
+                      control={form.control}
+                      render={({ field }) => (
+                        <FormItemLayout
+                          layout="horizontal"
+                          label={'Region'}
+                          description={
+                            <p>
+                              The Last9 region to send logs to. Credentials can be obtained from the
+                              Last9 OTEL integration panel.
+                            </p>
+                          }
+                        >
+                          <FormControl_Shadcn_>
+                            <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
+                              <SelectTrigger_Shadcn_ className="col-span-3">
+                                <SelectValue_Shadcn_ placeholder="Select a region" />
+                              </SelectTrigger_Shadcn_>
+                              <SelectContent_Shadcn_>
+                                <SelectGroup_Shadcn_>
+                                  <SelectLabel_Shadcn_>Region</SelectLabel_Shadcn_>
+                                  {LAST9_REGIONS.map((reg) => (
+                                    <SelectItem_Shadcn_ key={reg.value} value={reg.value}>
+                                      {reg.label}
+                                    </SelectItem_Shadcn_>
+                                  ))}
+                                </SelectGroup_Shadcn_>
+                              </SelectContent_Shadcn_>
+                            </Select_Shadcn_>
+                          </FormControl_Shadcn_>
+                        </FormItemLayout>
+                      )}
+                    />
+                    <LogDrainFormItem
+                      type="text"
+                      value="username"
+                      label="Username"
+                      placeholder="username"
+                      formControl={form.control}
+                      description="Username for authentication from Last9 OTEL integration."
+                    />
+                    <LogDrainFormItem
+                      type="password"
+                      value="password"
+                      label="Password"
+                      placeholder="••••••••••••••••"
+                      formControl={form.control}
+                      description="Password for authentication from Last9 OTEL integration."
+                    />
+                  </div>
+                )}
                 <FormMessage_Shadcn_ />
               </div>
             </form>

apps/studio/components/interfaces/LogDrains/LogDrains.constants.tsx

@@ -1,6 +1,5 @@
 import { components } from 'api-types'
-import { Datadog, Grafana, Sentry } from 'icons'
-import { Axiom } from 'icons'
+import { Axiom, Datadog, Grafana, Last9, Sentry } from 'icons'
 import { BracesIcon, Cloud } from 'lucide-react'
 
 const iconProps = {
@@ -51,6 +50,12 @@ export const LOG_DRAIN_TYPES = [
       'Axiom is a data platform designed to efficiently collect, store, and analyze event and telemetry data at massive scale.',
     icon: <Axiom {...iconProps} fill="currentColor" strokeWidth={0} />,
   },
+  {
+    value: 'last9',
+    name: 'Last9',
+    description: 'Last9 is an observability platform for monitoring and telemetry data',
+    icon: <Last9 {...iconProps} fill="currentColor" strokeWidth={0} />,
+  },
 ] as const
 
 export const LOG_DRAIN_SOURCE_VALUES = LOG_DRAIN_TYPES.map((source) => source.value)
@@ -86,6 +91,17 @@ export const DATADOG_REGIONS = [
   },
 ] as const
 
+export const LAST9_REGIONS = [
+  {
+    label: 'US West 1',
+    value: 'US-WEST-1',
+  },
+  {
+    label: 'AP South 1',
+    value: 'AP-SOUTH-1',
+  },
+] as const
+
 export type LogDrainDatadogConfig = {
   api_key: string
   region: string

apps/studio/components/interfaces/LogDrains/LogDrains.tsx

@@ -5,11 +5,12 @@ import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-quer
 import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useTrack } from 'lib/telemetry/track'
 import { MoreHorizontal, Pencil, TrashIcon } from 'lucide-react'
-import React, { cloneElement, useState } from 'react'
+import { cloneElement, useState } from 'react'
 import { toast } from 'sonner'
 import {
   Button,
   Card,
+  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -20,7 +21,6 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  cn,
 } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -58,6 +58,7 @@ export function LogDrains({
   const sentryEnabled = useFlag('SentryLogDrain')
   const s3Enabled = useFlag('S3logdrain')
   const axiomEnabled = useFlag('axiomLogDrain')
+  const last9Enabled = useFlag('Last9LogDrain')
   const hasLogDrains = !!logDrains?.length
 
   const { mutate: deleteLogDrain } = useDeleteLogDrainMutation({
@@ -96,6 +97,7 @@ export function LogDrains({
             if (t.value === 'sentry') return sentryEnabled
             if (t.value === 's3') return s3Enabled
             if (t.value === 'axiom') return axiomEnabled
+            if (t.value === 'last9') return last9Enabled
             return true
           }).map((src) => (
             <LogDrainsCard

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

@@ -1,9 +1,8 @@
-import { Boxes, Lock } from 'lucide-react'
-import Link from 'next/link'
-
 import { useIsMFAEnabled } from 'common'
 import { ActionCard } from 'components/ui/ActionCard'
 import { useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query'
+import { Boxes, Lock } from 'lucide-react'
+import Link from 'next/link'
 import { Fragment } from 'react'
 import type { Organization } from 'types'
 import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
@@ -62,8 +61,8 @@ export const OrganizationCard = ({
   )
 
   if (isLink) {
-    return <Fragment>{renderContent()}</Fragment>
-  } else {
     return <Link href={href ?? `/org/${organization.slug}`}>{renderContent()}</Link>
+  } else {
+    return <Fragment>{renderContent()}</Fragment>
   }
 }

apps/studio/data/api-settings/create-and-expose-api-schema-mutation.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
+import { components } from 'api-types'
 import { configKeys } from 'data/config/keys'
 import { databaseKeys } from 'data/database/keys'
 import { handleError, patch } from 'data/fetchers'
@@ -11,13 +12,15 @@ export type CreateAndExposeAPISchemaVariables = {
   projectRef: string
   connectionString?: string | null
   existingPostgrestConfig: {
-    db_pool: any
+    db_pool?: number | null
     max_rows: number
     db_extra_search_path: string
     db_schema: string
   }
 }
 
+type UpdatePostgrestConfigBody = components['schemas']['UpdatePostgrestConfigBody']
+
 export async function createAndExposeApiSchema({
   projectRef,
   connectionString,
@@ -31,14 +34,17 @@ grant usage on schema api to anon, authenticated;
   await executeSql({ projectRef, connectionString, sql })
 
   const { db_extra_search_path, db_pool, db_schema, max_rows } = existingPostgrestConfig
+
+  const body: UpdatePostgrestConfigBody = {
+    max_rows,
+    db_extra_search_path,
+    db_schema: `api, ${db_schema}`,
+  }
+  if (db_pool) body.db_pool = db_pool
+
   const { error } = await patch('/platform/projects/{ref}/config/postgrest', {
     params: { path: { ref: projectRef } },
-    body: {
-      db_pool,
-      max_rows,
-      db_extra_search_path,
-      db_schema: `api, ${db_schema}`,
-    },
+    body,
   })
 
   if (error) handleError(error)

apps/studio/pages/project/[ref]/settings/log-drains.tsx

@@ -1,6 +1,5 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { IS_PLATFORM, useParams } from 'common'
-import { useFlag } from 'common'
+import { IS_PLATFORM, useFlag, useParams } from 'common'
 import { LogDrainDestinationSheetForm } from 'components/interfaces/LogDrains/LogDrainDestinationSheetForm'
 import { LogDrains } from 'components/interfaces/LogDrains/LogDrains'
 import { LOG_DRAIN_TYPES, LogDrainType } from 'components/interfaces/LogDrains/LogDrains.constants'
@@ -19,8 +18,7 @@ import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { DOCS_URL } from 'lib/constants'
 import { ChevronDown } from 'lucide-react'
-import { useState } from 'react'
-import { cloneElement } from 'react'
+import { cloneElement, useState } from 'react'
 import { toast } from 'sonner'
 import type { NextPageWithLayout } from 'types'
 import {
@@ -54,6 +52,7 @@ const LogDrainsSettings: NextPageWithLayout = () => {
   const sentryEnabled = useFlag('SentryLogDrain')
   const s3Enabled = useFlag('S3logdrain')
   const axiomEnabled = useFlag('axiomLogDrain')
+  const last9Enabled = useFlag('Last9LogDrain')
 
   const { data: logDrains } = useLogDrainsQuery(
     { ref },
@@ -111,8 +110,8 @@ const LogDrainsSettings: NextPageWithLayout = () => {
             setOpen(v)
           }}
           defaultValues={{
-            type: selectedLogDrain?.type || 'webhook',
             ...selectedLogDrain,
+            type: selectedLogDrain?.type ? selectedLogDrain.type : 'webhook',
           }}
           isLoading={isLoading}
           onSubmit={({ name, description, type, ...values }) => {
@@ -220,6 +219,7 @@ const LogDrainsSettings: NextPageWithLayout = () => {
                       if (t.value === 'sentry') return sentryEnabled
                       if (t.value === 's3') return s3Enabled
                       if (t.value === 'axiom') return axiomEnabled
+                      if (t.value === 'last9') return last9Enabled
                       return true
                     }).map((drainType) => (
                       <DropdownMenuItem