dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Bump resizable package and fix minor issues (#42892)

Browse Source 
This pull request upgrades the `react-resizable-panels` dependency from
version 2.x to 3.x. It also includes some minor improvements to
component props and key usage for React elements.

**Dependency upgrade:**

* Upgraded `react-resizable-panels` from version 2.1.4 to 3.0.0.

**Component improvements:**

* Added a `key` prop to the `ResizablePanelGroup` in `LogTable.tsx` and
to action buttons in `UnifiedLogs.tsx` to help React identify elements
more efficiently.
* Ensured unique `key` props for icons rendered in a map in
`FilterSideBar.tsx` to prevent React warnings.
This commit is contained in:
Ivan Vasilov authored and GitHub committed 2026-02-19 15:15:19 +00:00
1 parent 6ce7bd0885
commit 682931e6c8
5 files changed
+34 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+6 -6
View File
@@ -1,10 +1,5 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { IS_PLATFORM, useParams } from 'common'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { DownloadResultsButton } from 'components/ui/DownloadResultsButton'
import { useSelectedLog } from 'hooks/analytics/useSelectedLog'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { useProfile } from 'lib/profile'
import { isEqual } from 'lodash'
import { Copy, Eye, EyeOff, Play } from 'lucide-react'
import { Key, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
@@ -34,6 +29,11 @@ import LogSelection from './LogSelection'
import { DefaultErrorRenderer } from './LogsErrorRenderers/DefaultErrorRenderer'
import ResourcesExceededErrorRenderer from './LogsErrorRenderers/ResourcesExceededErrorRenderer'
import { LogsTableEmptyState } from './LogsTableEmptyState'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DownloadResultsButton } from '@/components/ui/DownloadResultsButton'
import { useSelectedLog } from '@/hooks/analytics/useSelectedLog'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useProfile } from '@/lib/profile'
interface Props {
data?: LogData[]
@@ -394,7 +394,7 @@ export const LogTable = ({
<section className={'h-full flex w-full flex-col flex-1'}>
{!queryType && <LogsExplorerTableHeader />}
<ResizablePanelGroup direction="horizontal">
<ResizablePanelGroup direction="horizontal" key="log-table">
<ResizablePanel
id="log-table-content"
order={1}
apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
+15 -15
View File
@@ -14,21 +14,6 @@ import {
VisibilityState,
} from '@tanstack/react-table'
import { useDebounce, useParams } from 'common'
import { arrSome, inDateRange } from 'components/ui/DataTable/DataTable.utils'
import { DataTableFilterCommand } from 'components/ui/DataTable/DataTableFilters/DataTableFilterCommand'
import { DataTableHeaderLayout } from 'components/ui/DataTable/DataTableHeaderLayout'
import { DataTableInfinite } from 'components/ui/DataTable/DataTableInfinite'
import { DataTableSideBarLayout } from 'components/ui/DataTable/DataTableSideBarLayout'
import { DataTableToolbar } from 'components/ui/DataTable/DataTableToolbar'
import { FilterSideBar } from 'components/ui/DataTable/FilterSideBar'
import { LiveButton } from 'components/ui/DataTable/LiveButton'
import { LiveRow } from 'components/ui/DataTable/LiveRow'
import { DataTableProvider } from 'components/ui/DataTable/providers/DataTableProvider'
import { TimelineChart } from 'components/ui/DataTable/TimelineChart'
import { useUnifiedLogsChartQuery } from 'data/logs/unified-logs-chart-query'
import { useUnifiedLogsCountQuery } from 'data/logs/unified-logs-count-query'
import { useUnifiedLogsInfiniteQuery } from 'data/logs/unified-logs-infinite-query'
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
import { useQueryStates } from 'nuqs'
import { useEffect, useMemo, useState } from 'react'
import {
@@ -51,6 +36,21 @@ import { filterFields as defaultFilterFields } from './UnifiedLogs.fields'
import { useLiveMode, useResetFocus } from './UnifiedLogs.hooks'
import { QuerySearchParamsType } from './UnifiedLogs.types'
import { getFacetedUniqueValues, getLevelRowClassName } from './UnifiedLogs.utils'
import { arrSome, inDateRange } from '@/components/ui/DataTable/DataTable.utils'
import { DataTableFilterCommand } from '@/components/ui/DataTable/DataTableFilters/DataTableFilterCommand'
import { DataTableHeaderLayout } from '@/components/ui/DataTable/DataTableHeaderLayout'
import { DataTableInfinite } from '@/components/ui/DataTable/DataTableInfinite'
import { DataTableSideBarLayout } from '@/components/ui/DataTable/DataTableSideBarLayout'
import { DataTableToolbar } from '@/components/ui/DataTable/DataTableToolbar'
import { FilterSideBar } from '@/components/ui/DataTable/FilterSideBar'
import { LiveButton } from '@/components/ui/DataTable/LiveButton'
import { LiveRow } from '@/components/ui/DataTable/LiveRow'
import { DataTableProvider } from '@/components/ui/DataTable/providers/DataTableProvider'
import { TimelineChart } from '@/components/ui/DataTable/TimelineChart'
import { useUnifiedLogsChartQuery } from '@/data/logs/unified-logs-chart-query'
import { useUnifiedLogsCountQuery } from '@/data/logs/unified-logs-count-query'
import { useUnifiedLogsInfiniteQuery } from '@/data/logs/unified-logs-infinite-query'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
export const CHART_CONFIG = {
success: {
apps/studio/components/ui/DataTable/FilterSideBar.tsx
+5 -3
View File
@@ -1,6 +1,4 @@
import { useFlag, useParams } from 'common'
import { useUnifiedLogsPreview } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { LOG_DRAIN_TYPES } from 'components/interfaces/LogDrains/LogDrains.constants'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'
@@ -11,6 +9,8 @@ import { DateRangeDisabled } from './DataTable.types'
import { DataTableFilterControls } from './DataTableFilters/DataTableFilterControls'
import { DataTableResetButton } from './DataTableResetButton'
import { useDataTable } from './providers/DataTableProvider'
import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { LOG_DRAIN_TYPES } from '@/components/interfaces/LogDrains/LogDrains.constants'
interface FilterSideBarProps {
dateRangeDisabled?: DateRangeDisabled
@@ -71,7 +71,9 @@ export function FilterSideBar({ dateRangeDisabled }: FilterSideBarProps) {
<div className="flex items-center gap-4">
{LOG_DRAIN_TYPES.filter((t) =>
['datadog', 'sentry', 'webhook', 'loki'].includes(t.value)
).map((type) => React.cloneElement(type.icon, { height: 20, width: 20 }))}
).map((type) =>
React.cloneElement(type.icon, { height: 20, width: 20, key: type.value })
)}
</div>
}
actions={
packages/ui/package.json
+1 -1
View File
@@ -72,7 +72,7 @@
"react-hook-form": "^7.45.0",
"react-intersection-observer": "^9.8.2",
"react-medium-image-zoom": "^5.2.4",
"react-resizable-panels": "^2.1.4",
"react-resizable-panels": "^3.0.0",
"react-syntax-highlighter": "^15.6.6",
"recharts": "catalog:",
"sonner": "^1.5.0",
pnpm-lock.yaml
Generated
+7 -7
View File
@@ -2450,8 +2450,8 @@ importers:
specifier: ^5.2.4
version: 5.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-resizable-panels:
specifier: ^2.1.4
version: 2.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
specifier: ^3.0.0
version: 3.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-syntax-highlighter:
specifier: ^15.6.6
version: 15.6.6(react@18.3.1)
@@ -15988,11 +15988,11 @@ packages:
'@types/react':
optional: true
react-resizable-panels@2.1.4:
resolution: {integrity: sha512-kzue8lsoSBdyyd2IfXLQMMhNujOxRoGVus+63K95fQqleGxTfvgYLTzbwYMOODeAHqnkjb3WV/Ks7f5+gDYZuQ==}
react-resizable-panels@3.0.6:
resolution: {integrity: sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==}
peerDependencies:
react: ^16.14.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
react-resizable@3.0.5:
resolution: {integrity: sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==}
@@ -35040,7 +35040,7 @@ snapshots:
optionalDependencies:
'@types/react': 18.3.3
react-resizable-panels@2.1.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
react-resizable-panels@3.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)