Implement show_empty functionality for the markdown card #21379
Conversation
WalkthroughWalkthroughThe updates to the Changes
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Additional comments not posted (2)
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 (
|
![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 (1)
src/panels/lovelace/cards/hui-markdown-card.ts (1)
116-123:fireEventfunction is not imported.The
fireEventfunction is not imported insrc/panels/lovelace/cards/hui-markdown-card.ts. Ensure that thefireEventfunction is imported at the top of the file to make it available in the scope.
- File:
src/panels/lovelace/cards/hui-markdown-card.ts- Lines: 116-123
Analysis chain
Verify the availability of
fireEvent.Ensure that the
fireEventfunction is imported or available in the scope for it to work correctly.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify if the `fireEvent` function is imported or available in the scope. # Test: Search for the import statement or declaration of `fireEvent`. Expect: At least one occurrence. rg --type typescript -A 2 $'import { fireEvent }'Length of output: 162
Script:
#!/bin/bash # Description: Verify if the `fireEvent` function is imported or available in the scope. # Test: Search for the import statement or declaration of `fireEvent`. Expect: At least one occurrence. rg --type typescript 'import { fireEvent }' -A 2Length of output: 162
Script:
#!/bin/bash # Description: Verify if the `fireEvent` function is imported or available in the scope. # Test: Search for the import statement or declaration of `fireEvent`. Expect: At least one occurrence. rg --type typescript "import { fireEvent }" -A 2Length of output: 162
Script:
#!/bin/bash # Description: Verify if the `fireEvent` function is imported or available in the scope. # Test: Search for the import statement or declaration of `fireEvent`. Expect: At least one occurrence. rg 'import { fireEvent }' --type typescript -A 2Length of output: 162
Script:
#!/bin/bash # Description: Verify if the `fireEvent` function is imported or available in the scope. # Test: Search for the import statement or declaration of `fireEvent`. Expect: At least one occurrence. grep -r 'import { fireEvent }' --include \*.tsLength of output: 71499
|
@coderabbitai review |
|
Linting error arises from hui-markdown-card.ts#L92: I did not make this change but it seems to be a typing error. |
It's a warning which can be ignored and not introduced in your PR. |
| @@ -113,7 +114,18 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { | |||
| if (changedProps.has("_config")) { | |||
| this._tryConnect(); | |||
| } | |||
|
|
|||
| if ( | |||
There was a problem hiding this comment.
We should check if _templateResult or _config changed first
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
The implementation of show_empty property in #21379 introduced regression which causes Markdown cards rendered within a Grid card to not take full height of its space. This is because a visible card is now forced to have "display: block", while without that it's rendered as "display: inline". As the CSSStyleDeclaration.style mandates string type, it's not possible to delete or null the value. Setting it to an empty string seems to do the trick as well and the linter is happy too. Fixes #23119
The implementation of show_empty property in #21379 introduced regression which causes Markdown cards rendered within a Grid card to not take full height of its space. This is because a visible card is now forced to have "display: block", while without that it's rendered as "display: inline". As the CSSStyleDeclaration.style mandates string type, it's not possible to delete or null the value. Setting it to an empty string seems to do the trick as well and the linter is happy too. Fixes #23119
Proposed change
This implements
show_empty: true/ falsefunctionality for the markdown card. The functionality is similar to the entity filter card.This resolves a requested feature here (https://www.reddit.com/r/homeassistant/comments/y2nwz0/hide_markdown_card_if_empty/) for which there are no appropriate solutions.
It is possible using templates to create conditions which far exceed the capability of the conditional card or the "visibility" settings of cards so this functionality is required. For example, you currently cannot toggle visibility based on an attribute of a card currently.
The workaround suggested in that reddit thread (using a template sensor and outputting to state) isn't appropriate because the text output from a markdown card can exceed the maximum of 255 characters.
There is no existing translation in the entity filter card for "show_empty" so the visual editor couldn't be implmented in this case.
By default, the existing behaviour is kept i.e. an empty card is shown which results in a small empty box.
Type of change
Example configuration
Additional information
Checklist
If user exposed functionality or configuration variables are added/changed:
Summary by CodeRabbit
show_emptyoption to control card visibility when there are no results.