fix: Fix a bug when updating a row which contains truncated values (#28419)

* Add helper function to check if a value is truncated.

* Fix the validation and generation of payload to not include truncated values.

* Remove console log

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx

@@ -10,11 +10,11 @@ import {
   Select,
 } from 'ui'
 
-import { MAX_CHARACTERS } from 'data/table-rows/table-rows-query'
 import { Edit, Edit2, Link } from 'lucide-react'
 import { DATETIME_TYPES, JSON_TYPES, TEXT_TYPES } from '../SidePanelEditor.constants'
 import { DateTimeInput } from './DateTimeInput'
 import type { RowField } from './RowEditor.types'
+import { isValueTruncated } from './RowEditor.utils'
 
 export interface InputFieldProps {
   field: RowField
@@ -128,7 +128,7 @@ const InputField = ({
   }
 
   if (includes(TEXT_TYPES, field.format)) {
-    const isTruncated = field.value?.endsWith('...') && (field.value ?? '').length > MAX_CHARACTERS
+    const isTruncated = isValueTruncated(field.value)
 
     return (
       <div className="text-area-text-sm">
@@ -186,7 +186,7 @@ const InputField = ({
   }
 
   if (includes(JSON_TYPES, field.format)) {
-    const isTruncated = field.value?.endsWith('...') && (field.value ?? '').length > MAX_CHARACTERS
+    const isTruncated = isValueTruncated(field.value)
 
     return (
       <Input

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils.ts

@@ -1,11 +1,13 @@
 import type { PostgresTable } from '@supabase/postgres-meta'
-import type { Dictionary } from 'types'
 import dayjs from 'dayjs'
 import { compact, find, isEqual, isNull, isString, isUndefined, omitBy } from 'lodash'
+import type { Dictionary } from 'types'
 
+import { MAX_CHARACTERS } from 'data/table-rows/table-rows-query'
 import { minifyJSON, tryParseJson } from 'lib/helpers'
 import {
   DATETIME_TYPES,
+  JSON_TYPES,
   TEXT_TYPES,
   TIMESTAMP_TYPES,
   TIME_TYPES,
@@ -71,6 +73,10 @@ export const validateFields = (fields: RowField[]) => {
       }
     }
     if (field.format.includes('json') && (field.value?.length ?? 0) > 0) {
+      const isTruncated = isValueTruncated(field.value)
+      // don't validate if the value is truncated
+      if (isTruncated) return
+
       try {
         minifyJSON(field.value ?? '')
       } catch {
@@ -190,14 +196,15 @@ export const generateRowObjectFromFields = (
   return includeNullProperties ? rowObject : omitBy(rowObject, isNull)
 }
 
-export const generateUpdateRowPayload = (originalRow: any, field: RowField[]) => {
+export const generateUpdateRowPayload = (originalRow: any, fields: RowField[]) => {
   const includeNullProperties = true
-  const rowObject = generateRowObjectFromFields(field, includeNullProperties) as any
+  const rowObject = generateRowObjectFromFields(fields, includeNullProperties) as any
 
   const payload = {} as any
   const properties = Object.keys(rowObject)
   properties.forEach((property) => {
-    const type = field.find((x) => x.name === property)?.format
+    const field = fields.find((x) => x.name === property)
+    const type = field?.format
     if (type !== undefined && DATETIME_TYPES.includes(type)) {
       // Just to ensure that the value are in the correct and consistent format for value comparison
       const originalFormatted = convertPostgresDatetimeToInputDatetime(type, originalRow[property])
@@ -205,6 +212,13 @@ export const generateUpdateRowPayload = (originalRow: any, field: RowField[]) =>
       if (originalFormattedOut !== rowObject[property]) {
         payload[property] = rowObject[property]
       }
+    } else if (type !== undefined && JSON_TYPES.includes(type)) {
+      // don't update if the value is truncated. This is to enable the user to change cell values on rows which have
+      // truncated JSON values. If the user
+      const isTruncated = isValueTruncated(field?.value)
+      if (!isTruncated) {
+        payload[property] = rowObject[property]
+      }
     } else if (!isEqual(originalRow[property], rowObject[property])) {
       payload[property] = rowObject[property]
     }
@@ -212,3 +226,10 @@ export const generateUpdateRowPayload = (originalRow: any, field: RowField[]) =>
 
   return payload
 }
+
+/**
+ * Checks if the value is truncated. The JSON types are usually truncated if they're too big to show in the editor.
+ */
+export const isValueTruncated = (value: string | null | undefined) => {
+  return value?.endsWith('...') && (value ?? '').length > MAX_CHARACTERS
+}

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx

@@ -14,6 +14,7 @@ import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import useTable from 'hooks/misc/useTable'
 import { Button, SidePanel, cn } from 'ui'
 import ActionBar from '../ActionBar'
+import { isValueTruncated } from './RowEditor.utils'
 
 interface TextEditorProps {
   visible: boolean
@@ -40,7 +41,7 @@ export const TextEditor = ({
   const [strValue, setStrValue] = useState('')
   const [view, setView] = useState<'edit' | 'view'>('edit')
   const value = row?.[column as keyof typeof row] as unknown as string
-  const isTruncated = value?.endsWith('...') && value.length > MAX_CHARACTERS
+  const isTruncated = isValueTruncated(value)
 
   const { mutate: getCellValue, isLoading, isSuccess } = useGetCellValueMutation()