Fix intermittent invalid state error in loadfile (cli)

[haslinghuis]

How to reproduce: when using load from file a second time in CLI to restore a diff:

Summary by CodeRabbit

• Bug Fixes

  • More reliable snippet preview dialog: resets stale dialogs, initializes only when needed, ensures confirm applies to the correct snippet, and closes consistently.
  • Activation and dialog behaviors now guarded to avoid errors when expected elements/selectors are missing.

• Refactor

  • Streamlined dialog handling for improved stability and responsiveness.

[coderabbitai]

Walkthrough

Lazy-initialize and reset the CLI snippet preview modal reference; guard activation binding and dialog scroll reset in the modal initializer; ensure confirm handler is rebound with current fileName and the modal is opened/closed via the dialog element when needed.

Changes

Cohort / File(s)	Summary
CLI tab — snippet preview src/js/tabs/cli.js	Reset self.GUI.snippetPreviewWindow = null on initialize; lazily create the snippet preview dialog with initializeModalDialog("#snippetpreviewdialog", ...) when missing; rebind confirm handler to call executeSnippet(fileName); set preview content and call showModal(); close modal after execute. Minor spacing/formatting edits.
Modal initializer — safety guards src/js/utils/initializeModalDialog.js	Guard activation click binding so it only attaches when activationSelector is provided; guard dialog scroll reset with a check for dialogContainerElement to avoid errors when container is missing. No signature/API changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant CLI as CLI Tab
  participant Init as initializeModalDialog
  participant Dialog as <#snippetpreviewdialog>

  User->>CLI: Click "Preview Commands" (fileName)
  CLI->>CLI: Ensure self.GUI.snippetPreviewWindow exists
  alt modal missing
    CLI->>Init: initializeModalDialog("#snippetpreviewdialog", ..., confirmHandler)
    Init-->>CLI: returns dialog reference
  end
  CLI->>Dialog: set preview content
  CLI->>Dialog: attach/bind confirm handler (captures fileName)
  CLI->>Dialog: showModal()
  note right of Dialog: User reviews preview
  User->>Dialog: Click Confirm
  Dialog->>CLI: trigger confirm handler
  CLI->>Dialog: close()
  CLI->>CLI: executeSnippet(fileName)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Replace all 4 instances of jBox-style modal dialog boxes with HTML dialog element #4484 — modifies the same modal-dialog implementation and usage in src/js/tabs/cli.js and initializeModalDialog, likely directly related.

Suggested reviewers

• nerdCopter

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description only includes a reproduction step and an image but omits the structured information outlined by the repository’s template such as a summary of changes, implementation details, related issue references, and testing instructions, making the description largely incomplete.	Please expand the description to include a concise summary of what was changed and why, explain how the fix addresses the issue, reference any related GitHub issues using the “Fixes #” format, and outline the steps used to verify the fix in testing so that reviewers have all necessary context.
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the pull request’s purpose of fixing an intermittent invalid state error in the CLI loadfile functionality, directly reflecting the core change of resetting and lazily reinitializing the modal reference in cli.js to prevent stale state issues.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b110ff3 and 5b3b79c.

📒 Files selected for processing (2)

• src/js/tabs/cli.js (2 hunks)
• src/js/utils/initializeModalDialog.js (1 hunks)

🔇 Additional comments (2)

src/js/utils/initializeModalDialog.js (1)

57-65: LGTM! Guards enable safe lazy initialization.

The conditional guards correctly handle the case where activationSelector is null and where dialogContainerElement might not exist. This aligns with the lazy initialization pattern used in cli.js where the modal is created without an activation trigger.

src/js/tabs/cli.js (1)

103-104: LGTM! Properly resets modal reference on tab initialization.

Resetting the modal reference ensures that stale references to the previous DOM are cleared when the tab is reinitialized, preventing invalid state errors.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/js/tabs/cli.js (1)

169-171: Consider removing redundant initialization flag.

The self.GUI.snippetPreviewWindow property is now primarily used as an initialization flag, but since the dialog element is retrieved directly each time via $("#snippetpreviewdialog")[0], this tracking may be unnecessary. The current implementation works correctly, but simplifying this could reduce cognitive overhead.

Potential cleanup:

-            // Mark as initialized after first use
-            if (!self.GUI.snippetPreviewWindow) {
-                self.GUI.snippetPreviewWindow = snippetDialog;
-            }

You could also remove the property declaration from line 23 if it's not used elsewhere.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 105aa26 and b110ff3.

📒 Files selected for processing (1)

• src/js/tabs/cli.js (1 hunks)

🔇 Additional comments (2)

src/js/tabs/cli.js (2)

148-154: LGTM! Clean refactoring with proper null guard.

The direct DOM reference and null check prevent potential errors when closing the dialog.

---

156-179: Excellent fix for the invalid state error!

The refactoring correctly addresses the intermittent issue by:

• Adding early validation of the dialog element
• Always updating the click handler to capture the current fileName
• Guarding showModal() with !snippetDialog.hasAttribute("open") to prevent calling showModal on an already-open dialog (which throws InvalidStateError)

The direct DOM manipulation is more reliable than the previous modal wrapper pattern.

[nerdCopter]

• approving, shallow test: flashed and pasted.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Preview URL: https://pr4642.betaflight-app.pages.dev