Revert accidental added draft changes

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20220901.0"
+version      = "20220902.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

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

@@ -3,6 +3,8 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./ha-button-menu";
 import "./ha-icon-button";
@@ -16,6 +18,7 @@ export interface IconOverflowMenuItem {
   disabled?: boolean;
   tooltip?: string;
   onClick: CallableFunction;
+  warning?: boolean;
 }
 
 @customElement("ha-icon-overflow-menu")
@@ -49,9 +52,13 @@ export class HaIconOverflowMenu extends LitElement {
                     graphic="icon"
                     .disabled=${item.disabled}
                     @click=${item.action}
+                    class=${classMap({ warning: Boolean(item.warning) })}
                   >
                     <div slot="graphic">
-                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
+                      <ha-svg-icon
+                        class=${classMap({ warning: Boolean(item.warning) })}
+                        .path=${item.path}
+                      ></ha-svg-icon>
                     </div>
                     ${item.label}
                   </mwc-list-item>
@@ -81,7 +88,8 @@ export class HaIconOverflowMenu extends LitElement {
     `;
   }
 
-  protected _handleIconOverflowMenuOpened() {
+  protected _handleIconOverflowMenuOpened(e) {
+    e.stopPropagation();
     // If this component is used inside a data table, the z-index of the row
     // needs to be increased. Otherwise the ha-button-menu would be displayed
     // underneath the next row in the table.
@@ -99,12 +107,15 @@ export class HaIconOverflowMenu extends LitElement {
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-        justify-content: flex-end;
-      }
-    `;
+    return [
+      haStyle,
+      css`
+        :host {
+          display: flex;
+          justify-content: flex-end;
+        }
+      `,
+    ];
   }
 }
 

src/data/automation_i18n.ts

@@ -1,4 +1,5 @@
 import secondsToDuration from "../common/datetime/seconds_to_duration";
+import { ensureArray } from "../common/ensure-array";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
@@ -74,7 +75,7 @@ export const describeTrigger = (
   }
 
   // State Trigger
