From 4b9496b4f25c7b12979afd88cd548fd051bb5e4a Mon Sep 17 00:00:00 2001
From: Cameron Perera <cameron.perera@hashicorp.com>
Date: Fri, 4 Aug 2023 13:43:53 -0500
Subject: [PATCH] Icu 10491 create route for session/session-id (#1825)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 🐛 call displayName on model

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

✅ Closes: ICU-10491
---
 addons/core/translations/resources/en-us.yaml |  1 +
 ui/desktop/app/router.js                      |  4 ++-
 .../scopes/scope/projects/sessions/session.js | 25 +++++++++++++
 ui/desktop/app/styles/app.scss                |  1 +
 .../scope/projects/sessions/session.hbs       | 35 +++++++++++++++++++
 .../scopes/scope/projects/targets/target.hbs  |  2 +-
 .../scope/projects/sessions/session-test.js   | 21 +++++++++++
 7 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 ui/desktop/app/routes/scopes/scope/projects/sessions/session.js
 create mode 100644 ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
 create mode 100644 ui/desktop/tests/unit/routes/scopes/scope/projects/sessions/session-test.js

diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index 14a2c70a0..a2d87fec2 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/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
diff --git a/ui/desktop/app/router.js b/ui/desktop/app/router.js
index 244ccf1cf..c3912e080 100644
--- a/ui/desktop/app/router.js
+++ b/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 () {});
+        });
       });
     });
   });
diff --git a/ui/desktop/app/routes/scopes/scope/projects/sessions/session.js b/ui/desktop/app/routes/scopes/scope/projects/sessions/session.js
new file mode 100644
index 000000000..071310dcc
--- /dev/null
+++ b/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 });
+  }
+}
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index dac214bdf..911120fe3 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/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;
diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
new file mode 100644
index 000000000..846744e5b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs b/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
index 58890dfc5..22db74c94 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/targets/target.hbs
+++ b/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|>
 
diff --git a/ui/desktop/tests/unit/routes/scopes/scope/projects/sessions/session-test.js b/ui/desktop/tests/unit/routes/scopes/scope/projects/sessions/session-test.js
new file mode 100644
index 000000000..9fc83749f
--- /dev/null
+++ b/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);
+    });
+  }
+);