feat: 🎸 Implement time-remaining helper into desktop UI (#2018)

* 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

@@ -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',

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);
     }
 

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;

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>

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);
   });