-  if (trigger.platform === "state" && trigger.entity_id) {
+  if (trigger.platform === "state") {
     let base = "When";
     let entities = "";
 
@@ -95,12 +96,17 @@ export const describeTrigger = (
           } ${computeStateName(states[entity]) || entity}`;
         }
       }
-    } else {
+    } else if (trigger.entity_id) {
       entities = states[trigger.entity_id]
         ? computeStateName(states[trigger.entity_id])
         : trigger.entity_id;
     }
 
+    if (!entities) {
+      // no entity_id or empty array
+      entities = "something";
+    }
+
     base += ` ${entities} changes`;
 
     if (trigger.from) {
@@ -286,7 +292,7 @@ export const describeTrigger = (
   }
   // MQTT Trigger
   if (trigger.platform === "mqtt") {
-    return "When a MQTT payload has been received";
+    return "When an MQTT message has been received";
   }
 
   // Template Trigger
@@ -300,6 +306,9 @@ export const describeTrigger = (
   }
 
   if (trigger.platform === "device") {
+    if (!trigger.device_id) {
+      return "Device trigger";
+    }
     const config = trigger as DeviceTrigger;
     const localized = localizeDeviceAutomationTrigger(hass, config);
     if (localized) {
@@ -311,7 +320,9 @@ export const describeTrigger = (
     }`;
   }
 
-  return `${trigger.platform || "Unknown"} trigger`;
+  return `${
+    trigger.platform ? trigger.platform.replace(/_/g, " ") : "Unknown"
+  } trigger`;
 };
 
 export const describeCondition = (
@@ -323,15 +334,64 @@ export const describeCondition = (
     return condition.alias;
   }
 
-  if (["or", "and", "not"].includes(condition.condition)) {
-    return `multiple conditions using "${condition.condition}"`;
+  if (!condition.condition) {
+    const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"];
+    for (const key of shorthands) {
+      if (!(key in condition)) {
+        continue;
+      }
+      if (ensureArray(condition[key])) {
+        condition = {
+          condition: key,
+          conditions: condition[key],
+        };
+      }
+    }
+  }
+
+  if (condition.condition === "or") {
+    const conditions = ensureArray(condition.conditions);
+
+    let count = "condition";
+
+    if (conditions && conditions.length > 0) {
+      count = `of ${conditions.length} conditions`;
+    }
+
+    return `Test if any ${count} matches`;
+  }
+
+  if (condition.condition === "and") {
+    const conditions = ensureArray(condition.conditions);
+
+    const count =
+      conditions && conditions.length > 0
+        ? `${conditions.length} `
+        : "multiple";
+
+    return `Test if ${count} conditions match`;
+  }
+
+  if (condition.condition === "not") {
+    const conditions = ensureArray(condition.conditions);
+
+    const what =
+      conditions && conditions.length > 0
+        ? `none of ${conditions.length} conditions match`
+        : "no condition matches";
+
+    return `Test if ${what}`;
   }
 
   // State Condition
-  if (condition.condition === "state" && condition.entity_id) {
+  if (condition.condition === "state") {
     let base = "Confirm";
     const stateObj = hass.states[condition.entity_id];
-    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
+    const entity = stateObj
+      ? computeStateName(stateObj)
+      : condition.entity_id
+      ? condition.entity_id
+      : "an entity";
 
     if ("attribute" in condition) {
       base += ` ${condition.attribute} from`;
@@ -347,10 +407,14 @@ export const describeCondition = (
             : ""
         } ${state}`;
       }
-    } else {
+    } else if (condition.state) {
       states = condition.state.toString();
     }
 
+    if (!states) {
+      states = "a state";
+    }
+
     base += ` ${entity} is ${states}`;
 
     if ("for" in condition) {
@@ -487,6 +551,9 @@ export const describeCondition = (
   }
 
   if (condition.condition === "device") {
+    if (!condition.device_id) {
+      return "Device condition";
+    }
     const config = condition as DeviceCondition;
     const localized = localizeDeviceAutomationCondition(hass, config);
     if (localized) {
@@ -498,5 +565,7 @@ export const describeCondition = (
     }`;
   }
 
-  return `${condition.condition} condition`;
+  return `${
+    condition.condition ? condition.condition.replace(/_/g, " ") : "Unknown"
+  } condition`;
 };

src/data/media-player.ts

@@ -51,6 +51,7 @@ interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
   media_duration?: number;
   media_position?: number;
   media_title?: string;
+  media_channel?: string;
   icon?: string;
   entity_picture_local?: string;
   is_volume_muted?: boolean;
@@ -235,6 +236,9 @@ export const computeMediaDescription = (
         }
       }
       break;
+    case "channel":
+      secondaryTitle = stateObj.attributes.media_channel!;
+      break;
     default:
       secondaryTitle = stateObj.attributes.app_name || "";
   }

src/data/script_i18n.ts

@@ -61,7 +61,7 @@ export const describeAction = <T extends ActionType>(
         ? `${domainToName(hass.localize, domain)}: ${service.name}`
         : `Call service: ${config.service}`;
     } else {
-      return actionType;
+      return "Call a service";
     }
     if (config.target) {
       const targets: string[] = [];
@@ -137,9 +137,11 @@ export const describeAction = <T extends ActionType>(
     } else if (typeof config.delay === "string") {
       duration = isTemplate(config.delay)
         ? "based on a template"
-        : `for ${config.delay}`;
-    } else {
+        : `for ${config.delay || "a duration"}`;
+    } else if (config.delay) {
       duration = `for ${formatDuration(config.delay)}`;
+    } else {
+      duration = "for a duration";
     }
 
     return `Delay ${duration}`;
@@ -153,13 +155,12 @@ export const describeAction = <T extends ActionType>(
     } else {
       entityId = config.target?.entity_id || config.entity_id;
     }
+    if (!entityId) {
+      return "Activate a scene";
+    }
     const sceneStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Scene ${
-      sceneStateObj
-        ? computeStateName(sceneStateObj)
-        : "scene" in config
-        ? config.scene
-        : config.target?.entity_id || config.entity_id || ""
+    return `Active scene ${
+      sceneStateObj ? computeStateName(sceneStateObj) : entityId
     }`;
   }
 
@@ -167,16 +168,22 @@ export const describeAction = <T extends ActionType>(
     const config = action as PlayMediaAction;
     const entityId = config.target?.entity_id || config.entity_id;
     const mediaStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Play ${config.metadata.title || config.data.media_content_id} on ${
+    return `Play ${
+      config.metadata.title || config.data.media_content_id || "media"
+    } on ${
       mediaStateObj
         ? computeStateName(mediaStateObj)
-        : config.target?.entity_id || config.entity_id
+        : entityId || "a media player"
     }`;
   }
 
   if (actionType === "wait_for_trigger") {
     const config = action as WaitForTriggerAction;
-    return `Wait for ${ensureArray(config.wait_for_trigger)
+    const triggers = ensureArray(config.wait_for_trigger);
+    if (!triggers || triggers.length === 0) {
+      return "Wait for a trigger";
+    }
+    return `Wait for ${triggers
       .map((trigger) => describeTrigger(trigger, hass))
       .join(", ")}`;
   }
@@ -199,12 +206,12 @@ export const describeAction = <T extends ActionType>(
   }
 
   if (actionType === "check_condition") {
-    return `Test ${describeCondition(action as Condition, hass)}`;
+    return describeCondition(action as Condition, hass);
   }
 
   if (actionType === "stop") {
     const config = action as StopAction;
-    return `Stopped${config.stop ? ` because: ${config.stop}` : ""}`;
+    return `Stop${config.stop ? ` because: ${config.stop}` : ""}`;
   }
 
   if (actionType === "if") {
@@ -258,6 +265,9 @@ export const describeAction = <T extends ActionType>(
 
   if (actionType === "device_action") {
     const config = action as DeviceAction;
+    if (!config.device_id) {
+      return "Device action";
+    }
     const localized = localizeDeviceAutomationAction(hass, config);
     if (localized) {
       return localized;

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -167,7 +167,8 @@ class MoreInfoMediaPlayer extends LitElement {
             </div>
           `
         : ""}
-      ${supportsFeature(stateObj, SUPPORT_SELECT_SOUND_MODE) &&
+      ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) &&
+      supportsFeature(stateObj, SUPPORT_SELECT_SOUND_MODE) &&
       stateObj.attributes.sound_mode_list?.length
         ? html`
             <div class="sound-input">

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

@@ -230,6 +230,7 @@ export default class HaAutomationActionRow extends LitElement {
               ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
               ${!yamlMode
                 ? html`<ha-svg-icon
+                    class="selected_menu_item"
                     slot="graphic"
                     .path=${mdiCheck}
                   ></ha-svg-icon>`
@@ -242,6 +243,7 @@ export default class HaAutomationActionRow extends LitElement {
               )}
               ${yamlMode
                 ? html`<ha-svg-icon
+                    class="selected_menu_item"
                     slot="graphic"
                     .path=${mdiCheck}
                   ></ha-svg-icon>`
@@ -539,6 +541,12 @@ export default class HaAutomationActionRow extends LitElement {
         .warning ul {
           margin: 4px 0;
         }
+        .selected_menu_item {
+          color: var(--primary-color);
+        }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
       `,
     ];
   }

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

@@ -1,6 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-blueprint-picker";
@@ -34,8 +34,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
 
   @state() private _blueprints?: Blueprints;
 
-  @state() private _showDescription = false;
-
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._getBlueprints();
@@ -48,55 +46,28 @@ export class HaBlueprintAutomationEditor extends LitElement {
     return this._blueprints[this.config.use_blueprint.path];
   }
 
-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (
-      !this._showDescription &&
-      changedProps.has("config") &&
-      this.config.description
-    ) {
-      this._showDescription = true;
-    }
-  }
-
   protected render() {
     const blueprint = this._blueprint;
     return html`
-      <ha-config-section vertical .isWide=${this.isWide}>
-        <span slot="introduction">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.introduction"
-          )}
-        </span>
-        <ha-card outlined>
-          <div class="card-content">
-            ${this._showDescription
-              ? html`
-                  <ha-textarea
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.editor.description.label"
-                    )}
-                    .placeholder=${this.hass.localize(
-                      "ui.panel.config.automation.editor.description.placeholder"
-                    )}
-                    name="description"
-                    autogrow
-                    .value=${this.config.description || ""}
-                    @change=${this._valueChanged}
-                  ></ha-textarea>
-                `
-              : html`
-                  <div class="link-button-row">
-                    <button class="link" @click=${this._addDescription}>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.description.add"
-                      )}
-                    </button>
-                  </div>
-                `}
-          </div>
-        </ha-card>
-      </ha-config-section>
+      <p class="introduction">
+        ${this.hass.localize("ui.panel.config.automation.editor.introduction")}
+      </p>
+      <ha-card outlined>
+        <div class="card-content">
+          <ha-textarea
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.description.label"
+            )}
+            .placeholder=${this.hass.localize(
+              "ui.panel.config.automation.editor.description.placeholder"
+            )}
+            name="description"
+            autogrow
+            .value=${this.config.description || ""}
+            @change=${this._valueChanged}
+          ></ha-textarea>
+        </div>
+      </ha-card>
 
       <ha-card
         outlined
@@ -243,16 +214,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
-  private _addDescription() {
-    this._showDescription = true;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
+        :host {
+          display: block;
+        }
         ha-card.blueprint {
-          max-width: 1040px;
           margin: 24px auto;
         }
         .padding {
@@ -272,7 +241,11 @@ export class HaBlueprintAutomationEditor extends LitElement {
         h3 {
           margin: 16px;
         }
-        span[slot="introduction"] a {
+        .introduction {
+          margin-top: 0;
+          margin-bottom: 12px;
+        }
+        .introduction a {
           color: var(--primary-color);
         }
         p {

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

@@ -145,6 +145,7 @@ export default class HaAutomationConditionRow extends LitElement {
               ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
               ${!this._yamlMode
                 ? html`<ha-svg-icon
