-
-
-
-
+
+
+ onLanguageChange('sql')}
onClick={() => onLanguageChange('sql')}
>
SQL
-
-
+ onLanguageChange('javascript')}
onClick={() => onLanguageChange('javascript')}
>
JavaScript
-
-
-
-
+
+
+
+
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
index af6ef46f85790..983c187e708d1 100644
--- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -6,7 +6,7 @@ import { Check, ChevronsUpDown, ExternalLink } from 'lucide-react'
import Link from 'next/link'
import type { UseFormReturn } from 'react-hook-form'
import { toast } from 'sonner'
-import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, FormControl, FormField } from 'ui'
+import { Button, cn, CommandGroup, CommandItem, FormControl, FormField } from 'ui'
import { Admonition } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
@@ -99,8 +99,8 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
)
}}
renderActions={(setOpen) => (
-
-
+ {
field.onChange(NO_PROJECT_MARKER)
@@ -111,8 +111,8 @@ function ProjectSelector({ form, orgSlug, projectRef }: ProjectSelectorProps) {
No specific project
-
-
+
+
)}
/>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index 887951359dce3..b01df7bc81bf1 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -17,13 +17,13 @@ import {
AlertTitle,
Button,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
CriticalIcon,
Input,
InputGroup,
@@ -209,22 +209,22 @@ const ColumnType = ({
-
-
+
- Type not found.
+ Type not found.
-
+
-
+
{POSTGRES_DATA_TYPE_OPTIONS.map((option: PostgresDataTypeOption) => {
const isSelected = matchesBuiltin(option.name, value)
return (
-
{isSelected ? : ''}
-
+
)
})}
-
+
{enumTypes.length > 0 && (
<>
-
-
+
+
{enumTypes.map((option) => {
const isSelected = matchesEnum(option, value)
return (
-
)}
-
+
)
})}
-
+
)}
-
-
+
+
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index 9bb7473f3b3f7..d203b1232eacd 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -7,11 +7,11 @@ import {
Button,
Checkbox,
cn,
- Command_Shadcn_,
- CommandGroup_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandGroup,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
Input,
Popover,
PopoverContent,
@@ -167,16 +167,16 @@ export const Column = ({
Involved in {relations.length} foreign key{relations.length > 1 ? 's' : ''}
-
-
-
+
+
+
{relations.map((relation, idx) => {
const key = String(relation?.id ?? `${column.id}-relation-${idx}`)
const status = getRelationStatus(relation)
if (status === 'REMOVE') return null
return (
-
)}
-
+
)
})}
-
-
-
-
+
+
+ onEditForeignKey()}
onClick={() => onEditForeignKey()}
>
Add foreign key relation
-
-
-
-
+
+
+
+
)}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx b/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx
new file mode 100644
index 0000000000000..2edf080d685e4
--- /dev/null
+++ b/apps/studio/components/interfaces/UnifiedLogs/RowSelectionHeader.tsx
@@ -0,0 +1,114 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { Copy, X } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+ copyToClipboard,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from 'ui'
+
+import { type LogData } from '../Settings/Logs/Logs.types'
+import {
+ buildLogsPrompt,
+ formatLogsAsJson,
+ formatLogsAsMarkdown,
+} from '../Settings/Logs/Logs.utils'
+import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { useDataTable } from '@/components/ui/DataTable/providers/DataTableProvider'
+import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
+import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
+
+// TODO - format Logs as JSON, as markdown, and as prompt
+
+export const RowSelectionHeader = () => {
+ const { openSidebar } = useSidebarManagerSnapshot()
+ const aiSnap = useAiAssistantStateSnapshot()
+
+ const { table } = useDataTable()
+ const selectedRows = table.getSelectedRowModel().rows.map((x) => x.original) as LogData[]
+
+ const handleOpenAiAssistant = () => {
+ const prompt = buildLogsPrompt(selectedRows)
+ openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
+ aiSnap.newChat({ initialMessage: prompt })
+ }
+
+ const onCopy = (format: 'json' | 'markdown') => {
+ const text =
+ format === 'json' ? formatLogsAsJson(selectedRows) : formatLogsAsMarkdown(selectedRows)
+ copyToClipboard(text, () => {
+ toast.success(
+ `Copied ${selectedRows.length} log${selectedRows.length !== 1 ? 's' : ''} as ${format.toUpperCase()}`
+ )
+ })
+ }
+
+ return (
+
+
+ {selectedRows.length > 0 && (
+
+
+ {selectedRows.length} row{selectedRows.length > 1 ? 's' : ''} selected
+
+
+
+
+
+ }
+ className="w-7"
+ tooltip={{ content: { side: 'bottom', text: 'Copy selected logs' } }}
+ />
+
+
+ onCopy('json')} className="gap-2 text-xs">
+
+ Copy as JSON
+
+ onCopy('markdown')} className="gap-2 text-xs">
+
+ Copy as Markdown
+
+
+
+
+
buildLogsPrompt(selectedRows)}
+ onOpenAssistant={handleOpenAiAssistant}
+ telemetrySource="log_explorer"
+ />
+
+ }
+ className="px-1"
+ onClick={() => table.resetRowSelection()}
+ tooltip={{ content: { side: 'bottom', text: 'Clear selection' } }}
+ />
+
+
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx
index e3512b5ead005..c13ecbbbf5f1f 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx
@@ -134,6 +134,23 @@ export const filterFields = [
)
},
},
+ {
+ label: 'Event message',
+ value: 'event_message',
+ type: 'checkbox',
+ defaultOpen: false,
+ options: [],
+ hasDynamicOptions: false,
+ hasAsyncSearch: false,
+ hidden: true,
+ component: (props: Option) => {
+ return (
+
+ {props.value}
+
+ )
+ },
+ },
] satisfies DataTableFilterField[]
export const sheetFields = [
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
index ae1abc01f5b11..36d30b0791606 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
@@ -33,6 +33,7 @@ import { DownloadLogsButton } from './components/DownloadLogsButton'
import { LogsFilterBar } from './components/LogsFilterBar'
import { LogsListPanel } from './components/LogsListPanel'
import { TooltipLabel } from './components/TooltipLabel'
+import { RowSelectionHeader } from './RowSelectionHeader'
import { ServiceFlowPanel } from './ServiceFlowPanel'
import { SEARCH_PARAMS_PARSER } from './UnifiedLogs.constants'
import { filterFields as defaultFilterFields } from './UnifiedLogs.fields'
@@ -85,7 +86,6 @@ export const UnifiedLogs = () => {
const { sort, start, size, id, cursor, direction, live, ...filter } = search
const defaultColumnSorting = sort ? [sort] : []
const defaultColumnVisibility = { uuid: false }
- const defaultRowSelection = search.id ? { [search.id]: true } : {}
const defaultColumnFilters = Object.entries(filter)
.map(([key, value]) => ({ id: key, value }))
.filter(({ value }) => value ?? undefined)
@@ -106,7 +106,8 @@ export const UnifiedLogs = () => {
const [sorting, setSorting] = useState(defaultColumnSorting)
const [columnFilters, setColumnFilters] = useState(defaultColumnFilters)
- const [rowSelection, setRowSelection] = useState(defaultRowSelection)
+ const [rowSelection, setRowSelection] = useState({})
+ const [openRowId, setOpenRowId] = useState(search.id ?? undefined)
const [dock, setDock] = useLocalStorageQuery<'bottom' | 'right'>(
LOCAL_STORAGE_KEYS.UNIFIED_LOGS_DOCK,
@@ -222,7 +223,7 @@ export const UnifiedLogs = () => {
// Generate dynamic columns based on current data
const { columns: dynamicColumns, columnVisibility: dynamicColumnVisibility } = useMemo(() => {
- return generateDynamicColumns(flatData)
+ return generateDynamicColumns({ data: flatData })
}, [flatData])
const table: Table = useReactTable({
@@ -235,7 +236,7 @@ export const UnifiedLogs = () => {
rowSelection,
columnOrder,
},
- enableMultiRowSelection: false,
+ enableMultiRowSelection: true,
columnResizeMode: 'onChange',
filterFns: { inDateRange, arrSome },
meta: { getRowClassName },
@@ -253,12 +254,10 @@ export const UnifiedLogs = () => {
getFacetedMinMaxValues: getTTableFacetedMinMaxValues(),
})
- const selectedRowKey = Object.keys(rowSelection)?.[0]
const selectedRow = useMemo(() => {
if ((isLoading || isFetching) && !flatData.length) return
-
- return table.getCoreRowModel().flatRows.find((row) => row.id === selectedRowKey)
- }, [isLoading, isFetching, flatData.length, table, selectedRowKey])
+ return table.getCoreRowModel().flatRows.find((row) => row.id === openRowId)
+ }, [isLoading, isFetching, flatData.length, table, openRowId])
// REMINDER: this is currently needed for the cmdk search
// [Joshen] This is where facets are getting dynamically loaded
@@ -321,24 +320,20 @@ export const UnifiedLogs = () => {
useEffect(() => {
if (isLoading || isFetching) return
- const selectedRowId = Object.keys(rowSelection)?.[0]
- if (selectedRowId && !selectedRow) {
- // Clear both uuid and logId when no row is selected
+ if (openRowId && !selectedRow) {
+ // Clear both uuid and logId when the open row no longer exists in data
setSearch({ id: null })
- setRowSelection({})
- } else if (selectedRowId && selectedRow) {
- setSearch({
- id: selectedRowId,
- })
+ setOpenRowId(undefined)
+ } else if (openRowId && selectedRow) {
+ setSearch({ id: openRowId })
track('unified_logs_row_clicked', { logType: selectedRow.original.log_type })
- // Don't clear rowSelection here - let it persist to maintain the selection
- } else if (!selectedRowId && search.id) {
- // Clear the URL parameter when no row is selected
+ } else if (!openRowId && search.id) {
+ // Clear the URL parameter when no row is open
setSearch({ id: null })
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [rowSelection, selectedRow, isLoading, isFetching])
+ }, [openRowId, selectedRow, isLoading, isFetching])
const isMobile = useIsMobile()
const [isFilterBarOpen, setIsFilterBarOpen] = useState(!isMobile)
@@ -353,6 +348,10 @@ export const UnifiedLogs = () => {
}
}, [isMobile])
+ useEffect(() => {
+ table.resetRowSelection()
+ }, [searchParameters, table])
+
return (
{
columnFilters={columnFilters}
sorting={sorting}
rowSelection={rowSelection}
+ openRowId={openRowId}
+ setOpenRowId={setOpenRowId}
columnOrder={columnOrder}
columnVisibility={columnVisibility}
searchParameters={searchParameters}
@@ -427,10 +428,13 @@ export const UnifiedLogs = () => {
isFetchingCharts && 'opacity-60 transition-opacity duration-150'
)}
columnId="timestamp"
+ filterColumnId="date"
chartConfig={filteredChartConfig}
/>
+
+
{
- {!!selectedRow && (
+ {!!openRowId && !!selectedRow && (
<>
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
index 7cd29dbc9ec69..78c96b0ce832c 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
@@ -115,3 +115,25 @@ export function formatServiceTypeForDisplay(serviceType: string): string {
return specialCases[serviceType.toLowerCase()] || serviceType
}
+
+/**
+ * Parses an auth log event_message that may be a stringified JSON object.
+ * Auth log entries store metadata as JSON in event_message (e.g. {"msg":"...","level":"info"}).
+ * Extracts the human-readable msg field, falling back to error, then the raw string.
+ * The fallback ensures self-hosted versions with different formats still render correctly.
+ */
+export function parseAuthLogEventMessage(value: string | undefined): string | undefined {
+ if (!value) return value
+ try {
+ const parsed = JSON.parse(value)
+ if (parsed && typeof parsed === 'object') {
+ const msg = parsed.msg
+ const err = parsed.error
+ if (typeof msg === 'string' && msg.trim()) return msg
+ if (typeof err === 'string' && err.trim()) return err
+ }
+ return value
+ } catch {
+ return value
+ }
+}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
index 165712c558727..544261a58e432 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
@@ -1,11 +1,11 @@
import { ColumnDef } from '@tanstack/react-table'
-import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Checkbox, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { STATUS_CODE_LABELS } from '../UnifiedLogs.constants'
import { ColumnFilterSchema, ColumnSchema } from '../UnifiedLogs.schema'
+import { parseAuthLogEventMessage } from '../UnifiedLogs.utils'
import { HoverCardTimestamp } from './HoverCardTimestamp'
import { LogTypeIcon } from './LogTypeIcon'
-import { TextWithTooltip } from './TextWithTooltip'
import { DataTableColumnLevelIndicator } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnLevelIndicator'
import { DataTableColumnStatusCode } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
@@ -30,7 +30,7 @@ function shouldHideColumn(data: ColumnSchema[], columnKey: keyof ColumnSchema):
}
// Generate dynamic columns based on data
-export function generateDynamicColumns(data: ColumnSchema[]): {
+export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
columns: ColumnDef[]
columnVisibility: Record
} {
@@ -39,6 +39,32 @@ export function generateDynamicColumns(data: ColumnSchema[]): {
const hideEventMessage = shouldHideColumn(data, 'event_message')
const columns: ColumnDef[] = [
+ {
+ accessorKey: 'select',
+ header: '',
+ cell: ({ row }) => {
+ return (
+
+ row.toggleSelected(!!value)}
+ onClick={(e) => e.stopPropagation()}
+ />
+
+ )
+ },
+ enableHiding: false,
+ enableResizing: false,
+ enableSorting: false,
+ filterFn: (_row, _columnId, _filterValue) => true,
+ size: 48,
+ minSize: 48,
+ maxSize: 48,
+ meta: {
+ cellClassName: 'w-[32px]',
+ headerClassName: 'w-[32px]',
+ },
+ },
// Level column - always visible
{
accessorKey: 'level',
@@ -179,7 +205,7 @@ export function generateDynamicColumns(data: ColumnSchema[]): {
header: 'Pathname',
cell: ({ row }) => {
const value = row.getValue('pathname') ?? ''
- return
+ return value
},
enableSorting: false,
enableResizing: false,
@@ -197,7 +223,9 @@ export function generateDynamicColumns(data: ColumnSchema[]): {
header: 'Event message',
cell: ({ row }) => {
const value = row.getValue('event_message')
+ const logType = row.original.log_type
const logCount = row.original.log_count
+ const displayMessage = logType === 'auth' ? parseAuthLogEventMessage(value) : value
return (
@@ -213,11 +241,7 @@ export function generateDynamicColumns(data: ColumnSchema[]): {
)}
- {value && (
-
-
-
- )}
+ {displayMessage && {displayMessage}}
)
},
@@ -243,4 +267,6 @@ export function generateDynamicColumns(data: ColumnSchema[]): {
}
// Static fallback columns
-export const UNIFIED_LOGS_COLUMNS: ColumnDef[] = generateDynamicColumns([]).columns
+export const UNIFIED_LOGS_COLUMNS: ColumnDef[] = generateDynamicColumns({
+ data: [],
+}).columns
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx
index d8d4d68103340..7eb6e43296768 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx
@@ -85,6 +85,7 @@ export const LogsFilterBar = () => {
return (
(false)
- const textRef = useRef(null)
-
- useEffect(() => {
- const checkTruncation = () => {
- if (textRef.current) {
- const { scrollWidth, clientWidth } = textRef.current
- setIsTruncated(scrollWidth > clientWidth)
- }
- }
-
- const resizeObserver = new ResizeObserver(() => {
- checkTruncation()
- })
-
- if (textRef.current) {
- resizeObserver.observe(textRef.current)
- }
-
- checkTruncation()
-
- return () => {
- resizeObserver.disconnect()
- }
- }, [])
-
- return (
-
-
-
-
- {text}
-
-
-
- {text}
-
-
-
- )
-}
diff --git a/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx b/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
index f6e7cf989be95..16fcc29ce996c 100644
--- a/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
@@ -2,12 +2,12 @@ import { CheckIcon } from 'lucide-react'
import { useMemo, useState } from 'react'
import {
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
@@ -59,13 +59,13 @@ export const TimezoneDropdown = () => {
-
-
-
- No timezones found
-
+
+
+
+ No timezones found
+
- handleSelect('')}
@@ -80,12 +80,12 @@ export const TimezoneDropdown = () => {
isAutoDetected ? 'opacity-100' : 'opacity-0'
)}
/>
-
+
{TIMEZONES_BY_IANA.map((entry) => {
const ianaName = entry.utc[0]
const isSelected = !isAutoDetected && storedTimezone === ianaName
return (
- {
isSelected ? 'opacity-100' : 'opacity-0'
)}
/>
-
+
)
})}
-
-
-
+
+
+
diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
index 216164c180f4d..54a044c8e8bdb 100644
--- a/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchDropdownCommandContent.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link'
import {
Button,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
ScrollArea,
} from 'ui'
@@ -46,7 +46,7 @@ export function BranchDropdownCommandContent({
if (embedded) {
return (
-
+
{isBranchingEnabled && (
-
+
)}
-
- {isBranchingEnabled && No branches found}
-
+
+ {isBranchingEnabled && No branches found}
+
{branchList.map((branch) => (
))}
-
-
-
+
+
+
)
}
return (
-
- {isBranchingEnabled && }
-
- {isBranchingEnabled && No branches found}
-
+
+ {isBranchingEnabled && }
+
+ {isBranchingEnabled && No branches found}
+
{branchList.map((branch) => (
))}
-
+
-
+
-
-
+ {
track('branch_selector_create_clicked')
@@ -148,8 +148,8 @@ export function BranchDropdownCommandContent({
Create branch
-
-
+ {
track('branch_selector_manage_clicked')
@@ -163,13 +163,13 @@ export function BranchDropdownCommandContent({
Manage branches
-
-
+
+
-
+
-
-
+ {
onClose()
@@ -190,9 +190,9 @@ export function BranchDropdownCommandContent({
Join GitHub Discussion
-
-
-
-
+
+
+
+
)
}
diff --git a/apps/studio/components/layouts/AppLayout/BranchLink.tsx b/apps/studio/components/layouts/AppLayout/BranchLink.tsx
index 32cdce43d41e2..aa65952f733f0 100644
--- a/apps/studio/components/layouts/AppLayout/BranchLink.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchLink.tsx
@@ -1,7 +1,7 @@
import { Check, Shield } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { CommandItem_Shadcn_ } from 'ui'
+import { CommandItem } from 'ui'
import { sanitizeRoute } from './ProjectDropdown.utils'
import type { Branch } from '@/data/branches/branches-query'
@@ -22,7 +22,7 @@ export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
return (
- {
@@ -38,7 +38,7 @@ export function BranchLink({ branch, isSelected, onClose }: BranchLinkProps) {
{branch.name}
{isSelected && }
-
+
)
}
diff --git a/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx b/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
index cfd09ee9d2703..a4a0e71224830 100644
--- a/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrgCommandItem.tsx
@@ -1,6 +1,6 @@
import { Check } from 'lucide-react'
import Link from 'next/link'
-import { cn, CommandItem_Shadcn_ } from 'ui'
+import { cn, CommandItem } from 'ui'
import PartnerIcon from '@/components/ui/PartnerIcon'
import type { Organization } from '@/types'
@@ -25,7 +25,7 @@ export function OrgCommandItem({
const href = hasRouteSlug ? routePathname.replace('[slug]', org.slug) : `/org/${org.slug}`
return (
-
{org.slug === selectedSlug && }
-
+
)
}
diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
index 78a395fa35ed4..3eb12d3705cb3 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdownCommandContent.tsx
@@ -3,13 +3,13 @@ import Link from 'next/link'
import {
Button,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
ScrollArea,
} from 'ui'
@@ -55,7 +55,7 @@ export function OrganizationDropdownCommandContent({
if (embedded) {
return (
-
+
-
-
- No organizations found
- {orgList}
-
-
+
+ No organizations found
+ {orgList}
+
+
)
}
return (
-
-
-
- No organizations found
-
+
+
+
+ No organizations found
+
7 ? 'md:h-[210px]' : ''}>
{orgList}
-
-
-
- onClose()}>
+
+
+
+ onClose()}>
All Organizations
-
-
+
+
{organizationCreationEnabled && (
<>
-
-
- onClose()}>
+
+
+ onClose()}>
New organization
-
-
+
+
)}
-
-
+
+
)
}
diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index 14acd11c4512e..671c6947e46cb 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import type { ComponentProps } from 'react'
import { useState } from 'react'
-import { Button, CommandGroup_Shadcn_, CommandItem_Shadcn_ } from 'ui'
+import { Button, CommandGroup, CommandItem } from 'ui'
import { ShimmeringLoader } from 'ui-patterns'
import { AppLayoutDropdownTriggerButton } from './AppLayoutDropdown'
@@ -55,8 +55,8 @@ function ProjectDropdownNewProjectActions({
}
return (
-
-
+ {
onClose()
@@ -68,8 +68,8 @@ function ProjectDropdownNewProjectActions({
New project
-
-
+
+
)
}
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/HeaderUpgradeButton.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/HeaderUpgradeButton.tsx
deleted file mode 100644
index e4de5957c25f2..0000000000000
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/HeaderUpgradeButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
-import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
-import { useTrackExperimentExposure } from '@/hooks/misc/useTrackExperimentExposure'
-import { usePHFlag } from '@/hooks/ui/useFlag'
-import { useTrack } from '@/lib/telemetry/track'
-
-const EXPERIMENT_FLAG_KEY = 'headerUpgradeCta'
-const EXPERIMENT_EXPOSURE_NAME = 'header_upgrade_cta'
-type HeaderUpgradeCtaVariant = 'control' | 'test'
-
-interface HeaderUpgradeButtonProps {
- className?: string
-}
-
-export const HeaderUpgradeButton = ({ className }: HeaderUpgradeButtonProps) => {
- const track = useTrack()
- const { data: organization } = useSelectedOrganizationQuery()
- const flagValue = usePHFlag(EXPERIMENT_FLAG_KEY)
-
- const isFreePlan = organization?.plan?.id === 'free'
- const isInExperiment = flagValue === 'control' || flagValue === 'test'
- const showButton = flagValue === 'test'
-
- const variant = isFreePlan && isInExperiment ? (flagValue as string) : undefined
- useTrackExperimentExposure(EXPERIMENT_EXPOSURE_NAME, variant)
-
- if (!isFreePlan) return null
- if (!showButton) return null
-
- const handleClick = () => {
- track('header_upgrade_cta_clicked')
- }
-
- return (
-
- )
-}
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
index 1d05bc775c407..516c8f72e640d 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
@@ -10,7 +10,6 @@ import { CommandMenuTriggerInput } from 'ui-patterns'
import { BreadcrumbsView } from './BreadcrumbsView'
import { FeedbackDropdown } from './FeedbackDropdown/FeedbackDropdown'
-import { HeaderUpgradeButton } from './HeaderUpgradeButton'
import { HomeIcon } from './HomeIcon'
import { LocalVersionPopover } from './LocalVersionPopover'
import { MergeRequestButton } from './MergeRequestButton'
@@ -253,7 +252,6 @@ export const LayoutHeader = ({
)}
-
) : (
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
index 18c4d1e2ea686..a3b25512ba424 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
@@ -5,7 +5,6 @@ import { useState } from 'react'
import { Button, cn } from 'ui'
import { MobileSheetNav } from 'ui-patterns'
-import { HeaderUpgradeButton } from '../LayoutHeader/HeaderUpgradeButton'
import { HomeIcon } from '../LayoutHeader/HomeIcon'
import { useMobileSheet } from './MobileSheetContext'
import { OrgSelector } from './OrgSelector'
@@ -71,7 +70,6 @@ const MobileNavigationBar = ({
)}
- {IS_PLATFORM &&
}
{IS_PLATFORM ?
:
}
{!hideMobileMenu && (
-
-
-
+
+
+
{ASSISTANT_MODELS.map((m) => (
-
)}
-
+
))}
-
-
-
+
+
+
)
diff --git a/apps/studio/components/ui/AiAssistantDropdown.tsx b/apps/studio/components/ui/AiAssistantDropdown.tsx
index e3652414c00d2..da2c95264fd2f 100644
--- a/apps/studio/components/ui/AiAssistantDropdown.tsx
+++ b/apps/studio/components/ui/AiAssistantDropdown.tsx
@@ -1,6 +1,7 @@
import { AiAssistantSource } from 'common/telemetry-constants'
import { Chatgpt, Claude } from 'icons'
import { Check, ChevronDown, Copy } from 'lucide-react'
+import Link from 'next/link'
import { ComponentProps, ReactNode, useEffect, useState } from 'react'
import {
AiIconAnimation,
@@ -41,7 +42,8 @@ const EXTERNAL_AI_TOOLS = [
export interface AiAssistantDropdownItem {
label: string
icon?: ReactNode
- onClick: () => void
+ href?: string
+ onClick?: () => void
}
export interface AiAssistantDropdownProps {
@@ -59,7 +61,6 @@ export interface AiAssistantDropdownProps {
tooltip?: string
copyLabel?: string
showExternalAI?: boolean
- extraDropdownItems?: ReactNode
additionalDropdownItems?: AiAssistantDropdownItem[]
}
@@ -78,7 +79,6 @@ export function AiAssistantDropdown({
tooltip,
copyLabel = 'Copy prompt',
showExternalAI = false,
- extraDropdownItems,
additionalDropdownItems,
}: AiAssistantDropdownProps) {
const track = useTrack()
@@ -150,11 +150,11 @@ export function AiAssistantDropdown({
/>
- {extraDropdownItems}
{showCopied ? : }
{showCopied ? 'Copied!' : copyLabel}
+
{showExternalAI && (
<>
@@ -170,13 +170,23 @@ export function AiAssistantDropdown({
))}
)}
+
{additionalDropdownItems && additionalDropdownItems.length > 0 && (
<>
{additionalDropdownItems.map((item, i) => (
- {item.icon}
- {item.label}
+ {item.href ? (
+
+ {item.icon}
+ {item.label}
+
+ ) : (
+ <>
+ {item.icon}
+ {item.label}
+
+ )}
))}
diff --git a/apps/studio/components/ui/Charts/ChartHighlightActions.tsx b/apps/studio/components/ui/Charts/ChartHighlightActions.tsx
index 2babb10d0f65b..ddc0460555e09 100644
--- a/apps/studio/components/ui/Charts/ChartHighlightActions.tsx
+++ b/apps/studio/components/ui/Charts/ChartHighlightActions.tsx
@@ -90,7 +90,17 @@ export const ChartHighlightActions = ({
top: chartHighlight?.popoverPosition?.y + 'px' || 0,
}}
/>
-
+ clearHighlight?.()}
+ onInteractOutside={(e) => {
+ const target = e.target as Element | null
+ // If the user clicked on a chart, handleMouseDown will manage the new selection.
+ // Calling clearHighlight here would race with it and clobber the new state.
+ if (target?.closest('.recharts-wrapper')) return
+ clearHighlight?.()
+ }}
+ >
{formatChartDate(selectedRangeStart!, 'MMM D, H:mm')}
diff --git a/apps/studio/components/ui/DataTable/DataTable.types.ts b/apps/studio/components/ui/DataTable/DataTable.types.ts
index 7354550ed97d3..cb500d6aedb38 100644
--- a/apps/studio/components/ui/DataTable/DataTable.types.ts
+++ b/apps/studio/components/ui/DataTable/DataTable.types.ts
@@ -54,6 +54,8 @@ export type Base = {
commandDisabled?: boolean
hasDynamicOptions?: boolean
hasAsyncSearch?: boolean
+ /** Defines if the filter should be present in the filter nav */
+ hidden?: boolean
}
export type DataTableCheckboxFilterField = Base & Checkbox
diff --git a/apps/studio/components/ui/DataTable/DataTable.utils.ts b/apps/studio/components/ui/DataTable/DataTable.utils.ts
index deec18fab9730..d206a302dd8df 100644
--- a/apps/studio/components/ui/DataTable/DataTable.utils.ts
+++ b/apps/studio/components/ui/DataTable/DataTable.utils.ts
@@ -63,8 +63,8 @@ export function getLevelColor(
case 'success':
return {
text: 'text-muted',
- bg: 'bg-muted',
- border: 'border-muted',
+ bg: 'bg-muted group-data-[state=selected]/row:bg-foreground-lighter',
+ border: 'border-muted group-data-[state=selected]/row:border-foreground-lighter',
}
case 'warning':
return {
@@ -86,43 +86,3 @@ export function getLevelColor(
}
}
}
-
-export function getStatusColor(value?: number | string): Record<'text' | 'bg' | 'border', string> {
- switch (value) {
- case '1':
- case 'info':
- return {
- text: 'text-blue-500',
- bg: '',
- border: 'border-blue-200 dark:border-blue-800',
- }
- case '2':
- case 'success':
- return {
- text: 'text-foreground',
- bg: '',
- border: 'border-green-200 dark:border-green-800',
- }
- case '4':
- case 'warning':
- case 'redirect':
- return {
- text: 'text-warning',
- bg: 'bg-warning-300 dark:bg-warning-200',
- border: 'border border-warning-400/50 dark:border-warning-400/50',
- }
- case '5':
- case 'error':
- return {
- text: 'text-destructive',
- bg: 'bg-destructive-300 dark:bg-destructive-300/50',
- border: 'border border-destructive-400/50 dark:border-destructive-400/50',
- }
- default:
- return {
- text: 'text-foreground',
- bg: '',
- border: '',
- }
- }
-}
diff --git a/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnLevelIndicator.tsx b/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnLevelIndicator.tsx
index dde560e82d98c..a4b8ed3ebcfbe 100644
--- a/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnLevelIndicator.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnLevelIndicator.tsx
@@ -16,7 +16,7 @@ export const DataTableColumnLevelIndicator = ({
{
- const colors = getStatusColor(level)
+ const colorClassName = getStatusColor(level)
+
+ function getStatusColor(value?: number | string): string {
+ switch (value) {
+ case '1':
+ case 'info':
+ return 'text-blue-500'
+ case '2':
+ case 'success':
+ return 'text-foreground'
+ case '4':
+ case 'warning':
+ case 'redirect':
+ return 'text-warning'
+ case '5':
+ case 'error':
+ return 'text-destructive'
+ default:
+ return 'text-foreground'
+ }
+ }
+
if (!value) {
return
}
return (
-
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControls.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControls.tsx
index ee813b21790fd..e13a8906643c1 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControls.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterControls.tsx
@@ -30,51 +30,53 @@ export function DataTableFilterControls({
?.filter(({ defaultOpen }) => defaultOpen)
?.map(({ value }) => value as string)}
>
- {filterFields?.map((field) => {
- const value = field.value as string
- return (
-
-
-
- {/* REMINDER: avoid the focus state to be cut due to overflow-hidden */}
- {/* REMINDER: need to move within here because of accordion height animation */}
-
- {(() => {
- switch (field.type) {
- case 'checkbox': {
- // [Joshen] Loader here so that CheckboxAsync can retrieve the data
- // immediately to be set in its react query state
- if (field.hasDynamicOptions && isLoadingCounts) {
- return
- } else if (field.hasAsyncSearch) {
- return
- } else {
- return
+ {filterFields
+ ?.filter((field) => !field.hidden)
+ .map((field) => {
+ const value = field.value as string
+ return (
+
+
+
+ {/* REMINDER: avoid the focus state to be cut due to overflow-hidden */}
+ {/* REMINDER: need to move within here because of accordion height animation */}
+
+ {(() => {
+ switch (field.type) {
+ case 'checkbox': {
+ // [Joshen] Loader here so that CheckboxAsync can retrieve the data
+ // immediately to be set in its react query state
+ if (field.hasDynamicOptions && isLoadingCounts) {
+ return
+ } else if (field.hasAsyncSearch) {
+ return
+ } else {
+ return
+ }
+ }
+ case 'slider': {
+ return
+ }
+ case 'input': {
+ return
+ }
+ case 'timerange': {
+ return
}
}
- case 'slider': {
- return
- }
- case 'input': {
- return
- }
- case 'timerange': {
- return
- }
- }
- })()}
-
-
-
- )
- })}
+ })()}
+
+ )
+ })}
)
}
diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
index e190f9d6deef7..2656050405fe0 100644
--- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
@@ -45,8 +45,8 @@ export function DataTableInfinite
({
setColumnVisibility,
searchParamsParser,
}: DataTableInfiniteProps) {
- const { table, error, isError, isLoading, isFetching } = useDataTable()
const tableRef = useRef(null)
+ const { table, error, isError, isLoading, isFetching, openRowId, setOpenRowId } = useDataTable()
const headerGroups = table.getHeaderGroups()
const headers = headerGroups[0].headers
@@ -128,7 +128,8 @@ export function DataTableInfinite({
row={row}
table={table}
searchParamsParser={searchParamsParser}
- selected={row.getIsSelected()}
+ selected={row.id === openRowId}
+ onSelect={() => setOpenRowId(row.id === openRowId ? undefined : row.id)}
/>
))
) : isLoading ? (
@@ -229,14 +230,16 @@ function DataTableRow({
table,
selected,
searchParamsParser,
+ onSelect,
}: {
row: Row
table: TTable
selected?: boolean
searchParamsParser: any
+ onSelect: () => void
}) {
useQueryState('live', searchParamsParser.live)
- const rowClassName = (table.options.meta as any)?.getRowClassName?.(row)
+ const rowClassName = cn('group/row', (table.options.meta as any)?.getRowClassName?.(row))
const cells = row.getVisibleCells()
return (
@@ -244,11 +247,11 @@ function DataTableRow({
id={row.id}
tabIndex={0}
data-state={selected && 'selected'}
- onClick={() => row.toggleSelected()}
+ onClick={onSelect}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault()
- row.toggleSelected()
+ onSelect()
}
}}
className={cn(rowClassName)}
diff --git a/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx b/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
index e26101a1553aa..7c3f965528556 100644
--- a/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableSheetRowAction.tsx
@@ -47,8 +47,12 @@ export function DataTableSheetRowAction) {
const { copy, isCopied } = useCopyToClipboard()
+
const field = !!fieldValue ? filterFields.find((f) => f.value === fieldValue) : undefined
- const column = !!fieldValue ? table.getColumn(fieldValue.toString()) : undefined
+ const column =
+ !!fieldValue && !!field
+ ? table.getAllColumns().find((c) => c.id === fieldValue.toString())
+ : undefined
function renderOptions() {
if (!field) return null
diff --git a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
index c61a2b80365c9..dc92700e354e7 100644
--- a/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableViewOptions.tsx
@@ -2,12 +2,12 @@ import { GripVertical, Settings2 } from 'lucide-react'
import { useId, useMemo, useState } from 'react'
import {
Checkbox,
- Command_Shadcn_ as Command,
- CommandEmpty_Shadcn_ as CommandEmpty,
- CommandGroup_Shadcn_ as CommandGroup,
- CommandInput_Shadcn_ as CommandInput,
- CommandItem_Shadcn_ as CommandItem,
- CommandList_Shadcn_ as CommandList,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
Popover,
PopoverContent,
PopoverTrigger,
diff --git a/apps/studio/components/ui/DataTable/FilterSideBar.tsx b/apps/studio/components/ui/DataTable/FilterSideBar.tsx
index 6b07599d94fd2..dbd7dff3eb812 100644
--- a/apps/studio/components/ui/DataTable/FilterSideBar.tsx
+++ b/apps/studio/components/ui/DataTable/FilterSideBar.tsx
@@ -52,8 +52,9 @@ export function FilterSideBar({
return (
{
diff --git a/apps/studio/components/ui/DataTable/Table.tsx b/apps/studio/components/ui/DataTable/Table.tsx
index 7b5c3d8798c0e..9f81520bbfe76 100644
--- a/apps/studio/components/ui/DataTable/Table.tsx
+++ b/apps/studio/components/ui/DataTable/Table.tsx
@@ -79,7 +79,7 @@ export const TableHead = forwardRef<
className={cn(
'text-xs! font-normal! text-foreground-lighter font-mono',
'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0',
- 'text-muted-foreground h-8 px-2 text-left align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
+ 'text-muted-foreground h-9 px-2 text-left align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
className
)}
{...props}
diff --git a/apps/studio/components/ui/DataTable/TimelineChart.tsx b/apps/studio/components/ui/DataTable/TimelineChart.tsx
index 236941804e8ed..64524e9cc1d56 100644
--- a/apps/studio/components/ui/DataTable/TimelineChart.tsx
+++ b/apps/studio/components/ui/DataTable/TimelineChart.tsx
@@ -1,10 +1,16 @@
import { format } from 'date-fns'
-import { useMemo, useState } from 'react'
+import { SearchIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useMemo } from 'react'
import { Bar, BarChart, CartesianGrid, ReferenceArea, XAxis } from 'recharts'
-import type { CategoricalChartFunc } from 'recharts/types/chart/generateCategoricalChart'
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, cn } from 'ui'
import { useDataTable } from './providers/DataTableProvider'
+import {
+ ChartHighlightAction,
+ ChartHighlightActions,
+} from '@/components/ui/Charts/ChartHighlightActions'
+import { useChartHighlight } from '@/components/ui/Charts/useChartHighlight'
export type BaseChartSchema = { timestamp: number; [key: string]: number }
export const description = 'A stacked bar chart'
@@ -16,6 +22,11 @@ interface TimelineChartProps {
* TBD: if using keyof TData to be closer to the data table props
*/
columnId: string
+ /**
+ * Optional override for the column id used when applying the time range filter.
+ * Defaults to `columnId` if not provided.
+ */
+ filterColumnId?: string
/**
* Same data as of the InfiniteQueryMeta.
*/
@@ -27,12 +38,18 @@ export function TimelineChart({
data,
className,
columnId,
+ filterColumnId,
chartConfig,
}: TimelineChartProps) {
+ const resolvedFilterColumnId = filterColumnId ?? columnId
+ const { resolvedTheme } = useTheme()
+ const isDarkMode = resolvedTheme?.includes('dark')
+
const { table } = useDataTable()
- const [refAreaLeft, setRefAreaLeft] = useState(null)
- const [refAreaRight, setRefAreaRight] = useState(null)
- const [isSelecting, setIsSelecting] = useState(false)
+ const chartHighlight = useChartHighlight()
+
+ const showHighlight =
+ chartHighlight?.left && chartHighlight?.right && chartHighlight?.left !== chartHighlight?.right
// REMINDER: date has to be a string for tooltip label to work - don't ask me why
const chart = useMemo(
@@ -52,101 +69,102 @@ export function TimelineChart({
return { interval, period: calculatePeriod(interval) }
}, [data])
- const handleMouseDown: CategoricalChartFunc = (e) => {
- if (e.activeLabel) {
- setRefAreaLeft(e.activeLabel)
- setIsSelecting(true)
- }
- }
-
- const handleMouseMove: CategoricalChartFunc = (e) => {
- if (isSelecting && e.activeLabel) {
- setRefAreaRight(e.activeLabel)
- }
- }
-
- const handleMouseUp: CategoricalChartFunc = () => {
- if (refAreaLeft && refAreaRight) {
- const [left, right] = [refAreaLeft, refAreaRight].sort(
- (a, b) => new Date(a).getTime() - new Date(b).getTime()
- )
- table.getColumn(columnId)?.setFilterValue([new Date(left), new Date(right)])
- }
- setRefAreaLeft(null)
- setRefAreaRight(null)
- setIsSelecting(false)
- }
+ const highlightActions: ChartHighlightAction[] = useMemo(
+ () => [
+ {
+ id: 'zoom-in',
+ label: 'Filter logs to selected range',
+ icon: ,
+ onSelect: ({ start, end, clear }) => {
+ const [left, right] = [start, end].sort(
+ (a, b) => new Date(a).getTime() - new Date(b).getTime()
+ )
+ table.getColumn(resolvedFilterColumnId)?.setFilterValue([new Date(left), new Date(right)])
+ clear()
+ },
+ },
+ ],
+ [table, resolvedFilterColumnId]
+ )
return (
-
-
+
-
- {
- const date = new Date(value)
- if (isNaN(date.getTime())) return 'N/A'
- if (timerange.period === '10m') {
- return format(date, 'HH:mm:ss')
- } else if (timerange.period === '1d') {
- return format(date, 'HH:mm')
- } else if (timerange.period === '1w') {
- return format(date, 'LLL dd HH:mm')
- }
- return format(date, 'LLL dd, y')
+ {
+ if (activeTooltipIndex === undefined || activeTooltipIndex === null) return
+ chartHighlight.handleMouseDown({ activeLabel, coordinates: activeLabel })
}}
- />
- {
- const date = new Date(value)
- if (isNaN(date.getTime())) return 'N/A'
- if (timerange.period === '10m') {
- return format(date, 'LLL dd, HH:mm:ss')
- }
- return format(date, 'LLL dd, y HH:mm')
- }}
- />
- }
- />
- {/* TODO: we could use the `{timestamp, ...rest} = data[0]` to dynamically create the bars but that would mean the order can be very much random */}
-
-
-
- {refAreaLeft && refAreaRight && (
- {
+ if (activeTooltipIndex === undefined || activeTooltipIndex === null) return
+ chartHighlight.handleMouseMove({ activeLabel, coordinates: activeLabel })
+ }}
+ onMouseUp={chartHighlight.handleMouseUp}
+ style={{ cursor: 'crosshair' }}
+ >
+
+ {
+ const date = new Date(value)
+ if (isNaN(date.getTime())) return 'N/A'
+ if (timerange.period === '10m') {
+ return format(date, 'HH:mm:ss')
+ } else if (timerange.period === '1d') {
+ return format(date, 'HH:mm')
+ } else if (timerange.period === '1w') {
+ return format(date, 'LLL dd HH:mm')
+ }
+ return format(date, 'LLL dd, y')
+ }}
/>
- )}
-
-
+ {!chartHighlight.popoverPosition && (
+ {
+ const date = new Date(value)
+ if (isNaN(date.getTime())) return 'N/A'
+ if (timerange.period === '10m') {
+ return format(date, 'LLL dd, HH:mm:ss')
+ }
+ return format(date, 'LLL dd, y HH:mm')
+ }}
+ />
+ }
+ />
+ )}
+ {/* TODO: we could use the `{timestamp, ...rest} = data[0]` to dynamically create the bars but that would mean the order can be very much random */}
+
+
+
+ {showHighlight && (
+
+ )}
+
+
+
+
)
}
diff --git a/apps/studio/components/ui/DataTable/providers/DataTableProvider.tsx b/apps/studio/components/ui/DataTable/providers/DataTableProvider.tsx
index 9dfd396da82c7..b60950fe331b8 100644
--- a/apps/studio/components/ui/DataTable/providers/DataTableProvider.tsx
+++ b/apps/studio/components/ui/DataTable/providers/DataTableProvider.tsx
@@ -25,6 +25,8 @@ interface DataTableStateContextType {
pagination: PaginationState
enableColumnOrdering: boolean
searchParameters: QuerySearchParamsType
+ openRowId: string | undefined
+ setOpenRowId: (id: string | undefined) => void
}
interface DataTableBaseContextType
{
@@ -63,6 +65,8 @@ export function DataTableProvider({
pagination: props.pagination ?? { pageIndex: 0, pageSize: 10 },
enableColumnOrdering: props.enableColumnOrdering ?? false,
searchParameters: props.searchParameters ?? ({} as any),
+ openRowId: props.openRowId,
+ setOpenRowId: props.setOpenRowId ?? (() => {}),
}),
[props]
)
diff --git a/apps/studio/components/ui/DatabaseSelector.tsx b/apps/studio/components/ui/DatabaseSelector.tsx
index 59796bb70e78e..71ed1313537d9 100644
--- a/apps/studio/components/ui/DatabaseSelector.tsx
+++ b/apps/studio/components/ui/DatabaseSelector.tsx
@@ -9,10 +9,10 @@ import {
Button,
ButtonProps,
cn,
- Command_Shadcn_,
- CommandGroup_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandGroup,
+ CommandItem,
+ CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -123,12 +123,12 @@ export const DatabaseSelector = ({
-
+
))}
-
+
)}
-
+
7 ? 'h-[210px]' : ''}>
{sortedDatabases?.map((database) => {
const region = formatDatabaseRegion(database.region)
@@ -185,7 +185,7 @@ export const DatabaseSelector = ({
}
return (
-
{database.identifier === selectedDatabaseId && }
Create a new read replica
-
-
+
+
)}
-
-
+
+
)
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index afbecfa636311..87a4f2a8b1364 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -19,12 +19,12 @@ import { useEffect, useRef, useState } from 'react'
import {
Button,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
HoverCard,
HoverCardContent,
HoverCardTrigger,
@@ -330,23 +330,23 @@ export const EditorPanel = () => {
>
-
-
+
-
+
{isLoadingSnippets ? (
Loading snippets...
) : (
- No snippets found.
+ No snippets found.
)}
-
+
{(snippetsData?.content ?? []).map((snippet) => (
- {
}}
>
{snippet.name}
-
+
))}
-
-
-
+
+
+
{templates.length > 0 && (
@@ -379,15 +379,15 @@ export const EditorPanel = () => {
-
-
-
- No templates found.
-
+
+
+
+ No templates found.
+
{templates.map((template) => (
- onSelectTemplate(template.content)}
className="cursor-pointer"
@@ -406,7 +406,7 @@ export const EditorPanel = () => {
-
+
{
))}
-
-
-
+
+
+
)}
diff --git a/apps/studio/components/ui/ErrorCodeTooltip/ErrorCodeTooltip.tsx b/apps/studio/components/ui/ErrorCodeTooltip/ErrorCodeTooltip.tsx
index 13fd2f4f85072..83e5125a06f90 100644
--- a/apps/studio/components/ui/ErrorCodeTooltip/ErrorCodeTooltip.tsx
+++ b/apps/studio/components/ui/ErrorCodeTooltip/ErrorCodeTooltip.tsx
@@ -1,17 +1,8 @@
import { ExternalLink } from 'lucide-react'
import { useTheme } from 'next-themes'
import Image from 'next/image'
-import Link from 'next/link'
import { useState } from 'react'
-import {
- cn,
- DropdownMenuItem,
- DropdownMenuSeparator,
- HoverCard,
- HoverCardContent,
- HoverCardTrigger,
- InfoIcon,
-} from 'ui'
+import { cn, HoverCard, HoverCardContent, HoverCardTrigger, InfoIcon } from 'ui'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { getErrorCodeInfo } from './ErrorCodeTooltip.utils'
@@ -117,25 +108,19 @@ export const ErrorCodeTooltip = ({ errorCode, service, children }: ErrorCodeTool
)}
-
-
-
- Go to Docs
-
-
-
-
- ) : undefined
- }
+ additionalDropdownItems={[
+ {
+ label: 'Go to Docs',
+ icon: ,
+ href: docsUrl,
+ },
+ ]}
/>
diff --git a/apps/studio/components/ui/FunctionSelector.tsx b/apps/studio/components/ui/FunctionSelector.tsx
index bb99e250b855b..19c206746e4e3 100644
--- a/apps/studio/components/ui/FunctionSelector.tsx
+++ b/apps/studio/components/ui/FunctionSelector.tsx
@@ -9,13 +9,13 @@ import {
AlertDescription,
AlertTitle,
Button,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -123,25 +123,25 @@ const FunctionSelector = ({
-
-
-
+
+ event.stopPropagation() : undefined}
>
- No functions found
-
+ No functions found
+
7 ? 'h-[210px]' : ''}>
{!functions.length && (
-
{noResultsLabel}
-
+
)}
{functions.map((func) => (
-
)}
-
+
))}
-
-
-
-
+
+
+ {
setOpen(false)
@@ -182,10 +182,10 @@ const FunctionSelector = ({
New function
-
-
-
-
+
+
+
+
)}
diff --git a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
index 5e6cf2c0caac3..8f530ad80361d 100644
--- a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -1,12 +1,21 @@
-import { BookOpen, Check, Copy, ExternalLink, List, X } from 'lucide-react'
+import { BookOpen, Check, ChevronsUpDown, Copy, ExternalLink, List, X } from 'lucide-react'
import Link from 'next/link'
import { useState } from 'react'
import { logConstants } from 'shared-data'
import {
Button,
+ cn,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
copyToClipboard,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
SidePanel,
- Tabs,
Tooltip,
TooltipContent,
TooltipTrigger,
@@ -23,6 +32,8 @@ export interface LogsExplorerHeaderProps {
const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
const [showReference, setShowReference] = useState(false)
+ const [open, setOpen] = useState(false)
+ const [selectedSchema, setSelectedSchema] = useState(logConstants.schemas[0])
return (
@@ -89,38 +100,63 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
-
- {logConstants.schemas.map((schema) => (
-
-
- Path
- ,
-
- Type
- ,
- ]}
- body={schema.fields
- .sort((a: any, b: any) => a.path - b.path)
- .map((field) => (
-
- ))}
- />
-
- ))}
-
+
+
+
+ }
+ >
+ {selectedSchema?.name ?? 'Select source...'}
+
+
+
+
+
+
+ No source found.
+
+ {logConstants.schemas.map((schema) => (
+ {
+ setSelectedSchema(schema)
+ setOpen(false)
+ }}
+ >
+
+ {schema.name}
+
+ ))}
+
+
+
+
+
+
+ Path
+ ,
+
+ Type
+ ,
+ ]}
+ body={selectedSchema.fields.map((field) => (
+
+ ))}
+ />
+
diff --git a/apps/studio/components/ui/OrganizationProjectSelector.tsx b/apps/studio/components/ui/OrganizationProjectSelector.tsx
index 62e5fc72fa05d..38b9e9d64139d 100644
--- a/apps/studio/components/ui/OrganizationProjectSelector.tsx
+++ b/apps/studio/components/ui/OrganizationProjectSelector.tsx
@@ -5,10 +5,10 @@ import { ReactNode, useEffect, useId, useMemo, useRef, useState } from 'react'
import {
Button,
cn,
- Command_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandGroup,
+ CommandInput,
+ CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -217,7 +217,7 @@ export const OrganizationProjectSelector = ({
}
const commandContent = (
-
@@ -226,7 +226,7 @@ export const OrganizationProjectSelector = ({
{renderActions(setOpen, { embedded: true })}
)}
-
-
-
+
{renderListContent()}
-
+
{!!renderActions && !embedded && (
<>
{renderActions(setOpen)}
)}
-
-
+
+
)
if (embedded) {
diff --git a/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx b/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
index 1f7b39463aea3..d9076d799362e 100644
--- a/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
+++ b/apps/studio/components/ui/OrganizationProjectSelector/ProjectCommandItem.tsx
@@ -1,6 +1,6 @@
import { Check } from 'lucide-react'
import { ReactNode } from 'react'
-import { cn, CommandItem_Shadcn_ } from 'ui'
+import { cn, CommandItem } from 'ui'
import type { OrgProject } from '@/data/projects/org-projects-infinite-query'
@@ -31,7 +31,7 @@ export function ProjectCommandItem({
const disabled = isOptionDisabled?.(project) ?? false
return (
- }
)}
-
+
)
}
diff --git a/apps/studio/components/ui/SchemaComboBox.tsx b/apps/studio/components/ui/SchemaComboBox.tsx
index 673f41754ac63..ce0f5f0fc9f98 100644
--- a/apps/studio/components/ui/SchemaComboBox.tsx
+++ b/apps/studio/components/ui/SchemaComboBox.tsx
@@ -5,12 +5,12 @@ import {
AlertDescription,
AlertTitle,
Button,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -108,14 +108,14 @@ export const SchemaComboBox = ({
-
-
-
- No schemas found
-
+
+
+
+ No schemas found
+
7 ? 'h-[210px]' : ''}>
{schemas?.map((schema) => (
- toggleSchema(schema.name)}
@@ -125,12 +125,12 @@ export const SchemaComboBox = ({
{selectedSchemas.includes(schema.name) && (
)}
-
+
))}
-
-
-
+
+
+
)}
diff --git a/apps/studio/components/ui/SchemaSelector.tsx b/apps/studio/components/ui/SchemaSelector.tsx
index 8426adf79e1d9..bc7832fe38c40 100644
--- a/apps/studio/components/ui/SchemaSelector.tsx
+++ b/apps/studio/components/ui/SchemaSelector.tsx
@@ -6,13 +6,13 @@ import {
AlertDescription,
AlertTitle,
Button,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
Popover,
PopoverContent,
PopoverTrigger,
@@ -149,16 +149,16 @@ export const SchemaSelector = forwardRef(
align={align}
sameWidthAsTrigger
>
-
-
-
+
+ event.stopPropagation() : undefined}
>
- No schemas found
-
+ No schemas found
+
7 ? 'h-[210px]' : ''}>
{supportSelectAll && (
- {
@@ -174,10 +174,10 @@ export const SchemaSelector = forwardRef(
{selectedSchemaName === '*' && (
)}
-
+
)}
{schemas.map((schema) => (
- {
@@ -193,15 +193,15 @@ export const SchemaSelector = forwardRef(
{selectedSchemaName === schema.name && (
)}
-
+
))}
-
+
{onSelectCreateSchema !== undefined && canCreateSchemas && (
<>
-
-
-
+
+ {
onSelectCreateSchema()
@@ -214,12 +214,12 @@ export const SchemaSelector = forwardRef(
>
Create a new schema
-
-
+
+
)}
-
-
+
+
)}
diff --git a/apps/studio/pages/cli/login.tsx b/apps/studio/pages/cli/login.tsx
index 5c9e88f0bc724..e87e1885478dc 100644
--- a/apps/studio/pages/cli/login.tsx
+++ b/apps/studio/pages/cli/login.tsx
@@ -18,6 +18,7 @@ import CopyButton from '@/components/ui/CopyButton'
import { InlineLink } from '@/components/ui/InlineLink'
import { createCliLoginSession } from '@/data/cli/login'
import { withAuth } from '@/hooks/misc/withAuth'
+import { useStaticEffectEvent } from '@/hooks/useStaticEffectEvent'
import { buildStudioPageTitle } from '@/lib/page-title'
import { useProfile } from '@/lib/profile'
import type { NextPageWithLayout } from '@/types'
@@ -99,7 +100,7 @@ export const CliLoginScreen = ({
publicKey,
tokenName,
deviceCode,
- navigate,
+ navigate: navigateProp,
}: {
isLoggedIn: boolean
routerReady: boolean
@@ -112,6 +113,9 @@ export const CliLoginScreen = ({
const { profile } = useProfile()
const [status, setStatus] = useState({ _tag: 'loading' })
const startedForSessionIdRef = useRef(undefined)
+ // Keep navigate in a ref so changing the prop never re-triggers the effect
+ // or cancels an in-flight POST via the isActive cleanup.
+ const navigate = useStaticEffectEvent(navigateProp)
const displayName = profile?.primary_email ?? profile?.username
useEffect(() => {
@@ -163,7 +167,7 @@ export const CliLoginScreen = ({
return () => {
isActive = false
}
- }, [deviceCode, isLoggedIn, navigate, publicKey, routerReady, sessionId, tokenName])
+ }, [deviceCode, isLoggedIn, publicKey, routerReady, sessionId, tokenName, navigate])
if (status._tag === 'loading') {
return (
@@ -174,7 +178,7 @@ export const CliLoginScreen = ({
-
+
diff --git a/apps/studio/pages/project/[ref]/functions/new.tsx b/apps/studio/pages/project/[ref]/functions/new.tsx
index 61bb1bd2011bf..6cb09a857df3b 100644
--- a/apps/studio/pages/project/[ref]/functions/new.tsx
+++ b/apps/studio/pages/project/[ref]/functions/new.tsx
@@ -10,12 +10,12 @@ import {
AiIconAnimation,
Button,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
Form,
FormControl,
FormField,
@@ -313,13 +313,13 @@ const NewFunctionPage = () => {
-
-
-
- No templates found.
-
+
+
+
+ No templates found.
+
{templates.map((template) => (
- {
{template.description}
-
+
))}
-
-
-
+
+
+
-
-
- No results found.
-
+
+
+ No results found.
+
{COMMAND_ITEMS.map((navItem) => (
- runCommand(() => router.push(navItem.href as string))}
@@ -83,29 +83,29 @@ export function CommandMenu({ ...props }: DialogProps) {
{navItem.label}
-
+
))}
-
-
-
- runCommand(() => setTheme('light'))}>
+
+
+
+ runCommand(() => setTheme('light'))}>
Light
-
- runCommand(() => setTheme('dark'))}>
+
+ runCommand(() => setTheme('dark'))}>
Dark
-
- runCommand(() => setTheme('classic-dark'))}>
+
+ runCommand(() => setTheme('classic-dark'))}>
Classic dark
-
- runCommand(() => setTheme('system'))}>
+
+ runCommand(() => setTheme('system'))}>
System
-
-
-
+
+
+
)
diff --git a/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx b/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
index 208ab15dc9c43..cb5009d850ebc 100644
--- a/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
+++ b/apps/ui-library/components/tanstack-db-generator/ComboBox.tsx
@@ -6,17 +6,18 @@ import { useEffect, useRef, useState } from 'react'
import {
Button_Shadcn_ as Button,
cn,
- Command_Shadcn_ as Command,
- CommandGroup_Shadcn_ as CommandGroup,
- CommandInput_Shadcn_ as CommandInput,
- CommandItem_Shadcn_ as CommandItem,
- CommandList_Shadcn_ as CommandList,
- Popover as Popover,
- PopoverContent as PopoverContent,
- PopoverTrigger as PopoverTrigger,
+ Command,
+ CommandGroup as CommandGroup,
+ CommandInput,
+ CommandItem as CommandItem,
+ CommandList as CommandList,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
ScrollArea,
} from 'ui'
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
+
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver'
export interface ComboBoxOption {
diff --git a/apps/www/components/CommandMenu/CommandMenu.tsx b/apps/www/components/CommandMenu/CommandMenu.tsx
index 0079aa41977cc..45fae07020c06 100644
--- a/apps/www/components/CommandMenu/CommandMenu.tsx
+++ b/apps/www/components/CommandMenu/CommandMenu.tsx
@@ -1,4 +1,9 @@
-import { CommandHeader, CommandInput, CommandList, CommandMenu } from 'ui-patterns/CommandMenu'
+import {
+ CommandHeader,
+ CommandMenu,
+ CommandMenuInput,
+ CommandMenuList,
+} from 'ui-patterns/CommandMenu'
import { useChangelogCommand } from 'ui-patterns/CommandMenu/prepackaged/Changelog'
import { useDocsAiCommands } from 'ui-patterns/CommandMenu/prepackaged/DocsAi'
import { useDocsSearchCommands } from 'ui-patterns/CommandMenu/prepackaged/DocsSearch'
@@ -15,9 +20,9 @@ export default function WwwCommandMenuEager() {
return (
-
+
-
+
)
}
diff --git a/apps/www/components/Pricing/UpgradePlan.tsx b/apps/www/components/Pricing/UpgradePlan.tsx
index d037156736776..2c7b0d6297ded 100644
--- a/apps/www/components/Pricing/UpgradePlan.tsx
+++ b/apps/www/components/Pricing/UpgradePlan.tsx
@@ -9,13 +9,13 @@ import {
Button,
ButtonProps,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
- CommandSeparator_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
Dialog,
DialogClose,
DialogContent,
@@ -81,13 +81,13 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
-
-
-
- No organizations found.
-
+
+
+
+ No organizations found.
+
{organizations.map((organization) => (
- {
@@ -103,12 +103,12 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
)}
/>
{organization.name}
-
+
))}
-
-
-
-
+
+
+ {
setValue(currentValue === value ? '' : currentValue)
@@ -123,10 +123,10 @@ const UpgradePlan = ({ organizations = [], onClick, size = 'large', planId }: Up
)}
/>
Create a new organization
-
-
-
-
+
+
+
+
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index ca6182e97b902..9d1357a4aa45b 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -3042,18 +3042,6 @@ export interface AccessTokenRemovedEvent {
groups: Omit
}
-/**
- * User clicked the "Upgrade to Pro" CTA in the dashboard header.
- * GROWTH-615: always-visible upgrade button in dashboard header for free-plan users.
- *
- * @group Events
- * @source studio
- */
-export interface HeaderUpgradeCtaClickedEvent {
- action: 'header_upgrade_cta_clicked'
- groups: Omit
-}
-
/**
* User clicked the primary CTA on a resource exhaustion warning banner.
*
@@ -3453,7 +3441,6 @@ export type TelemetryEvent =
| FlyDeprecationBannerDismissedEvent
| FreeMicroUpgradeBannerDismissedEvent
| FreeMicroUpgradeBannerCtaClickedEvent
- | HeaderUpgradeCtaClickedEvent
| AccessTokenCreatedEvent
| AccessTokenRemovedEvent
| ResourceExhaustionBannerUpgradeClickedEvent
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index b1a9707d003c2..85432df4f3cc5 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -86,13 +86,13 @@
"import": "./src/CommandMenu/api/CommandHeader.tsx",
"types": "./src/CommandMenu/api/CommandHeader.tsx"
},
- "./CommandMenu/api/CommandInput": {
- "import": "./src/CommandMenu/api/CommandInput.tsx",
- "types": "./src/CommandMenu/api/CommandInput.tsx"
+ "./CommandMenu/api/CommandMenuInput": {
+ "import": "./src/CommandMenu/api/CommandMenuInput.tsx",
+ "types": "./src/CommandMenu/api/CommandMenuInput.tsx"
},
- "./CommandMenu/api/CommandList": {
- "import": "./src/CommandMenu/api/CommandList.tsx",
- "types": "./src/CommandMenu/api/CommandList.tsx"
+ "./CommandMenu/api/CommandMenuList": {
+ "import": "./src/CommandMenu/api/CommandMenuList.tsx",
+ "types": "./src/CommandMenu/api/CommandMenuList.tsx"
},
"./CommandMenu/api/CommandMenu": {
"import": "./src/CommandMenu/api/CommandMenu.tsx",
@@ -162,17 +162,17 @@
"import": "./src/CommandMenu/index.tsx",
"types": "./src/CommandMenu/index.tsx"
},
- "./CommandMenu/internal/Command": {
- "import": "./src/CommandMenu/internal/Command.tsx",
- "types": "./src/CommandMenu/internal/Command.tsx"
+ "./CommandMenu/internal/CommandMenuItem": {
+ "import": "./src/CommandMenu/internal/CommandMenuItem.tsx",
+ "types": "./src/CommandMenu/internal/CommandMenuItem.tsx"
},
- "./CommandMenu/internal/CommandEmpty": {
- "import": "./src/CommandMenu/internal/CommandEmpty.tsx",
- "types": "./src/CommandMenu/internal/CommandEmpty.tsx"
+ "./CommandMenu/internal/CommandMenuEmpty": {
+ "import": "./src/CommandMenu/internal/CommandMenuEmpty.tsx",
+ "types": "./src/CommandMenu/internal/CommandMenuEmpty.tsx"
},
- "./CommandMenu/internal/CommandGroup": {
- "import": "./src/CommandMenu/internal/CommandGroup.tsx",
- "types": "./src/CommandMenu/internal/CommandGroup.tsx"
+ "./CommandMenu/internal/CommandMenuGroup": {
+ "import": "./src/CommandMenu/internal/CommandMenuGroup.tsx",
+ "types": "./src/CommandMenu/internal/CommandMenuGroup.tsx"
},
"./CommandMenu/internal/CommandSection": {
"import": "./src/CommandMenu/internal/CommandSection.tsx",
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
index bc0ab4c55fc03..bb2cbbee04c7a 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenu.tsx
@@ -10,7 +10,7 @@ import { ErrorBoundary } from 'react-error-boundary'
import {
Button,
cn,
- Command_Shadcn_,
+ Command,
Dialog,
DialogContent,
DialogDescription,
@@ -50,11 +50,11 @@ function Breadcrumb({ className }: { className?: string }) {
}
const CommandWrapper = forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ children, className, ...props }, ref) => {
return (
-
{children}
-
+
)
})
-CommandWrapper.displayName = Command_Shadcn_.displayName
+CommandWrapper.displayName = Command.displayName
function CommandError({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
return (
diff --git a/packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx b/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
similarity index 92%
rename from packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx
rename to packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
index c7fc8ceff0ac5..79036c8894de7 100644
--- a/packages/ui-patterns/src/CommandMenu/api/CommandInput.tsx
+++ b/packages/ui-patterns/src/CommandMenu/api/CommandMenuInput.tsx
@@ -3,7 +3,7 @@
import { useBreakpoint, useDebounce } from 'common'
import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
import type React from 'react'
-import { cn, CommandInput_Shadcn_ } from 'ui'
+import { cn, CommandInput } from 'ui'
import { useQuery, useSetQuery } from './hooks/queryHooks'
import { useCommandMenuTelemetryContext } from './hooks/useCommandMenuTelemetryContext'
@@ -41,9 +41,9 @@ function useFocusInputOnWiderScreens(ref: React.ForwardedRef)
return combinedRef
}
-const CommandInput = forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+const CommandMenuInput = forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => {
const inputRef = useFocusInputOnWiderScreens(ref)
@@ -113,7 +113,7 @@ const CommandInput = forwardRef<
return (
- ,
- React.ComponentPropsWithoutRef
+const CommandMenuList = forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => {
const commandSections = useCommands()
const query = useQuery()
@@ -26,30 +26,30 @@ const CommandList = forwardRef<
}
return (
-
- No results found.
+ No results found.
{commandSections.map((section) => {
if (section.commands.every((command) => command.defaultHidden) && !query) return null
return (
-
+
{section.commands
.filter((command) => !command.defaultHidden || query)
.map((command) => (
-
+
{command.name}
-
+
))}
-
+
)
})}
-
+
)
})
-CommandList.displayName = CommandList_Shadcn_.displayName
+CommandMenuList.displayName = 'CommandMenuList'
-export { CommandList }
+export { CommandMenuList }
diff --git a/packages/ui-patterns/src/CommandMenu/api/utils.ts b/packages/ui-patterns/src/CommandMenu/api/utils.ts
index efbdbcb2d72ec..9c4486a4082ce 100644
--- a/packages/ui-patterns/src/CommandMenu/api/utils.ts
+++ b/packages/ui-patterns/src/CommandMenu/api/utils.ts
@@ -1,6 +1,6 @@
const escapeAttributeSelector = (str: string) => encodeURIComponent(str)
export { escapeAttributeSelector }
-export { generateCommandClassNames } from '../internal/Command'
+export { generateCommandClassNames } from '../internal/CommandMenuItem'
export { orderSectionFirst } from '../internal/state/commandsState'
export { PageType } from '../internal/state/pagesState'
diff --git a/packages/ui-patterns/src/CommandMenu/index.tsx b/packages/ui-patterns/src/CommandMenu/index.tsx
index 98e4833b49384..8e9fbefa99b76 100644
--- a/packages/ui-patterns/src/CommandMenu/index.tsx
+++ b/packages/ui-patterns/src/CommandMenu/index.tsx
@@ -1,7 +1,7 @@
export * from './api/Badges'
export { CommandHeader } from './api/CommandHeader'
-export { CommandInput } from './api/CommandInput'
-export { CommandList } from './api/CommandList'
+export { CommandMenuInput } from './api/CommandMenuInput'
+export { CommandMenuList } from './api/CommandMenuList'
export {
Breadcrumb,
CommandMenu,
diff --git a/packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuEmpty.tsx
similarity index 94%
rename from packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx
rename to packages/ui-patterns/src/CommandMenu/internal/CommandMenuEmpty.tsx
index 3933d1b0e2942..f0ce9f833e91d 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/CommandEmpty.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuEmpty.tsx
@@ -5,7 +5,7 @@ import { cn } from 'ui'
import { useQuery } from '../api/hooks/queryHooks'
-const CommandEmpty = ({
+const CommandMenuEmpty = ({
children,
className,
listRef,
@@ -37,4 +37,4 @@ const CommandEmpty = ({
)
}
-export { CommandEmpty }
+export { CommandMenuEmpty }
diff --git a/packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
similarity index 59%
rename from packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx
rename to packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
index 425792c0a083e..4d4acf40d4966 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/CommandGroup.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuGroup.tsx
@@ -1,14 +1,14 @@
'use client'
import { forwardRef } from 'react'
-import { cn, CommandGroup_Shadcn_ } from 'ui'
+import { cn, CommandGroup } from 'ui'
-const CommandGroup = forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+const CommandMenuGroup = forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => {
return (
-
)
})
-CommandGroup.displayName = CommandGroup_Shadcn_.displayName
+CommandMenuGroup.displayName = 'CommandMenuGroup'
-export { CommandGroup }
+export { CommandMenuGroup }
diff --git a/packages/ui-patterns/src/CommandMenu/internal/Command.tsx b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
similarity index 91%
rename from packages/ui-patterns/src/CommandMenu/internal/Command.tsx
rename to packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
index 7f113dc6033be..1f44b2533ca10 100644
--- a/packages/ui-patterns/src/CommandMenu/internal/Command.tsx
+++ b/packages/ui-patterns/src/CommandMenu/internal/CommandMenuItem.tsx
@@ -1,7 +1,7 @@
'use client'
import { forwardRef, type PropsWithChildren } from 'react'
-import { cn, CommandItem_Shadcn_ } from 'ui'
+import { cn, CommandItem } from 'ui'
import { useQuery } from '../api/hooks/queryHooks'
import { useCommandMenuTelemetryContext } from '../api/hooks/useCommandMenuTelemetryContext'
@@ -45,12 +45,12 @@ data-[disabled=true]:opacity-50
`
)
-interface CommandItemProps extends React.ComponentPropsWithoutRef {
+interface CommandItemProps extends React.ComponentPropsWithoutRef {
command: ICommand
}
-const CommandItem = forwardRef<
- React.ElementRef,
+const CommandMenuItem = forwardRef<
+ React.ElementRef,
PropsWithChildren
>(({ children, className, command: _command, ...props }, ref) => {
const router = useCrossCompatRouter()
@@ -95,7 +95,7 @@ const CommandItem = forwardRef<
}
return (
-
{command.badge?.()}
-
+
)
})
-CommandItem.displayName = CommandItem_Shadcn_.displayName
+CommandMenuItem.displayName = 'CommandMenuItem'
-export { CommandItem, generateCommandClassNames }
+export { CommandMenuItem, generateCommandClassNames }
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
index d6cd0b738e198..f77a11be38c3f 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsAi/DocsAiPage.tsx
@@ -5,21 +5,14 @@ import { User } from 'lucide-react'
import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
-import {
- AiIconAnimation,
- Button,
- cn,
- CommandGroup_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
-} from 'ui'
+import { AiIconAnimation, Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
import { markdownComponents } from 'ui-patterns/Markdown'
import { StatusIcon } from 'ui/src/components/StatusIcon'
import {
Breadcrumb,
CommandHeader,
- CommandInput,
+ CommandMenuInput,
CommandWrapper,
generateCommandClassNames,
useHistoryKeys,
@@ -154,7 +147,7 @@ function PromptInput({
})
return (
- }) {
error. This display doesn't actually need the Command Menu, but it's
needed for the empty state to work with the input, so this is a somewhat
hacktastic way of making it not error. */}
-
+
void
const query = useQuery()
return (
-
-
+ void
{questions.map((question) => {
const key = question.replace(/\s+/g, '_')
return (
- {
if (!query) {
@@ -312,11 +305,11 @@ function EmptyState({ handleSubmit }: { handleSubmit: (message: string) => void
>
{question}
-
+
)
})}
-
-
+
+
)
}
diff --git a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
index d3b34ecc0d57e..ba7454ba5c4d9 100644
--- a/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
+++ b/packages/ui-patterns/src/CommandMenu/prepackaged/DocsSearch/DocsSearchPage.tsx
@@ -8,13 +8,13 @@ import {
} from 'common'
import { Book, ChevronRight, Github, Hash, Loader2, MessageSquare, Search } from 'lucide-react'
import { useCallback, useEffect, useRef } from 'react'
-import { Button, cn, CommandGroup_Shadcn_, CommandItem_Shadcn_, CommandList_Shadcn_ } from 'ui'
+import { Button, cn, CommandGroup, CommandItem, CommandList } from 'ui'
import { StatusIcon } from 'ui/src/components/StatusIcon'
import {
Breadcrumb,
CommandHeader,
- CommandInput,
+ CommandMenuInput,
CommandWrapper,
escapeAttributeSelector,
generateCommandClassNames,
@@ -191,20 +191,20 @@ const DocsSearchPage = () => {
-
+
-
+
{hasResults &&
('results' in state ? state.results : state.staleResults).map((page, i) => {
return (
-
- {
@@ -227,11 +227,11 @@ const DocsSearchPage = () => {
{page.sections.map((section, i) => (
- {
-
+
))}
)}
-
+
)
})}
{state.status === 'initial' && (
-
+
{questions.map((question) => {
const key = question.replace(/\s+/g, '_')
return (
- {
@@ -287,10 +287,10 @@ const DocsSearchPage = () => {
>
{question}
-
+
)
})}
-
+
)}
{state.status === 'loading' && state.staleResults.length === 0 && (
@@ -319,7 +319,7 @@ const DocsSearchPage = () => {
)}
-
+
)
}
diff --git a/packages/ui-patterns/src/FilterBar/CommandListItem.tsx b/packages/ui-patterns/src/FilterBar/CommandListItem.tsx
index 35c1e758c4dfc..a8408a288605e 100644
--- a/packages/ui-patterns/src/FilterBar/CommandListItem.tsx
+++ b/packages/ui-patterns/src/FilterBar/CommandListItem.tsx
@@ -31,9 +31,9 @@ export function CommandListItem({
)}
data-testid={`filter-menu-item-${item.value}`}
>
-
+
{includeIcon && item.icon}
- {getActionItemLabel(item)}
+ {getActionItemLabel(item)}
{item.operatorSymbol && }
diff --git a/packages/ui-patterns/src/FilterBar/FilterBar.tsx b/packages/ui-patterns/src/FilterBar/FilterBar.tsx
index 066572f1cdccf..4ffd929a0aa94 100644
--- a/packages/ui-patterns/src/FilterBar/FilterBar.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterBar.tsx
@@ -24,6 +24,14 @@ export type FilterBarProps = {
supportsOperators?: boolean
variant?: FilterBarVariant
icon?: React.ReactNode
+ /**
+ * Name of the property to use when the user commits free text from the root input. Must match
+ * a `name` in `filterProperties`. When set, the dropdown shows a "Search : \"...\""
+ * item as the first option while the user is typing. Selecting it (Enter) creates a filter
+ * `{ propertyName, operator: '=', value: typedText }`. If the property has no `=` operator,
+ * the first operator in its list is used instead.
+ */
+ freeformDefaultProperty?: string
onFilterChange: (filters: FilterGroupType) => void
/**
* Fires only on commit boundaries: menu item selected, operator/property/logical-operator
@@ -135,6 +143,7 @@ export const FilterBar = forwardRef(function Fi
supportsOperators = false,
variant = 'default',
icon,
+ freeformDefaultProperty,
},
ref
) {
@@ -152,6 +161,7 @@ export const FilterBar = forwardRef(function Fi
supportsOperators={supportsOperators}
variant={variant}
icon={icon}
+ freeformDefaultProperty={freeformDefaultProperty}
>
diff --git a/packages/ui-patterns/src/FilterBar/FilterBarContext.tsx b/packages/ui-patterns/src/FilterBar/FilterBarContext.tsx
index 1b539c9ed573e..cc0306fbce249 100644
--- a/packages/ui-patterns/src/FilterBar/FilterBarContext.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterBarContext.tsx
@@ -71,6 +71,7 @@ export type FilterBarContextValue = {
variant: FilterBarVariant
actions?: FilterBarAction[]
icon?: React.ReactNode
+ freeformDefaultProperty?: string
rootRef: React.RefObject
}
@@ -98,6 +99,7 @@ export type FilterBarRootProps = {
supportsOperators?: boolean
variant?: FilterBarVariant
icon?: React.ReactNode
+ freeformDefaultProperty?: string
}
export type FilterBarVariant = 'default' | 'pill'
@@ -120,6 +122,7 @@ export const FilterBarRoot = forwardRef(fun
supportsOperators = false,
variant = 'default',
icon,
+ freeformDefaultProperty,
}: FilterBarRootProps,
ref: React.Ref
) {
@@ -395,6 +398,7 @@ export const FilterBarRoot = forwardRef(fun
variant,
actions,
icon,
+ freeformDefaultProperty,
rootRef,
}
diff --git a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
index 3fcbab301955e..34d0a143c4dda 100644
--- a/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
+++ b/packages/ui-patterns/src/FilterBar/FilterGroup.tsx
@@ -25,6 +25,7 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
actions,
variant,
highlightedConditionPath,
+ freeformDefaultProperty,
handleInputBlur,
handleGroupFreeformFocus,
handleGroupFreeformChange,
@@ -86,6 +87,16 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
return pathsEqual(conditionPath, highlightedConditionPath)
}
+ // Free-text search only applies to the root group's input — nested groups don't synthesize
+ // a "Search " item.
+ const resolvedFreeformDefaultProperty = useMemo(
+ () =>
+ path.length === 0 && freeformDefaultProperty
+ ? filterProperties.find((p) => p.name === freeformDefaultProperty)
+ : undefined,
+ [path.length, freeformDefaultProperty, filterProperties]
+ )
+
const items = useMemo(
() =>
buildPropertyItems({
@@ -93,8 +104,17 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
inputValue: (isActive ? freeformText : localFreeformValue) || '',
actions,
supportsOperators,
+ freeformDefaultProperty: resolvedFreeformDefaultProperty,
}),
- [filterProperties, isActive, freeformText, localFreeformValue, actions, supportsOperators]
+ [
+ filterProperties,
+ isActive,
+ freeformText,
+ localFreeformValue,
+ actions,
+ supportsOperators,
+ resolvedFreeformDefaultProperty,
+ ]
)
const emptyPlaceholder = useMemo(
@@ -220,7 +240,7 @@ export function FilterGroup({ group, path }: FilterGroupProps) {
)}
e.preventDefault()}
diff --git a/packages/ui-patterns/src/FilterBar/menuItems.ts b/packages/ui-patterns/src/FilterBar/menuItems.ts
index bff559cfa56a7..bb58c84f5fe43 100644
--- a/packages/ui-patterns/src/FilterBar/menuItems.ts
+++ b/packages/ui-patterns/src/FilterBar/menuItems.ts
@@ -70,10 +70,23 @@ export function buildPropertyItems(params: {
inputValue: string
supportsOperators?: boolean
actions?: FilterBarAction[]
+ freeformDefaultProperty?: FilterProperty
}): MenuItem[] {
- const { filterProperties, inputValue, supportsOperators, actions } = params
+ const { filterProperties, inputValue, supportsOperators, actions, freeformDefaultProperty } =
+ params
const items: MenuItem[] = []
+ const trimmedInput = inputValue.trim()
+ if (freeformDefaultProperty && trimmedInput.length > 0) {
+ items.push({
+ value: '__freeform_search__',
+ label: `Search ${freeformDefaultProperty.label.toLowerCase()}: "${trimmedInput}"`,
+ isFreeformSearch: true,
+ freeformPropertyName: freeformDefaultProperty.name,
+ freeformValue: trimmedInput,
+ })
+ }
+
items.push(
...filterProperties
.filter((prop) => prop.label.toLowerCase().includes(inputValue.toLowerCase()))
@@ -84,7 +97,6 @@ export function buildPropertyItems(params: {
items.push({ value: 'group', label: 'New Group' })
}
- const trimmedInput = inputValue.trim()
if (actions && trimmedInput.length > 0) {
actions.forEach((action) => {
items.push({
diff --git a/packages/ui-patterns/src/FilterBar/types.ts b/packages/ui-patterns/src/FilterBar/types.ts
index eac3b5ddaf207..19056763e696a 100644
--- a/packages/ui-patterns/src/FilterBar/types.ts
+++ b/packages/ui-patterns/src/FilterBar/types.ts
@@ -99,6 +99,9 @@ export type MenuItem = {
operatorSymbol?: string
isDefaultOperator?: boolean
defaultValue?: string
+ isFreeformSearch?: boolean
+ freeformPropertyName?: string
+ freeformValue?: string
}
export type GroupedMenuItem = {
diff --git a/packages/ui-patterns/src/FilterBar/useCommandHandling.ts b/packages/ui-patterns/src/FilterBar/useCommandHandling.ts
index 4e31aa47aae8f..61119c48a9ada 100644
--- a/packages/ui-patterns/src/FilterBar/useCommandHandling.ts
+++ b/packages/ui-patterns/src/FilterBar/useCommandHandling.ts
@@ -146,6 +146,35 @@ export function useCommandHandling({
return
}
+ if (item.isFreeformSearch && item.freeformPropertyName) {
+ if (!activeInput || activeInput.type !== 'group') return
+ const property = filterProperties.find((p) => p.name === item.freeformPropertyName)
+ if (!property) return
+
+ const currentPath = activeInput.path
+ const group = findGroupByPath(activeFilters, currentPath)
+ if (!group) return
+
+ const operators = property.operators ?? ['=']
+ const defaultOperator =
+ operators.find((op) => (isFilterOperatorObject(op) ? op.value : op) === '=') ??
+ operators[0]
+ const operatorValue = isFilterOperatorObject(defaultOperator)
+ ? defaultOperator.value
+ : defaultOperator
+
+ let updatedFilters = addFilterToGroup(activeFilters, currentPath, property)
+ const newPath = [...currentPath, group.conditions.length]
+ updatedFilters = updateNestedOperator(updatedFilters, newPath, operatorValue)
+ updatedFilters = updateNestedValue(updatedFilters, newPath, item.freeformValue ?? '')
+ commitFilters(updatedFilters)
+ onFreeformTextChange('')
+ setTimeout(() => {
+ setActiveInput({ type: 'group', path: currentPath })
+ }, 0)
+ return
+ }
+
if (item.value === 'group') {
handleGroupCommand()
return
@@ -174,6 +203,8 @@ export function useCommandHandling({
activeInput,
activeFilters,
freeformText,
+ filterProperties,
+ onFreeformTextChange,
setActiveInput,
handleGroupCommand,
handleValueCommand,
diff --git a/packages/ui-patterns/src/FilterBar/utils.test.ts b/packages/ui-patterns/src/FilterBar/utils.test.ts
index e67524d7b1f8d..cafa8ac2014ae 100644
--- a/packages/ui-patterns/src/FilterBar/utils.test.ts
+++ b/packages/ui-patterns/src/FilterBar/utils.test.ts
@@ -17,7 +17,6 @@ import {
isSyncOptionsFunction,
removeFromGroup,
resolvePropertyChange,
- truncateText,
updateNestedLogicalOperator,
updateNestedOperator,
updateNestedPropertyName,
@@ -477,24 +476,6 @@ describe('FilterBar Utils', () => {
})
})
- describe('truncateText', () => {
- it('returns text unchanged if under max length', () => {
- expect(truncateText('hello', 10)).toBe('hello')
- })
-
- it('returns text unchanged if exactly max length', () => {
- expect(truncateText('hello', 5)).toBe('hello')
- })
-
- it('truncates text and adds ellipsis if over max length', () => {
- expect(truncateText('hello world', 5)).toBe('hello...')
- })
-
- it('handles empty string', () => {
- expect(truncateText('', 10)).toBe('')
- })
- })
-
describe('getActionItemLabel', () => {
it('returns original label for non-action items', () => {
const item: MenuItem = { value: 'test', label: 'Test Label' }
@@ -516,14 +497,16 @@ describe('FilterBar Utils', () => {
expect(getActionItemLabel(item)).toBe('Ask AI: "Find users"')
})
- it('truncates long input values at 30 characters', () => {
+ it('returns full input value (no truncation — CSS handles overflow)', () => {
const item: MenuItem = {
value: 'ai',
label: 'Filter by AI',
isAction: true,
actionInputValue: 'Find all users who registered in the last 30 days',
}
- expect(getActionItemLabel(item)).toBe('Ask AI: "Find all users who registered ..."')
+ expect(getActionItemLabel(item)).toBe(
+ 'Ask AI: "Find all users who registered in the last 30 days"'
+ )
})
})
diff --git a/packages/ui-patterns/src/FilterBar/utils.ts b/packages/ui-patterns/src/FilterBar/utils.ts
index 76cf3551a7cc3..c89a39e846b8a 100644
--- a/packages/ui-patterns/src/FilterBar/utils.ts
+++ b/packages/ui-patterns/src/FilterBar/utils.ts
@@ -326,14 +326,9 @@ export function groupMenuItemsByOperator(items: MenuItem[]): MenuItemGroup[] {
}))
}
-export function truncateText(text: string, maxLength: number): string {
- if (text.length <= maxLength) return text
- return text.slice(0, maxLength) + '...'
-}
-
export function getActionItemLabel(item: MenuItem): string {
if (item.isAction && item.actionInputValue) {
- return `Ask AI: "${truncateText(item.actionInputValue, 30)}"`
+ return `Ask AI: "${item.actionInputValue}"`
}
return item.label
}
diff --git a/packages/ui-patterns/src/McpUrlBuilder/assets/copilot-icon-dark.svg b/packages/ui-patterns/src/McpUrlBuilder/assets/copilot-icon-dark.svg
new file mode 100755
index 0000000000000..0411bb1685898
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/assets/copilot-icon-dark.svg
@@ -0,0 +1,17 @@
+
diff --git a/packages/ui-patterns/src/McpUrlBuilder/assets/copilot-icon.svg b/packages/ui-patterns/src/McpUrlBuilder/assets/copilot-icon.svg
new file mode 100755
index 0000000000000..300c0caa0c900
--- /dev/null
+++ b/packages/ui-patterns/src/McpUrlBuilder/assets/copilot-icon.svg
@@ -0,0 +1,17 @@
+
diff --git a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
index 288d14726f10d..14fde11eb2004 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/components/ClientSelectDropdown.tsx
@@ -5,12 +5,12 @@ import { useState } from 'react'
import {
Button,
cn,
- Command_Shadcn_,
- CommandEmpty_Shadcn_,
- CommandGroup_Shadcn_,
- CommandInput_Shadcn_,
- CommandItem_Shadcn_,
- CommandList_Shadcn_,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
Popover,
PopoverContent,
PopoverTrigger,
@@ -50,7 +50,7 @@ export const ClientSelectDropdown = ({
function renderClient(client: McpClient) {
return (
- onSelectClient(client.key)}
@@ -71,7 +71,7 @@ export const ClientSelectDropdown = ({
size={15}
className={cn('ml-auto', client.key === selectedClient.key ? 'opacity-100' : 'opacity-0')}
/>
-
+
)
}
@@ -109,21 +109,21 @@ export const ClientSelectDropdown = ({
-
-
-
- No results found.
+
+
+
+ No results found.
{groups ? (
groups.map((group) => (
-
+
{group.clients.map(renderClient)}
-
+
))
) : (
- {clients.map(renderClient)}
+ {clients.map(renderClient)}
)}
-
-
+
+
)
diff --git a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
index eeecf578c7426..6b73ce26f257e 100644
--- a/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
+++ b/packages/ui-patterns/src/McpUrlBuilder/constants.tsx
@@ -6,6 +6,7 @@ import type {
AntigravityMcpConfig,
ClaudeCodeMcpConfig,
CodexMcpConfig,
+ CopilotMcpConfig,
FactoryMcpConfig,
GeminiMcpConfig,
GooseMcpConfig,
@@ -309,6 +310,60 @@ export const MCP_CLIENTS: McpClient[] = [
)
},
},
+ {
+ key: 'copilot-cli',
+ label: 'GitHub Copilot',
+ icon: 'copilot',
+ hasDistinctDarkIcon: true,
+ configFile: '~/.copilot/mcp-config.json',
+ externalDocsUrl:
+ 'https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers',
+ transformConfig: (config): CopilotMcpConfig => {
+ return {
+ mcpServers: {
+ supabase: {
+ type: 'http',
+ url: config.mcpServers.supabase.url,
+ },
+ },
+ }
+ },
+ primaryInstructions: (_config, onCopy) => {
+ const config = _config as CopilotMcpConfig
+ const command = `copilot mcp add --transport http supabase "${config.mcpServers.supabase.url}"`
+ return (
+
+
+ Add the MCP server to your GitHub Copilot config using the command line:
+
+
onCopy('command')}
+ />
+
+
+ After configuring the MCP server, authenticate by running:
+
+
onCopy('command')}
+ />
+
+ Follow the on-screen instructions to complete the authentication flow.
+
+