Show user friendly attribute names in picker

src/components/entity/ha-entity-attribute-picker.ts

@@ -18,6 +18,11 @@ import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
 import "./state-badge";
+import {
+  formatAttributeNameOut,
+  formatAttributeNamesOut,
+  formatAttributeNameIn,
+} from "../../util/hass-attributes-util";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -65,7 +70,7 @@ class HaEntityAttributePicker extends LitElement {
     if (changedProps.has("_opened") && this._opened) {
       const state = this.entityId ? this.hass.states[this.entityId] : undefined;
       (this._comboBox as any).items = state
-        ? Object.keys(state.attributes)
+        ? formatAttributeNamesOut(Object.keys(state.attributes))
         : [];
     }
   }
@@ -80,6 +85,7 @@ class HaEntityAttributePicker extends LitElement {
         .value=${this._value}
         .allowCustomValue=${this.allowCustomValue}
         .renderer=${rowRenderer}
+        attr-for-value="bind-value"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
@@ -135,7 +141,7 @@ class HaEntityAttributePicker extends LitElement {
   }
 
   private get _value() {
-    return this.value || "";
+    return this.value ? formatAttributeNameOut(this.value) : "";
   }
 
   private _openedChanged(ev: PolymerChangedEvent<boolean>) {
@@ -150,6 +156,8 @@ class HaEntityAttributePicker extends LitElement {
   }
 
   private _setValue(value: string) {
+    // Ensure that we send the correct internal snake_case name to the callbacks / events
+    value = formatAttributeNameIn(value);
     this.value = value;
     setTimeout(() => {
       fireEvent(this, "value-changed", { value });

src/components/ha-attributes.ts

@@ -9,7 +9,9 @@ import {
   TemplateResult,
 } from "lit-element";
 import { until } from "lit-html/directives/until";
-import hassAttributeUtil from "../util/hass-attributes-util";
+import hassAttributeUtil, {
+  formatAttributeNameOut,
+} from "../util/hass-attributes-util";
 
 let jsYamlPromise: Promise<typeof import("js-yaml")>;
 
@@ -34,7 +36,7 @@ class HaAttributes extends LitElement {
           (attribute) => html`
             <div class="data-entry">
               <div class="key">
-                ${attribute.replace(/_/g, " ").replace("id", "ID")}
+                ${formatAttributeNameOut(attribute)}
               </div>
               <div class="value">
                 ${this.formatAttribute(attribute)}

src/panels/config/customize/types/ha-customize-icon.js

@@ -21,7 +21,7 @@ class HaCustomizeIcon extends PolymerElement {
       <ha-icon class="icon-image" icon="[[item.value]]"></ha-icon>
       <paper-input
         disabled="[[item.secondary]]"
-        label="icon"
+        label="Icon"
         value="{{item.value}}"
       >
       </paper-input>

src/panels/config/customize/types/ha-customize-string.js

@@ -2,6 +2,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { formatAttributeNameOut } from "../../../../util/hass-attributes-util";
 
 class HaCustomizeString extends PolymerElement {
   static get template() {
@@ -25,7 +26,10 @@ class HaCustomizeString extends PolymerElement {
   }
 
   getLabel(item) {
-    return item.description + (item.type === "json" ? " (JSON formatted)" : "");
+    return (
+      formatAttributeNameOut(item.description) +
+      (item.type === "json" ? " (JSON formatted)" : "")
+    );
   }
 }
 customElements.define("ha-customize-string", HaCustomizeString);

src/util/hass-attributes-util.ts

@@ -0,0 +1,133 @@
+const hassAttributeUtil = {
+  DOMAIN_DEVICE_CLASS: {
+    binary_sensor: [
+      "battery",
+      "cold",
+      "connectivity",
+      "door",
+      "garage_door",
+      "gas",
+      "heat",
+      "light",
+      "lock",
+      "moisture",
+      "motion",
+      "moving",
+      "occupancy",
+      "opening",
+      "plug",
+      "power",
+      "presence",
+      "problem",
+      "safety",
+      "smoke",
+      "sound",
+      "vibration",
+      "window",
+    ],
+    cover: [
+      "awning",
+      "blind",
+      "curtain",
+      "damper",
+      "door",
+      "garage",
+      "shade",
+      "shutter",
+      "window",
+    ],
+    humidifier: ["dehumidifier", "humidifier"],
+    sensor: [
+      "battery",
+      "humidity",
+      "illuminance",
+      "temperature",
+      "pressure",
+      "power",
+      "signal_strength",
+      "timestamp",
+    ],
+    switch: ["switch", "outlet"],
+  },
+  UNKNOWN_TYPE: "json",
+  ADD_TYPE: "key-value",
+  TYPE_TO_TAG: {
+    string: "ha-customize-string",
+    json: "ha-customize-string",
+    icon: "ha-customize-icon",
+    boolean: "ha-customize-boolean",
+    array: "ha-customize-array",
+    "key-value": "ha-customize-key-value",
+  },
+  LOGIC_STATE_ATTRIBUTES: {},
+};
+
+// Attributes here serve dual purpose:
+// 1) Any key of this object won't be shown in more-info window.
+// 2) Any key which has value other than undefined will appear in customization
+//    config according to its value.
+hassAttributeUtil.LOGIC_STATE_ATTRIBUTES = {
+  entity_picture: undefined,
+  friendly_name: { type: "string", description: "Name" },
+  icon: { type: "icon" },
+  emulated_hue: {
+    type: "boolean",
+    domains: ["emulated_hue"],
+  },
+  emulated_hue_name: {
+    type: "string",
+    domains: ["emulated_hue"],
+  },
+  haaska_hidden: undefined,
+  haaska_name: undefined,
+  supported_features: undefined,
+  attribution: undefined,
+  restored: undefined,
+  custom_ui_more_info: { type: "string" },
+  custom_ui_state_card: { type: "string" },
+  device_class: {
+    type: "array",
+    options: hassAttributeUtil.DOMAIN_DEVICE_CLASS,
+    description: "Device class",
+    domains: ["binary_sensor", "cover", "humidifier", "sensor", "switch"],
+  },
+  assumed_state: {
+    type: "boolean",
+    domains: [
+      "switch",
+      "light",
+      "cover",
+      "climate",
+      "fan",
+      "humidifier",
+      "group",
+      "water_heater",
+    ],
+  },
+  initial_state: {
+    type: "string",
+    domains: ["automation"],
+  },
+  unit_of_measurement: { type: "string" },
+};
+
+export default hassAttributeUtil;
+
+// Convert from internal snake_case format to external / user-friendly format
+export function formatAttributeNameOut(value: string): string {
+  value = value.replace(/_/g, " ").replace(/\bid\b/g, "ID");
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+// Convert from internal snake_case format to external / user-friendly format
+export function formatAttributeNamesOut(value: string[]): string[] {
+  return value.map((x) => formatAttributeNameOut(x));
+}
+
+// Convert from external / user-friendly format to internal snake_case format
+export function formatAttributeNameIn(value: string): string {
+  return String(value)
+    .replace(/ /g, "_")
+    .replace(/\bID\b/g, "id")
+    .toLowerCase();
+}