Move Editing of Dashboard to config page

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

@@ -3,6 +3,7 @@ import {
   mdiCheckCircleOutline,
   mdiDotsVertical,
   mdiOpenInNew,
+  mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
@@ -13,6 +14,7 @@ import memoize from "memoize-one";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { navigate } from "../../../../common/navigate";
 import { stringCompare } from "../../../../common/string/compare";
+import { addSearchParam } from "../../../../common/url/search-params";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
@@ -31,7 +33,10 @@ import {
   LovelacePanelConfig,
   updateDashboard,
 } from "../../../../data/lovelace";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../../types";
@@ -42,11 +47,11 @@ import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-deta
 export class HaConfigLovelaceDashboards extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @property() public narrow!: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @property() public route!: Route;
+  @property({ attribute: false }) public route!: Route;
 
   @state() private _dashboards: LovelaceDashboard[] = [];
 
@@ -192,6 +197,37 @@ export class HaConfigLovelaceDashboards extends LitElement {
               `,
       };
 
+      columns.edit_path = {
+        title: "",
+        label: this.hass.localize(
+          "ui.panel.config.lovelace.dashboards.picker.headers.edit"
+        ),
+        width: "100px",
+        template: (edit_path, dashboard) =>
+          narrow
+            ? html`
+                <ha-icon-button
+                  .path=${mdiPencil}
+                  .urlPath=${edit_path}
+                  .mode=${dashboard.mode}
+                  @click=${this._editDashboard}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.lovelace.dashboards.picker.edit"
+                  )}
+                ></ha-icon-button>
+              `
+            : html`
+                <mwc-button
+                  .urlPath=${edit_path}
+                  .mode=${dashboard.mode}
+                  @click=${this._editDashboard}
+                  >${this.hass.localize(
+                    "ui.panel.config.lovelace.dashboards.picker.edit"
+                  )}</mwc-button
+                >
+              `,
+      };
+
       return columns;
     }
   );
@@ -210,6 +246,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         show_in_sidebar: isDefault,
         require_admin: false,
         url_path: "lovelace",
+        edit_path: "lovelace?edit=1",
         mode: defaultMode,
         filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
         iconColor: "var(--primary-color)",
@@ -222,6 +259,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         show_in_sidebar: true,
         mode: "storage",
         url_path: "energy",
+        edit_path: "config/energy",
         filename: "",
         iconColor: "var(--label-badge-yellow)",
       });
@@ -232,6 +270,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
         .sort((a, b) => stringCompare(a.title, b.title))
         .map((dashboard) => ({
           filename: "",
+          edit_path: `${dashboard.url_path}?${addSearchParam({ edit: "1" })}`,
           ...dashboard,
           default: defaultUrlPath === dashboard.url_path,
         }))
@@ -257,7 +296,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this._dashboards
         )}
         .data=${this._getItems(this._dashboards)}
-        @row-click=${this._editDashboard}
+        @row-click=${this._updateDashboard}
         id="url_path"
         hasFab
         clickable
@@ -316,7 +355,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
     navigate(`/${(ev.target as any).urlPath}`);
   }
 
-  private _editDashboard(ev: CustomEvent) {
+  private _updateDashboard(ev: CustomEvent) {
     const urlPath = (ev.detail as RowClickedEvent).id;
 
     if (urlPath === "energy") {
@@ -327,6 +366,16 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._openDialog(dashboard, urlPath);
   }
 
+  private _editDashboard(ev: CustomEvent) {
+    if ((ev.detail as any).mode === "yaml") {
+      showAlertDialog(this, {
+        text: "The edit UI is not available when in YAML mode.",
+      });
+      return;
+    }
+    navigate(`/${(ev.target as any).urlPath}`);
+  }
+
   private _addDashboard() {
     this._openDialog();
   }
@@ -387,3 +436,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
     ev.currentTarget.blur();
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-lovelace-dashboards": HaConfigLovelaceDashboards;
+  }
+}

src/panels/lovelace/hui-root.ts

@@ -57,10 +57,7 @@ import type {
   LovelacePanelConfig,
   LovelaceViewConfig,
 } from "../../data/lovelace";
-import {
+import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../dialogs/generic/show-dialog-box";
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import "../../layouts/ha-app-layout";
@@ -240,7 +237,7 @@ class HUIRoot extends LitElement {
                           ${this.lovelace!.config.views.map(
                             (view) => html`
                               <paper-tab
-                                aria-label=${view.title}
+                                .aria-label=${view.title}
                                 class=${classMap({
                                   "hide-tab": Boolean(
                                     view.visible !== undefined &&
@@ -255,7 +252,7 @@ class HUIRoot extends LitElement {
                                 ${view.icon
                                   ? html`
                                       <ha-icon
-                                        title=${view.title}
+                                        .title=${view.title}
                                         .icon=${view.icon}
                                       ></ha-icon>
                                     `
@@ -403,27 +400,6 @@ class HUIRoot extends LitElement {
                                 </mwc-list-item>
                               `
                             : ""}
-                          ${this.hass!.user?.is_admin &&
-                          !this.hass!.config.safe_mode
-                            ? html`
-                                <mwc-list-item
-                                  graphic="icon"
-                                  aria-label=${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.configure_ui"
-                                  )}
-                                  @request-selected=${this
-                                    ._handleEnableEditMode}
-                                >
-                                  ${this.hass!.localize(
-                                    "ui.panel.lovelace.menu.configure_ui"
-                                  )}
-                                  <ha-svg-icon
-                                    slot="graphic"
-                                    .path=${mdiPencil}
-                                  ></ha-svg-icon>
-                                </mwc-list-item>
-                              `
-                            : ""}
                           ${this._editMode
                             ? html`
                                 <a
@@ -469,7 +445,7 @@ class HUIRoot extends LitElement {
                     ${this.lovelace!.config.views.map(
                       (view) => html`
                         <paper-tab
-                          aria-label=${view.title}
+                          .aria-label=${view.title}
                           class=${classMap({
                             "hide-tab": Boolean(
                               !this._editMode &&
@@ -498,7 +474,7 @@ class HUIRoot extends LitElement {
                           ${view.icon
                             ? html`
                                 <ha-icon
-                                  title=${view.title}
+                                  .title=${view.title}
                                   .icon=${view.icon}
                                 ></ha-icon>
                               `
@@ -674,7 +650,6 @@ class HUIRoot extends LitElement {
     return (
       (this.narrow && this._conversation(this.hass.config.components)) ||
       this._editMode ||
-      (this.hass!.user?.is_admin && !this.hass!.config.safe_mode) ||
       (this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
         "yaml" ||
       this._yamlMode
@@ -747,19 +722,6 @@ class HUIRoot extends LitElement {
     showVoiceCommandDialog(this);
   }
 
-  private _handleEnableEditMode(ev: CustomEvent<RequestSelectedDetail>): void {
-    if (!shouldHandleRequestSelectedEvent(ev)) {
-      return;
-    }
-    if (this._yamlMode) {
-      showAlertDialog(this, {
-        text: "The edit UI is not available when in YAML mode.",
-      });
-      return;
-    }
-    this.lovelace!.setEditMode(true);
-  }
-
   private _editModeDisable(): void {
     this.lovelace!.setEditMode(false);
   }

src/translations/en.json

@@ -1621,9 +1621,11 @@
                 "require_admin": "Admin only",
                 "sidebar": "Show in sidebar",
                 "filename": "Filename",
-                "url": "Open"
+                "url": "Open",
+                "edit": "Edit"
               },
               "open": "Open",
+              "edit": "Edit",
               "add_dashboard": "Add dashboard"
             },
             "confirm_delete_title": "Delete {dashboard_title}?",