From d3e9359b41e7155fb405061bce94c4f81959afcc Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 27 Aug 2020 13:57:33 -0400
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=F0=9F=90=9B=20dropdown=20link=20sho?=
 =?UTF-8?q?uld=20work=20without=20a=20model?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/dropdown/link.hbs         | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/addons/rose/addon/templates/components/rose/dropdown/link.hbs b/addons/rose/addon/templates/components/rose/dropdown/link.hbs
index 6b3bd413a..0213454f6 100644
--- a/addons/rose/addon/templates/components/rose/dropdown/link.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown/link.hbs
@@ -1,8 +1,18 @@
-<LinkTo
-  ...attributes
-  @route={{if @route @route "index"}}
-  @model={{@model}}
-  class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
->
-  {{yield}}
-</LinkTo>
\ No newline at end of file
+{{#if @model}}
+  <LinkTo
+    ...attributes
+    @route={{@route}}
+    @model={{@model}}
+    class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+  >
+    {{yield}}
+  </LinkTo>
+{{else}}
+  <LinkTo
+    ...attributes
+    @route={{@route}}
+    class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+  >
+    {{yield}}
+  </LinkTo>
+{{/if}}

From 7ddeb32ceb3206fed2c38d34ad440f80d94188b4 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 27 Aug 2020 16:38:49 -0400
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20"add=20host=20?=
 =?UTF-8?q?sets"=20workflow=20for=20targets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/api/addon/generated/models/host-set.js |  5 ++
 .../form/target/add-host-sets/index.hbs       | 46 +++++++++++++
 .../form/target/add-host-sets/index.js        | 54 +++++++++++++++
 ui/core/app/router.js                         |  1 +
 .../project/targets/target/add-host-sets.js   | 66 +++++++++++++++++++
 .../scope/projects/project/targets/target.hbs |  5 ++
 .../project/targets/target/add-host-sets.hbs  | 21 ++++++
 ui/core/mirage/factories/host-set.js          |  4 +-
 ui/core/mirage/serializers/host-set.js        |  1 +
 ui/core/tests/acceptance/targets-test.js      |  8 +++
 .../form/target/add-host-sets-test.js         | 12 ++++
 .../targets/target/add-host-sets-test.js      | 11 ++++
 ui/core/translations/en-us.yaml               |  3 +
 13 files changed, 236 insertions(+), 1 deletion(-)
 create mode 100644 ui/core/app/components/form/target/add-host-sets/index.hbs
 create mode 100644 ui/core/app/components/form/target/add-host-sets/index.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs
 create mode 100644 ui/core/tests/integration/components/form/target/add-host-sets-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/add-host-sets-test.js

diff --git a/addons/api/addon/generated/models/host-set.js b/addons/api/addon/generated/models/host-set.js
index 6ce3eb882..d1af3fe32 100644
--- a/addons/api/addon/generated/models/host-set.js
+++ b/addons/api/addon/generated/models/host-set.js
@@ -13,6 +13,11 @@ export default class GeneratedHostSetModel extends BaseModel {
     readOnly: true
   }) type;
 
+  @attr('string', {
+    description: 'The owning host catalog ID.',
+    readOnly: true
+  }) host_catalog_id;
+
   @attr('string', {
     description: 'Optional name for identification purposes'
   }) name;
diff --git a/ui/core/app/components/form/target/add-host-sets/index.hbs b/ui/core/app/components/form/target/add-host-sets/index.hbs
new file mode 100644
index 000000000..b3c0a1719
--- /dev/null
+++ b/ui/core/app/components/form/target/add-host-sets/index.hbs
@@ -0,0 +1,46 @@
+<Rose::Form
+  class="full-width"
+  @onSubmit={{fn this.submit @submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
+
+  <form.actions
+    @submitText={{t "actions.add-host-sets"}}
+    @cancelText={{t "actions.cancel"}} />
+
+  <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.type'}}</row.headerCell>
+        <row.headerCell>{{t 'resources.host-catalog'}}</row.headerCell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each this.hostSetGroups as |hostSetGroup|}}
+        {{#each hostSetGroup.hostSets as |hostSet|}}
+          <body.row as |row|>
+            <row.cell>
+              <form.checkbox
+                @label={{hostSet.id}}
+                @description={{hostSet.description}}
+                onChange={{fn this.toggleHostSet hostSet}} />
+            </row.cell>
+            <row.cell>{{hostSet.name}}</row.cell>
+            <row.cell>
+              <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
+            </row.cell>
+            <row.cell>
+              <code>{{hostSetGroup.hostCatalog.id}}</code>
+            </row.cell>
+          </body.row>
+        {{/each}}
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+</Rose::Form>
diff --git a/ui/core/app/components/form/target/add-host-sets/index.js b/ui/core/app/components/form/target/add-host-sets/index.js
new file mode 100644
index 000000000..afd811806
--- /dev/null
+++ b/ui/core/app/components/form/target/add-host-sets/index.js
@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { computed, action } from '@ember/object';
+import { A } from '@ember/array';
+
+export default class FormTargetAddHostSetsComponent extends Component {
+
+  // =properties
+
+  /**
+   * Array of selected host set IDs.
+   * @type {EmberArray}
+   */
+  selectedHostSetIDs = A();
+
+  /**
+   * Groups host sets not already added to the target by host catalog.
+   * @type {[{hostCatalog: HostCatalogModel, hostSets: [{HostSetModel}]}]}
+   */
+  @computed('args.{hostCatalogs.[],hostSets.[],model.host_sets.[]}')
+  get hostSetGroups() {
+    // Get IDs for host sets already added to the current target
+    const alreadyAddedHostSetIDs = this.args.model.host_sets
+      .map(({ host_set_id }) => host_set_id);
+    const notAddedHostSets = this.args.hostSets
+      .filter(({ id }) => !alreadyAddedHostSetIDs.includes(id));
+    // Group host sets by host catalog
+    const hostSetGroupsObject = notAddedHostSets.reduce((obj, hostSet) => {
+      if (!obj[hostSet.host_catalog_id]) {
+        const hostCatalog = this.args.hostCatalogs.findBy('id', hostSet.host_catalog_id);
+        obj[hostSet.host_catalog_id] = { hostCatalog, hostSets: [] };
+      }
+      obj[hostSet.host_catalog_id].hostSets.push(hostSet);
+      return obj;
+    }, {});
+    const hostSetGroups = Object.values(hostSetGroupsObject);
+    return hostSetGroups;
+  }
+
+  // =actions
+
+  @action
+  toggleHostSet(hostSet) {
+    if (!this.selectedHostSetIDs.includes(hostSet.id)) {
+      this.selectedHostSetIDs.addObject(hostSet.id);
+    } else {
+      this.selectedHostSetIDs.removeObject(hostSet.id);
+    }
+  }
+
+  @action
+  submit(fn) {
+    fn(this.selectedHostSetIDs);
+  }
+}
diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index e5577e83a..effcb4523 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -40,6 +40,7 @@ Router.map(function () {
               this.route('host-sets', function() {
                 this.route('host-set', { path: ':host_set_id'}, function() {});
               });
+              this.route('add-host-sets');
             });
             this.route('new');
           });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
new file mode 100644
index 000000000..f88851fcc
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
@@ -0,0 +1,66 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { all } from 'rsvp';
+
+export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsRoute extends Route {
+
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Emtpy out any previously loaded host catalogs and host sets.
+   */
+  beforeModel() {
+    this.store.unloadAll('host-catalog');
+    this.store.unloadAll('host-set');
+  }
+
+  /**
+   * Returns the current target, all host catalogs, and all host sets.
+   * @return {{target: TargetModel, hostCatalogs: [HostCatalogModel], hostSets: [HostSetModel]}}
+   */
+  async model() {
+    const target =
+      this.modelFor('scopes.scope.projects.project.targets.target');
+    const { scopeID } = target;
+    const hostCatalogs =
+      await this.store.findAll('host-catalog', { adapterOptions: { scopeID } });
+    await all(hostCatalogs.map(({ id: hostCatalogID }) =>
+      this.store
+        .findAll('host-set', { adapterOptions: { scopeID, hostCatalogID } })
+    ));
+    const hostSets = this.store.peekAll('host-set');
+    return {
+      target,
+      hostCatalogs,
+      hostSets
+    };
+  }
+
+  // =actions
+
+  @action
+  async save(target, hostSetIDs) {
+    try {
+      await target.addHostSets(hostSetIDs);
+      this.replaceWith('scopes.scope.projects.project.targets.target.host-sets');
+      this.notify.success(this.intl.t('notify.save-success'));
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Redirect to target host sets as if nothing ever happened.
+   */
+  @action
+  cancel() {
+    this.replaceWith('scopes.scope.projects.project.targets.target.host-sets');
+  }
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
index 50b97cd47..a04f2ea32 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
@@ -1,3 +1,5 @@
+{{title @model.displayName}}
+
 <Rose::Layout::Page as |page|>
 
   <page.breadcrumbs>
@@ -21,6 +23,9 @@
 
   <page.actions>
     <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+      <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
+        {{t 'actions.add-host-sets'}}
+      </dropdown.link>
       <dropdown.button
         @style="danger"
         @disabled={{@model.canSave}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs
new file mode 100644
index 000000000..206de2d68
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets.hbs
@@ -0,0 +1,21 @@
+{{title (t 'actions.add-host-sets')}}
+
+{{#if @model.hostSets}}
+  <Form::Target::AddHostSets
+    @model={{@model.target}}
+    @hostCatalogs={{@model.hostCatalogs}}
+    @hostSets={{@model.hostSets}}
+    @submit={{route-action "save" @model.target}}
+    @cancel={{route-action "cancel"}}
+  />
+{{/if}}
+
+{{#unless @model.hostSets}}
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "titles.no-host-sets-for-target"}} as |message|>
+      <message.description>
+        {{t "descriptions.no-host-sets-for-target"}}
+      </message.description>
+    </Rose::Message>
+  </Rose::Layout::Centered>
+{{/unless}}
diff --git a/ui/core/mirage/factories/host-set.js b/ui/core/mirage/factories/host-set.js
index 2f12361c6..ad9ae1fa1 100644
--- a/ui/core/mirage/factories/host-set.js
+++ b/ui/core/mirage/factories/host-set.js
@@ -1,3 +1,5 @@
 import factory from '../generated/factories/host-set';
 
-export default factory.extend();
+export default factory.extend({
+  id: (i) => `host-set-id-${i}`
+});
diff --git a/ui/core/mirage/serializers/host-set.js b/ui/core/mirage/serializers/host-set.js
index c4640cc93..bd680326e 100644
--- a/ui/core/mirage/serializers/host-set.js
+++ b/ui/core/mirage/serializers/host-set.js
@@ -13,6 +13,7 @@ export default ApplicationSerializer.extend({
   _hashForModel(model) {
     const json = ApplicationSerializer.prototype._hashForModel.apply(this, arguments);
     json.host_ids = model.hostIds;
+    json.host_catalog_id = model.hostCatalogId;
     return json;
   }
 
diff --git a/ui/core/tests/acceptance/targets-test.js b/ui/core/tests/acceptance/targets-test.js
index 01f73d443..27f011324 100644
--- a/ui/core/tests/acceptance/targets-test.js
+++ b/ui/core/tests/acceptance/targets-test.js
@@ -62,4 +62,12 @@ module('Acceptance | targets', function (hooks) {
   test('viewing target host sets', async function (assert) {
     assert.expect(0);
   });
+
+  test('select and save host sets to add', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('select and cancel host sets to add', async function (assert) {
+    assert.expect(0);
+  });
 });
diff --git a/ui/core/tests/integration/components/form/target/add-host-sets-test.js b/ui/core/tests/integration/components/form/target/add-host-sets-test.js
new file mode 100644
index 000000000..6013607fe
--- /dev/null
+++ b/ui/core/tests/integration/components/form/target/add-host-sets-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+// import { render } from '@ember/test-helpers';
+// import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | form/target/add-host-sets', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    assert.expect(0);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/add-host-sets-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/add-host-sets-test.js
new file mode 100644
index 000000000..520a4e41f
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/add-host-sets-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/targets/target/add-host-sets', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets/target/add-host-sets');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 8e2ffd179..9974a7b70 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -20,6 +20,7 @@ actions:
   delete-target: Delete target
   add-host-set: Create Host Set
   add-host: Create Host
+  add-host-sets: Add Host Sets
 auth:
   titles:
     no-scopes: No Scopes Available
@@ -88,6 +89,7 @@ titles:
   targets: Targets
   global: Global
   no-host-set-hosts: No Hosts Available
+  no-host-sets-for-target: No Host Sets 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.
@@ -102,6 +104,7 @@ descriptions:
   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.
   target-host-sets-welcome: Add Host Sets to this target to provide access.
   no-host-set-hosts: Before associating hosts with this host set, create hosts within the host catalog.
+  no-host-sets-for-target: No host sets are available to add to this target.
 states:
   info: Info
   success: Success

From 603deac4a5a0e6ac796ea80d721bce8d81a3f000 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 27 Aug 2020 16:52:28 -0400
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20simplify=20host?=
 =?UTF-8?q?=20set=20list=20filtering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/api/addon/models/host-set.js           | 13 +++++++
 .../form/target/add-host-sets/index.hbs       | 34 +++++++++----------
 .../form/target/add-host-sets/index.js        | 20 +++--------
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/addons/api/addon/models/host-set.js b/addons/api/addon/models/host-set.js
index e30e86236..9b6611bb1 100644
--- a/addons/api/addon/models/host-set.js
+++ b/addons/api/addon/models/host-set.js
@@ -1,5 +1,6 @@
 import GeneratedHostSetModel from '../generated/models/host-set';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
+//import { computed } from '@ember/object';
 
 export default class HostSetModel extends GeneratedHostSetModel {
 
@@ -11,6 +12,18 @@ export default class HostSetModel extends GeneratedHostSetModel {
    */
   @fragmentArray('fragment-string', {readOnly: true}) host_ids;
 
+  // TODO this is here in case we want it in the future,
+  // especially for the target / add host sets workflow
+  /**
+   * Returns the host catalog instance associated with this host set if
+   * it is already loaded into the store.
+   * @type {?HostCatalogModel}
+   */
+  // @computed('host_catalog_id')
+  // get hostCatalog() {
+  //   return this.store.peekRecord('host-catalog', this.host_catalog_id);
+  // }
+
   // =methods
 
   /**
diff --git a/ui/core/app/components/form/target/add-host-sets/index.hbs b/ui/core/app/components/form/target/add-host-sets/index.hbs
index b3c0a1719..5ace0a855 100644
--- a/ui/core/app/components/form/target/add-host-sets/index.hbs
+++ b/ui/core/app/components/form/target/add-host-sets/index.hbs
@@ -21,24 +21,22 @@
       </header.row>
     </table.header>
     <table.body as |body|>
-      {{#each this.hostSetGroups as |hostSetGroup|}}
-        {{#each hostSetGroup.hostSets as |hostSet|}}
-          <body.row as |row|>
-            <row.cell>
-              <form.checkbox
-                @label={{hostSet.id}}
-                @description={{hostSet.description}}
-                onChange={{fn this.toggleHostSet hostSet}} />
-            </row.cell>
-            <row.cell>{{hostSet.name}}</row.cell>
-            <row.cell>
-              <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
-            </row.cell>
-            <row.cell>
-              <code>{{hostSetGroup.hostCatalog.id}}</code>
-            </row.cell>
-          </body.row>
-        {{/each}}
+      {{#each this.filteredHostSets as |hostSet|}}
+        <body.row as |row|>
+          <row.cell>
+            <form.checkbox
+              @label={{hostSet.id}}
+              @description={{hostSet.description}}
+              onChange={{fn this.toggleHostSet hostSet}} />
+          </row.cell>
+          <row.cell>{{hostSet.name}}</row.cell>
+          <row.cell>
+            <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
+          </row.cell>
+          <row.cell>
+            <code>{{hostSet.host_catalog_id}}</code>
+          </row.cell>
+        </body.row>
       {{/each}}
     </table.body>
   </Rose::Table>
diff --git a/ui/core/app/components/form/target/add-host-sets/index.js b/ui/core/app/components/form/target/add-host-sets/index.js
index afd811806..aadca547e 100644
--- a/ui/core/app/components/form/target/add-host-sets/index.js
+++ b/ui/core/app/components/form/target/add-host-sets/index.js
@@ -13,27 +13,17 @@ export default class FormTargetAddHostSetsComponent extends Component {
   selectedHostSetIDs = A();
 
   /**
-   * Groups host sets not already added to the target by host catalog.
-   * @type {[{hostCatalog: HostCatalogModel, hostSets: [{HostSetModel}]}]}
+   * Host sets not already added to the target.
+   * @type {[HostSetModel]}
    */
-  @computed('args.{hostCatalogs.[],hostSets.[],model.host_sets.[]}')
-  get hostSetGroups() {
+  @computed('args.{hostSets.[],model.host_sets.[]}')
+  get filteredHostSets() {
     // Get IDs for host sets already added to the current target
     const alreadyAddedHostSetIDs = this.args.model.host_sets
       .map(({ host_set_id }) => host_set_id);
     const notAddedHostSets = this.args.hostSets
       .filter(({ id }) => !alreadyAddedHostSetIDs.includes(id));
-    // Group host sets by host catalog
-    const hostSetGroupsObject = notAddedHostSets.reduce((obj, hostSet) => {
-      if (!obj[hostSet.host_catalog_id]) {
-        const hostCatalog = this.args.hostCatalogs.findBy('id', hostSet.host_catalog_id);
-        obj[hostSet.host_catalog_id] = { hostCatalog, hostSets: [] };
-      }
-      obj[hostSet.host_catalog_id].hostSets.push(hostSet);
-      return obj;
-    }, {});
-    const hostSetGroups = Object.values(hostSetGroupsObject);
-    return hostSetGroups;
+    return notAddedHostSets;
   }
 
   // =actions

From b556e42cb7537e1f9841bc47dbd56af504dbb4e4 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 27 Aug 2020 17:11:23 -0400
Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=F0=9F=A4=96=20customize=20add=20h?=
 =?UTF-8?q?ost=20sets=20page=20sections=20and=20breadcrumbs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../project/targets/target/add-host-sets.js   | 19 +++++++++++++++
 .../scope/projects/project/targets/target.js  | 24 +++++++++++++++++++
 .../project/targets/target/add-host-sets.js   | 23 ++++++++++++++++++
 .../scope/projects/project/targets/target.hbs | 24 +++----------------
 .../project/targets/target/-actions.hbs       | 12 ++++++++++
 .../project/targets/target/-header.hbs        |  1 +
 .../project/targets/target/-navigation.hbs    |  8 +++++++
 .../targets/target/add-host-sets/-header.hbs  |  1 +
 .../targets/target/add-host-sets-test.js      | 12 ++++++++++
 9 files changed, 103 insertions(+), 21 deletions(-)
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js

diff --git a/ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js b/ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js
new file mode 100644
index 000000000..81698e45f
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/targets/target/add-host-sets.js
@@ -0,0 +1,19 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('actions.add-host-sets');
+  }
+
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
index 8b5cf77ab..c1d1093f8 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
@@ -15,4 +15,28 @@ export default class ScopesScopeProjectsProjectTargetsTargetRoute extends Route
     return this.store.findRecord('target', target_id, { adapterOptions: { scopeID } });
   }
 
+  /**
+   * Renders the target-specific templates for header, navigation,
+   * and actions page sections.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/targets/target/-header', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'header',
+    });
+
+    this.render('scopes/scope/projects/project/targets/target/-navigation', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'navigation',
+    });
+
+    this.render('scopes/scope/projects/project/targets/target/-actions', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'actions',
+    });
+  }
+
 }
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
index f88851fcc..f58b7ebb7 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target/add-host-sets.js
@@ -42,6 +42,29 @@ export default class ScopesScopeProjectsProjectTargetsTargetAddHostSetsRoute ext
     };
   }
 
+  /**
+   * Renders the add-host-sets-specific header template.
+   * @override
+   */
+  renderTemplate() {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/targets/target/add-host-sets/-header', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'header',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'navigation',
+    });
+
+    this.render('-empty', {
+      into: 'scopes/scope/projects/project/targets/target',
+      outlet: 'actions',
+    });
+  }
+
   // =actions
 
   @action
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
index a04f2ea32..2a878ff51 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
@@ -7,33 +7,15 @@
   </page.breadcrumbs>
 
   <page.header>
-    <h2>{{t "resources.target"}}</h2>
+    {{outlet "header"}}
   </page.header>
 
   <page.navigation>
-    <Rose::Nav::Tabs as |nav|>
-      <nav.link @route='scopes.scope.projects.project.targets.target.index'>
-        {{t 'titles.details'}}
-      </nav.link>
-      <nav.link @route='scopes.scope.projects.project.targets.target.host-sets'>
-        {{t 'titles.host-sets'}}
-      </nav.link>
-    </Rose::Nav::Tabs>
+    {{outlet "navigation"}}
   </page.navigation>
 
   <page.actions>
-    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
-      <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
-        {{t 'actions.add-host-sets'}}
-      </dropdown.link>
-      <dropdown.button
-        @style="danger"
-        @disabled={{@model.canSave}}
-        {{on "click" (route-action "delete" @model)}}
-      >
-        {{t 'actions.delete-target'}}
-      </dropdown.button>
-    </Rose::Dropdown>
+    {{outlet "actions"}}
   </page.actions>
 
   <page.body>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs
new file mode 100644
index 000000000..a4c8ed5fa
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-actions.hbs
@@ -0,0 +1,12 @@
+<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link @route="scopes.scope.projects.project.targets.target.add-host-sets">
+    {{t 'actions.add-host-sets'}}
+  </dropdown.link>
+  <dropdown.button
+    @style="danger"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete-target'}}
+  </dropdown.button>
+</Rose::Dropdown>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
new file mode 100644
index 000000000..721607f47
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.target"}}</h2>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs
new file mode 100644
index 000000000..b486f4ca8
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/-navigation.hbs
@@ -0,0 +1,8 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.project.targets.target.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+  <nav.link @route='scopes.scope.projects.project.targets.target.host-sets'>
+    {{t 'titles.host-sets'}}
+  </nav.link>
+</Rose::Nav::Tabs>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs
new file mode 100644
index 000000000..f29bc39c7
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/add-host-sets/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "actions.add-host-sets"}}</h2>
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js
new file mode 100644
index 000000000..5d58f8870
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target/add-host-sets-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/targets/target/add-host-sets', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:scopes/scope/projects/project/targets/target/add-host-sets');
+    assert.ok(controller);
+  });
+});