From a2176e74ec7c6243bc55d0bd5101c4ccb55d801d Mon Sep 17 00:00:00 2001
From: Will Crichton <wcrichto@cs.stanford.edu>
Date: Tue, 17 Dec 2024 18:16:12 -0800
Subject: [PATCH] Add telemetry and back button to quiz. Add version watermark
 (#39)

---
 js/packages/repo-quest/package.json     |   4 +-
 js/packages/repo-quest/src/index.tsx    | 109 ++++++++++++++++++------
 js/packages/repo-quest/styles/index.css |  28 +++++-
 js/packages/repo-quest/vite.config.ts   |   9 +-
 js/pnpm-lock.yaml                       |  18 ++++
 rs/crates/rq-core/src/git.rs            |  49 +++++------
 rs/crates/rq-core/src/quest.rs          |  14 ++-
 7 files changed, 176 insertions(+), 55 deletions(-)

diff --git a/js/packages/repo-quest/package.json b/js/packages/repo-quest/package.json
index 237e5f6..cf204aa 100644
--- a/js/packages/repo-quest/package.json
+++ b/js/packages/repo-quest/package.json
@@ -16,6 +16,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@wcrichto/quiz": "^0.3.8",
+    "highlight.js": "^11.11.0",
     "jsdom": "^25.0.0",
     "lodash": "^4.17.21",
     "marked": "^15.0.3",
@@ -24,6 +25,7 @@
     "normalize.css": "^8.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sass": "^1.78.0"
+    "sass": "^1.78.0",
+    "uuid": "^11.0.3"
   }
 }
