From 0751fe2bf4dd82d4bc01dca9c1aaf4366a4f91a2 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Wed, 13 May 2026 09:14:42 +0200
Subject: [PATCH] fix: logs explorer field references doesn't show all sources
 (#45828)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

The field reference side panel doesn't show all sources: there are
actually 11 items and users can't see them nor select them.

## Solution

Use a combobox instead

## Screenshots

Before:
<img width="667" height="414" alt="image"
src="https://github.com/user-attachments/assets/8017597f-e058-4306-8761-fb54d8c653ba"
/>

After:
<img width="1306" height="1642" alt="image"
src="https://github.com/user-attachments/assets/67579315-65cc-4bf9-9744-42f09b816772"
/>
<img width="1346" height="972" alt="image"
src="https://github.com/user-attachments/assets/13df449a-0bb1-41e4-934d-0bb18e9f06d9"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Schema selector in the Logs Query Panel is now a searchable popover
and shows the selected source in the button (or prompts “Select
source...”).
  * Field table now displays fields for the chosen schema only.

* **Refactor**
* UI simplified for faster schema selection and clearer field reference
browsing.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45828)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../Settings/Logs/LogsQueryPanel.tsx          | 106 ++++++++++++------
 1 file changed, 72 insertions(+), 34 deletions(-)

diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index 7471471e430..b1d57775ac1 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -1,18 +1,27 @@
 import { IS_PLATFORM } from 'common'
-import { BookOpen, Check, ChevronDown, Copy, ExternalLink, X } from 'lucide-react'
+import { BookOpen, Check, ChevronDown, ChevronsUpDown, Copy, ExternalLink, X } from 'lucide-react'
 import Link from 'next/link'
 import { ReactNode, useEffect, useState } from 'react'
 import { logConstants } from 'shared-data'
 import {
   Badge,
   Button,
+  cn,
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
   copyToClipboard,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Popover_Shadcn_,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
   SidePanel,
-  Tabs,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
@@ -80,6 +89,9 @@ const LogsQueryPanel = ({
     setSelectedDatePickerValue(value)
   }, [value.from, value.to, value.text, value.isHelper])
 
+  const [open, setOpen] = useState(false)
+  const [selectedSchema, setSelectedSchema] = useState(logConstants.schemas[0])
+
   return (
     <div className="flex items-center border-b bg-surface-100 h-(--header-height)">
       <div className="flex w-full items-center justify-between px-4 md:px-5 py-2 overflow-x-scroll no-scrollbar">
@@ -220,38 +232,64 @@ const LogsQueryPanel = ({
               </div>
             </SidePanel.Content>
             <SidePanel.Separator />
-            <Tabs
-              scrollable
-              size="small"
-              type="underlined"
-              defaultActiveId="edge_logs"
-              listClassNames="px-2"
-            >
-              {logConstants.schemas.map((schema) => (
-                <Tabs.Panel
-                  key={schema.reference}
-                  id={schema.reference}
-                  label={schema.name}
-                  className="px-4 pb-4"
-                >
-                  <Table
-                    head={[
-                      <Table.th className="text-xs p-2!" key="path">
-                        Path
-                      </Table.th>,
-                      <Table.th key="type" className="text-xs p-2!">
-                        Type
-                      </Table.th>,
-                    ]}
-                    body={schema.fields
-                      .sort((a: any, b: any) => a.path - b.path)
-                      .map((field) => (
-                        <Field key={field.path} field={field} />
-                      ))}
-                  />
-                </Tabs.Panel>
-              ))}
-            </Tabs>
+
+            <div className="px-4 pb-4 flex flex-col gap-4">
+              <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+                <PopoverTrigger_Shadcn_ asChild>
+                  <Button
+                    type="default"
+                    role="combobox"
+                    size={'small'}
+                    aria-expanded={open}
+                    className="w-full justify-between"
+                    iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+                  >
+                    {value ? selectedSchema?.name : 'Select source...'}
+                  </Button>
+                </PopoverTrigger_Shadcn_>
+                <PopoverContent_Shadcn_ className="p-0" sameWidthAsTrigger>
+                  <Command_Shadcn_>
+                    <CommandInput_Shadcn_ placeholder="Search source..." />
+                    <CommandList_Shadcn_>
+                      <CommandEmpty_Shadcn_>No source found.</CommandEmpty_Shadcn_>
+                      <CommandGroup_Shadcn_>
+                        {logConstants.schemas.map((schema) => (
+                          <CommandItem_Shadcn_
+                            key={schema.reference}
+                            value={schema.reference}
+                            onSelect={() => {
+                              setSelectedSchema(schema)
+                              setOpen(false)
+                            }}
+                          >
+                            <Check
+                              className={cn(
+                                'mr-2 h-4 w-4',
+                                selectedSchema === schema ? 'opacity-100' : 'opacity-0'
+                              )}
+                            />
+                            {schema.name}
+                          </CommandItem_Shadcn_>
+                        ))}
+                      </CommandGroup_Shadcn_>
+                    </CommandList_Shadcn_>
+                  </Command_Shadcn_>
+                </PopoverContent_Shadcn_>
+              </Popover_Shadcn_>
+              <Table
+                head={[
+                  <Table.th className="text-xs p-2!" key="path">
+                    Path
+                  </Table.th>,
+                  <Table.th key="type" className="text-xs p-2!">
+                    Type
+                  </Table.th>,
+                ]}
+                body={selectedSchema.fields.map((field) => (
+                  <Field key={field.path} field={field} />
+                ))}
+              />
+            </div>
           </SidePanel>
         </div>
       </div>