Translation support for device automation extra fields (#20567)

* Translation support for device trigger extra fields

* Prefer component translation over default

* Move device trigger extra_fields translations to backend

* move translations for extra_fields of conditions and actions too

src/data/device_automation.ts

@@ -249,6 +249,22 @@ export const localizeDeviceAutomationTrigger = (
   ) ||
   (trigger.subtype ? `"${trigger.subtype}" ${trigger.type}` : trigger.type!);
 
+export const localizeExtraFieldsComputeLabelCallback =
+  (hass: HomeAssistant, deviceAutomation: DeviceAutomation) =>
+  // Returns a callback for ha-form to calculate labels per schema object
+  (schema): string =>
+    hass.localize(
+      `component.${deviceAutomation.domain}.device_automation.extra_fields.${schema.name}`
+    ) || schema.name;
+
+export const localizeExtraFieldsComputeHelperCallback =
+  (hass: HomeAssistant, deviceAutomation: DeviceAutomation) =>
+  // Returns a callback for ha-form to calculate helper texts per schema object
+  (schema): string | undefined =>
+    hass.localize(
+      `component.${deviceAutomation.domain}.device_automation.extra_fields_descriptions.${schema.name}`
+    );
+
 export const sortDeviceAutomations = (
   automationA: DeviceAutomation,
   automationB: DeviceAutomation

src/panels/config/automation/action/types/ha-automation-action-device_id.ts

@@ -12,6 +12,8 @@ import {
   deviceAutomationsEqual,
   DeviceCapabilities,
   fetchDeviceActionCapabilities,
+  localizeExtraFieldsComputeLabelCallback,
+  localizeExtraFieldsComputeHelperCallback,
 } from "../../../../../data/device_automation";
 import { EntityRegistryEntry } from "../../../../../data/entity_registry";
 import { HomeAssistant } from "../../../../../types";
@@ -84,8 +86,13 @@ export class HaDeviceAction extends LitElement {
               .data=${this._extraFieldsData(this.action, this._capabilities)}
               .schema=${this._capabilities.extra_fields}
               .disabled=${this.disabled}
-              .computeLabel=${this._extraFieldsComputeLabelCallback(
-                this.hass.localize
+              .computeLabel=${localizeExtraFieldsComputeLabelCallback(
+                this.hass,
+                this.action
+              )}
+              .computeHelper=${localizeExtraFieldsComputeHelperCallback(
+                this.hass,
+                this.action
               )}
               @value-changed=${this._extraFieldsChanged}
             ></ha-form>
@@ -152,14 +159,6 @@ export class HaDeviceAction extends LitElement {
     });
   }
 
-  private _extraFieldsComputeLabelCallback(localize) {
-    // Returns a callback for ha-form to calculate labels per schema object
-    return (schema) =>
-      localize(
-        `ui.panel.config.automation.editor.actions.type.device_id.extra_fields.${schema.name}`
-      ) || schema.name;
-  }
-
   static styles = css`
     ha-device-picker {
       display: block;

src/panels/config/automation/condition/types/ha-automation-condition-device.ts

@@ -12,6 +12,8 @@ import {
   DeviceCapabilities,
   DeviceCondition,
   fetchDeviceConditionCapabilities,
+  localizeExtraFieldsComputeLabelCallback,
+  localizeExtraFieldsComputeHelperCallback,
 } from "../../../../../data/device_automation";
 import { EntityRegistryEntry } from "../../../../../data/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
@@ -84,8 +86,13 @@ export class HaDeviceCondition extends LitElement {
               .data=${this._extraFieldsData(this.condition, this._capabilities)}
               .schema=${this._capabilities.extra_fields}
               .disabled=${this.disabled}
-              .computeLabel=${this._extraFieldsComputeLabelCallback(
-                this.hass.localize
+              .computeLabel=${localizeExtraFieldsComputeLabelCallback(
+                this.hass,
+                this.condition
+              )}
+              .computeHelper=${localizeExtraFieldsComputeHelperCallback(
+                this.hass,
+                this.condition
               )}
               @value-changed=${this._extraFieldsChanged}
             ></ha-form>
@@ -153,14 +160,6 @@ export class HaDeviceCondition extends LitElement {
     });
   }
 
-  private _extraFieldsComputeLabelCallback(localize) {
-    // Returns a callback for ha-form to calculate labels per schema object
-    return (schema) =>
-      localize(
-        `ui.panel.config.automation.editor.conditions.type.device.extra_fields.${schema.name}`
-      ) || schema.name;
-  }
-
   static styles = css`
     ha-device-picker {
       display: block;

src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts

@@ -14,6 +14,8 @@ import {
   DeviceCapabilities,
   DeviceTrigger,
   fetchDeviceTriggerCapabilities,
+  localizeExtraFieldsComputeLabelCallback,
+  localizeExtraFieldsComputeHelperCallback,
 } from "../../../../../data/device_automation";
 import { EntityRegistryEntry } from "../../../../../data/entity_registry";
 import { HomeAssistant } from "../../../../../types";
@@ -88,8 +90,13 @@ export class HaDeviceTrigger extends LitElement {
               .data=${this._extraFieldsData(this.trigger, this._capabilities)}
               .schema=${this._capabilities.extra_fields}
               .disabled=${this.disabled}
-              .computeLabel=${this._extraFieldsComputeLabelCallback(
-                this.hass.localize
+              .computeLabel=${localizeExtraFieldsComputeLabelCallback(
+                this.hass,
+                this.trigger
+              )}
+              .computeHelper=${localizeExtraFieldsComputeHelperCallback(
+                this.hass,
+                this.trigger
               )}
               @value-changed=${this._extraFieldsChanged}
             ></ha-form>
@@ -177,14 +184,6 @@ export class HaDeviceTrigger extends LitElement {
     });
   }
 
-  private _extraFieldsComputeLabelCallback(localize) {
-    // Returns a callback for ha-form to calculate labels per schema object
-    return (schema) =>
-      localize(
-        `ui.panel.config.automation.editor.triggers.type.device.extra_fields.${schema.name}`
-      ) || schema.name;
-  }
-
   static styles = css`
     ha-device-picker {
       display: block;

src/translations/en.json

@@ -2863,12 +2863,6 @@
                 "device": {
                   "label": "Device",
                   "trigger": "Trigger",
-                  "extra_fields": {
-                    "above": "Above",
-                    "below": "Below",
-                    "for": "Duration (optional)",
-                    "zone": "[%key:ui::panel::config::automation::editor::triggers::type::zone::label%]"
-                  },
                   "description": {
                     "picker": "When something happens to a device. Great way to start."
                   }
@@ -3106,13 +3100,6 @@
                 "device": {
                   "label": "Device",
                   "condition": "Condition",
-                  "extra_fields": {
-                    "above": "Above",
-                    "below": "Below",
-                    "for": "Duration",
-                    "hvac_mode": "HVAC mode",
-                    "preset_mode": "Preset mode"
-                  },
                   "description": {
                     "picker": "Set of conditions provided by your device. Great way to start."
                   }
@@ -3343,17 +3330,6 @@
                 "device_id": {
                   "label": "Device",
                   "action": "Action",
-                  "extra_fields": {
-                    "code": "Code",
-                    "message": "Message",
-                    "title": "Title",
-                    "position": "[%key:ui::card::cover::position%]",
-                    "mode": "Mode",
-                    "humidity": "Humidity",
-                    "value": "Value",
-                    "brightness_pct": "[%key:ui::card::light::brightness%]",
-                    "flash": "Flash"
-                  },
                   "description": {
                     "picker": "Do something on a device. Great way to start.",
                     "no_device": "Device action"