Update Setup tab to hide build type/info/firmware when not available (#4459)

[DavidAnson]

Fixes #4459

Summary by CodeRabbit

• New Features

  • Improved control over the visibility of "Build type," "Build info," and "Firmware" sections in the "Firmware info" box on the setup tab, with these sections now shown or hidden based on the API version.

• Refactor

  • Streamlined the display logic for firmware information sections, resulting in a more modular and maintainable user interface.

[coderabbitai]

Walkthrough

The changes modularize the display logic for the "Build type," "Build info," and "Firmware" sections within the "Firmware info" box on the setup tab UI. Three pairs of new helper functions are introduced to show and hide each section independently. The main showFirmwareInfo function is updated to use these helpers, displaying or hiding the relevant UI elements based on whether the API version is at least 1.45. No changes are made to exported or public entities; all updates are internal to the setup tab logic.

Changes

File(s)	Change Summary
src/js/tabs/setup.js	Refactored to add show/hide helper functions for "Build type," "Build info," and "Firmware" sections; updated main logic to use these helpers and conditionally hide sections for API versions below 1.45.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SetupTab
    participant FirmwareInfoBox

    User->>SetupTab: Open Setup Tab
    SetupTab->>SetupTab: Check API version
    alt API version >= 1.45
        SetupTab->>FirmwareInfoBox: showBuildType()
        SetupTab->>FirmwareInfoBox: showBuildInfo()
        SetupTab->>FirmwareInfoBox: showBuildFirmware()
    else API version < 1.45
        SetupTab->>FirmwareInfoBox: hideBuildType()
        SetupTab->>FirmwareInfoBox: hideBuildInfo()
        SetupTab->>FirmwareInfoBox: hideBuildFirmware()
    end

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Hide build type/info/firmware fields for MSP API versions before 1.45 (#4459)	✅

Possibly related PRs

• Add Firmware/Download to Setup tab, add ':', formatting (#4444) #4450: Refactors and enhances firmware info display logic in the same file and UI area.

Suggested labels

RN: IMPROVEMENT

Poem

In the setup tab, the code now shines bright,
With helpers to show or to hide out of sight.
For older firmwares, fields vanish with glee,
No more empty boxes for you or for me!
🐇✨ Modular and neat,
This update’s a treat!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b655064 and d994934.

📒 Files selected for processing (1)

• src/js/tabs/setup.js (3 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/js/tabs/setup.js (3)

src/js/fc.js (1)

• FC (130-992)

src/js/localization.js (1)

• i18n (7-7)

src/js/data_storage.js (2)

• API_VERSION_1_45 (3-3)
• API_VERSION_1_45 (3-3)

🔇 Additional comments (5)

src/js/tabs/setup.js (5)

353-360: Good extraction of UI display logic

The new showBuildType function cleanly separates the logic for displaying the "Build type" section, making the code more modular and easier to maintain.

---

362-365: Good implementation of hiding functionality

This function properly hides the parent element rather than just the element itself, ensuring the entire "Build type" section disappears when not needed.

---

421-424: Consistent hiding pattern implemented

The hideBuildInfo function follows the same pattern as hideBuildType, maintaining consistency in how UI elements are hidden.

---

482-485: Consistent hiding pattern continued

The hideBuildFirmware function completes the set of helper functions for hiding UI elements, following the established pattern.

---

492-500: Clean implementation of conditional UI display

The updated showFirmwareInfo function now properly uses the new helper functions to show or hide UI elements based on API version, addressing the PR's objective of hiding build type/info/firmware when not available.

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[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://f93a3627.betaflight-configurator.pages.dev

[DavidAnson]

Per your request, @haslinghuis

[nerdCopter]

we would typically just use jQuery's $(....).show / .hide.
@haslinghuis , is the above function method preferred?

[haslinghuis]

@nerdCopter - yes show/hide is abstracted using functions using jquery constants.

[DavidAnson]

Thank you both! @haslinghuis, @nerdCopter, if you know of some other trivial UI issues like this that never get done because you're doing more important things, point me at them and maybe I can help with one or two in my spare time.

[haslinghuis]

@DavidAnson replacing jBox with Vue equivalent - but not sure if trivial

[DavidAnson]

Haha, I don't know either of those, but I'll have a look. :)

[haslinghuis]

@DavidAnson also checkout https://github.com/betaflight/betaflight-configurator/issues if there is something more trivial :)

[DavidAnson]

You could have just asked me to port to Safari - which I want, but doesn't matter without WebUSB... ;)