\ No newline at end of file
diff --git a/js/packages/repo-quest/src/index.tsx b/js/packages/repo-quest/src/index.tsx
index 1a963f7..c0df5fa 100644
--- a/js/packages/repo-quest/src/index.tsx
+++ b/js/packages/repo-quest/src/index.tsx
@@ -7,6 +7,7 @@ import { observer } from "mobx-react";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import ReactDOM from "react-dom/client";
+import * as uuid from "uuid";
 
 import guideMd from "../../../../GUIDE.md?raw";
 import {
@@ -21,6 +22,48 @@ import {
   commands
 } from "./bindings/backend";
 
+declare global {
+  var VERSION: string;
+  var COMMIT_HASH: string;
+  var TELEMETRY_URL: string;
+}
+
+function getSessionId() {
+  const SESSION_STORAGE_KEY = "__repo_quest_telemetry_session";
+  if (localStorage.getItem(SESSION_STORAGE_KEY) === null) {
+    localStorage.setItem(SESSION_STORAGE_KEY, uuid.v4());
+  }
+  return localStorage.getItem(SESSION_STORAGE_KEY)!;
+}
+
+class Telemetry {
+  private sessionId: string;
+
+  constructor() {
+    this.sessionId = getSessionId();
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: payload can be anything
+  log(_endpoint: string, payload: any) {
+    let log = {
+      sessionId: this.sessionId,
+      commitHash: COMMIT_HASH,
+      version: VERSION,
+      timestamp: new Date().getTime(),
+      payload
+    };
+
+    let fullUrl = `${TELEMETRY_URL}/rq_answers`;
+    fetch(fullUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(log)
+    });
+  }
+}
+
 let useWindowListener = <K extends keyof WindowEventMap>(
   event: K,
   listener: (this: Window, ev: WindowEventMap[K]) => void
@@ -318,18 +361,28 @@ let NewQuest = () => {
   );
 };
 
-let QuizPage: React.FC<{ quest: QuestConfig }> = ({ quest }) => {
+let QuizPage: React.FC<{ quest: QuestConfig; goBack: () => void }> = ({
+  quest,
+  goBack
+}) => {
   let quiz = quest.final as
     /* biome-ignore lint/suspicious/noExplicitAny: backend guarantees that this satisfies Quiz */
     any as Quiz;
   return (
-    <QuizView
-      name={quest.title}
-      quiz={quiz}
-      cacheAnswers={true}
-      autoStart={true}
-      allowRetry={true}
-    />
+    <div>
+      <div>
+        <button type="button" onClick={goBack}>
+          Back to main page
+        </button>
+      </div>
+      <QuizView
+        name={quest.title}
+        quiz={quiz}
+        // cacheAnswers={true}
+        autoStart={true}
+        allowRetry={true}
+      />
+    </div>
   );
 };
 
@@ -337,8 +390,6 @@ let QuestView: React.FC<{
   quest: QuestConfig;
   initialState: StateDescriptor;
 }> = ({ quest, initialState }) => {
-  console.debug(quest);
-
   let loader = useContext(Loader.context)!;
   let [state, setState] = useState<StateDescriptor | undefined>(initialState);
   let [showQuiz, setShowQuiz] = useState(false);
@@ -346,16 +397,21 @@ let QuestView: React.FC<{
   useEffect(() => setTitle(quest.title), [quest.title]);
 
   useEffect(() => {
-    events.stateEvent.listen(e => setState(e.payload));
+    console.debug("QuestConfig", quest);
+    events.stateEvent.listen(e => {
+      if (!_.isEqual(e.payload, state)) setState(e.payload);
+    });
   }, []);
 
+  console.debug("State", state);
+
   let cur_stage =
     state && state.state.type === "Ongoing"
       ? state.state.stage
       : quest.stages.length - 1;
 
   if (showQuiz) {
-    return <QuizPage quest={quest} />;
+    return <QuizPage quest={quest} goBack={() => setShowQuiz(false)} />;
   }
 
   return (
@@ -365,6 +421,12 @@ let QuestView: React.FC<{
           <>
             <div className="quest-dir">
               <strong>Quest directory:</strong> <code>{state.dir}</code>
+              <button
+                type="button"
+                onClick={() => navigator.clipboard.writeText(state!.dir)}
+              >
+                📋
+              </button>
             </div>
             {state.behind_origin && (
               <div className="behind-origin-warning">
@@ -382,9 +444,13 @@ let QuestView: React.FC<{
                 />
               ))}
               {state.state.type === "Completed" && quest.final && (
-                <li>
+                <li className="quiz-bullet">
+                  <div>
+                    <span className="stage-title">Quiz</span>{" "}
+                  </div>
                   <div>
-                    <span className="stage-title">Quiz</span>
+                    Check your conceptual understanding of the material by
+                    taking this quiz.
                   </div>
                   <div>
                     <button type="button" onClick={() => setShowQuiz(true)}>
@@ -409,17 +475,6 @@ let QuestView: React.FC<{
             </button>
           </div>
 
-          <div>
-            <button
-              type="button"
-              onClick={() => {
-                if (state) navigator.clipboard.writeText(state.dir);
-              }}
-            >
-              Copy directory to 📋
-            </button>
-          </div>
-
           {initialState.can_skip && (
             <div>
               <select
@@ -597,6 +652,7 @@ let App = () => {
     undefined
   );
   let [loader] = useState(() => new Loader());
+
   return (
     <Loader.context.Provider value={loader}>
       <ErrorContext.Provider value={setErrorMessage}>
@@ -621,12 +677,15 @@ let App = () => {
               <GithubLoader />
             )}
           </div>
+          <div id="version-watermark">v{VERSION}</div>
         </TitleContext.Provider>
       </ErrorContext.Provider>
     </Loader.context.Provider>
   );
 };
 
+window.telemetry = new Telemetry();
+
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 
 /* @ts-ignore */
diff --git a/js/packages/repo-quest/styles/index.css b/js/packages/repo-quest/styles/index.css
index f995d79..5e4eacd 100644
--- a/js/packages/repo-quest/styles/index.css
+++ b/js/packages/repo-quest/styles/index.css
@@ -1,5 +1,6 @@
 @import "normalize.css/normalize.css";
 @import "@wcrichto/quiz/lib.scss";
+@import "highlight.js/styles/default.css";
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 
 :root {
@@ -50,6 +51,10 @@ h1 {
 
 .quest-dir {
   margin-bottom: 1rem;
+
+  button {
+    margin-left: 0.5rem;
+  }
 }
 
 .stages {
@@ -57,6 +62,10 @@ h1 {
 
   li {
     margin-bottom: 1rem;
+
+    &.quiz-bullet {
+      list-style-type: none;
+    }
   }
 }
 
@@ -255,7 +264,7 @@ dialog {
 
 .guide-button {
   position: absolute;
-  top: 2rem;
+  top: 1.5rem;
   right: 1rem;
 }
 
@@ -264,4 +273,21 @@ dialog {
   padding: 0.5rem;
   margin: 1rem 0;
   background-color: rgb(255, 251, 167);
+}
+
+#version-watermark {
+  position: fixed;
+  bottom: 0.5rem;
+  right: 0.5rem;
+  color: #ccc;
+  font-size: 60%;
+  font-family: var(--code-font);
+}
+
+.mdbook-quiz .answer .answer-row > div {
+  .correct, .incorrect {
+    &::before {
+      font-size: 1rem !important;
+    }
+  }
 }
\ No newline at end of file
diff --git a/js/packages/repo-quest/vite.config.ts b/js/packages/repo-quest/vite.config.ts
index 217716d..dbd0478 100644
--- a/js/packages/repo-quest/vite.config.ts
+++ b/js/packages/repo-quest/vite.config.ts
@@ -1,6 +1,10 @@
+import * as cp from "node:child_process";
 import path from "node:path";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import packageJson from "./package.json";
+
+let commitHash = cp.execSync("git rev-parse HEAD").toString("utf-8").trim();
 
 let alias = {
   "@wcrichto/rust-editor/dist/lib.css": path.resolve(
@@ -13,7 +17,10 @@ let alias = {
 export default defineConfig(({ mode }) => ({
   base: "./",
   define: {
-    "process.env.NODE_ENV": JSON.stringify(mode)
+    "process.env.NODE_ENV": JSON.stringify(mode),
+    VERSION: JSON.stringify(packageJson.version),
+    COMMIT_HASH: JSON.stringify(commitHash),
+    TELEMETRY_URL: JSON.stringify("https://rust-book.willcrichton.net/logs")
   },
   plugins: [react()],
   resolve: { alias },
diff --git a/js/pnpm-lock.yaml b/js/pnpm-lock.yaml
index 40dc825..2fa3b2a 100644
--- a/js/pnpm-lock.yaml
+++ b/js/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
       '@wcrichto/quiz':
         specifier: ^0.3.8
         version: 0.3.8(mobx-react@9.1.1(mobx@6.13.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(mobx@6.13.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      highlight.js:
+        specifier: ^11.11.0
+        version: 11.11.0
       jsdom:
         specifier: ^25.0.0
         version: 25.0.0
@@ -83,6 +86,9 @@ importers:
       sass:
         specifier: ^1.78.0
         version: 1.78.0
+      uuid:
+        specifier: ^11.0.3
+        version: 11.0.3
 
 packages:
 
@@ -778,6 +784,10 @@ packages:
     resolution: {integrity: sha512-b4L09127uVa+9vkMgPpdUQP78ickGbHEQTWeBrQFTJZ4/n2aihWOGS0ZoUqAwjVmfjhq/C76HRzkqwZhK4sBbg==}
     deprecated: Potential vulnerability. Upgrade to @latest
 
+  highlight.js@11.11.0:
+    resolution: {integrity: sha512-6ErL7JlGu2CNFHyRQEuDogOyGPNiqcuWdt4iSSFUPyferNTGlNTPFqeV36Y/XwA4V/TJ8l0sxp6FTnxud/mf8g==}
+    engines: {node: '>=12.0.0'}
+
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
@@ -1240,6 +1250,10 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+
   vite-node@2.0.5:
     resolution: {integrity: sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2056,6 +2070,8 @@ snapshots:
 
   highlight.js@10.1.1: {}
 
+  highlight.js@11.11.0: {}
+
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
@@ -2457,6 +2473,8 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  uuid@11.0.3: {}
+
   vite-node@2.0.5(@types/node@22.5.4)(sass@1.78.0):
     dependencies:
       cac: 6.7.14
diff --git a/rs/crates/rq-core/src/git.rs b/rs/crates/rq-core/src/git.rs
index ce16f16..4851dae 100644
--- a/rs/crates/rq-core/src/git.rs
+++ b/rs/crates/rq-core/src/git.rs
@@ -6,7 +6,7 @@ use std::{
   process::Stdio,
 };
 
-use anyhow::{ensure, Context, Result};
+use anyhow::{anyhow, ensure, Context, Result};
 
 use crate::{
   command::command,
@@ -61,35 +61,29 @@ impl GitRepo {
     Ok(GitRepo::new(path))
   }
 
-  fn git_core(&self, args: &str, capture: bool) -> Result<Option<String>> {
+  fn git_core(&self, args: &str) -> Result<std::result::Result<String, String>> {
     let mut cmd = command(&format!("git {args}"), &self.path);
+    cmd.stdout(Stdio::piped());
     cmd.stderr(Stdio::piped());
-    if capture {
-      cmd.stdout(Stdio::piped());
-    }
 
     let output = cmd.output()?;
-    ensure!(
-      output.status.success(),
-      "git failed with stderr:\n{}",
-      String::from_utf8(output.stderr)?
-    );
-
-    let stdout = if capture {
-      Some(String::from_utf8(output.stdout)?)
-    } else {
-      None
-    };
+    if !output.status.success() {
+      return Ok(Err(String::from_utf8(output.stderr)?));
+    }
 
-    Ok(stdout)
+    let stdout = String::from_utf8(output.stdout)?;
+    Ok(Ok(stdout))
   }
 
   fn git(&self, args: &str) -> Result<()> {
-    self.git_core(args, false).map(|_| ())
+    self.git_output(args)?;
+    Ok(())
   }
 
   fn git_output(&self, args: &str) -> Result<String> {
-    self.git_core(args, true).map(|s| s.unwrap())
+    self
+      .git_core(args)?
+      .map_err(|stderr| anyhow!("git failed with stderr:\n{stderr}"))
   }
 
   pub fn setup_upstream(&self, upstream: &GithubRepo) -> Result<()> {
@@ -216,14 +210,21 @@ impl GitRepo {
     git_output!(self, "diff {base}..{head}")
   }
 
-  pub fn show(&self, branch: &str, file: &str) -> Result<String> {
-    git_output!(self, "show {branch}:{file}")
+  pub fn contains_file(&self, branch: &str, file: &str) -> Result<bool> {
+    let status = command(&format!("git cat-file -e {branch}:{file}"), &self.path)
+      .status()
+      .with_context(|| format!("Failed to `git cat-file -e {branch}:{file}`"))?;
+    Ok(status.success())
+  }
+
+  pub fn read_file(&self, branch: &str, file: &str) -> Result<String> {
+    git_output!(self, "cat-file -p {branch}:{file}")
   }
 
   pub fn show_bin(&self, branch: &str, file: &str) -> Result<Vec<u8>> {
-    let output = command(&format!("git show {branch}:{file}"), &self.path)
+    let output = command(&format!("git cat-file -p {branch}:{file}"), &self.path)
       .output()
-      .with_context(|| format!("Failed to `git show {branch}:{file}"))?;
+      .with_context(|| format!("Failed to `git cat-file -p {branch}:{file}"))?;
     ensure!(
       output.status.success(),
       "git show failed with stderr:\n{}",
@@ -238,7 +239,7 @@ impl GitRepo {
     files
       .map(|file| {
         let path = PathBuf::from(file);
-        let contents = self.show("main", file)?;
+        let contents = self.read_file("main", file)?;
         Ok((path, contents))
       })
       .collect()
diff --git a/rs/crates/rq-core/src/quest.rs b/rs/crates/rq-core/src/quest.rs
index d7d74b0..c5581ee 100644
--- a/rs/crates/rq-core/src/quest.rs
+++ b/rs/crates/rq-core/src/quest.rs
@@ -57,9 +57,17 @@ impl QuestConfig {
       Some(remote) => Cow::Owned(format!("{remote}/meta")),
       None => Cow::Borrowed("meta"),
     };
-    let contents = repo.show(&branch, "rqst.toml")?;
-    let config = toml::de::from_str::<QuestConfig>(&contents)
-      .context("Failed to parse quest configuration")?;
+    let config_str = repo.read_file(&branch, "rqst.toml")?;
+    let mut config = toml::de::from_str::<QuestConfig>(&config_str)
+      .context("Failed to parse quest configuration rqst.toml")?;
+
+    if repo.contains_file(&branch, "final.toml")? {
+      let quiz_str = repo.read_file(&branch, "final.toml")?;
+      let quiz =
+        toml::de::from_str::<serde_json::Value>(&quiz_str).context("Failed to parse final.toml")?;
+      config.r#final = Some(quiz);
+    }
+
     Ok(config)
   }
 }