Add link to the community forums to find more blueprints (#7947)

* Add link to the community forums to find more blueprints

* Apply suggestions from code review

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/components/data-table/ha-data-table.ts

@@ -98,6 +98,12 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Boolean }) public hasFab = false;
 
+  /**
+   * Add an extra rows at the bottom of the datatabel
+   * @type {TemplateResult}
+   */
+  @property({ attribute: false }) public appendRow?;
+
   @property({ type: Boolean, attribute: "auto-height" })
   public autoHeight = false;
 
@@ -126,6 +132,8 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
+  private _items: DataTableRowData[] = [];
+
   private _checkableRowsCount?: number;
 
   private _checkedRows: string[] = [];
@@ -318,10 +326,13 @@ export class HaDataTable extends LitElement {
                   @scroll=${this._saveScrollPos}
                 >
                   ${scroll({
-                    items: !this.hasFab
+                    items: this._items,
-                      ? this._filteredData
-                      : [...this._filteredData, ...[{ empty: true }]],
                     renderItem: (row: DataTableRowData, index) => {
+                      if (row.append) {
+                        return html`
+                          <div class="mdc-data-table__row">${row.content}</div>
+                        `;
+                      }
                       if (row.empty) {
                         return html` <div class="mdc-data-table__row"></div> `;
                       }
@@ -447,6 +458,20 @@ export class HaDataTable extends LitElement {
     if (this.curRequest !== curRequest) {
       return;
     }
+
+    if (this.appendRow || this.hasFab) {
+      this._items = [...data];
+
+      if (this.appendRow) {
+        this._items.push({ append: true, content: this.appendRow });
+      }
+
+      if (this.hasFab) {
+        this._items.push({ empty: true });
+      }
+    } else {
+      this._items = data;
+    }
     this._filteredData = data;
   }
 

src/dialogs/generic/dialog-box.ts

@@ -17,17 +17,17 @@ import "../../components/ha-switch";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
-import { DialogParams } from "./show-dialog-box";
+import { DialogBoxParams } from "./show-dialog-box";
 
 @customElement("dialog-box")
 class DialogBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DialogParams;
+  @internalProperty() private _params?: DialogBoxParams;
 
   @internalProperty() private _value?: string;
 
-  public async showDialog(params: DialogParams): Promise<void> {
+  public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
     if (params.prompt) {
       this._value = params.defaultValue;
@@ -55,8 +55,8 @@ class DialogBox extends LitElement {
     return html`
       <ha-dialog
         open
-        ?scrimClickAction=${this._params.prompt}
+        ?scrimClickAction=${confirmPrompt}
-        ?escapeKeyAction=${this._params.prompt}
+        ?escapeKeyAction=${confirmPrompt}
         @closed=${this._dialogClosed}
         defaultAction="ignore"
         .heading=${this._params.title
@@ -140,10 +140,10 @@ class DialogBox extends LitElement {
   }
 
   private _dialogClosed(ev) {
-    if (ev.detail.action === "ignore") {
+    if (this._params?.prompt && ev.detail.action === "ignore") {
       return;
     }
-    this.closeDialog();
+    this._dismiss();
   }
 
   private _close(): void {

src/dialogs/generic/show-dialog-box.ts

@@ -1,31 +1,31 @@
 import { TemplateResult } from "lit-html";
 import { fireEvent } from "../../common/dom/fire_event";
 
-interface BaseDialogParams {
+interface BaseDialogBoxParams {
   confirmText?: string;
   text?: string | TemplateResult;
   title?: string;
   warning?: boolean;
 }
 
-export interface AlertDialogParams extends BaseDialogParams {
+export interface AlertDialogParams extends BaseDialogBoxParams {
   confirm?: () => void;
 }
 
-export interface ConfirmationDialogParams extends BaseDialogParams {
+export interface ConfirmationDialogParams extends BaseDialogBoxParams {
   dismissText?: string;
   confirm?: () => void;
   cancel?: () => void;
 }
 
-export interface PromptDialogParams extends BaseDialogParams {
+export interface PromptDialogParams extends BaseDialogBoxParams {
   inputLabel?: string;
   inputType?: string;
   defaultValue?: string;
   confirm?: (out?: string) => void;
 }
 
-export interface DialogParams
+export interface DialogBoxParams
   extends ConfirmationDialogParams,
     PromptDialogParams {
   confirm?: (out?: string) => void;
@@ -37,10 +37,10 @@ export const loadGenericDialog = () => import("./dialog-box");
 
 const showDialogHelper = (
   element: HTMLElement,
-  dialogParams: DialogParams,
+  dialogParams: DialogBoxParams,
   extra?: {
-    confirmation?: DialogParams["confirmation"];
+    confirmation?: DialogBoxParams["confirmation"];
-    prompt?: DialogParams["prompt"];
+    prompt?: DialogBoxParams["prompt"];
   }
 ) =>
   new Promise((resolve) => {

src/layouts/hass-tabs-subpage-data-table.ts

@@ -60,6 +60,12 @@ export class HaTabsSubpageDataTable extends LitElement {
    */
   @property({ type: Boolean }) public hasFab = false;
 
+  /**
+   * Add an extra rows at the bottom of the datatabel
+   * @type {TemplateResult}
+   */
+  @property({ attribute: false }) public appendRow?;
+
   /**
    * Field with a unique id per entry in data.
    * @type {String}
@@ -171,6 +177,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .noDataText=${this.noDataText}
           .dir=${computeRTLDirection(this.hass)}
           .clickable=${this.clickable}
+          .appendRow=${this.appendRow}
         >
           ${!this.narrow
             ? html`

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

@@ -107,7 +107,16 @@ class DialogImportBlueprint extends LitElement {
                   <pre>${this._result.raw_data}</pre>
                 </ha-expansion-panel>`
             : html`${this.hass.localize(
-                  "ui.panel.config.blueprint.add.import_introduction"
+                  "ui.panel.config.blueprint.add.import_introduction_link",
+                  "community_link",
+                  html`<a
+                    href="https://www.home-assistant.io/get-blueprints"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    >${this.hass.localize(
+                      "ui.panel.config.blueprint.add.community_forums"
+                    )}</a
+                  >`
                 )}<paper-input
                   id="input"
                   .label=${this.hass.localize(

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

@@ -170,6 +170,23 @@ class HaBlueprintOverview extends LitElement {
           "ui.panel.config.blueprint.overview.no_blueprints"
         )}
         hasFab
+        .appendRow=${html` <div
+          class="mdc-data-table__cell"
+          style="width: 100%; text-align: center;"
+          role="cell"
+        >
+          <a
+            href="https://www.home-assistant.io/get-blueprints"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <mwc-button
+              >${this.hass.localize(
+                "ui.panel.config.blueprint.overview.discover_more"
+              )}</mwc-button
+            >
+          </a>
+        </div>`}
       >
         <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
           <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>

src/translations/en.json

@@ -1472,12 +1472,14 @@
             "confirm_delete_text": "Are you sure you want to delete this blueprint?",
             "add_blueprint": "Import blueprint",
             "use_blueprint": "Create automation",
-            "delete_blueprint": "Delete blueprint"
+            "delete_blueprint": "Delete blueprint",
+            "discover_more": "Discover more Blueprints"
           },
           "add": {
             "header": "Import a blueprint",
             "import_header": "Blueprint \"{name}\"",
-            "import_introduction": "You can import blueprints of other users from Github and the community forums. Enter the URL of the blueprint below.",
+            "import_introduction_link": "You can import blueprints of other users from Github and the {community_link}. Enter the URL of the blueprint below.",
+            "community_forums": "community forums",
             "url": "URL of the blueprint",
             "raw_blueprint": "Blueprint content",
             "importing": "Loading blueprint...",