Captures the full output of autodev existing-code Phase A through Step 4 (Code Testability Revision) for the Azaion UI workspace: - Step 1 Document: _docs/02_document/ (FINAL_report, architecture, glossary, components/, modules/, diagrams/, system-flows, module-layout) plus _docs/00_problem/ + _docs/01_solution/ + _docs/legacy/ + _docs/how_to_test + README. - Step 2 Architecture Baseline: architecture_compliance_baseline.md. - Step 3 Test Spec: _docs/02_document/tests/ (environment, test-data, blackbox/performance/resilience/security/ resource-limit tests, traceability-matrix), enum_spec_snapshot, expected_results/results_report.md (98 rows), plus the run-tests.sh + run-performance-tests.sh runners. - Step 4 Code Testability Revision: 01-testability-refactoring/ run dir (list-of-changes C01-C07, deferred_to_refactor, analysis/research_findings + refactoring_roadmap) and the 7 child task specs AZ-448..AZ-454 under _docs/02_tasks/todo/ plus _dependencies_table.md. - _docs/_autodev_state.md pins the cursor at Step 4 / refactor Phase 4 entry so /autodev resumes cleanly. Epic AZ-447 (UI testability gates) tracks the 7 child tasks that will land in subsequent commits. Co-authored-by: Cursor <cursoragent@cursor.com>
3.0 KiB
Module: src/components/HelpModal.tsx
Source:
src/components/HelpModal.tsx(62 lines) Topo batch: B2 (usesreact-i18nextfor the language flag only; no intra-repo deps)
Purpose
A modal dialog that surfaces annotation guidelines and the keyboard-shortcut cheat-sheet. Triggered from Header.tsx → "Help" entry. Replaces the legacy WPF HelpWindow.xaml (_docs/legacy/wpf-era.md §4).
Public interface
interface Props {
open: boolean
onClose: () => void
}
export default function HelpModal(props: Props): JSX.Element | null
When open === false, returns null. Otherwise renders a centered <div> overlay.
Internal logic
- Reads
i18n.languagefromuseTranslation(); treats anything other than'ua'as English (lang = i18n.language === 'ua' ? 'ua' : 'en'). GUIDELINES: a hardcoded array of 6{ en, ua }rules covering annotation quality. Hardcoded — not loaded via thei18nresource bundle, despite the module already importinguseTranslation. (Inconsistency vs. the rest of the SPA — flag for Step 4.)- Renders the guidelines as a numbered list and a 12-row keyboard-shortcut grid (
Space,← →,Ctrl + ← →,Enter, …). - Click on the dim backdrop closes the modal; click inside is
stopPropagation'd. Closebutton is a styled<button>callingonClose().
Dependencies
- Internal: none.
- External:
react-i18next(foruseTranslation()only — to detect the language; not for content lookup).
Consumers (intra-repo)
src/components/Header.tsx— ownsopenstate and the trigger button.
Data models
The GUIDELINES array — module-private. Each entry: { en: string, ua: string }.
Configuration
The keyboard-shortcut grid hardcodes the same shortcut taxonomy that _docs/ui_design/README.md §"Keyboard Shortcuts" enumerates. Verify parity during Step 4.
External integrations
None.
Security
None directly. Note that ESCAPE-key handling appears in the sibling ConfirmDialog but not here — Esc currently does NOT close HelpModal. Backdrop click is the only dismiss path beyond the Close button. Inconsistent UX; flag for Step 4 verification against the UI spec.
Tests
None.
Notes / open questions
- The 6 guidelines stored as
{ en, ua }literals duplicate the Annotation Quality Guidelines documented in_docs/ui_design/README.md§"Annotation Quality Guidelines" (which lists six rules with subtly different wording). Choose one source of truth in Step 5; preferred is to lift the strings intoen.json/ua.jsonlike the rest of the SPA. - The
<h2>"How to Annotate" heading is hardcoded English; should also be translated. - The
lang === 'ua' ? 'ua' : 'en'branch silently treats every non-Ukrainian language as English — only correct as long as exactly two locales exist. If a third locale is added, this needs to use thei18nlookup table. - Width is hardcoded
w-[500px]andmax-h-[80vh]. Does not adapt to mobile breakpoints documented in_docs/ui_design/README.md§"Responsive Breakpoints" (640px). Flag.