[gnome-shell] status/network: Decouple NMVpnSection from NMConnectionSection

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 0d259d62b2b52f12bcbaba684eaac29c2b6bd19c
Author: Florian Müllner <fmuellner gnome org>
Date:   Mon Aug 1 19:08:18 2022 +0200

    status/network: Decouple NMVpnSection from NMConnectionSection
    
    The NMConnectionSection class is used - surprise - to manage a
    list of related connections. And while the presentation of VPN
    items is slightly different from connections associated with
    devices (switches vs. ornaments), it makes perfect sense for
    the VPN section to share the nitty-gritty with the base class.
    
    But…
    
    Right now it is perfectly fine for NMConnectionSection to be
    used both as a child element in a device section, and as toplevel
    item of the VPN section. Any nesting of sections is entirely
    transparent to the user, and all connection sections appear as
    submenu items in the toplevel menu.
    
    That won't work for quick settings.
    
    There's no PopoverMenuSection that allows invisible grouping, so
    adding items dynamically would either need to happen at the end,
    or require some tricky cross-component code to impose a particular
    order.
    
    And last but not least, quick toggles are very much unsuited for
    a potentially large number of items. The whole point is to provide
    quick direct access to system features, not to compete with menus
    over the number of items they can hold.
    
    That is, we need to get from the current state where each device
    appears as a toplevel item, to a state where we have one quick
    toggle for each device type plus one for VPN.
    
    The decoupled VPN section still behaves largely as it did as a
    subclass, with the notable difference that it no longer uses
    a submenu item, so all VPN connections now appear at the toplevel.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2407>

 js/ui/status/network.js | 114 ++++++++++++++++++++++++++++--------------------
 1 file changed, 66 insertions(+), 48 deletions(-)
---
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index 890a3e5bea..5c3cd7bcbb 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -163,9 +163,6 @@ const NMConnectionItem = GObject.registerClass({
             GObject.ParamFlags.READWRITE,
             ''),
     },