+                    class="selected_menu_item"
                     slot="graphic"
                     .path=${mdiCheck}
                   ></ha-svg-icon>`
@@ -157,6 +158,7 @@ export default class HaAutomationConditionRow extends LitElement {
               )}
               ${this._yamlMode
                 ? html`<ha-svg-icon
+                    class="selected_menu_item"
                     slot="graphic"
                     .path=${mdiCheck}
                   ></ha-svg-icon>`
@@ -477,6 +479,12 @@ export default class HaAutomationConditionRow extends LitElement {
         .testing.pass {
           background-color: var(--success-color);
         }
+        .selected_menu_item {
+          color: var(--primary-color);
+        }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
       `,
     ];
   }

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

@@ -5,6 +5,7 @@ import {
   mdiContentSave,
   mdiDelete,
   mdiDotsVertical,
+  mdiInformationOutline,
   mdiPencil,
   mdiPlay,
   mdiPlayCircleOutline,
@@ -25,6 +26,7 @@ import {
 } from "lit";
 import { property, state, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-button-menu";
@@ -125,6 +127,14 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
+          <mwc-list-item graphic="icon" @click=${this._showInfo}>
+            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiInformationOutline}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
           <mwc-list-item
             graphic="icon"
             .disabled=${!stateObj}
@@ -134,15 +144,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
           </mwc-list-item>
 
-          ${stateObj
-            ? html`<a
-                href="/config/automation/trace/${this._config
-                  ? this._config.id
-                  : ""}"
-                target="_blank"
-                .disabled=${!stateObj}
-              >
-                <mwc-list-item graphic="icon" .disabled=${!stateObj}>
+          ${stateObj && this._config
+            ? html`<a href="/config/automation/trace/${this._config.id}">
+                <mwc-list-item graphic="icon">
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.show_trace"
                   )}
