Allow to select a different dashboard when adding entities / moving cards (#6478)

cast/src/receiver/layout/hc-lovelace.ts

@@ -22,6 +22,8 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
+  public urlPath?: string | null;
+
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -35,6 +37,7 @@ class HcLovelace extends LitElement {
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
       editMode: false,
+      urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
       language: "en",

cast/src/receiver/layout/hc-main.ts

@@ -87,6 +87,7 @@ export class HcMain extends HassElement {
         .hass=${this.hass}
         .lovelaceConfig=${this._lovelaceConfig}
         .viewPath=${this._lovelacePath}
+        .urlPath=${this._urlPath}
         @config-refresh=${this._generateLovelaceConfig}
       ></hc-lovelace>
     `;

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

@@ -14,13 +14,16 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { showMoveCardViewDialog } from "../editor/card-editor/show-move-card-view-dialog";
+import { swapCard, moveCard, addCard, deleteCard } from "../editor/config-util";
-import { swapCard } from "../editor/config-util";
 import { confDeleteCard } from "../editor/delete-card";
 import { Lovelace, LovelaceCard } from "../types";
 import { computeCardSize } from "../common/compute-card-size";
 import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
+import { saveConfig } from "../../../data/lovelace";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
+import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 
 @customElement("hui-card-options")
 export class HuiCardOptions extends LitElement {
@@ -185,9 +188,39 @@ export class HuiCardOptions extends LitElement {
   }
 
   private _moveCard(): void {
-    showMoveCardViewDialog(this, {
+    showSelectViewDialog(this, {
-      path: this.path!,
+      lovelaceConfig: this.lovelace!.config,
-      lovelace: this.lovelace!,
+      urlPath: this.lovelace!.urlPath,
+      allowDashboardChange: true,
+      header: this.hass!.localize("ui.panel.lovelace.editor.move_card.header"),
+      viewSelectedCallback: async (urlPath, selectedDashConfig, viewIndex) => {
+        if (urlPath === this.lovelace!.urlPath) {
+          this.lovelace!.saveConfig(
+            moveCard(this.lovelace!.config, this.path!, [viewIndex])
+          );
+          showSaveSuccessToast(this, this.hass!);
+          return;
+        }
+        try {
+          await saveConfig(
+            this.hass!,
+            urlPath,
+            addCard(
+              selectedDashConfig,
+              [viewIndex],
+              this.lovelace!.config.views[this.path![0]].cards![this.path![1]]
+            )
+          );
+          this.lovelace!.saveConfig(
+            deleteCard(this.lovelace!.config, this.path!)
+          );
+          showSaveSuccessToast(this, this.hass!);
+        } catch (err) {
+          showAlertDialog(this, {
+            text: `Moving failed: ${err.message}`,
+          });
+        }
+      },
     });
   }
 

src/panels/lovelace/components/hui-views-list.ts

@@ -43,7 +43,7 @@ class HuiViewsList extends LitElement {
                     <ha-icon .icon=${view.icon} slot="item-icon"></ha-icon>
                   `
                 : ""}
-              ${view.title || view.path}
+              ${view.title || view.path || "Unnamed view"}
             </paper-icon-item>
           `
         )}

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

@@ -2,69 +2,128 @@ import {
   fetchConfig,
   LovelaceConfig,
   saveConfig,
+  fetchDashboards,
+  LovelacePanelConfig,
 } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { showSuggestCardDialog } from "./card-editor/show-suggest-card-dialog";
 import { showSelectViewDialog } from "./select-view/show-select-view-dialog";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 
 export const addEntitiesToLovelaceView = async (
   element: HTMLElement,
   hass: HomeAssistant,
-  entities: string[],
+  entities: string[]
-  lovelaceConfig?: LovelaceConfig,
-  saveConfigFunc?: (newConfig: LovelaceConfig) => void
 ) => {
-  if ((hass!.panels.lovelace?.config as any)?.mode === "yaml") {
+  const dashboards = await fetchDashboards(hass);
+
+  const storageDashs = dashboards.filter(
+    (dashboard) => dashboard.mode === "storage"
+  );
+
+  const mainLovelaceMode = (hass!.panels.lovelace
+    ?.config as LovelacePanelConfig)?.mode;
+
+  if (mainLovelaceMode !== "storage" && !storageDashs.length) {
+    // no storage dashboards, just show the YAML config
     showSuggestCardDialog(element, {
       entities,
+      yaml: true,
     });
     return;
   }
-  if (!lovelaceConfig) {
+
+  let lovelaceConfig;
+  let urlPath: string | null = null;
+  if (mainLovelaceMode === "storage") {
     try {
       lovelaceConfig = await fetchConfig(hass.connection, null, false);
-    } catch {
+    } catch (e) {
-      alert(
+      // default dashboard is in generated mode
-        hass.localize(
-          "ui.panel.lovelace.editor.add_entities.generated_unsupported"
-        )
-      );
-      return;
     }
   }
-  if (!lovelaceConfig.views.length) {
+
-    alert(
+  if (!lovelaceConfig && storageDashs.length) {
-      "You don't have any Lovelace views, first create a view in Lovelace."
+    // find first dashoard not in generated mode
-    );
+    for (const storageDash of storageDashs) {
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        lovelaceConfig = await fetchConfig(
+          hass.connection,
+          storageDash.url_path,
+          false
+        );
+        urlPath = storageDash.url_path;
+        break;
+      } catch (e) {
+        // dashboard is in generated mode
+      }
+    }
+  }
+
+  if (!lovelaceConfig) {
+    if (dashboards.length > storageDashs.length) {
+      // all storage dashboards are generated, but we have YAML dashboards just show the YAML config
+      showSuggestCardDialog(element, {
+        entities,
+        yaml: true,
+      });
+    } else {
+      // all storage dashboards are generated
+      showAlertDialog(element, {
+        text:
+          "You don't seem to be in control of any dashboard, please take control first.",
+      });
+    }
     return;
   }
-  if (!saveConfigFunc) {
+
-    saveConfigFunc = async (newConfig: LovelaceConfig): Promise<void> => {
+  if (!storageDashs.length && !lovelaceConfig.views?.length) {
-      try {
+    showAlertDialog(element, {
-        await saveConfig(hass!, null, newConfig);
+      text:
-      } catch {
+        "You don't have any Lovelace views, first create a view in Lovelace.",
-        alert(
+    });
-          hass.localize("ui.panel.config.devices.add_entities.saving_failed")
+    return;
-        );
-      }
-    };
   }
-  if (lovelaceConfig.views.length === 1) {
+
+  if (!storageDashs.length && lovelaceConfig.views.length === 1) {
     showSuggestCardDialog(element, {
       lovelaceConfig: lovelaceConfig!,
-      saveConfig: saveConfigFunc,
+      saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
+        try {
+          await saveConfig(hass!, null, newConfig);
+        } catch (e) {
+          alert(
+            hass.localize("ui.panel.config.devices.add_entities.saving_failed")
+          );
+        }
+      },
       path: [0],
       entities,
     });
     return;
   }
+
   showSelectViewDialog(element, {
     lovelaceConfig,
-    viewSelectedCallback: (view) => {
+    urlPath,
+    allowDashboardChange: true,
+    dashboards,
+    viewSelectedCallback: (newUrlPath, selectedDashConfig, viewIndex) => {
       showSuggestCardDialog(element, {
-        lovelaceConfig: lovelaceConfig!,
+        lovelaceConfig: selectedDashConfig,
-        saveConfig: saveConfigFunc,
+        saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
-        path: [view],
+          try {
+            await saveConfig(hass!, newUrlPath, newConfig);
+          } catch {
+            alert(
+              hass.localize(
+                "ui.panel.config.devices.add_entities.saving_failed"
+              )
+            );
+          }
+        },
+        path: [viewIndex],
         entities,
       });
     },

src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts

@@ -1,101 +0,0 @@
-import "@polymer/paper-item/paper-item";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
-import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
-import type { PolymerChangedEvent } from "../../../../polymer-types";
-import "../../components/hui-views-list";
-import { moveCard } from "../config-util";
-import type { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
-
-@customElement("hui-dialog-move-card-view")
-export class HuiDialogMoveCardView extends LitElement {
-  @internalProperty() private _params?: MoveCardViewDialogParams;
-
-  public async showDialog(params: MoveCardViewDialogParams): Promise<void> {
-    this._params = params;
-    await this.updateComplete;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params) {
-      return html``;
-    }
-    return html`
-      <ha-paper-dialog
-        with-backdrop
-        opened
-        @opened-changed="${this._openedChanged}"
-      >
-        <h2>Choose view to move card</h2>
-        <hui-views-list
-          .lovelaceConfig=${this._params!.lovelace.config}
-          .selected=${this._params!.path![0]}
-          @view-selected=${this._moveCard}
-        >
-        </hui-views-list>
-      </ha-paper-dialog>
-    `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      paper-item {
-        margin: 8px;
-        cursor: pointer;
-      }
-      paper-item[active] {
-        color: var(--primary-color);
-      }
-      paper-item[active]:before {
-        border-radius: 4px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        content: "";
-        background-color: var(--primary-color);
-        opacity: 0.12;
-        transition: opacity 15ms linear;
-        will-change: opacity;
-      }
-    `;
-  }
-
-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
-  }
-
-  private _moveCard(e: CustomEvent): void {
-    const newView = e.detail.view;
-    const path = this._params!.path!;
-    if (newView === path[0]) {
-      return;
-    }
-
-    const lovelace = this._params!.lovelace!;
-    lovelace.saveConfig(moveCard(lovelace.config, path, [newView!]));
-    this._dialog.close();
-  }
-
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
-    if (!(ev.detail as any).value) {
-      this._params = undefined;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-dialog-move-card-view": HuiDialogMoveCardView;
-  }
-}

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

