Align entity registry buttons

demo/src/ha-demo.ts

@@ -61,7 +61,6 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.co2_intensity",
-        unique_id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",
@@ -75,7 +74,6 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.grid_fossil_fuel_percentage",
-        unique_id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",

gallery/src/pages/misc/integration-card.ts

@@ -191,7 +191,6 @@ const createEntityRegistryEntries = (
     hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
-    unique_id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",

pyproject.toml

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

src/common/datetime/format_duration.ts

@@ -1,28 +0,0 @@
-import { HaDurationData } from "../../components/ha-duration-input";
-
-const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
-
-export const formatDuration = (duration: HaDurationData) => {
-  const d = duration.days || 0;
-  const h = duration.hours || 0;
-  const m = duration.minutes || 0;
-  const s = duration.seconds || 0;
-  const ms = duration.milliseconds || 0;
-
-  if (d > 0) {
-    return `${d} days ${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (h > 0) {
-    return `${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (m > 0) {
-    return `${m}:${leftPad(s)}`;
-  }
-  if (s > 0) {
-    return `${s} seconds`;
-  }
-  if (ms > 0) {
-    return `${ms} milliseconds`;
-  }
-  return null;
-};

src/data/automation_i18n.ts

@@ -2,12 +2,6 @@ import secondsToDuration from "../common/datetime/seconds_to_duration";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
-import {
-  DeviceCondition,
-  DeviceTrigger,
-  localizeDeviceAutomationCondition,
-  localizeDeviceAutomationTrigger,
-} from "./device_automation";
 import { formatAttributeName } from "./entity_attributes";
 
 export const describeTrigger = (
@@ -298,19 +292,6 @@ export const describeTrigger = (
   if (trigger.platform === "webhook") {
     return "When a Webhook payload has been received";
   }
-
-  if (trigger.platform === "device") {
-    const config = trigger as DeviceTrigger;
-    const localized = localizeDeviceAutomationTrigger(hass, config);
-    if (localized) {
-      return localized;
-    }
-    const stateObj = hass.states[config.entity_id as string];
-    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
-      config.type
-    }`;
-  }
-
   return `${trigger.platform || "Unknown"} trigger`;
 };
 
@@ -486,17 +467,5 @@ export const describeCondition = (
     }`;
   }
 
-  if (condition.condition === "device") {
-    const config = condition as DeviceCondition;
-    const localized = localizeDeviceAutomationCondition(hass, config);
-    if (localized) {
-      return localized;
-    }
-    const stateObj = hass.states[config.entity_id as string];
-    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
-      config.type
-    }`;
-  }
-
   return `${condition.condition} condition`;
 };

src/data/entity_registry.ts

@@ -1,6 +1,5 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
-import memoizeOne from "memoize-one";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
@@ -8,7 +7,6 @@ import { HomeAssistant } from "../types";
 
 export interface EntityRegistryEntry {
   entity_id: string;
-  unique_id: string;
   name: string | null;
   icon: string | null;
   platform: string;
@@ -23,6 +21,7 @@ export interface EntityRegistryEntry {
 }
 
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
+  unique_id: string;
   capabilities: Record<string, unknown>;
   original_icon?: string;
   device_class?: string;
@@ -162,16 +161,6 @@ export const sortEntityRegistryByName = (entries: EntityRegistryEntry[]) =>
     caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
   );
 
-export const entityRegistryByUniqueId = memoizeOne(
-  (entries: HomeAssistant["entities"]) => {
-    const entities: HomeAssistant["entities"] = {};
-    for (const entity of Object.values(entries)) {
-      entities[entity.unique_id] = entity;
-    }
-    return entities;
-  }
-);
-
 export const getEntityPlatformLookup = (
   entities: EntityRegistryEntry[]
 ): Record<string, string> => {

src/data/script_i18n.ts

@@ -1,4 +1,3 @@
-import { formatDuration } from "../common/datetime/format_duration";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
 import { ensureArray } from "../common/ensure-array";
 import { computeStateName } from "../common/entity/compute_state_name";
@@ -6,13 +5,6 @@ import { isTemplate } from "../common/string/has-template";
 import { HomeAssistant } from "../types";
 import { Condition } from "./automation";
 import { describeCondition, describeTrigger } from "./automation_i18n";
-import { localizeDeviceAutomationAction } from "./device_automation";
-import { computeDeviceName } from "./device_registry";
-import {
-  computeEntityRegistryName,
-  entityRegistryByUniqueId,
-} from "./entity_registry";
-import { domainToName } from "./integration";
 import {
   ActionType,
   ActionTypes,
@@ -55,11 +47,7 @@ export const describeAction = <T extends ActionType>(
     ) {
       base = "Call a service based on a template";
     } else if (config.service) {
-      const [domain, serviceName] = config.service.split(".", 2);
+      base = `Call service ${config.service}`;
-      const service = hass.services[domain][serviceName];
-      base = service
-        ? `${domainToName(hass.localize, domain)}: ${service.name}`
-        : `Call service: ${config.service}`;
     } else {
       return actionType;
     }
@@ -78,51 +66,26 @@ export const describeAction = <T extends ActionType>(
           ? config.target[key]
           : [config.target[key]];
 
+        const values: string[] = [];
+
+        let renderValues = true;
+
         for (const targetThing of keyConf) {
           if (isTemplate(targetThing)) {
             targets.push(`templated ${label}`);
+            renderValues = false;
             break;
-          } else if (key === "entity_id") {
-            if (targetThing.includes(".")) {
-              const state = hass.states[targetThing];
-              if (state) {
-                targets.push(computeStateName(state));
-              } else {
-                targets.push(targetThing);
-              }
-            } else {
-              const entityReg = entityRegistryByUniqueId(hass.entities)[
-                targetThing
-              ];
-              if (entityReg) {
-                targets.push(
-                  computeEntityRegistryName(hass, entityReg) || targetThing
-                );
-              } else {
-                targets.push("unknown entity");
-              }
-            }
-          } else if (key === "device_id") {
-            const device = hass.devices[targetThing];
-            if (device) {
-              targets.push(computeDeviceName(device, hass));
-            } else {
-              targets.push("unknown device");
-            }
-          } else if (key === "area_id") {
-            const area = hass.areas[targetThing];
-            if (area?.name) {
-              targets.push(area.name);
-            } else {
-              targets.push("unknown area");
-            }
           } else {
-            targets.push(targetThing);
+            values.push(targetThing);
           }
         }
+
+        if (renderValues) {
+          targets.push(`${label} ${values.join(", ")}`);
+        }
       }
       if (targets.length > 0) {
-        base += ` ${targets.join(", ")}`;
+        base += ` on ${targets.join(", ")}`;
       }
     }
 
@@ -141,7 +104,7 @@ export const describeAction = <T extends ActionType>(
         ? "based on a template"
         : `for ${config.delay}`;
     } else {
-      duration = `for ${formatDuration(config.delay)}`;
+      duration = `for ${JSON.stringify(config.delay)}`;
     }
 
     return `Delay ${duration}`;
@@ -212,15 +175,11 @@ export const describeAction = <T extends ActionType>(
   if (actionType === "if") {
     const config = action as IfAction;
     return `Perform an action if: ${
-      !config.if
+      typeof config.if === "string"
-        ? ""
-        : typeof config.if === "string"
         ? config.if
         : ensureArray(config.if).length > 1
         ? `${ensureArray(config.if).length} conditions`
-        : ensureArray(config.if).length
+        : describeCondition(ensureArray(config.if)[0], hass)
-        ? describeCondition(ensureArray(config.if)[0], hass)
-        : ""
     }${config.else ? " (or else!)" : ""}`;
   }
 
@@ -260,10 +219,6 @@ export const describeAction = <T extends ActionType>(
 
   if (actionType === "device_action") {
     const config = action as DeviceAction;
-    const localized = localizeDeviceAutomationAction(hass, config);
-    if (localized) {
-      return localized;
-    }
     const stateObj = hass.states[config.entity_id as string];
     return `${config.type || "Perform action with"} ${
       stateObj ? computeStateName(stateObj) : config.entity_id

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

@@ -513,7 +513,7 @@ export default class HaAutomationActionRow extends LitElement {
         @media (min-width: 870px) {
           .action-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }

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

@@ -429,7 +429,7 @@ export default class HaAutomationConditionRow extends LitElement {
         @media (min-width: 870px) {
           .condition-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }

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

@@ -230,14 +230,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
         ${this._config
           ? html`
-              ${this.narrow
-                ? html`<span slot="header"
-                    >${this._config!.alias ||
-                    this.hass.localize(
-                      "ui.panel.config.automation.editor.default_name"
-                    )}</span
-                  >`
-                : ""}
               <div
                 class="content ${classMap({
                   "yaml-mode": this._mode === "yaml",
@@ -250,7 +242,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 ${this._mode === "gui"
                   ? html`
                       ${this.narrow
-                        ? ""
+                        ? html`<span slot="header"
+                            >${this._config!.alias ||
+                            this.hass.localize(
+                              "ui.panel.config.automation.editor.default_name"
+                            )}</span
+                          >`
                         : html`
                             <div class="header-name">
                               <h1>

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

@@ -319,7 +319,7 @@ export class HaManualAutomationEditor extends LitElement {
         @media (min-width: 870px) {
           .settings-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }

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

@@ -538,7 +538,7 @@ export default class HaAutomationTriggerRow extends LitElement {
         @media (min-width: 870px) {
           .trigger-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }

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

@@ -15,7 +15,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
 
   @property() public trigger!: TagTrigger;
 
-  @state() private _tags?: Tag[];
+  @state() private _tags: Tag[] = [];
 
   public static get defaultConfig() {
     return { tag_id: "" };
@@ -27,16 +27,14 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    if (!this._tags) {
+    const { tag_id } = this.trigger;
-      return html``;
-    }
     return html`
       <ha-select
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.tag.label"
         )}
         .disabled=${this._tags.length === 0}
-        .value=${this.trigger.tag_id}
+        .value=${tag_id}
         @selected=${this._tagChanged}
       >
         ${this._tags.map(
@@ -51,19 +49,13 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
   }
 
   private async _fetchTags() {
-    this._tags = (await fetchTags(this.hass)).sort((a, b) =>
+    this._tags = await fetchTags(this.hass);
+    this._tags.sort((a, b) =>
       caseInsensitiveStringCompare(a.name || a.id, b.name || b.id)
     );
   }
 
   private _tagChanged(ev) {
-    if (
-      !ev.detail.value ||
-      !this._tags ||
-      this.trigger.tag_id === ev.detail.value
-    ) {
-      return;
-    }
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,

src/panels/config/entities/entity-registry-settings.ts

@@ -1051,10 +1051,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         .buttons {
           box-sizing: border-box;
           display: flex;
-          padding: 24px;
+          padding: 8px 24px 24px 24px;
-          padding-top: 16px;
           justify-content: space-between;
-          padding-bottom: max(env(safe-area-inset-bottom), 24px);
+          padding-bottom: max(env(safe-area-inset-bottom), 16px);
           background-color: var(--mdc-theme-surface, #fff);
           border-top: 1px solid var(--divider-color);
           position: sticky;

src/panels/config/entities/ha-config-entities.ts

@@ -68,10 +68,9 @@ import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 
-export interface StateEntity extends Omit<EntityRegistryEntry, "unique_id"> {
+export interface StateEntity extends EntityRegistryEntry {
   readonly?: boolean;
   selectable?: boolean;
-  unique_id?: string;
 }
 
 export interface EntityRow extends StateEntity {
@@ -303,7 +302,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
 
   private _filteredEntitiesAndDomains = memoize(
     (
-      entities: StateEntity[],
+      entities: EntityRegistryEntry[],
       devices: DeviceRegistryEntry[] | undefined,
       areas: AreaRegistryEntry[] | undefined,
       stateEntities: StateEntity[],
@@ -393,10 +392,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         result.push({
           ...entry,
           entity,
-          name: computeEntityRegistryName(
+          name: computeEntityRegistryName(this.hass!, entry),
-            this.hass!,
-            entry as EntityRegistryEntry
-          ),
           unavailable,
           restored,
           area: area ? area.name : "—",

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -381,9 +381,6 @@ class HaScheduleForm extends LitElement {
           margin: 8px 0;
           height: 450px;
           width: 100%;
-          -webkit-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
         }
         .fc-scroller {
           overflow-x: visible !important;