fix: dataTablesPane cell render undefine when the dot in metric label (#15817)

* fix: dataTablesPane cell render undefine when the dot in metric label

* fix UT

superset-frontend/src/explore/components/DataTableControl/index.tsx

@@ -122,7 +122,7 @@ export const useTableColumns = (
         ? Object.keys(data[0]).map(
             key =>
               ({
-                accessor: key,
+                accessor: row => row[key],
                 Header: key,
                 Cell: ({ value }) => {
                   if (value === true) {

superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts

@@ -16,38 +16,121 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
 import { renderHook } from '@testing-library/react-hooks';
+import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
 import { useTableColumns } from '.';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type JsonObject = { [member: string]: any };
+
+const asciiChars = [];
+for (let i = 32; i < 127; i += 1) {
+  asciiChars.push(String.fromCharCode(i));
+}
+const asciiKey = asciiChars.join('');
+const unicodeKey = '你好. 吃了吗?';
+
 const data = [
-  { col01: 'some', col02: 'data' },
+  { col01: true, col02: false, [asciiKey]: asciiKey, [unicodeKey]: unicodeKey },
-  { col01: 'any', col02: 'data' },
+  { col01: true, col02: false, [asciiKey]: asciiKey, [unicodeKey]: unicodeKey },
-  { col01: 'some', col02: 'thing' },
+  { col01: true, col02: false, [asciiKey]: asciiKey, [unicodeKey]: unicodeKey },
-  { col01: 'any', col02: 'things', col03: 'secret' },
+  {
+    col01: true,
+    col02: false,
+    col03: 'secret',
+    [asciiKey]: asciiKey,
+    [unicodeKey]: unicodeKey,
+  },
 ];
 
 test('useTableColumns with no options', () => {
   const hook = renderHook(() => useTableColumns(data));
   expect(hook.result.current).toEqual([
-    { Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
+    {
-    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+      Cell: expect.any(Function),
+      Header: 'col01',
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: 'col02',
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: asciiKey,
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: unicodeKey,
+      accessor: expect.any(Function),
+    },
   ]);
+  hook.result.current.forEach((col: JsonObject) => {
+    expect(col.accessor(data[0])).toBe(data[0][col.Header]);
+  });
+
+  hook.result.current.forEach((col: JsonObject) => {
+    data.forEach(row => {
+      expect(col.Cell({ value: row.col01 })).toBe(BOOL_TRUE_DISPLAY);
+      expect(col.Cell({ value: row.col02 })).toBe(BOOL_FALSE_DISPLAY);
+      expect(col.Cell({ value: row[asciiKey] })).toBe(asciiKey);
+      expect(col.Cell({ value: row[unicodeKey] })).toBe(unicodeKey);
+    });
+  });
 });
 
 test('use only the first record columns', () => {
-  const hook = renderHook(() => useTableColumns(data));
+  const newData = [data[3], data[0]];
+  const hook = renderHook(() => useTableColumns(newData));
   expect(hook.result.current).toEqual([
-    { Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
+    {
-    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+      Cell: expect.any(Function),
+      Header: 'col01',
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: 'col02',
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: 'col03',
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: asciiKey,
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: unicodeKey,
+      accessor: expect.any(Function),
+    },
   ]);
 
-  const hook2 = renderHook(() => useTableColumns([data[3], data[0]]));
+  hook.result.current.forEach((col: JsonObject) => {
-  expect(hook2.result.current).toEqual([
+    expect(col.accessor(newData[0])).toBe(newData[0][col.Header]);
-    { Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
+  });
-    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+
-    { Cell: expect.any(Function), Header: 'col03', accessor: 'col03' },
+  hook.result.current.forEach((col: JsonObject) => {
-  ]);
+    expect(col.Cell({ value: newData[0].col01 })).toBe(BOOL_TRUE_DISPLAY);
+    expect(col.Cell({ value: newData[0].col02 })).toBe(BOOL_FALSE_DISPLAY);
+    expect(col.Cell({ value: newData[0].col03 })).toBe('secret');
+    expect(col.Cell({ value: newData[0][asciiKey] })).toBe(asciiKey);
+    expect(col.Cell({ value: newData[0][unicodeKey] })).toBe(unicodeKey);
+  });
+
+  hook.result.current.forEach((col: JsonObject) => {
+    expect(col.Cell({ value: newData[1].col01 })).toBe(BOOL_TRUE_DISPLAY);
+    expect(col.Cell({ value: newData[1].col02 })).toBe(BOOL_FALSE_DISPLAY);
+    expect(col.Cell({ value: newData[1].col03 })).toBe('undefined');
+    expect(col.Cell({ value: newData[1][asciiKey] })).toBe(asciiKey);
+    expect(col.Cell({ value: newData[1][unicodeKey] })).toBe(unicodeKey);
+  });
 });
 
 test('useTableColumns with options', () => {
@@ -56,9 +139,35 @@ test('useTableColumns with options', () => {
     {
       Cell: expect.any(Function),
       Header: 'col01',
-      accessor: 'col01',
+      accessor: expect.any(Function),
       id: 'ID',
     },
-    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+    {
+      Cell: expect.any(Function),
+      Header: 'col02',
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: asciiKey,
+      accessor: expect.any(Function),
+    },
+    {
+      Cell: expect.any(Function),
+      Header: unicodeKey,
+      accessor: expect.any(Function),
+    },
   ]);
+  hook.result.current.forEach((col: JsonObject) => {
+    expect(col.accessor(data[0])).toBe(data[0][col.Header]);
+  });
+
+  hook.result.current.forEach((col: JsonObject) => {
+    data.forEach(row => {
+      expect(col.Cell({ value: row.col01 })).toBe(BOOL_TRUE_DISPLAY);
+      expect(col.Cell({ value: row.col02 })).toBe(BOOL_FALSE_DISPLAY);
+      expect(col.Cell({ value: row[asciiKey] })).toBe(asciiKey);
+      expect(col.Cell({ value: row[unicodeKey] })).toBe(unicodeKey);
+    });
+  });
 });