@@ -12,7 +12,6 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -27,7 +26,7 @@ import { SuggestCardDialogParams } from "./show-suggest-card-dialog";
 
 @customElement("hui-dialog-suggest-card")
 export class HuiDialogSuggestCard extends LitElement {
-  @property() protected hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @internalProperty() private _params?: SuggestCardDialogParams;
 
@@ -35,16 +34,10 @@ export class HuiDialogSuggestCard extends LitElement {
 
   @internalProperty() private _saving = false;
 
-  @internalProperty() private _yamlMode = false;
-
-  @query("ha-paper-dialog") private _dialog?: HaPaperDialog;
-
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  public async showDialog(params: SuggestCardDialogParams): Promise<void> {
+  public showDialog(params: SuggestCardDialogParams): void {
     this._params = params;
-    this._yamlMode =
-      (this.hass.panels.lovelace?.config as any)?.mode === "yaml";
     this._cardConfig =
       params.cardConfig ||
       computeCards(
@@ -58,15 +51,15 @@ export class HuiDialogSuggestCard extends LitElement {
     if (!Object.isFrozen(this._cardConfig)) {
       this._cardConfig = deepFreeze(this._cardConfig);
     }
-    if (this._dialog) {
-      this._dialog.open();
-    }
     if (this._yamlEditor) {
       this._yamlEditor.setValue(this._cardConfig);
     }
   }
 
   protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
     return html`
       <ha-paper-dialog with-backdrop opened>
         <h2>
@@ -87,7 +80,7 @@ export class HuiDialogSuggestCard extends LitElement {
                 </div>
               `
             : ""}
-          ${this._yamlMode && this._cardConfig
+          ${this._params.yaml && this._cardConfig
             ? html`
                 <div class="editor">
                   <ha-yaml-editor
@@ -99,11 +92,11 @@ export class HuiDialogSuggestCard extends LitElement {
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
           <mwc-button @click="${this._close}">
-            ${this._yamlMode
+            ${this._params.yaml
               ? this.hass!.localize("ui.common.close")
               : this.hass!.localize("ui.common.cancel")}
           </mwc-button>
-          ${!this._yamlMode
+          ${!this._params.yaml
             ? html`
                 <mwc-button @click="${this._pickCard}"
                   >${this.hass!.localize(
@@ -174,10 +167,8 @@ export class HuiDialogSuggestCard extends LitElement {
   }
 
   private _close(): void {
-    this._dialog!.close();
     this._params = undefined;
     this._cardConfig = undefined;
-    this._yamlMode = false;
   }
 
   private _pickCard(): void {

src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts

@@ -1,37 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { Lovelace } from "../../types";
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "show-move-card-view": MoveCardViewDialogParams;
-  }
-}
-
-let registeredDialog = false;
-
-export interface MoveCardViewDialogParams {
-  path: [number, number];
-  lovelace: Lovelace;
-}
-
-const registerEditCardDialog = (element: HTMLElement): Event =>
-  fireEvent(element, "register-dialog", {
-    dialogShowEvent: "show-move-card-view",
-    dialogTag: "hui-dialog-move-card-view",
-    dialogImport: () =>
-      import(
-        /* webpackChunkName: "hui-dialog-move-card-view" */ "./hui-dialog-move-card-view"
-      ),
-  });
-
-export const showMoveCardViewDialog = (
-  element: HTMLElement,
-  moveCardViewDialogParams: MoveCardViewDialogParams
-): void => {
-  if (!registeredDialog) {
-    registeredDialog = true;
-    registerEditCardDialog(element);
-  }
-  fireEvent(element, "show-move-card-view", moveCardViewDialogParams);
-};

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

@@ -3,6 +3,7 @@ import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 
 export interface SuggestCardDialogParams {
   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

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

@@ -4,32 +4,46 @@ import {
   LitElement,
   internalProperty,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
-import { toggleAttribute } from "../../../../common/dom/toggle_attribute";
 import "../../../../components/dialog/ha-paper-dialog";
-import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
-import type { PolymerChangedEvent } from "../../../../polymer-types";
 import "../../components/hui-views-list";
 import type { SelectViewDialogParams } from "./show-select-view-dialog";
+import { HomeAssistant } from "../../../../types";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import {
+  LovelaceDashboard,
+  fetchDashboards,
+  LovelaceConfig,
+  fetchConfig,
+} from "../../../../data/lovelace";
 
 @customElement("hui-dialog-select-view")
 export class HuiDialogSelectView extends LitElement {
+  public hass!: HomeAssistant;
+
   @internalProperty() private _params?: SelectViewDialogParams;
 
-  public async showDialog(params: SelectViewDialogParams): Promise<void> {
+  @internalProperty() private _dashboards: LovelaceDashboard[] = [];
+
+  @internalProperty() private _urlPath?: string | null;
+
+  @internalProperty() private _config?: LovelaceConfig;
+
+  public showDialog(params: SelectViewDialogParams): void {
+    this._config = params.lovelaceConfig;
+    this._urlPath = params.urlPath;
     this._params = params;
-    await this.updateComplete;
+    if (this._params.allowDashboardChange) {
+      this._getDashboards();
+    }
   }
 
-  protected updated(changedProps) {
+  public closeDialog(): void {
-    super.updated(changedProps);
+    this._params = undefined;
-    toggleAttribute(
-      this,
-      "hide-icons",
-      this._params?.lovelaceConfig
-        ? !this._params.lovelaceConfig.views.some((view) => view.icon)
-        : true
-    );
   }
 
   protected render(): TemplateResult {
@@ -37,35 +51,96 @@ export class HuiDialogSelectView extends LitElement {
       return html``;
     }
     return html`
-      <ha-paper-dialog
+      <ha-dialog
-        with-backdrop
+        open
-        opened
+        @closed=${this.closeDialog}
-        @opened-changed="${this._openedChanged}"
+        hideActions
+        .heading=${createCloseHeading(
+          this.hass,
+          this._params.header ||
+            this.hass.localize("ui.panel.lovelace.editor.select_view.header")
+        )}
       >
-        <h2>Choose a view</h2>
+        ${this._params.allowDashboardChange
-        <hui-views-list
+          ? html`<ha-paper-dropdown-menu
-          .lovelaceConfig=${this._params!.lovelaceConfig}
+              .label=${this.hass.localize(
-          @view-selected=${this._selectView}
+                "ui.panel.lovelace.editor.select_view.dashboard_label"
-        >
+              )}
-        </hui-views-list>
+              dynamic-align
-      </ha-paper-dialog>
+              .disabled=${!this._dashboards.length}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${this._urlPath || this.hass.defaultPanel}
+                @iron-select=${this._dashboardChanged}
+                attr-for-selected="url-path"
+              >
+                <paper-item
+                  .urlPath=${"lovelace"}
+                  .disabled=${(this.hass.panels.lovelace?.config as any)
+                    ?.mode === "yaml"}
+                >
+                  Default
+                </paper-item>
+                ${this._dashboards.map((dashboard) => {
+                  if (!this.hass.user!.is_admin && dashboard.require_admin) {
+                    return "";
+                  }
+                  return html`
+                    <paper-item
+                      .disabled=${dashboard.mode !== "storage"}
+                      .urlPath=${dashboard.url_path}
+                      >${dashboard.title}</paper-item
+                    >
+                  `;
+                })}
+              </paper-listbox>
+            </ha-paper-dropdown-menu>`
+          : ""}
+        ${this._config
+          ? html` <hui-views-list
+              .lovelaceConfig=${this._config}
+              @view-selected=${this._selectView}
+            >
+            </hui-views-list>`
+          : html`<div>No config found.</div>`}
+      </ha-dialog>
     `;
   }
 
-  private get _dialog(): HaPaperDialog {
+  private async _getDashboards() {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
+    this._dashboards =
+      this._params!.dashboards || (await fetchDashboards(this.hass));
+  }
+
+  private async _dashboardChanged(ev: CustomEvent) {
+    let urlPath: string | null = ev.detail.item.urlPath;
+    if (urlPath === this._urlPath) {
+      return;
+    }
+    if (urlPath === "lovelace") {
+      urlPath = null;
+    }
+    this._urlPath = urlPath;
+    try {
+      this._config = await fetchConfig(this.hass.connection, urlPath, false);
+    } catch (e) {
+      this._config = undefined;
+    }
   }
 
   private _selectView(e: CustomEvent): void {
     const view: number = e.detail.view;
-    this._params!.viewSelectedCallback(view);
+    this._params!.viewSelectedCallback(this._urlPath!, this._config!, view);
-    this._dialog.close();
+    this.closeDialog();
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
+  static get styles(): CSSResult {
-    if (!(ev.detail as any).value) {
+    return css`
-      this._params = undefined;
+      ha-paper-dropdown-menu {
-    }
+        width: 100%;
+      }
+    `;
   }
 }
 

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

@@ -1,9 +1,17 @@
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { LovelaceConfig } from "../../../../data/lovelace";
+import { LovelaceConfig, LovelaceDashboard } from "../../../../data/lovelace";
 
 export interface SelectViewDialogParams {
   lovelaceConfig: LovelaceConfig;
-  viewSelectedCallback: (view: number) => void;
+  allowDashboardChange: boolean;
+  dashboards?: LovelaceDashboard[];
+  urlPath?: string | null;
+  header?: string;
+  viewSelectedCallback: (
+    urlPath: string | null,
+    config: LovelaceConfig,
+    view: number
+  ) => void;
 }
 
 export const showSelectViewDialog = (

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

@@ -31,13 +31,14 @@ import type { LovelaceConfig } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import { computeUnusedEntities } from "../../common/compute-unused-entities";
 import type { Lovelace } from "../../types";
-import { addEntitiesToLovelaceView } from "../add-entities-to-view";
 import "../../../../components/ha-svg-icon";
 import { mdiPlus } from "@mdi/js";
+import { showSuggestCardDialog } from "../card-editor/show-suggest-card-dialog";
+import { showSelectViewDialog } from "../select-view/show-select-view-dialog";
 
 @customElement("hui-unused-entities")
 export class HuiUnusedEntities extends LitElement {
-  @property({ attribute: false }) public lovelace?: Lovelace;
+  @property({ attribute: false }) public lovelace!: Lovelace;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -48,7 +49,7 @@ export class HuiUnusedEntities extends LitElement {
   @internalProperty() private _selectedEntities: string[] = [];
 
   private get _config(): LovelaceConfig {
-    return this.lovelace!.config;
+    return this.lovelace.config;
   }
 
   private _columns = memoizeOne((narrow: boolean) => {
@@ -226,13 +227,27 @@ export class HuiUnusedEntities extends LitElement {
   }
 
   private _addToLovelaceView(): void {
-    addEntitiesToLovelaceView(
+    if (this.lovelace.config.views.length === 1) {
-      this,
+      showSuggestCardDialog(this, {
-      this.hass,
+        lovelaceConfig: this.lovelace.config!,
-      this._selectedEntities,
+        saveConfig: this.lovelace.saveConfig,
-      this.lovelace!.config,
+        path: [0],
-      this.lovelace!.saveConfig
+        entities: this._selectedEntities,
-    );
+      });
+      return;
+    }
+    showSelectViewDialog(this, {
+      lovelaceConfig: this.lovelace.config,
+      allowDashboardChange: false,
+      viewSelectedCallback: (_urlPath, _selectedDashConfig, viewIndex) => {
+        showSuggestCardDialog(this, {
+          lovelaceConfig: this.lovelace.config!,
+          saveConfig: this.lovelace.saveConfig,
+          path: [viewIndex],
+          entities: this._selectedEntities,
+        });
+      },
+    });
   }
 
   static get styles(): CSSResult {

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

@@ -327,6 +327,7 @@ class LovelacePanel extends LitElement {
     this.lovelace = {
       config,
       mode,
+      urlPath: this.urlPath,
       editMode: this.lovelace ? this.lovelace.editMode : false,
       language: this.hass!.language,
       enableFullEditMode: () => {

src/panels/lovelace/types.ts

@@ -17,6 +17,7 @@ declare global {
 export interface Lovelace {
   config: LovelaceConfig;
   editMode: boolean;
+  urlPath: string | null;
   mode: "generated" | "yaml" | "storage";
   language: string;
   enableFullEditMode: () => void;

src/translations/en.json

@@ -1941,6 +1941,13 @@
             "move": "Move to View",
             "options": "More options"
           },
+          "move_card": {
+            "header": "Choose a view to move the card to"
+          },
+          "select_view": {
+            "header": "Choose a view",
+            "dashboard_label": "Dashboard"
+          },
           "suggest_card": {
             "header": "We created a suggestion for you",
             "create_own": "Pick different card",