Add device actions to automation editor. (#3637)

* Add device actions to automation editor.

* Copy automation on selection

* Fix types

* Remove device from device action schema

src/components/device/ha-device-action-picker.ts

@@ -0,0 +1,32 @@
+import { customElement } from "lit-element";
+import {
+  DeviceAction,
+  fetchDeviceActions,
+  localizeDeviceAutomationAction,
+} from "../../data/device_automation";
+import "../../components/ha-paper-dropdown-menu";
+import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
+
+@customElement("ha-device-action-picker")
+class HaDeviceActionPicker extends HaDeviceAutomationPicker<DeviceAction> {
+  protected NO_AUTOMATION_TEXT = "No actions";
+  protected UNKNOWN_AUTOMATION_TEXT = "Unknown action";
+
+  constructor() {
+    super(
+      localizeDeviceAutomationAction,
+      fetchDeviceActions,
+      (deviceId?: string) => ({
+        device_id: deviceId || "",
+        domain: "",
+        entity_id: "",
+      })
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-action-picker": HaDeviceActionPicker;
+  }
+}

src/data/device_automation.ts

@@ -10,6 +10,9 @@ export interface DeviceAutomation {
   event?: string;
 }
 
+// tslint:disable-next-line: no-empty-interface
+export interface DeviceAction extends DeviceAutomation {}
+
 export interface DeviceCondition extends DeviceAutomation {
   condition: string;
 }
@@ -18,6 +21,12 @@ export interface DeviceTrigger extends DeviceAutomation {
   platform: string;
 }
 
+export const fetchDeviceActions = (hass: HomeAssistant, deviceId: string) =>
+  hass.callWS<DeviceAction[]>({
+    type: "device_automation/action/list",
+    device_id: deviceId,
+  });
+
 export const fetchDeviceConditions = (hass: HomeAssistant, deviceId: string) =>
   hass.callWS<DeviceCondition[]>({
     type: "device_automation/condition/list",
@@ -52,6 +61,24 @@ export const deviceAutomationsEqual = (
   return true;
 };
 
+export const localizeDeviceAutomationAction = (
+  hass: HomeAssistant,
+  action: DeviceAction
+) => {
+  const state = action.entity_id ? hass.states[action.entity_id] : undefined;
+  return hass.localize(
+    `component.${action.domain}.device_automation.action_type.${action.type}`,
+    "entity_name",
+    state ? compute_state_name(state) : "<unknown>",
+    "subtype",
+    hass.localize(
+      `component.${action.domain}.device_automation.action_subtype.${
+        action.subtype
+      }`
+    )
+  );
+};
+
 export const localizeDeviceAutomationCondition = (
   hass: HomeAssistant,
   condition: DeviceCondition

src/data/script.ts

@@ -7,6 +7,12 @@ export interface EventAction {
   event_data_template?: { [key: string]: any };
 }
 
+export interface DeviceAction {
+  device_id: string;
+  domain: string;
+  entity_id: string;
+}
+
 export const triggerScript = (
   hass: HomeAssistant,
   entityId: string,

src/panels/config/js/preact-types.ts

@@ -23,6 +23,7 @@ declare global {
       "ha-service-picker": any;
       "mwc-button": any;
       "ha-device-trigger-picker": any;
+      "ha-device-action-picker": any;
     }
   }
 }

src/panels/config/js/script/action_edit.tsx

@@ -6,6 +6,7 @@ import "@polymer/paper-item/paper-item";
 import CallServiceAction from "./call_service";
 import ConditionAction from "./condition";
 import DelayAction from "./delay";
+import DeviceAction from "./device";
 import EventAction from "./event";
 import WaitAction from "./wait";
 
@@ -15,6 +16,7 @@ const TYPES = {
   wait_template: WaitAction,
   condition: ConditionAction,
   event: EventAction,
+  device_id: DeviceAction,
 };
 
 const OPTIONS = Object.keys(TYPES).sort();

src/panels/config/js/script/device.tsx

@@ -0,0 +1,63 @@
+import { h, Component } from "preact";
+
+import "../../../../components/device/ha-device-picker";
+import "../../../../components/device/ha-device-action-picker";
+import { HomeAssistant } from "../../../../types";
+import { DeviceAction } from "../../../../data/script";
+
+export default class DeviceActionEditor extends Component<
+  {
+    index: number;
+    action: DeviceAction;
+    hass: HomeAssistant;
+    onChange(index: number, action: DeviceAction);
+  },
+  {
+    device_id: string | undefined;
+  }
+> {
+  public static defaultConfig: DeviceAction = {
+    device_id: "",
+    domain: "",
+    entity_id: "",
+  };
+
+  constructor() {
+    super();
+    this.devicePicked = this.devicePicked.bind(this);
+    this.deviceActionPicked = this.deviceActionPicked.bind(this);
+    this.state = { device_id: undefined };
+  }
+
+  public render() {
+    const { action, hass } = this.props;
+    const deviceId = this.state.device_id || action.device_id;
+
+    return (
+      <div>
+        <ha-device-picker
+          value={deviceId}
+          onChange={this.devicePicked}
+          hass={hass}
+          label="Device"
+        />
+        <ha-device-action-picker
+          value={action}
+          deviceId={deviceId}
+          onChange={this.deviceActionPicked}
+          hass={hass}
+          label="Action"
+        />
+      </div>
+    );
+  }
+
+  private devicePicked(ev) {
+    this.setState({ device_id: ev.target.value });
+  }
+
+  private deviceActionPicked(ev) {
+    const deviceAction = { ...ev.target.value };
+    this.props.onChange(this.props.index, deviceAction);
+  }
+}

src/panels/config/js/trigger/device.tsx

@@ -2,7 +2,6 @@ import { h, Component } from "preact";
 
 import "../../../../components/device/ha-device-picker";
 import "../../../../components/device/ha-device-trigger-picker";
-import "../../../../components/device/ha-device-automation-picker";
 
 export default class DeviceTrigger extends Component<any, any> {
   constructor() {

src/translations/en.json

@@ -871,6 +871,9 @@
                   "label": "Fire event",
                   "event": "[%key:ui::panel::config::automation::editor::triggers::type::homeassistant::event%]",
                   "service_data": "[%key:ui::panel::config::automation::editor::actions::type::service::service_data%]"
+                },
+                "device_id": {
+                  "label": "Device"
                 }
               }
             }