feat: 🎸 badge migration in sessions admin ui (#1437)

* chore: badge migration in sessions admin ui

addons/api/addon/models/session.js

@@ -5,6 +5,8 @@ import { tracked } from '@glimmer/tracking';
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 
+export const statusTypes = ['active', 'pending', 'canceling', 'terminated'];
+
 /**
  *
  */
@@ -99,6 +101,14 @@ export default class SessionModel extends GeneratedSessionModel {
   @equal('status', 'active') isActive;
   @equal('status', 'pending') isPending;
 
+  /**
+   * True if status is an unknown string.
+   * @type {boolean}
+   */
+  get isUnknownStatus() {
+    return !statusTypes.includes(this.status);
+  }
+
   /**
    * @type {boolean}
    */

addons/api/tests/unit/models/session-test.js

@@ -59,4 +59,15 @@ module('Unit | Model | session', function (hooks) {
     });
     assert.strictEqual(model.proxy, 'localhost:12345');
   });
+
+  test('it has isUnknownStatus property and returns the expected values', async function (assert) {
+    assert.expect(2);
+    const store = this.owner.lookup('service:store');
+    const modelA = store.createRecord('session', { status: 'active' });
+    const modelB = store.createRecord('session', {
+      status: 'any string',
+    });
+    assert.false(modelA.isUnknownStatus);
+    assert.true(modelB.isUnknownStatus);
+  });
 });

addons/core/addon/components/session-status/index.hbs

@@ -0,0 +1,15 @@
+{{#if @model.isUnknownStatus}}
+  <Hds::Badge
+    @text={{@model.status}}
+    @color={{this.statusBadgeColor}}
+    @icon={{this.statusBadgeIcon}}
+    @type={{this.statusBadgeType}}
+  />
+{{else}}
+  <Hds::Badge
+    @text={{this.statusBadgeText}}
+    @color={{this.statusBadgeColor}}
+    @icon={{this.statusBadgeIcon}}
+    @type={{this.statusBadgeType}}
+  />
+{{/if}}

addons/core/addon/components/session-status/index.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+
+const STATUS_MAPPING = {
+  //map session status to hds text color and icon style
+  //more info - https://design-system-components-hashicorp.vercel.app/components/badge
+  active: { color: 'success', icon: 'check', type: 'filled', text: 'Active' },
+  pending: { color: 'neutral', icon: 'delay', type: 'filled', text: 'Pending' },
+  canceling: {
+    color: 'warning',
+    icon: 'alert-triangle',
+    type: 'filled',
+    text: 'Canceling',
+  },
+  terminated: {
+    color: 'critical',
+    icon: 'x',
+    type: 'filled',
+    text: 'Terminated',
+  },
+};
+
+export default class SessionStatus extends Component {
+  //any status that do not belong in the mapping above, will have a neutral style with outlined badge
+  get statusBadgeColor() {
+    return STATUS_MAPPING[this.args.model.status]?.color || 'neutral';
+  }
+
+  get statusBadgeIcon() {
+    return STATUS_MAPPING[this.args.model.status]?.icon;
+  }
+
+  get statusBadgeType() {
+    return STATUS_MAPPING[this.args.model.status]?.type || 'outlined';
+  }
+
+  get statusBadgeText() {
+    return STATUS_MAPPING[this.args.model.status]?.text;
+  }
+}

addons/core/app/components/session-status.js

@@ -0,0 +1 @@
+export { default } from 'core/components/session-status';

addons/core/tests/integration/components/session-status-test.js

@@ -0,0 +1,58 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | session-status', function (hooks) {
+  setupRenderingTest(hooks);
+  test('it maps to correct text color, icon and type if it is in active status', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    console.log(store, 'stoeree');
+    this.model = store.createRecord('session', { status: 'active' });
+    await render(hbs`<SessionStatus @model={{this.model}} />`);
+    assert.ok(find('.flight-icon-check'));
+    assert.ok(find('.hds-badge--color-success'));
+    assert.ok(find('.hds-badge--type-filled'));
+  });
+
+  test('it maps to correct text color, icon and type if it is in canceling status', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    this.model = store.createRecord('session', { status: 'canceling' });
+    await render(hbs`<SessionStatus @model={{this.model}}/>`);
+    assert.ok(find('.flight-icon-alert-triangle'));
+    assert.ok(find('.hds-badge--color-warning'));
+    assert.ok(find('.hds-badge--type-filled'));
+  });
+
+  test('it maps to correct text color, icon and type if it is in terminated status', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    this.model = store.createRecord('session', { status: 'terminated' });
+    await render(hbs`<SessionStatus @model={{this.model}}/>`);
+    assert.ok(find('.flight-icon-x'));
+    assert.ok(find('.hds-badge--color-critical'));
+    assert.ok(find('.hds-badge--type-filled'));
+  });
+
+  test('it maps to correct text color, icon and type if it is in pending status', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    this.model = store.createRecord('session', { status: 'pending' });
+    await render(hbs`<SessionStatus @model={{this.model}}/>`);
+    assert.ok(find('.flight-icon-delay'));
+    assert.ok(find('.hds-badge--color-neutral'));
+    assert.ok(find('.hds-badge--type-filled'));
+  });
+
+  test('display neutral color and outlined style when it is an unknown status', async function (assert) {
+    assert.expect(3);
+    const store = this.owner.lookup('service:store');
+    this.model = store.createRecord('session', { status: 'any string' });
+    await render(hbs`<SessionStatus @model={{this.model}}/>`);
+    assert.notOk(find('.flight-icon'));
+    assert.ok(find('.hds-badge--color-neutral'));
+    assert.ok(find('.hds-badge--type-outlined'));
+  });
+});

addons/rose/app/styles/rose/_reset.scss

@@ -141,3 +141,11 @@ table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
+// the following line is a custom addition to satisfy HDS
+// https://github.com/hashicorp/design-system/tree/main/packages/components
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -97,8 +97,8 @@
               <row.cell>
                 <code>{{sessionAggregate.user.id}}</code>
                 {{#if sessionAggregate.user.accountName}}
-                  <br /><Rose::Badge
-                  >{{sessionAggregate.user.accountName}}</Rose::Badge>
+                  <br />
+                  <Hds::Badge @text={{sessionAggregate.user.accountName}} />
                 {{/if}}
               </row.cell>
               <row.cell>{{sessionAggregate.target.displayName}}</row.cell>
@@ -114,7 +114,7 @@
                 </time>
               </row.cell>
               <row.cell>
-                <Rose::Badge>{{sessionAggregate.session.status}}</Rose::Badge>
+                <SessionStatus @model={{sessionAggregate.session}} />
               </row.cell>
               <row.cell>
                 {{#if sessionAggregate.session.isCancelable}}