fix: sentry errors (supabase#40875)

* fix: SUPABASE-APP-90D

* fix: SUPABASE-APP-90C

* fix: SUPABASE-APP-6HC

* fix: SUPABASE-APP-A38

* fix: SUPABASE-APP-9JB

* Improve types for RowContextMenu.tsx

* Improve types for useChartHighlight

* Nit

---------

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

Author: awaseem

apps/studio/components/grid/components/editor/BooleanEditor.tsx

@@ -32,7 +32,7 @@ export const BooleanEditor = <TRow, TSummaryRow = unknown>({
       size="small"
       onBlur={onBlur}
       onChange={onChange}
-      defaultValue={value === null ? 'null' : value.toString()}
+      defaultValue={!!value ? value.toString() : 'null'}
       style={{ width: `${column.width}px` }}
     >
       <Select.Option value="true">TRUE</Select.Option>

apps/studio/components/grid/components/menu/RowContextMenu.tsx

@@ -10,39 +10,38 @@ import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import { copyToClipboard, DialogSectionSeparator } from 'ui'
 import { formatClipboardValue } from '../../utils/common'
 
-export type RowContextMenuProps = {
+type RowContextMenuProps = {
   rows: SupaRow[]
 }
 
+type RowContextMenuItemProps = ItemParams<{ rowIdx: number }, string>
+
 export const RowContextMenu = ({ rows }: RowContextMenuProps) => {
   const tableEditorSnap = useTableEditorStateSnapshot()
   const snap = useTableEditorTableStateSnapshot()
 
-  function onDeleteRow(p: ItemParams) {
-    const { props } = p
-    const { rowIdx } = props
+  function onDeleteRow(p: RowContextMenuItemProps) {
+    const rowIdx = p.props?.rowIdx
+    if (!rowIdx) return
+
     const row = rows[rowIdx]
     if (row) tableEditorSnap.onDeleteRows([row])
   }
 
-  function onEditRowClick(p: ItemParams) {
-    const { props } = p
-    const { rowIdx } = props
+  function onEditRowClick(p: RowContextMenuItemProps) {
+    const rowIdx = p.props?.rowIdx
+    if (!rowIdx) return
+
     const row = rows[rowIdx]
     tableEditorSnap.onEditRow(row)
   }
 
   const onCopyCellContent = useCallback(
-    (p: ItemParams) => {
-      const { props } = p
+    (p: RowContextMenuItemProps) => {
+      const rowIdx = p.props?.rowIdx
+      if (!snap.selectedCellPosition || !rowIdx) return
 
-      if (!snap.selectedCellPosition || !props) {
-        return
-      }
-
-      const { rowIdx } = props
       const row = rows[rowIdx]
-
       const columnKey = snap.gridColumns[snap.selectedCellPosition.idx as number].key
 
       const value = row[columnKey]
@@ -55,9 +54,10 @@ export const RowContextMenu = ({ rows }: RowContextMenuProps) => {
   )
 
   const onCopyRowContent = useCallback(
-    (p: ItemParams) => {
-      const { props } = p
-      const { rowIdx } = props
+    (p: RowContextMenuItemProps) => {
+      const rowIdx = p.props?.rowIdx
+      if (!rowIdx) return
+
       const row = rows[rowIdx]
       copyToClipboard(JSON.stringify(row))
       toast.success('Copied row to clipboard')

apps/studio/components/ui/Charts/ComposedChart.tsx

@@ -354,30 +354,34 @@ export function ComposedChart({
           data={data}
           syncId={syncId}
           style={{ cursor: 'crosshair' }}
-          onMouseMove={(e: any) => {
+          onMouseMove={({ activeLabel, activeTooltipIndex, activePayload }) => {
+            if (!activeTooltipIndex) return
+
             setIsActiveHoveredChart(true)
-            if (e.activeTooltipIndex !== focusDataIndex) {
-              setFocusDataIndex(e.activeTooltipIndex)
-              setActivePayload(e.activePayload)
+            if (activeTooltipIndex !== focusDataIndex) {
+              setFocusDataIndex(activeTooltipIndex)
+              setActivePayload(activePayload ?? [])
             }
 
-            setHover(e.activeTooltipIndex)
+            setHover(activeTooltipIndex)
 
-            const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
+            const activeTimestamp = data[activeTooltipIndex]?.timestamp
             chartHighlight?.handleMouseMove({
               activeLabel: activeTimestamp?.toString(),
-              coordinates: e.activeLabel,
+              coordinates: activeLabel,
             })
           }}
-          onMouseDown={(e: any) => {
-            const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
+          onMouseDown={({ activeLabel, activeTooltipIndex }) => {
+            if (!activeTooltipIndex) return
+
+            const activeTimestamp = data[activeTooltipIndex]?.timestamp
             chartHighlight?.handleMouseDown({
               activeLabel: activeTimestamp?.toString(),
-              coordinates: e.activeLabel,
+              coordinates: activeLabel,
             })
           }}
           onMouseUp={chartHighlight?.handleMouseUp}
-          onMouseLeave={(e) => {
+          onMouseLeave={() => {
             setIsActiveHoveredChart(false)
             setFocusDataIndex(null)
             setActivePayload(null)

apps/studio/components/ui/Charts/useChartHighlight.tsx

@@ -1,27 +1,35 @@
-import { useState } from 'react'
 import dayjs from 'dayjs'
+import { useState } from 'react'
+
+type ChartHighlightMouseEvent = {
+  activeLabel?: string
+  coordinates?: string
+}
 
 export interface ChartHighlight {
   left: string | undefined
   right: string | undefined
-  coordinates: { left: any; right: any }
+  coordinates: { left?: string; right?: string }
   isSelecting: boolean
   popoverPosition: { x: number; y: number } | null
-  handleMouseDown: (e: { activeLabel?: string; coordinates?: any }) => void
-  handleMouseMove: (e: { activeLabel?: string; coordinates?: any }) => void
-  handleMouseUp: (e: any) => void
+  handleMouseDown: (e: ChartHighlightMouseEvent) => void
+  handleMouseMove: (e: ChartHighlightMouseEvent) => void
+  handleMouseUp: (e: { chartX?: number; chartY?: number }) => void
   clearHighlight: () => void
 }
 
 export function useChartHighlight(): ChartHighlight {
   const [left, setLeft] = useState<string | undefined>(undefined)
   const [right, setRight] = useState<string | undefined>(undefined)
-  const [coordinates, setCoordinates] = useState<any>({ left: undefined, right: undefined })
+  const [coordinates, setCoordinates] = useState<{ left?: string; right?: string }>({
+    left: undefined,
+    right: undefined,
+  })
   const [isSelecting, setIsSelecting] = useState(false)
   const [popoverPosition, setPopoverPosition] = useState<{ x: number; y: number } | null>(null)
   const [initialPoint, setInitialPoint] = useState<string | undefined>(undefined)
 
-  const handleMouseDown = (e: any) => {
+  const handleMouseDown = (e: ChartHighlightMouseEvent) => {
     clearHighlight()
     if (!e || !e.activeLabel) return
     setIsSelecting(true)
@@ -31,7 +39,7 @@ export function useChartHighlight(): ChartHighlight {
     setCoordinates({ left: e.coordinates, right: e.coordinates })
   }
 
-  const handleMouseMove = (e: any) => {
+  const handleMouseMove = (e: ChartHighlightMouseEvent) => {
     if (!isSelecting || !e || !e.activeLabel) return
 
     const currentTimestamp = dayjs(e.activeLabel)
@@ -56,11 +64,21 @@ export function useChartHighlight(): ChartHighlight {
     }
   }
 
-  const handleMouseUp = (e: any) => {
+  const handleMouseUp = (e: unknown) => {
     if (!isSelecting) return
     setIsSelecting(false)
-    setPopoverPosition({ x: e.chartX, y: e.chartY })
     setInitialPoint(undefined)
+
+    if (
+      typeof e === 'object' &&
+      e !== null &&
+      'chartX' in e &&
+      'chartY' in e &&
+      typeof e.chartX === 'number' &&
+      typeof e.chartY === 'number'
+    ) {
+      setPopoverPosition({ x: e.chartX, y: e.chartY })
+    }
   }
 
   const clearHighlight = () => {

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

@@ -65,7 +65,7 @@ export function TimelineChart<TChart extends BaseChartSchema>({
     }
   }
 
-  const handleMouseUp: CategoricalChartFunc = (e) => {
+  const handleMouseUp: CategoricalChartFunc = () => {
     if (refAreaLeft && refAreaRight) {
       const [left, right] = [refAreaLeft, refAreaRight].sort(
         (a, b) => new Date(a).getTime() - new Date(b).getTime()

apps/studio/state/storage-explorer.tsx

@@ -338,7 +338,7 @@ function createStorageExplorerState({
         })
       }
 
-      const newFolder = state.columns[columnIndex].items?.find((x) => x.name === formattedName)
+      const newFolder = state.columns[columnIndex]?.items?.find((x) => x?.name === formattedName)
       if (newFolder) state.openFolder(columnIndex, newFolder)
     },