chore: 🤖 make proxy fields first-class attributes on session

addons/api/addon/models/session.js

@@ -1,10 +1,14 @@
 import GeneratedSessionModel from '../generated/models/session';
 import { computed } from '@ember/object';
+import { attr } from '@ember-data/model';
 
 export default class SessionModel extends GeneratedSessionModel {
 
   // =attributes
 
+  @attr('string', { readOnly: true }) proxy_address;
+  @attr('number', { readOnly: true }) proxy_port;
+
   /**
    * @type {boolean}
    */
@@ -13,6 +17,17 @@ export default class SessionModel extends GeneratedSessionModel {
     return this.status?.match(/(active)|(pending)/i);
   }
 
+  /**
+   * The full proxy address and port if address exists, otherwise null.
+   * @type {?string}
+   */
+  @computed('proxy_address', 'proxy_port')
+  get proxy() {
+    return this.proxy_address
+      ? `${this.proxy_address}:${this.proxy_port}`
+      : null;
+  }
+
   // =methods
 
   /**

addons/api/tests/unit/models/session-test.js

@@ -26,4 +26,15 @@ module('Unit | Model | session', function(hooks) {
     });
     assert.ok(model.isCancelable);
   });
+
+  test('it computes a proxy attribute', function (assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('session');
+    assert.equal(model.proxy, null);
+    model.setProperties({
+      proxy_address: 'localhost',
+      proxy_port: '12345'
+    });
+    assert.equal(model.proxy, 'localhost:12345');
+  });
 });

ui/desktop/app/routes/scopes/scope/projects/targets.js

@@ -60,15 +60,30 @@ export default class ScopesScopeProjectsTargetsRoute extends Route {
         addr: this.origin.rendererOrigin
       });
 
+      // Associate the connection details with the session
+      const { session_id, address, port } = connectionDetails;
+      await this.store.findRecord('session', session_id);
+
+      // Update the session record with proxy information from the CLI
+      // This is read-only information that shouldn't dirty the session,
+      // so we use store.push here.  In the future, it may make sense to push
+      // this off to the API so that we don't have to manually persist the
+      // proxy details.
+      this.store.push({
+        data: {
+          id: session_id,
+          type: 'session',
+          attributes: {
+            proxy_address: address,
+            proxy_port: port
+          }
+        }
+      });
+
       // Show the user a modal with basic connection info.
       // We don't await because this modal is purely informational.
       this.confirm.confirm(connectionDetails, { isConnectSuccess: true });
 
-      // Associate the connection details with the session
-      const session =
-        await this.store.findRecord('session', connectionDetails.session_id);
-      session.proxy = connectionDetails;
-
     } catch(e) {
       this.confirm.confirm(e.message, { isConnectError: true })
         // Retry

ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs

@@ -37,13 +37,11 @@
                 --}}
                 {{#if sessionAggregate.session.proxy}}
                   <Copyable
-                    @text={{concat sessionAggregate.session.proxy.address ':' sessionAggregate.session.proxy.port}}
+                    @text={{sessionAggregate.session.proxy}}
                     @buttonText={{t "actions.copy-to-clipboard"}}
                     @acknowledgeText={{t "states.copied"}}
                   >
-                    <code>
-                      {{sessionAggregate.session.proxy.address}}:{{sessionAggregate.session.proxy.port}}
-                    </code>
+                    <code>{{sessionAggregate.session.proxy}}</code>
                   </Copyable>
                 {{/if}}
               </row.cell>