@@ -433,6 +437,13 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._errors = undefined;
   }
 
+  private _showInfo() {
+    if (!this.hass || !this._entityId) {
+      return;
+    }
+    fireEvent(this, "hass-more-info", { entityId: this._entityId });
+  }
+
   private _runActions() {
     if (!this.hass || !this._entityId) {
       return;
@@ -640,7 +651,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           flex-direction: column;
           padding-bottom: 0;
         }
-        manual-automation-editor {
+        manual-automation-editor,
+        blueprint-automation-editor {
           margin: 0 auto;
           max-width: 1040px;
           padding: 28px 20px 0;

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

@@ -1,4 +1,16 @@
-import { mdiHelpCircle, mdiInformationOutline, mdiPlus } from "@mdi/js";
+import {
+  mdiCancel,
+  mdiContentDuplicate,
+  mdiDelete,
+  mdiHelpCircle,
+  mdiInformationOutline,
+  mdiPlay,
+  mdiPlayCircleOutline,
+  mdiPlus,
+  mdiStopCircleOutline,
+  mdiTransitConnection,
+} from "@mdi/js";
+import "@polymer/paper-tooltip/paper-tooltip";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -13,11 +25,22 @@ import type {
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
+import "../../../components/ha-chip";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-svg-icon";
-import type { AutomationEntity } from "../../../data/automation";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  AutomationEntity,
+  deleteAutomation,
+  getAutomationConfig,
+  showAutomationEditor,
+  triggerAutomationActions,
+} from "../../../data/automation";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
@@ -63,6 +86,7 @@ class HaAutomationPicker extends LitElement {
         ...automation,
         name: computeStateName(automation),
         last_triggered: automation.attributes.last_triggered || undefined,
+        disabled: automation.state === "off",
       }));
     }
   );
