Icu 10491 create route for session/session-id (#1825)

* fix: 🐛 call displayName on model

* feat: 🎸 add sessions/session-id route and base layout

✅ Closes: ICU-10491

addons/core/translations/resources/en-us.yaml

@@ -290,6 +290,7 @@ session:
       description: No active sessions available to display yet.
   actions:
     connect: Connect
+    end: End session
   credential:
     title: Credential
     title_plural: Credentials

ui/desktop/app/router.js

@@ -23,7 +23,9 @@ Router.map(function () {
         this.route('targets', function () {
           this.route('target', { path: ':target_id' }, function () {});
         });
-        this.route('sessions', function () {});
+        this.route('sessions', function () {
+          this.route('session', { path: ':session_id' }, function () {});
+        });
       });
     });
   });

ui/desktop/app/routes/scopes/scope/projects/sessions/session.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsSessionsSessionRoute extends Route {
+  // =services
+
+  @service store;
+
+  // =methods
+
+  /**
+   * Load a session
+   * @param {object} params
+   * @param {string} params.session_id
+   * @return {TargetModel}
+   */
+  model({ session_id }) {
+    return this.store.findRecord('session', session_id, { reload: true });
+  }
+}

ui/desktop/app/styles/app.scss

@@ -506,6 +506,7 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   }
 }
 
+.session-details-header,
 .target-details-header {
   display: flex;
   align-items: center;

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

@@ -0,0 +1,35 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{page-title @model.displayName}}
+
+<Rose::Layout::Page as |page|>
+
+  <page.header>
+    <h1 class='session-details-header'>
+      <Hds::IconTile @color='boundary' @icon='terminal' />
+      {{@model.displayName}}
+    </h1>
+  </page.header>
+
+  <page.actions>
+    <Hds::Button
+      @text={{t 'resources.session.actions.end'}}
+      @icon='x'
+      @color='secondary'
+      {{on 'click' (route-action 'cancelSession' @model)}}
+    />
+  </page.actions>
+
+  <page.body>
+    <div class='copy-url-container'>{{t 'actions.copy-to-clipboard'}}</div>
+    <Rose::Layout::BodyContent as |bc|>
+      <bc.Body class='session-details-body'>
+        {{t 'resources.session.description'}}
+      </bc.Body>
+      <bc.Sidebar class='session-details-sidebar'>{{@model.id}}</bc.Sidebar>
+    </Rose::Layout::BodyContent>
+  </page.body>
+
+</Rose::Layout::Page>

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

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-{{page-title @model.target.displayName}}
+{{page-title @model.displayName}}
 
 <Rose::Layout::Page as |page|>
 

ui/desktop/tests/unit/routes/scopes/scope/projects/sessions/session-test.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+import { setupTest } from 'desktop/tests/helpers';
+
+module(
+  'Unit | Route | scopes/scope/projects/sessions/session',
+  function (hooks) {
+    setupTest(hooks);
+
+    test('it exists', function (assert) {
+      let route = this.owner.lookup(
+        'route:scopes/scope/projects/sessions/session'
+      );
+      assert.ok(route);
+    });
+  }
+);