Icu 10208 use hds table in account list view (#1784)

* chore: 🤖 Retire rose form textarea

✅ Closes: ICU-9425

* refactor: 💡 Added the disabled feature requested by Dharini

* refactor: 💡 Rose tables to HDS tables in Users

* refactor: 💡 Removed implementation of rose tables in users

* refactor: 💡 use hds table in groups list view

* refactor: 💡 Removed the group list class Dharini mentioned

* refactor: 💡 Resolved the conflicts in user list table and group

* refactor: 💡 Use hds table in role list view

* refactor: 💡 Use HDS tables for user accounts

* refactor: 💡 Fixed the linting error

---------

Co-authored-by: Dharini Jeeva <dharini@hashicorp.com>

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

@@ -32,6 +32,7 @@
   <page.body>
 
     {{#if @model}}
+
       <Hds::Table
         @model={{@model}}
         @columns={{array

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -26,64 +26,67 @@
   <page.body>
     {{#if @model.accounts}}
 
-      <Rose::Table as |table|>
-        <table.header as |header|>
-          <header.row as |row|>
-            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-          </header.row>
-        </table.header>
-        <table.body as |body|>
-          {{#each @model.accounts as |account|}}
-            <body.row as |row|>
-              <row.headerCell>
-                {{account.accountName}}
-                <p>{{account.description}}</p>
-              </row.headerCell>
-              <row.cell>
-                <Hds::Badge
-                  @text={{t
-                    (concat 'resources.auth-method.types.' account.type)
-                  }}
-                />
-              </row.cell>
-              <row.cell>
-                <Copyable
-                  @text={{account.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{account.id}}</code>
-                </Copyable>
-              </row.cell>
-              <row.cell>
-                {{#if (can 'removeAccount user' @model.user account=account)}}
-                  <Rose::Dropdown
-                    @icon='flight-icons/svg/more-horizontal-16'
-                    @iconOnly={{true}}
-                    @showCaret={{false}}
-                    @dropdownRight={{true}}
-                    @text={{t 'actions.manage'}}
-                    as |dropdown|
-                  >
-                    <dropdown.button
-                      @style='danger'
-                      {{on
-                        'click'
-                        (route-action 'removeAccount' @model.user account)
-                      }}
-                    >
-                      {{t 'actions.remove'}}
-                    </dropdown.button>
-                  </Rose::Dropdown>
+      <Hds::Table
+        @model={{@model.accounts}}
+        @columns={{array
+          (hash label=(t 'form.name.label'))
+          (hash label=(t 'form.type.label'))
+          (hash label=(t 'form.id.label'))
+          (hash label=(t 'titles.actions'))
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              <span class='hds-font-weight-semibold'>{{#if
+                  (can 'read accounts' B.data)
+                }}
+                  {{B.data.accountName}}
+                {{else}}
+                  {{B.data.displayName}}
                 {{/if}}
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+              </span>
+
+              <p>{{B.data.description}}</p>
+            </B.Td>
+            <B.Td>
+              <Hds::Badge
+                @text={{t (concat 'resources.auth-method.types.' B.data.type)}}
+              />
+            </B.Td>
+            <B.Td>
+              <Copyable
+                @text={{B.data.id}}
+                @buttonText={{t 'actions.copy-to-clipboard'}}
+                @acknowledgeText={{t 'states.copied'}}
+              >
+                <code>{{B.data.id}}</code>
+              </Copyable>
+            </B.Td>
+            <B.Td>
+
+              {{#if (can 'removeAccount user' @model.user account=B.data)}}
+                <Hds::Dropdown as |dd|>
+                  <dd.ToggleIcon
+                    @icon='more-horizontal'
+                    @text={{t 'actions.manage'}}
+                    @hasChevron={{false}}
+                  />
+                  <dd.Interactive
+                    @color='critical'
+                    @text={{t 'actions.remove'}}
+                    {{on
+                      'click'
+                      (route-action 'removeAccount' @model.user B.data)
+                    }}
+                  />
+                </Hds::Dropdown>
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
 
     {{else}}
 

ui/admin/tests/acceptance/users/accounts-test.js

@@ -24,17 +24,15 @@ module('Acceptance | users | accounts', function (hooks) {
   let accountsCount;
   let features;
 
-  const ACCOUNTS_ACTION_SELECTOR =
-    'tbody .rose-table-row:nth-child(1) .rose-table-cell:last-child .rose-dropdown';
-  const ACCOUNTS_TYPE_SELECTOR =
-    'tbody .rose-table-row:nth-child(1) .rose-table-cell';
+  const ACCOUNTS_TYPE_SELECTOR = 'tbody tr .hds-badge__text';
   const ADD_ACCOUNTS_ACTION_SELECTOR = '.rose-layout-page-actions a';
   const ERROR_MSG_SELECTOR = '[role="alert"]';
   const TABLE_ROWS_SELECTOR = 'tbody tr';
   const CHECKBOX_SELECTOR = 'tbody label';
   const SUBMIT_BTN_SELECTOR = 'form [type="submit"]';
   const CANCEL_BTN_SELECTOR = 'form [type="button"]';
-  const REMOVE_ACTION_SELECTOR = 'tbody tr .rose-dropdown-button-danger';
+  const REMOVE_ACTION_SELECTOR = 'tbody tr .hds-dropdown-list-item button';
+  const ACCOUNTS_ACTION_SELECTOR = '.hds-dropdown-toggle-icon';
 
   const instances = {
     scopes: {
@@ -92,6 +90,7 @@ module('Acceptance | users | accounts', function (hooks) {
 
     await click(`[href="${urls.accounts}"]`);
     assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount });
+    await click(ACCOUNTS_ACTION_SELECTOR);
     await click(REMOVE_ACTION_SELECTOR);
     assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount - 1 });
   });
@@ -168,6 +167,7 @@ module('Acceptance | users | accounts', function (hooks) {
 
     await click(`[href="${urls.accounts}"]`);
     assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount });
+    await click(ACCOUNTS_ACTION_SELECTOR);
     await click(REMOVE_ACTION_SELECTOR);
     assert.dom(ERROR_MSG_SELECTOR).isVisible();
   });
@@ -276,6 +276,7 @@ module('Acceptance | users | accounts', function (hooks) {
 
     await click(`[href="${urls.accounts}"]`);
     assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount });
+    await click(ACCOUNTS_ACTION_SELECTOR);
     await click(REMOVE_ACTION_SELECTOR);
     assert.dom(TABLE_ROWS_SELECTOR).exists({ count: accountsCount - 1 });
     await click(ADD_ACCOUNTS_ACTION_SELECTOR);