Clean up network browser nav (#25321)

* Clean up network browser nav

* Add ha-md-list

src/panels/config/network/ha-config-network-dhcp.ts

@@ -1,66 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button";
-import "../../../components/ha-card";
-import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-
-@customElement("ha-config-network-dhcp")
-class ConfigNetworkDHCP extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  protected render() {
-    return html`
-      <ha-card
-        outlined
-        header=${this.hass.localize("ui.panel.config.network.discovery.dhcp")}
-      >
-        <div class="card-content">
-          <p>
-            ${this.hass.localize("ui.panel.config.network.discovery.dhcp_info")}
-          </p>
-        </div>
-        <div class="card-actions">
-          <a
-            href="/config/dhcp"
-            aria-label=${this.hass.localize(
-              "ui.panel.config.network.discovery.dhcp_browser"
-            )}
-          >
-            <ha-button>
-              ${this.hass.localize(
-                "ui.panel.config.network.discovery.dhcp_browser"
-              )}
-            </ha-button>
-          </a>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        ha-settings-row {
-          padding: 0;
-        }
-
-        .card-actions {
-          display: flex;
-          flex-direction: row-reverse;
-          justify-content: space-between;
-          align-items: center;
-        }
-      `, // row-reverse so we tab first to "save"
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-network-dhcp": ConfigNetworkDHCP;
-  }
-}

src/panels/config/network/ha-config-network-ssdp.ts

@@ -1,66 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button";
-import "../../../components/ha-card";
-import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-
-@customElement("ha-config-network-ssdp")
-class ConfigNetworkSSDP extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  protected render() {
-    return html`
-      <ha-card
-        outlined
-        header=${this.hass.localize("ui.panel.config.network.discovery.ssdp")}
-      >
-        <div class="card-content">
-          <p>
-            ${this.hass.localize("ui.panel.config.network.discovery.ssdp_info")}
-          </p>
-        </div>
-        <div class="card-actions">
-          <a
-            href="/config/ssdp"
-            aria-label=${this.hass.localize(
-              "ui.panel.config.network.discovery.ssdp_browser"
-            )}
-          >
-            <ha-button>
-              ${this.hass.localize(
-                "ui.panel.config.network.discovery.ssdp_browser"
-              )}
-            </ha-button>
-          </a>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        ha-settings-row {
-          padding: 0;
-        }
-
-        .card-actions {
-          display: flex;
-          flex-direction: row-reverse;
-          justify-content: space-between;
-          align-items: center;
-        }
-      `, // row-reverse so we tab first to "save"
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-network-ssdp": ConfigNetworkSSDP;
-  }
-}

src/panels/config/network/ha-config-network-zeroconf.ts

@@ -1,70 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button";
-import "../../../components/ha-card";
-import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-
-@customElement("ha-config-network-zeroconf")
-class ConfigNetworkZeroconf extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  protected render() {
-    return html`
-      <ha-card
-        outlined
-        header=${this.hass.localize(
-          "ui.panel.config.network.discovery.zeroconf"
-        )}
-      >
-        <div class="card-content">
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.network.discovery.zeroconf_info"
-            )}
-          </p>
-        </div>
-        <div class="card-actions">
-          <a
-            href="/config/zeroconf"
-            aria-label=${this.hass.localize(
-              "ui.panel.config.network.discovery.zeroconf_browser"
-            )}
-          >
-            <ha-button>
-              ${this.hass.localize(
-                "ui.panel.config.network.discovery.zeroconf_browser"
-              )}
-            </ha-button>
-          </a>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        ha-settings-row {
-          padding: 0;
-        }
-
-        .card-actions {
-          display: flex;
-          flex-direction: row-reverse;
-          justify-content: space-between;
-          align-items: center;
-        }
-      `, // row-reverse so we tab first to "save"
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-network-zeroconf": ConfigNetworkZeroconf;
-  }
-}

src/panels/config/network/ha-config-section-network.ts

@@ -3,15 +3,18 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../layouts/hass-subpage";
+import "../../../components/ha-card";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
+import "../../../components/ha-icon-next";
 import type { HomeAssistant, Route } from "../../../types";
 import "./ha-config-network";
-import "./ha-config-network-dhcp";
-import "./ha-config-network-ssdp";
-import "./ha-config-network-zeroconf";
 import "./ha-config-url-form";
 import "./supervisor-hostname";
 import "./supervisor-network";
 
