[gnome-shell] status/network: Handle VPN connections in VPN section

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

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

    status/network: Handle VPN connections in VPN section
    
    Right now the indicator itself tracks all devices and connections,
    creates and destroys the corresponding menu items, matches them
    to a section and updates the connection/device arrays that are
    attached to the section.
    
    Sounds messy?
    
    It is slightly less effective to connect multiple handlers to the
    same NMClient, but let's assume that devices and connections aren't
    added/removed at 60 frames/s, and we can add some readabilty by
    moving the code into different classes that only have to care about
    the bits that are relevant to them.
    
    The VPN section is a good starting point, because its handling is
    already quite different from device sections.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2407>

 js/ui/status/network.js | 104 +++++++++++++++++++++++++++++-------------------
 1 file changed, 64 insertions(+), 40 deletions(-)
---
diff --git a/js/ui/status/network.js b/js/ui/status/network.js
index e7979e03b8..890a3e5bea 100644
--- a/js/ui/status/network.js
+++ b/js/ui/status/network.js
@@ -1565,11 +1565,69 @@ var NMVpnSection = class extends NMConnectionSection {
     constructor(client) {
         super(client);
 
-        this.item.menu.addSettingsAction(_("VPN Settings"), 'gnome-network-panel.desktop');
+        this._client.connectObject(
+            'connection-added', (c, conn) => this.checkConnection(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();
+    }
+
+    _loadInitialItems() {
+        const connections = this._client.get_connections();
+        for (const conn of connections)
+            this.checkConnection(conn);
+
+        this._syncActiveConnections();
+    }
+
+    _syncActiveConnections() {
+        const activeConnections =
+            this._client.get_active_connections().filter(
+                c => this._shouldHandleConnection(c.connection));
+
+        for (const item of this._connectionItems.values())
+            item.setActiveConnection(null);
+
+        for (const a of activeConnections)
+            this._connectionItems.get(a.connection.get_uuid())?.setActiveConnection(a);
 
         this._sync();
     }
 
+    _shouldHandleConnection(connection) {
+        const setting = connection.get_setting_connection();
+        if (!setting)
+            return false;
+
+        // Ignore slave connection
+        if (setting.get_master())
+            return false;
+
+        const handledTypes = [
+            NM.SETTING_VPN_SETTING_NAME,
+            NM.SETTING_WIREGUARD_SETTING_NAME,
+        ];
+        return handledTypes.includes(setting.type);
+    }
+
+    _addConnection(connection) {
+        super._addConnection(connection);
+
+        connection.connectObject(
+            'changed', () => this.checkConnection(connection),
+            this);
+    }
+
+    _connectionValid(connection) {
+        return this._shouldHandleConnection(connection);
+    }
+
     _sync() {
         let nItems = this._connectionItems.size;
         this.item.visible = nItems > 0;
@@ -1607,19 +1665,6 @@ var NMVpnSection = class extends NMConnectionSection {
         this._client.deactivate_connection(activeConnection, null);
     }
 
-    setActiveConnections(vpnConnections) {
-        let connections = this._connectionItems.values();
-        for (let item of connections)
-            item.setActiveConnection(null);
-
-        vpnConnections.forEach(a => {
-            if (a.connection) {
-                let item = this._connectionItems.get(a.connection.get_uuid());
-                item.setActiveConnection(a);
-            }
-        });
-    }
-
     _makeConnectionItem(connection) {
         return new NMVpnConnectionItem(this, connection);
     }
@@ -1764,8 +1809,6 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._ctypes[NM.SETTING_BLUETOOTH_SETTING_NAME] = NMConnectionCategory.BLUETOOTH;
         this._ctypes[NM.SETTING_CDMA_SETTING_NAME] = NMConnectionCategory.WWAN;
         this._ctypes[NM.SETTING_GSM_SETTING_NAME] = NMConnectionCategory.WWAN;
-        this._ctypes[NM.SETTING_VPN_SETTING_NAME] = NMConnectionCategory.VPN;
-        this._ctypes[NM.SETTING_WIREGUARD_SETTING_NAME] = NMConnectionCategory.VPN;
 
         this._getClient().catch(logError);
     }
@@ -1773,7 +1816,6 @@ class Indicator extends PanelMenu.SystemIndicator {
     async _getClient() {
         this._client = await NM.Client.new_async(null);
 
-        this._activeConnections = [];
         this._connections = [];
         this._connectivityQueue = new Set();
 
@@ -1805,7 +1847,6 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._readConnections();
         this._readDevices();
         this._syncMainConnection();
-        this._syncVpnConnections();
 
         this._client.bind_property('nm-running',
             this, 'visible',
@@ -1818,7 +1859,6 @@ class Indicator extends PanelMenu.SystemIndicator {
             'notify::state', () => this._updateIcon(),
             'notify::primary-connection', () => this._syncMainConnection(),
             'notify::activating-connection', () => this._syncMainConnection(),
-            'notify::active-connections', () => this._syncVpnConnections(),
             'notify::connectivity', () => this._syncConnectivity(),
             'device-added', this._deviceAdded.bind(this),
             'device-removed', this._deviceRemoved.bind(this),
@@ -1993,18 +2033,6 @@ class Indicator extends PanelMenu.SystemIndicator {
         this._syncConnectivity();
     }
 
-    _syncVpnConnections() {
-        let activeConnections = this._client.get_active_connections() || [];
-        let vpnConnections = activeConnections.filter(
-            a => a instanceof NM.VpnConnection || a.get_connection_type() === 'wireguard');
-        vpnConnections.forEach(a => {
-            ensureActiveConnectionProps(a);
-        });
-        this._vpnSection.setActiveConnections(vpnConnections);
-
-        this._updateIcon();
-    }
-
     _mainConnectionStateChanged() {
         if (this._mainConnection.state === NM.ActiveConnectionState.ACTIVATED)
             this._notification?.destroy();
@@ -2079,15 +2107,11 @@ class Indicator extends PanelMenu.SystemIndicator {
         if (section == NMConnectionCategory.INVALID)
             return;
 
-        if (section == NMConnectionCategory.VPN) {
-            this._vpnSection.checkConnection(connection);
-        } else {
-            const {devices} = this._deviceSections.get(section);
-            devices.forEach(wrapper => {
-                if (wrapper instanceof NMConnectionSection)
-                    wrapper.checkConnection(connection);
-            });
-        }
+        const {devices} = this._deviceSections.get(section);
+        devices.forEach(wrapper => {
+            if (wrapper instanceof NMConnectionSection)
+                wrapper.checkConnection(connection);
+        });
     }
 
     _flushConnectivityQueue() {