Add new badges design with UI editor #21401
Conversation
|
This new design is great, thank you 👍 Much more compact, so I'm sure users will like it. However, it doesn't give the "warning" vibe as the old one, so could we please have them side by side (maybe with the old one changed to regular card, so it can be used anywhere). Here is an example how the current one can be used as "warning" to water plant and show running timer, which the new design really is not the same: |
|
Thank you for the feedback. The old badges will always work as before. Badges are just a smaller card. You can mix them if you want but it can not look very good as the height is not the same for these different kind of badge. Also, more type of badge can be added in the future (alerting ones for example if it make sense). Even custom badges can be added. |
|
The new badges look good. I would prefer if you could add an optional name/title to the badges. If you add two light badges, then you can only distingush the badges with the state or the icon. A badge name/title (maybe in a secondary line) would give more insights. |
|
Note Reviews pausedUse the following commands to manage reviews:
WalkthroughWalkthroughThe changes encompass modifications to Lovelace components in Home Assistant, focusing on refining badge handling, configuration, and visibility. Key updates include replacing Changes
Sequence Diagram(s)Badge Handling in LovelacesequenceDiagram
participant User
participant LovelaceUI
participant HuiBadge
participant CustomBadgeEntry
participant HomeAssistant
User->>LovelaceUI: Interact with badge
LovelaceUI->>HuiBadge: Create/Update badge
HuiBadge->>HomeAssistant: Fetch entity state
HomeAssistant-->>HuiBadge: Return entity state
HuiBadge->>LovelaceUI: Render badge
LovelaceUI-->>User: Display updated badge
Badge Configuration and VisibilitysequenceDiagram
participant User
participant LovelaceUI
participant BadgeConfig
participant HuiBadge
participant HomeAssistant
User->>LovelaceUI: Configure badge visibility
LovelaceUI->>BadgeConfig: Update visibility conditions
BadgeConfig-->>LovelaceUI: Return updated config
LovelaceUI->>HuiBadge: Apply config
HuiBadge->>HomeAssistant: Validate conditions
HomeAssistant-->>HuiBadge: Return validation result
HuiBadge->>LovelaceUI: Update badge visibility
LovelaceUI-->>User: Display changes
Custom Badge ManagementsequenceDiagram
participant User
participant LovelaceUI
participant CustomBadgeEntry
participant HuiBadge
participant HomeAssistant
User->>LovelaceUI: Add/Remove custom badge
LovelaceUI->>CustomBadgeEntry: Fetch badge entry
CustomBadgeEntry-->>LovelaceUI: Return badge entry
LovelaceUI->>HuiBadge: Configure badge
HuiBadge->>HomeAssistant: Fetch entity state (if applicable)
HomeAssistant-->>HuiBadge: Return entity state
HuiBadge->>LovelaceUI: Render custom badge
LovelaceUI-->>User: Display custom badge
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
frenck
added
the
Noteworthy
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
Outside diff range, codebase verification and nitpick comments (2)
src/panels/lovelace/components/hui-badge-edit-mode.ts (1)
48-53: Consider using local storage for persistent clipboard data.The clipboard data is stored in session storage, which will clear when the session ends. If persistence beyond the session is desired, consider using local storage.
src/panels/lovelace/editor/config-util.ts (1)
323-416: Unit tests for badge manipulation functions are missing.The functions
addBadge,replaceBadge,deleteBadge,insertBadge, andmoveBadgedo not appear to be covered by unit tests. To ensure their reliability and correctness, please add unit tests for these functions.
addBadgereplaceBadgedeleteBadgeinsertBadgemoveBadgeAnalysis chain
Review newly introduced badge manipulation functions.
The addition of functions like
addBadge,replaceBadge,deleteBadge,insertBadge, andmoveBadgealigns with the PR's objectives to handle badges similarly to cards. Ensure that these functions are consistent with their card counterparts in terms of logic and error handling.Additionally, it's important to verify that these new functions are covered by unit tests to ensure their reliability.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for unit tests covering the new badge functions. # Test: Search for unit tests related to the new badge functions. fd --type f "test_config-util.*" --exec rg "addBadge|replaceBadge|deleteBadge|insertBadge|moveBadge"Length of output: 102
Script:
#!/bin/bash # Description: Check for unit tests covering the new badge functions in all test files. # Test: Search for unit tests related to the new badge functions across all test files. fd --type f --exec rg "addBadge|replaceBadge|deleteBadge|insertBadge|moveBadge"Length of output: 860
Script:
#!/bin/bash # Description: Check for unit tests covering the new badge functions by looking for test cases. # Test: Search for test cases related to the new badge functions. fd --type f --exec rg -A 5 "(test|it|describe)" | rg "addBadge|replaceBadge|deleteBadge|insertBadge|moveBadge"Length of output: 400
src/panels/lovelace/editor/badge-editor/hui-badge-visibility-editor.ts
Outdated
Show resolved
Hide resolved
|
@coderabbitai pause |
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range, codebase verification and nitpick comments (1)
src/panels/lovelace/badges/hui-error-badge.ts (1)
Line range hint
1-92: Review ofHuiErrorBadgeclass:This class provides an error badge component with detailed error information. The addition of
_viewDetailmethod enhances user interaction by providing detailed error information when clicked.Suggested Improvement: Error Handling in
_viewDetail
The error handling in the_viewDetailmethod is basic. Consider providing more detailed error messages or logging for better diagnostics.- dumped = `[Error dumping ${this._config!.origConfig}]`; + dumped = `[Error dumping configuration: ${err.message}]`;This change provides more context in the error message, which can be helpful for debugging.
src/data/lovelace/config/view.ts
Outdated
| @@ -27,7 +27,7 @@ export interface LovelaceBaseViewConfig { | |||
|
|
|||
| export interface LovelaceViewConfig extends LovelaceBaseViewConfig { | |||
| type?: string; | |||
| badges?: Array<string | LovelaceBadgeConfig>; | |||
| badges?: LovelaceBadgeConfig[]; | |||
There was a problem hiding this comment.
we should still support just strings, no?
There was a problem hiding this comment.
Yes for backward compatibility, I reverted that change.
| type: "entity"; | ||
| entity?: string; | ||
| name?: string; | ||
| icon?: string; |
There was a problem hiding this comment.
The StateLabelBadgeConfig supported image, should we keep that around in the new one?
Maybe also migrate the option show_name to a display_type?
There was a problem hiding this comment.
I will make another PR to properly migrate the state label badge
src/panels/lovelace/editor/config-elements/hui-entity-badge-editor.ts
Outdated
Show resolved
Hide resolved
|
Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍 |
Breaking change
The current badges will use the new design.
Proposed change
Hui Badge
Badge are now loaded using
hui-badgecomponent instead of having the view responsible of loading these elementNew badge 🎉
A new type of badge has been added : the
entitybadge. The design is more compact than the previous one and better match the tile card design.3 display types are available :
minimal: icon onlystandard: icon and state, this is the defaultcomplete: icon, name and stateCustomization are similar to tile card options : name, icon, color, state content and entity picture instead of icon.
Visibility options
Like cards and sections, badges support all the available visibility conditions : https://www.home-assistant.io/dashboards/conditional/#conditions-options
Custom badges
Custom badges was already supported but not documented. It's now supported by the card editor. It's loaded the same way as custom cards. A pull request in developer blog and documentation will follow.
Edit mode
The badge can be added using the
+on the top of the view. Masonry view and section view are the only ones that supports badges. Badges can also be deleted and moved using drag and drop.By clicking a badge, you can edit all the configuration directly from the UI the same way as card.
Future Improvement to do (not in this PR) :
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
New Features
HuiBadgeandHuiEntityBadgeelements for enhanced badge management.HuiViewBadgescomponent for flexible badge display and editing.hui-badge-edit-modefor easier badge configuration and manipulation.Improvements
visibilityandpreview.CustomBadgeEntryto streamline custom badge management.Bug Fixes