|
| 1 | +import { useCallback, useEffect } from 'react'; |
| 2 | +import { Button, Popover, Stack, Text } from '@mantine/core'; |
| 3 | +import { IconArrowRight, IconConnection } from '@tabler/icons-react'; |
| 4 | + |
| 5 | +import { useLocalStorage } from '@/utils'; |
| 6 | + |
| 7 | +import { VIEW_TRACE_CALLOUT_DISMISSED_KEY } from './viewTraceCallout'; |
| 8 | + |
| 9 | +type ViewTraceCalloutButtonProps = { |
| 10 | + /** True while the correlated trace hasn't resolved; the button is disabled. */ |
| 11 | + disabled: boolean; |
| 12 | + /** Navigate to the correlated trace. Only reachable when not disabled. */ |
| 13 | + onView: () => void; |
| 14 | + /** |
| 15 | + * Whether the nudge has already auto-opened during this panel-open lifecycle. |
| 16 | + * Owned by the parent so it survives the per-row loading gate that unmounts |
| 17 | + * this button (see `onAutoOpen`). |
| 18 | + */ |
| 19 | + autoOpened: boolean; |
| 20 | + /** Raise the auto-open latch in the parent the first time a trace resolves. */ |
| 21 | + onAutoOpen: () => void; |
| 22 | +}; |
| 23 | + |
| 24 | +/** |
| 25 | + * The prominent "View trace" action shown in a log side panel, wrapped in a |
| 26 | + * one-time nudge popover. |
| 27 | + * |
| 28 | + * The callout is dismissed only by an explicit acknowledgement — clicking |
| 29 | + * "Got it" or the button itself — which persists under its own localStorage key |
| 30 | + * (not user settings). It deliberately does not close on stray clicks, drawer |
| 31 | + * resizes, or Escape: Escape stays owned by the panel-level hotkey so the |
| 32 | + * callout never fights it for the keypress. Because nothing transient is |
| 33 | + * stored, the nudge simply reappears the next time the panel opens on an |
| 34 | + * eligible log until it is acknowledged. |
| 35 | + * |
| 36 | + * Auto-open is latched for the panel-open lifecycle (via `autoOpened`/ |
| 37 | + * `onAutoOpen`) rather than derived directly from `disabled`, so paging between |
| 38 | + * rows doesn't reopen the callout as each row's trace re-resolves. The latch |
| 39 | + * lives in the parent because the side panel unmounts this button behind a |
| 40 | + * "Loading..." gate while each new row loads, which would reset any state held |
| 41 | + * here. |
| 42 | + */ |
| 43 | +export function ViewTraceCalloutButton({ |
| 44 | + disabled, |
| 45 | + onView, |
| 46 | + autoOpened, |
| 47 | + onAutoOpen, |
| 48 | +}: ViewTraceCalloutButtonProps) { |
| 49 | + const [dismissed, setDismissed] = useLocalStorage( |
| 50 | + VIEW_TRACE_CALLOUT_DISMISSED_KEY, |
| 51 | + false, |
| 52 | + ); |
| 53 | + const dismiss = useCallback(() => setDismissed(true), [setDismissed]); |
| 54 | + |
| 55 | + useEffect(() => { |
| 56 | + if (!disabled && !dismissed && !autoOpened) { |
| 57 | + onAutoOpen(); |
| 58 | + } |
| 59 | + }, [disabled, dismissed, autoOpened, onAutoOpen]); |
| 60 | + const opened = autoOpened && !dismissed; |
| 61 | + |
| 62 | + return ( |
| 63 | + <Popover |
| 64 | + width={260} |
| 65 | + position="bottom-end" |
| 66 | + withArrow |
| 67 | + shadow="md" |
| 68 | + trapFocus={false} |
| 69 | + // Intentional: an outside click neither dismisses the callout nor is it |
| 70 | + // treated as an accidental dismissal. This is a one-time, one-line hint |
| 71 | + // that only ever covers a small strip below the button; it is dismissed |
| 72 | + // deliberately via "Got it" or by clicking View Trace, and does not |
| 73 | + // reappear once acknowledged. We accept that the covered controls are |
| 74 | + // briefly non-interactive so a stray click can't burn the message before |
| 75 | + // it is read. (Reviewed: PR #2815 — kept by design.) |
| 76 | + closeOnClickOutside={false} |
| 77 | + closeOnEscape={false} |
| 78 | + opened={opened} |
| 79 | + > |
| 80 | + <Popover.Target> |
| 81 | + <Button |
| 82 | + data-testid="side-panel-view-trace" |
| 83 | + variant="secondary" |
| 84 | + size="compact-sm" |
| 85 | + ml="auto" |
| 86 | + leftSection={<IconConnection size={14} />} |
| 87 | + rightSection={<IconArrowRight size={14} />} |
| 88 | + onClick={() => { |
| 89 | + dismiss(); |
| 90 | + onView(); |
| 91 | + }} |
| 92 | + disabled={disabled} |
| 93 | + > |
| 94 | + View Trace |
| 95 | + </Button> |
| 96 | + </Popover.Target> |
| 97 | + <Popover.Dropdown |
| 98 | + data-testid="view-trace-callout" |
| 99 | + role="status" |
| 100 | + aria-live="polite" |
| 101 | + > |
| 102 | + <Stack gap="xs"> |
| 103 | + <Text size="sm" fw={600}> |
| 104 | + Jump to this log's full trace |
| 105 | + </Text> |
| 106 | + <Text size="xs" c="dimmed"> |
| 107 | + Open the correlated trace in one click. |
| 108 | + </Text> |
| 109 | + <Button |
| 110 | + variant="primary" |
| 111 | + size="compact-xs" |
| 112 | + ml="auto" |
| 113 | + onClick={dismiss} |
| 114 | + > |
| 115 | + Got it |
| 116 | + </Button> |
| 117 | + </Stack> |
| 118 | + </Popover.Dropdown> |
| 119 | + </Popover> |
| 120 | + ); |
| 121 | +} |
0 commit comments