From 9782f7e243bfc7e51a9a744fe91e46bde37c7443 Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Thu, 7 Dec 2023 16:01:57 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Implement=20time-remaini?=
 =?UTF-8?q?ng=20helper=20into=20desktop=20UI=20(#2018)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 implement helper

Implement `time-remainig` helper to display duration of a session for
desktop app.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

* refactor: 💡 Refactored scenarios

Refactored `ipc.js` scenario to include `expiration_time` for a new
session.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

* fix: 🐛 Fix add expiration_time when user has no grants to read (#2024)

* refactor: 💡 refactor styles

Removed `div` and added `Hds::Badge` to `h1` element.  Condensed and
renamed styling for title to `session-details-info`

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

* Refactored `projects/targets` controller to return the correct `expiration_time` field returned from CLI.  Cleaned up CSS for `session-details-info` attribute and wrapped `@model.displayname` in span tag.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

* Update ui/desktop/app/controllers/scopes/scope/projects/targets/index.js

mixed naming expiration field on payload to store

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

* refactor: 💡 refactored page header

Refactored `sessions` header to use `<Hds::Text::Dislpay/>` instead of a
span.

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

* refactor: 💡 refactor cli response

Refactor `expiration` field from CLI response to be the correct
definition

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

* refactor: 💡 refactor sessions layout

Removed span as parent of header information, and pushed styles to
yielded page.header. Fixed stub in test

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-10487

---------

Co-authored-by: Carlos Alcaide Corvo <ccorvo@hashicorp.com>
Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>
---
 addons/api/mirage/scenarios/ipc.js                   |  1 +
 .../scopes/scope/projects/targets/index.js           |  5 ++++-
 ui/desktop/app/styles/app.scss                       |  7 ++++++-
 .../scopes/scope/projects/sessions/session.hbs       | 12 ++++++++----
 .../acceptance/projects/sessions/session-test.js     |  2 +-
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/addons/api/mirage/scenarios/ipc.js b/addons/api/mirage/scenarios/ipc.js
index 7001bc831..611f50d47 100644
--- a/addons/api/mirage/scenarios/ipc.js
+++ b/addons/api/mirage/scenarios/ipc.js
@@ -57,6 +57,7 @@ export default function initializeMockIPC(server, config) {
         userId: 'authenticateduser',
         type,
         created_time: new Date().toISOString(),
+        expiration_time: faker.date.soon(),
       });
       const decoded = {
         key1: 'value 1',
diff --git a/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js b/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js
index c7dc524c8..4773cc68d 100644
--- a/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js
+++ b/ui/desktop/app/controllers/scopes/scope/projects/targets/index.js
@@ -60,7 +60,8 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
 
     // Associate the connection details with the session
     let session;
-    const { session_id, address, port, credentials } = connectionDetails;
+    const { session_id, address, port, credentials, expiration } =
+      connectionDetails;
     try {
       session = await this.store.findRecord('session', session_id);
     } catch (error) {
@@ -76,9 +77,11 @@ export default class ScopesScopeProjectsTargetsIndexController extends Controlle
             proxy_address: address,
             proxy_port: port,
             target_id: target.id,
+            expiration_time: expiration,
           },
         ],
       });
+
       session = this.store.peekRecord('session', session_id);
     }
 
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index a9c2145d7..f39c28069 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -507,7 +507,12 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
   }
 }
 
-.session-details-header,
+.session-details-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .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
index 55177d90a..d004eacad 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/session.hbs
@@ -7,11 +7,15 @@
 
 <Rose::Layout::Page as |page|>
 
-  <page.header>
-    <h1 class='session-details-header'>
-      <Hds::IconTile @color='boundary' @icon='terminal' />
+  <page.header class='session-details-info'>
+    <Hds::IconTile @color='boundary' @icon='terminal' />
+    <Hds::Text::Display @tag='h1' @size='500'>
       {{@model.displayName}}
-    </h1>
+    </Hds::Text::Display>
+    <Hds::Badge
+      @text={{time-remaining @model.expiration_time}}
+      @icon='loading'
+    />
   </page.header>
 
   <page.actions>
diff --git a/ui/desktop/tests/acceptance/projects/sessions/session-test.js b/ui/desktop/tests/acceptance/projects/sessions/session-test.js
index 7b1903b6a..a919cd783 100644
--- a/ui/desktop/tests/acceptance/projects/sessions/session-test.js
+++ b/ui/desktop/tests/acceptance/projects/sessions/session-test.js
@@ -191,11 +191,11 @@ module('Acceptance | projects | sessions | session', function (hooks) {
       address: 'a_123',
       port: 'p_123',
       protocol: 'tcp',
+      expiration: '2022-02-05T09:55:39.216Z',
     });
 
     await visit(urls.target);
     await click(TARGET_CONNECT_BUTTON);
-
     assert.strictEqual(currentURL(), urls.session);
   });