Support suggested name and icon for dashboards, add to map (#51592)

Author: timmo001

src/data/lovelace/config/strategy.ts

@@ -2,3 +2,21 @@ export interface LovelaceStrategyConfig {
   type: string;
   [key: string]: any;
 }
+
+/** Must stay aligned with `STRATEGIES.dashboard` in `panels/lovelace/strategies/get-strategy.ts`. */
+export const LOVELACE_BUILTIN_DASHBOARD_STRATEGY_TYPES = [
+  "original-states",
+  "map",
+  "iframe",
+  "areas",
+  "home",
+  "energy",
+] as const;
+
+export type LovelaceBuiltinDashboardStrategyType =
+  (typeof LOVELACE_BUILTIN_DASHBOARD_STRATEGY_TYPES)[number];
+
+/** Dashboard strategy id from the new-dashboard picker: built-in key or `custom:…`. */
+export type LovelaceDashboardStrategyTypeId =
+  | LovelaceBuiltinDashboardStrategyType
+  | `custom:${string}`;

src/data/lovelace/dashboard.ts

@@ -34,6 +34,12 @@ export interface LovelaceDashboardCreateParams extends LovelaceDashboardMutableP
   mode: "storage";
 }
 
+/** Optional suggested values for dashboard creation (for example from a strategy). */
+export interface LovelaceDashboardSuggestions {
+  title?: string;
+  icon?: string;
+}
+
 export const fetchDashboards = (
   hass: HomeAssistant
 ): Promise<LovelaceDashboard[]> =>

src/panels/config/dashboard/dialog-new-dashboard.ts

@@ -19,6 +19,7 @@ import {
   type CustomStrategyEntry,
 } from "../../../data/lovelace_custom_strategies";
 import { fetchResources } from "../../../data/lovelace/resource";
+import type { LovelaceDashboardStrategyTypeId } from "../../../data/lovelace/config/strategy";
 import type {
   LovelaceConfig,
   LovelaceDashboardStrategyConfig,
@@ -345,13 +346,15 @@ class DialogNewDashboard extends LitElement implements HassDialog {
       return;
     }
 
+    let strategyType: LovelaceDashboardStrategyTypeId | undefined;
     if (target.config) {
       config = target.config;
     } else if (target.strategy) {
+      strategyType = target.strategy as LovelaceDashboardStrategyTypeId;
       config = this._generateStrategyConfig(target.strategy);
     }
 
-    await this._params?.selectConfig(config);
+    await this._params?.selectConfig({ config, strategyType });
     this.closeDialog();
   }
 

src/panels/config/dashboard/show-dialog-new-dashboard.ts

@@ -1,8 +1,16 @@
 import { fireEvent } from "../../../common/dom/fire_event";
+import type { LovelaceDashboardStrategyTypeId } from "../../../data/lovelace/config/strategy";
 import type { LovelaceRawConfig } from "../../../data/lovelace/config/types";
 
+/** Payload when the user picks a dashboard template in the new-dashboard dialog. */
+export interface NewDashboardSelection {
+  config: LovelaceRawConfig | undefined;
+  /** Strategy id when the user chose a strategy (built-in or custom); omitted for an empty dashboard. */
+  strategyType?: LovelaceDashboardStrategyTypeId;
+}
+
 export interface NewDashboardDialogParams {
-  selectConfig: (config: LovelaceRawConfig | undefined) => void | Promise<void>;
+  selectConfig: (selection: NewDashboardSelection) => void | Promise<void>;
 }
 
 export const loadNewDashboardDialog = () => import("./dialog-new-dashboard");

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -17,6 +17,7 @@ import type {
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-dashboard-detail";
+import { pickAvailableDashboardUrlPath } from "./pick-available-dashboard-url-path";
 
 @customElement("dialog-lovelace-dashboard-detail")
 export class DialogLovelaceDashboardDetail extends LitElement {
@@ -42,13 +43,17 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     if (this._params.dashboard) {
       this._data = this._params.dashboard;
     } else {
+      const suggestions = this._params.suggestions;
       this._data = {
         show_in_sidebar: true,
-        icon: undefined,
-        title: "",
+        icon: suggestions?.icon,
+        title: suggestions?.title ?? "",
         require_admin: false,
         mode: "storage",
       };
+      if (suggestions?.title) {
+        this._fillUrlPath(suggestions.title);
+      }
     }
   }
 
@@ -255,11 +260,16 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     }
 
     const slugifyTitle = slugify(title, "-");
