Web console: better detection for arrays containing objects (#13077)

* better detection for arrays containing objects

* include boolean also

web-console/src/components/table-cell/__snapshots__/table-cell.spec.tsx.snap

@@ -49,6 +49,14 @@ exports[`TableCell matches snapshot array long 1`] = `
 </div>
 `;
 
+exports[`TableCell matches snapshot array mixed 1`] = `
+<div
+  class="table-cell plain"
+>
+  ["a",{"v":"b"},"c"]
+</div>
+`;
+
 exports[`TableCell matches snapshot array short 1`] = `
 <div
   class="table-cell plain"

web-console/src/components/table-cell/table-cell.spec.tsx

@@ -64,6 +64,13 @@ describe('TableCell', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it('matches snapshot array mixed', () => {
+    const tableCell = <TableCell value={['a', { v: 'b' }, 'c']} />;
+
+    const { container } = render(tableCell);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it('matches snapshot object', () => {
     const tableCell = <TableCell value={{ hello: 'world' }} />;
 

web-console/src/components/table-cell/table-cell.tsx

@@ -21,6 +21,7 @@ import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
 import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
+import { isSimpleArray } from '../../utils';
 import { ActionIcon } from '../action-icon/action-icon';
 
 import './table-cell.scss';
@@ -97,7 +98,7 @@ export const TableCell = React.memo(function TableCell(props: TableCellProps) {
           {isNaN(dateValue) ? 'Unusable date' : value.toISOString()}
         </div>
       );
-    } else if (Array.isArray(value)) {
+    } else if (isSimpleArray(value)) {
       return renderTruncated(`[${value.join(', ')}]`);
     } else if (typeof value === 'object') {
       return renderTruncated(JSONBig.stringify(value));

web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts

@@ -725,6 +725,15 @@ describe('spec utils', () => {
     it('works for multi-value', () => {
       expect(guessColumnTypeFromInput(['a', ['b'], 'c'], false)).toEqual('string');
       expect(guessColumnTypeFromInput([1, [2], 3], false)).toEqual('string');
+      expect(guessColumnTypeFromInput([true, [true, 7, false], false, 'x'], false)).toEqual(
+        'string',
+      );
+    });
+
+    it('works for complex arrays', () => {
+      expect(guessColumnTypeFromInput([{ type: 'Dogs' }, { type: 'JavaScript' }], false)).toEqual(
+        'COMPLEX<json>',
+      );
     });
 
     it('works for strange json', () => {

web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx

@@ -32,6 +32,7 @@ import {
   EMPTY_ARRAY,
   EMPTY_OBJECT,
   filterMap,
+  isSimpleArray,
   oneOf,
   parseCsvLine,
   typeIs,
@@ -2330,7 +2331,7 @@ export function guessIsArrayFromHeaderAndRows(
   headerAndRows: SampleHeaderAndRows,
   column: string,
 ): boolean {
-  return headerAndRows.rows.some(r => Array.isArray(r.input?.[column]));
+  return headerAndRows.rows.some(r => isSimpleArray(r.input?.[column]));
 }
 
 export function guessColumnTypeFromInput(
@@ -2343,7 +2344,7 @@ export function guessColumnTypeFromInput(
   if (!definedValues.length) return 'string';
 
   // If we see any arrays in the input this is a multi-value dimension that must be a string
-  if (definedValues.some(v => Array.isArray(v))) return 'string';
+  if (definedValues.some(v => isSimpleArray(v))) return 'string';
 
   // If we see any JSON objects in the input assume COMPLEX<json>
   if (definedValues.some(v => v && typeof v === 'object')) return 'COMPLEX<json>';

web-console/src/utils/general.tsx

@@ -40,6 +40,16 @@ export function nonEmptyArray(a: any): a is unknown[] {
   return Array.isArray(a) && Boolean(a.length);
 }
 
+export function isSimpleArray(a: any): a is (string | number | boolean)[] {
+  return (
+    Array.isArray(a) &&
+    a.every(x => {
+      const t = typeof x;
+      return t === 'string' || t === 'number' || t === 'boolean';
+    })
+  );
+}
+
 export function wait(ms: number): Promise<void> {
   return new Promise(resolve => {
     setTimeout(resolve, ms);