Feat/logs preview (supabase#37230)

* Add unified logs feature preview and toggle controls

Introduces a unified logs feature preview, allowing users to enable or disable a new logs interface with enhanced filtering and real-time updates. Adds context hooks, UI components (UnifiedLogsPreview, LogsSwitchBox), and conditional logic to display the new interface or revert to the old one. Updates routing and feature preview modal to support the unified logs preview, and extends local storage keys for feature flag management.

* Refactor log UI components and remove LogsSwitchBox

Replaced custom SVG icons with Lucide React icons in LogsSidebarMenuV2 and FilterSideBar for consistency and maintainability. Removed the unused LogsSwitchBox component and cleaned up related imports in FeaturePreviewModal.

* Refactor sidebar panels to use FeaturePreviewSidebarPanel

Introduces a reusable FeaturePreviewSidebarPanel component and replaces InnerSideBarEmptyPanel usages in LogsSidebarMenuV2 and FilterSideBar. Removes unified logs feature flag logic from Sidebar and NavigationBar.utils, simplifying route generation and UI logic.

* Refine sidebar panel styles and remove unused icon

Removed the unused Sparkles icon import from LogsSidebarMenuV2. Updated FeaturePreviewSidebarPanel to use 'bg-muted/10' for background, simplified class names for text alignment, and cleaned up redundant text-left classes for improved styling consistency.

* Update FeaturePreviewModal.tsx

* Update FeaturePreview.constants.tsx

* Clean up

* Final clean up

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: MildTomato

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreview.constants.tsx

@@ -1,6 +1,13 @@
 import { LOCAL_STORAGE_KEYS } from 'common'
 
 export const FEATURE_PREVIEWS = [
+  {
+    key: LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS,
+    name: 'New Logs Interface',
+    discussionsUrl: 'https://github.com/orgs/supabase/discussions/37234',
+    isNew: true,
+    isPlatformOnly: true,
+  },
   {
     key: LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0,
     name: 'Branching 2.0',

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx

@@ -90,6 +90,14 @@ export const useIsInlineEditorEnabled = () => {
   return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR]
 }
 
+export const useUnifiedLogsPreview = () => {
+  const { flags, onUpdateFlag } = useFeaturePreviewContext()
+  const isEnabled = flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]
+  const enable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, true)
+  const disable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, false)
+  return { isEnabled, enable, disable }
+}
+
 export const useIsRealtimeSettingsEnabled = () => {
   const { flags } = useFeaturePreviewContext()
   return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_REALTIME_SETTINGS]
@@ -111,6 +119,7 @@ export const useFeaturePreviewModal = () => {
   const isRealtimeSettingsEnabled = useIsRealtimeSettingsFFEnabled()
   const gitlessBranchingEnabled = useFlag('gitlessBranching')
   const advisorRulesEnabled = useFlag('advisorRules')
+  const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
 
   const selectedFeatureKeyFromQuery = featurePreviewModal?.trim() ?? null
   const showFeaturePreviewModal = selectedFeatureKeyFromQuery !== null
@@ -125,19 +134,28 @@ export const useFeaturePreviewModal = () => {
           return gitlessBranchingEnabled
         case 'supabase-ui-advisor-rules':
           return advisorRulesEnabled
+        case 'supabase-ui-preview-unified-logs':
+          return isUnifiedLogsPreviewAvailable
         default:
           return true
       }
     },
-    [isRealtimeSettingsEnabled, gitlessBranchingEnabled, advisorRulesEnabled]
+    [
+      isRealtimeSettingsEnabled,
+      gitlessBranchingEnabled,
+      advisorRulesEnabled,
+      isUnifiedLogsPreviewAvailable,
+    ]
   )
 
