Add DHCP Browser entry point to network (#25235)

* Add DHCP Browser entry point to network

* lint

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

@@ -0,0 +1,66 @@
+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-section-network.ts

@@ -5,6 +5,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../layouts/hass-subpage";
 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";
@@ -37,6 +38,11 @@ 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")
+            ? html`<ha-config-network-dhcp
+                .hass=${this.hass}
+              ></ha-config-network-dhcp>`
+            : ""}
           ${isComponentLoaded(this.hass, "ssdp")
             ? html`<ha-config-network-ssdp
                 .hass=${this.hass}
@@ -62,6 +68,7 @@ class HaConfigSectionNetwork extends LitElement {
     supervisor-network,
     ha-config-url-form,
     ha-config-network,
+    ha-config-network-dhcp,
     ha-config-network-ssdp,
     ha-config-network-zeroconf {
       display: block;

src/translations/en.json

@@ -6392,6 +6392,9 @@
             }
           },
           "discovery": {
+            "dhcp": "DHCP browser",
+            "dhcp_info": "The DHCP browser displays devices discovered by Home Assistant via DHCP, ARP+PTR lookups, and router-based device trackers. All detected devices by these methods will appear here.",
+            "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_browser": "View SSDP browser",