fix: in ui, Context tab can show raw json strings

This also adds placeholder text for context messages with no defsite.

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/Markdown.css

@@ -1,4 +1,4 @@
-.pf-v6-c-panel__main > .pdl-markdown {
+.pdl-masonry-tile .pf-v6-c-panel__main > .pdl-markdown {
   padding: 1em;
 }
 

pdl-live-react/src/view/Value.tsx

@@ -1,17 +1,27 @@
+import Code from "./code/Code"
 import Markdown from "./Markdown"
 
 type Props = { children: number | string | unknown }
 
+function isJson(s: string) {
+  try {
+    JSON.parse(s)
+    return true
+  } catch (_err) {
+    return false
+  }
+}
+
 export default function Value({ children: s }: Props) {
-  return (
-    <>
-      {typeof s === "number" ? (
-        s
-      ) : typeof s === "string" ? (
-        <Markdown>{s === "\n" ? "*<newline>*" : s.trim()}</Markdown>
-      ) : (
-        JSON.stringify(s, undefined, 2)
-      )}
-    </>
+  return typeof s === "number" ? (
+    s
+  ) : typeof s === "string" ? (
+    isJson(s) ? (
+      <Code block={s} language="json" />
+    ) : (
+      <Markdown>{s === "\n" ? "*<newline>*" : s.trim()}</Markdown>
+    )
+  ) : (
+    JSON.stringify(s, undefined, 2)
   )
 }

pdl-live-react/src/view/detail/ContextTabContent.tsx

@@ -4,6 +4,8 @@ import {
   DescriptionListGroup,
   DescriptionListDescription,
   Divider,
+  Panel,
+  PanelMain,
 } from "@patternfly/react-core"
 
 import Result from "../Result"
@@ -22,7 +24,11 @@ export default function ContextTabContent({ block }: Props) {
             {c.role[0].toUpperCase() + c.role.slice(1)}
           </DescriptionListTerm>
           <DescriptionListDescription>
-            <Result result={c.content} term="" />
+            <Panel isScrollable>
+              <PanelMain>
+                <Result result={c.content} term="" />
+              </PanelMain>
+            </Panel>
           </DescriptionListDescription>
         </DescriptionListGroup>,
 
@@ -31,7 +37,11 @@ export default function ContextTabContent({ block }: Props) {
             Where was this value defined?
           </DescriptionListTerm>
           <DescriptionListDescription>
-            {c.defsite && <BreadcrumbBarForBlockId id={c.defsite} />}
+            {c.defsite ? (
+              <BreadcrumbBarForBlockId id={c.defsite} />
+            ) : (
+              "The origin of this data is not known"
+            )}
           </DescriptionListDescription>
         </DescriptionListGroup>,