Add state content component #21370
Add state content component #21370
Conversation
WalkthroughWalkthroughThe updates introduce new functionalities and significant modifications to the state handling and display logic in Home Assistant's Lovelace UI. Key changes include the addition of a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HaEntityStateContentPicker
participant StateDisplay
participant HuiTileCard
User->>HaEntityStateContentPicker: Select entity state content
HaEntityStateContentPicker->>StateDisplay: Get state display options
StateDisplay->>HaEntityStateContentPicker: Return display options
HaEntityStateContentPicker->>User: Display options in combo box
User->>HaEntityStateContentPicker: Choose an option
HaEntityStateContentPicker->>HuiTileCard: Update with chosen state content
HuiTileCard->>StateDisplay: Render state content based on user selection
StateDisplay->>HuiTileCard: Return rendered state content
HuiTileCard->>User: Display updated state content
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
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 Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (7)
src/components/ha-selector/ha-selector-ui-state-content.ts (2)
1-8: Ensure consistent naming conventions.The custom element is defined as
ha-selector-ui_state_content, which uses an underscore. Consider using hyphens consistently for better readability and consistency with other elements.- @customElement("ha-selector-ui_state_content") + @customElement("ha-selector-ui-state-content")
10-27: Remove unnecessary line breaks.There are unnecessary line breaks between property definitions, which can be removed for better readability.
- @property({ attribute: false }) public hass!: HomeAssistant; - @property({ attribute: false }) public selector!: UiStateContentSelector; - @property() public value?: string | string[]; - @property() public label?: string; - @property() public helper?: string; - @property({ type: Boolean }) public disabled = false; - @property({ type: Boolean }) public required = true; - @property({ attribute: false }) public context?: { - filter_entity?: string; - }; + @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: false }) public selector!: UiStateContentSelector; + @property() public value?: string | string[]; + @property() public label?: string; + @property() public helper?: string; + @property({ type: Boolean }) public disabled = false; + @property({ type: Boolean }) public required = true; + @property({ attribute: false }) public context?: { filter_entity?: string; };src/state-display/state-display.ts (1)
28-38: Remove unnecessary line breaks.There are unnecessary line breaks between property definitions, which can be removed for better readability.
- @property({ attribute: false }) public hass!: HomeAssistant; - @property({ attribute: false }) public stateObj!: HassEntity; - @property({ attribute: false }) public content: string | string[] = "state"; + @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: false }) public stateObj!: HassEntity; + @property({ attribute: false }) public content: string | string[] = "state";src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts (3)
Line range hint
26-51: Remove unnecessary line breaks.There are unnecessary line breaks between property definitions, which can be removed for better readability.
- @property({ attribute: false }) public hass?: HomeAssistant; - @state() private _config?: TileCardConfig; - @state() private _subElementEditorConfig?: SubElementEditorConfig; + @property({ attribute: false }) public hass?: HomeAssistant; + @state() private _config?: TileCardConfig; + @state() private _subElementEditorConfig?: SubElementEditorConfig;
128-131: Remove unnecessary line breaks.There are unnecessary line breaks between property definitions, which can be removed for better readability.
- }, - ] as const satisfies readonly HaFormSchema[]) + } + ] as const satisfies readonly HaFormSchema[])
Line range hint
199-237: Avoid the delete operator.Using the delete operator can impact performance. Consider assigning the property to undefined instead.
- if (!config.state_content) { - delete config.state_content; + if (config.state_content === undefined) { + config.state_content = undefined;Tools
Biome
[error] 233-233: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
[error] 237-237: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
src/components/entity/ha-entity-state-content-picker.ts (1)
71-91: Remove unnecessary line breaks.There are unnecessary line breaks between property definitions, which can be removed for better readability.
- @property({ attribute: false }) public hass!: HomeAssistant; - @property({ attribute: false }) public entityId?: string; - @property({ type: Boolean }) public autofocus = false; - @property({ type: Boolean }) public disabled = false; - @property({ type: Boolean }) public required = false; - @property() public label?: string; - @property() public value?: string[] | string; - @property() public helper?: string; - @state() private _opened = false; + @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: false }) public entityId?: string; + @property({ type: Boolean }) public autofocus = false; + @property({ type: Boolean }) public disabled = false; + @property({ type: Boolean }) public required = false; + @property() public label?: string; + @property() public value?: string[] | string; + @property() public helper?: string; + @state() private _opened = false;
|
There's a bit overlap now between "live_status" and "remaining". I would expect "remaining" to countdown to 0 instead of "live_status". Remaining should indicate the time that is remaining on the timer, when the timer is active "remaining" still keeps the initial time of the timer for the full timer period. As a sidenote, the default of the timer was previously the countdown timer, now it is switched back to timer_state (active/idle). It's perfectly fine to display this, but I'm making a note for if it's unintentional. |
piitaya
force-pushed
the
state_content_component
branch
from
48e6b1b to
dac22e5
Compare
…om state content list
Yeah, the
Good catch, it now defaults to |
Proposed change
Create a new component to display the state and multiple attributes. This logic was in the tile card and is now in its own component. This allow usage of this content outside of tile card (e.g. in future badge 👀).
Also, a selector as been created to be used in others card/badge editor.
Also , two new specials state content has been added :
remaining_time: Display a live timer of remaining time of an timer entity.install_status: Display the install status of an update entity (progress when install, previous version when skipped)These special contents were available before as default value for those domains and can now be mixed with other contents as suggested by @silamon (#21290 (review))
Also,
last-changedandlast-updatedhas renamed bylast_changedandlast_updated. Backward compatibility has been added to not break user dashboards.Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
New Features
StateDisplayclass for enhanced state information display.ha-entity-state-content-pickerfor users to pick and display entity state content with a filtering and sorting combo box interface.Enhancements
HuiTileCardcomponent.