From a05d07919aefa81ec3508b46d16c1377ab516a8d Mon Sep 17 00:00:00 2001
From: Devon Anderson <devon.anderson@hashicorp.com>
Date: Wed, 26 Apr 2023 13:38:00 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20removed=20whitespace?=
 =?UTF-8?q?=20from=20layout=20in=20add-members=20view=20(#1673)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 removed whitespace from layout in add-members view

Removed whitespace from layout in `add-members` view by replacing
`Rose::Table` with `Hds::Table`.

✅ Closes: ICU-5986

* refactor: 💡 refactor table

Added custom styling to remove margin bottom from radio card field. That
is causing 1st column to not be valign center.

✅ Closes: ICU-5986

* refactor: 💡 refactor stylings to override.scss

Moved Hds custom syles to `overrides.scss`

✅ Closes: ICU-5986

* Update addons/rose/addon/styles/hds/overrides.scss

Co-authored-by: Randall Morey <randall@randallmorey.com>

* Update addons/rose/addon/styles/hds/overrides.scss

Co-authored-by: Randall Morey <randall@randallmorey.com>

* refactor: 💡 refactored app.scss for admin

Removed custom css for `.key-value-list` selector that is now being
served in `overrides.scss` globally.

* refactor: 💡 patched overrides

Ported Hds overrides from other repository.

---------

Co-authored-by: Randall Morey <randall@randallmorey.com>
---
 addons/rose/addon/styles/hds/overrides.scss   | 15 ++++
 .../form/group/add-members/index.hbs          | 70 ++++++++-----------
 ui/admin/app/styles/app.scss                  |  6 --
 3 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/addons/rose/addon/styles/hds/overrides.scss b/addons/rose/addon/styles/hds/overrides.scss
index e59e492ee..354862697 100644
--- a/addons/rose/addon/styles/hds/overrides.scss
+++ b/addons/rose/addon/styles/hds/overrides.scss
@@ -16,3 +16,18 @@
     }
   }
 }
+
+.hds-table {
+  border-collapse: revert;
+
+  [class^='hds-form-field'],
+  [class^='hds-form-group'] {
+    margin-bottom: 0;
+  }
+}
+
+.hds-dropdown {
+  .hds-dropdown-toggle-icon {
+    color: inherit;
+  }
+}
diff --git a/ui/admin/app/components/form/group/add-members/index.hbs b/ui/admin/app/components/form/group/add-members/index.hbs
index 9690aa109..b4f741a40 100644
--- a/ui/admin/app/components/form/group/add-members/index.hbs
+++ b/ui/admin/app/components/form/group/add-members/index.hbs
@@ -3,7 +3,6 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-{{! template-lint-disable no-whitespace-for-layout  }}
 {{#if this.availableUsers}}
   <Rose::Form
     class='full-width'
@@ -17,45 +16,38 @@
       @submitText={{t 'resources.group.actions.add-members'}}
       @cancelText={{t 'actions.cancel'}}
     />
-
-    <Rose::Table as |table|>
-      <table.header as |header|>
-        <header.row as |row|>
-          <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-          <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-          <row.headerCell>{{t 'resources.scope.title'}}</row.headerCell>
-          <row.headerCell>{{t 'form.description.label'}}</row.headerCell>
-        </header.row>
-      </table.header>
-      <table.body as |body|>
-        {{#each this.availableUsers as |user|}}
-          <body.row as |row|>
-            <row.headerCell>
-              <form.checkbox
-                @label={{user.displayName}}
-                @onChange={{fn this.toggleMember user}}
-              />
-              {{#if user.accountName}}
-                {{!
-                  The following is a formatting hack since we don't have a great
-                  way to manage micro-whitespace or alignment among separate
-                  components without resorting to heavy-handed grids
-                  or contextualization.  This is a one-off.
-                }}
-                <br />
-                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
-                <Hds::Badge @text={{user.accountName}} />
+    <Hds::Table
+      @model={{this.availableUsers}}
+      @columns={{array
+        (hash label=(t 'form.name.label'))
+        (hash label=(t 'form.id.label'))
+        (hash label=(t 'resources.scope.title'))
+        (hash label=(t 'form.description.label'))
+      }}
+      @valign='middle'
+    >
+      <:body as |B|>
+        <B.Tr>
+          <B.Td>
+            <Hds::Form::Checkbox::Field
+              {{on 'change' (fn this.toggleMember B.data)}}
+              as |F|
+            >
+              <F.Label>{{B.data.displayName}}</F.Label>
+              {{#if B.data.accountName}}
+                <F.HelperText>
+                  <Hds::Badge @text={{B.data.accountName}} />
+                </F.HelperText>
               {{/if}}
-            </row.headerCell>
-            <row.cell><code>{{user.id}}</code></row.cell>
-            <row.cell>
-              <ScopeBadge @scope={{user.scopeModel}} />
-            </row.cell>
-            <row.cell>{{user.description}}</row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
+            </Hds::Form::Checkbox::Field>
+          </B.Td>
+          <B.Td><code>{{B.data.id}}</code></B.Td>
+          <B.Td><ScopeBadge @scope={{B.data.scopeModel}} /></B.Td>
+          <B.Td>{{B.data.description}}</B.Td>
+        </B.Tr>
+
+      </:body>
+    </Hds::Table>
 
   </Rose::Form>
 {{/if}}
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index af13179a1..425d3ad0d 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -675,12 +675,6 @@
         width: 1%;
         white-space: nowrap;
       }
-
-      // Reset field margins to rely instead on cell paddings
-      .hds-form-field--layout-vertical,
-      .hds-form-text-input {
-        margin: 0;
-      }
     }
   }
   /* stylelint-enable selector-class-pattern */