Some fixes for automation picker and editor (#13634)

src/components/ha-icon-overflow-menu.ts

@@ -17,7 +17,7 @@ export interface IconOverflowMenuItem {
   narrowOnly?: boolean;
   disabled?: boolean;
   tooltip?: string;
-  onClick: CallableFunction;
+  action: () => any;
   warning?: boolean;
 }
 
@@ -50,7 +50,7 @@ export class HaIconOverflowMenu extends LitElement {
                 (item) => html`
                   <mwc-list-item
                     graphic="icon"
-                    .disabled=${item.disabled}
+                    ?disabled=${item.disabled}
                     @click=${item.action}
                     class=${classMap({ warning: Boolean(item.warning) })}
                   >
@@ -80,7 +80,7 @@ export class HaIconOverflowMenu extends LitElement {
                       @click=${item.action}
                       .label=${item.label}
                       .path=${item.path}
-                      .disabled=${item.disabled}
+                      ?disabled=${item.disabled}
                     ></ha-icon-button>
                   </div> `
             )}

src/data/automation.ts

@@ -314,11 +314,25 @@ let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
 export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
   hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);
 
+export const saveAutomationConfig = (
+  hass: HomeAssistant,
+  id: string,
+  config: AutomationConfig
+) => hass.callApi<void>("POST", `config/automation/config/${id}`, config);
+
 export const showAutomationEditor = (data?: Partial<AutomationConfig>) => {
   inititialAutomationEditorData = data;
   navigate("/config/automation/edit/new");
 };
 
+export const duplicateAutomation = (config: AutomationConfig) => {
+  showAutomationEditor({
+    ...config,
+    id: undefined,
+    alias: undefined,
+  });
+};
+
 export const getAutomationEditorInitData = () => {
   const data = inititialAutomationEditorData;
   inititialAutomationEditorData = undefined;

src/panels/config/automation/ha-automation-editor.ts

@@ -45,6 +45,7 @@ import {
   deleteAutomation,
   getAutomationConfig,
   getAutomationEditorInitData,
+  saveAutomationConfig,
   showAutomationEditor,
   triggerAutomationActions,
 } from "../../../data/automation";
@@ -203,7 +204,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 <mwc-list-item
                   graphic="icon"
                   @click=${this._promptAutomationMode}
-                  .disabled=${!this.automationId || this._mode === "yaml"}
+                  .disabled=${this._mode === "yaml"}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.change_mode"
@@ -452,7 +453,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       this._dirty = false;
       this._config = config;
     } catch (err: any) {
-      showAlertDialog(this, {
+      await showAlertDialog(this, {
         text:
           err.status_code === 404
             ? this.hass.localize(
@@ -463,7 +464,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 "err_no",
                 err.status_code
               ),
-      }).then(() => history.back());
+      });
+      history.back();
     }
   }
 
@@ -582,8 +584,10 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _delete() {
-    await deleteAutomation(this.hass, this.automationId as string);
-    history.back();
+    if (this.automationId) {
+      await deleteAutomation(this.hass, this.automationId);
+      history.back();
+    }
   }
 
   private _switchUiMode() {
@@ -636,26 +640,21 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       await this._promptAutomationAlias();
     }
 
-    this.hass!.callApi(
-      "POST",
-      "config/automation/config/" + id,
-      this._config
-    ).then(
-      () => {
-        this._dirty = false;
+    try {
+      await saveAutomationConfig(this.hass, id, this._config!);
+    } catch (errors: any) {
+      this._errors = errors.body.message || errors.error || errors.body;
+      showToast(this, {
+        message: errors.body.message || errors.error || errors.body,
+      });
+      throw errors;
+    }
 
-        if (!this.automationId) {
-          navigate(`/config/automation/edit/${id}`, { replace: true });
-        }
-      },
-      (errors) => {
-        this._errors = errors.body.message || errors.error || errors.body;
-        showToast(this, {
-          message: errors.body.message || errors.error || errors.body,
-        });
-        throw errors;
-      }
-    );
+    this._dirty = false;
+
+    if (!this.automationId) {
+      navigate(`/config/automation/edit/${id}`, { replace: true });
+    }
   }
 
   private _subscribeAutomationConfig(ev) {

src/panels/config/automation/ha-automation-picker.ts

@@ -33,8 +33,8 @@ import "../../../components/ha-svg-icon";
 import {
   AutomationEntity,
   deleteAutomation,
+  duplicateAutomation,
   getAutomationConfig,
-  showAutomationEditor,
   triggerAutomationActions,
 } from "../../../data/automation";
 import {
@@ -348,19 +348,45 @@ class HaAutomationPicker extends LitElement {
   }
 
   private async _delete(automation) {
-    await deleteAutomation(this.hass, automation.attributes.id);
+    try {
+      await deleteAutomation(this.hass, automation.attributes.id);
+    } catch (err: any) {
+      await showAlertDialog(this, {
+        text:
+          err.status_code === 400
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.load_error_not_deletable"
+              )
+            : this.hass.localize(
+                "ui.panel.config.automation.editor.load_error_unknown",
+                "err_no",
+                err.status_code
+              ),
+      });
+    }
   }
 
   private async duplicate(automation) {
-    const config = await getAutomationConfig(
-      this.hass,
-      automation.attributes.id
-    );
-    showAutomationEditor({
-      ...config,
-      id: undefined,
-      alias: undefined,
-    });
+    try {
+      const config = await getAutomationConfig(
+        this.hass,
+        automation.attributes.id
+      );
+      duplicateAutomation(config);
+    } catch (err: any) {
+      await showAlertDialog(this, {
+        text:
+          err.status_code === 404
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.load_error_not_duplicable"
+              )
+            : this.hass.localize(
+                "ui.panel.config.automation.editor.load_error_unknown",
+                "err_no",
+                err.status_code
+              ),
+      });
+    }
   }
 
   private _showHelp() {
@@ -389,7 +415,7 @@ class HaAutomationPicker extends LitElement {
     );
 
     if (automation?.attributes.id) {
-      navigate(`/config/automation/edit/${automation?.attributes.id}`);
+      navigate(`/config/automation/edit/${automation.attributes.id}`);
     }
   }
 

src/translations/en.json

@@ -1828,6 +1828,8 @@
             "default_name": "New Automation",
             "missing_name": "Cannot save automation without a name",
             "load_error_not_editable": "Only automations in automations.yaml are editable.",
+            "load_error_not_duplicable": "Only automations in automations.yaml can be duplicated.",
+            "load_error_not_deletable": "Only automations in automations.yaml can be deleted.",
             "load_error_unknown": "Error loading automation ({err_no}).",
             "save": "Save",
             "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",