From 7d909551ac45a0649bd11adc10b8f8dbe270cce9 Mon Sep 17 00:00:00 2001
From: Dharini Jeeva <dharini@hashicorp.com>
Date: Tue, 16 May 2023 09:37:53 -0700
Subject: [PATCH] chore: Use HDS components in auth methods list view (#1686)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 🤖 use hds table and dropdown
---
 addons/rose/addon/styles/hds/overrides.scss   |   4 +
 ui/admin/app/styles/app.scss                  |   8 +
 .../scopes/scope/auth-methods/index.hbs       | 184 +++++++++---------
 .../acceptance/auth-methods/create-test.js    |  24 ++-
 .../acceptance/auth-methods/read-test.js      |  13 +-
 5 files changed, 124 insertions(+), 109 deletions(-)

diff --git a/addons/rose/addon/styles/hds/overrides.scss b/addons/rose/addon/styles/hds/overrides.scss
index 354862697..7f862403b 100644
--- a/addons/rose/addon/styles/hds/overrides.scss
+++ b/addons/rose/addon/styles/hds/overrides.scss
@@ -24,6 +24,10 @@
   [class^='hds-form-group'] {
     margin-bottom: 0;
   }
+
+  .hds-table__td p {
+    color: var(--token-form-indicator-optional-color);
+  }
 }
 
 .hds-dropdown {
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index 425d3ad0d..e90bda620 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -679,3 +679,11 @@
   }
   /* stylelint-enable selector-class-pattern */
 }
+
+.auth-methods-list-alert {
+  margin-bottom: 1rem;
+}
+
+.auth-methods-list-table {
+  margin-top: 1rem;
+}
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
index 31dac7bb6..c8e63f53d 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/index.hbs
@@ -41,6 +41,25 @@
 
   <page.body>
 