-    Signals: {
-        'activation-failed': {},
-    },
 }, class NMConnectionItem extends PopupMenu.PopupBaseMenuItem {
     constructor(section, connection) {
         super();
@@ -393,7 +390,6 @@ var NMConnectionSection = class NMConnectionSection extends Signals.EventEmitter
             return;
 
         item.connect('notify::icon-name', () => this._iconChanged());
-        item.connect('activation-failed', () => this.emit('activation-failed'));
         item.connect('notify::name', this._sync.bind(this));
 
         const pos = this._itemSorter.upsert(item);
@@ -1502,8 +1498,11 @@ var NMWirelessDeviceItem = class extends Signals.EventEmitter {
     }
 };
 
-const NMVpnConnectionItem = GObject.registerClass(
-class NMVpnConnectionItem extends NMConnectionItem {
+const NMVpnConnectionItem = GObject.registerClass({
+    Signals: {
+        'activation-failed': {},
+    },
+}, class NMVpnConnectionItem extends NMConnectionItem {
     constructor(section, connection) {
         super(section, connection);
 
@@ -1561,19 +1560,27 @@ class NMVpnConnectionItem extends NMConnectionItem {
     }
 });
 
-var NMVpnSection = class extends NMConnectionSection {
+var NMVpnSection = class extends PopupMenu.PopupMenuSection {
     constructor(client) {
-        super(client);
+        super();
+
+        this._client = client;
+
+        this._items = new Map();
+        this._itemSorter = new ItemSorter();
+
+        this._section = new PopupMenu.PopupMenuSection();
+        this.addMenuItem(this._section);
+
+        this.addSettingsAction(_('VPN Settings'),
+            'gnome-network-panel.desktop');
 
         this._client.connectObject(
-            'connection-added', (c, conn) => this.checkConnection(conn),
-            'connection-removed', (c, conn) => this.removeConnection(conn),
+            'connection-added', (c, conn) => this._addConnection(conn),
+            'connection-removed', (c, conn) => this._removeConnection(conn),
             'notify::active-connections', () => this._syncActiveConnections(),
             this);
 
-        this.item.menu.addSettingsAction(_('VPN Settings'),
-            'gnome-network-panel.desktop');
-
         this._loadInitialItems();
         this._sync();
     }
@@ -1581,7 +1588,7 @@ var NMVpnSection = class extends NMConnectionSection {
     _loadInitialItems() {
         const connections = this._client.get_connections();
         for (const conn of connections)
-            this.checkConnection(conn);
+            this._addConnection(conn);
 
         this._syncActiveConnections();
     }
@@ -1591,11 +1598,11 @@ var NMVpnSection = class extends NMConnectionSection {
             this._client.get_active_connections().filter(
                 c => this._shouldHandleConnection(c.connection));
 
-        for (const item of this._connectionItems.values())
+        for (const item of this._items.values())
             item.setActiveConnection(null);
 
         for (const a of activeConnections)
-            this._connectionItems.get(a.connection.get_uuid())?.setActiveConnection(a);
+            this._items.get(a.connection)?.setActiveConnection(a);
 
         this._sync();
     }
@@ -1616,45 +1623,61 @@ var NMVpnSection = class extends NMConnectionSection {
         return handledTypes.includes(setting.type);
     }
 
+    _onConnectionChanged(connection) {
+        const item = this._items.get(connection);
+        item.updateForConnection(connection);
+    }
+
+    _resortItem(item) {
+        const pos = this._itemSorter.upsert(item);
+        this._section.moveMenuItem(item, pos);
+    }
+
     _addConnection(connection) {
-        super._addConnection(connection);
+        if (this._items.has(connection))
+            return;
+
+        if (!this._shouldHandleConnection(connection))
+            return;
 
         connection.connectObject(
-            'changed', () => this.checkConnection(connection),
+            'changed', this._onConnectionChanged.bind(this),
             this);
-    }
 
-    _connectionValid(connection) {
-        return this._shouldHandleConnection(connection);
-    }
+        const item = new NMVpnConnectionItem(this, connection);
+        item.connectObject(
+            'activation-failed', () => this.emit('activation-failed'),
+            'notify::name', () => this._resortItem(item),
+            'destroy', () => this._removeConnection(connection),
+            this);
 
-    _sync() {
-        let nItems = this._connectionItems.size;
-        this.item.visible = nItems > 0;
+        this._items.set(connection, item);
+        const pos = this._itemSorter.upsert(item);
+        this._section.addMenuItem(item, pos);
 
-        super._sync();
+        this._sync();
     }
 
-    get category() {
-        return NMConnectionCategory.VPN;
-    }
+    _removeConnection(connection) {
+        const item = this._items.get(connection);
+        if (!item)
+            return;
 
-    _getDescription() {
-        return _("VPN");
-    }
+        this._itemSorter.delete(item);
+        this._items.delete(connection);
 
-    _getStatus() {
-        let values = this._connectionItems.values();
-        for (let item of values) {
-            if (item.is_active)
-                return item.name;
-        }
+        item.destroy();
+        this._sync();
+    }
 
-        return _("VPN Off");
+    _sync() {
+        const nItems = this._items.size;
+        for (const item of this._items.values())
+            item.radio_mode = nItems > 1;
     }
 
-    _getMenuIcon() {
-        return this.getIndicatorIcon() || 'network-vpn-disabled-symbolic';
+    get category() {
+        return NMConnectionCategory.VPN;
     }
 
     activateConnection(connection) {
@@ -1665,13 +1688,8 @@ var NMVpnSection = class extends NMConnectionSection {
         this._client.deactivate_connection(activeConnection, null);
     }
 
-    _makeConnectionItem(connection) {
-        return new NMVpnConnectionItem(this, connection);
-    }
-
     getIndicatorIcon() {
-        let items = this._connectionItems.values();
-        for (let item of items) {
+        for (const item of this._items.values()) {
             if (item.is_active)
                 return item.icon_name;
         }
@@ -1842,7 +1860,7 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._vpnSection = new NMVpnSection(this._client);
         this._vpnSection.connect('activation-failed', this._onActivationFailed.bind(this));
         this._vpnSection.connect('icon-changed', this._updateIcon.bind(this));
-        this.menu.addMenuItem(this._vpnSection.item);
+        this.menu.addMenuItem(this._vpnSection);
 
         this._readConnections();
         this._readDevices();