From 8196de1dd317074f5539d06ac98f447c547d19f5 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 11:26:55 -0400
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20initial=20host?=
 =?UTF-8?q?s=20selection=20UI=20for=20host=20sets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form/host-set/hosts/index.hbs  | 51 ++++++++++++++
 .../components/form/host-set/hosts/index.js   | 23 ++++++
 ui/core/app/router.js                         |  4 +-
 .../host-catalogs/host-catalog/host-sets.js   | 33 +++++----
 .../host-catalog/host-sets/host-set/hosts.js  | 70 +++++++++++++++++++
 ui/core/app/styles/app.scss                   | 10 ++-
 .../host-catalog/host-sets/-navigation.hbs    |  5 +-
 .../host-catalog/host-sets/host-set/hosts.hbs |  7 ++
 .../components/form/host-set/hosts-test.js    | 25 +++++++
 .../host-sets/host-set/hosts-test.js          | 11 +++
 ui/core/translations/en-us.yaml               |  3 +
 11 files changed, 222 insertions(+), 20 deletions(-)
 create mode 100644 ui/core/app/components/form/host-set/hosts/index.hbs
 create mode 100644 ui/core/app/components/form/host-set/hosts/index.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
 create mode 100644 ui/core/tests/integration/components/form/host-set/hosts-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts-test.js

