From 3caf81fc477c4099b38912aa05c0c1a9385814da Mon Sep 17 00:00:00 2001
From: NatashaKab <133793701+NatashaKab@users.noreply.github.com>
Date: Fri, 4 Aug 2023 12:26:08 -0400
Subject: [PATCH] Icu 10504 use hds table in desktop sessions list (#1823)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 Use HDS tables in user accounts

* refactor: 💡 Use HDS table in desktop sessions list

* refactor: 💡 Added back the commit Zed mentioned

* refactor: 💡 Added a comment for the session status class

---------

Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
---
 .../scopes/scope/projects/sessions/index.hbs  | 133 ++++++++++--------
 .../acceptance/projects/sessions-test.js      |   2 +-
 2 files changed, 76 insertions(+), 59 deletions(-)

diff --git a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
index fb53511f8..59a2daf15 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/sessions/index.hbs
@@ -115,37 +115,53 @@
     </Rose::Toolbar>
 
     {{#if this.sorted}}
-      <Rose::Table as |table|>
-        <table.header as |header|>
-          <header.row as |row|>
-            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-            <row.headerCell>{{t 'resources.target.title'}}</row.headerCell>
-            <row.headerCell>{{t 'form.proxy.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.started.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.status.label'}}</row.headerCell>
-            <row.headerCell />
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each this.sorted as |model|}}
-            <body.row as |row|>
-              <row.headerCell class='nowrap'>
-                <Rose::Icon
-                  class={{concat 'session-status-' model.status}}
-                  @name='flight-icons/svg/entry-point-16'
-                  @size='medium'
-                />
+      <Hds::Table
+        @model={{this.sorted}}
+        @columns={{array
+          (hash label=(t 'form.id.label'))
+          (hash label=(t 'resources.target.title'))
+          (hash label=(t 'form.proxy.label'))
+          (hash label=(t 'form.started.label'))
+          (hash label=(t 'form.status.label'))
+          (hash label='')
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (can 'read model' B.data)}}
+                {{#if B.data.isActive}}
+                  <Hds::Badge
+                    @text={{t 'resources.session.title'}}
+                    @icon='entry-point'
+                    @isIconOnly={{true}}
+                    @color='success'
+                    {{! there are plans to remove this class. It is here to make the test 
+                    pass. This is going to change later so Cameron suggested it's ok to
+                    have it for now.}}
+                    class='session-status-active'
+                  />
+                {{else}}
+                  <Hds::Badge
+                    @text={{t 'resources.session.title'}}
+                    @icon='entry-point'
+                    @isIconOnly={{true}}
+                  />
+                {{/if}}
                 <Copyable
-                  @text={{model.id}}
+                  @text={{B.data.id}}
                   @buttonText={{t 'actions.copy-to-clipboard'}}
                   @acknowledgeText={{t 'states.copied'}}
                 >
-                  <code>{{model.id}}</code>
+                  <code>{{B.data.id}}</code>
                 </Copyable>
-              </row.headerCell>
-              <row.cell>{{model.target.displayName}}</row.cell>
-              <row.cell>
-                {{!
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{B.data.target.displayName}}
+            </B.Td>
+            {{!
                   Two if's here because:
                   1) Local proxy info is only relevant if the session is
                      active or pending (aka isCancelable).  Once the session
@@ -156,39 +172,40 @@
                      from other devices (or even another tab), in which case we
                      won't have the local proxy info available here.
                 }}
-                {{#if model.isCancelable}}
-                  {{#if model.proxy}}
-                    <Copyable
-                      @text={{model.proxy}}
-                      @buttonText={{t 'actions.copy-to-clipboard'}}
-                      @acknowledgeText={{t 'states.copied'}}
-                    >
-                      <code>{{model.proxy}}</code>
-                    </Copyable>
-                  {{/if}}
+            <B.Td>
+              {{#if B.data.isCancelable}}
+                {{#if B.data.proxy}}
+                  <Copyable
+                    @text={{B.data.proxy}}
+                    @buttonText={{t 'actions.copy-to-clipboard'}}
+                    @acknowledgeText={{t 'states.copied'}}
+                  >
+                    <code>{{B.data.proxy}}</code>
+                  </Copyable>
                 {{/if}}
-              </row.cell>
-              <row.cell>
-                <time datetime={{format-date-iso model.created_time}}>
-                  {{format-date-iso-human model.created_time}}
-                </time>
-              </row.cell>
-              <row.cell>
-                <SessionStatus @model={{model}} />
-              </row.cell>
-              <row.cell>
-                {{#if model.isCancelable}}
-                  <Hds::Button
-                    @text={{t 'actions.cancel'}}
-                    @color='secondary'
-                    {{on 'click' (route-action 'cancelSession' model)}}
-                  />
-                {{/if}}
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              <time datetime={{format-date-iso B.data.created_time}}>
+                {{format-date-iso-human B.data.created_time}}
+              </time>
+            </B.Td>
+            <B.Td>
+              <SessionStatus @model={{B.data}} />
+            </B.Td>
+            <B.Td>
+              {{#if B.data.isCancelable}}
+                <Hds::Button
+                  @text={{t 'actions.cancel'}}
+                  @color='secondary'
+                  {{on 'click' (route-action 'cancelSession' B.data)}}
+                />
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
+
     {{else if (has-resource-filter-selections
       'scopes.scope.projects.sessions' 'status' 'project'
     )}}
diff --git a/ui/desktop/tests/acceptance/projects/sessions-test.js b/ui/desktop/tests/acceptance/projects/sessions-test.js
index 920bfadba..9205c98fe 100644
--- a/ui/desktop/tests/acceptance/projects/sessions-test.js
+++ b/ui/desktop/tests/acceptance/projects/sessions-test.js
@@ -192,7 +192,7 @@ module('Acceptance | projects | sessions', function (hooks) {
     assert.expect(1);
     await visit(urls.sessions);
     assert.ok(
-      find('tbody tr:first-child th:first-child .session-status-active')
+      find('tbody tr:first-child td:first-child .session-status-active')
     );
   });