console: fix browsing data for tables with json column and no primary key

GitOrigin-RevId: eb1696d3bf00c2e5805ffbf5847d382de655fab5

console/cypress/integration/data/manage-database/spec.ts

@@ -37,7 +37,7 @@ export const addsNewPostgresDatabaseWithUrl = () => {
   cy.getBySel('idle-timeout').type('180');
   cy.getBySel('retries').type('1');
   cy.getBySel('save-database').click();
-  cy.get('.notification-success')
+  cy.get('.notification-success', { timeout: 10000 })
     .should('be.visible')
     .and('contain', 'Database added successfully!');
   cy.url().should('eq', `${baseUrl}/data/manage`);
@@ -57,7 +57,7 @@ export const addsNewPgDBWithConParams = () => {
   }
   cy.getBySel('database-name').type(config.dbName);
   cy.getBySel('save-database').click();
-  cy.get('.notification-success')
+  cy.get('.notification-success', { timeout: 10000 })
     .should('be.visible')
     .and('contain', 'Database added successfully!');
   cy.url().should('eq', `${baseUrl}/data/manage`);
@@ -71,7 +71,7 @@ export const addsNewPgDBWithEnvVar = () => {
   cy.getBySel('database-type').select('postgres');
   cy.getBySel('database-url-env').type('HASURA_GRAPHQL_DATABASE_URL');
   cy.getBySel('save-database').click();
-  cy.get('.notification-success')
+  cy.get('.notification-success', { timeout: 10000 })
     .should('be.visible')
     .and('contain', 'Database added successfully!');
   cy.url().should('eq', `${baseUrl}/data/manage`);

console/src/components/Services/Data/TableBrowseRows/ViewRows.js

@@ -227,13 +227,19 @@ const ViewRows = props => {
     const pkClause = {};
 
     if (!isView && hasPrimaryKey) {
-      tableSchema.primary_key.columns.map(key => {
+      tableSchema.primary_key.columns.forEach(key => {
+        pkClause[key] = row[key];
+      });
+    } else if (tableSchema.unique_constraints?.length) {
+      tableSchema.unique_constraints[0].columns.forEach(key => {
         pkClause[key] = row[key];
       });
     } else {
-      tableSchema.columns.map(key => {
-        pkClause[key.column_name] = row[key.column_name];
-      });
+      tableSchema.columns
+        .filter(c => !dataSource.isJsonColumn(c))
+        .forEach(key => {
+          pkClause[key.column_name] = row[key.column_name];
+        });
     }
 
     Object.keys(pkClause).forEach(key => {

console/src/dataSources/index.ts

@@ -8,6 +8,7 @@ import {
   TableColumn,
   FrequentlyUsedColumn,
   PermissionColumnCategories,
+  BaseTableColumn,
 } from './types';
 import { PGFunction, FunctionState } from './services/postgresql/types';
 import { Operations } from './common';
@@ -89,6 +90,7 @@ export interface DataSourcesAPI {
   fetchColumnTypesQuery: string;
   fetchColumnDefaultFunctions(schema: string): string;
   isSQLFunction(str: string): boolean;
+  isJsonColumn(column: BaseTableColumn): boolean;
   getEstimateCountQuery: (schemaName: string, tableName: string) => string;
   isColTypeString(colType: string): boolean;
   cascadeSqlQuery(sql: string): string;

console/src/dataSources/services/mssql/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DataSourcesAPI } from '../..';
-import { TableColumn, Table } from '../../types';
+import { TableColumn, Table, BaseTableColumn } from '../../types';
 import { getTableRowRequest } from './utils';
 
 const permissionColumnDataTypes = {
@@ -87,6 +87,10 @@ export const displayTableName = (table: Table) => {
   return isTable(table) ? <span>{tableName}</span> : <i>{tableName}</i>;
 };
 
+export const isJsonColumn = (column: BaseTableColumn): boolean => {
+  return column.data_type_name === 'json' || column.data_type_name === 'jsonb';
+};
+
 const processTableRowData = (
   data: any,
   config?: { originalTable: string; currentSchema: string }
@@ -103,6 +107,7 @@ const processTableRowData = (
 
 export const mssql: DataSourcesAPI = {
   isTable,
+  isJsonColumn,
   displayTableName,
   operators,
   getTableRowRequest,

console/src/dataSources/services/mysql/index.tsx

@@ -135,6 +135,7 @@ export const mysql: DataSourcesAPI = {
   getFunctionSchema: () => {
     return '';
   },
+  isJsonColumn: () => false,
   getFunctionDefinitionSql: () => {
     return '';
   },

console/src/dataSources/services/postgresql/index.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Table, TableColumn, ComputedField } from '../../types';
+import {
+  Table,
+  TableColumn,
+  ComputedField,
+  BaseTableColumn,
+} from '../../types';
 import { QUERY_TYPES, Operations } from '../../common';
 import { PGFunction } from './types';
 import { DataSourcesAPI, ColumnsInfoResult } from '../..';
@@ -176,6 +181,10 @@ export const getSchemaFunctions = (
   );
 };
 
+export const isJsonColumn = (column: BaseTableColumn): boolean => {
+  return column.data_type === 'json' || column.data_type === 'jsonb';
+};
+
 export const findFunction = (
   allFunctions: PGFunction[],
   functionName: string,
@@ -504,6 +513,7 @@ const permissionColumnDataTypes = {
 
 export const postgres: DataSourcesAPI = {
   isTable,
+  isJsonColumn,
   displayTableName,
   getFunctionSchema,
   getFunctionDefinition,