Resolve service name and icon for shortcut card and badge (#51850)

Author: piitaya

src/components/ha-condition-icon.ts

@@ -55,7 +55,11 @@ export class HaConditionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = conditionIcon(this.hass, this.condition).then((icn) => {
+    const icon = conditionIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.condition
+    ).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/components/ha-service-icon.ts

@@ -32,7 +32,11 @@ export class HaServiceIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = serviceIcon(this.hass, this.service).then((icn) => {
+    const icon = serviceIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.service
+    ).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/components/ha-service-picker.ts

@@ -54,7 +54,7 @@ class HaServicePicker extends LitElement {
   protected firstUpdated(props: PropertyValues<this>) {
     super.firstUpdated(props);
     this.hass.loadBackendTranslation("services");
-    getServiceIcons(this.hass);
+    getServiceIcons(this.hass.connection, this.hass.config);
   }
 
   private _rowRenderer: RenderItemFunction<ServiceComboBoxItem> = (

src/components/ha-service-section-icon.ts

@@ -29,14 +29,17 @@ export class HaServiceSectionIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = serviceSectionIcon(this.hass, this.service, this.section).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
+    const icon = serviceSectionIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.service,
+      this.section
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
       }
-    );
+      return this._renderFallback();
+    });
 
     return html`${until(icon)}`;
   }

src/components/ha-trigger-icon.ts

@@ -69,7 +69,11 @@ export class HaTriggerIcon extends LitElement {
       return this._renderFallback();
     }
 
-    const icon = triggerIcon(this.hass, this.trigger).then((icn) => {
+    const icon = triggerIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.trigger
+    ).then((icn) => {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }

src/data/compute-service-info.ts

@@ -0,0 +1,34 @@
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeObjectId } from "../common/entity/compute_object_id";
+import type { LocalizeFunc } from "../common/translations/localize";
+import { DEFAULT_SERVICE_ICON } from "./icons";
+import type { HomeAssistant } from "../types";
+
+export interface ServiceInfo {
+  label: string;
+  icon?: string;
+  iconPath: string;
+}
+
+export const DEFAULT_SERVICE_INFO: ServiceInfo = {
+  label: "",
+  iconPath: DEFAULT_SERVICE_ICON,
+};
+
+export const computeServiceLabel = (
+  localize: LocalizeFunc,
+  services: HomeAssistant["services"],
+  service: string
+): string => {
+  const domain = computeDomain(service);
+  const serviceName = computeObjectId(service);
+  const serviceDef = services[domain]?.[serviceName];
+  return (
+    localize(
+      `component.${domain}.services.${serviceName}.name`,
+      serviceDef?.description_placeholders
+    ) ||
+    serviceDef?.name ||
+    service
+  );
+};

src/data/icons.ts

@@ -323,7 +323,8 @@ export const getComponentIcons = async (
 export const getCategoryIcons = async <
   T extends Exclude<IconCategory, "entity" | "entity_component">,
 >(
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   category: T,
   domain?: string,
   force = false
@@ -334,12 +335,10 @@ export const getCategoryIcons = async <
         Record<string, CategoryType[T]>
       >;
     }
-    resources[category].all = getHassIcons(hass.connection, category).then(
-      (res) => {
-        resources[category].domains = res.resources as any;
-        return res?.resources as Record<string, CategoryType[T]>;
-      }
-    ) as any;
+    resources[category].all = getHassIcons(connection, category).then((res) => {
+      resources[category].domains = res.resources as any;
+      return res?.resources as Record<string, CategoryType[T]>;
+    }) as any;
     return resources[category].all as Promise<Record<string, CategoryType[T]>>;
   }
   if (!force && domain in resources[category].domains) {
@@ -351,36 +350,39 @@ export const getCategoryIcons = async <
       return resources[category].domains[domain] as Promise<CategoryType[T]>;
     }
   }