+    {{#if @model}}
+      {{#unless this.hasPrimaryAuthMethod}}
+        <Hds::Alert
+          class='auth-methods-list-alert'
+          @type='inline'
+          @color='warning'
+          as |A|
+        >
+          <A.Title>
+            {{t 'resources.auth-method.messages.no-primary-auth-method.title'}}
+          </A.Title>
+          <A.Description>
+            {{t
+              'resources.auth-method.messages.no-primary-auth-method.description'
+            }}
+          </A.Description>
+        </Hds::Alert>
+      {{/unless}}
+    {{/if}}
     {{#if
       (or
         @model
@@ -92,101 +111,80 @@
     {{/if}}
 
     {{#if @model}}
-      {{#unless this.hasPrimaryAuthMethod}}
-        <Rose::Notification
-          @style='warning'
-          @heading={{t
-            'resources.auth-method.messages.no-primary-auth-method.title'
-          }}
-        >
-          {{t
-            'resources.auth-method.messages.no-primary-auth-method.description'
-          }}
-        </Rose::Notification>
-      {{/unless}}
-
-      <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.cell />
-            <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-          </header.row>
-        </table.header>
-
-        <table.body as |body|>
-          {{#each @model as |authMethod|}}
-            <body.row as |row|>
-              <row.headerCell>
-                {{#if (can 'read auth-method' authMethod)}}
-                  <LinkTo
-                    @route='scopes.scope.auth-methods.auth-method'
-                    @model={{authMethod.id}}
-                  >
-                    {{authMethod.displayName}}
-                  </LinkTo>
-                {{else}}
-                  {{authMethod.displayName}}
-                {{/if}}
-                <p>{{authMethod.description}}</p>
-              </row.headerCell>
-              <row.cell>
-                <Hds::Badge
-                  @text={{t
-                    (concat 'resources.auth-method.types.' authMethod.type)
-                  }}
-                />
-              </row.cell>
-              <row.cell>
-                <Copyable
-                  @text={{authMethod.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
+      <Hds::Table
+        class='auth-methods-list-table'
+        @model={{@model}}
+        @columns={{array
+          (hash label=(t 'form.name.label'))
+          (hash label=(t 'form.type.label'))
+          (hash label=(t 'form.id.label'))
+          (hash label='')
+          (hash label=(t 'titles.actions'))
+        }}
+        @valign='middle'
+      >
+        <:body as |B|>
+          <B.Tr>
+            <B.Td>
+              {{#if (can 'read auth-method' B.data)}}
+                <LinkTo
+                  @route='scopes.scope.auth-methods.auth-method'
+                  @model={{B.data.id}}
                 >
-                  <code>{{authMethod.id}}</code>
-                </Copyable>
-              </row.cell>
-              <row.cell>
-                {{#if authMethod.isPrimary}}
-                  <Hds::Badge @text={{t 'states.primary'}} @color='success' />
-                {{/if}}
-              </row.cell>
-              <row.cell>
-                {{#if (can 'makePrimary auth-method' authMethod)}}
-                  <Rose::Dropdown
+                  {{B.data.displayName}}
+                </LinkTo>
+              {{else}}
+                {{B.data.displayName}}
+              {{/if}}
+              <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 B.data.isPrimary}}
+                <Hds::Badge @text={{t 'states.primary'}} @color='success' />
+              {{/if}}
+            </B.Td>
+            <B.Td>
+              {{#if (can 'makePrimary auth-method' B.data)}}
+                <Hds::Dropdown as |dd|>
+                  <dd.ToggleIcon
+                    @icon='more-horizontal'
                     @text={{t 'actions.manage'}}
-                    @dropdownRight={{true}}
-                    @iconOnly={{true}}
-                    @showCaret={{false}}
-                    @icon='flight-icons/svg/more-horizontal-16'
-                    as |dropdown|
-                  >
-                    {{#unless authMethod.isPrimary}}
-                      <dropdown.button
-                        {{on 'click' (route-action 'makePrimary' authMethod)}}
-                      >
-                        {{t 'resources.auth-method.actions.make-primary'}}
-                      </dropdown.button>
-                    {{/unless}}
-                    {{#if authMethod.isPrimary}}
-                      <dropdown.button
-                        {{on
-                          'click'
-                          (route-action 'removeAsPrimary' authMethod)
-                        }}
-                      >
-                        {{t 'resources.auth-method.actions.remove-as-primary'}}
-                      </dropdown.button>
-                    {{/if}}
-                  </Rose::Dropdown>
-                {{/if}}
-              </row.cell>
-            </body.row>
-          {{/each}}
-        </table.body>
-      </Rose::Table>
+                    @hasChevron={{false}}
+                  />
+                  {{#unless B.data.isPrimary}}
+                    <dd.Interactive
+                      @text={{t 'resources.auth-method.actions.make-primary'}}
+                      {{on 'click' (route-action 'makePrimary' B.data)}}
+                    />
+                  {{/unless}}
+                  {{#if B.data.isPrimary}}
+                    <dd.Interactive
+                      @text={{t
+                        'resources.auth-method.actions.remove-as-primary'
+                      }}
+                      {{on 'click' (route-action 'removeAsPrimary' B.data)}}
+                    />
+                  {{/if}}
+                </Hds::Dropdown>
+              {{/if}}
+            </B.Td>
+          </B.Tr>
+        </:body>
+      </Hds::Table>
 
     {{else if (has-resource-filter-selections
       'scopes.scope.auth-methods' 'type'
diff --git a/ui/admin/tests/acceptance/auth-methods/create-test.js b/ui/admin/tests/acceptance/auth-methods/create-test.js
index 5f4f38dfb..8f292d4ce 100644
--- a/ui/admin/tests/acceptance/auth-methods/create-test.js
+++ b/ui/admin/tests/acceptance/auth-methods/create-test.js
@@ -22,10 +22,13 @@ import {
   //   //invalidateSession,
 } from 'ember-simple-auth/test-support';
 
-module('Acceptance | auth-methods | create ', function (hooks) {
+module('Acceptance | auth-methods | create', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
-
+  const DROPDOWN_SELECTOR_ICON =
+    'tbody .hds-table__tr:nth-child(1) .hds-table__td:last-child .hds-dropdown-toggle-icon';
+  const DROPDOWN_SELECTOR_OPTION =
+    '.hds-dropdown__content .hds-dropdown-list-item [type=button]';
   let getAuthMethodsCount;
   const instances = {
     scopes: {
@@ -255,24 +258,27 @@ module('Acceptance | auth-methods | create ', function (hooks) {
   });
 
   test('user can make and remove primary auth methods from index', async function (assert) {
-    assert.expect(3);
+    assert.expect(4);
     assert.notOk(
       instances.orgScope.primaryAuthMethodId,
       'Primary auth method is not yet set.'
     );
     await visit(urls.authMethods);
-    await click(
-      '.rose-table-body .rose-table-row:first-child .rose-dropdown-content [type="button"]:first-child'
-    );
+
+    await click(DROPDOWN_SELECTOR_ICON);
+    assert.dom(DROPDOWN_SELECTOR_OPTION).exists();
+    await click(DROPDOWN_SELECTOR_OPTION);
+
     let scope = this.server.schema.scopes.find(instances.orgScope.id);
+
     assert.strictEqual(
       scope.primaryAuthMethodId,
       instances.authMethod.id,
       'Primary auth method is set.'
     );
-    await click(
-      '.rose-table-body .rose-table-row:first-child .rose-dropdown-content [type="button"]:first-child'
-    );
+    await click(DROPDOWN_SELECTOR_ICON);
+    await click(DROPDOWN_SELECTOR_OPTION);
+
     scope = this.server.schema.scopes.find(instances.orgScope.id);
     assert.notOk(scope.primaryAuthMethodId, 'Primary auth method is unset.');
   });
diff --git a/ui/admin/tests/acceptance/auth-methods/read-test.js b/ui/admin/tests/acceptance/auth-methods/read-test.js
index 72ff3c2b9..b46e82272 100644
--- a/ui/admin/tests/acceptance/auth-methods/read-test.js
+++ b/ui/admin/tests/acceptance/auth-methods/read-test.js
@@ -23,17 +23,16 @@ import {
 module('Acceptance | auth methods | read', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
-  const AUTH_LINK_SELECTOR =
-    'main tbody .rose-table-header-cell:nth-child(1) a';
+  const AUTH_LINK_SELECTOR = 'main tbody .hds-table__td:nth-child(1) a';
   const AUTH_TYPE_SELECTOR =
-    'tbody .rose-table-row:nth-child(1) .rose-table-cell';
+    'tbody .hds-table__tr:nth-child(1) .hds-table__td:nth-child(2)';
   const AUTH_ACTIONS_SELECTOR =
-    'tbody .rose-table-row:nth-child(1) .rose-table-cell:last-child .rose-dropdown';
-  const LDAP_AUTH_LINK_SELECTOR = 'tbody .rose-table-row:nth-child(2) a';
+    'tbody .hds-table__tr:nth-child(1) .hds-table__td:last-child .hds-dropdown';
+  const LDAP_AUTH_LINK_SELECTOR = 'tbody .hds-table__tr:nth-child(2) a';
   const LDAP_AUTH_TYPE_SELECTOR =
-    'tbody .rose-table-row:nth-child(2) .rose-table-cell';
+    'tbody .hds-table__tr:nth-child(2) .hds-table__td:nth-child(2)';
   const LDAP_AUTH_ACTIONS_SELECTOR =
-    'tbody .rose-table-row:nth-child(2) .rose-table-cell:last-child .rose-dropdown';
+    'tbody .hds-table__tr:nth-child(2) .hds-table__td:last-child .hds-dropdown';
 
   const instances = {
     scopes: {