diff --git a/ui/core/app/components/form/host-set/hosts/index.hbs b/ui/core/app/components/form/host-set/hosts/index.hbs
new file mode 100644
index 000000000..558d4d10b
--- /dev/null
+++ b/ui/core/app/components/form/host-set/hosts/index.hbs
@@ -0,0 +1,51 @@
+<Rose::Form
+  class="full-width"
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @submitText={{t "actions.save"}}
+    @cancelText={{t "actions.cancel"}} />
+
+  {{!--
+  {{#if @model.errors.host_ids}}
+    <input.errors as |errors|>
+      {{#each @model.errors.host_ids as |error|}}
+        <errors.message>{{error.message}}</errors.message>
+      {{/each}}
+    </input.errors>
+  {{/if}}
+  --}}
+
+  <Rose::Table as |table|>
+    <table.header as |header|>
+      <header.row as |row|>
+        <row.headerCell>{{t 'form.label.id'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
+        <row.headerCell>{{t 'form.label.address'}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each this.options as |option|}}
+        <body.row as |row|>
+          <row.headerCell>
+            <form.checkbox
+              @label={{option.host.id}}
+              @checked={{option.selected}}
+              onChange={{fn @toggleHost option.host}}
+            />
+            <p>{{option.host.description}}</p>
+          </row.headerCell>
+          <row.cell>{{option.host.name}}</row.cell>
+          <row.cell>{{option.host.address}}</row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+</Rose::Form>
diff --git a/ui/core/app/components/form/host-set/hosts/index.js b/ui/core/app/components/form/host-set/hosts/index.js
new file mode 100644
index 000000000..1e420869a
--- /dev/null
+++ b/ui/core/app/components/form/host-set/hosts/index.js
@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import { computed } from '@ember/object';
+
+export default class FormHostSetHostsComponent extends Component {
+
+  // =attributes
+
+  /**
+   * An array of wrapped `HostModel` instances where the wrapper includes
+   * a `selected` boolean field indicating if the host is represented
+   * in `model.host_ids`.
+   * @type {[{host: HostModel, selected: boolean}]}
+   */
+  @computed('args.{hosts.[],model.host_ids.[]}')
+  get options() {
+    const { hosts, model: hostSet } = this.args;
+    return hosts.map(host => ({
+      host,
+      selected: Boolean(hostSet.host_ids.findBy('value', host.id))
+    }));
+  }
+
+}
diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 4243d97b5..08f7d9af6 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -24,7 +24,9 @@ Router.map(function () {
             this.route('new');
             this.route('host-catalog', { path: ':host_catalog_id' }, function() {
               this.route('host-sets', function() {
-                this.route('host-set', { path: ':host_set_id' }, function() {});
+                this.route('host-set', { path: ':host_set_id' }, function() {
+                  this.route('hosts');
+                });
                 this.route('new');
               });
             });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
index b77bfcf35..52521189f 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
@@ -8,6 +8,19 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
   @service intl;
   @service notify;
 
+  // =attributes
+
+  /**
+   * Configure adapter options using current host catalog and
+   * the current project scope.
+   * @return {object}
+   */
+  get adapterOptions() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+    return { adapterOptions : { scopeID, hostCatalogID } };
+  }
+
   // =methods
 
   /**
@@ -15,9 +28,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
    * @return {Promise{[HostSetModel]}}
    */
   async model() {
-    const scopeID = this.modelFor('scopes.scope.projects.project').id;
-    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
-    return this.store.findAll('host-set', { adapterOptions: { scopeID, hostCatalogID } });
+    return this.store.findAll('host-set', this.adapterOptions);
   }
 
   // =actions
@@ -42,8 +53,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
   async save(hostSet) {
     try {
       const { isNew } = hostSet;
-      await hostSet.save(this.adapterOptions());
-      this.refresh();
+      await hostSet.save(this.adapterOptions);
       this.notify.success(
         this.intl.t(isNew ? 'notify.create-success' : 'notify.save-success')
       );
@@ -61,8 +71,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
   @action
   async delete(hostSet) {
     try {
-      await hostSet.destroyRecord(this.adapterOptions());
-      this.refresh();
+      await hostSet.destroyRecord(this.adapterOptions);
       this.notify.success(this.intl.t('notify.delete-success'));
       this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.host-sets');
     } catch (error) {
@@ -70,14 +79,4 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
       this.notify.error(error.message, { closeAfter: null });
     }
   }
-
-  /**
-   * Configure adapter options using current host catalog scope and it's parent project scope.
-   * @return {object}
-   */
-  adapterOptions() {
-    const scopeID = this.modelFor('scopes.scope.projects.project').id;
-    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
-    return { adapterOptions : { scopeID, hostCatalogID } };
-  }
 }
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
new file mode 100644
index 000000000..763d72612
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
@@ -0,0 +1,70 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { hash } from 'rsvp';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHostSetHostsRoute extends Route {
+
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Loads all hosts under the current host catalog.
+   * @return {Promise{[HostModel]}}
+   */
+  async model() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+    const hostSet = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set');
+    return hash({
+      hostSet,
+      hosts: this.store.findAll('host', { adapterOptions: { scopeID, hostCatalogID } })
+    });
+  }
+
+  // =actions
+
+  /**
+   * Toggles the presence of the passed host ID in the passed host set's
+   * `host_ids` field.
+   * @param {HostSetModel} hostSet
+   * @param {HostModel} host
+   */
+  @action
+  toggleHost(hostSet, host) {
+    const isHostSelected = Boolean(hostSet.host_ids.findBy('value', host.id));
+    const fragment = hostSet.host_ids.findBy('value', host.id);
+    if (isHostSelected) {
+      // if host is already selected, filter it out
+      hostSet.host_ids.removeObject(fragment);
+    } else {
+      // if host is not selected, add it
+      hostSet.host_ids.addObject({ value: host.id });
+    }
+  }
+
+  /**
+   * Saves host IDs on the host set.
+   * @param {HostSetModel} hostSet
+   */
+  @action
+  async save(hostSet) {
+    try {
+      const scopeID = this.modelFor('scopes.scope.projects.project').id;
+      const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+      const options = { adapterOptions : { scopeID, hostCatalogID } };
+      await hostSet.saveHostIDs(options);
+      this.notify.success(
+        this.intl.t('notify.save-success')
+      );
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 0aaf60c5b..1a31665e6 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -13,7 +13,9 @@
 }
 
 .rose-form {
-  width: 66%;
+  &:not(.full-width) {
+    width: 66%;
+  }
 
   .rose-form-input {
     width: 100%;
@@ -23,3 +25,9 @@
     }
   }
 }
+
+.rose-table {
+  p {
+    margin-bottom: 0;
+  }
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs
index 62f603a0b..8e2795027 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-navigation.hbs
@@ -2,4 +2,7 @@
   <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set.index'>
     {{t 'titles.details'}}
   </nav.link>
-</Rose::Nav::Tabs>
\ No newline at end of file
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set.hosts'>
+    {{t 'resources.hosts'}}
+  </nav.link>
+</Rose::Nav::Tabs>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
new file mode 100644
index 000000000..4b068ba35
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
@@ -0,0 +1,7 @@
+<Form::HostSet::Hosts
+  @model={{@model.hostSet}}
+  @hosts={{@model.hosts}}
+  @submit={{route-action "save" @model.hostSet}}
+  @cancel={{route-action "cancel" @model.hostSet}}
+  @toggleHost={{route-action "toggleHost" @model.hostSet}}
+/>
diff --git a/ui/core/tests/integration/components/form/host-set/hosts-test.js b/ui/core/tests/integration/components/form/host-set/hosts-test.js
new file mode 100644
index 000000000..e99b6a33e
--- /dev/null
+++ b/ui/core/tests/integration/components/form/host-set/hosts-test.js
@@ -0,0 +1,25 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/host-set/hosts', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    this.submit = () => {};
+    this.cancel = () => {};
+    this.model = { host_ids: [] };
+    this.hosts = [];
+
+    await render(hbs`
+      <Form::HostSet::Hosts
+        @model={{this.model}}
+        @hosts={{this.hosts}}
+        @submit={{this.submit}}
+        @cancel={{this.cancel}}
+      />`);
+
+    assert.ok(find('form'));
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts-test.js
new file mode 100644
index 000000000..e7f3a700d
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 125b3b75c..e02f2f7b6 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -48,6 +48,8 @@ resources:
   auth-methods: Auth Methods
   host-set: Host Set
   host-sets: Host Sets
+  host: Host
+  hosts: Hosts
 titles:
   iam: IAM
   new: New
@@ -95,6 +97,7 @@ form:
     manage: Manage
     grant: Grant
     principal: Principal
+    address: Address
 errors:
   titles:
     unauthenticated-error: You are not signed in

From 22d21b94935ccb42ad46b91b74071ae80053a643 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 11:32:26 -0400
Subject: [PATCH 2/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20unload=20host=20set?=
 =?UTF-8?q?s=20and=20hosts=20before=20loading=20subsets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/project/host-catalogs/host-catalog/host-sets.js     | 1 +
 .../host-catalogs/host-catalog/host-sets/host-set/hosts.js       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
index 52521189f..4fbec613f 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets.js
@@ -28,6 +28,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsRo
    * @return {Promise{[HostSetModel]}}
    */
   async model() {
+    this.store.unloadAll('host-set');
     return this.store.findAll('host-set', this.adapterOptions);
   }
 
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
index 763d72612..6a40f2c79 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
@@ -20,6 +20,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHo
     const scopeID = this.modelFor('scopes.scope.projects.project').id;
     const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
     const hostSet = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set');
+    this.store.unloadAll('host');
     return hash({
       hostSet,
       hosts: this.store.findAll('host', { adapterOptions: { scopeID, hostCatalogID } })

From 0550594048e0669cd715f94e4cafaa7548340215 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 16:28:48 -0400
Subject: [PATCH 3/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20no=20need=20to=20pa?=
 =?UTF-8?q?ss=20scopeID=20to=20save?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../host-catalogs/host-catalog/host-sets/host-set/hosts.js     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
index 6a40f2c79..b7bc79f0e 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.js
@@ -55,9 +55,8 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHo
   @action
   async save(hostSet) {
     try {
-      const scopeID = this.modelFor('scopes.scope.projects.project').id;
       const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
-      const options = { adapterOptions : { scopeID, hostCatalogID } };
+      const options = { adapterOptions : { hostCatalogID } };
       await hostSet.saveHostIDs(options);
       this.notify.success(
         this.intl.t('notify.save-success')

From 7c9cd26839e44321455050287c7cc50857c37e2b Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 16:32:29 -0400
Subject: [PATCH 4/8] chore: fix tabs nav contrast ratios

---
 addons/rose/addon/styles/rose/components/nav/_tabs.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/nav/_tabs.scss b/addons/rose/addon/styles/rose/components/nav/_tabs.scss
index 73c2f78b2..dea7dc066 100644
--- a/addons/rose/addon/styles/rose/components/nav/_tabs.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_tabs.scss
@@ -7,7 +7,7 @@
   box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-gray-subtler-2);
 
   .rose-nav-link {
-    --color: var(--ui-gray);
+    --color: var(--ui-gray-starker-1);
     --background: transparent;
     --box-shadow-color: transparent;
 
@@ -21,7 +21,7 @@
 
     &:hover {
       --box-shadow-color: var(--ui-gray-subtler-2);
-      --background: var(--ui-gray-subtler-4);
+      --background: var(--ui-gray-subtler-5);
     }
 
     &:active,

From 1e1d2cd32406c660a82f731413c5c55c25bc0ceb Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 17:28:04 -0400
Subject: [PATCH 5/8] fix: fix checkbox and radio styles to be more robust when
 used within other components

---
 addons/rose/addon/styles/rose/components/form/_checkbox.scss | 1 +
 addons/rose/addon/styles/rose/components/form/_radio.scss    | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index 9e4827527..485f49227 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -2,6 +2,7 @@
 @use '../../utilities/type';
 
 .rose-form-checkbox {
+  @include type.type(m);
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
diff --git a/addons/rose/addon/styles/rose/components/form/_radio.scss b/addons/rose/addon/styles/rose/components/form/_radio.scss
index 822505cf8..f20d53a1b 100644
--- a/addons/rose/addon/styles/rose/components/form/_radio.scss
+++ b/addons/rose/addon/styles/rose/components/form/_radio.scss
@@ -23,6 +23,7 @@ $radio-svg: (
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
 
 .rose-form-radio {
+  @include type.type(m);
   position: relative;
   margin-bottom: sizing.rems(xs);
   color: var(--ui-gray);
@@ -45,8 +46,8 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,';
 
     &::after {
       position: absolute;
-      top: -#{sizing.rems(xxs)};
-      left: -#{sizing.rems(xxxs) + sizing.rems(xxxxs)};
+      top: -#{sizing.rems(xxxxs)};
+      left: -#{sizing.rems(xxxs)};
       display: block;
       width: sizing.rems(l);
       height: sizing.rems(l);

From da9d3c914cb38d199a57966994a8b2abf7539bb9 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 18:21:17 -0400
Subject: [PATCH 6/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20tweak=20checkbox=20?=
 =?UTF-8?q?styles=20for=20descriptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/form/checkbox.stories.mdx    |  2 ++
 .../addon/styles/rose/components/form/_checkbox.scss   | 10 +++++++++-
 .../addon/templates/components/rose/form/checkbox.hbs  |  5 ++++-
 .../integration/components/rose/form/checkbox-test.js  | 10 ++++++++++
 ui/core/app/components/form/host-set/hosts/index.hbs   |  9 ++++-----
 ui/core/app/styles/app.scss                            |  9 +++++++++
 ui/core/mirage/factories/host.js                       |  4 +++-
 7 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
index 3a15884dc..539f531c0 100644
--- a/addons/rose/addon/components/rose/form/checkbox.stories.mdx
+++ b/addons/rose/addon/components/rose/form/checkbox.stories.mdx
@@ -25,6 +25,7 @@ Renders a form input checkbox.
       <Rose::Form::Checkbox
         @name={{name}}
         @label={{label}}
+        @description={{description}}
         @checked={{checked}}
         @error={{error}}
         @disabled={{disabled}}
@@ -32,6 +33,7 @@ Renders a form input checkbox.
     `,
     context: {
       label: text('text', 'Checkbox 🛎'),
+      description: text('description', 'This is an optional description paragraph.'),
       name: text('name', 'checkbox-1'),
       checked: boolean('checked', false),
       error: boolean('error', false),
diff --git a/addons/rose/addon/styles/rose/components/form/_checkbox.scss b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
index 485f49227..d18e8b7d9 100644
--- a/addons/rose/addon/styles/rose/components/form/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/form/_checkbox.scss
@@ -16,7 +16,15 @@
     // label styles
     @include type.type(s, semibold);
     color: currentColor;
-    padding-left: sizing.rems(l);
+
+    &,
+    .rose-form-checkbox-label-description {
+      padding-left: sizing.rems(l);
+    }
+
+    .rose-form-checkbox-label-description {
+      margin-top: sizing.rems(xs);
+    }
 
     // custom checkbox styles
     &::before {
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
index 0984f1bc0..eed07f19d 100644
--- a/addons/rose/addon/templates/components/rose/form/checkbox.hbs
+++ b/addons/rose/addon/templates/components/rose/form/checkbox.hbs
@@ -11,7 +11,10 @@
     aria-describedby="{{if @error (concat 'errors-' this.id)}}" />
 
   <label class="rose-form-checkbox-label" for={{this.id}}>
-    {{@label}}
+    <span class="rose-form-checkbox-label-text">{{@label}}</span>
+    {{#if @description}}
+      <p class="rose-form-checkbox-label-description">{{@description}}</p>
+    {{/if}}
   </label>
 
   {{yield (hash
diff --git a/addons/rose/tests/integration/components/rose/form/checkbox-test.js b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
index 6ceb4abf9..53f5ef87b 100644
--- a/addons/rose/tests/integration/components/rose/form/checkbox-test.js
+++ b/addons/rose/tests/integration/components/rose/form/checkbox-test.js
@@ -7,9 +7,19 @@ module('Integration | Component | rose/form/checkbox', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
+    assert.expect(3);
     await render(hbs`<Rose::Form::Checkbox @label="Label" />`);
     assert.equal(await find('label').textContent.trim(), 'Label');
     assert.ok(await find('input'));
+    assert.notOk(await find('.rose-form-checkbox-label-description'));
+  });
+
+  test('it renders optional description paragraph', async function (assert) {
+    assert.expect(3);
+    await render(hbs`<Rose::Form::Checkbox @label="Label" @description="Hello world" />`);
+    assert.equal(await find('.rose-form-checkbox-label-text').textContent.trim(), 'Label');
+    assert.equal(await find('.rose-form-checkbox-label-description').textContent.trim(), 'Hello world');
+    assert.ok(await find('input'));
   });
 
   test('it displays optional errors', async function (assert) {
diff --git a/ui/core/app/components/form/host-set/hosts/index.hbs b/ui/core/app/components/form/host-set/hosts/index.hbs
index 558d4d10b..1943e26aa 100644
--- a/ui/core/app/components/form/host-set/hosts/index.hbs
+++ b/ui/core/app/components/form/host-set/hosts/index.hbs
@@ -33,14 +33,13 @@
     <table.body as |body|>
       {{#each this.options as |option|}}
         <body.row as |row|>
-          <row.headerCell>
+          <row.cell>
             <form.checkbox
               @label={{option.host.id}}
+              @description={{option.host.description}}
               @checked={{option.selected}}
-              onChange={{fn @toggleHost option.host}}
-            />
-            <p>{{option.host.description}}</p>
-          </row.headerCell>
+              onChange={{fn @toggleHost option.host}} />
+          </row.cell>
           <row.cell>{{option.host.name}}</row.cell>
           <row.cell>{{option.host.address}}</row.cell>
         </body.row>
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 1a31665e6..ba08e2b36 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -30,4 +30,13 @@
   p {
     margin-bottom: 0;
   }
+
+  .rose-form-checkbox {
+    margin-bottom: 0;
+
+    .rose-form-checkbox-label-text {
+      color: var(--stark);
+      text-decoration: underline;
+    }
+  }
 }
diff --git a/ui/core/mirage/factories/host.js b/ui/core/mirage/factories/host.js
index eb463f1f9..f322cb4d4 100644
--- a/ui/core/mirage/factories/host.js
+++ b/ui/core/mirage/factories/host.js
@@ -1,3 +1,5 @@
 import factory from '../generated/factories/host';
 
-export default factory.extend();
+export default factory.extend({
+  id: (i) => `host-id-${i}`
+});

From b5e48a354d6405c4670b9b181c1c1bb2d12bb1c4 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 24 Aug 2020 09:26:13 -0400
Subject: [PATCH 7/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20no=20hosts=20?=
 =?UTF-8?q?message=20if=20no=20hosts=20availabl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../host-catalog/host-sets/host-set/hosts.hbs | 30 ++++++++++++++-----
 ui/core/translations/en-us.yaml               |  2 ++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
index 4b068ba35..cc1964bf8 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set/hosts.hbs
@@ -1,7 +1,23 @@
-<Form::HostSet::Hosts
-  @model={{@model.hostSet}}
-  @hosts={{@model.hosts}}
-  @submit={{route-action "save" @model.hostSet}}
-  @cancel={{route-action "cancel" @model.hostSet}}
-  @toggleHost={{route-action "toggleHost" @model.hostSet}}
-/>
+{{#if @model.hosts}}
+  <Form::HostSet::Hosts
+    @model={{@model.hostSet}}
+    @hosts={{@model.hosts}}
+    @submit={{route-action "save" @model.hostSet}}
+    @cancel={{route-action "cancel" @model.hostSet}}
+    @toggleHost={{route-action "toggleHost" @model.hostSet}}
+  />
+{{/if}}
+
+{{#unless @model.hosts}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "titles.no-host-set-hosts"}} as |message|>
+      <message.description>
+        {{t "descriptions.no-host-set-hosts"}}
+      </message.description>
+      <message.link @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.new">
+        <Rose::Icon @name="plus-circle-outline" />
+        {{t "titles.new"}}
+      </message.link>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 55783c623..69b41f0cc 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -86,6 +86,7 @@ titles:
   hosts: Hosts
   targets: Targets
   global: Global
+  no-host-set-hosts: No Hosts Available
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
@@ -98,6 +99,7 @@ descriptions:
   groups-welcome: Groups are collections of users.
   auth-methods-welcome: Auth methods are configurations to authenticate users.
   targets-welcome: Targets provide Users the means to connect to and interact networked services. A Target contains a collection of Hosts and a collection of Credentials.
+  no-host-set-hosts: Before associating hosts with this host set, create hosts within the host catalog.
 states:
   info: Info
   success: Success

From 21a7d1758ac4a9559b6fdf088965c397c54d8280 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Mon, 24 Aug 2020 09:26:30 -0400
Subject: [PATCH 8/8] test: add placeholder acceptance tests for host
 associations

---
 ui/core/tests/acceptance/host-sets-test.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/ui/core/tests/acceptance/host-sets-test.js b/ui/core/tests/acceptance/host-sets-test.js
index b018fc1d8..a5bac11c9 100644
--- a/ui/core/tests/acceptance/host-sets-test.js
+++ b/ui/core/tests/acceptance/host-sets-test.js
@@ -58,4 +58,17 @@ module('Acceptance | host sets', function (hooks) {
   test('saving an existing host set with invalid fields displays error messages', async function (assert) {
     assert.expect(0);
   });
+
+  test('can view hosts associated with a host set', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can add/remove host associations to a host set and save', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can cancel add/remove host associations to a host set', async function (assert) {
+    assert.expect(0);
+  });
+
 });