use checkbox icons

src/data/automation.ts

@@ -629,6 +629,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
   save: (value: Action) => void;
   rename: () => void;
   disable: () => void;
+  continueOnError: () => void;
   duplicate: () => void;
   cut: () => void;
   copy: () => void;

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -4,7 +4,10 @@ import {
   mdiAlertCircleCheck,
   mdiAppleKeyboardCommand,
   mdiArrowDown,
+  mdiArrowRightThin,
   mdiArrowUp,
+  mdiCheckboxBlankOutline,
+  mdiCheckboxOutline,
   mdiContentCopy,
   mdiContentCut,
   mdiDelete,
@@ -20,7 +23,7 @@ import deepClone from "deep-clone-simple";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
 import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, html, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../../../common/array/ensure-array";
@@ -35,6 +38,7 @@ import "../../../../components/ha-automation-row";
 import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-dropdown";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
@@ -91,7 +95,6 @@ import "./types/ha-automation-action-set_conversation_response";
 import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
-import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 export const getAutomationActionType = memoizeOne(
   (action: Action | undefined) => {
@@ -263,24 +266,26 @@ export default class HaAutomationActionRow extends LitElement {
           describeAction(this.hass, this._entityReg, this.action)
         )}
         ${target ? this._renderTargets(target) : nothing}
+        ${type !== "condition" &&
+        (this.action as NonConditionAction).continue_on_error === true
+          ? html`<ha-svg-icon
+                class="arrow-right"
+                .path=${mdiArrowRightThin}
+              ></ha-svg-icon
+              ><ha-svg-icon
+                id="svg-icon"
+                .path=${mdiAlertCircleCheck}
+              ></ha-svg-icon>
+              <ha-tooltip for="svg-icon">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.continue_on_error"
+                )}
+              </ha-tooltip>`
+          : nothing}
       </h3>
 
       <slot name="icons" slot="icons"></slot>
 
-      ${type !== "condition" &&
-      (this.action as NonConditionAction).continue_on_error === true
-        ? html`<ha-svg-icon
-              id="svg-icon"
-              slot="icons"
-              .path=${mdiAlertCircleCheck}
-            ></ha-svg-icon>
-            <ha-tooltip for="svg-icon">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.continue_on_error"
-              )}
-            </ha-tooltip>`
-        : nothing}
-
       <ha-dropdown
         slot="icons"
         @click=${preventDefaultStopPropagation}
@@ -417,6 +422,27 @@ export default class HaAutomationActionRow extends LitElement {
             )
           )}
         </ha-dropdown-item>
+
+        ${type !== "condition"
+          ? html`<ha-dropdown-item
+                value="continue_on_error"
+                .disabled=${this.disabled}
+              >
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${(this.action as NonConditionAction).continue_on_error
+                    ? mdiCheckboxOutline
+                    : mdiCheckboxBlankOutline}
+                ></ha-svg-icon>
+                ${this._renderOverflowLabel(
+                  this.hass.localize(
+                    `ui.panel.config.automation.editor.actions.continue_on_error`
+                  )
+                )}
+              </ha-dropdown-item>
+              <wa-divider></wa-divider>`
+          : nothing}
+
         <ha-dropdown-item
           value="delete"
           variant="danger"
@@ -589,6 +615,25 @@ export default class HaAutomationActionRow extends LitElement {
     }
   };
 
