Quick Start onboarding for the Query Editor

[bk201-]

Quick Start onboarding for the Query Editor

Adds a staged, version-gated "Quick Start" tour that shows contextual tip popovers (Fluent UI v9 Popover) overlaid on the Query Editor webview, anchored to toolbar and result controls.

What it does

• Staged, group-triggered flow
  • Phase 1 — ungrouped intro tips (infrastructure ready).
  • Phase 2 — editor group on editor open: Run → AI → Schema → Feedback → Connection → rows-per-page.
  • Phase 3 — result group after the first query runs: Tabs → Add → View → Edit → Refresh → Pagination → Export.
• Version gating — the whole tour replays from scratch on each major/minor upgrade (semver) or fresh install. Auto-runs stamp the current version so it won't re-show until the next upgrade.
• Disable switch — a user setting to turn Quick Start off entirely (e.g. for local development).
• Manual replay — invoke the tour from a toolbar button, optionally for a single group.
• Internal reset command (cosmosDB.quickStart.reset, command-palette only) clears all quick-tip state for testing.

UX / accessibility

• Toolbar button is icon-only with a Tooltip (relationship="label") for the accessible name.
• Popover colors are now bound to VS Code theme variables (--vscode-editorWidget-background/foreground/border, --vscode-descriptionForeground) with Fluent-token fallbacks, fixing low-contrast / invisible border + arrow in dark theme.
• Step announcements via a live region; arrow placement tuned per anchor.

Telemetry

• quickStartShown / quickStartStepViewed emit only bounded enums (trigger, group, tipId) plus counts/steps — no PII.

Tests & validation

• Unit tests for state logic, tip registry ordering, and positioning (vitest, 42 passing).
• npm run build (3× tsc), npm run lint (oxlint + eslint), npm run prettier-fix, npm run l10n all clean.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

[github-actions]

✅ Build (Compile, Lint, Prettier, l10n, Package)

🧱 Step Results

• Validate Version: ✅ success
• Localization: ✅ success
• Lint: ✅ success
• Prettier: ✅ success
• Compile (tsc): ✅ success
• Package: ✅ success
• External Skills (info): ✅ success

📥 Artifacts (run)

• dev-dshilov-quick-start-0.37.1-00ff724 — 3.40 MB

[github-code-quality]

Code Coverage Overview

Languages: TypeScript

TypeScript / code-coverage/vitest

The overall coverage in the dev/dshilov/quick-st... branch remains at 78%, unchanged from the main branch.

Show a code coverage summary of the most impacted files.

File	main 3216ecb	dev/dshilov/quick-st... 00ff724	+/-
src/panels/migr...rs/aiHelpers.ts	55%	56%	+1%
src/utils/quick...ckStartState.ts	0%	100%	+100%
src/webviews/co...tPositioning.ts	0%	100%	+100%
src/webviews/co...ryEditorTips.ts	0%	100%	+100%

---

_{Updated June 29, 2026 10:04 UTC
Code Coverage is in Public Preview. Learn more and provide us with your feedback.}

[github-actions]

🧪 Tests (Unit + Integration)

🧪 Results

• Unit Tests (vitest): ✅ success
• Integration Tests (extension host): ✅ success

📈 Coverage

• Download HTML report

[github-actions]

🎭 E2E Tests (Playwright + VS Code)

🧪 Result

• E2E Tests: ✅ success

📥 Artifacts (run)

• e2e-results-1 — 14.75 MB
• e2e-html-report-1 — 7.13 MB

Tip: the HTML report artifact contains a self-contained Playwright report.
Download the zip, extract, and open index.html — or run
npx playwright show-report <extracted-dir> for the interactive view.