feat: Add project name to targets list in desktop

ui/desktop/app/router.js

@@ -9,7 +9,7 @@ export default class Router extends EmberRouter {
 Router.map(function () {
   this.route('scopes', function() {
     this.route('scope', { path: ':scope_id' }, function() {
-      this.route('targets');
+      this.route('targets', function() {});
     });
   });
 });

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

@@ -17,8 +17,13 @@ export default class ScopesScopeTargetsRoute extends Route {
     let projectTargets = await all(this.scope.projects.map(({ id: scope_id }) => 
       this.store.query('target', { scope_id })
     ))
-
-    return projectTargets.map((target) => target.toArray()).flat();
+    let targets = projectTargets.map((target) => target.toArray()).flat();
+    return targets.map((target) => {
+      return {
+        target,
+        project: this.store.peekRecord('scope', target.scopeID),
+      }
+    })
   }
 
 }

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

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeTargetsIndexRoute extends Route {
+}

ui/desktop/app/templates/scopes.hbs

@@ -1 +1,11 @@
-{{outlet}}
+{{page-title (t 'scope.title_plural')}}
+
+<Rose::Layout::Sidebar as |sidebarLayout|>
+
+  <sidebarLayout.body>
+    <main>
+      {{outlet}}
+    </main>
+  </sidebarLayout.body>
+
+</Rose::Layout::Sidebar>

ui/desktop/app/templates/scopes/index.hbs

@@ -1,26 +1,36 @@
-{{outlet}}
+<Rose::Layout::Page as |page|>
 
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.headerCell>{{t 'scope.title'}}</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    {{#each @model as |scope|}}
-      <body.row as |row|>
-        <row.cell>
-          <Rose::LinkButton
-            @route="scopes.scope"
-            @model={{scope.id}}
-          >
-            {{scope.name}}
-          </Rose::LinkButton>
-        </row.cell>
-        <row.cell>
-          {{scope.id}}
-        </row.cell>
-      </body.row>
-    {{/each}}
-  </table.body>
-</Rose::Table>
+  <page.header>
+    <h2>
+      {{t "scope.title_plural"}}
+    </h2>
+  </page.header>
+
+  <page.body>
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.headerCell>{{t 'scope.title'}}</row.headerCell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each @model as |scope|}}
+          <body.row as |row|>
+            <row.cell>
+              <Rose::LinkButton
+                @route="scopes.scope"
+                @model={{scope.id}}
+              >
+                {{scope.name}}
+              </Rose::LinkButton>
+            </row.cell>
+            <row.cell>
+              {{scope.id}}
+            </row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
+  </page.body>
+
+</Rose::Layout::Page>

ui/desktop/app/templates/scopes/scope/targets.hbs

@@ -1,27 +1,3 @@
-{{outlet}}
+{{page-title (t 'target.title_plural')}}
 
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.headerCell>{{t "name.label"}}</row.headerCell>
-      <row.headerCell>{{t "type.label"}}</row.headerCell>
-      <row.headerCell>{{t "id.label"}}</row.headerCell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    {{#each @model as |target|}}
-      <body.row as |row|>
-        <row.cell>
-          {{target.name}}
-          <p>{{target.description}}</p>
-        </row.cell>
-        <row.cell>
-          {{target.type}}
-        </row.cell>
-        <row.cell>
-          {{target.id}}
-        </row.cell>
-      </body.row>
-    {{/each}}
-  </table.body>
-</Rose::Table>
+{{outlet}}

ui/desktop/app/templates/scopes/scope/targets/index.hbs

@@ -0,0 +1,49 @@
+<Rose::Layout::Page as |page|>
+
+  <page.header>
+    <h2>
+      {{t "target.title_plural"}}
+    </h2>
+  </page.header>
+
+  <page.body>
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.headerCell>{{t "name.label"}}</row.headerCell>
+          <row.headerCell>{{t "id.label"}}</row.headerCell>
+          <row.headerCell>{{t "type.label"}}</row.headerCell>
+          <row.headerCell>{{t "project.label"}}</row.headerCell>
+          <row.headerCell />
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        {{#each @model as |model|}}
+          <body.row as |row|>
+            <row.cell>
+              {{model.target.name}}
+              <p>{{model.target.description}}</p>
+            </row.cell>
+            <row.cell>
+              {{model.target.id}}
+            </row.cell>
+            <row.cell>
+              {{model.target.type}}
+            </row.cell>
+            <row.cell>
+              <Rose::Badge @style='informational'>
+                {{model.project.name}}
+              </Rose::Badge>
+            </row.cell>
+            <row.cell>
+              <Rose::Button @style="secondary">
+                {{t "session.actions.connect"}}
+              </Rose::Button>
+            </row.cell>
+          </body.row>
+        {{/each}}
+      </table.body>
+    </Rose::Table>
+  </page.body>
+
+</Rose::Layout::Page>

ui/desktop/tests/unit/routes/scopes/scope/targets/index-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/targets/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/targets/index');
+    assert.ok(route);
+  });
+});

ui/desktop/translations/form/en-us.yaml

@@ -8,4 +8,6 @@ description:
   help: Description for identification purposes
 type:
   label: Type
-  help: The type of the resource, to help differentiate schemas
+  help: The type of the resource, to help differentiate schemas
+project:
+  label: Project

ui/desktop/translations/resources/en-us.yaml

@@ -5,4 +5,9 @@ scope:
     title: Global
 target:
   title: Target
-  title_plural: Targets
+  title_plural: Targets
+session:
+  title: Session
+  title_plural: Sessions
+  actions:
+    connect: Connect