New layout for integration config

src/components/ha-related-items.ts

@@ -95,7 +95,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
                 )}:
               </h3>
               <a
-                href="/config/integrations/config_entry/${relatedConfigEntryId}"
+                href="/config/integrations#${relatedConfigEntryId}"
                 @click=${this._close}
               >
                 ${this.hass.localize(`component.${entry.domain}.title`)}:

src/data/config_entries.ts

@@ -10,13 +10,28 @@ export interface ConfigEntry {
   supports_options: boolean;
 }
 
+export interface ConfigEntryMutableParams {
+  title: string;
+}
+
 export interface ConfigEntrySystemOptions {
   disable_new_entities: boolean;
 }
 
 export const getConfigEntries = (hass: HomeAssistant) =>
   hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry");
 
+export const updateConfigEntry = (
+  hass: HomeAssistant,
+  configEntryId: string,
+  updatedValues: Partial<ConfigEntryMutableParams>
+) =>
+  hass.callWS<ConfigEntry>({
+    type: "config_entries/update",
+    entry_id: configEntryId,
+    ...updatedValues,
+  });
+
 export const deleteConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
   hass.callApi<{
     require_restart: boolean;

src/panels/config/areas/ha-config-areas.ts

@@ -68,13 +68,6 @@ class HaConfigAreas extends HassRouterPage {
     }
   }
 
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this.addEventListener("hass-reload-entries", () => {
-      this._loadData();
-    });
-  }
-
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (!this._unsubs && changedProps.has("hass")) {

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -46,17 +46,19 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   @property() public areas!: AreaRegistryEntry[];
 
-  @property() public domain!: string;
-
   @property() public route!: Route;
 
+  @property() private _searchParms = new URLSearchParams(
+    window.location.search
+  );
+
   private _devices = memoizeOne(
     (
       devices: DeviceRegistryEntry[],
       entries: ConfigEntry[],
       entities: EntityRegistryEntry[],
       areas: AreaRegistryEntry[],
-      domain: string,
+      filters: URLSearchParams,
       localize: LocalizeFunc
     ) => {
       // Some older installations might have devices pointing at invalid entryIDs
@@ -90,14 +92,15 @@ export class HaConfigDeviceDashboard extends LitElement {
         areaLookup[area.area_id] = area;
       }
 
-      if (domain) {
-        outputDevices = outputDevices.filter((device) =>
-          device.config_entries.find(
-            (entryId) =>
-              entryId in entryLookup && entryLookup[entryId].domain === domain
-          )
-        );
-      }
+      filters.forEach((value, key) => {
+        switch (key) {
+          case "config_entry":
+            outputDevices = outputDevices.filter((device) =>
+              device.config_entries.includes(value)
+            );
+            break;
+        }
+      });
 
       outputDevices = outputDevices.map((device) => {
         return {
@@ -243,7 +246,9 @@ export class HaConfigDeviceDashboard extends LitElement {
       <hass-tabs-subpage-data-table
         .hass=${this.hass}
         .narrow=${this.narrow}
-        back-path="/config"
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
         .tabs=${configSections.integrations}
         .route=${this.route}
         .columns=${this._columns(this.narrow)}
@@ -252,7 +257,7 @@ export class HaConfigDeviceDashboard extends LitElement {
           this.entries,
           this.entities,
           this.areas,
-          this.domain,
+          this._searchParms,
           this.hass.localize
         )}
         @row-click=${this._handleRowClicked}

src/panels/config/devices/ha-config-devices.ts

@@ -91,9 +91,7 @@ class HaConfigDevices extends HassRouterPage {
   protected updatePageEl(pageEl) {
     pageEl.hass = this.hass;
 
-    if (this._currentPage === "dashboard") {
-      pageEl.domain = this.routeTail.path.substr(1);
-    } else if (this._currentPage === "device") {
+    if (this._currentPage === "device") {
       pageEl.deviceId = this.routeTail.path.substr(1);
     }