Create helpers from automation editor (#19287)

* Create helpers from automation editor

* support multiple createDomains

* localization

* fix lint

* Move multi domain to entity picker

* Update dialog-helper-detail.ts

* Update ha-config-helpers.ts

* optimize a little

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/entity/ha-entity-picker.ts

@@ -18,6 +18,12 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
+import { domainToName } from "../../data/integration";
+import {
+  isHelperDomain,
+  HelperDomain,
+} from "../../panels/config/helpers/const";
 
 interface HassEntityWithCachedName extends HassEntity, ScorableTextItem {
   friendly_name: string;
@@ -25,6 +31,8 @@ interface HassEntityWithCachedName extends HassEntity, ScorableTextItem {
 
 export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
+const CREATE_ID = "___create-new-entity___";
+
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -44,6 +52,8 @@ export class HaEntityPicker extends LitElement {
 
   @property() public helper?: string;
 
+  @property({ type: Array }) public createDomains?: string[];
+
   /**
    * Show entities from specific domains.
    * @type {Array}
@@ -130,7 +140,11 @@ export class HaEntityPicker extends LitElement {
           ></state-badge>`
         : ""}
       <span>${item.friendly_name}</span>
-      <span slot="secondary">${item.entity_id}</span>
+      <span slot="secondary"
+        >${item.entity_id.startsWith(CREATE_ID)
+          ? this.hass.localize("ui.components.entity.entity-picker.new_entity")
+          : item.entity_id}</span
+      >
     </ha-list-item>`;
 
   private _getStates = memoizeOne(
@@ -143,7 +157,8 @@ export class HaEntityPicker extends LitElement {
       includeDeviceClasses: this["includeDeviceClasses"],
       includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
       includeEntities: this["includeEntities"],
-      excludeEntities: this["excludeEntities"]
+      excludeEntities: this["excludeEntities"],
+      createDomains: this["createDomains"]
     ): HassEntityWithCachedName[] => {
       let states: HassEntityWithCachedName[] = [];
 
@@ -152,6 +167,34 @@ export class HaEntityPicker extends LitElement {
       }
       let entityIds = Object.keys(hass.states);
 
+      const createItems = createDomains?.length
+        ? createDomains.map((domain) => {
+            const newFriendlyName = hass.localize(
+              "ui.components.entity.entity-picker.create_helper",
+              {
+                domain: isHelperDomain(domain)
+                  ? hass.localize(
+                      `ui.panel.config.helpers.types.${domain as HelperDomain}`
+                    )
+                  : domainToName(hass.localize, domain),
+              }
+            );
+
+            return {
+              entity_id: CREATE_ID + domain,
+              state: "on",
+              last_changed: "",
+              last_updated: "",
+              context: { id: "", user_id: null, parent_id: null },
+              friendly_name: newFriendlyName,
+              attributes: {
+                icon: "mdi:plus",
+              },
+              strings: [domain, newFriendlyName],
+            };
+          })
+        : [];
+
       if (!entityIds.length) {
         return [
           {
@@ -171,6 +214,7 @@ export class HaEntityPicker extends LitElement {
             },
             strings: [],
           },
+          ...createItems,
         ];
       }
 
@@ -281,9 +325,14 @@ export class HaEntityPicker extends LitElement {
             },
             strings: [],
           },
+          ...createItems,
         ];
       }
 
+      if (createItems?.length) {
+        states.push(...createItems);
+      }
+
       return states;
     }
   );
@@ -310,13 +359,18 @@ export class HaEntityPicker extends LitElement {
         this.includeDeviceClasses,
         this.includeUnitOfMeasurement,
         this.includeEntities,
-        this.excludeEntities
+        this.excludeEntities,
+        this.createDomains
       );
       if (this._initedStates) {
         this.comboBox.filteredItems = this._states;
       }
       this._initedStates = true;
     }
+
+    if (changedProps.has("createDomains") && this.createDomains?.length) {
+      this.hass.loadFragmentTranslation("config");
+    }
   }
 
   protected render(): TemplateResult {
@@ -354,6 +408,18 @@ export class HaEntityPicker extends LitElement {
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
+
+    if (newValue.startsWith(CREATE_ID)) {
+      const domain = newValue.substring(CREATE_ID.length);
+      showHelperDetailDialog(this, {
+        domain,
+        dialogClosedCallback: (item) => {
+          if (item.entityId) this._setValue(item.entityId);
+        },
+      });
+      return;
+    }
+
     if (newValue !== this._value) {
       this._setValue(newValue);
     }

src/components/ha-selector/ha-selector-target.ts

@@ -82,6 +82,7 @@ export class HaTargetSelector extends LitElement {
       .deviceFilter=${this._filterDevices}
       .entityFilter=${this._filterEntities}
       .disabled=${this.disabled}
+      .createDomains=${this.selector.target?.create_domains}
     ></ha-target-picker>`;
   }
 

src/components/ha-service-control.ts

@@ -33,6 +33,7 @@ import {
   expandFloorTarget,
   expandLabelTarget,
   Selector,
+  TargetSelector,
 } from "../data/selector";
 import { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
@@ -43,6 +44,7 @@ import "./ha-service-picker";
 import "./ha-settings-row";
 import "./ha-yaml-editor";
 import type { HaYamlEditor } from "./ha-yaml-editor";
+import { isHelperDomain } from "../panels/config/helpers/const";
 
 const attributeFilter = (values: any[], attribute: any) => {
   if (typeof attribute === "object") {
@@ -363,6 +365,15 @@ export class HaServiceControl extends LitElement {
     return false;
   }
 
+  private _targetSelector = memoizeOne(
+    (targetSelector: TargetSelector | null | undefined, domain?: string) => {
+      const create_domains = isHelperDomain(domain) ? [domain] : undefined;
+      return targetSelector
+        ? { target: { ...targetSelector, create_domains } }
+        : { target: { create_domains } };
+    }
+  );
+
   protected render() {
     const serviceData = this._getServiceInfo(
       this._value?.service,
@@ -401,8 +412,7 @@ export class HaServiceControl extends LitElement {
         )) ||
       serviceData?.description;
 
-    return html`
-      ${this.hidePicker
+    return html`${this.hidePicker
       ? nothing
       : html`<ha-service-picker
           .hass=${this.hass}
@@ -443,9 +453,7 @@ export class HaServiceControl extends LitElement {
             ? html`<div slot="prefix" class="checkbox-spacer"></div>`
             : ""}
           <span slot="heading"
-              >${this.hass.localize(
-                "ui.components.service-control.target"
-              )}</span
+            >${this.hass.localize("ui.components.service-control.target")}</span
           >
           <span slot="description"
             >${this.hass.localize(
@@ -453,9 +461,10 @@ export class HaServiceControl extends LitElement {
             )}</span
           ><ha-selector
             .hass=${this.hass}
-              .selector=${serviceData.target
-                ? { target: serviceData.target }
-                : { target: {} }}
+            .selector=${this._targetSelector(
+              serviceData.target as TargetSelector,
+              domain
+            )}
             .disabled=${this.disabled}
             @value-changed=${this._targetChanged}
             .value=${this._value?.target}
@@ -485,11 +494,9 @@ export class HaServiceControl extends LitElement {
       : filteredFields?.map((dataField) => {
           const selector = dataField?.selector ?? { text: undefined };
           const type = Object.keys(selector)[0];
-            const enhancedSelector = [
-              "action",
-              "condition",
-              "trigger",
-            ].includes(type)
+          const enhancedSelector = ["action", "condition", "trigger"].includes(
+            type
+          )
             ? {
                 [type]: {
                   ...selector[type],
@@ -550,8 +557,7 @@ export class HaServiceControl extends LitElement {
                 ></ha-selector>
               </ha-settings-row>`
             : "";
-          })}
-    `;
+        })} `;
   }
 
   private _localizeValueCallback = (key: string) => {

src/components/ha-target-picker.ts

@@ -65,6 +65,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
+  @property({ type: Array }) public createDomains?: string[];
+
   /**
    * Show only targets with entities from specific domains.
    * @type {Array}
@@ -468,6 +470,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                   .includeDeviceClasses=${this.includeDeviceClasses}
                   .includeDomains=${this.includeDomains}
                   .excludeEntities=${ensureArray(this.value?.entity_id)}
+                  .createDomains=${this.createDomains}
                   @value-changed=${this._targetPicked}
                   @click=${this._preventDefault}
                   allow-custom-entity

src/data/selector.ts

@@ -401,6 +401,7 @@ export interface TargetSelector {
   target: {
     entity?: EntitySelectorFilter | readonly EntitySelectorFilter[];
     device?: DeviceSelectorFilter | readonly DeviceSelectorFilter[];
+    create_domains?: string[];
   } | null;
 }
 

src/panels/config/helpers/dialog-helper-detail.ts

@@ -32,7 +32,7 @@ import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-c
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
-import { Helper, HelperDomain } from "./const";
+import { Helper, HelperDomain, isHelperDomain } from "./const";
 import type { ShowDialogHelperDetailParams } from "./show-dialog-helper-detail";
 
 type HelperCreators = {
@@ -96,7 +96,7 @@ export class DialogHelperDetail extends LitElement {
 
   @state() private _opened = false;
 
-  @state() private _domain?: HelperDomain;
+  @state() private _domain?: string;
 
   @state() private _error?: string;
 
@@ -114,8 +114,12 @@ export class DialogHelperDetail extends LitElement {
     this._params = params;
     this._domain = params.domain;
     this._item = undefined;
+    if (this._domain && this._domain in HELPERS) {
+      await HELPERS[this._domain].import();
+    }
     this._opened = true;
     await this.updateComplete;
+    this.hass.loadFragmentTranslation("config");
     Promise.all([
       getConfigFlowHandlers(this.hass, ["helper"]),
       // Ensure the titles are loaded before we render the flows.
@@ -155,13 +159,15 @@ export class DialogHelperDetail extends LitElement {
         >
           ${this.hass!.localize("ui.panel.config.helpers.dialog.create")}
         </mwc-button>
-        <mwc-button
+        ${this._params?.domain
+          ? nothing
+          : html`<mwc-button
               slot="secondaryAction"
               @click=${this._goBack}
               .disabled=${this._submitting}
             >
               ${this.hass!.localize("ui.common.back")}
-        </mwc-button>
+            </mwc-button>`}
       `;
     } else if (this._loading || this._helperFlows === undefined) {
       content = html`<ha-circular-progress
@@ -253,9 +259,13 @@ export class DialogHelperDetail extends LitElement {
                 "ui.panel.config.helpers.dialog.create_platform",
                 {
                   platform:
+                    (isHelperDomain(this._domain) &&
                       this.hass.localize(
-                      `ui.panel.config.helpers.types.${this._domain}`
-                    ) || this._domain,
+                        `ui.panel.config.helpers.types.${
+                          this._domain as HelperDomain
+                        }`
+                      )) ||
+                    this._domain,
                 }
               )
             : this.hass.localize("ui.panel.config.helpers.dialog.create_helper")
@@ -277,7 +287,16 @@ export class DialogHelperDetail extends LitElement {
     this._submitting = true;
     this._error = "";
     try {
-      await HELPERS[this._domain].create(this.hass, this._item);
+      const createdEntity = await HELPERS[this._domain].create(
+        this.hass,
+        this._item
+      );
+      if (this._params?.dialogClosedCallback && createdEntity.id) {
+        this._params.dialogClosedCallback({
+          flowFinished: true,
+          entityId: `${this._domain}.${createdEntity.id}`,
+        });
+      }
       this.closeDialog();
     } catch (err: any) {
       this._error = err.message || "Unknown error";

src/panels/config/helpers/show-dialog-helper-detail.ts

@@ -1,13 +1,14 @@
 import { fireEvent } from "../../../common/dom/fire_event";
-import { DataEntryFlowDialogParams } from "../../../dialogs/config-flow/show-dialog-data-entry-flow";
-import { HelperDomain } from "./const";
 
 export const loadHelperDetailDialog = () => import("./dialog-helper-detail");
 
 export interface ShowDialogHelperDetailParams {
-  domain?: HelperDomain;
-  // Only used for config entries
-  dialogClosedCallback?: DataEntryFlowDialogParams["dialogClosedCallback"];
+  domain?: string;
+  dialogClosedCallback?: (params: {
+    flowFinished: boolean;
+    entryId?: string;
+    entityId?: string;
+  }) => void;
 }
 
 export const showHelperDetailDialog = (

src/translations/en.json

@@ -472,7 +472,9 @@
           "clear": "Clear",
           "no_entities": "You don't have any entities",
           "no_match": "No matching entities found",
-          "show_entities": "Show entities"
+          "show_entities": "Show entities",
+          "new_entity": "Create a new entity",
+          "create_helper": "Create a new {domain, select, \n undefined {} \n other {{domain} }\n } helper."
         },
         "entity-attribute-picker": {
           "attribute": "Attribute",