Separate entity, device and area name in more info dialog header #21951

piitaya · 2024-09-11T13:59:51Z

Proposed change

An attempt to improve more info dialog for entities.
For now it uses the backward compatibility with friendly_name. We should use entry registry for that but has_entity_name should be exposed in EntityRegistryDisplayEntry for that.

Needs home-assistant/core#125832

More info dialog

Some examples depending of the different combinations (entity, device, area)

entity, device, area

entity, device, no area

no entity name, device, area

entity, no device, area

entity only

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

Summary by CodeRabbit

New Features
- Introduced utility functions for computing area, device, and entity names, enhancing clarity and usability in the application.
- Updated the MoreInfoDialog to display more structured information, including device and area names alongside the main entity name.
Bug Fixes
- Improved error handling for name retrieval, ensuring robustness when accessing area and device names.
Style
- Enhanced visual layout of the MoreInfoDialog with updated styling for title and subtitle presentation.

coderabbitai · 2024-09-11T14:00:01Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The pull request introduces several utility functions for computing names associated with areas, devices, and entities in a Home Assistant environment. New files are created to define these functions, which enhance the retrieval and presentation of entity-related information. Additionally, modifications are made to the MoreInfoDialog component to utilize these new functions, improving the display of contextual information about entities.

Changes

Files	Change Summary
`src/common/entity/compute_area_name.ts`	Added a utility function `computeAreaName` to extract and return the trimmed name of an area from an `AreaRegistryEntry` object.
`src/common/entity/compute_device_name.ts`	Introduced `computeDeviceName` to return a string or undefined representing the name of a device, prioritizing `name_by_user` over `name`.
`src/common/entity/compute_entity_name.ts`	Added functions `computeEntityName`, `computeEntityDeviceName`, and `computeEntityAreaName` to compute names based on state, device, and area IDs.
`src/dialogs/more-info/ha-more-info-dialog.ts`	Updated the `MoreInfoDialog` to use new utility functions for computing entity names, areas, and devices, enhancing the information displayed in the dialog.

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?

❤️ Share

🪧 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.

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 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.

bramkragten · 2025-03-26T08:18:07Z

src/common/entity/compute_device_name.ts