-  const selectedFeatureKey = !selectedFeatureKeyFromQuery
-    ? FEATURE_PREVIEWS.filter((feature) => isFeaturePreviewReleasedToPublic(feature))[0].key
-    : selectedFeatureKeyFromQuery
+  const selectedFeatureKey = (
+    !selectedFeatureKeyFromQuery
+      ? FEATURE_PREVIEWS.filter((feature) => isFeaturePreviewReleasedToPublic(feature))[0].key
+      : selectedFeatureKeyFromQuery
+  ) as (typeof FEATURE_PREVIEWS)[number]['key']
 
   const selectFeaturePreview = useCallback(
-    (featureKey: string) => {
+    (featureKey: (typeof FEATURE_PREVIEWS)[number]['key']) => {
       setFeaturePreviewModal(featureKey)
     },
     [setFeaturePreviewModal]

apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx

@@ -15,6 +15,7 @@ import { FEATURE_PREVIEWS } from './FeaturePreview.constants'
 import { useFeaturePreviewContext, useFeaturePreviewModal } from './FeaturePreviewContext'
 import { InlineEditorPreview } from './InlineEditorPreview'
 import { RealtimeSettingsPreview } from './RealtimeSettingsPreview'
+import { UnifiedLogsPreview } from './UnifiedLogsPreview'
 
 const FEATURE_PREVIEW_KEY_TO_CONTENT: {
   [key: string]: ReactNode
@@ -25,6 +26,7 @@ const FEATURE_PREVIEW_KEY_TO_CONTENT: {
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_INLINE_EDITOR]: <InlineEditorPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL]: <APISidePanelPreview />,
   [LOCAL_STORAGE_KEYS.UI_PREVIEW_CLS]: <CLSPreview />,
+  [LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]: <UnifiedLogsPreview />,
 }
 
 const FeaturePreviewModal = () => {

apps/studio/components/interfaces/App/FeaturePreview/UnifiedLogsPreview.tsx

@@ -0,0 +1,36 @@
+import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
+import { BASE_PATH } from 'lib/constants'
+import Image from 'next/image'
+
+export const UnifiedLogsPreview = () => {
+  const { ref } = useParams()
+
+  return (
+    <div className="space-y-2">
+      <Image
+        alt="new-logs-preview"
+        src={`${BASE_PATH}/img/previews/new-logs-preview.png`}
+        width={1296}
+        height={900}
+        className="rounded border mb-4"
+      />
+      <p className="text-foreground-light text-sm mb-4">
+        Experience our enhanced logs interface with improved filtering, real-time updates, and a
+        unified view across all your services. Built for better performance and easier debugging.
+      </p>
+      <div className="space-y-2 !mt-4">
+        <p className="text-sm">Enabling this preview will:</p>
+        <ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
+          <li>
+            Replace the current logs interface on the{' '}
+            <InlineLink href={`/project/${ref}/logs`}>logs page</InlineLink> with a unified view
+          </li>
+          <li>Provide enhanced filtering capabilities and real-time log streaming</li>
+          <li>Improve performance with optimized data loading and virtualization</li>
+          <li>Offer a more modern interface with better search and navigation</li>
+        </ul>
+      </div>
+    </div>
+  )
+}

apps/studio/components/interfaces/Sidebar.tsx

@@ -224,7 +224,6 @@ const ProjectLinks = () => {
   const { securityLints, errorLints } = useLints()
 
   const showWarehouse = useFlag('warehouse')
-  const showUnifiedLogs = useFlag('unifiedLogs')
 
   const activeRoute = router.pathname.split('/')[3]
 
@@ -247,7 +246,7 @@ const ProjectLinks = () => {
     storage: storageEnabled,
     realtime: realtimeEnabled,
   })
-  const otherRoutes = generateOtherRoutes(ref, project, { unifiedLogs: showUnifiedLogs })
+  const otherRoutes = generateOtherRoutes(ref, project)
   const settingsRoutes = generateSettingsRoutes(ref, project)
 
   return (

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

@@ -1,14 +1,19 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { ChevronRight, FilePlus, Plus } from 'lucide-react'
+import { ChevronRight, CircleHelpIcon, FilePlus, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 
 import { IS_PLATFORM, useParams } from 'common'
+import {
+  useFeaturePreviewModal,
+  useUnifiedLogsPreview,
+} from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { CreateWarehouseCollectionModal } from 'components/interfaces/DataWarehouse/CreateWarehouseCollection'
 import { WarehouseMenuItem } from 'components/interfaces/DataWarehouse/WarehouseMenuItem'
 import SavedQueriesItem from 'components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
 import { LogsSidebarItem } from 'components/interfaces/Settings/Logs/SidebarV2/SidebarItem'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useWarehouseCollectionsQuery } from 'data/analytics/warehouse-collections-query'
 import { useWarehouseTenantQuery } from 'data/analytics/warehouse-tenant-query'
 import { useContentQuery } from 'data/content/content-query'
@@ -17,6 +22,7 @@ import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useFlag } from 'hooks/ui/useFlag'
 import {
+  Badge,
   Button,
   Collapsible_Shadcn_,
   CollapsibleContent_Shadcn_,
@@ -37,6 +43,7 @@ import {
   InnerSideMenuItem,
 } from 'ui-patterns/InnerSideMenu'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel'
 
 const SupaIcon = ({ className }: { className?: string }) => {
   return (
@@ -82,7 +89,11 @@ export function SidebarCollapsible({
 export function LogsSidebarMenuV2() {
   const router = useRouter()
   const { ref } = useParams() as { ref: string }
+
   const warehouseEnabled = useFlag('warehouse')
+  const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
+  const { selectFeaturePreview } = useFeaturePreviewModal()
+  const { enable: enableUnifiedLogs } = useUnifiedLogsPreview()
 
   const [searchText, setSearchText] = useState('')
   const [createCollectionOpen, setCreateCollectionOpen] = useState(false)
@@ -213,6 +224,36 @@ export function LogsSidebarMenuV2() {
 
   return (
     <div className="pb-12 relative">
+      {isUnifiedLogsPreviewAvailable && (
+        <FeaturePreviewSidebarPanel
+          className="mx-4 mt-4"
+          title="New Logs Interface"
+          description="Unified view across all services with improved filtering and real-time updates"
+          illustration={<Badge variant="brand">Feature Preview</Badge>}
+          actions={
+            <>
+              <Button
+                size="tiny"
+                type="default"
+                onClick={() => {
+                  enableUnifiedLogs()
+                  router.push(`/project/${ref}/logs`)
+                }}
+              >
+                Enable preview
+              </Button>
+              <ButtonTooltip
+                type="default"
+                className="px-1.5"
+                icon={<CircleHelpIcon />}
+                onClick={() => selectFeaturePreview('supabase-ui-preview-unified-logs')}
+                tooltip={{ content: { side: 'bottom', text: 'More information' } }}
+              />
+            </>
+          }
+        />
+      )}
+
       <div className="flex gap-2 p-4 items-center sticky top-0 bg-background-200 z-[1]">
         <InnerSideBarFilters className="w-full p-0 gap-0">
           <InnerSideBarFilterSearchInput

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.utils.tsx

@@ -1,4 +1,4 @@
-import { Blocks, FileText, Lightbulb, List, Logs, Settings } from 'lucide-react'
+import { Blocks, FileText, Lightbulb, List, Settings } from 'lucide-react'
 
 import { ICON_SIZE, ICON_STROKE_WIDTH } from 'components/interfaces/Sidebar'
 import { generateAuthMenu } from 'components/layouts/AuthLayout/AuthLayout.utils'
@@ -116,16 +116,10 @@ export const generateProductRoutes = (
   ]
 }
 
-export const generateOtherRoutes = (
-  ref?: string,
-  project?: Project,
-  features?: { unifiedLogs?: boolean }
-): Route[] => {
+export const generateOtherRoutes = (ref?: string, project?: Project, features?: {}): Route[] => {
   const isProjectBuilding = project?.status === PROJECT_STATUS.COMING_UP
   const buildingUrl = `/project/${ref}`
 
-  const showUnifiedLogs = features?.unifiedLogs ?? false
-
   return [
     {
       key: 'advisors',
@@ -149,16 +143,6 @@ export const generateOtherRoutes = (
       icon: <List size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
       link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/logs`),
     },
-    ...(showUnifiedLogs
-      ? [
-          {
-            key: 'unified-logs',
-            label: 'Unified Logs',
-            icon: <Logs size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
-            link: ref && (isProjectBuilding ? buildingUrl : `/project/${ref}/unified-logs`),
-          },
-        ]
-      : []),
     {
       key: 'api',
       label: 'API Docs',

apps/studio/components/layouts/UnifiedLogsLayout/UnifiedLogsLayout.tsx

@@ -1,4 +1,10 @@
-import { cn, ResizablePanel } from 'ui'
+import { useRouter } from 'next/router'
+
+import { useParams } from 'common'
+import { useUnifiedLogsPreview } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import { useFlag } from 'hooks/ui/useFlag'
+import { Button, cn, ResizablePanel } from 'ui'
+import { FeaturePreviewSidebarPanel } from '../FeaturePreviewSidebarPanel'
 import { DateRangeDisabled } from './DataTable.types'
 import { DataTableFilterControls } from './DataTableFilters/DataTableFilterControls'
 import { DataTableResetButton } from './DataTableResetButton'
@@ -9,8 +15,18 @@ interface FilterSideBarProps {
 }
 
 export function FilterSideBar({ dateRangeDisabled }: FilterSideBarProps) {
+  const router = useRouter()
+  const { ref } = useParams()
   const { table } = useDataTable()
 
+  const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
+  const { disable: disableUnifiedLogs } = useUnifiedLogsPreview()
+
+  const handleGoBackToOldLogs = () => {
+    disableUnifiedLogs()
+    router.push(`/project/${ref}/logs/explorer`)
+  }
+
   return (
     <ResizablePanel
       order={1}
@@ -24,13 +40,26 @@ export function FilterSideBar({ dateRangeDisabled }: FilterSideBarProps) {
         'hidden sm:flex'
       )}
     >
-      <div className="border-b border-border px-2 md:top-0">
+      <div className="border-b border-border px-4 md:top-0">
         <div className="flex h-[48px] items-center justify-between gap-3">
-          <p className="px-2 text-foreground text-lg">Logs</p>
-          <div>{table.getState().columnFilters.length ? <DataTableResetButton /> : null}</div>
+          <p className="text-foreground text-lg">Logs</p>
+          {table.getState().columnFilters.length ? <DataTableResetButton /> : null}
         </div>
       </div>
+
       <div className="flex-1 p-2 sm:overflow-y-scroll">
+        {isUnifiedLogsPreviewAvailable && (
+          <FeaturePreviewSidebarPanel
+            className="mx-2 mt-2 mb-3"
+            title="Go back to old logs"
+            description="Use the traditional interface"
+            actions={
+              <Button type="default" size="tiny" onClick={handleGoBackToOldLogs}>
+                Switch back
+              </Button>
+            }
+          />
+        )}
         <DataTableFilterControls dateRangeDisabled={dateRangeDisabled} />
       </div>
     </ResizablePanel>

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react'
+import { cn } from 'ui'
+
+interface FeaturePreviewSidebarPanelProps {
+  title: string
+  description: string
+  illustration?: ReactNode
+  actions?: ReactNode
+  className?: string
+}
+
+export function FeaturePreviewSidebarPanel({
+  title,
+  description,
+  illustration,
+  actions,
+  className,
+}: FeaturePreviewSidebarPanelProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border p-4 space-y-3',
+        'bg-muted/10 border-border/50',
+        // Force left alignment and override any centering
+        'text-left [&_*]:text-left [&_div]:items-start',
+        className
+      )}
+    >
+      {illustration && <div className="flex justify-start items-start">{illustration}</div>}
+
+      <div className="space-y-1">
+        <h3 className="font-medium text-sm text-foreground">{title}</h3>
+        <p className="text-xs text-foreground-light">{description}</p>
+      </div>
+
+      {actions && <div className="flex justify-start items-start gap-x-2">{actions}</div>}
+    </div>
+  )
+}