Conditionally show Details column

Only when there's something to show

Author: martinpitt

pkg/networkmanager/network-main.jsx

@@ -37,6 +37,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
     const managed = [];
     const unmanaged = [];
     const plot_ifaces = [];
+    let hasDetails = false;
 
     interfaces.forEach(iface => {
         function hasGroup(iface) {
@@ -89,22 +90,25 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
         if (dev?.DeviceType === '802-11-wireless') {
             // Count only non-hidden networks (ones with SSID)
             const networkCount = dev.AccessPoints?.filter(ap => ap.Ssid).length || 0;
-            detailsColumn = (
-                <Flex columnGap={{ default: 'columnGapSm' }}>
-                    {networkCount > 0 && (
-                        <FlexItem>
-                            <Label status="info">
-                                {cockpit.format(cockpit.ngettext("$0 network", "$0 networks", networkCount), networkCount)}
-                            </Label>
-                        </FlexItem>
-                    )}
-                    {dev.ActiveAccessPoint?.Ssid && (
-                        <FlexItem>
-                            <Label status="success" icon={<ConnectedIcon />}>{dev.ActiveAccessPoint?.Ssid}</Label>
-                        </FlexItem>
-                    )}
-                </Flex>
-            );
+            if (networkCount > 0 || dev.ActiveAccessPoint?.Ssid) {
+                hasDetails = true;
+                detailsColumn = (
+                    <Flex columnGap={{ default: 'columnGapSm' }}>
+                        {networkCount > 0 && (
+                            <FlexItem>
+                                <Label status="info">
+                                    {cockpit.format(cockpit.ngettext("$0 network", "$0 networks", networkCount), networkCount)}
+                                </Label>
+                            </FlexItem>
+                        )}
+                        {dev.ActiveAccessPoint?.Ssid && (
+                            <FlexItem>
+                                <Label status="success" icon={<ConnectedIcon />}>{dev.ActiveAccessPoint?.Ssid}</Label>
+                            </FlexItem>
+                        )}
+                    </Flex>
+                );
+            }
         }
         row.columns.push({ title: detailsColumn });
 
@@ -194,11 +198,11 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
                         <ListingTable aria-label={_("Managed interfaces")}
                                       variant='compact'
                                       columns={[
-                                          { title: _("Name"), header: true, props: { width: 15 } },
-                                          { title: _("IP address"), props: { width: 35 } },
-                                          { title: _("Sending"), props: { width: 15 } },
-                                          { title: _("Receiving"), props: { width: 15 } },
-                                          { title: _("Details"), props: { width: 20 } },
+                                          { title: _("Name"), header: true, props: { width: hasDetails ? 15 : 25 } },
+                                          { title: _("IP address"), props: { width: hasDetails ? 35 : 25 } },
+                                          { title: _("Sending"), props: { width: hasDetails ? 15 : 25 } },
+                                          { title: _("Receiving"), props: { width: hasDetails ? 15 : 25 } },
+                                          ...(hasDetails ? [{ title: _("Details"), props: { width: 20 } }] : []),
                                       ]}
                                       rows={managed} />
                     </Card>
@@ -210,11 +214,11 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
                         <ListingTable aria-label={_("Unmanaged interfaces")}
                                       variant='compact'
                                       columns={[
-                                          { title: _("Name"), header: true, props: { width: 15 } },
-                                          { title: _("IP address"), props: { width: 35 } },
-                                          { title: _("Sending"), props: { width: 15 } },
-                                          { title: _("Receiving"), props: { width: 15 } },
-                                          { title: _("Details"), props: { width: 20 } },
+                                          { title: _("Name"), header: true, props: { width: hasDetails ? 15 : 25 } },
+                                          { title: _("IP address"), props: { width: hasDetails ? 35 : 25 } },
+                                          { title: _("Sending"), props: { width: hasDetails ? 15 : 25 } },
+                                          { title: _("Receiving"), props: { width: hasDetails ? 15 : 25 } },
+                                          ...(hasDetails ? [{ title: _("Details"), props: { width: 20 } }] : []),
                                       ]}
                                       rows={unmanaged} />
                     </Card>}

test/verify/check-networkmanager-wifi

@@ -269,7 +269,7 @@ wpa_passphrase=hidden99""")
         self.wait_for_iface_setting("Status", "Not available")
         b.wait_not_present("table[aria-label='Available networks']")
         b.click("#network-interface nav a:contains('Networking')")
-        b.wait_text(f"tr[data-interface='{self.iface}'] [data-label='Details']", "")
+        b.wait_not_present(f"tr[data-interface='{self.iface}'] [data-label='Details']")
 
         m.execute("nmcli radio wifi on")
         # in theory, NM will now connect to OpenNet automatically; however, kill switch messes up