Migrate hui-dialog-select-dashboard to ha-wa-dialog (#28456)

src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts

@@ -1,13 +1,10 @@
-import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, query, state } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-dialog-footer";
-import "../../../../components/ha-icon-button";
+import "../../../../components/ha-wa-dialog";
-import "../../../../components/ha-md-dialog";
-import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-select";
 import "../../../../components/ha-md-select-option";
 import "../../../../components/ha-spinner";
@@ -18,6 +15,7 @@ import { getDefaultPanelUrlPath } from "../../../../data/panel";
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 @customElement("hui-dialog-select-dashboard")
 export class HuiDialogSelectDashboard extends LitElement {
@@ -35,25 +33,29 @@ export class HuiDialogSelectDashboard extends LitElement {
 
   @state() private _saving = false;
 
-  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+  @state() private _open = false;
 
   public showDialog(params: SelectDashboardDialogParams): void {
     this._config = params.lovelaceConfig;
     this._fromUrlPath = params.urlPath;
     this._params = params;
+    this._open = true;
     this._getDashboards();
   }
 
   public closeDialog(): void {
+    if (this._open) {
+      fireEvent(this, "dialog-closed", { dialog: this.localName });
+    }
     this._saving = false;
     this._dashboards = undefined;
     this._toUrlPath = undefined;
-    this._dialog?.close();
+    this._open = false;
+    this._params = undefined;
   }
 
   private _dialogClosed(): void {
-    this._params = undefined;
+    this.closeDialog();
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render() {
@@ -66,52 +68,42 @@ export class HuiDialogSelectDashboard extends LitElement {
       this.hass.localize("ui.panel.lovelace.editor.select_dashboard.header");
 
     return html`
-      <ha-md-dialog
+      <ha-wa-dialog
-        open
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${dialogTitle}
+        .preventScrimClose=${this._saving}
         @closed=${this._dialogClosed}
-        .ariaLabel=${dialogTitle}
-        .disableCancelAction=${this._saving}
       >
-        <ha-dialog-header slot="headline">
+        ${this._dashboards && !this._saving
-          <ha-icon-button
+          ? html`
-            slot="navigationIcon"
+              <ha-md-select
-            .label=${this.hass.localize("ui.common.close")}
+                .label=${this.hass.localize(
-            .path=${mdiClose}
+                  "ui.panel.lovelace.editor.select_view.dashboard_label"
-            @click=${this.closeDialog}
+                )}
-            .disabled=${this._saving}
+                @change=${this._dashboardChanged}
-          ></ha-icon-button>
+                .value=${this._toUrlPath || ""}
-          <span slot="title" .title=${dialogTitle}>${dialogTitle}</span>
+              >
-        </ha-dialog-header>
+                ${this._dashboards.map(
-        <div slot="content">
+                  (dashboard) => html`
-          ${this._dashboards && !this._saving
+                    <ha-md-select-option
-            ? html`
+                      .disabled=${dashboard.mode !== "storage" ||
-                <ha-md-select
+                      dashboard.url_path === this._fromUrlPath ||
-                  .label=${this.hass.localize(
+                      (dashboard.url_path === "lovelace" &&
-                    "ui.panel.lovelace.editor.select_view.dashboard_label"
+                        this._fromUrlPath === null)}
-                  )}
+                      .value=${dashboard.url_path}
-                  @change=${this._dashboardChanged}
+                      >${dashboard.title}</ha-md-select-option
-                  .value=${this._toUrlPath || ""}
+                    >
-                >
+                  `
-                  ${this._dashboards.map(
+                )}
-                    (dashboard) => html`
+              </ha-md-select>
-                      <ha-md-select-option
+            `
-                        .disabled=${dashboard.mode !== "storage" ||
+          : html`<div class="loading">
-                        dashboard.url_path === this._fromUrlPath ||
+              <ha-spinner size="medium"></ha-spinner>
-                        (dashboard.url_path === "lovelace" &&
+            </div>`}
-                          this._fromUrlPath === null)}
+        <ha-dialog-footer slot="footer">
-                        .value=${dashboard.url_path}
-                        >${dashboard.title}</ha-md-select-option
-                      >
-                    `
-                  )}
-                </ha-md-select>
-              `
-            : html`<div class="loading">
-                <ha-spinner size="medium"></ha-spinner>
-              </div>`}
-        </div>
-        <div slot="actions">
           <ha-button
+            slot="secondaryAction"
             appearance="plain"
             @click=${this.closeDialog}
             .disabled=${this._saving}
@@ -119,6 +111,7 @@ export class HuiDialogSelectDashboard extends LitElement {
             ${this.hass!.localize("ui.common.cancel")}
           </ha-button>
           <ha-button
+            slot="primaryAction"
             @click=${this._selectDashboard}
             .disabled=${!this._config ||
             this._fromUrlPath === this._toUrlPath ||
@@ -126,12 +119,31 @@ export class HuiDialogSelectDashboard extends LitElement {
           >
             ${this._params.actionLabel || this.hass!.localize("ui.common.move")}
           </ha-button>
-        </div>
+        </ha-dialog-footer>
-      </ha-md-dialog>
+      </ha-wa-dialog>
     `;
   }
 
   private async _getDashboards() {
+    let dashboards: LovelaceDashboard[] | undefined = this._params!.dashboards;
+    if (!dashboards) {
+      try {
+        dashboards = await fetchDashboards(this.hass);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("Error fetching dashboards:", error);
+
+        showAlertDialog(this, {
+          title: this.hass.localize(
+            "ui.panel.lovelace.editor.select_dashboard.error_title"
+          ),
+          text: this.hass.localize(
+            "ui.panel.lovelace.editor.select_dashboard.error_text"
+          ),
+        });
+      }
+    }
+
     this._dashboards = [
       {
         id: "lovelace",
@@ -141,7 +153,7 @@ export class HuiDialogSelectDashboard extends LitElement {
         title: this.hass.localize("ui.common.default"),
         mode: this.hass.panels.lovelace?.config?.mode,
       },
-      ...(this._params!.dashboards || (await fetchDashboards(this.hass))),
+      ...(dashboards ?? []),
     ];
 
     const defaultPanel = getDefaultPanelUrlPath(this.hass);

src/translations/en.json

@@ -7656,6 +7656,8 @@
             "strategy_type": "strategy"
           },
           "select_dashboard": {
+            "error_title": "Error fetching dashboards",
+            "error_text": "Failed to fetch dashboards, please try again.",
             "header": "Choose a dashboard",
             "cannot_move_to_strategy": "The view cannot be moved because the selected dashboard is auto-generated.",
             "get_config_failed": "Failed to load selected dashboard config.",