Skip to content

refactor(ui): streamline dialog structure and inputs #4755

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 1 commit into from
Apr 28, 2025

Conversation

luannmoreira
Copy link
Member

Description

This PR refactors the Quick Connection dialog to improve its structure,
readability, and maintainability. It also enhances the user interaction
experience and brings consistency to both the UI and tests.

Changes

  • Collapsed verbose markup into single-line elements for cleaner templates
  • Updated v-text-field styling to use outlined variant and surface background
  • Replaced static column headers with dynamic headers array for cleaner code
  • Refined keyboard shortcut handling using useMagicKeys
  • Updated test selectors to align with new dynamic header logic
  • Improved empty state message for clarity ("No online device" →
    "There are currently no devices online")

Motivation

These changes streamline the component code, improve testability, and lay the
groundwork for future enhancements like dynamic headers or advanced search.

Testing

  • Unit tests updated and passing (QuickConnection.spec.ts)
  • Verified keyboard shortcuts still toggle the dialog and support navigation
  • Checked device search and dialog close actions still work as expected

Simplified markup by collapsing multiline tags and aligning props.
Refactored table headers to use a loop with dynamic labels.
Created a function to normalize the new Headers variable logic on tests.
Improved device search behavior and keyboard shortcut handling.
Fixed test selectors to match updated header labeling logic.
@luannmoreira luannmoreira force-pushed the refactor/quick-connection-dialog-improvements branch from 523e6f0 to a67fe0b Compare April 24, 2025 17:24
@luannmoreira luannmoreira requested a review from otavio April 24, 2025 17:30
@otavio otavio merged commit 2b5ef20 into master Apr 28, 2025
8 checks passed
@otavio otavio deleted the refactor/quick-connection-dialog-improvements branch April 28, 2025 15:55
# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants