Blueprints: Added missing labels & tooltips, optimize input display + text tweaks (#7748)

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

@@ -132,7 +132,7 @@ class HaAutomationPicker extends LitElement {
                 : "hass:pencil-off"}
               .disabled=${!automation.attributes.id}
               title="${this.hass.localize(
-                "ui.panel.config.automation.picker.show_info_automation"
+                "ui.panel.config.automation.picker.edit_automation"
               )}"
             ></ha-icon-button>
           </a>

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -71,7 +71,7 @@ class DialogImportBlueprint extends LitElement {
                   html`<b>${this._result.blueprint.metadata.name}</b>`,
                   "domain",
                   this._result.blueprint.metadata.domain
-                )}
+                )} <br /><br />
                 ${this._result.validation_errors
                   ? html`
                       <p class="error">
@@ -89,7 +89,9 @@ class DialogImportBlueprint extends LitElement {
                       <paper-input
                         id="input"
                         .value=${this._result.suggested_filename}
-                        label="Filename"
+                        .label=${this.hass.localize(
+                          "ui.panel.config.blueprint.add.file_name"
+                        )}
                       ></paper-input>
                     `}
                 <pre>${this._result.raw_data}</pre>`

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -1,6 +1,6 @@
 import "@material/mwc-fab";
 import "@material/mwc-icon-button";
-import { mdiPlus, mdiHelpCircle, mdiDelete } from "@mdi/js";
+import { mdiPlus, mdiHelpCircle, mdiDelete, mdiRobot } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   CSSResult,
@@ -80,7 +80,7 @@ class HaBlueprintOverview extends LitElement {
   });
 
   private _columns = memoizeOne(
-    (_language): DataTableColumnContainer => {
+    (narrow, _language): DataTableColumnContainer => {
       const columns: DataTableColumnContainer = {
         name: {
           title: this.hass.localize(
@@ -92,19 +92,15 @@ class HaBlueprintOverview extends LitElement {
           grows: true,
         },
       };
-      columns.domain = {
-        title: "Domain",
-        sortable: true,
-        filterable: true,
-        direction: "asc",
-        width: "20%",
-      };
-      columns.path = {
-        title: "Path",
-        sortable: true,
-        filterable: true,
-        direction: "asc",
-        width: "20%",
+
+      if (narrow) {
+        columns.name.template = (name, entity: any) => {
+          return html`
+            ${name}<br />
+            <div class="secondary">
+              ${entity.path}
+            </div>
+          `;
         };
         columns.create = {
           title: "",
@@ -114,10 +110,43 @@ class HaBlueprintOverview extends LitElement {
               ? ""
               : html` <mwc-icon-button
                   .blueprint=${blueprint}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.blueprint.overview.use_blueprint"
+                  )}
+                  title=${this.hass.localize(
+                    "ui.panel.config.blueprint.overview.use_blueprint"
+                  )}
                   @click=${(ev) => this._createNew(ev)}
-                ><ha-svg-icon .path=${mdiPlus}></ha-svg-icon
+                  ><ha-svg-icon .path=${mdiRobot}></ha-svg-icon
                 ></mwc-icon-button>`,
         };
+      } else {
+        columns.path = {
+          title: this.hass.localize(
+            "ui.panel.config.blueprint.overview.headers.file_name"
+          ),
+          sortable: true,
+          filterable: true,
+          direction: "asc",
+          width: "25%",
+        };
+        columns.create = {
+          title: "",
+          width: "180px",
+          template: (_, blueprint: any) =>
+            blueprint.error
+              ? ""
+              : html` <mwc-button
+                  .blueprint=${blueprint}
+                  @click=${(ev) => this._createNew(ev)}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.blueprint.overview.use_blueprint"
+                  )}
+                </mwc-button>`,
+        };
+      }
+
       columns.delete = {
         title: "",
         type: "icon-button",
@@ -126,10 +155,14 @@ class HaBlueprintOverview extends LitElement {
             ? ""
             : html` <mwc-icon-button
                 .blueprint=${blueprint}
+                .label=${this.hass.localize(
+                  "ui.panel.config.blueprint.overview.delete_blueprint"
+                )}
                 @click=${(ev) => this._delete(ev)}
                 ><ha-svg-icon .path=${mdiDelete}></ha-svg-icon
               ></mwc-icon-button>`,
       };
+
       return columns;
     }
   );
@@ -142,7 +175,7 @@ class HaBlueprintOverview extends LitElement {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automation}
-        .columns=${this._columns(this.hass.language)}
+        .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._processedBlueprints(this.blueprints)}
         id="entity_id"
         .noDataText=${this.hass.localize(

src/translations/en.json

@@ -1129,7 +1129,7 @@
           },
           "editor": {
             "enable_disable": "Enable/Disable automation",
-            "introduction": "Use automations to bring your home alive.",
+            "introduction": "Use automations to bring your home to live.",
             "default_name": "New Automation",
             "load_error_not_editable": "Only automations in automations.yaml are editable.",
             "load_error_unknown": "Error loading automation ({err_no}).",
@@ -1447,15 +1447,19 @@
             "introduction": "The blueprint editor allows you to create and edit blueprints.",
             "learn_more": "Learn more about blueprints",
             "headers": {
-              "name": "Name"
+              "name": "Name",
+              "domain": "Domain",
+              "file_name": "File name"
             },
             "confirm_delete_header": "Delete this blueprint?",
-            "confirm_delete_text": "Are you sure you want to delete this blueprint",
-            "add_blueprint": "Add blueprint"
+            "confirm_delete_text": "Are you sure you want to delete this blueprint?",
+            "add_blueprint": "Add blueprint",
+            "use_blueprint": "Create automation",
+            "delete_blueprint": "Delete blueprint"
           },
           "add": {
             "header": "Add new blueprint",
-            "import_header": "Import {name} ({domain})",
+            "import_header": "Import \"{name}\" (type: {domain})",
             "import_introduction": "You can import blueprints of other users from Github and the community forums. Enter the URL of the blueprint below.",
             "url": "URL of the blueprint",
             "importing": "Importing blueprint...",
@@ -1463,7 +1467,8 @@
             "saving": "Saving blueprint...",
             "save_btn": "Save blueprint",
             "error_no_url": "Please enter the URL of the blueprint.",
-            "unsupported_blueprint": "This blueprint is not supported"
+            "unsupported_blueprint": "This blueprint is not supported",
+            "file_name": "Local blueprint file name"
           }
         },
         "script": {
@@ -1537,7 +1542,7 @@
             }
           },
           "editor": {
-            "introduction": "Use scenes to bring your home alive.",
+            "introduction": "Use scenes to bring your home to live.",
             "default_name": "New Scene",
             "load_error_not_editable": "Only scenes in scenes.yaml are editable.",
             "load_error_unknown": "Error loading scene ({err_no}).",