adds log drains pricing section (#28425)

* update descriptions

* add pricing section

* fix docs link

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

@@ -35,7 +35,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
 import { ReactNode, useEffect, useState } from 'react'
-import { TrashIcon } from 'lucide-react'
+import { ExternalLink, TrashIcon } from 'lucide-react'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 import Link from 'next/link'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@ui/components/shadcn/ui/select'
@@ -211,7 +211,7 @@ export function LogDrainDestinationSheetForm({
         <SheetHeader>
           <SheetTitle>Add destination</SheetTitle>
         </SheetHeader>
-        <SheetSection className="!px-0">
+        <SheetSection className="!px-0 !pb-0">
           <Form_Shadcn_ {...form}>
             <form
               id={FORM_ID}
@@ -243,7 +243,11 @@ export function LogDrainDestinationSheetForm({
                   formControl={form.control}
                 /> */}
                 {mode === 'create' && (
-                  <FormItemLayout layout="horizontal" label="Type">
+                  <FormItemLayout
+                    layout="horizontal"
+                    label="Type"
+                    description={LOG_DRAIN_TYPES.find((t) => t.value === type)?.description || ''}
+                  >
                     <Select
                       defaultValue={defaultType}
                       value={form.getValues('type')}
@@ -264,9 +268,6 @@ export function LogDrainDestinationSheetForm({
                           </SelectItem>
                         ))}
                       </SelectContent>
-                      <FormDescription className="mt-2">
-                        {LOG_DRAIN_TYPES.find((t) => t.value === type)?.description}
-                      </FormDescription>
                     </Select>
                   </FormItemLayout>
                 )}
@@ -325,14 +326,14 @@ export function LogDrainDestinationSheetForm({
                       )}
                     /> */}
 
-                    <div className="space-y-2">
-                      <div className="px-content">
+                    <div className="border-t">
+                      <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
                         <FormLabel_Shadcn_>Custom Headers</FormLabel_Shadcn_>
                         <p className="text-xs text-foreground-lighter">
                           Set custom headers when draining logs to the Endpoint URL
                         </p>
                       </div>
-                      <div className="divide-y border-y">
+                      <div className="divide-y">
                         {hasHeaders &&
                           Object.keys(headers || {})?.map((headerKey) => (
                             <div
@@ -381,7 +382,11 @@ export function LogDrainDestinationSheetForm({
                       name="region"
                       control={form.control}
                       render={({ field }) => (
-                        <FormItemLayout layout="horizontal" label={'Region'}>
+                        <FormItemLayout
+                          layout="horizontal"
+                          label={'Region'}
+                          description="The Datadog region to send logs to."
+                        >
                           <FormControl_Shadcn_>
                             <Select_Shadcn_ value={field.value} onValueChange={field.onChange}>
                               <SelectTrigger_Shadcn_ className="col-span-3">
@@ -416,7 +421,7 @@ export function LogDrainDestinationSheetForm({
                 e.stopPropagation()
                 addHeader()
               }}
-              className="flex gap-2 mt-4 items-center px-content"
+              className="flex border-t py-4 gap-4 items-center px-content"
             >
               <label className="sr-only" htmlFor="header-name">
                 Header name
@@ -446,7 +451,33 @@ export function LogDrainDestinationSheetForm({
           )}
         </SheetSection>
 
-        <SheetSection></SheetSection>
+        <SheetSection className="border-t mt-4 bg-background-alternative-200">
+          <FormItemLayout
+            isReactForm={false}
+            layout="horizontal"
+            label={
+              <div className="text-foreground-light">
+                Additional drain cost
+                <div className="text-foreground-lighter mt-2">
+                  <Link
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline flex gap-1 items-center"
+                    href="https://supabase.com/docs/guides/platform/log-drains"
+                  >
+                    Documentation <ExternalLink className="w-4 h-4" />
+                  </Link>
+                </div>
+              </div>
+            }
+          >
+            <ul className="text-right text-foreground-light">
+              <li className="text-brand-link text-base">$60 / drain / month</li>
+              <li>$0.20 per million events</li>
+              <li>$0.09 per GB</li>
+            </ul>
+          </FormItemLayout>
+        </SheetSection>
 
         <SheetFooter className="p-content">
           <Button form={FORM_ID} loading={isLoading} htmlType="submit" type="primary">