+const NETWORK_BROWSERS = ["dhcp", "ssdp", "zeroconf"] as const;
+
 @customElement("ha-config-section-network")
 class HaConfigSectionNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -38,20 +41,38 @@ class HaConfigSectionNetwork extends LitElement {
             : ""}
           <ha-config-url-form .hass=${this.hass}></ha-config-url-form>
           <ha-config-network .hass=${this.hass}></ha-config-network>
-          ${isComponentLoaded(this.hass, "dhcp")
+          ${NETWORK_BROWSERS.some((component) =>
-            ? html`<ha-config-network-dhcp
+            isComponentLoaded(this.hass, component)
-                .hass=${this.hass}
+          )
-              ></ha-config-network-dhcp>`
+            ? html`
-            : ""}
+                <ha-card
-          ${isComponentLoaded(this.hass, "ssdp")
+                  outlined
-            ? html`<ha-config-network-ssdp
+                  class="discovery-card"
-                .hass=${this.hass}
+                  header=${this.hass.localize(
-              ></ha-config-network-ssdp>`
+                    "ui.panel.config.network.discovery.title"
-            : ""}
+                  )}
-          ${isComponentLoaded(this.hass, "zeroconf")
+                >
-            ? html`<ha-config-network-zeroconf
+                  <ha-md-list>
-                .hass=${this.hass}
+                    ${NETWORK_BROWSERS.map(
-              ></ha-config-network-zeroconf>`
+                      (domain) => html`
+                        <ha-md-list-item type="link" href="/config/${domain}">
+                          <div slot="headline">
+                            ${this.hass.localize(
+                              `ui.panel.config.network.discovery.${domain}`
+                            )}
+                          </div>
+                          <div slot="supporting-text">
+                            ${this.hass.localize(
+                              `ui.panel.config.network.discovery.${domain}_info`
+                            )}
+                          </div>
+                          <ha-icon-next slot="end"></ha-icon-next>
+                        </ha-md-list-item>
+                      `
+                    )}
+                  </ha-md-list>
+                </ha-card>
+              `
             : ""}
         </div>
       </hass-subpage>
@@ -68,14 +89,15 @@ class HaConfigSectionNetwork extends LitElement {
     supervisor-network,
     ha-config-url-form,
     ha-config-network,
-    ha-config-network-dhcp,
+    .discovery-card {
-    ha-config-network-ssdp,
-    ha-config-network-zeroconf {
       display: block;
       margin: 0 auto;
       margin-bottom: 24px;
       max-width: 600px;
     }
+    .discovery-card ha-md-list {
+      padding-top: 0;
+    }
   `;
 }
 

src/translations/en.json

@@ -6399,15 +6399,14 @@
             }
           },
           "discovery": {
+            "title": "Network discovery",
+            "description": "Explore what data Home Assistant can see on the network.",
             "dhcp": "DHCP browser",
-            "dhcp_info": "The DHCP browser shows devices detected by Home Assistant using methods like DHCP, ARP+PTR lookups, and router-based device trackers. DHCP (Dynamic Host Configuration Protocol) data is received when devices join the network and request an IP address, allowing Home Assistant to discover them automatically. All devices found through these methods will appear here.",
+            "dhcp_info": "Show devices detected by Home Assistant using methods like DHCP, ARP+PTR lookups, and router-based device trackers. DHCP (Dynamic Host Configuration Protocol) data is received when devices join the network and request an IP address.",
-            "dhcp_browser": "View DHCP browser",
             "ssdp": "SSDP browser",
-            "ssdp_info": "The SSDP browser shows devices discovered by Home Assistant using SSDP/UPnP. Devices that Home Assistant has discovered will appear here.",
+            "ssdp_info": "Show devices discovered by Home Assistant using SSDP/UPnP. Devices that Home Assistant has discovered will appear here.",
-            "ssdp_browser": "View SSDP browser",
             "zeroconf": "Zeroconf browser",
-            "zeroconf_info": "The Zeroconf browser shows devices discovered by Home Assistant using mDNS. Only devices that Home Assistant is actively searching for will appear here.",
+            "zeroconf_info": "Show devices discovered by Home Assistant using mDNS. Only devices that Home Assistant is actively searching for will appear here."
-            "zeroconf_browser": "View Zeroconf browser"
           },
           "network_adapter": "Network adapter",
           "network_adapter_info": "Configure which network adapters integrations will use. Currently this setting only affects multicast traffic. A restart is required for these settings to apply.",