1
import { useState } from "react";
2
import { Database } from "lucide-react";
3
import { Button } from "@/client/components/ui/button";
4
import { Card } from "@/client/components/ui/card";
5
import { JsonResult } from "./JsonResult";
6
 
7
export type DebugToolsCardProps = {
8
  oidResult: unknown;
9
  stateDump: unknown;
10
  pending: Record<string, boolean>;
11
  checkOid: (oid: string) => Promise<void>;
12
  dumpState: () => Promise<void>;
13
};
14
 
15
export function DebugToolsCard({
16
  oidResult,
17
  stateDump,
18
  pending,
19
  checkOid,
20
  dumpState,
21
}: DebugToolsCardProps) {
22
  const [debugOid, setDebugOid] = useState("");
23
 
24
  return (
25
    <Card>
26
      <h2 className="mb-4 text-xl font-semibold">Debug Tools</h2>
27
      <div className="space-y-4">
28
        <div>
29
          <label htmlFor="debug-oid" className="mb-2 block text-sm font-medium">
30
            Check Object ID Existence
31
          </label>
32
          <div className="flex gap-2">
33
            <input
34
              type="text"
35
              id="debug-oid"
36
              placeholder="Enter 40-character SHA-1 hash"
37
              className="flex-1 rounded-xl border border-zinc-300 bg-white px-3 py-2 font-mono text-sm focus:ring-2 focus:ring-accent-500 dark:border-zinc-700 dark:bg-zinc-800"
38
              pattern="[a-f0-9]{40}"
39
              value={debugOid}
40
              onChange={(event) => setDebugOid(event.target.value)}
41
            />
42
            <Button
43
              type="button"
44
              onClick={() => void checkOid(debugOid)}
45
              disabled={pending["check-oid"]}
46
            >
47
              {pending["check-oid"] ? "Checking..." : "Check OID"}
48
            </Button>
49
          </div>
50
          {oidResult ? <JsonResult data={oidResult} /> : null}
51
        </div>
52
53
        <div>
54
          <label className="mb-2 block text-sm font-medium">Repository State Dump</label>
55
          <Button type="button" onClick={() => void dumpState()} disabled={pending["dump-state"]}>
56
            <Database className="mr-2 inline h-4 w-4 align-[-2px]" aria-hidden="true" />
57
            <span className="label">
58
              {pending["dump-state"] ? "Processing..." : "View DO State"}
59
            </span>
60
          </Button>
61
          {stateDump ? <JsonResult data={stateDump} /> : null}
62
        </div>
63
      </div>
64
    </Card>
65
  );
66
}