From 2eb35668fac88063051ea5976035e03799ec8481 Mon Sep 17 00:00:00 2001
From: "J. Nick Koston" <nick@koston.org>
Date: Mon, 31 May 2021 17:31:33 -0500
Subject: [PATCH] Seperate addresses in network configuration (#9319)

---
 src/components/ha-network.ts | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts
index a4163ae720..451e709176 100644
--- a/src/components/ha-network.ts
+++ b/src/components/ha-network.ts
@@ -1,5 +1,12 @@
 import "@polymer/paper-tooltip/paper-tooltip";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  nothing,
+  LitElement,
+  TemplateResult,
+} from "lit";
 import { customElement, state, property } from "lit/decorators";
 import {
   Adapter,
@@ -17,18 +24,19 @@ import "./ha-icon";
 
 const format_addresses = (
   addresses: IPv6ConfiguredAddress[] | IPv4ConfiguredAddress[]
-): TemplateResult[] =>
-  addresses.map(
-    (address) => html`<span>${address.address}/${address.network_prefix}</span>`
-  );
+): TemplateResult =>
+  html`${addresses.map((address, i) => [
+    html`<span>${address.address}/${address.network_prefix}</span>`,
+    i < addresses.length - 1 ? ", " : nothing,
+  ])}`;
 
 const format_auto_detected_interfaces = (
   adapters: Adapter[]
 ): Array<TemplateResult | string> =>
   adapters.map((adapter) =>
     adapter.auto
-      ? html`${adapter.name} (${format_addresses(adapter.ipv4)}
-        ${format_addresses(adapter.ipv6)} )`
+      ? html`${adapter.name}
+        (${format_addresses([...adapter.ipv4, ...adapter.ipv6])})`
       : ""
   );
 
@@ -88,8 +96,7 @@ export class HaNetwork extends LitElement {
                     : ""}
                 </span>
                 <span slot="description">
-                  ${format_addresses(adapter.ipv4)}
-                  ${format_addresses(adapter.ipv6)}
+                  ${format_addresses([...adapter.ipv4, ...adapter.ipv6])}
                 </span>
               </ha-settings-row>`
           )