@@ -0,0 +1,5 @@
+import type { DeviceRegistryEntry } from "../../data/device_registry";
+
+export const computeDeviceName = (


We already have a computeDeviceName function https://github.com/home-assistant/frontend/blob/dev/src/data/device_registry.ts#L68

Yeah, in my opinion this function does too much with the entities fallback and translation fallback.

entities is optional, we could make the translation fallback optional too. We can also wrap the functions (have a computeDeviceNameWithFallback()), but we can not have 2 functions with the same name in the code base, that will go wrong with importing and is highly confusing.

src/common/entity/compute_entity_name.ts

bramkragten · 2025-03-26T08:24:19Z

src/data/entity_registry.ts

@@ -24,6 +24,7 @@ export interface EntityRegistryDisplayEntry {
  translation_key?: string;
  platform?: string;
  display_precision?: number;
+  has_entity_name?: boolean;


This doesn't seem used now right?

It was used in entity picker but I removed it from this PR. I will be useful if we want to compute something similar to friendly_name in the front-end directly.

src/util/html-join.ts

Co-authored-by: Bram Kragten <[email protected]>

bramkragten · 2025-03-26T08:54:57Z

src/common/entity/compute_entity_name.ts

+  entry: EntityRegistryDisplayEntry | EntityRegistryEntry,
+  hass: HomeAssistant
+): string | undefined => {
+  const name = entry.name || undefined;


I think, not 100% sure, that behavior between EntityRegistryDisplayEntry and EntityRegistryEntry is different here, EntityRegistryDisplayEntry will use EntityRegistryEntry.name and if that is not available use EntityRegistryEntry.original_name I think.

Right, you did that yourself :D

https://github.com/home-assistant/core/pull/125832/files#diff-c49e52963d3481d7a71789cae57190b08c1e283cf64f26bafe0a657574d3d5beR240

I will check that in detail. May be we should only use the EntityRegistryDisplayEntry.

@bramkragten I added fallback to original name so we can also use EntityRegistryEntry. I checked the backend and the original_name fallback is only for EntityRegistryDisplayEntry.

bramkragten · 2025-03-26T11:57:47Z

src/common/entity/compute_device_name.ts

+) => {
+  for (const entity of entities || []) {
+    const entityId = typeof entity === "string" ? entity : entity.entity_id;
+    const stateObj = hass.states[entityId];


I guess this should use entry.name || entry.original_name first, but maybe for later

bramkragten · 2025-03-26T11:59:28Z

src/common/entity/compute_entity_name.ts

+
+  // If the device name is the same as the entity name, consider empty entity name
+  if (deviceName === name) {
+    return undefined;


Isn't it weird that if we request the entity name we get undefined if the name is the same as the device? I feel like the default behavior of computeEntityName should return the name always, and not returning it would be another function or option?

home-assistant bot added the cla-signed label Sep 11, 2024

piitaya marked this pull request as draft September 11, 2024 14:00

piitaya changed the title ~~Separate entity, device and area name in more info dialog header~~ Separate entity, device and area name in more info dialog header and entity picker Sep 11, 2024

piitaya added the wait for backend label Sep 12, 2024

piitaya force-pushed the entity_name_more_info_dialogs branch 2 times, most recently from 38e8471 to 5456a65 Compare September 18, 2024 15:58

piitaya added backend merged The backend PR for this frontend PR has been merged and removed wait for backend labels Oct 30, 2024

piitaya force-pushed the entity_name_more_info_dialogs branch from 5456a65 to 8464b00 Compare October 30, 2024 13:26

piitaya force-pushed the entity_name_more_info_dialogs branch from 8464b00 to 88f84f7 Compare January 15, 2025 14:30

piitaya force-pushed the entity_name_more_info_dialogs branch from 0e076ec to 8f597ff Compare March 18, 2025 16:11

piitaya added 12 commits March 20, 2025 15:22

Separate entity, device and area name in more info dialog header

573124a

Use has_entity_name

44c3ffc

Separate entity, device and area name in entity picker

f5a591c

Fix entity name with has entity name

0ddd6ec

Fix compute entity name

19f4cfb

Add full name

5f4b0c4

Add floor

cbc7cb6

Improve code quality

4887ac2

Use compute entity name in device entities card

5b762c6

Use context functions

e046e4a

Remove floor

1b4b1c4

Use state name provided by backend

7ba7a74

piitaya force-pushed the entity_name_more_info_dialogs branch from 8f597ff to 7ba7a74 Compare March 20, 2025 14:23

piitaya added 2 commits March 20, 2025 15:58

Use breadcrumb for more info

980ade9

Revert entity picker changes

790bcde

piitaya changed the title ~~Separate entity, device and area name in more info dialog header and entity picker~~ Separate entity, device and area name in more info dialog header Mar 20, 2025

Use new logic in device page

e1e76e0

piitaya marked this pull request as ready for review March 20, 2025 17:27

piitaya added 2 commits March 20, 2025 18:33

Use breadcrumb

b9ec948

Use join directive

98c089b

github-actions bot added the Build Related to building the code label Mar 20, 2025

piitaya added 2 commits March 20, 2025 18:48

Add comments

1fbd673

Use secondary text color

af5280c

bramkragten self-assigned this Mar 26, 2025

bramkragten reviewed Mar 26, 2025

View reviewed changes

src/common/entity/compute_entity_name.ts Outdated Show resolved Hide resolved

bramkragten reviewed Mar 26, 2025

View reviewed changes

src/util/html-join.ts Outdated Show resolved Hide resolved

piitaya and others added 2 commits March 26, 2025 09:42

Update compute_entity_name.ts

b8f69b2

Co-authored-by: Bram Kragten <[email protected]>

Remove html join

4989443

bramkragten reviewed Mar 26, 2025

View reviewed changes

piitaya added 2 commits March 26, 2025 12:06

Improve computeDeviceNameDisplay

55c9fe2

Fallback to original name

5ce969f

piitaya requested a review from bramkragten March 26, 2025 11:40

bramkragten reviewed Mar 26, 2025

View reviewed changes

piitaya added 2 commits March 26, 2025 14:34

Simplify more info logic

f943d09

Include breadcrumb for child view (voice assistant)

e1f3169

bramkragten approved these changes Mar 26, 2025

View reviewed changes

piitaya enabled auto-merge (squash) March 26, 2025 13:53

piitaya merged commit 53bb825 into dev Mar 26, 2025
11 checks passed

piitaya deleted the entity_name_more_info_dialogs branch March 26, 2025 13:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Separate entity, device and area name in more info dialog header #21951

Separate entity, device and area name in more info dialog header #21951

piitaya commented Sep 11, 2024 •

edited

Loading

coderabbitai bot commented Sep 11, 2024 •

edited

Loading

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

bramkragten Mar 26, 2025

piitaya Mar 26, 2025

bramkragten Mar 26, 2025 •

edited

Loading

bramkragten Mar 26, 2025

piitaya Mar 26, 2025 •

edited

Loading

bramkragten Mar 26, 2025

bramkragten Mar 26, 2025

piitaya Mar 26, 2025

piitaya Mar 26, 2025 •

edited

Loading

bramkragten Mar 26, 2025

bramkragten Mar 26, 2025

		@@ -0,0 +1,5 @@
		import type { DeviceRegistryEntry } from "../../data/device_registry";

		export const computeDeviceName = (

Separate entity, device and area name in more info dialog header #21951

Separate entity, device and area name in more info dialog header #21951

Conversation

piitaya commented Sep 11, 2024 • edited Loading

Proposed change

More info dialog

Type of change

Example configuration

Additional information

Checklist

Summary by CodeRabbit

coderabbitai bot commented Sep 11, 2024 • edited Loading

Review skipped

Walkthrough

Changes

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bramkragten Mar 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

piitaya Mar 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

piitaya Mar 26, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

piitaya commented Sep 11, 2024 •

edited

Loading

coderabbitai bot commented Sep 11, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

bramkragten Mar 26, 2025 •

edited

Loading

piitaya Mar 26, 2025 •

edited

Loading

piitaya Mar 26, 2025 •

edited

Loading