+  private _continueOnError = () => {
+    const value = { ...this.action };
+
+    if ((value as NonConditionAction).continue_on_error) {
+      delete (value as NonConditionAction).continue_on_error;
+    } else {
+      (value as NonConditionAction).continue_on_error = true;
+    }
+
+    fireEvent(this, "value-changed", { value });
+
+    if (this._selected && this.optionsInSidebar) {
+      this.openSidebar(value); // refresh sidebar
+    }
+    if (this._yamlMode && !this.optionsInSidebar) {
+      this._actionEditor?.yamlEditor?.setValue(value);
+    }
+  };
+
   private _runAction = async () => {
     requestAnimationFrame(() => {
       // @ts-ignore is supported in all browsers except firefox
@@ -790,6 +835,7 @@ export default class HaAutomationActionRow extends LitElement {
         this.openSidebar();
       },
       disable: this._onDisable,
+      continueOnError: this._continueOnError,
       delete: this._onDelete,
       copy: this._copyAction,
       cut: this._cutAction,
@@ -898,13 +944,30 @@ export default class HaAutomationActionRow extends LitElement {
       case "disable":
         this._onDisable();
         break;
+      case "continue_on_error":
+        this._continueOnError();
+        break;
       case "delete":
         this._onDelete();
         break;
     }
   }
 
-  static styles = [rowStyles, overflowStyles];
+  static styles = [
+    rowStyles,
+    overflowStyles,
+    css`
+      ha-svg-icon.arrow-right {
+        --icon-primary-color: var(--ha-color-fill-neutral-normal-resting);
+      }
+      ha-svg-icon#svg-icon {
+        --icon-primary-color: var(--ha-color-fill-neutral-loud-active);
+      }
+      ha-svg-icon#svg-icon:hover {
+        --icon-primary-color: var(--ha-color-fill-neutral-loud-hover);
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts

@@ -1,6 +1,8 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiAppleKeyboardCommand,
+  mdiCheckboxBlankOutline,
+  mdiCheckboxOutline,
   mdiContentCopy,
   mdiContentCut,
   mdiDelete,
@@ -14,14 +16,20 @@ import {
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
+import { STRINGS_SEPARATOR_DOT } from "../../../../common/const";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import { ACTION_BUILDING_BLOCKS } from "../../../../data/action";
 import type { ActionSidebarConfig } from "../../../../data/automation";
 import { domainToName } from "../../../../data/integration";
-import type { RepeatAction, ServiceAction } from "../../../../data/script";
+import type {
+  NonConditionAction,
+  RepeatAction,
+  ServiceAction,
+} from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
@@ -29,7 +37,6 @@ import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
-import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-action")
 export default class HaAutomationSidebarAction extends LitElement {
@@ -125,7 +132,12 @@ export default class HaAutomationSidebarAction extends LitElement {
           ? html` (${this.hass.localize(
               "ui.panel.config.automation.editor.actions.disabled"
             )})`
-          : ""}</span
+          : ""}${type !== "condition" &&
+        (this.config.config.action as NonConditionAction).continue_on_error
+          ? `${STRINGS_SEPARATOR_DOT}${this.hass.localize(
+              "ui.panel.config.automation.editor.actions.continue_on_error"
+            )}`
+          : nothing}</span
       >
 
       <ha-dropdown-item slot="menu-items" value="run">
@@ -247,6 +259,28 @@ export default class HaAutomationSidebarAction extends LitElement {
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
       </ha-dropdown-item>
+      ${type !== "condition"
+        ? html`<ha-dropdown-item
+              slot="menu-items"
+              value="continue_on_error"
+              .disabled=${this.disabled}
+            >
+              <ha-svg-icon
+                slot="icon"
+                .path=${(this.config.config.action as NonConditionAction)
+                  .continue_on_error
+                  ? mdiCheckboxOutline
+                  : mdiCheckboxBlankOutline}
+              ></ha-svg-icon>
+              <div class="overflow-label">
+                ${this.hass.localize(
+                  `ui.panel.config.automation.editor.actions.continue_on_error`
+                )}
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+              </div>
+            </ha-dropdown-item>
+            <wa-divider></wa-divider>`
+        : nothing}
       <ha-dropdown-item
         slot="menu-items"
         value="delete"
@@ -363,6 +397,9 @@ export default class HaAutomationSidebarAction extends LitElement {
       case "disable":
         this.config.disable();
         break;
+      case "continue_on_error":
+        this.config.continueOnError();
+        break;
       case "delete":
         this.config.delete();
         break;