diff --git a/apps/studio/components/grid/components/editor/BooleanEditor.tsx b/apps/studio/components/grid/components/editor/BooleanEditor.tsx index 39953d1c493..dd5dd2227f2 100644 --- a/apps/studio/components/grid/components/editor/BooleanEditor.tsx +++ b/apps/studio/components/grid/components/editor/BooleanEditor.tsx @@ -32,7 +32,7 @@ export const BooleanEditor = ({ size="small" onBlur={onBlur} onChange={onChange} - defaultValue={value === null ? 'null' : value.toString()} + defaultValue={!!value ? value.toString() : 'null'} style={{ width: `${column.width}px` }} > TRUE diff --git a/apps/studio/components/grid/components/menu/RowContextMenu.tsx b/apps/studio/components/grid/components/menu/RowContextMenu.tsx index 33322aa4bc5..cb6920996bb 100644 --- a/apps/studio/components/grid/components/menu/RowContextMenu.tsx +++ b/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') diff --git a/apps/studio/components/ui/Charts/ComposedChart.tsx b/apps/studio/components/ui/Charts/ComposedChart.tsx index f2983d0fe21..60b70434b89 100644 --- a/apps/studio/components/ui/Charts/ComposedChart.tsx +++ b/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) diff --git a/apps/studio/components/ui/Charts/useChartHighlight.tsx b/apps/studio/components/ui/Charts/useChartHighlight.tsx index a9b0ff2f1f3..e4f8593e9af 100644 --- a/apps/studio/components/ui/Charts/useChartHighlight.tsx +++ b/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(undefined) const [right, setRight] = useState(undefined) - const [coordinates, setCoordinates] = useState({ 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(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 = () => { diff --git a/apps/studio/components/ui/DataTable/TimelineChart.tsx b/apps/studio/components/ui/DataTable/TimelineChart.tsx index 76acf6daf25..a8a17cb9c72 100644 --- a/apps/studio/components/ui/DataTable/TimelineChart.tsx +++ b/apps/studio/components/ui/DataTable/TimelineChart.tsx @@ -65,7 +65,7 @@ export function TimelineChart({ } } - 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() diff --git a/apps/studio/state/storage-explorer.tsx b/apps/studio/state/storage-explorer.tsx index 43e30e45029..7c2c1de8a02 100644 --- a/apps/studio/state/storage-explorer.tsx +++ b/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) },