Update import blueprint dialog (#13840)

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

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -105,50 +106,61 @@ class DialogImportBlueprint extends LitElement {
                 >
                   <pre>${this._result.raw_data}</pre>
                 </ha-expansion-panel>`
-            : html`${this.hass.localize(
+            : html`
-                  "ui.panel.config.blueprint.add.import_introduction_link",
+                <p>
-                  "community_link",
+                  ${this.hass.localize(
-                  html`<a
+                    "ui.panel.config.blueprint.add.import_introduction"
-                    href="https://www.home-assistant.io/get-blueprints"
+                  )}
-                    target="_blank"
+                </p>
-                    rel="noreferrer noopener"
+                <a
-                    >${this.hass.localize(
+                  href="https://www.home-assistant.io/get-blueprints"
-                      "ui.panel.config.blueprint.add.community_forums"
+                  target="_blank"
-                    )}</a
+                  rel="noreferrer noopener"
-                  >`
+                >
-                )}<ha-textfield
+                  ${this.hass.localize(
+                    "ui.panel.config.blueprint.add.community_forums"
+                  )}
+                  <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+                </a>
+                <ha-textfield
                   id="input"
                   .label=${this.hass.localize(
                     "ui.panel.config.blueprint.add.url"
                   )}
                   .value=${this._url || ""}
                   dialogInitialFocus
-                ></ha-textfield>`}
+                ></ha-textfield>
+              `}
         </div>
+        <mwc-button
+          slot="primaryAction"
+          @click=${this.closeDialog}
+          .disabled=${this._saving}
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </mwc-button>
         ${!this._result
-          ? html`<mwc-button
+          ? html`
-              slot="primaryAction"
+              <mwc-button
-              @click=${this._import}
+                slot="primaryAction"
-              .disabled=${this._importing}
+                @click=${this._import}
-            >
+                .disabled=${this._importing}
-              ${this._importing
-                ? html`<ha-circular-progress
-                    active
-                    size="small"
-                    .title=${this.hass.localize(
-                      "ui.panel.config.blueprint.add.importing"
-                    )}
-                  ></ha-circular-progress>`
-                : ""}
-              ${this.hass.localize("ui.panel.config.blueprint.add.import_btn")}
-            </mwc-button>`
-          : html`<mwc-button
-                slot="secondaryAction"
-                @click=${this.closeDialog}
-                .disabled=${this._saving}
               >
-                ${this.hass.localize("ui.common.cancel")}
+                ${this._importing
+                  ? html`<ha-circular-progress
+                      active
+                      size="small"
+                      .title=${this.hass.localize(
+                        "ui.panel.config.blueprint.add.importing"
+                      )}
+                    ></ha-circular-progress>`
+                  : ""}
+                ${this.hass.localize(
+                  "ui.panel.config.blueprint.add.import_btn"
+                )}
               </mwc-button>
+            `
+          : html`
               <mwc-button
                 slot="primaryAction"
                 @click=${this._save}
@@ -164,7 +176,8 @@ class DialogImportBlueprint extends LitElement {
                     ></ha-circular-progress>`
                   : ""}
                 ${this.hass.localize("ui.panel.config.blueprint.add.save_btn")}
-              </mwc-button>`}
+              </mwc-button>
+            `}
       </ha-dialog>
     `;
   }
@@ -215,9 +228,19 @@ class DialogImportBlueprint extends LitElement {
   static styles = [
     haStyleDialog,
     css`
+      p {
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
       ha-textfield {
         display: block;
-        margin-top: 8px;
+        margin-top: 24px;
+      }
+      a {
+        text-decoration: none;
+      }
+      a ha-svg-icon {
+        --mdc-icon-size: 16px;
       }
     `,
   ];

src/translations/en.json

@@ -2258,15 +2258,15 @@
           "add": {
             "header": "Import a blueprint",
             "import_header": "Blueprint ''{name}''",
-            "import_introduction_link": "You can import blueprints of other users from Github and the {community_link}. Enter the URL of the blueprint below.",
+            "import_introduction": "Import blueprints of other users from GitHub and the community forums by pasting the address below.",
-            "community_forums": "community forums",
+            "community_forums": "View blueprints on the community forums",
-            "url": "URL of the blueprint",
+            "url": "Blueprint address",
             "raw_blueprint": "Blueprint content",
             "importing": "Loading blueprint…",
-            "import_btn": "Preview blueprint",
+            "import_btn": "Preview",
             "saving": "Importing blueprint…",
             "save_btn": "Import blueprint",
-            "error_no_url": "Please enter the URL of the blueprint.",
+            "error_no_url": "Please enter the blueprint address.",
             "unsupported_blueprint": "This blueprint is not supported",
             "file_name": "Blueprint Path"
           }