Skip to content

Commit 7eeaecb

Browse files
atrakhConvex, Inc.
atrakh
authored and
Convex, Inc.
committed
dashboard: use a disclosure for keyboard shortcuts in LogDrilldown (#41892)
GitOrigin-RevId: 1165f0fa5176220349551dc3ee6cdc013c58d4fb
1 parent a63dca5 commit 7eeaecb

File tree

1 file changed

+153
-110
lines changed

1 file changed

+153
-110
lines changed

‎npm-packages/dashboard-common/src/features/logs/components/LogDrilldown.tsx‎

Lines changed: 153 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1-
import { Crosshair2Icon, InfoCircledIcon } from "@radix-ui/react-icons";
1+
import {
2+
KeyboardIcon,
3+
Crosshair2Icon,
4+
InfoCircledIcon,
5+
ChevronDownIcon,
6+
ChevronUpIcon,
7+
} from "@radix-ui/react-icons";
28
import { useCallback, useRef, useState } from "react";
3-
import { Tab as HeadlessTab } from "@headlessui/react";
9+
import { Tab as HeadlessTab, Disclosure } from "@headlessui/react";
410
import { MAX_LOGS, UdfLog } from "@common/lib/useLogs";
511
import { ClosePanelButton } from "@ui/ClosePanelButton";
612
import { Button } from "@ui/Button";
@@ -16,6 +22,7 @@ import { useHotkeys } from "react-hotkeys-hook";
1622
import { KeyboardShortcut } from "@ui/KeyboardShortcut";
1723
import { Callout } from "@ui/Callout";
1824
import { ITEM_SIZE } from "@common/features/logs/components/LogListItem";
25+
import { useGlobalLocalStorage } from "@common/lib/useGlobalLocalStorage";
1926
import { cn } from "@ui/cn";
2027
import { FunctionCallTree } from "./FunctionCallTree";
2128
import { LogMetadata } from "./LogMetadata";
@@ -145,7 +152,7 @@ export function LogDrilldown({
145152
<div
146153
ref={rightPanelRef}
147154
tabIndex={-1}
148-
className="my-2 scrollbar grow animate-fadeInFromLoading gap-2 overflow-y-auto"
155+
className="scrollbar grow animate-fadeInFromLoading gap-2 overflow-y-auto py-2"
149156
>
150157
{/* Deployment Event Content */}
151158
{selectedLog.kind === "DeploymentEvent" && (
@@ -297,122 +304,158 @@ function KeyboardShortcutsSection({
297304
}: {
298305
selectedLog: InterleavedLog;
299306
}) {
300-
return (
301-
<section className="scrollbar overflow-x-auto border-t bg-background-tertiary px-4 py-2">
302-
<div className="grid grid-cols-[16.5rem_14rem] gap-x-4 gap-y-1 text-xs text-content-secondary">
303-
<div className={shortcutItemClass}>
304-
<div className={shortcutKeysClass}>
305-
<KeyboardShortcut value={["Down"]} />
306-
<span>/</span>
307-
<KeyboardShortcut value={["Up"]} />
308-
</div>
309-
<span className={shortcutLabelClass}>Navigate</span>
310-
</div>
311-
312-
<div className={shortcutItemClass}>
313-
<div className={shortcutKeysClass}>
314-
<KeyboardShortcut value={["CtrlOrCmd"]} />
315-
<span>+</span>
316-
<KeyboardShortcut value={["A"]} />
317-
</div>
318-
<span className={shortcutLabelClass}>Jump to top</span>
319-
</div>
307+
const [isOpen, setIsOpen] = useGlobalLocalStorage(
308+
"logDrilldown.keyboardShortcuts.open",
309+
false,
310+
);
320311

321-
{selectedLog.kind === "ExecutionLog" && (
312+
return (
313+
<section className="border-t bg-background-tertiary px-4 py-2">
314+
<Disclosure defaultOpen={isOpen}>
315+
{({ open }) => (
322316
<>
323-
<div className={shortcutItemClass}>
324-
<div className={shortcutKeysClass}>
325-
<KeyboardShortcut value={["Shift"]} />
326-
<span>+</span>
327-
<KeyboardShortcut value={["Down"]} />
328-
<span>/</span>
329-
<KeyboardShortcut value={["Up"]} />
330-
</div>
331-
<span className={shortcutLabelClass}>Navigate request</span>
332-
</div>
333-
334-
<div className={shortcutItemClass}>
335-
<div className={shortcutKeysClass}>
336-
<KeyboardShortcut value={["CtrlOrCmd"]} />
337-
<span>+</span>
338-
<KeyboardShortcut value={["E"]} />
339-
</div>
340-
<span className={shortcutLabelClass}>Jump to bottom</span>
317+
<div className="flex items-center justify-between">
318+
<Disclosure.Button
319+
className="flex items-center gap-1 text-xs"
320+
onClick={() => setIsOpen(!isOpen)}
321+
>
322+
<KeyboardIcon className="relative -left-0.5 text-content-secondary" />
323+
<h6 className="font-semibold text-content-secondary">
324+
Keyboard Shortcuts
325+
</h6>
326+
{open ? (
327+
<ChevronUpIcon className="size-3" />
328+
) : (
329+
<ChevronDownIcon className="size-3" />
330+
)}
331+
</Disclosure.Button>
341332
</div>
342333

343-
<div className={shortcutItemClass}>
344-
<div className={shortcutKeysClass}>
345-
<KeyboardShortcut value={["CtrlOrCmd"]} />
346-
<span>+</span>
347-
<KeyboardShortcut value={["Down"]} />
348-
<span>/</span>
349-
<KeyboardShortcut value={["Up"]} />
350-
</div>
351-
<span className={shortcutLabelClass}>Navigate execution</span>
352-
</div>
334+
<Disclosure.Panel className="mt-2 scrollbar animate-fadeInFromLoading overflow-x-auto">
335+
<div className="grid grid-cols-[16.5rem_14rem] gap-x-4 gap-y-1 text-xs text-content-secondary">
336+
<div className={shortcutItemClass}>
337+
<div className={shortcutKeysClass}>
338+
<KeyboardShortcut value={["Down"]} />
339+
<span>/</span>
340+
<KeyboardShortcut value={["Up"]} />
341+
</div>
342+
<span className={shortcutLabelClass}>Navigate</span>
343+
</div>
353344

354-
<div className={shortcutItemClass}>
355-
<div className={shortcutKeysClass}>
356-
<KeyboardShortcut value={["CtrlOrCmd"]} />
357-
<KeyboardShortcut value={["Shift"]} />
358-
<span>+</span>
359-
<KeyboardShortcut value={["A"]} />
360-
</div>
361-
<span className={shortcutLabelClass}>Jump to top of request</span>
362-
</div>
363-
</>
364-
)}
345+
<div className={shortcutItemClass}>
346+
<div className={shortcutKeysClass}>
347+
<KeyboardShortcut value={["CtrlOrCmd"]} />
348+
<span>+</span>
349+
<KeyboardShortcut value={["A"]} />
350+
</div>
351+
<span className={shortcutLabelClass}>Jump to top</span>
352+
</div>
365353

366-
<div className={shortcutItemClass}>
367-
<div className={shortcutKeysClass}>
368-
<KeyboardShortcut value={["CtrlOrCmd"]} />
369-
<span>+</span>
370-
<KeyboardShortcut value={["PageUp"]} />
371-
<span>/</span>
372-
<KeyboardShortcut value={["PageDown"]} />
373-
</div>
374-
<span className={shortcutLabelClass}>Navigate page</span>
375-
</div>
354+
{selectedLog.kind === "ExecutionLog" && (
355+
<>
356+
<div className={shortcutItemClass}>
357+
<div className={shortcutKeysClass}>
358+
<KeyboardShortcut value={["Shift"]} />
359+
<span>+</span>
360+
<KeyboardShortcut value={["Down"]} />
361+
<span>/</span>
362+
<KeyboardShortcut value={["Up"]} />
363+
</div>
364+
<span className={shortcutLabelClass}>
365+
Navigate request
366+
</span>
367+
</div>
368+
369+
<div className={shortcutItemClass}>
370+
<div className={shortcutKeysClass}>
371+
<KeyboardShortcut value={["CtrlOrCmd"]} />
372+
<span>+</span>
373+
<KeyboardShortcut value={["E"]} />
374+
</div>
375+
<span className={shortcutLabelClass}>Jump to bottom</span>
376+
</div>
377+
378+
<div className={shortcutItemClass}>
379+
<div className={shortcutKeysClass}>
380+
<KeyboardShortcut value={["CtrlOrCmd"]} />
381+
<span>+</span>
382+
<KeyboardShortcut value={["Down"]} />
383+
<span>/</span>
384+
<KeyboardShortcut value={["Up"]} />
385+
</div>
386+
<span className={shortcutLabelClass}>
387+
Navigate execution
388+
</span>
389+
</div>
390+
391+
<div className={shortcutItemClass}>
392+
<div className={shortcutKeysClass}>
393+
<KeyboardShortcut value={["CtrlOrCmd"]} />
394+
<KeyboardShortcut value={["Shift"]} />
395+
<span>+</span>
396+
<KeyboardShortcut value={["A"]} />
397+
</div>
398+
<span className={shortcutLabelClass}>
399+
Jump to top of request
400+
</span>
401+
</div>
402+
</>
403+
)}
404+
405+
<div className={shortcutItemClass}>
406+
<div className={shortcutKeysClass}>
407+
<KeyboardShortcut value={["CtrlOrCmd"]} />
408+
<span>+</span>
409+
<KeyboardShortcut value={["PageUp"]} />
410+
<span>/</span>
411+
<KeyboardShortcut value={["PageDown"]} />
412+
</div>
413+
<span className={shortcutLabelClass}>Navigate page</span>
414+
</div>
376415

377-
{selectedLog.kind === "ExecutionLog" ? (
378-
<div className={shortcutItemClass}>
379-
<div className={shortcutKeysClass}>
380-
<KeyboardShortcut value={["CtrlOrCmd"]} />
381-
<KeyboardShortcut value={["Shift"]} />
382-
<span>+</span>
383-
<KeyboardShortcut value={["E"]} />
384-
</div>
385-
<span className={shortcutLabelClass}>
386-
Jump to bottom of request
387-
</span>
388-
</div>
389-
) : (
390-
<div className={shortcutItemClass}>
391-
<div className={shortcutKeysClass}>
392-
<KeyboardShortcut value={["CtrlOrCmd"]} />
393-
<span>+</span>
394-
<KeyboardShortcut value={["E"]} />
395-
</div>
396-
<span className={shortcutLabelClass}>Jump to bottom</span>
397-
</div>
398-
)}
416+
{selectedLog.kind === "ExecutionLog" ? (
417+
<div className={shortcutItemClass}>
418+
<div className={shortcutKeysClass}>
419+
<KeyboardShortcut value={["CtrlOrCmd"]} />
420+
<KeyboardShortcut value={["Shift"]} />
421+
<span>+</span>
422+
<KeyboardShortcut value={["E"]} />
423+
</div>
424+
<span className={shortcutLabelClass}>
425+
Jump to bottom of request
426+
</span>
427+
</div>
428+
) : (
429+
<div className={shortcutItemClass}>
430+
<div className={shortcutKeysClass}>
431+
<KeyboardShortcut value={["CtrlOrCmd"]} />
432+
<span>+</span>
433+
<KeyboardShortcut value={["E"]} />
434+
</div>
435+
<span className={shortcutLabelClass}>Jump to bottom</span>
436+
</div>
437+
)}
399438

400-
<div className={shortcutItemClass}>
401-
<div className={shortcutKeysClass}>
402-
<KeyboardShortcut value={["Shift"]} />
403-
<span>+</span>
404-
<KeyboardShortcut value={["Right"]} />
405-
</div>
406-
<span className={shortcutLabelClass}>Focus this panel</span>
407-
</div>
439+
<div className={shortcutItemClass}>
440+
<div className={shortcutKeysClass}>
441+
<KeyboardShortcut value={["Shift"]} />
442+
<span>+</span>
443+
<KeyboardShortcut value={["Right"]} />
444+
</div>
445+
<span className={shortcutLabelClass}>Focus this panel</span>
446+
</div>
408447

409-
<div className={shortcutItemClass}>
410-
<div className={shortcutKeysClass}>
411-
<KeyboardShortcut value={["Esc"]} />
412-
</div>
413-
<span className={shortcutLabelClass}>Close this panel</span>
414-
</div>
415-
</div>
448+
<div className={shortcutItemClass}>
449+
<div className={shortcutKeysClass}>
450+
<KeyboardShortcut value={["Esc"]} />
451+
</div>
452+
<span className={shortcutLabelClass}>Close this panel</span>
453+
</div>
454+
</div>
455+
</Disclosure.Panel>
456+
</>
457+
)}
458+
</Disclosure>
416459
</section>
417460
);
418461
}

0 commit comments

Comments
 (0)