extensions-app: Use property bindings in row

Now that extensions are represented as GObjects, we can update
the UI via property bindings instead of manually handling the
logic in the code.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3067>

subprojects/extensions-app/data/ui/extension-row.ui

@@ -2,12 +2,21 @@
 <interface>
   <template class="ExtensionRow" parent="AdwActionRow">
     <property name="activatable-widget">switch</property>
+    <binding name="title">
+      <lookup name="name" type="Extension">
+        <lookup name="extension" type="ExtensionRow"/>
+      </lookup>
+    </binding>
     <child type="suffix">
       <object class="GtkMenuButton" id="errorButton">
-        <property name="visible">false</property>
         <property name="valign">center</property>
         <property name="has-frame">false</property>
         <property name="icon-name">dialog-error-symbolic</property>
+        <binding name="visible">
+          <lookup name="has-error" type="Extension">
+            <lookup name="extension" type="ExtensionRow"/>
+          </lookup>
+        </binding>
         <accessibility>
           <property name="label" translatable="yes">Error Details</property>
         </accessibility>
@@ -19,6 +28,11 @@
                 <property name="tightening-threshold">300</property>
                 <property name="child">
                   <object class="GtkLabel" id="errorLabel">
+                    <binding name="label">
+                      <lookup name="error" type="Extension">
+                        <lookup name="extension" type="ExtensionRow"/>
+                      </lookup>
+                    </binding>
                     <!-- Hack to make the screen reader read the label -->
                     <property name="selectable"
                               bind-source="errorPopover"
@@ -35,10 +49,14 @@
     </child>
     <child type="suffix">
       <object class="GtkMenuButton" id="updatesButton">
-        <property name="visible">false</property>
         <property name="valign">center</property>
         <property name="has-frame">false</property>
         <property name="icon-name">software-update-available-symbolic</property>
+        <binding name="visible">
+          <lookup name="has-update" type="Extension">
+            <lookup name="extension" type="ExtensionRow"/>
+          </lookup>
+        </binding>
         <accessibility>
           <property name="label" translatable="yes">Updates Details</property>
         </accessibility>
@@ -116,6 +134,11 @@
                         <property name="xalign">0</property>
                         <property name="wrap">True</property>
                         <property name="selectable">true</property>
+                        <binding name="label">
+                          <lookup name="description" type="Extension">
+                            <lookup name="extension" type="ExtensionRow"/>
+                          </lookup>
+                        </binding>
                       </object>
                     </child>
                     <child>
@@ -123,6 +146,11 @@
                         <property name="visible">false</property>
                         <property name="xalign">0</property>
                         <property name="selectable">true</property>
+                        <binding name="visible">
+                          <lookup name="has-version" type="Extension">
+                            <lookup name="extension" type="ExtensionRow"/>
+                          </lookup>
+                        </binding>
                         <style>
                           <class name="dim-label"/>
                         </style>

subprojects/extensions-app/js/extensionRow.js

@@ -17,11 +17,7 @@ export const ExtensionRow = GObject.registerClass({
     },
     InternalChildren: [
         'detailsPopover',
-        'descriptionLabel',
         'versionLabel',
-        'errorLabel',
-        'errorButton',
-        'updatesButton',
         'switch',
         'actionsBox',
     ],
@@ -78,14 +74,14 @@ export const ExtensionRow = GObject.registerClass({
         this._actionGroup.add_action_entries(actionEntries);
         this._bindActionEnabled(actionEntries);
 
-        this.title = extension.name;
+        this._extension.bind_property_full('version',
+            this._versionLabel, 'label',
+            GObject.BindingFlags.SYNC_CREATE,
+            (bind, source) => [true, _('Version %s').format(source)],
+            null);
 
-        this._descriptionLabel.label = extension.description;
+        this._extension.connect('notify::state',
-
+            () => this._updateState());
-        this.connect('destroy', this._onDestroy.bind(this));
-
-        this._extensionStateChangedId = this._app.extensionManager.connect(
-            `extension-changed::${extension.uuid}`, () => this._updateState());
         this._updateState();
     }
 
@@ -126,18 +122,5 @@ export const ExtensionRow = GObject.registerClass({
 
         if (!action.enabled)
             this._switch.active = state;
-
-        this._updatesButton.visible = this._extension.hasUpdate;
-        this._errorButton.visible = this._extension.hasError;
-        this._errorLabel.label = this._extension.error;
-
-        this._versionLabel.label = _('Version %s').format(this._extension.version);
-        this._versionLabel.visible = this._extension.version !== '';
-    }
-
-    _onDestroy() {
-        if (this._extensionStateChangedId)
-            this._app.extensionManager.disconnect(this._extensionStateChangedId);
-        delete this._extensionStateChangedId;
     }
 });