fix: Allow JSONRenderer to fallback to code view if data is not tabular

packages/frontend/src/components/file-viewer/file-viewer.tsx

@@ -110,6 +110,9 @@ export interface FileViewerProps {
   // Set true to indicate the rendered file is a conversion
   isConverted?: boolean;
 
+  defaultMode?: 'rendered' | 'raw';
+  canRender?: boolean;
+
   mime?: string;
   path?: string;
 
@@ -131,6 +134,8 @@ export const FileViewer = ({
   headerStyles = {},
   isConverted = false,
   mime,
+  defaultMode = 'rendered',
+  canRender = true,
   path,
   transformAssetUri,
   ...props
@@ -147,7 +152,7 @@ export const FileViewer = ({
   const convertedDownloadUrl = isConverted ? getCompletePath(baseAssetUrl, path, true) : undefined;
 
   const [paused, setPaused] = useState(true);
-  const [mode, setMode] = useState('rendered');
+  const [mode, setMode] = useState(defaultMode);
   const unpause = () => paused && setPaused(false);
   const pause = () => !paused && setPaused(true);
 
@@ -162,7 +167,7 @@ export const FileViewer = ({
   });
 
   let canDisplayRaw = false;
-  let canDisplayRendered = false;
+  let canDisplayRendered = canRender;
   const canDownload = allowDownload;
   let renderer: ReactElement | null = null;
 
@@ -334,7 +339,7 @@ export const FileViewer = ({
               />
             </Tooltip>
           )}
-          {canDisplayRendered && (
+          {canRender && canDisplayRendered && (
             <Tooltip placement="bottom" label="Display rendered" aria-label="Display rendered">
               <IconButton
                 aria-label="Display rendered"

packages/frontend/src/components/renderers/json-renderer/json-renderer.tsx

@@ -14,29 +14,41 @@
  * limitations under the License.
  */
 
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 
+import { Alert } from '../../alert/alert';
+import { CodeRenderer } from '../code-renderer/code-renderer';
 import { TableRenderer } from '../table-renderer/table-renderer';
 
 export const JsonRenderer = ({ contents }) => {
+  const [error, setError] = useState(undefined);
+
   const results = useMemo(() => {
     if (contents) {
-      const data = JSON.parse(contents);
-
-      // Assume all the columns are in the first row
-      // We could extend this to take a larger sample of data to determine the columns
-      const columns = Object.keys(data[0]).map((column) => ({
-        Header: column,
-        accessor: column
-      }));
-
-      return {
-        columns,
-        data
-      };
+      try {
+        const data = JSON.parse(contents);
+
+        // Assume all the columns are in the first row
+        // We could extend this to take a larger sample of data to determine the columns
+        const columns = Object.keys(data[0]).map((column) => ({
+          Header: column,
+          accessor: column
+        }));
+
+        return {
+          columns,
+          data
+        };
+      } catch (error: any) {
+        setError(error);
+      }
     }
   }, [contents]);
 
+  if (error) {
+    // Fallback to displaying the contents as a code snippet
+    return <CodeRenderer contents={contents} language="json" />;
+  }
   if (results === undefined) {
     return null;
   }

packages/frontend/src/pages/insight-page/components/insight-viewer/insight-viewer.tsx

@@ -138,6 +138,8 @@ export const InsightViewer = ({
                     element={
                       <FileViewer
                         mime="application/json"
+                        defaultMode="raw"
+                        canRender={false}
                         contents={JSON.stringify(insight, null, 2)}
                         baseAssetUrl={`/api/v1/insights/${insight.fullName}/assets`}
                         baseLinkUrl={`/${insight.itemType}/${insight.fullName}/files`}