Add back button to history and logbook when coming from more info dialog (#15811)

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -151,20 +151,34 @@ export class MoreInfoDialog extends LitElement {
     return entity?.device_id ?? null;
   }
 
+  private setView(view: View) {
+    history.replaceState(
+      {
+        ...history.state,
+        dialogParams: {
+          ...history.state?.dialogParams,
+          view,
+        },
+      },
+      ""
+    );
+    this._currView = view;
+  }
+
   private _goBack() {
     if (this._childView) {
       this._childView = undefined;
     } else {
-      this._currView = "info";
+      this.setView("info");
     }
   }
 
   private _goToHistory() {
-    this._currView = "history";
+    this.setView("history");
   }
 
   private _goToSettings(): void {
-    this._currView = "settings";
+    this.setView("settings");
   }
 
   private async _showChildView(ev: CustomEvent): Promise<void> {
@@ -206,7 +220,7 @@ export class MoreInfoDialog extends LitElement {
 
   private _goToRelated(ev): void {
     if (!shouldHandleRequestSelectedEvent(ev)) return;
-    this._currView = "related";
+    this.setView("related");
   }
 
   protected render() {

src/dialogs/more-info/ha-more-info-history.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { createSearchParam } from "../../common/url/search-params";
 import "../../components/chart/state-history-charts";
 import "../../components/chart/statistics-chart";
 import {
@@ -100,9 +101,13 @@ export class MoreInfoHistory extends LitElement {
         return;
       }
 
-      this._showMoreHref = `/history?entity_id=${
-        this.entityId
-      }&start_date=${startOfYesterday().toISOString()}`;
+      const params = {
+        entity_id: this.entityId,
+        start_date: startOfYesterday().toISOString(),
+        back: "1",
+      };
+
+      this._showMoreHref = `/history?${createSearchParam(params)}`;
 
       this._getStateHistory();
     }

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -4,6 +4,7 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import { createSearchParam } from "../../common/url/search-params";
 import "../../panels/logbook/ha-logbook";
 import type { HomeAssistant } from "../../types";
 
@@ -55,9 +56,13 @@ export class MoreInfoLogbook extends LitElement {
     super.willUpdate(changedProps);
 
     if (changedProps.has("entityId") && this.entityId) {
-      this._showMoreHref = `/logbook?entity_id=${
-        this.entityId
-      }&start_date=${startOfYesterday().toISOString()}`;
+      const params = {
+        entity_id: this.entityId,
+        start_date: startOfYesterday().toISOString(),
+        back: "1",
+      };
+
+      this._showMoreHref = `/logbook?${createSearchParam(params)}`;
     }
   }
 

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

@@ -21,9 +21,11 @@ import { ensureArray } from "../../common/array/ensure-array";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { LocalStorage } from "../../common/decorators/local-storage";
 import { navigate } from "../../common/navigate";
+import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
   createSearchParam,
   extractSearchParamsObject,
+  removeSearchParam,
 } from "../../common/url/search-params";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { MIN_TIME_BETWEEN_UPDATES } from "../../components/chart/ha-chart-base";
@@ -83,6 +85,9 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
 
   @state() private _areaDeviceLookup?: AreaDeviceLookup;
 
+  @state()
+  private _showBack?: boolean;
+
   @query("state-history-charts")
   private _stateHistoryCharts?: StateHistoryCharts;
 
@@ -126,15 +131,27 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
     ];
   }
 
+  private _goBack(): void {
+    history.back();
+  }
+
   protected render() {
     return html`
       <ha-app-layout>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-            ></ha-menu-button>
+            ${this._showBack
+              ? html`
+                  <ha-icon-button-arrow-prev
+                    @click=${this._goBack}
+                  ></ha-icon-button-arrow-prev>
+                `
+              : html`
+                  <ha-menu-button
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                  ></ha-menu-button>
+                `}
             <div main-title>${this.hass.localize("panel.history")}</div>
             ${this._targetPickerValue
               ? html`
@@ -252,6 +269,17 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
     }
   }
 
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    const searchParams = extractSearchParamsObject();
+    if (searchParams.back === "1" && history.length > 1) {
+      this._showBack = true;
+      navigate(constructUrlCurrentPath(removeSearchParam("back")), {
+        replace: true,
+      });
+    }
+  }
+
   protected updated(changedProps: PropertyValues) {
     if (
       this._targetPickerValue &&

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

@@ -14,9 +14,11 @@ import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { navigate } from "../../common/navigate";
+import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
   createSearchParam,
   extractSearchParamsObject,
+  removeSearchParam,
 } from "../../common/url/search-params";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-date-range-picker";
@@ -41,6 +43,9 @@ export class HaPanelLogbook extends LitElement {
 
   @state() private _ranges?: DateRangePickerRanges;
 
+  @state()
+  private _showBack?: boolean;
+
   public constructor() {
     super();
 
@@ -53,15 +58,27 @@ export class HaPanelLogbook extends LitElement {
     this._time = { range: [start, end] };
   }
 
+  private _goBack(): void {
+    history.back();
+  }
+
   protected render() {
     return html`
       <ha-app-layout>
         <app-header slot="header" fixed>
           <app-toolbar>
-            <ha-menu-button
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-            ></ha-menu-button>
+            ${this._showBack
+              ? html`
+                  <ha-icon-button-arrow-prev
+                    @click=${this._goBack}
+                  ></ha-icon-button-arrow-prev>
+                `
+              : html`
+                  <ha-menu-button
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                  ></ha-menu-button>
+                `}
             <div main-title>${this.hass.localize("panel.logbook")}</div>
             <ha-icon-button
               @click=${this._refreshLogbook}
@@ -132,6 +149,14 @@ export class HaPanelLogbook extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this.hass.loadBackendTranslation("title");
+
+    const searchParams = extractSearchParamsObject();
+    if (searchParams.back === "1" && history.length > 1) {
+      this._showBack = true;
+      navigate(constructUrlCurrentPath(removeSearchParam("back")), {
+        replace: true,
+      });
+    }
   }
 
   public connectedCallback(): void {