Add localized names to card editor (#3941)

* 🔨 Add localized names to card editor

* ✏️ Rename alarm_panel to alarm-panel

* ✏️ Proper case

* 🔨 Move to else

* 🔨 Remove name and object from card picker

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -14,31 +14,31 @@ import { getCardElementTag } from "../../common/get-card-element-tag";
 import { CardPickTarget } from "../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 
-const cards = [
+const cards: string[] = [
-  { name: "Alarm panel", type: "alarm-panel" },
+  "alarm-panel",
-  { name: "Conditional", type: "conditional" },
+  "conditional",
-  { name: "Entities", type: "entities" },
+  "entities",
-  { name: "Entity Button", type: "entity-button" },
+  "entity-button",
-  { name: "Entity Filter", type: "entity-filter" },
+  "entity-filter",
-  { name: "Gauge", type: "gauge" },
+  "gauge",
-  { name: "Glance", type: "glance" },
+  "glance",
-  { name: "History Graph", type: "history-graph" },
+  "history-graph",
-  { name: "Horizontal Stack", type: "horizontal-stack" },
+  "horizontal-stack",
-  { name: "iFrame", type: "iframe" },
+  "iframe",
-  { name: "Light", type: "light" },
+  "light",
-  { name: "Map", type: "map" },
+  "map",
-  { name: "Markdown", type: "markdown" },
+  "markdown",
-  { name: "Media Control", type: "media-control" },
+  "media-control",
-  { name: "Picture", type: "picture" },
+  "picture",
-  { name: "Picture Elements", type: "picture-elements" },
+  "picture-elements",
-  { name: "Picture Entity", type: "picture-entity" },
+  "picture-entity",
-  { name: "Picture Glance", type: "picture-glance" },
+  "picture-glance",
-  { name: "Plant Status", type: "plant-status" },
+  "plant-status",
-  { name: "Sensor", type: "sensor" },
+  "sensor",
-  { name: "Shopping List", type: "shopping-list" },
+  "shopping-list",
-  { name: "Thermostat", type: "thermostat" },
+  "thermostat",
-  { name: "Vertical Stack", type: "vertical-stack" },
+  "vertical-stack",
-  { name: "Weather Forecast", type: "weather-forecast" },
+  "weather-forecast",
 ];
 
 @customElement("hui-card-picker")
@@ -53,10 +53,12 @@ export class HuiCardPicker extends LitElement {
         ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card")}
       </h3>
       <div class="cards-container">
-        ${cards.map((card) => {
+        ${cards.map((card: string) => {
           return html`
-            <mwc-button @click="${this._cardPicked}" .type="${card.type}">
+            <mwc-button @click="${this._cardPicked}" .type="${card}">
-              ${card.name}
+              ${this.hass!.localize(
+                `ui.panel.lovelace.editor.card.${card}.name`
+              )}
             </mwc-button>
           `;
         })}

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -62,10 +62,21 @@ export class HuiDialogEditCard extends LitElement {
       return html``;
     }
 
+    let heading: string;
+    if (this._cardConfig && this._cardConfig.type) {
+      heading = `${this.hass!.localize(
+        `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name`
+      )} ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}`;
+    } else {
+      heading = this.hass!.localize(
+        "ui.panel.lovelace.editor.edit_card.header"
+      );
+    }
+
     return html`
       <ha-paper-dialog with-backdrop opened modal>
         <h2>
-          ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}
+          ${heading}
         </h2>
         <paper-dialog-scrollable>
           ${this._cardConfig === undefined

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -101,7 +101,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
         })}
         <paper-dropdown-menu
           .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.alarm_panel.available_states"
+            "ui.panel.lovelace.editor.card.alarm-panel.available_states"
           )}"
           @value-changed="${this._stateAdded}"
         >

src/translations/en.json

@@ -1382,17 +1382,29 @@
             "migrate": "Migrate config"
           },
           "card": {
-            "alarm_panel": {
+            "alarm-panel": {
+              "name": "Alarm Panel",
               "available_states": "Available States"
             },
+            "conditional": {
+              "name": "Conditional"
+            },
             "config": {
               "required": "Required",
               "optional": "Optional"
             },
             "entities": {
+              "name": "Entities",
               "show_header_toggle": "Show Header Toggle?"
             },
+            "entity-button": {
+              "name": "Entity Button"
+            },
+            "entity-filter": {
+              "name": "Entity Filter"
+            },
             "gauge": {
+              "name": "Gauge",
               "severity": {
                 "define": "Define Severity?",
                 "green": "Green",
@@ -1401,8 +1413,21 @@
               }
             },
             "glance": {
+              "name": "Glance",
               "columns": "Columns"
             },
+            "history-graph": {
+              "name": "History Graph"
+            },
+            "horizontal-stack": {
+              "name": "Horizontal Stack"
+            },
+            "iframe": {
+              "name": "iFrame"
+            },
+            "light": {
+              "name": "Light"
+            },
             "generic": {
               "aspect_ratio": "Aspect Ratio",
               "camera_image": "Camera Entity",
@@ -1428,17 +1453,50 @@
               "url": "Url"
             },
             "map": {
+              "name": "Map",
               "geo_location_sources": "Geolocation Sources",
               "dark_mode": "Dark Mode?",
               "default_zoom": "Default Zoom",
               "source": "Source"
             },
             "markdown": {
+              "name": "Markdown",
               "content": "Content"
             },
+            "media-control": {
+              "name": "Media Control"
+            },
+            "picture": {
+              "name": "Picture"
+            },
+            "picture-elements": {
+              "name": "Picture Elements"
+            },
+            "picture-entity": {
+              "name": "Picture Entity"
+            },
+            "picture-glance": {
+              "name": "Picture Glance"
+            },
+            "plant-status": {
+              "name": "Plant Status"
+            },
             "sensor": {
+              "name": "Sensor",
               "graph_detail": "Graph Detail",
               "graph_type": "Graph Type"
+            },
+            "shopping-list": {
+              "name": "Shopping List"
+            },
+            "thermostat": {
+              "name": "Thermostat"
+            },
+            "vertical-stack": {
+              "name": "Vertical Stack"
+            },
+            "weather-forecast": {
+              "name": "Weather Forecast"
             }
           }
         },