fix: pdl-live-react improve ui of top-level q&a

Also improves test coverage of the various pages. Also fixes a bug in `useDynamicTitle()` that resulted in failure on `/` Signed-off-by: Nick Mitchell <[email protected]>
IBM · Jan 19, 2025 · 4191b37 · 4191b37
1 parent b3f4884
commit 4191b37
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 21 deletions.
diff --git a/pdl-live-react/src/title.ts b/pdl-live-react/src/title.ts
@@ -2,15 +2,17 @@ import { useEffect } from "react"
 import { useLocation } from "react-router-dom"
 
 function capitalize(s: string) {
-  return s[0].toUpperCase() + s.slice(1)
+  return s.length === 0 ? s : s[0].toUpperCase() + s.slice(1)
 }
 
 export default function useDynamicTitle() {
   const { pathname } = useLocation()
 
   useEffect(() => {
-    document.title =
-      "PDL Live - " +
-      capitalize(decodeURIComponent(pathname.replace(/^\/(demos\/)?/, "")))
+    const rest = capitalize(
+      decodeURIComponent(pathname.replace(/^\/(demos\/)?/, "")),
+    )
+
+    document.title = "PDL Viewer" + (rest ? ` - ${rest}` : "")
   }, [pathname])
 }
diff --git a/pdl-live-react/src/view/transcript/PrettyKind.tsx b/pdl-live-react/src/view/transcript/PrettyKind.tsx
@@ -25,10 +25,16 @@ export default function PrettyKind({
             typeof block.input === "string" &&
             block.input.length > 0 && (
               <>
-                <QAV q="Q">{block.input}</QAV>
+                <QAV q="Q" kind="dialog">
+                  {block.input}
+                </QAV>
               </>
             )}
-          {hasScalarResult(block) && <QAV q="A">{block.result}</QAV>}
+          {hasScalarResult(block) && (
+            <QAV q="A" kind="dialog">
+              {block.result}
+            </QAV>
+          )}
         </>
       )
     case "function":
@@ -76,12 +82,26 @@ export default function PrettyKind({
     case "error":
       return `${firstLineOf(block.msg)}`
     case "code":
-      return <>{hasScalarResult(block) && <QAV q="A">{block.result}</QAV>}</>
+      return (
+        <>
+          {hasScalarResult(block) && (
+            <QAV q="A" kind="code">
+              {block.result}
+            </QAV>
+          )}
+        </>
+      )
     case "read":
       return (
         <>
-          <QAV q="Q">{block.message ?? "Prompt user for input"}</QAV>
-          {hasScalarResult(block) && <QAV q="A">{block.result}</QAV>}
+          <QAV q="Q" kind="dialog">
+            {block.message ?? "Prompt user for input"}
+          </QAV>
+          {hasScalarResult(block) && (
+            <QAV q="A" kind="dialog">
+              {block.result}
+            </QAV>
+          )}
         </>
       )
     case "if":

diff --git a/pdl-live-react/src/view/transcript/QAV.css b/pdl-live-react/src/view/transcript/QAV.css
@@ -6,5 +6,6 @@
 .pdl-qav-label {
   font-weight: bold;
   font-size: 0.75em;
-  padding-right: 0.5em;
+  padding-right: 0.375em;
+  color: var(--pf-t--global--text--color--subtle);
 }
diff --git a/pdl-live-react/src/view/transcript/QAV.tsx b/pdl-live-react/src/view/transcript/QAV.tsx
@@ -3,31 +3,51 @@ import { Tooltip, Truncate } from "@patternfly/react-core"
 
 import { firstLineOf } from "../../helpers"
 
+import ChevronLeftIcon from "@patternfly/react-icons/dist/esm/icons/chevron-left-icon"
+import ChevronRightIcon from "@patternfly/react-icons/dist/esm/icons/chevron-right-icon"
+
 import "./QAV.css"
 
 type Props = {
+  kind?: "code" | "dialog"
   q: "Q" | "A" | "V"
   children: import("react").ReactNode
 }
 
 /** Render the Q: A: V: UI */
-export default function QAV({ q, children }: Props) {
+export default function QAV({ q, kind, children }: Props) {
   const tip =
     q === "Q"
-      ? "Question posed"
+      ? kind === "dialog"
+        ? "Question posed"
+        : "Code executed"
       : q === "A"
-        ? "The result"
+        ? kind === "dialog"
+          ? "The answer"
+          : "The execution result"
         : "Result is assigned to this variable"
 
+  const content = <Truncate content={firstLineOf(String(children))} />
+
   return (
     <div className="pdl-qav">
       <Tooltip content={tip}>
-        <span className="pdl-qav-label">{q}</span>
+        <span className="pdl-qav-label">
+          {q === "Q" ? (
+            <ChevronRightIcon />
+          ) : q === "A" ? (
+            <ChevronLeftIcon />
+          ) : (
+            <></>
+          )}
+        </span>
       </Tooltip>{" "}
       {isValidElement(children) ? (
         children
+      ) : kind === "dialog" ? (
+        <i>{content}</i>
       ) : (
-        <Truncate content={firstLineOf(String(children))} />
+        <code>{content}</code>
       )}
     </div>
   )

diff --git a/pdl-live-react/tests/basics.spec.test.ts b/pdl-live-react/tests/basics.spec.test.ts
@@ -1,8 +1,16 @@
+import { join } from "path"
 import { test, expect } from "@playwright/test"
+;[
+  { path: "", title: /Viewer/ },
+  { path: "welcome", title: /Welcome/ },
+  { path: "about", title: /About/ },
+  { path: "upload", title: /Upload/ },
+  { path: "demos/Fibonacci", title: /Fibonacci/ },
+].forEach(({ path, title }) =>
+  test(`${path} has title ${title}`, async ({ page }) => {
+    await page.goto(join("http://localhost:5173", path))
 
-test("has title", async ({ page }) => {
-  await page.goto("http://localhost:5173")
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Viewer/)
-})
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(title)
+  }),
+)