Add support to add all device entities to Lovelace

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

@@ -27,6 +27,13 @@ import { domainIcon } from "../../../../common/entity/domain_icon";
 // tslint:disable-next-line
 import { HaSwitch } from "../../../../components/ha-switch";
 import { EntityRegistryStateEntry } from "../ha-config-device-page";
+import {
+  fetchConfig,
+  LovelaceConfig,
+  saveConfig,
+} from "../../../../data/lovelace";
+import { showSelectViewDialog } from "../../../lovelace/editor/select-view/show-select-view-dialog";
+import { showEditCardDialog } from "../../../lovelace/editor/card-editor/show-edit-card-dialog";
 
 @customElement("ha-device-entities-card")
 export class HaDeviceEntitiesCard extends LitElement {
@@ -49,51 +56,60 @@ export class HaDeviceEntitiesCard extends LitElement {
           </ha-switch>
         </paper-item>
         ${this.entities.length
-          ? this.entities.map((entry: EntityRegistryStateEntry) => {
-              if (!this._showDisabled && entry.disabled_by) {
-                return "";
-              }
-              const stateObj = this.hass.states[entry.entity_id];
-              return html`
-                <paper-icon-item
-                  .entry=${entry}
-                  class=${classMap({ "disabled-entry": !!entry.disabled_by })}
-                >
-                  ${stateObj
-                    ? html`
-                        <state-badge
-                          @click=${this._openMoreInfo}
-                          .stateObj=${stateObj}
-                          slot="item-icon"
-                        ></state-badge>
-                      `
-                    : html`
-                        <ha-icon
-                          slot="item-icon"
-                          .icon=${domainIcon(computeDomain(entry.entity_id))}
-                        ></ha-icon>
-                      `}
-                  <paper-item-body two-line @click=${this._openMoreInfo}>
-                    <div class="name">${entry.stateName}</div>
-                    <div class="secondary entity-id">${entry.entity_id}</div>
-                  </paper-item-body>
-                  <div class="buttons">
+          ? html`
+              ${this.entities.map((entry: EntityRegistryStateEntry) => {
+                if (!this._showDisabled && entry.disabled_by) {
+                  return "";
+                }
+                const stateObj = this.hass.states[entry.entity_id];
+                return html`
+                  <paper-icon-item
+                    .entry=${entry}
+                    class=${classMap({ "disabled-entry": !!entry.disabled_by })}
+                  >
                     ${stateObj
                       ? html`
-                          <paper-icon-button
+                          <state-badge
                             @click=${this._openMoreInfo}
-                            icon="hass:information-outline"
-                          ></paper-icon-button>
+                            .stateObj=${stateObj}
+                            slot="item-icon"
+                          ></state-badge>
                         `
-                      : ""}
-                    <paper-icon-button
-                      @click=${this._openEditEntry}
-                      icon="hass:settings"
-                    ></paper-icon-button>
-                  </div>
-                </paper-icon-item>
-              `;
-            })
+                      : html`
+                          <ha-icon
+                            slot="item-icon"
+                            .icon=${domainIcon(computeDomain(entry.entity_id))}
+                          ></ha-icon>
+                        `}
+                    <paper-item-body two-line @click=${this._openMoreInfo}>
+                      <div class="name">${entry.stateName}</div>
+                      <div class="secondary entity-id">${entry.entity_id}</div>
+                    </paper-item-body>
+                    <div class="buttons">
+                      ${stateObj
+                        ? html`
+                            <paper-icon-button
+                              @click=${this._openMoreInfo}
+                              icon="hass:information-outline"
+                            ></paper-icon-button>
+                          `
+                        : ""}
+                      <paper-icon-button
+                        @click=${this._openEditEntry}
+                        icon="hass:settings"
+                      ></paper-icon-button>
+                    </div>
+                  </paper-icon-item>
+                `;
+              })}
+              <div class="card-actions">
+                <mwc-button @click=${this._addToLovelaceView}>
+                  ${this.hass.localize(
+                    "ui.panel.config.devices.add_lovelace.add_entities"
+                  )}
+                </mwc-button>
+              </div>
+            `
           : html`
               <div class="config-entry-row">
                 <paper-item-body two-line>
@@ -125,6 +141,51 @@ export class HaDeviceEntitiesCard extends LitElement {
     fireEvent(this, "hass-more-info", { entityId: entry.entity_id });
   }
 
+  private async _addToLovelaceView(): Promise<void> {
+    if ((this.hass!.panels.lovelace?.config as any)?.mode === "yaml") {
+      alert(
+        this.hass.localize(
+          "ui.panel.config.devices.add_lovelace.yaml_unsupported"
+        )
+      );
+      return;
+    }
+    let lovelaceConfig;
+    try {
+      lovelaceConfig = await fetchConfig(this.hass.connection, false);
+    } catch {
+      alert(
+        this.hass.localize(
+          "ui.panel.config.devices.add_lovelace.generated_unsupported"
+        )
+      );
+      return;
+    }
+    showSelectViewDialog(this, {
+      lovelaceConfig,
+      viewSelectedCallback: (view) => this._addCard(lovelaceConfig, view),
+    });
+  }
+
+  private _addCard(lovelaceConfig: LovelaceConfig, view: number): void {
+    showEditCardDialog(this, {
+      lovelaceConfig,
+      saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
+        try {
+          await saveConfig(this.hass!, newConfig);
+        } catch {
+          alert(
+            this.hass.localize(
+              "ui.panel.config.devices.add_lovelace.saving_failed"
+            )
+          );
+        }
+      },
+      path: [view],
+      entities: this.entities.map((entity) => entity.entity_id),
+    });
+  }
+
   static get styles(): CSSResult {
     return css`
       ha-icon {

src/panels/lovelace/components/hui-card-options.ts

@@ -142,7 +142,8 @@ export class HuiCardOptions extends LitElement {
 
   private _editCard(): void {
     showEditCardDialog(this, {
-      lovelace: this.lovelace!,
+      lovelaceConfig: this.lovelace!.config,
+      saveConfig: this.lovelace!.saveConfig,
       path: this.path!,
     });
   }

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

@@ -51,7 +51,7 @@ export class HuiDialogEditCard extends LitElement {
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
     const [view, card] = params.path;
-    this._viewConfig = params.lovelace.config.views[view];
+    this._viewConfig = params.lovelaceConfig.views[view];
     this._cardConfig =
       card !== undefined ? this._viewConfig.cards![card] : undefined;
   }
@@ -283,17 +283,16 @@ export class HuiDialogEditCard extends LitElement {
   }
 
   private async _save(): Promise<void> {
-    const lovelace = this._params!.lovelace;
     this._saving = true;
-    await lovelace.saveConfig(
+    await this._params!.saveConfig(
       this._params!.path.length === 1
         ? addCard(
-            lovelace.config,
+            this._params!.lovelaceConfig,
             this._params!.path as [number],
             this._cardConfig!
           )
         : replaceCard(
-            lovelace.config,
+            this._params!.lovelaceConfig,
             this._params!.path as [number, number],
             this._cardConfig!
           )

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

@@ -1,5 +1,5 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { Lovelace } from "../../types";
+import { LovelaceConfig } from "../../../../data/lovelace";
 
 declare global {
   // for fire event
@@ -13,7 +13,8 @@ const dialogShowEvent = "show-edit-card";
 const dialogTag = "hui-dialog-edit-card";
 
 export interface EditCardDialogParams {
-  lovelace: Lovelace;
+  lovelaceConfig: LovelaceConfig;
+  saveConfig: (config: LovelaceConfig) => void;
   path: [number] | [number, number];
   entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
 }

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

@@ -30,8 +30,8 @@ export class HuiDialogSelectView extends LitElement {
     toggleAttribute(
       this,
       "hide-icons",
-      this._params!.lovelace!.config
-        ? !this._params!.lovelace!.config.views.some((view) => view.icon)
+      this._params?.lovelaceConfig
+        ? !this._params.lovelaceConfig.views.some((view) => view.icon)
         : true
     );
   }
@@ -48,7 +48,7 @@ export class HuiDialogSelectView extends LitElement {
       >
         <h2>Choose a view</h2>
         <hui-views-list 
-        .lovelaceConfig=${this._params!.lovelace.config} 
+        .lovelaceConfig=${this._params!.lovelaceConfig}
         @view-selected=${this._selectView}>
         </hui-view-list>
       </ha-paper-dialog>

src/panels/lovelace/editor/select-view/show-select-view-dialog.ts

@@ -1,8 +1,8 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { Lovelace } from "../../types";
+import { LovelaceConfig } from "../../../../data/lovelace";
 
 export interface SelectViewDialogParams {
-  lovelace: Lovelace;
+  lovelaceConfig: LovelaceConfig;
   viewSelectedCallback: (view: number) => void;
 }
 

src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts

@@ -208,14 +208,15 @@ export class HuiUnusedEntities extends LitElement {
 
   private _selectView(): void {
     showSelectViewDialog(this, {
-      lovelace: this.lovelace!,
+      lovelaceConfig: this.lovelace!.config,
       viewSelectedCallback: (view) => this._addCard(view),
     });
   }
 
   private _addCard(view: number): void {
     showEditCardDialog(this, {
-      lovelace: this.lovelace!,
+      lovelaceConfig: this.lovelace!.config,
+      saveConfig: this.lovelace!.saveConfig,
       path: [view],
       entities: this._selectedEntities,
     });

src/panels/lovelace/ha-panel-lovelace.ts

@@ -50,6 +50,7 @@ class LovelacePanel extends LitElement {
   private mqls?: MediaQueryList[];
 
   private _ignoreNextUpdateEvent = false;
+  private _fetchConfigOnConnect = false;
 
   constructor() {
     super();
@@ -160,6 +161,9 @@ class LovelacePanel extends LitElement {
       // to the states panel to make sure new entities are shown.
       this._state = "loading";
       this._regenerateConfig();
+    } else if (this._fetchConfigOnConnect) {
+      // Config was changed when we were not at the lovelace panel
+      this._fetchConfig(false);
     }
   }
 
@@ -191,6 +195,12 @@ class LovelacePanel extends LitElement {
       this._ignoreNextUpdateEvent = false;
       return;
     }
+    if (!this.isConnected) {
+      // We can't fire events from an element that is connected
+      // Make sure we fetch the config as soon as the user goes back to Lovelace
+      this._fetchConfigOnConnect = true;
+      return;
+    }
     showToast(this, {
       message: this.hass!.localize("ui.panel.lovelace.changed_toast.message"),
       action: {
@@ -206,7 +216,7 @@ class LovelacePanel extends LitElement {
     this._fetchConfig(true);
   }
 
-  private async _fetchConfig(forceDiskRefresh) {
+  private async _fetchConfig(forceDiskRefresh: boolean) {
     let conf: LovelaceConfig;
     let confMode: Lovelace["mode"] = this.panel!.config.mode;
     let confProm: Promise<LovelaceConfig>;

src/panels/lovelace/views/hui-view.ts

@@ -240,7 +240,8 @@ export class HUIView extends LitElement {
 
   private _addCard(): void {
     showEditCardDialog(this, {
-      lovelace: this.lovelace!,
+      lovelaceConfig: this.lovelace!.config,
+      saveConfig: this.lovelace!.saveConfig,
       path: [this.index!],
     });
   }

src/translations/en.json

@@ -1228,6 +1228,12 @@
           "info": "Device info",
           "details": "Here are all the details of your device.",
           "entities": "Entities",
+          "add_lovelace": {
+            "add_entities": "Add all device entities to Lovelace",
+            "yaml_unsupported": "You can not use this function when using Lovelace in YAML mode.",
+            "generated_unsupported": "You can only use this function when you have taken control of Lovelace.",
+            "saving_failed": "Saving Lovelace config failed."
+          },
           "automations": "Automations",
           "confirm_rename_entity_ids": "Do you also want to rename the entity id's of your entities?",
           "data_table": {