Refactor suggest card function (#19528)

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -27,6 +27,7 @@ import { addEntitiesToLovelaceView } from "../../../lovelace/editor/add-entities
 import type { LovelaceRowConfig } from "../../../lovelace/entity-rows/types";
 import { LovelaceRow } from "../../../lovelace/entity-rows/types";
 import { EntityRegistryStateEntry } from "../ha-config-device-page";
+import { computeCards } from "../../../lovelace/common/generate-lovelace-config";
 
 @customElement("ha-device-entities-card")
 export class HaDeviceEntitiesCard extends LitElement {
@@ -224,13 +225,17 @@ export class HaDeviceEntitiesCard extends LitElement {
   }
 
   private _addToLovelaceView(): void {
+    const entities = this.entities
+      .filter((entity) => !entity.disabled_by)
+      .map((entity) => entity.entity_id);
+
     addEntitiesToLovelaceView(
       this,
       this.hass,
-      this.entities
+      computeCards(this.hass.states, entities, {
-        .filter((entity) => !entity.disabled_by)
+        title: this.deviceName,
-        .map((entity) => entity.entity_id),
+      }),
-      this.deviceName
+      entities
     );
   }
 

src/panels/lovelace/editor/add-entities-to-view.ts

@@ -1,4 +1,5 @@
 import { LovelacePanelConfig } from "../../../data/lovelace";
+import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import {
   LovelaceConfig,
   fetchConfig,
@@ -13,8 +14,8 @@ import { showSelectViewDialog } from "./select-view/show-select-view-dialog";
 export const addEntitiesToLovelaceView = async (
   element: HTMLElement,
   hass: HomeAssistant,
-  entities: string[],
+  cardConfig: LovelaceCardConfig[],
-  cardTitle?: string
+  entities?: string[]
 ) => {
   hass.loadFragmentTranslation("lovelace");
   const dashboards = await fetchDashboards(hass);
@@ -30,9 +31,9 @@ export const addEntitiesToLovelaceView = async (
   if (mainLovelaceMode !== "storage" && !storageDashs.length) {
     // no storage dashboards, just show the YAML config
     showSuggestCardDialog(element, {
+      cardConfig,
       entities,
       yaml: true,
-      cardTitle,
     });
     return;
   }
@@ -69,9 +70,9 @@ export const addEntitiesToLovelaceView = async (
     if (dashboards.length > storageDashs.length) {
       // all storage dashboards are generated, but we have YAML dashboards just show the YAML config
       showSuggestCardDialog(element, {
+        cardConfig,
         entities,
         yaml: true,
-        cardTitle,
       });
     } else {
       // all storage dashboards are generated
@@ -91,7 +92,7 @@ export const addEntitiesToLovelaceView = async (
 
   if (!storageDashs.length && lovelaceConfig.views.length === 1) {
     showSuggestCardDialog(element, {
-      cardTitle,
+      cardConfig,
       lovelaceConfig: lovelaceConfig!,
       saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
         try {
@@ -114,7 +115,7 @@ export const addEntitiesToLovelaceView = async (
     dashboards,
     viewSelectedCallback: (newUrlPath, selectedDashConfig, viewIndex) => {
       showSuggestCardDialog(element, {
-        cardTitle,
+        cardConfig,
         lovelaceConfig: selectedDashConfig,
         saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
           try {

src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts

@@ -8,7 +8,6 @@ import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
-import { computeCards } from "../../common/generate-lovelace-config";
 import { addCards } from "../config-util";
 import "./hui-card-preview";
 import { showCreateCardDialog } from "./show-create-card-dialog";
@@ -28,11 +27,7 @@ export class HuiDialogSuggestCard extends LitElement {
 
   public showDialog(params: SuggestCardDialogParams): void {
     this._params = params;
-    this._cardConfig =
+    this._cardConfig = params.cardConfig;
-      params.cardConfig ||
-      computeCards(this.hass.states, params.entities, {
-        title: params.cardTitle,
-      });
     if (!Object.isFrozen(this._cardConfig)) {
       this._cardConfig = deepFreeze(this._cardConfig);
     }

src/panels/lovelace/editor/card-editor/show-suggest-card-dialog.ts

@@ -3,12 +3,11 @@ import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { LovelaceConfig } from "../../../../data/lovelace/config/types";
 
 export interface SuggestCardDialogParams {
-  cardTitle?: string;
   lovelaceConfig?: LovelaceConfig;
   yaml?: boolean;
   saveConfig?: (config: LovelaceConfig) => void;
   path?: [number];
-  entities: string[]; // We can pass entity id's that will be added to the config when a card is picked
+  entities?: string[]; // Entities used to generate the card config. We pass this to create dialog when user chooses "Pick own"
   cardConfig?: LovelaceCardConfig[]; // We can pass a suggested config
 }