feat(studio): log drains entry point from logs (supabase#40095)

* fix: field reference button padding

* fix: remove overriding button style on field ref button

* fix: tidy up the asChild stuff on side panel trigger element

* fix: bunch of type errors on logs sidebar

Theres a temp any fix in there dont kill me frontend team :D

* feat: add to new logs sidebar too

* feat: add to download dropdown menus

* chore: alphabetical order on new logs dropdown

* chore: add target blank to sheet footer

* fix: gap between buttons on old logs toolbar

* feat: add a separator on old logs

* style: new logs top buttons correct types

Author: kemaldotearth

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

@@ -612,6 +612,7 @@ export function LogDrainDestinationSheetForm({
               <span>See full pricing breakdown</span>{' '}
               <Link
                 href={`${DOCS_URL}/guides/platform/manage-your-usage/log-drains`}
+                target="_blank"
                 className="text-foreground underline underline-offset-2 decoration-foreground-muted hover:decoration-foreground transition-all"
               >
                 here

apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx

@@ -206,7 +206,6 @@ const LogsQueryPanel = ({
             hideFooter
             triggerElement={
               <Button
-                asChild // ?: we don't want a button inside a button
                 type="text"
                 onClick={() => setShowReference(true)}
                 icon={<BookOpen />}

apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx

@@ -94,12 +94,12 @@ const PreviewFilterPanel = ({
   return (
     <div
       className={cn(
-        'flex w-full items-center justify-between',
+        'flex w-full items-center justify-between overflow-x-scroll no-scrollbar',
         condensedLayout ? ' p-3' : '',
         className
       )}
     >
-      <div className="flex flex-row items-center gap-x-2">
+      <div className="flex flex-row items-center gap-x-2 mr-2">
         <form
           id="log-panel-search"
           onSubmit={(e) => {

apps/studio/components/interfaces/UnifiedLogs/components/DownloadLogsButton.tsx

@@ -1,5 +1,6 @@
 import saveAs from 'file-saver'
 import { Download } from 'lucide-react'
+import Link from 'next/link'
 import Papa from 'papaparse'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
@@ -91,13 +92,18 @@ export const DownloadLogsButton = ({ searchParameters }: DownloadLogsButtonProps
       <DropdownMenu>
         <DropdownMenuTrigger>
           <ButtonTooltip
-            type="outline"
+            type="default"
             className="w-[26px]"
             icon={<Download className="text-foreground" />}
             tooltip={{ content: { side: 'bottom', text: 'Download logs' } }}
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-36">
+          <DropdownMenuItem asChild className="gap-x-2">
+            <Link href={`/project/${ref}/settings/log-drains`}>
+              <p>Add a Log Drain</p>
+            </Link>
+          </DropdownMenuItem>
           <DropdownMenuItem onClick={() => setSelectedFormat('csv')}>
             <p>Download as CSV</p>
           </DropdownMenuItem>

apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx

@@ -1,7 +1,7 @@
 import { ChevronRight, CircleHelpIcon, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
 import { IS_PLATFORM, useFlag, useParams } from 'common'
 import {
@@ -32,6 +32,7 @@ import {
 } from 'ui-patterns/InnerSideMenu'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel'
+import { LOG_DRAIN_TYPES } from 'components/interfaces/LogDrains/LogDrains.constants'
 
 const SupaIcon = ({ className }: { className?: string }) => {
   return (
@@ -230,7 +231,7 @@ export function LogsSidebarMenuV2() {
   })
 
   return (
-    <div className="pb-12 relative">
+    <div className="pb-4 relative">
       {IS_PLATFORM && !unifiedLogsFlagEnabled && (
         <FeaturePreviewSidebarPanel
           className="mx-4 mt-4"
@@ -316,14 +317,14 @@ export function LogsSidebarMenuV2() {
         <>
           <SidebarCollapsible title="Collections" defaultOpen={true}>
             {filteredLogs.map((collection) => {
-              const isItemActive = isActive(collection.url)
+              const isItemActive = isActive(collection?.url ?? '')
               return (
                 <LogsSidebarItem
-                  key={collection.key}
+                  key={collection?.key ?? ''}
                   isActive={isItemActive}
-                  href={collection.url}
+                  href={collection?.url ?? ''}
                   icon={<SupaIcon className="text-foreground-light" />}
-                  label={collection.name}
+                  label={collection?.name ?? ''}
                 />
               )
             })}
@@ -366,9 +367,29 @@ export function LogsSidebarMenuV2() {
           />
         )}
         {savedQueries.map((query) => (
-          <SavedQueriesItem item={query} key={query.id} />
+          <SavedQueriesItem item={query as any} key={query.id} /> // kemal: i know, i know, temp any fix.
         ))}
       </SidebarCollapsible>
+
+      <Separator className="my-4" />
+
+      <FeaturePreviewSidebarPanel
+        className="mx-4 mt-4"
+        title="Capture your logs"
+        description="Send logs to your preferred observability or storage platform."
+        illustration={
+          <div className="flex items-center gap-4">
+            {LOG_DRAIN_TYPES.map((type) =>
+              React.cloneElement(type.icon, { height: 20, width: 20 })
+            )}
+          </div>
+        }
+        actions={
+          <Button asChild type="default">
+            <Link href={`/project/${ref}/settings/log-drains`}>Go to Log Drains</Link>
+          </Button>
+        }
+      />
     </div>
   )
 }

apps/studio/components/ui/DataTable/DataTableToolbar.tsx

@@ -37,7 +37,7 @@ export function DataTableToolbar({ renderActions }: DataTableToolbarProps) {
           <TooltipTrigger asChild>
             <Button
               size="tiny"
-              type="outline"
+              type="default"
               icon={open ? <PanelLeftClose /> : <PanelLeftOpen />}
               onClick={() => setOpen((prev) => !prev)}
               className="hidden sm:flex"

apps/studio/components/ui/DataTable/DataTableViewOptions.tsx

@@ -37,7 +37,7 @@ export function DataTableViewOptions() {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <ButtonTooltip
-          type="outline"
+          type="default"
           size="tiny"
           role="combobox"
           aria-expanded={open}

apps/studio/components/ui/DataTable/FilterSideBar.tsx

@@ -8,6 +8,9 @@ import { DateRangeDisabled } from './DataTable.types'
 import { DataTableFilterControls } from './DataTableFilters/DataTableFilterControls'
 import { DataTableResetButton } from './DataTableResetButton'
 import { useDataTable } from './providers/DataTableProvider'
+import Link from 'next/link'
+import { LOG_DRAIN_TYPES } from 'components/interfaces/LogDrains/LogDrains.constants'
+import React from 'react'
 
 interface FilterSideBarProps {
   dateRangeDisabled?: DateRangeDisabled
@@ -60,6 +63,23 @@ export function FilterSideBar({ dateRangeDisabled }: FilterSideBarProps) {
           />
         )}
         <DataTableFilterControls dateRangeDisabled={dateRangeDisabled} />
+        <FeaturePreviewSidebarPanel
+          className="mx-2 my-4"
+          title="Capture your logs"
+          description="Send logs to your preferred observability or storage platform."
+          illustration={
+            <div className="flex items-center gap-4">
+              {LOG_DRAIN_TYPES.map((type) =>
+                React.cloneElement(type.icon, { height: 20, width: 20 })
+              )}
+            </div>
+          }
+          actions={
+            <Button asChild type="default">
+              <Link href={`/project/${ref}/settings/log-drains`}>Go to Log Drains</Link>
+            </Button>
+          }
+        />
       </div>
     </ResizablePanel>
   )

apps/studio/components/ui/DataTable/RefreshButton.tsx

@@ -10,7 +10,7 @@ export const RefreshButton = ({ isLoading, onRefresh }: RefreshButtonProps) => {
   return (
     <ButtonTooltip
       size="tiny"
-      type="outline"
+      type="default"
       disabled={isLoading}
       onClick={onRefresh}
       className="w-[26px]"

apps/studio/components/ui/DownloadResultsButton.tsx

@@ -1,9 +1,11 @@
 import saveAs from 'file-saver'
-import { ChevronDown, Copy, Download } from 'lucide-react'
+import { ChevronDown, Copy, Download, Settings } from 'lucide-react'
 import { markdownTable } from 'markdown-table'
 import Papa from 'papaparse'
 import { useMemo } from 'react'
 import { toast } from 'sonner'
+import Link from 'next/link'
+import { useParams } from 'common'
 
 import {
   Button,
@@ -37,6 +39,7 @@ export const DownloadResultsButton = ({
   onCopyAsMarkdown,
   onCopyAsJSON,
 }: DownloadResultsButtonProps) => {
+  const { ref } = useParams()
   // [Joshen] Ensure JSON values are stringified for CSV and Markdown
   const formattedResults = results.map((row) => {
     const r = { ...row }
@@ -106,9 +109,11 @@ export const DownloadResultsButton = ({
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align={align} className="w-44">
-        <DropdownMenuItem className="gap-x-2" onClick={() => downloadAsCSV()}>
-          <Download size={14} />
-          <p>Download CSV</p>
+        <DropdownMenuItem asChild className="gap-x-2">
+          <Link href={`/project/${ref}/settings/log-drains`}>
+            <Settings size={14} />
+            <p>Add a Log Drain</p>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuItem onClick={copyAsMarkdown} className="gap-x-2">
           <Copy size={14} />
@@ -118,6 +123,10 @@ export const DownloadResultsButton = ({
           <Copy size={14} />
           <p>Copy as JSON</p>
         </DropdownMenuItem>
+        <DropdownMenuItem className="gap-x-2" onClick={() => downloadAsCSV()}>
+          <Download size={14} />
+          <p>Download CSV</p>
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )