diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index b17cc9cbd1..84db41f1e2 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/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`
+
+ `
+ : html`
+ ${this.hass.localize(
+ "ui.panel.config.lovelace.dashboards.picker.edit"
+ )}
+ `,
+ };
+
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;
+ }
+}
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 83e2ebdfd6..1f1c65246f 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -57,10 +57,7 @@ import type {
LovelacePanelConfig,
LovelaceViewConfig,
} from "../../data/lovelace";
-import {
- showAlertDialog,
- showConfirmationDialog,
-} from "../../dialogs/generic/show-dialog-box";
+import { 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`
`
@@ -403,27 +400,6 @@ class HUIRoot extends LitElement {
`
: ""}
- ${this.hass!.user?.is_admin &&
- !this.hass!.config.safe_mode
- ? html`
-
- ${this.hass!.localize(
- "ui.panel.lovelace.menu.configure_ui"
- )}
-
-
- `
- : ""}
${this._editMode
? html`
html`
`
@@ -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): 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);
}
diff --git a/src/translations/en.json b/src/translations/en.json
index 6bc2d87548..b7d34a9b4a 100755
--- a/src/translations/en.json
+++ b/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}?",