feat: 🎸 Create time-remaining helper (#2012)

* feat: 🎸 create helper

Create `time-remaining` helper to track remaining session time.

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

* refactor: 💡 Clean up code for time-remaining helper

Moved time remaining helper into `core` addons folder. Cleaned up the
`time-remaining` helper to use the `DurationUnitFormat` service.

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

* Update session.hbs

removed test implementation

* refactor: 💡 files added for helper

files added for helper

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

* Update session.hbs

fix linting

* refactor: 💡 fix uneeded spacing

Fix spacing on hbs file used for testing time-remaining helper

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

* refactor: 💡 refactor time-remaining helper

Cleaned up code that was returning a string if `differenceInSeconds` was
less than or equal to zero. Code is now conditionally checking in the
`differenceInSeconds` variable if the `difference` is greater than zero.
If it is not then it will return zero and let the `DurationUnitFormat`
handle the rest.

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

* refactor: 💡 fix failing test

Fix failing `time-remaining` test

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

addons/api/addon/generated/models/session.js

@@ -32,6 +32,13 @@ export default class GeneratedSessionModel extends BaseModel {
   })
   updated_time;
 
+  @attr('date', {
+    description:
+      'After this time the connection will be expired, e.g. forcefully terminated.\nOutput only.',
+    readOnly: true,
+  })
+  expiration_time;
+
   @attr('number', {
     description: 'Current version number of this resource.',
   })

addons/api/mirage/generated/factories/session.js

@@ -13,5 +13,6 @@ export default Factory.extend({
   type: 'tcp',
   created_time: () => faker.date.recent(),
   updated_time: () => faker.date.recent(),
+  expiration_time: () => faker.date.soon(),
   version: () => faker.number.int(),
 });

addons/core/addon/helpers/time-remaining.js

@@ -0,0 +1,37 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import DurationUnitFormat from 'intl-unofficial-duration-unit-format';
+
+export default class extends Helper {
+  // =services
+  @service clockTick;
+  @service intl;
+
+  compute([expiration_time]) {
+    if (!expiration_time) return;
+
+    // Parse the expiration time
+    const expirationTime = new Date(expiration_time);
+
+    // Get the curent time
+    const currentTime = this.clockTick.now;
+
+    // Calculate the difference in milleseconds
+    const difference = expirationTime - currentTime;
+
+    // Calculate the difference in seconds if the difference is positive
+    const differenceInSeconds =
+      difference > 0 ? Math.floor(difference / 1000) : 0;
+
+    // Format the duration
+    const duration = new DurationUnitFormat(this.intl.primaryLocale, {
+      style: 'timer',
+      format: `{hours}:{minutes}:{seconds} ${this.intl.t(
+        'resources.session.remaining',
+      )}`,
+    });
+
+    // Return the formatted duration
+    return duration.format(differenceInSeconds);
+  }
+}

addons/core/app/helpers/time-remaining.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from 'core/helpers/time-remaining';

addons/core/tests/integration/helpers/time-remaining-test.js

@@ -0,0 +1,30 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Helper | time-remaining', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  test('it calculates the correct time remaining', async function (assert) {
+    assert.expect(1);
+
+    this.set('expirationTime', new Date(Date.now() + 1000 * 60 * 60 * 24));
+
+    await render(hbs`{{time-remaining this.expirationTime}}`);
+
+    assert.strictEqual(this.element.textContent.trim(), '23:59:59 remaining');
+  });
+
+  test('it handles negative time remaining', async function (assert) {
+    assert.expect(1);
+
+    this.set('expirationTime', new Date(Date.now() - 1000 * 60 * 60 * 24));
+
+    await render(hbs`{{time-remaining this.expirationTime}}`);
+
+    assert.strictEqual(this.element.textContent.trim(), '0:00:00 remaining');
+  });
+});

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

@@ -286,6 +286,7 @@ session:
   title_plural: Sessions
   active_plural: Active Sessions
   description: A session is a connection to a target initiated through Boundary.
+  remaining: remaining
   status:
     active: Active
     pending: Pending