Highlight linked config entry again (#30095)

* Highlight linked config entry again

* Fix export

src/panels/config/integrations/ha-config-entry-row.ts

@@ -78,7 +78,7 @@ import { renderConfigEntryError } from "./ha-config-integration-page";
 import "./ha-config-sub-entry-row";
 
 @customElement("ha-config-entry-row")
-class HaConfigEntryRow extends LitElement {
+export class HaConfigEntryRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
@@ -821,6 +821,20 @@ class HaConfigEntryRow extends LitElement {
   static styles = [
     haStyle,
     css`
+      :host {
+        display: block;
+        position: relative;
+      }
+      :host(.highlight)::after {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+        box-shadow:
+          0 0 0 1px rgba(var(--rgb-info-color), 0.5),
+          0 0 12px rgba(var(--rgb-info-color), 0.28);
+        content: "";
+      }
       .expand-button {
         margin: 0 -12px;
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

src/panels/config/integrations/ha-config-integration-page.ts

@@ -13,7 +13,7 @@ import {
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, queryAll, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -64,6 +64,7 @@ import { brandsUrl } from "../../../util/brands-url";
 import { documentationUrl } from "../../../util/documentation-url";
 import { fileDownload } from "../../../util/file_download";
 import "./ha-config-entry-row";
+import type { HaConfigEntryRow } from "./ha-config-entry-row";
 import type { DataEntryFlowProgressExtended } from "./ha-config-integrations";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
 import { showPickConfigEntryDialog } from "./show-pick-config-entry-dialog";
@@ -133,6 +134,13 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
 
   @state() private _domainEntities: Record<string, string[]> = {};
 
+  @queryAll("ha-config-entry-row")
+  private _configEntryRows!: NodeListOf<HaConfigEntryRow>;
+
+  private _handleHashChange = () => {
+    this._searchParms = new URLSearchParams(window.location.hash.substring(1));
+  };
+
   private _domainConfigEntries = memoizeOne(
     (domain: string, configEntries?: ConfigEntry[]): ConfigEntry[] =>
       configEntries
@@ -150,6 +158,17 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         : []
   );
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("hashchange", this._handleHashChange);
+    this._handleHashChange();
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("hashchange", this._handleHashChange);
+  }
+
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeEntityRegistry(this.hass.connection!, (entities) => {
@@ -196,8 +215,8 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
     super.updated(changed);
     if (
       this._searchParms.has("config_entry") &&
-      changed.has("configEntries") &&
-      !changed.get("configEntries") &&
+      ((changed.has("configEntries") && !changed.get("configEntries")) ||
+        changed.has("_searchParms")) &&
       this.configEntries
     ) {
       this._highlightEntry();
@@ -725,9 +744,12 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
   private async _highlightEntry() {
     await nextRender();
     const entryId = this._searchParms.get("config_entry")!;
-    const row = this.shadowRoot!.querySelector(
-      `[data-entry-id="${entryId}"]`
-    ) as any;
+    this._configEntryRows.forEach((entry) =>
+      entry.classList.remove("highlight")
+    );
+    const row = Array.from(this._configEntryRows).find(
+      (entry) => entry.dataset.entryId === entryId
+    );
     if (row) {
       row.scrollIntoView({
         block: "center",
@@ -1097,9 +1119,6 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
         a {
           text-decoration: none;
         }
-        .highlight::after {
-          background-color: var(--info-color);
-        }
         .warning {
           color: var(--error-color);
         }