Merge Boundary UI OSS branch 'main' at commit 46d8758fb

ui/admin/app/components/form/role/add-principals/index.hbs

@@ -3,7 +3,6 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-{{! template-lint-disable no-whitespace-for-layout  }}
 {{#if this.hasAvailablePrincipals}}
   <Rose::Form
     class='full-width'
@@ -18,48 +17,40 @@
       @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 'form.type.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.filteredPrincipals as |principal|}}
-          <body.row as |row|>
-            <row.headerCell>
-              <form.checkbox
-                @label={{principal.displayName}}
-                @onChange={{fn this.togglePrincipal principal}}
-              />
-              {{#if principal.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.
-                }}
-                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
-                <Hds::Badge @text={{principal.accountName}} />
-              {{/if}}
-            </row.headerCell>
-            <row.cell>{{principal.id}}</row.cell>
-            <row.cell>
-              <PrincipalTypeBadge @model={{principal}} />
-            </row.cell>
-            <row.cell>
-              <ScopeBadge @scope={{principal.scopeModel}} />
-            </row.cell>
-            <row.cell>{{principal.description}}</row.cell>
-          </body.row>
-        {{/each}}
-      </table.body>
-    </Rose::Table>
+    <Hds::Table
+      @model={{this.filteredPrincipals}}
+      @columns={{array
+        (hash label=(t 'form.name.label'))
+        (hash label=(t 'form.id.label'))
+        (hash label=(t 'form.type.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.togglePrincipal 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}}
+            </Hds::Form::Checkbox::Field>
+          </B.Td>
+          <B.Td>{{B.data.id}}</B.Td>
+          <B.Td><PrincipalTypeBadge @model={{B.data}} /></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}}