feat(ui): add history explore (#2022)

* break out HistoryRow, add drawer

* syntax highlighting!

* smaller text

* allow inspecting all old commands, no drag command

* fix query bug

* add loader

6 files changed, 190 insertions, 74 deletions

diff --git a/ui/src/components/CodeBlock.tsx b/ui/src/components/CodeBlock.tsx
new file mode 100644
index 00000000..a4c34784
--- /dev/null
+++ b/ui/src/components/CodeBlock.tsx
@@ -0,0 +1,35 @@
+import { Highlight, themes } from "prism-react-renderer";
+import Prism from "prismjs";
+import "prismjs/components/prism-bash";
+
+export default function CodeBlock({ code, language }: any) {
+  return (
+    <div className="overflow-auto">
+      <Highlight
+        theme={themes.github}
+        code={code}
+        prism={Prism}
+        language={language}
+      >
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre style={style} className="p-4 break-words whitespace-pre-wrap">
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} data-vaul-no-drag>
+                {i == 0 && (
+                  <span className="text-gray-500 select-none">$ </span>
+                )}
+                {line.map((token, key) => (
+                  <span
+                    key={key}
+                    {...getTokenProps({ token })}
+                    data-vaul-no-drag
+                  />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  );
+}
diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx
index 7cdeacd8..09456c3e 100644
--- a/ui/src/components/HistoryList.tsx
+++ b/ui/src/components/HistoryList.tsx
@@ -1,22 +1,5 @@
 import { useRef } from "react";
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
-
-// @ts-ignore
-import { DateTime } from "luxon";
-
-function msToTime(ms: number) {
-  let milliseconds = parseInt(ms.toFixed(1));
-  let seconds = parseInt((ms / 1000).toFixed(1));
-  let minutes = parseInt((ms / (1000 * 60)).toFixed(1));
-  let hours = parseInt((ms / (1000 * 60 * 60)).toFixed(1));
-  let days = parseInt((ms / (1000 * 60 * 60 * 24)).toFixed(1));
-
-  if (milliseconds < 1000) return milliseconds + "ms";
-  else if (seconds < 60) return seconds + "s";
-  else if (minutes < 60) return minutes + "m";
-  else if (hours < 24) return hours + "hr";
-  else return days + " Days";
-}
+import HistoryRow from "./history/HistoryRow";
 
 export default function HistoryList(props: any) {
   return (
@@ -32,9 +15,7 @@ export default function HistoryList(props: any) {
         let h = props.history[i.index];
 
         return (
-          <li
-            key={h.id}
-            className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6"
+          <div
             style={{
               position: "absolute",
               top: 0,
@@ -44,55 +25,8 @@ export default function HistoryList(props: any) {
               transform: `translateY(${i.start}px)`,
             }}
           >
-            <div className="flex min-w-0 gap-x-4">
-              <div className="flex flex-col justify-center">
-                <p className="flex text-xs text-gray-500 justify-center">
-                  {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
-                    DateTime.TIME_WITH_SECONDS,
-                  )}
-                </p>
-                <p className="flex text-xs mt-1 text-gray-400 justify-center">
-                  {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
-                    DateTime.DATE_SHORT,
-                  )}
-                </p>
-              </div>
-              <div className="min-w-0 flex-col justify-center">
-                <pre className="whitespace-pre-wrap">
-                  <code className="text-sm">{h.command}</code>
-                </pre>
-                <p className="mt-1 flex text-xs leading-5 text-gray-500">
-                  <span className="relative truncate ">{h.user}</span>
-
-                  <span>&nbsp;on&nbsp;</span>
-
-                  <span className="relative truncate ">{h.host}</span>
-
-                  <span>&nbsp;in&nbsp;</span>
-
-                  <span className="relative truncate ">{h.cwd}</span>
-                </p>
-              </div>
-            </div>
-            <div className="flex shrink-0 items-center gap-x-4">
-              <div className="hidden sm:flex sm:flex-col sm:items-end">
-                <p className="text-sm leading-6 text-gray-900">{h.exit}</p>
-                {h.duration ? (
-                  <p className="mt-1 text-xs leading-5 text-gray-500">
-                    <time dateTime={h.duration}>
-                      {msToTime(h.duration / 1000000)}
-                    </time>
-                  </p>
-                ) : (
-                  <div />
-                )}
-              </div>
-              <ChevronRightIcon
-                className="h-5 w-5 flex-none text-gray-400"
-                aria-hidden="true"
-              />
-            </div>
-          </li>
+            <HistoryRow h={h} />
+          </div>
         );
       })}
     </div>
diff --git a/ui/src/components/HistorySearch.tsx b/ui/src/components/HistorySearch.tsx
index b3c8492a..046a2a07 100644
--- a/ui/src/components/HistorySearch.tsx
+++ b/ui/src/components/HistorySearch.tsx
@@ -26,7 +26,7 @@ export default function HistorySearch(props: HistorySearchProps) {
         />
         <input
           id="search-field"
-          className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
+          className="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm outline-none"
           placeholder="Search..."
           autoComplete="off"
           autoCapitalize="off"
@@ -36,7 +36,6 @@ export default function HistorySearch(props: HistorySearchProps) {
           name="search"
           onChange={(query) => {
             props.setQuery(query.target.value);
-            props.refresh();
           }}
         />
       </form>
diff --git a/ui/src/components/history/HistoryInspect.tsx b/ui/src/components/history/HistoryInspect.tsx
new file mode 100644
index 00000000..8e820169
--- /dev/null
+++ b/ui/src/components/history/HistoryInspect.tsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+
+import PacmanLoader from "react-spinners/PacmanLoader";
+
+import CodeBlock from "@/components/CodeBlock";
+import HistoryRow from "@/components/history/HistoryRow";
+import { inspectCommandHistory } from "@/state/models";
+
+function renderLoading() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <PacmanLoader color="#26bd65" />
+    </div>
+  );
+}
+
+export default function HistoryInspect({ history }: any) {
+  let [other, setOther] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      let inspect = await inspectCommandHistory(history);
+      setOther(inspect.other);
+    })();
+  }, []);
+
+  if (other.length == 0) return renderLoading();
+
+  return (
+    <div className="overflow-y-auto">
+      <CodeBlock code={history.command} language="bash" />
+
+      <div>
+        {other.map((i: any) => {
+          return <HistoryRow h={i} />;
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/components/history/HistoryRow.tsx b/ui/src/components/history/HistoryRow.tsx
new file mode 100644
index 00000000..ef76d000
--- /dev/null
+++ b/ui/src/components/history/HistoryRow.tsx
@@ -0,0 +1,110 @@
+// @ts-ignore
+import { DateTime } from "luxon";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+import { Highlight, themes } from "prism-react-renderer";
+
+import Prism from "prismjs";
+import "prismjs/components/prism-bash";
+
+import Drawer from "../Drawer";
+import HistoryInspect from "./HistoryInspect";
+
+function msToTime(ms: number) {
+  let milliseconds = parseInt(ms.toFixed(1));
+  let seconds = parseInt((ms / 1000).toFixed(1));
+  let minutes = parseInt((ms / (1000 * 60)).toFixed(1));
+  let hours = parseInt((ms / (1000 * 60 * 60)).toFixed(1));
+  let days = parseInt((ms / (1000 * 60 * 60 * 24)).toFixed(1));
+
+  if (milliseconds < 1000) return milliseconds + "ms";
+  else if (seconds < 60) return seconds + "s";
+  else if (minutes < 60) return minutes + "m";
+  else if (hours < 24) return hours + "hr";
+  else return days + " Days";
+}
+
+export default function HistoryRow({ h }: any) {
+  return (
+    <li
+      key={h.id}
+      className="relative flex justify-between gap-x-6 px-4 py-5 hover:bg-gray-50 sm:px-6"
+    >
+      <div className="flex min-w-0 gap-x-4">
+        <div className="flex flex-col justify-center">
+          <p className="flex text-xs text-gray-500 justify-center">
+            {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
+              DateTime.TIME_WITH_SECONDS,
+            )}
+          </p>
+          <p className="flex text-xs mt-1 text-gray-400 justify-center">
+            {DateTime.fromMillis(h.timestamp / 1000000).toLocaleString(
+              DateTime.DATE_SHORT,
+            )}
+          </p>
+        </div>
+        <div className="min-w-0 flex-col justify-center truncate">
+          <Highlight
+            theme={themes.github}
+            code={h.command}
+            language="bash"
+            prism={Prism}
+          >
+            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+              <pre style={style} className="!bg-inherit text-sm">
+                {tokens &&
+                  tokens.map((line, i) => {
+                    if (i != 0) return;
+                    return (
+                      <div key={i} {...getLineProps({ line })}>
+                        {line.map((token, key) => (
+                          <span key={key} {...getTokenProps({ token })} />
+                        ))}
+                      </div>
+                    );
+                  })}
+              </pre>
+            )}
+          </Highlight>
+          <p className="mt-1 flex text-xs leading-5 text-gray-500">
+            <span className="relative truncate ">{h.user}</span>
+
+            <span>&nbsp;on&nbsp;</span>
+
+            <span className="relative truncate ">{h.host}</span>
+
+            <span>&nbsp;in&nbsp;</span>
+
+            <span className="relative truncate ">{h.cwd}</span>
+          </p>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-x-4">
+        <div className="hidden sm:flex sm:flex-col sm:items-end">
+          <p className="text-sm leading-6 text-gray-900">{h.exit}</p>
+          {h.duration ? (
+            <p className="mt-1 text-xs leading-5 text-gray-500">
+              <time dateTime={h.duration}>
+                {msToTime(h.duration / 1000000)}
+              </time>
+            </p>
+          ) : (
+            <div />
+          )}
+        </div>
+        <Drawer
+          width="60%"
+          trigger={
+            <button type="button">
+              <ChevronRightIcon
+                className="h-5 w-5 flex-none text-gray-400"
+                aria-hidden="true"
+              />
+            </button>
+          }
+        >
+          <HistoryInspect history={h} />
+        </Drawer>
+      </div>
+    </li>
+  );
+}
diff --git a/ui/src/components/history/Stats.tsx b/ui/src/components/history/Stats.tsx
index bc4e5c33..df25d930 100644
--- a/ui/src/components/history/Stats.tsx
+++ b/ui/src/components/history/Stats.tsx
@@ -20,7 +20,6 @@ function renderLoading() {
 }
 
 function TopTable({ stats }: any) {
-  console.log(stats);
   return (
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="flex items-center">
@@ -111,7 +110,6 @@ export default function Stats() {
         console.log(e);
       });
   }, []);
-  console.log(top);
 
   if (stats.length == 0) {
     return renderLoading();