Add contextual "?" help icons linking into Docs (ticket 021)
New HelpIcon component + a DocsNavProvider context (webapp/src/lib/docsNav.tsx) let any component request "open Docs to section X", bumping a nonce each time so a repeat click re-triggers even if Docs is already open to that section. NavMenu forwards that request into DocsPanel as a `target` prop, which expands the right accordion section, scrolls it into view, and flashes it (a brief accent-tinted background/border, settling back after 1.2s) — verified visually with a live server + Playwright. Opening Docs via the plain NavMenu button explicitly clears any pending target, so that path is unchanged: no forced section, no flash. Added a "?" icon to FilterBar, LogTimeline, LogPreview, Metrics, Dashboards, and NavMenu's own Settings/Presets panels, plus new Docs sections for Timeline, Log preview, Settings, and Presets (previously undocumented). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
ce711ab70e
commit
abc061a7b1
@@ -14,6 +14,7 @@ import {
|
||||
type Panel,
|
||||
type PromqlSeries,
|
||||
} from '../lib/api'
|
||||
import { HelpIcon } from './HelpIcon'
|
||||
|
||||
const CHART_TYPES: ChartType[] = ['line', 'bar', 'pie']
|
||||
|
||||
@@ -168,7 +169,8 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
|
||||
|
||||
if (!activeProfile) {
|
||||
return (
|
||||
<div className="border-b border-border p-3 text-xs text-text-faint">
|
||||
<div className="flex items-center gap-1.5 border-b border-border p-3 text-xs text-text-faint">
|
||||
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
|
||||
Dashboards — activate a profile (see the settings menu) to create and save dashboards.
|
||||
</div>
|
||||
)
|
||||
@@ -176,7 +178,10 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
|
||||
|
||||
return (
|
||||
<div className="border-b border-border p-3 text-sm">
|
||||
<div className="mb-2 text-xs text-text-subtle">Dashboards — profile "{activeProfile}"</div>
|
||||
<div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
|
||||
<HelpIcon sectionId="dashboards" label="Help: Dashboards" />
|
||||
Dashboards — profile "{activeProfile}"
|
||||
</div>
|
||||
{error && (
|
||||
<div className="mb-2 rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{error}</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user