refactor: 💡 Refactor sessions-list to use Hds::Table (#2043)

* refactor: 💡 Refactor `sessions-list` to use `Hds::Table` Refactor `sessions-list` to use `Hds::Table` instead of `Rose::table` ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11732 * refactor: 💡 Use `Hds::Text` component for `code` elements Refactor `code` elements to use `Hds::Text::Code` component for text. ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11732 * Update ui/admin/app/templates/scopes/scope/sessions/index.hbs Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com> * refactor: 💡 Refactor the condition around the `cancelSession` route-action, to use the `SessionAbility` for permssion to cancel session. Upgrade `Rose::Button` to `Hds::Button`. ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-11732 --------- Co-authored-by: Cameron Perera <cameron.perera@hashicorp.com>
hashicorp · Dec 14, 2023 · ade1601 · ade1601 · vercel · Dec 14, 2023
1 parent 4550cd0
commit ade1601
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 70 deletions.
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
@@ -740,7 +740,8 @@
 }
 
 .auth-methods-list-table,
-.workers-list-table {
+.workers-list-table,
+.sessions-list-table {
   margin-top: 1rem;
 }
 

diff --git a/ui/admin/app/templates/scopes/scope/sessions/index.hbs b/ui/admin/app/templates/scopes/scope/sessions/index.hbs
@@ -68,76 +68,63 @@
     </Rose::Toolbar>
 
     {{#if @model}}
-      <Rose::Table as |table|>
-        <table.header as |header|>
-          <header.row as |row|>
-            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-            <row.headerCell>{{t 'resources.user.title'}}</row.headerCell>
-            <row.headerCell>{{t 'resources.target.title'}}</row.headerCell>
-            <row.headerCell>{{t 'form.started.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.status.label'}}</row.headerCell>
-            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each @model as |sessionAggregate|}}
-            <body.row as |row|>
-              <row.headerCell class='nowrap'>
-                <Rose::Icon
-                  class={{concat
-                    'session-status-'
-                    sessionAggregate.session.status
-                  }}
-                  @name='flight-icons/svg/entry-point-16'
-                  @size='medium'
+
+      <Hds::Table
+        @model={{@model}}
+        class='sessions-list-table'
+        @columns={{array
+          (hash label=(t 'form.id.label'))
+          (hash label=(t 'resources.user.title'))
+          (hash label=(t 'resources.target.title'))
+          (hash label=(t 'form.started.label'))
+          (hash label=(t 'form.status.label'))
+          (hash label=(t 'titles.actions'))
+        }}
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              <Rose::Icon
+                class={{concat 'session-status-' B.data.session.status}}
+                @name='flight-icons/svg/entry-point-16'
+                @size='medium'
+              />
+              <Copyable
+                @text={{B.data.session.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <Hds::Text::Code>{{B.data.session.id}}</Hds::Text::Code>
+              </Copyable>
+            </B.Td>
+            <B.Td>
+              <Hds::Text::Code>{{B.data.user.id}}</Hds::Text::Code>
+              {{#if B.data.user.accountName}}
+                <br />
+                <Hds::Badge @text={{B.data.user.accountName}} />
+              {{/if}}
+            </B.Td>
+            <B.Td>{{B.data.target.displayName}}</B.Td>
+            <B.Td>
+              <time datetime={{format-date-iso B.data.session.created_time}}>
+                {{format-date-iso-human B.data.session.created_time}}
+              </time>
+            </B.Td>
+            <B.Td>
+              <SessionStatus @model={{B.data.session}} />
+            </B.Td>
+            <B.Td>
+              {{#if (can 'cancel session' B.data.session)}}
+                <Hds::Button
+                  @color='secondary'
+                  @text={{t 'actions.cancel'}}
+                  {{on 'click' (route-action 'cancelSession' B.data.session)}}
                 />
-                <Copyable
-                  @text={{sessionAggregate.session.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{sessionAggregate.session.id}}</code>
-                </Copyable>
-              </row.headerCell>
-              <row.cell>
-                <code>{{sessionAggregate.user.id}}</code>
-                {{#if sessionAggregate.user.accountName}}
-                  <br />
-                  <Hds::Badge @text={{sessionAggregate.user.accountName}} />
-                {{/if}}
-              </row.cell>
-              <row.cell>{{sessionAggregate.target.displayName}}</row.cell>
-              <row.cell>
-                <time
-                  datetime={{format-date-iso
-                    sessionAggregate.session.created_time
-                  }}
-                >
-                  {{format-date-iso-human
-                    sessionAggregate.session.created_time
-                  }}
-                </time>
-              </row.cell>
-              <row.cell>
-                <SessionStatus @model={{sessionAggregate.session}} />
-              </row.cell>
-              <row.cell>
-                {{#if sessionAggregate.session.isAvailable}}
-                  <Rose::Button
-                    @style='secondary'
-                    {{on
-                      'click'
-                      (route-action 'cancelSession' sessionAggregate.session)
-                    }}
-                  >
-                    {{t 'actions.cancel'}}
-                  </Rose::Button>
-                {{/if}}
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
 
     {{else if
       (has-resource-filter-selections 'scopes.scope.sessions' 'status')