+    const baseSlug = slugifyTitle.includes("-")
+      ? slugifyTitle
+      : `dashboard-${slugifyTitle}`;
+    const taken = this._params?.takenUrlPaths;
     this._data = {
       ...this._data,
-      url_path: slugifyTitle.includes("-")
-        ? slugifyTitle
-        : `dashboard-${slugifyTitle}`,
+      url_path:
+        taken !== undefined
+          ? pickAvailableDashboardUrlPath(baseSlug, taken)
+          : baseSlug,
     };
   }
 

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -39,6 +39,7 @@ import { fetchResources } from "../../../../data/lovelace/resource";
 import type {
   LovelaceDashboard,
   LovelaceDashboardCreateParams,
+  LovelaceDashboardSuggestions,
 } from "../../../../data/lovelace/dashboard";
 import {
   createDashboard,
@@ -61,7 +62,8 @@ import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-tabs-subpage-data-table";
 import type { HomeAssistant, Route } from "../../../../types";
 import { loadLovelaceResources } from "../../../lovelace/common/load-resources";
-import { getLovelaceStrategy } from "../../../lovelace/strategies/get-strategy";
+import { loadDashboardStrategyWithCreateSuggestions } from "../../../lovelace/strategies/get-strategy";
+import type { NewDashboardSelection } from "../../dashboard/show-dialog-new-dashboard";
 import { showNewDashboardDialog } from "../../dashboard/show-dialog-new-dashboard";
 import { lovelaceTabs } from "../ha-config-lovelace";
 import { showDashboardConfigureStrategyDialog } from "./show-dialog-lovelace-dashboard-configure-strategy";
@@ -565,40 +567,58 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   private async _addDashboard() {
     showNewDashboardDialog(this, {
-      selectConfig: async (config) => {
+      selectConfig: async ({ config }: NewDashboardSelection) => {
+        let fieldSuggestions: LovelaceDashboardSuggestions | undefined;
+
         if (config && isStrategyDashboard(config)) {
-          const strategyType = config.strategy.type;
-          const strategyClass = await getLovelaceStrategy(
-            "dashboard",
-            strategyType
-          );
+          const { strategyClass, fieldSuggestions: suggested } =
+            await loadDashboardStrategyWithCreateSuggestions(
+              this.hass,
+              config.strategy.type
+            );
+          fieldSuggestions = suggested;
 
           if (strategyClass.configRequired) {
             showDashboardConfigureStrategyDialog(this, {
               config: config,
               saveConfig: async (updatedConfig) => {
-                this._openDetailDialog(undefined, undefined, updatedConfig);
+                const { fieldSuggestions: afterConfigure } =
+                  await loadDashboardStrategyWithCreateSuggestions(
+                    this.hass,
+                    updatedConfig.strategy.type
+                  );
+                this._openDetailDialog(
+                  undefined,
+                  undefined,
+                  updatedConfig,
+                  afterConfigure
+                );
               },
             });
             return;
           }
         }
 
-        this._openDetailDialog(undefined, undefined, config);
+        this._openDetailDialog(undefined, undefined, config, fieldSuggestions);
       },
     });
   }
 
   private async _openDetailDialog(
     dashboard?: LovelaceDashboard,
     urlPath?: string,
-    defaultConfig?: LovelaceRawConfig
+    defaultConfig?: LovelaceRawConfig,
+    fieldSuggestions?: LovelaceDashboardSuggestions
   ): Promise<void> {
     const defaultPanel = this.hass.systemData?.default_panel || DEFAULT_PANEL;
     showDashboardDetailDialog(this, {
       dashboard,
       urlPath,
       isDefault: dashboard?.url_path === defaultPanel,
+      suggestions: fieldSuggestions,
+      takenUrlPaths: dashboard
+        ? undefined
+        : this._collectTakenDashboardUrlPaths(),
       createDashboard: async (values: LovelaceDashboardCreateParams) => {
         const created = await createDashboard(this.hass!, values);
         this._dashboards = this._dashboards!.concat(created).sort(
@@ -632,6 +652,18 @@ export class HaConfigLovelaceDashboards extends LitElement {
     });
   }
 
+  private _collectTakenDashboardUrlPaths(): ReadonlySet<string> {
+    const taken = new Set<string>();
+    for (const d of this._dashboards ?? []) {
+      taken.add(d.url_path);
+    }
+    for (const path of Object.keys(this.hass.panels)) {
+      taken.add(path);
+    }
+    taken.add("lovelace");
+    return taken;
+  }
+
   private async _deleteDashboard(
     dashboard: LovelaceDashboard
   ): Promise<boolean> {

src/panels/config/lovelace/dashboards/pick-available-dashboard-url-path.ts

@@ -0,0 +1,16 @@
+/**
+ * Returns `baseSlug` if it is not in `taken`, otherwise `baseSlug-2`, `baseSlug-3`, …
+ */
+export function pickAvailableDashboardUrlPath(
+  baseSlug: string,
+  taken: ReadonlySet<string>
+): string {
+  if (!taken.has(baseSlug)) {
+    return baseSlug;
+  }
+  let n = 2;
+  while (taken.has(`${baseSlug}-${n}`)) {
+    n += 1;
+  }
+  return `${baseSlug}-${n}`;
+}

src/panels/config/lovelace/dashboards/show-dialog-lovelace-dashboard-detail.ts

@@ -2,13 +2,21 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import type {
   LovelaceDashboard,
   LovelaceDashboardCreateParams,
+  LovelaceDashboardSuggestions,
   LovelaceDashboardMutableParams,
 } from "../../../../data/lovelace/dashboard";
 
 export interface LovelaceDashboardDetailsDialogParams {
   dashboard?: LovelaceDashboard;
   urlPath?: string;
   isDefault?: boolean;
+  /** Create flow only; optional suggested values for the form. */
+  suggestions?: LovelaceDashboardSuggestions;
+  /**
+   * Create flow only; reserved url paths (dashboards, panels, and so on) so
+   * auto-generated paths avoid collisions by appending -2, -3, and so on.
+   */
+  takenUrlPaths?: ReadonlySet<string>;
   createDashboard?: (values: LovelaceDashboardCreateParams) => Promise<unknown>;
   updateDashboard: (
     updates: Partial<LovelaceDashboardMutableParams>

src/panels/lovelace/strategies/get-strategy.ts

@@ -15,10 +15,12 @@ import type {
   LovelaceViewConfig,
 } from "../../../data/lovelace/config/view";
 import { isStrategyView } from "../../../data/lovelace/config/view";
+import type { LovelaceDashboardSuggestions } from "../../../data/lovelace/dashboard";
 import type { AsyncReturnType, HomeAssistant } from "../../../types";
 import { cleanLegacyStrategyConfig, isLegacyStrategy } from "./legacy-strategy";
 import type {
   LovelaceDashboardStrategy,
+  LovelaceDashboardStrategyGetCreateSuggestions,
   LovelaceSectionStrategy,
   LovelaceStrategy,
   LovelaceViewStrategy,
@@ -273,3 +275,37 @@ export const expandLovelaceConfigStrategies = async (
 
   return newConfig;
 };
+
+interface DashboardStrategyClassWithSuggestions extends LovelaceDashboardStrategy {
+  getCreateSuggestions?: LovelaceDashboardStrategyGetCreateSuggestions;
+}
+
+async function readDashboardCreateSuggestions(
+  hass: HomeAssistant,
+  strategyClass: DashboardStrategyClassWithSuggestions
+): Promise<LovelaceDashboardSuggestions | undefined> {
+  const fn = strategyClass.getCreateSuggestions;
+  if (typeof fn !== "function") {
+    return undefined;
+  }
+  return fn.call(strategyClass, hass);
+}
+
+/** Loads a dashboard strategy and any optional create-dialog field suggestions. */
+export async function loadDashboardStrategyWithCreateSuggestions(
+  hass: HomeAssistant,
+  strategyType: string
+): Promise<{
+  strategyClass: LovelaceDashboardStrategy;
+  fieldSuggestions: LovelaceDashboardSuggestions | undefined;
+}> {
+  const strategyClass = (await getLovelaceStrategy(
+    "dashboard",
+    strategyType
+  )) as LovelaceDashboardStrategy;
+  const fieldSuggestions = await readDashboardCreateSuggestions(
+    hass,
+    strategyClass
+  );
+  return { strategyClass, fieldSuggestions };
+}

src/panels/lovelace/strategies/map/map-dashboard-strategy.ts

@@ -1,6 +1,8 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
+import type { LovelaceDashboardSuggestions } from "../../../../data/lovelace/dashboard";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
+import type { HomeAssistant } from "../../../../types";
 import type { MapViewStrategyConfig } from "./map-view-strategy";
 
 export type MapDashboardStrategyConfig = MapViewStrategyConfig;
@@ -20,6 +22,15 @@ export class MapDashboardStrategy extends ReactiveElement {
   }
 
   static noEditor = true;
+
+  static getCreateSuggestions(
+    hass: HomeAssistant
+  ): LovelaceDashboardSuggestions {
+    return {
+      title: hass.localize("panel.map"),
+      icon: "mdi:map",
+    };
+  }
 }
 
 declare global {