Convert mutation payload values according to the column data type

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8210
GitOrigin-RevId: 18a0909f3b99b5ef93891baf03454b88cade2055

frontend/libs/console/legacy-ce/src/lib/features/DataSource/gdc/introspection/utils.tsx

@@ -61,15 +61,15 @@ export function adaptAgentDataType(
   const DataTypeToSQLTypeMap: Record<TableColumn['dataType'], string[]> = {
     bool: ['bool'],
     string: ['string'],
-    number: ['number'],
-    datetime: [],
-    timestamp: [],
-    xml: [],
-    json: [],
+    number: ['number', 'integer', 'float'],
+    datetime: ['datetime'],
+    timestamp: ['timestamp'],
+    xml: ['xml'],
+    json: ['json', 'jsonb'],
   };
 
   const [dataType] = getEntries(DataTypeToSQLTypeMap).find(([, value]) =>
-    value.includes(sqlDataType)
+    value.includes(sqlDataType.toLowerCase())
   ) ?? ['string', []];
 
   return dataType;

frontend/libs/console/legacy-ce/src/lib/features/InsertRow/InsertRowForm.tsx

@@ -4,6 +4,7 @@ import { InsertRowArgs } from '../DataSource';
 import { ColumnRow } from './components/ColumnRow';
 import { FormData } from '../Data/hooks/useInsertRow';
 import Skeleton from 'react-loading-skeleton';
+import { convertTableValue } from './InsertRowForm.utils';
 import { ListAllTableColumn } from '../Data/hooks/useListAllTableColumns';
 
 export type InsertRowFormProps = {
@@ -23,10 +24,22 @@ export const InsertRowForm: React.VFC<InsertRowFormProps> = ({
 
   const onInsert = () => {
     const adaptedValues = values.reduce<FormData>((acc, value) => {
+      const columnName = Object.keys(value)[0];
+      const columnValue = Object.values(value)[0];
+
+      const columnDefinition = columns.find(
+        column => column.name === columnName
+      );
+
+      const finalColumnValue = convertTableValue(
+        columnValue,
+        columnDefinition?.dataType
+      );
+
       const formData: FormData = {
-        [Object.keys(value)[0]]: {
+        [columnName]: {
           option: 'value',
-          value: Object.values(value)[0],
+          value: finalColumnValue,
         },
       };
 

frontend/libs/console/legacy-ce/src/lib/features/InsertRow/InsertRowForm.utils.test.ts

@@ -0,0 +1,19 @@
+import { convertTableValue } from './InsertRowForm.utils';
+
+describe('convertTableValue', () => {
+  it.each`
+    columnValue | dataType     | expected
+    ${'foo'}    | ${'string'}  | ${'foo'}
+    ${'13.2'}   | ${'number'}  | ${13.2}
+    ${'11'}     | ${'number'}  | ${11}
+    ${'true'}   | ${'boolean'} | ${true}
+    ${'false'}  | ${'boolean'} | ${false}
+    ${'true'}   | ${'bool'}    | ${true}
+    ${'false'}  | ${'bool'}    | ${false}
+  `(
+    'given $dataType it returns $expected',
+    ({ columnValue, dataType, expected }) => {
+      expect(convertTableValue(columnValue, dataType)).toEqual(expected);
+    }
+  );
+});

frontend/libs/console/legacy-ce/src/lib/features/InsertRow/InsertRowForm.utils.ts

@@ -0,0 +1,18 @@
+import { TableColumn } from '../DataSource';
+
+export const convertTableValue = (
+  value: unknown,
+  dataType: TableColumn['dataType'] | undefined
+): string | number | boolean | unknown => {
+  if (typeof value === 'string') {
+    if (dataType === 'number') {
+      return parseFloat(value);
+    }
+
+    if (dataType === 'boolean' || dataType === 'bool') {
+      return value === 'true' ? true : false;
+    }
+  }
+
+  return value;
+};