fix JSON display in object detail + test (#5767)

frontend/src/metabase/visualizations/visualizations/ObjectDetail.jsx

@@ -70,7 +70,7 @@ export default class ObjectDetail extends Component {
         } else {
             if (value === null || value === undefined || value === "") {
                 cellValue = (<span className="text-grey-2">Empty</span>);
-            } else if (isa(value.special_type, TYPE.SerializedJSON)) {
+            } else if (isa(column.special_type, TYPE.SerializedJSON)) {
                 let formattedJson = JSON.stringify(JSON.parse(value), null, 2);
                 cellValue = (<pre className="ObjectJSON">{formattedJson}</pre>);
             } else if (typeof value === "object") {
@@ -108,7 +108,7 @@ export default class ObjectDetail extends Component {
     renderDetailsTable() {
         const { data: { cols, rows }} = this.props;
         return cols.map((column, columnIndex) =>
-            <div className="Grid mb2" key={columnIndex}>
+            <div className="Grid Grid--1of2 mb2" key={columnIndex}>
                 <div className="Grid-cell">
                     {this.cellRenderer(column, rows[0][columnIndex], true)}
                 </div>

frontend/test/visualizations/components/ObjectDetail.unit.test.js

+import React from 'react'
+import { mount } from 'enzyme'
+import ObjectDetail from 'metabase/visualizations/visualizations/ObjectDetail'
+
+import { TYPE } from "metabase/lib/types";
+
+const objectDetailCard = {
+    card: {
+        display: "object"
+    },
+    data: {
+        cols: [{
+            display_name: "Details",
+            special_type: TYPE.SerializedJSON
+        }],
+        columns: [
+            "details"
+        ],
+        rows: [
+            [JSON.stringify({hey: "yo"})]
+        ]
+    }
+}
+
+describe('ObjectDetail', () => {
+    describe('json field rendering', () => {
+        it('should properly display JSON special type data as JSON', () => {
+            const detail = mount(
+                <ObjectDetail
+                    data={objectDetailCard.data}
+                    series={objectDetailCard}
+                    loadObjectDetailFKReferences={() => ({})}
+                />
+            )
+
+            expect(detail.find('.ObjectJSON').length).toEqual(1)
+        })
+    })
+})