-  if (!isComponentLoaded(hass.config, domain)) {
+  if (!isComponentLoaded(hassConfig, domain)) {
     return undefined;
   }
-  const result = getHassIcons(hass.connection, category, domain);
+  const result = getHassIcons(connection, category, domain);
   resources[category].domains[domain] = result.then(
     (res) => res?.resources[domain]
   ) as any;
   return resources[category].domains[domain] as Promise<CategoryType[T]>;
 };
 
 export const getServiceIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   domain?: string,
   force = false
 ): Promise<ServiceIcons | Record<string, ServiceIcons> | undefined> =>
-  getCategoryIcons(hass, "services", domain, force);
+  getCategoryIcons(connection, hassConfig, "services", domain, force);
 
 export const getTriggerIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   domain?: string,
   force = false
 ): Promise<TriggerIcons | Record<string, TriggerIcons> | undefined> =>
-  getCategoryIcons(hass, "triggers", domain, force);
+  getCategoryIcons(connection, hassConfig, "triggers", domain, force);
 
 export const getConditionIcons = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   domain?: string,
   force = false
 ): Promise<ConditionIcons | Record<string, ConditionIcons> | undefined> =>
-  getCategoryIcons(hass, "conditions", domain, force);
+  getCategoryIcons(connection, hassConfig, "conditions", domain, force);
 
 // Cache for sorted range keys
 const sortedRangeCache = new WeakMap<Record<string, string>, number[]>();
@@ -578,70 +580,78 @@ export const attributeIcon = async (
 };
 
 export const triggerIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   trigger: string
 ): Promise<string | undefined> => {
   let icon: string | undefined;
 
   const domain = getTriggerDomain(trigger);
   const triggerName = getTriggerObjectId(trigger);
 
-  const triggerIcons = await getTriggerIcons(hass, domain);
+  const triggerIcons = await getTriggerIcons(connection, hassConfig, domain);
   if (triggerIcons) {
     const trgrIcon = triggerIcons[triggerName] as TriggerIcons[string];
     icon = trgrIcon?.trigger;
   }
   if (!icon) {
-    icon = await domainIcon(hass.connection, hass.config, domain);
+    icon = await domainIcon(connection, hassConfig, domain);
   }
   return icon;
 };
 
 export const conditionIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   condition: string
 ): Promise<string | undefined> => {
   let icon: string | undefined;
 
   const domain = getConditionDomain(condition);
-  const conditionIcons = await getConditionIcons(hass, domain);
+  const conditionIcons = await getConditionIcons(
+    connection,
+    hassConfig,
+    domain
+  );
   if (conditionIcons) {
     const conditionName = getConditionObjectId(condition);
     const condIcon = conditionIcons[conditionName] as ConditionIcons[string];
     icon = condIcon?.condition;
   }
   if (!icon) {
-    icon = await domainIcon(hass.connection, hass.config, domain);
+    icon = await domainIcon(connection, hassConfig, domain);
   }
   return icon;
 };
 
 export const serviceIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   service: string
 ): Promise<string | undefined> => {
   let icon: string | undefined;
   const domain = computeDomain(service);
   const serviceName = computeObjectId(service);
-  const serviceIcons = await getServiceIcons(hass, domain);
+  const serviceIcons = await getServiceIcons(connection, hassConfig, domain);
   if (serviceIcons) {
     const srvceIcon = serviceIcons[serviceName] as ServiceIcons[string];
     icon = srvceIcon?.service;
   }
   if (!icon) {
-    icon = await domainIcon(hass.connection, hass.config, domain);
+    icon = await domainIcon(connection, hassConfig, domain);
   }
   return icon;
 };
 
 export const serviceSectionIcon = async (
-  hass: HomeAssistant,
+  connection: Connection,
+  hassConfig: HomeAssistant["config"],
   service: string,
   section: string
 ): Promise<string | undefined> => {
   const domain = computeDomain(service);
   const serviceName = computeObjectId(service);
-  const serviceIcons = await getServiceIcons(hass, domain);
+  const serviceIcons = await getServiceIcons(connection, hassConfig, domain);
   if (serviceIcons) {
     const srvceIcon = serviceIcons[serviceName] as ServiceIcons[string];
     return srvceIcon?.sections?.[section];