Add Voice assistant column to data tables

[kritsel]

Proposed change

A column named 'Voice assistants' is added to the Entities, Helpers, Automations, Scenes and Scripts overview pages. The column shows the brand icon(s) of the voice assistant(s) an entity, helper, etc. is exposed to. This makes it easier for users to see which entities, etc. are actually controlable via a voice assistant.
The 'Voice assistants' column is hidden by default (use the 'Customize table' button above a data table to unhide) and it is not sortable.

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

N/A

Additional information

• This PR implements this feature request: https://community.home-assistant.io/t/assist-display-exposed-to-assist-and-aliases-in-devices-entities-automations-etc-overviews-in-ha-front-end/894714

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

---

[home-assistant]

Hi @kristel030

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

[home-assistant]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

Stale

[MindFreeze]

How will multiple assistants be handled? There should be some spacing between the icons I guess.

[kritsel]

@MindFreeze thanks for the valuable feedback. Regarding spacing in case of multiple assistants. Visually I don't believe there's a spacing issue between the images. But I am faced with a column width issue when all three assistant logos need to be rendered, as the third logo overlaps the text in the next column. Do you maybe have any suggestions on how to fix this? Or would it be acceptable to leave as is, as supporting three voice assistant flavours seems to be a kind of edge case.

[kritsel]

Addressed all review comments. New version reuses existing implementation of rendering the logo of relevant voice assistants.

[ildar170975]

Sorry, but isn’t it better to show names of assistants instead of icons? In this case there will be no overflow issue, ellipsis will be shown in case of many assistants (+ tooltip may be show with a full list), also a “voice assistant” filter can be added.

[MindFreeze]

Sorry, but isn’t it better to show names of assistants instead of icons? In this case there will be no overflow issue, ellipsis will be shown in case of many assistants (+ tooltip may be show with a full list), also a “voice assistant” filter can be added.

I agree but we already have this as icons on the Voice Assistants page in the Expose tab. So lets just make this consistent with that first. Otherwise the scope of the PR will expand.

[MindFreeze]

Is the overflow still an issue? If yes, check how the voice assistants page handles it

[ildar170975]

Sorry for another intrusion, is it possible to make it sortable? Also, adding a filter might be also useful. Not sure if it is possible with “icon” presentation.

[kritsel]

Sorry for another intrusion, is it possible to make it sortable? Also, adding a filter might be also useful. Not sure if it is possible with “icon” presentation.

@ildar170975 From a usability perspective I'm completely with you. However, this is my first code contribution to this code base, and I haven't yet been able to find out how to make sorting or filtering work. I think it is wise to leave the scope of this PR as it is (to keep it manageable) and introduce sort/filter as a separate PR.

[kritsel]

Is the overflow still an issue? If yes, check how the voice assistants page handles it

The voice assistant page displays multiple icons below each other instead of next to each other. I have decided to leave this behaviour as it is. I personally prefer displaying next to each other, but first tests revealed quite some challenges in guaranteeing proper layout, so best to not tinker with that right now.

[MindFreeze]

The current voice assistants page uses

        showNarrow: true,
        sortable: true,
        filterable: true,
        minWidth: "160px",
        maxWidth: "160px",
        type: "flex",

Please make all the new columns use the same options for consistency. You have various sizes now and it doesn't seem intentional

[kritsel]

The current voice assistants page uses

        showNarrow: true,
        sortable: true,
        filterable: true,
        minWidth: "160px",
        maxWidth: "160px",
        type: "flex",

Please make all the new columns use the same options for consistency. You have various sizes now and it doesn't seem intentional

All minWidth/maxWidth for all data tables that get a new 'Voice assistant' column with this PR are now set at 100px. Reasing being is that the 160px value claims more horizontal space then is actually needed, which comes at the expense of other columns. So I believe we have 3 options now:

1. keep 160 for the existing data table and 100 for the 5 new ones
2. set them all to 160 (existing data table)
3. set them all to 100
   Any preference from your side?

[MindFreeze]

1. keep 160 for the existing data table and 100 for the 5 new ones

This is fine as long as it works visually but 1 of the new ones had 160px so I thought it was a mistake

[kritsel]

@MindFreeze Wrap-up:

• all overview pages reuse the pre-existing <voice-assistants-expose-assistant-icon> tag to render a voice assistant logo
• entity_id -> entityId: fixed
• column width for the newly introduced 'Voice assistants' column on 5 pages is 100px for all pages, stays at 160px for the pre-existing page

Thanks for being my 'conscience' in this PR, your review remarks helped me to better understand the code structure and improve the code quality. Can't wait to see my very first contribution appearing in an upcoming release.

[MindFreeze]

Thanks @kritsel ! Great work! FYI it's too late for the January release so this will go in the February one.