Use icons in add trigger/condition/action menus (#13452)

src/data/action.ts

@@ -1,16 +1,32 @@
-export const ACTION_TYPES = [
+import {
-  "condition",
+  mdiAbTesting,
-  "delay",
+  mdiArrowDecision,
-  "event",
+  mdiCallSplit,
-  "play_media",
+  mdiChevronRight,
-  "activate_scene",
+  mdiCloseOctagon,
-  "service",
+  mdiDevices,
-  "wait_template",
+  mdiExclamation,
-  "wait_for_trigger",
+  mdiPalette,
-  "repeat",
+  mdiPlay,
-  "choose",
+  mdiRefresh,
-  "if",
+  mdiShuffleDisabled,
-  "device_id",
+  mdiTimerOutline,
-  "stop",
+  mdiTrafficLight,
-  "parallel",
+} from "@mdi/js";
-];
+
+export const ACTION_TYPES = {
+  condition: mdiAbTesting,
+  delay: mdiTimerOutline,
+  event: mdiExclamation,
+  play_media: mdiPlay,
+  activate_scene: mdiPalette,
+  service: mdiChevronRight,
+  wait_template: mdiTrafficLight,
+  wait_for_trigger: mdiTrafficLight,
+  repeat: mdiRefresh,
+  choose: mdiArrowDecision,
+  if: mdiCallSplit,
+  device_id: mdiDevices,
+  stop: mdiCloseOctagon,
+  parallel: mdiShuffleDisabled,
+};

src/data/condition.ts

@@ -1,15 +1,27 @@
-import type { Condition } from "./automation";
+import {
+  mdiAmpersand,
+  mdiCancel,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiExclamation,
+  mdiGateOr,
+  mdiMapMarkerRadius,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiWeatherSunny,
+} from "@mdi/js";
 
-export const CONDITION_TYPES: Condition["condition"][] = [
+export const CONDITION_TYPES = {
-  "device",
+  device: mdiDevices,
-  "and",
+  and: mdiAmpersand,
-  "or",
+  or: mdiGateOr,
-  "not",
+  not: mdiCancel,
-  "state",
+  state: mdiStateMachine,
-  "numeric_state",
+  numeric_state: mdiNumeric,
-  "sun",
+  sun: mdiWeatherSunny,
-  "template",
+  template: mdiCodeBraces,
-  "time",
+  time: mdiClockOutline,
-  "trigger",
+  trigger: mdiExclamation,
-  "zone",
+  zone: mdiMapMarkerRadius,
-];
+};

src/data/trigger.ts

@@ -1,19 +1,35 @@
-import type { Trigger } from "./automation";
+import {
+  mdiAvTimer,
+  mdiCalendar,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiExclamation,
+  mdiHomeAssistant,
+  mdiMapMarker,
+  mdiMapMarkerRadius,
+  mdiNfcVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiSwapHorizontal,
+  mdiWeatherSunny,
+  mdiWebhook,
+} from "@mdi/js";
 
-export const TRIGGER_TYPES: Trigger["platform"][] = [
+export const TRIGGER_TYPES = {
-  "calendar",
+  calendar: mdiCalendar,
-  "device",
+  device: mdiDevices,
-  "event",
+  event: mdiExclamation,
-  "state",
+  state: mdiStateMachine,
-  "geo_location",
+  geo_location: mdiMapMarker,
-  "homeassistant",
+  homeassistant: mdiHomeAssistant,
-  "mqtt",
+  mqtt: mdiSwapHorizontal,
-  "numeric_state",
+  numeric_state: mdiNumeric,
-  "sun",
+  sun: mdiWeatherSunny,
-  "tag",
+  tag: mdiNfcVariant,
-  "template",
+  template: mdiCodeBraces,
-  "time",
+  time: mdiClockOutline,
-  "time_pattern",
+  time_pattern: mdiAvTimer,
-  "webhook",
+  webhook: mdiWebhook,
-  "zone",
+  zone: mdiMapMarkerRadius,
-];
+};

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

@@ -51,7 +51,7 @@ const getType = (action: Action | undefined) => {
   if (["and", "or", "not"].some((key) => key in action)) {
     return "condition";
   }
-  return ACTION_TYPES.find((option) => option in action);
+  return Object.keys(ACTION_TYPES).find((option) => option in action);
 };
 
 declare global {

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

@@ -73,8 +73,10 @@ export default class HaAutomationAction extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
+          ([opt, label, icon]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -104,9 +106,7 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _addAction(ev: CustomEvent<ActionDetail>) {
-    const action = (ev.currentTarget as HaSelect).items[ev.detail.index]
+    const action = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
-      .value as typeof ACTION_TYPES[number];
-
     const elClass = customElements.get(
       `ha-automation-action-${action}`
     ) as CustomElementConstructor & { defaultConfig: Action };
@@ -158,16 +158,19 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
+    (localize: LocalizeFunc): [string, string, string][] =>
-      ACTION_TYPES.map(
+      Object.entries(ACTION_TYPES)
-        (action) =>
+        .map(
-          [
+          ([action, icon]) =>
-            action,
+            [
-            localize(
+              action,
-              `ui.panel.config.automation.editor.actions.type.${action}.label`
+              localize(
-            ),
+                `ui.panel.config.automation.editor.actions.type.${action}.label`
-          ] as [string, string]
+              ),
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {

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

@@ -34,8 +34,10 @@ export class HaConditionAction extends LitElement implements ActionElement {
         @selected=${this._typeChanged}
       >
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
+          ([opt, label, icon]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-select>
@@ -48,16 +50,19 @@ export class HaConditionAction extends LitElement implements ActionElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
+    (localize: LocalizeFunc): [string, string, string][] =>
-      CONDITION_TYPES.map(
+      Object.entries(CONDITION_TYPES)
-        (condition) =>
+        .map(
-          [
+          ([condition, icon]) =>
-            condition,
+            [
-            localize(
+              condition,
-              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+              localize(
-            ),
+                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
-          ] as [string, string]
+              ),
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   private _conditionChanged(ev: CustomEvent) {

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

@@ -103,8 +103,10 @@ export default class HaAutomationCondition extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
+          ([opt, label, icon]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -165,16 +167,19 @@ export default class HaAutomationCondition extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
+    (localize: LocalizeFunc): [string, string, string][] =>
-      CONDITION_TYPES.map(
+      Object.entries(CONDITION_TYPES)
-        (condition) =>
+        .map(
-          [
+          ([condition, icon]) =>
-            condition,
+            [
-            localize(
+              condition,
-              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+              localize(
-            ),
+                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
-          ] as [string, string]
+              ),
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {

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

@@ -69,8 +69,10 @@ export default class HaAutomationTrigger extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
+          ([opt, label, icon]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -145,16 +147,19 @@ export default class HaAutomationTrigger extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
+    (localize: LocalizeFunc): [string, string, string][] =>
-      TRIGGER_TYPES.map(
+      Object.entries(TRIGGER_TYPES)
-        (action) =>
+        .map(
-          [
+          ([action, icon]) =>
-            action,
+            [
-            localize(
+              action,
-              `ui.panel.config.automation.editor.triggers.type.${action}.label`
+              localize(
-            ),
+                `ui.panel.config.automation.editor.triggers.type.${action}.label`
-          ] as [string, string]
+              ),
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {