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

1 files changed, 40 insertions, 0 deletions

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>
+  );
+}