@@ -123,22 +147,105 @@ class HaAutomationPicker extends LitElement {
           },
         };
       }
+
+      columns.disabled = this.narrow
+        ? {
+            title: "",
+            template: (disabled: boolean) =>
+              disabled
+                ? html`
+                    <paper-tooltip animation-delay="0" position="left">
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.picker.disabled"
+                      )}
+                    </paper-tooltip>
+                    <ha-svg-icon
+                      .path=${mdiCancel}
+                      style="color: var(--secondary-text-color)"
+                    ></ha-svg-icon>
+                  `
+                : "",
+          }
+        : {
+            width: "20%",
+            title: "",
+            template: (disabled: boolean) =>
+              disabled
+                ? html`
+                    <ha-chip>
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.picker.disabled"
+                      )}
+                    </ha-chip>
+                  `
+                : "",
+          };
+
       columns.actions = {
         title: "",
-        label: this.hass.localize(
-          "ui.panel.config.automation.picker.headers.actions"
-        ),
-        type: "icon-button",
-        template: (_info, automation: any) => html`
-          <ha-icon-button
-            .automation=${automation}
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.picker.headers.actions"
-            )}
-            .path=${mdiInformationOutline}
-            @click=${this._showInfo}
-          ></ha-icon-button>
-        `,
+        width: this.narrow ? undefined : "10%",
+        type: "overflow-menu",
+        template: (_: string, automation: any) =>
+          html`
+            <ha-icon-overflow-menu
+              .hass=${this.hass}
+              narrow
+              .items=${[
+                {
+                  path: mdiInformationOutline,
+                  label: this.hass.localize(
+                    "ui.panel.config.automation.editor.show_info"
+                  ),
+                  action: () => this._showInfo(automation),
+                },
+                {
+                  path: mdiPlay,
+                  label: this.hass.localize(
+                    "ui.panel.config.automation.editor.run"
+                  ),
+                  action: () => this._runActions(automation),
+                },
+                {
+                  path: mdiTransitConnection,
+                  label: this.hass.localize(
+                    "ui.panel.config.automation.editor.show_trace"
+                  ),
+                  action: () => this._showTrace(automation),
+                },
+                {
+                  path: mdiContentDuplicate,
+                  label: this.hass.localize(
+                    "ui.panel.config.automation.picker.duplicate"
+                  ),
+                  action: () => this.duplicate(automation),
+                },
+                {
+                  path:
+                    automation.state === "off"
+                      ? mdiPlayCircleOutline
+                      : mdiStopCircleOutline,
+                  label:
+                    automation.state === "off"
+                      ? this.hass.localize(
+                          "ui.panel.config.automation.editor.enable"
+                        )
+                      : this.hass.localize(
+                          "ui.panel.config.automation.editor.disable"
+                        ),
+                  action: () => this._toggle(automation),
+                },
+                {
+                  label: this.hass.localize(
+                    "ui.panel.config.automation.picker.delete"
+                  ),
+                  path: mdiDelete,
+                  action: () => this._deleteConfirm(automation),
+                  warning: true,
+                },
+              ]}
+            >
+            </ha-icon-overflow-menu>
+          `,
       };
       return columns;
     }
@@ -210,12 +317,52 @@ class HaAutomationPicker extends LitElement {
     this._filterValue = undefined;
   }
 
-  private _showInfo(ev) {
-    ev.stopPropagation();
-    const automation = ev.currentTarget.automation;
+  private _showInfo(automation: any) {
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   }
 
+  private _runActions(automation: any) {
+    triggerAutomationActions(this.hass, automation.entity_id);
+  }
+
+  private _showTrace(automation: any) {
+    navigate(`/config/automation/trace/${automation.attributes.id}`);
+  }
+
+  private async _toggle(automation): Promise<void> {
+    const service = automation.state === "off" ? "turn_on" : "turn_off";
+    await this.hass.callService("automation", service, {
+      entity_id: automation.entity_id,
+    });
+  }
+
+  private async _deleteConfirm(automation) {
+    showConfirmationDialog(this, {
+      text: this.hass.localize(
+        "ui.panel.config.automation.picker.delete_confirm"
+      ),
+      confirmText: this.hass!.localize("ui.common.delete"),
+      dismissText: this.hass!.localize("ui.common.cancel"),
+      confirm: () => this._delete(automation),
+    });
+  }
+
+  private async _delete(automation) {
+    await deleteAutomation(this.hass, automation.attributes.id);
+  }
+
+  private async duplicate(automation) {
+    const config = await getAutomationConfig(
+      this.hass,
+      automation.attributes.id
+    );
+    showAutomationEditor({
+      ...config,
+      id: undefined,
+      alias: undefined,
+    });
+  }
+
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.automation.caption"),

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

@@ -170,6 +170,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
               ${!yamlMode
                 ? html`<ha-svg-icon
+                    class="selected_menu_item"
                     slot="graphic"
                     .path=${mdiCheck}
                   ></ha-svg-icon>`
@@ -182,6 +183,7 @@ export default class HaAutomationTriggerRow extends LitElement {
               )}
               ${yamlMode
                 ? html`<ha-svg-icon
+                    class="selected_menu_item"
                     slot="graphic"
                     .path=${mdiCheck}
                   ></ha-svg-icon>`
@@ -592,6 +594,12 @@ export default class HaAutomationTriggerRow extends LitElement {
           display: block;
           margin-bottom: 24px;
         }
+        .selected_menu_item {
+          color: var(--primary-color);
+        }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
       `,
     ];
   }

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

@@ -192,7 +192,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               "ui.panel.config.automation.editor.edit_ui"
             )}
             graphic="icon"
-            ?activated=${this._mode === "gui"}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
@@ -210,7 +209,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               "ui.panel.config.automation.editor.edit_yaml"
             )}
             graphic="icon"
-            ?activated=${this._mode === "yaml"}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
@@ -229,13 +227,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           <mwc-list-item
             .disabled=${!this.scriptEntityId}
             .label=${this.hass.localize(
-              "ui.panel.config.script.picker.duplicate_script"
+              "ui.panel.config.script.picker.duplicate"
             )}
             graphic="icon"
           >
-            ${this.hass.localize(
-              "ui.panel.config.script.picker.duplicate_script"
-            )}
+            ${this.hass.localize("ui.panel.config.script.picker.duplicate")}
             <ha-svg-icon
               slot="graphic"
               .path=${mdiContentDuplicate}
@@ -245,12 +241,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           <mwc-list-item
             .disabled=${!this.scriptEntityId}
             aria-label=${this.hass.localize(
-              "ui.panel.config.script.editor.delete_script"
+              "ui.panel.config.script.picker.delete"
             )}
             class=${classMap({ warning: Boolean(this.scriptEntityId) })}
             graphic="icon"
           >
-            ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
+            ${this.hass.localize("ui.panel.config.script.picker.delete")}
             <ha-svg-icon
               class=${classMap({ warning: Boolean(this.scriptEntityId) })}
               slot="graphic"
@@ -833,6 +829,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           font-weight: 400;
           flex: 1;
         }
+        .header a {
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }

src/translations/en.json

@@ -301,6 +301,7 @@
       "refresh": "Refresh",
       "cancel": "Cancel",
       "delete": "Delete",
+      "duplicate": "Duplicate",
       "remove": "Remove",
       "enable": "Enable",
       "disable": "Disable",
@@ -1790,9 +1791,10 @@
             "edit_automation": "Edit automation",
             "dev_automation": "Debug automation",
             "show_info_automation": "Show info about automation",
-            "delete": "Delete",
+            "delete": "[%key:ui::common::delete%]",
             "delete_confirm": "Are you sure you want to delete this automation?",
-            "duplicate": "Duplicate",
+            "duplicate": "[%key:ui::common::duplicate%]",
+            "disabled": "Disabled",
             "headers": {
               "toggle": "Enable/disable",
               "name": "Name",
@@ -1822,6 +1824,7 @@
             "run": "[%key:ui::panel::config::automation::editor::actions::run%]",
             "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
             "show_trace": "Traces",
+            "show_info": "Information",
             "introduction": "Use automations to bring your home to life.",
             "default_name": "New Automation",
             "missing_name": "Cannot save automation without a name",
@@ -1867,11 +1870,11 @@
               "add": "Add trigger",
               "id": "Trigger ID",
               "edit_id": "Edit ID",
-              "duplicate": "Duplicate",
+              "duplicate": "[%key:ui::common::duplicate%]",
               "rename": "Rename",
               "change_alias": "Rename trigger",
               "alias": "Trigger name",
-              "delete": "[%key:ui::panel::mailbox::delete_button%]",
+              "delete": "[%key:ui::common::delete%]",
               "delete_confirm": "Are you sure you want to delete this?",
               "unsupported_platform": "No visual editor support for platform: {platform}",
               "type_select": "Trigger type",
@@ -1987,11 +1990,11 @@
               "testing_pass": "Condition passes",
               "invalid_condition": "Invalid condition configuration",
               "test_failed": "Error occurred while testing condition",
-              "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
+              "duplicate": "[%key:ui::common::duplicate%]",
               "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
               "change_alias": "Rename condition",
               "alias": "Condition name",
-              "delete": "[%key:ui::panel::mailbox::delete_button%]",
+              "delete": "[%key:ui::common::delete%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
               "unsupported_condition": "No visual editor support for condition: {condition}",
               "type_select": "Condition type",
@@ -2078,14 +2081,14 @@
               "run": "Run",
               "run_action_error": "Error running action",
               "run_action_success": "Action run successfully",
-              "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
+              "duplicate": "[%key:ui::common::duplicate%]",
               "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
               "change_alias": "Rename action",
               "alias": "Action name",
               "enable": "Enable",
               "disable": "Disable",
               "disabled": "Disabled",
-              "delete": "[%key:ui::panel::mailbox::delete_button%]",
+              "delete": "[%key:ui::common::delete%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
               "unsupported_action": "No visual editor support for action: {action}",
               "type_select": "Action type",
@@ -2258,7 +2261,7 @@
             "header": "Script Editor",
             "introduction": "The script editor allows you to create and edit scripts. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
             "learn_more": "Learn more about scripts",
-            "no_scripts": "We couldn’t find any scripts",
+            "no_scripts": "We couldn't find any scripts",
             "add_script": "Add script",
             "show_info": "Show info about script",
             "run_script": "Run script",
@@ -2268,8 +2271,8 @@
               "name": "Name",
               "state": "State"
             },
-            "duplicate_script": "Duplicate script",
-            "duplicate": "[%key:ui::panel::config::automation::picker::duplicate%]"
+            "delete": "[%key:ui::common::delete%]",
+            "duplicate": "[%key:ui::common::duplicate%]"
           },
           "editor": {
             "alias": "Name",
@@ -2296,7 +2299,6 @@
             "load_error_not_editable": "Only scripts inside scripts.yaml are editable.",
             "load_error_unknown": "Error loading script ({err_no}).",
             "delete_confirm": "Are you sure you want to delete this script?",
-            "delete_script": "Delete script",
             "save_script": "Save script",
             "sequence": "Sequence",
             "sequence_sentence": "The sequence of actions of this script.",
@@ -2312,7 +2314,7 @@
             "introduction": "The scene editor allows you to create and edit scenes. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
             "learn_more": "Learn more about scenes",
             "pick_scene": "Pick scene to edit",
-            "no_scenes": "We couldn’t find any scenes",
+            "no_scenes": "We couldn't find any scenes",
             "add_scene": "Add scene",
             "only_editable": "Only scenes defined in scenes.yaml are editable.",
             "edit_scene": "Edit scene",
@@ -2320,7 +2322,7 @@
             "delete_scene": "Delete scene",
             "delete_confirm": "Are you sure you want to delete this scene?",
             "duplicate_scene": "Duplicate scene",
-            "duplicate": "Duplicate",
+            "duplicate": "[%key:ui::common::duplicate%]",
             "headers": {
               "activate": "Activate",
               "state": "State",
@@ -3853,7 +3855,7 @@
             },
             "entity": {
               "name": "Entity",
-              "description": "The Entity card gives you a quick overview of your entity’s state."
+              "description": "The Entity card gives you a quick overview of your entity's state."
             },
             "button": {
               "name": "Button",