From ee6a8961a0ef28bd0a42b3f631ac332a29d91212 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 20 Aug 2020 14:34:59 -0400
Subject: [PATCH 01/14] chore: Add /hosts, /host/:host_id, and /hosts/new
 routes

---
 ui/core/app/router.js                                 |  4 ++++
 .../project/host-catalogs/host-catalog/hosts.js       |  4 ++++
 .../project/host-catalogs/host-catalog/hosts/host.js  |  4 ++++
 .../project/host-catalogs/host-catalog/hosts/new.js   |  4 ++++
 .../project/host-catalogs/host-catalog/hosts.hbs      |  1 +
 .../project/host-catalogs/host-catalog/hosts/host.hbs |  1 +
 .../project/host-catalogs/host-catalog/hosts/new.hbs  |  1 +
 .../project/host-catalogs/host-catalog/hosts-test.js  | 11 +++++++++++
 .../host-catalogs/host-catalog/hosts/host-test.js     | 11 +++++++++++
 .../host-catalogs/host-catalog/hosts/new-test.js      | 11 +++++++++++
 10 files changed, 52 insertions(+)
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js

diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 4243d97b5..aac684970 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -27,6 +27,10 @@ Router.map(function () {
                 this.route('host-set', { path: ':host_set_id' }, function() {});
                 this.route('new');
               });
+              this.route('hosts', function() {
+                this.route('host', { path: ':host_id' }, function() {});
+                this.route('new');
+              });
             });
           });
         });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
new file mode 100644
index 000000000..0799bc36b
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
new file mode 100644
index 000000000..8668b3101
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
new file mode 100644
index 000000000..9d002b717
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsNewRoute extends Route {
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js
new file mode 100644
index 000000000..528fd1ac1
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/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/hosts', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/hosts');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js
new file mode 100644
index 000000000..ea1cc4118
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-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/hosts/host', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js
new file mode 100644
index 000000000..93ad5522c
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-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/hosts/new', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new');
+    assert.ok(route);
+  });
+});

From a1ab9580c17fd6a6440817b5dd9b9525cb4b41ac Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 20 Aug 2020 15:31:45 -0400
Subject: [PATCH 02/14] chore: View, delete, and create a host

---
 ui/core/app/components/form/host/index.hbs    |  55 +++++++++
 .../host-catalogs/host-catalog/host-sets.js   |   4 +-
 .../host-catalog/host-sets/new.js             |   2 +-
 .../host-catalogs/host-catalog/hosts.js       |  77 ++++++++++++
 .../host-catalogs/host-catalog/hosts/host.js  |  43 +++++++
 .../host-catalog/hosts/host/index.js          |   4 +
 .../host-catalogs/host-catalog/hosts/index.js |   4 +
 .../host-catalogs/host-catalog/hosts/new.js   |  42 +++++++
 .../host-catalogs/host-catalog/-actions.hbs   |   6 +
 .../host-catalog/-navigation.hbs              |   3 +
 .../host-catalogs/host-catalog/hosts.hbs      |   2 +
 .../host-catalog/hosts/-actions.hbs           |   9 ++
 .../host-catalog/hosts/-header.hbs            |   1 +
 .../host-catalog/hosts/-navigation.hbs        |   5 +
 .../host-catalog/hosts/host/index.hbs         |   5 +
 .../host-catalog/hosts/index.hbs              |  48 ++++++++
 .../host-catalogs/host-catalog/hosts/new.hbs  |   8 +-
 .../host-catalog/hosts/new/-header.hbs        |   1 +
 ui/core/tests/acceptance/host-sets-test.js    |   2 +-
 ui/core/tests/acceptance/hosts-test.js        | 114 ++++++++++++++++++
 .../components/form/host/index-test.js        |  26 ++++
 .../host-catalog/hosts/host/index-test.js     |  11 ++
 .../host-catalog/hosts/index-test.js          |  11 ++
 ui/core/translations/en-us.yaml               |  10 ++
 24 files changed, 487 insertions(+), 6 deletions(-)
 create mode 100644 ui/core/app/components/form/host/index.hbs
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header.hbs
 create mode 100644 ui/core/tests/acceptance/hosts-test.js
 create mode 100644 ui/core/tests/integration/components/form/host/index-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index-test.js

diff --git a/ui/core/app/components/form/host/index.hbs b/ui/core/app/components/form/host/index.hbs
new file mode 100644
index 000000000..9152b0ba0
--- /dev/null
+++ b/ui/core/app/components/form/host/index.hbs
@@ -0,0 +1,55 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
+
+  <form.input
+  @value={{t (concat 'host.types.' @model.type)}}
+  @label={{t "form.label.type"}}
+  readonly={{true}}
+  @disabled={{true}} />
+
+  <form.input
+    @name="name"
+    @type="name"
+    @value={{@model.name}}
+    @label={{t "form.label.name"}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name="description"
+    @type="description"
+    @value={{@model.description}}
+    @label={{t "form.label.description"}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @submitText={{t "actions.save"}}
+    @cancelText={{t "actions.cancel"}} />
+
+</Rose::Form>
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..74f1a2783 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
@@ -15,9 +15,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
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/new.js
index 87f67abc7..f0dbcc3bd 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/new.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/new.js
@@ -6,7 +6,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsNe
 
   /**
    * Creates a new unsaved host set in current host catalog scope.
-   * @return {HostCatalogModel}
+   * @return {HostSetModel}
    */
   model() {
     const scopeModel = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog');
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
index 0799bc36b..805112d67 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
@@ -1,4 +1,81 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsRoute extends Route {
+  // =services
+
+  @service intl;
+  @service notify;
+
+  // =methods
+
+  /**
+   * Loads all hosts under the current host catalog and it's parent project scope.
+   * @return {Promise{[HostModel]}}
+   */
+  async model() {
+    return this.store.findAll('host', this.adapterOptions());
+  }
+
+  // =actions
+
+  /**
+   * Rollback changes on a host.
+   * @param {HostModel} host
+   */
+  @action
+  cancel(host) {
+    const { isNew } = host;
+    host.rollbackAttributes();
+    if (isNew) this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.hosts');
+  }
+
+  /**
+   * Handle save of a host.
+   * @param {HostModel} host
+   * @param {Event} e
+   */
+  @action
+  async save(host) {
+    try {
+      const { isNew } = host;
+      await host.save(this.adapterOptions());
+      this.refresh();
+      this.notify.success(
+        this.intl.t(isNew ? 'notify.create-success' : 'notify.save-success')
+      );
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host', host);
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Delete host in current scope and redirect to index.
+   * @param {HostModel} host
+   */
+  @action
+  async delete(host) {
+    try {
+      await host.destroyRecord(this.adapterOptions());
+      this.refresh();
+      this.notify.success(this.intl.t('notify.delete-success'));
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog.hosts');
+    } catch (error) {
+      // TODO: replace with translated strings
+      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/hosts/host.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
index 8668b3101..671ca781b 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
@@ -1,4 +1,47 @@
 import Route from '@ember/routing/route';
 
 export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostRoute extends Route {
+  // =methods
+
+  /**
+   * Load a host using current host-catalog and it's parent project scope.
+   * @param {object} params
+   * @param {string} params.host_id
+   * @return {HostModel}
+   */
+  async model({ host_id }) {
+    const { id: scopeID } = this.modelFor('scopes.scope.projects.project');
+    const hostCatalogID = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog').id;
+    return this.store.findRecord('host', host_id, {
+      adapterOptions: { scopeID, hostCatalogID }
+    });
+  }
+
+  /**
+   * Renders the host specific templates for header, navigation, and action page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts');
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'header',
+      model: model
+    });
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'navigation',
+      model: model
+    });
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'actions',
+      model: model
+    });
+  }
 }
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.js
new file mode 100644
index 000000000..a270ffacc
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostIndexRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.js
new file mode 100644
index 000000000..96bba9927
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsIndexRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
index 9d002b717..39f90d1bb 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
@@ -1,4 +1,46 @@
 import Route from '@ember/routing/route';
 
 export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsNewRoute extends Route {
+
+  // =methods
+
+  /**
+   * Creates a new unsaved host in current host catalog scope.
+   * @return {HostModel}
+   */
+  model() {
+    const scopeModel = this.modelFor('scopes.scope.projects.project.host-catalogs.host-catalog');
+    return this.store.createRecord('host', {
+      type: 'static',
+      scopeModel
+    });
+  }
+
+  /**
+   * Renders new host specific templates for header, navigation, and action page sections.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'header',
+      model: model
+    });
+
+    this.render('_empty', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'navigation',
+      model: model
+    });
+
+    this.render('_empty', {
+      into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
+      outlet: 'actions',
+      model: model
+    });
+  }
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-actions.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-actions.hbs
index 9f1032438..50cd97fe0 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-actions.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-actions.hbs
@@ -1,4 +1,10 @@
 <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.link
+    @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.new"
+    @model={{@model}}
+  >
+    {{t "actions.add-host"}}
+  </dropdown.link>
   <dropdown.link
     @route="scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.new"
     @model={{@model}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs
index 030326509..0e02c6c14 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/-navigation.hbs
@@ -5,4 +5,7 @@
   <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.host-sets'>
     {{t 'titles.host-sets'}}
   </nav.link>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.hosts'>
+    {{t 'titles.hosts'}}
+  </nav.link>
 </Rose::Nav::Tabs>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs
index e2147cab0..863e34ea9 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.hbs
@@ -1 +1,3 @@
+{{title (t "resources.hosts")}}
+
 {{outlet}}
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions.hbs
new file mode 100644
index 000000000..a63265116
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-actions.hbs
@@ -0,0 +1,9 @@
+<Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+  <dropdown.button
+    @style="danger"
+    @disabled={{@model.canSave}}
+    {{on "click" (route-action "delete" @model)}}
+  >
+    {{t 'actions.delete-host'}}
+  </dropdown.button>
+</Rose::Dropdown>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
new file mode 100644
index 000000000..3187158d1
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "resources.host"}}</h2>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation.hbs
new file mode 100644
index 000000000..d79e3afa2
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-navigation.hbs
@@ -0,0 +1,5 @@
+<Rose::Nav::Tabs as |nav|>
+  <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host.index'>
+    {{t 'titles.details'}}
+  </nav.link>
+</Rose::Nav::Tabs>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.hbs
new file mode 100644
index 000000000..6cc780607
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index.hbs
@@ -0,0 +1,5 @@
+<Form::Host
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
new file mode 100644
index 000000000..7905988e5
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
@@ -0,0 +1,48 @@
+{{#if @model}}
+
+  <Rose::Table as |table|>
+    <table.header as |header|>
+      <header.row as |row|>
+        <row.cell>{{t "form.label.name"}}</row.cell>
+        <row.cell>{{t "form.label.type"}}</row.cell>
+        <row.cell>{{t "form.label.id"}}</row.cell>
+      </header.row>
+    </table.header>
+    <table.body as |body|>
+      {{#each @model as |host|}}
+        <body.row as |row|>
+          <row.cell>
+            <LinkTo
+              @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host"
+              @model={{host}}
+            >
+              {{host.displayName}}
+            </LinkTo>
+            <p>{{host.description}}</p>
+          </row.cell>
+          <row.cell>
+            <Rose::Badge @style="outline">{{host.type}}</Rose::Badge>
+          </row.cell>
+          <row.cell>
+            <code>{{host.id}}</code>
+          </row.cell>
+        </body.row>
+      {{/each}}
+    </table.body>
+  </Rose::Table>
+
+{{else}}
+
+  <Rose::Layout::Centered>
+    <Rose::Message @title={{t "titles.hosts-welcome"}} as |message|>
+      <message.description>
+        {{t "descriptions.hosts-welcome"}}
+      </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>
+
+{{/if}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs
index e2147cab0..29bf7404f 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.hbs
@@ -1 +1,7 @@
-{{outlet}}
\ No newline at end of file
+{{title (t 'titles.new')}}
+
+<Form::Host
+  @model={{@model}}
+  @submit={{route-action "save" @model}}
+  @cancel={{route-action "cancel" @model}}
+/>
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header.hbs
new file mode 100644
index 000000000..ace8ccb08
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new/-header.hbs
@@ -0,0 +1 @@
+<h2>{{t "titles.new"}}</h2>
\ No newline at end of file
diff --git a/ui/core/tests/acceptance/host-sets-test.js b/ui/core/tests/acceptance/host-sets-test.js
index f7ba7226d..7e855a326 100644
--- a/ui/core/tests/acceptance/host-sets-test.js
+++ b/ui/core/tests/acceptance/host-sets-test.js
@@ -55,7 +55,7 @@ module('Acceptance | host sets', function (hooks) {
     assert.expect(0);
   });
 
-  test('saving an existing auth method with invalid fields displays error messages', async function (assert) {
+  test('saving an existing host set with invalid fields displays error messages', async function (assert) {
     assert.expect(0);
   });
 });
diff --git a/ui/core/tests/acceptance/hosts-test.js b/ui/core/tests/acceptance/hosts-test.js
new file mode 100644
index 000000000..cd5c2c604
--- /dev/null
+++ b/ui/core/tests/acceptance/hosts-test.js
@@ -0,0 +1,114 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
+import {
+  authenticateSession,
+  // These are left here intentionally for future reference.
+  //currentSession,
+  //invalidateSession,
+} from 'ember-simple-auth/test-support';
+
+module('Acceptance | hosts', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+      project: null,
+      hostCatalog: null
+    },
+    host: null
+  };
+  const urls = {
+    orgScope: null,
+    projects: null,
+    project: null,
+    hostCatalogs: null,
+    hostCatalog: null,
+    hosts: null
+  };
+
+  hooks.beforeEach(function () {
+    // Setup Mirage mock resources for this test
+    instances.scopes.global = this.server.create('scope', { id: 'global' });
+    instances.scopes.org = this.server.create('scope', { type: 'org',
+      scope: { id: instances.scopes.global.id, type: instances.scopes.global.type }
+    });
+    instances.scopes.project = this.server.create('scope', { type: 'project',
+      scope: { id: instances.scopes.org.id, type: instances.scopes.org.type }
+    });
+    instances.scopes.hostCatalog = this.server.create('host', {
+      scope: {
+        id: instances.scopes.project.id,
+        type: instances.scopes.project.type
+      }
+    });
+
+    instances.host = this.server.create('host', {
+      scope: {
+        id: instances.scopes.project.id,
+        type: instances.scopes.project.type
+      },
+      hostCatalog: {
+        id: instances.scopes.hostCatalog.id,
+        type: instances.scopes.hostCatalog.type
+      }
+    });
+
+    // Generate route URLs for resources
+    urls.orgScope = `/scopes/${instances.scopes.org.id}`;
+    urls.projects = `${urls.orgScope}/projects`;
+    urls.project = `${urls.projects}/${instances.scopes.hostCatalog.scope.id}`;
+    urls.hostCatalogs = `${urls.project}/host-catalogs`;
+    urls.hostCatalog = `${urls.hostCatalogs}/${instances.scopes.hostCatalog.id}`;
+    urls.hosts = `${urls.hostCatalog}/host`;
+  });
+
+  test('visiting host', async function (assert) {
+    assert.expect(1);
+    authenticateSession();
+    await visit(urls.hosts);
+    await a11yAudit();
+    assert.equal(currentURL(), urls.hosts);
+  });
+
+  test('can navigate to a host form', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can update a host and save changes', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can update a host and cancel changes', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can create new host', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can cancel new host creation', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('saving a new host with invalid fields displays error messages', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('errors are displayed when save on auth method fails', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('errors are displayed when delete on a host fails', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('saving an existing host with invalid fields displays error messages', async function (assert) {
+    assert.expect(0);
+  });
+});
diff --git a/ui/core/tests/integration/components/form/host/index-test.js b/ui/core/tests/integration/components/form/host/index-test.js
new file mode 100644
index 000000000..3bc90b275
--- /dev/null
+++ b/ui/core/tests/integration/components/form/host/index-test.js
@@ -0,0 +1,26 @@
+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/host/index', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Form::Host::Index />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Form::Host::Index>
+        template block text
+      </Form::Host::Index>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index-test.js
new file mode 100644
index 000000000..58704fe8c
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index-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/hosts/host/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index-test.js
new file mode 100644
index 000000000..151e905b5
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index-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/hosts/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 125b3b75c..434d78ee8 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -16,7 +16,9 @@ actions:
   delete-host-catalog: Delete host catalog
   delete-auth-method: Delete auth method
   delete-host-set: Delete host set
+  delete-host: Delete host
   add-host-set: Create Host Set
+  add-host: Create Host
 auth:
   titles:
     no-scopes: No Scopes Available
@@ -31,6 +33,9 @@ auth:
 host-set:
   types:
     static: Static
+host:
+  types:
+    static: Static
 resources:
   user: User
   users: Users
@@ -48,6 +53,8 @@ resources:
   auth-methods: Auth Methods
   host-set: Host Set
   host-sets: Host Sets
+  hosts: Hosts
+  host: Host
 titles:
   iam: IAM
   new: New
@@ -60,6 +67,7 @@ titles:
   projects-welcome: Welcome to Projects
   host-catalogs-welcome: Welcome to Host Catalogs
   host-sets-welcome: Welcome to Host Sets
+  hosts-welcome: Welcome to Hosts
   users-welcome: Welcome to Users
   roles-welcome: Welcome to Roles
   groups-welcome: Welcome to Groups
@@ -68,6 +76,7 @@ titles:
   new-grant: New Grant
   principals: Principals
   host-sets: Host Sets
+  hosts: Hosts
   global: Global
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
@@ -75,6 +84,7 @@ descriptions:
   projects-welcome: Projects allow you to create and manage host catalogs. To start, create a project.
   host-catalogs-welcome: Host catalogs allow you to configure to collect and create hosts and host sets. To start, create a host catalog.
   host-sets-welcome: Configure a static host set in this host catalog.
+  hosts-welcome: Configure a static host in this host catalog.
   users-welcome: Users are authorized to access Boundary.
   roles-welcome: Roles are collections of capabilities that can be granted to user and/or groups.
   groups-welcome: Groups are collections of users.

From fc75b1df9e6d3685dd3b81fd1d6c9cd8a24b2957 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 20 Aug 2020 15:38:49 -0400
Subject: [PATCH 03/14] chore: Add host(s) breadcrumbs

---
 .../host-catalogs/host-catalog/hosts.js       | 20 +++++++++++++++++++
 .../host-catalogs/host-catalog/hosts/host.js  | 15 ++++++++++++++
 .../host-catalogs/host-catalog/hosts/new.js   | 20 +++++++++++++++++++
 .../host-catalog/host-sets/host-set.js        |  2 +-
 .../host-catalogs/host-catalog/hosts/host.js  |  2 +-
 .../host-catalogs/host-catalog/hosts-test.js  | 12 +++++++++++
 .../host-catalog/hosts/host-test.js           | 12 +++++++++++
 .../host-catalog/hosts/new-test.js            | 12 +++++++++++
 8 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js

diff --git a/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
new file mode 100644
index 000000000..0ce0c8ba4
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts.js
@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Hosts breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.hosts');
+  }
+  
+}
diff --git a/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
new file mode 100644
index 000000000..7b1b2883b
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostController extends Controller {
+
+  // =attributes
+
+  /**
+   * Host breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+
+}
diff --git a/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
new file mode 100644
index 000000000..cc56bcf08
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new.js
@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsNewController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated new host breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('titles.new');
+  }
+
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
index 66c552c4d..6d2b4abd1 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/host-set.js
@@ -24,7 +24,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostSetsHo
    * @param {object} model
    */
   renderTemplate(controller, model) {
-    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets');
+    super.renderTemplate(...arguments);
 
     this.render('scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/-header', {
       into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
index 671ca781b..907454d36 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host.js
@@ -24,7 +24,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogHostsHostR
    * @param {object} model
    */
   renderTemplate(controller, model) {
-    this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts');
+    super.renderTemplate(...arguments);
 
     this.render('scopes/scope/projects/project/host-catalogs/host-catalog/hosts/-header', {
       into: 'scopes/scope/projects/project/host-catalogs/host-catalog',
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js
new file mode 100644
index 000000000..0abab9e08
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/host-catalogs/host-catalog/hosts', 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/host-catalogs/host-catalog/hosts');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js
new file mode 100644
index 000000000..caa2b88fd
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/host-catalogs/host-catalog/hosts/host', 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/host-catalogs/host-catalog/hosts/host');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js
new file mode 100644
index 000000000..0fc59faf5
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/host-catalogs/host-catalog/hosts/new', 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/host-catalogs/host-catalog/hosts/new');
+    assert.ok(controller);
+  });
+});

From cb6048aca7f01600de4b3fdeca6c0920c4b3d1eb Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 20 Aug 2020 15:51:35 -0400
Subject: [PATCH 04/14] chore: Add empty acceptance test case for hosts

---
 ui/core/tests/acceptance/hosts-test.js        | 71 +++----------------
 .../integration/components/form/host-test.js  | 23 ++++++
 .../components/form/host/index-test.js        | 26 -------
 3 files changed, 32 insertions(+), 88 deletions(-)
 create mode 100644 ui/core/tests/integration/components/form/host-test.js
 delete mode 100644 ui/core/tests/integration/components/form/host/index-test.js

diff --git a/ui/core/tests/acceptance/hosts-test.js b/ui/core/tests/acceptance/hosts-test.js
index cd5c2c604..33ab3f05b 100644
--- a/ui/core/tests/acceptance/hosts-test.js
+++ b/ui/core/tests/acceptance/hosts-test.js
@@ -1,79 +1,26 @@
 import { module, test } from 'qunit';
-import { visit, currentURL } from '@ember/test-helpers';
+// import { visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
-import a11yAudit from 'ember-a11y-testing/test-support/audit';
-import {
-  authenticateSession,
-  // These are left here intentionally for future reference.
-  //currentSession,
-  //invalidateSession,
-} from 'ember-simple-auth/test-support';
+// import a11yAudit from 'ember-a11y-testing/test-support/audit';
+// import {
+//   authenticateSession,
+//   // These are left here intentionally for future reference.
+//   //currentSession,
+//   //invalidateSession,
+// } from 'ember-simple-auth/test-support';
 
 module('Acceptance | hosts', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
-  const instances = {
-    scopes: {
-      global: null,
-      org: null,
-      project: null,
-      hostCatalog: null
-    },
-    host: null
-  };
-  const urls = {
-    orgScope: null,
-    projects: null,
-    project: null,
-    hostCatalogs: null,
-    hostCatalog: null,
-    hosts: null
-  };
-
   hooks.beforeEach(function () {
     // Setup Mirage mock resources for this test
-    instances.scopes.global = this.server.create('scope', { id: 'global' });
-    instances.scopes.org = this.server.create('scope', { type: 'org',
-      scope: { id: instances.scopes.global.id, type: instances.scopes.global.type }
-    });
-    instances.scopes.project = this.server.create('scope', { type: 'project',
-      scope: { id: instances.scopes.org.id, type: instances.scopes.org.type }
-    });
-    instances.scopes.hostCatalog = this.server.create('host', {
-      scope: {
-        id: instances.scopes.project.id,
-        type: instances.scopes.project.type
-      }
-    });
-
-    instances.host = this.server.create('host', {
-      scope: {
-        id: instances.scopes.project.id,
-        type: instances.scopes.project.type
-      },
-      hostCatalog: {
-        id: instances.scopes.hostCatalog.id,
-        type: instances.scopes.hostCatalog.type
-      }
-    });
-
     // Generate route URLs for resources
-    urls.orgScope = `/scopes/${instances.scopes.org.id}`;
-    urls.projects = `${urls.orgScope}/projects`;
-    urls.project = `${urls.projects}/${instances.scopes.hostCatalog.scope.id}`;
-    urls.hostCatalogs = `${urls.project}/host-catalogs`;
-    urls.hostCatalog = `${urls.hostCatalogs}/${instances.scopes.hostCatalog.id}`;
-    urls.hosts = `${urls.hostCatalog}/host`;
   });
 
   test('visiting host', async function (assert) {
-    assert.expect(1);
-    authenticateSession();
-    await visit(urls.hosts);
-    await a11yAudit();
-    assert.equal(currentURL(), urls.hosts);
+    assert.expect(0);
   });
 
   test('can navigate to a host form', async function (assert) {
diff --git a/ui/core/tests/integration/components/form/host-test.js b/ui/core/tests/integration/components/form/host-test.js
new file mode 100644
index 000000000..39c5147db
--- /dev/null
+++ b/ui/core/tests/integration/components/form/host-test.js
@@ -0,0 +1,23 @@
+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', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.submit = () => {};
+    this.cancel = () => {};
+
+    await render(hbs`
+      <Form::Host
+        @submit={{this.submit}}
+        @cancel={{this.cancel}}
+      />`);
+
+    assert.ok(find('form'));
+  });
+});
diff --git a/ui/core/tests/integration/components/form/host/index-test.js b/ui/core/tests/integration/components/form/host/index-test.js
deleted file mode 100644
index 3bc90b275..000000000
--- a/ui/core/tests/integration/components/form/host/index-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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/host/index', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
-    await render(hbs`<Form::Host::Index />`);
-
-    assert.equal(this.element.textContent.trim(), '');
-
-    // Template block usage:
-    await render(hbs`
-      <Form::Host::Index>
-        template block text
-      </Form::Host::Index>
-    `);
-
-    assert.equal(this.element.textContent.trim(), 'template block text');
-  });
-});

From cd4f50f86825bce4916e987a0d1ad96607669069 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 21 Aug 2020 08:55:07 -0400
Subject: [PATCH 05/14] =?UTF-8?q?chore:=20=F0=9F=A4=96=20all=20resources?=
 =?UTF-8?q?=20should=20have=20a=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/addon/generated/models/auth-method.js |  5 +++++
 addons/api/addon/generated/models/group.js    |  6 +++++
 .../addon/generated/models/host-catalog.js    |  5 +++++
 addons/api/addon/generated/models/scope.js    |  5 +++++
 addons/api/addon/generated/models/user.js     |  5 +++++
 addons/api/addon/serializers/application.js   |  4 ++++
 .../unit/serializers/application-test.js      | 22 +++++++++++++++++++
 7 files changed, 52 insertions(+)

diff --git a/addons/api/addon/generated/models/auth-method.js b/addons/api/addon/generated/models/auth-method.js
index 995e65efd..7dd5805c0 100644
--- a/addons/api/addon/generated/models/auth-method.js
+++ b/addons/api/addon/generated/models/auth-method.js
@@ -39,4 +39,9 @@ export default class GeneratedAuthMethodModel extends BaseModel {
   })
   disabled;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+
 }
diff --git a/addons/api/addon/generated/models/group.js b/addons/api/addon/generated/models/group.js
index bce0d1076..e8c442e1b 100644
--- a/addons/api/addon/generated/models/group.js
+++ b/addons/api/addon/generated/models/group.js
@@ -33,4 +33,10 @@ export default class GeneratedGroupModel extends BaseModel {
     description: 'Whether the resource is disabled',
   })
   disabled;
+
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+  
 }
diff --git a/addons/api/addon/generated/models/host-catalog.js b/addons/api/addon/generated/models/host-catalog.js
index 4a8166e3c..7207048c2 100644
--- a/addons/api/addon/generated/models/host-catalog.js
+++ b/addons/api/addon/generated/models/host-catalog.js
@@ -38,4 +38,9 @@ export default class GeneratedHostCatalogModel extends BaseModel {
     description: 'Attributes specific to the catalog type'
   }) attributes;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+
 }
diff --git a/addons/api/addon/generated/models/scope.js b/addons/api/addon/generated/models/scope.js
index a7448b034..3c3731b3d 100644
--- a/addons/api/addon/generated/models/scope.js
+++ b/addons/api/addon/generated/models/scope.js
@@ -34,4 +34,9 @@ export default class GeneratedScopeModel extends BaseModel {
   })
   updated_time;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
+
 }
diff --git a/addons/api/addon/generated/models/user.js b/addons/api/addon/generated/models/user.js
index 98fff7c32..433faeceb 100644
--- a/addons/api/addon/generated/models/user.js
+++ b/addons/api/addon/generated/models/user.js
@@ -33,4 +33,9 @@ export default class GeneratedUserModel extends BaseModel {
     description: 'Whether the resource is disabled',
   })
   disabled;
+
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
 }
diff --git a/addons/api/addon/serializers/application.js b/addons/api/addon/serializers/application.js
index c839eb78c..bfe422161 100644
--- a/addons/api/addon/serializers/application.js
+++ b/addons/api/addon/serializers/application.js
@@ -40,6 +40,10 @@ export default class ApplicationSerializer extends RESTSerializer {
     let value = super.serializeAttribute(...arguments);
     // Do not serialize read-only attributes.
     if (options.readOnly) delete json[key];
+    // Version is sent only if it has a non-nullish value
+    if (key === 'version') {
+      if (json[key] === null || json[key] === undefined) delete json[key];
+    }
     // Do not serialize `disabled` fields.
     // TODO:  disabled is temporarily disabled
     if (key === 'disabled') delete json[key];
diff --git a/addons/api/tests/unit/serializers/application-test.js b/addons/api/tests/unit/serializers/application-test.js
index 4769cfa3f..c067939b9 100644
--- a/addons/api/tests/unit/serializers/application-test.js
+++ b/addons/api/tests/unit/serializers/application-test.js
@@ -29,6 +29,28 @@ module('Unit | Serializer | application', function (hooks) {
     });
   });
 
+  test('it serializes non-nullish version fields', function (assert) {
+    assert.expect(2);
+    const store = this.owner.lookup('service:store');
+    const record = store.createRecord('user', {
+      name: 'User',
+      description: 'Description',
+      version: null
+    });
+    let serializedRecord = record.serialize();
+    assert.deepEqual(serializedRecord, {
+      name: 'User',
+      description: 'Description'
+    });
+    record.version = 1;
+    serializedRecord = record.serialize();
+    assert.deepEqual(serializedRecord, {
+      name: 'User',
+      description: 'Description',
+      version: 1
+    });
+  });
+
   test('it normalizes array records from an `items` root key', function (assert) {
     assert.expect(1);
     const store = this.owner.lookup('service:store');

From 748e42a64fddde5eaa3d19305977190c5fd20352 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 11:48:24 -0400
Subject: [PATCH 06/14] chore: Add target model to addons/api

---
 addons/api/addon/generated/models/target.js | 37 +++++++++++++++++++++
 addons/api/addon/models/target.js           |  3 ++
 addons/api/app/models/target.js             |  1 +
 addons/api/tests/unit/models/target-test.js | 13 ++++++++
 4 files changed, 54 insertions(+)
 create mode 100644 addons/api/addon/generated/models/target.js
 create mode 100644 addons/api/addon/models/target.js
 create mode 100644 addons/api/app/models/target.js
 create mode 100644 addons/api/tests/unit/models/target-test.js

diff --git a/addons/api/addon/generated/models/target.js b/addons/api/addon/generated/models/target.js
new file mode 100644
index 000000000..5c053d46a
--- /dev/null
+++ b/addons/api/addon/generated/models/target.js
@@ -0,0 +1,37 @@
+import BaseModel from '../../models/base';
+import { attr } from '@ember-data/model';
+
+/**
+ * Target
+ */
+export default class GeneratedTargetModel extends BaseModel {
+
+  // =attributes
+
+  @attr('string', {
+    description: 'The protocol used in the target'
+  }) protocol;
+
+  @attr('string', {
+    description: 'Optional name for identification purposes'
+  }) name;
+
+  @attr('string', {
+    description: 'Optional user-set description for identification purposes'
+  }) description;
+
+  @attr('date', {
+    description: 'The time this resource was created\nOutput only.',
+    readOnly: true
+  }) created_time;
+
+  @attr('date', {
+    description: 'The time this resource was last updated\nOutput only.',
+    readOnly: true
+  }) updated_time;
+
+  @attr('boolean', {
+    description: 'Whether the catalog is disabled'
+  }) disabled;
+
+}
diff --git a/addons/api/addon/models/target.js b/addons/api/addon/models/target.js
new file mode 100644
index 000000000..68ac7904f
--- /dev/null
+++ b/addons/api/addon/models/target.js
@@ -0,0 +1,3 @@
+import GeneratedUserModel from '../generated/models/target';
+
+export default class TargetModel extends GeneratedTargetModel {}
diff --git a/addons/api/app/models/target.js b/addons/api/app/models/target.js
new file mode 100644
index 000000000..a5b0bca2f
--- /dev/null
+++ b/addons/api/app/models/target.js
@@ -0,0 +1 @@
+export { default } from 'api/models/target';
diff --git a/addons/api/tests/unit/models/target-test.js b/addons/api/tests/unit/models/target-test.js
new file mode 100644
index 000000000..78fc71e43
--- /dev/null
+++ b/addons/api/tests/unit/models/target-test.js
@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Model | target', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('target', {});
+    assert.ok(model);
+  });
+});

From 639325ddd6836644778e4215bb96998624b146c3 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 11:53:53 -0400
Subject: [PATCH 07/14] chore: Add target mirage config

---
 addons/api/addon/models/target.js            |  2 +-
 ui/core/mirage/config.js                     |  8 ++++++++
 ui/core/mirage/factories/target.js           |  3 +++
 ui/core/mirage/generated/factories/target.js | 16 ++++++++++++++++
 ui/core/mirage/scenarios/default.js          |  4 ++++
 ui/core/mirage/serializers/target.js         |  5 +++++
 6 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 ui/core/mirage/factories/target.js
 create mode 100644 ui/core/mirage/generated/factories/target.js
 create mode 100644 ui/core/mirage/serializers/target.js

diff --git a/addons/api/addon/models/target.js b/addons/api/addon/models/target.js
index 68ac7904f..84b2658dc 100644
--- a/addons/api/addon/models/target.js
+++ b/addons/api/addon/models/target.js
@@ -1,3 +1,3 @@
-import GeneratedUserModel from '../generated/models/target';
+import GeneratedTargetModel from '../generated/models/target';
 
 export default class TargetModel extends GeneratedTargetModel {}
diff --git a/ui/core/mirage/config.js b/ui/core/mirage/config.js
index 4f69c6f33..56ebd68d0 100644
--- a/ui/core/mirage/config.js
+++ b/ui/core/mirage/config.js
@@ -123,6 +123,14 @@ export default function() {
     return hostSet.update(attrs);
   });
 
+  // target
+
+  this.get('/scopes/:scope_id/targets');
+  this.post('/scopes/:scope_id/targets');
+  this.get('/scopes/:scope_id/targets/:id');
+  this.patch('/scopes/:scope_id/targets/:id');
+  this.del('/scopes/:scope_id/targets/:id');
+
   // Uncomment the following line and the Response import above
   // Then change the response code to simulate error responses.
   // this.get('/scopes/:scope_id/projects', () => new Response(505));
diff --git a/ui/core/mirage/factories/target.js b/ui/core/mirage/factories/target.js
new file mode 100644
index 000000000..b664ff88a
--- /dev/null
+++ b/ui/core/mirage/factories/target.js
@@ -0,0 +1,3 @@
+import factory from '../generated/factories/target';
+
+export default factory.extend();
diff --git a/ui/core/mirage/generated/factories/target.js b/ui/core/mirage/generated/factories/target.js
new file mode 100644
index 000000000..5033064c8
--- /dev/null
+++ b/ui/core/mirage/generated/factories/target.js
@@ -0,0 +1,16 @@
+import { Factory } from 'ember-cli-mirage';
+import { random, date } from 'faker';
+
+/**
+ * GeneratedTargetModelFactory
+ */
+export default Factory.extend({
+
+  protocol: 'SSH',
+  name: () => random.words(),
+  description: () => random.words(),
+  created_time: () => date.recent(),
+  updated_time: () => date.recent(),
+  disabled: () => random.boolean(),
+
+});
diff --git a/ui/core/mirage/scenarios/default.js b/ui/core/mirage/scenarios/default.js
index a4fec0451..f09f7dac8 100644
--- a/ui/core/mirage/scenarios/default.js
+++ b/ui/core/mirage/scenarios/default.js
@@ -35,4 +35,8 @@ export default function(server) {
     server.createList('host-catalog', 2, { scope }, 'withChildren');
   });
 
+  // Target
+
+  server.createList('target', 5, { scope });
+
 }
diff --git a/ui/core/mirage/serializers/target.js b/ui/core/mirage/serializers/target.js
new file mode 100644
index 000000000..3d4bc5f3e
--- /dev/null
+++ b/ui/core/mirage/serializers/target.js
@@ -0,0 +1,5 @@
+import ApplicationSerializer from './application';
+
+export default ApplicationSerializer.extend({
+  modelName: 'target'
+});

From b63cd95cc2d7888e9fe318b516d3460f0c0c71e1 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 12:21:14 -0400
Subject: [PATCH 08/14] chore: List targets under a project scope

---
 ui/core/app/router.js                         |  1 +
 .../scopes/scope/projects/project/targets.js  | 14 +++++
 .../scope/projects/project/targets/index.js   |  4 ++
 .../scope/projects/project/_sidebar.hbs       |  3 ++
 .../scopes/scope/projects/project/targets.hbs |  3 ++
 .../scope/projects/project/targets/index.hbs  | 53 +++++++++++++++++++
 ui/core/mirage/scenarios/default.js           |  7 +--
 .../scope/projects/project/targets-test.js    | 11 ++++
 .../projects/project/targets/index-test.js    | 11 ++++
 ui/core/translations/en-us.yaml               |  9 ++++
 10 files changed, 111 insertions(+), 5 deletions(-)
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/targets.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/targets/index.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/targets-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/targets/index-test.js

diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 4243d97b5..eb486f950 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -29,6 +29,7 @@ Router.map(function () {
               });
             });
           });
+          this.route('targets', function() {});
         });
         this.route('new');
       });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets.js b/ui/core/app/routes/scopes/scope/projects/project/targets.js
new file mode 100644
index 000000000..91f399648
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets.js
@@ -0,0 +1,14 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsRoute extends Route {
+  // =methods
+
+  /**
+   * Loads all targets under current project scope.
+   * @return {Promise{[TargetModel]}}
+   */
+  async model() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    return this.store.findAll('target', { adapterOptions: { scopeID } });
+  }
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/index.js b/ui/core/app/routes/scopes/scope/projects/project/targets/index.js
new file mode 100644
index 000000000..0506aa8da
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsIndexRoute extends Route {
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs b/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
index 8f46f6113..ae4f79e0b 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
@@ -1,4 +1,7 @@
 <Rose::Nav::Sidebar @title={{t "titles.resources"}} as |nav|>
+  <nav.link @route="scopes.scope.projects.project.targets">
+    {{t "resources.targets"}}
+  </nav.link>
   <nav.link @route="scopes.scope.projects.project.host-catalogs">
     {{t "resources.host-catalogs"}}
   </nav.link>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets.hbs
new file mode 100644
index 000000000..744cee2b2
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets.hbs
@@ -0,0 +1,3 @@
+{{title (t "resources.targets")}}
+
+{{outlet}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
new file mode 100644
index 000000000..113b126dc
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -0,0 +1,53 @@
+<Rose::Layout::Page as |page|>
+
+  <page.header>
+    <h2>{{t "resources.targets"}}</h2>
+  </page.header>
+
+  <page.body>
+
+    {{#if @model}}
+
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.cell>{{t "form.label.name"}}</row.cell>
+            <row.cell>{{t "form.label.protocol"}}</row.cell>
+            <row.cell>{{t "form.label.id"}}</row.cell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model as |target|}}
+            <body.row as |row|>
+              <row.cell>
+                {{target.displayName}}
+                <p>{{target.description}}</p>
+              </row.cell>
+              <row.cell>
+                <Rose::Badge @style="outline">
+                  {{t (concat "target.protocols." target.protocol)}}
+                </Rose::Badge>
+              </row.cell>
+              <row.cell>
+                <code>{{target.id}}</code>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t "titles.targets-welcome"}} as |message|>
+          <message.description>
+            {{t "descriptions.targets-welcome"}}
+          </message.description>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+
+  </page.body>
+
+</Rose::Layout::Page>
diff --git a/ui/core/mirage/scenarios/default.js b/ui/core/mirage/scenarios/default.js
index f09f7dac8..439b9fd01 100644
--- a/ui/core/mirage/scenarios/default.js
+++ b/ui/core/mirage/scenarios/default.js
@@ -33,10 +33,7 @@ export default function(server) {
   server.db.scopes.where({type: 'project'}).forEach(({ id, type }) => {
     const scope = { id, type };
     server.createList('host-catalog', 2, { scope }, 'withChildren');
+    server.createList('target', 2, { scope });
   });
-
-  // Target
-
-  server.createList('target', 5, { scope });
-
+  
 }
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/targets-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets-test.js
new file mode 100644
index 000000000..ca2ead9ca
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/targets', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/index-test.js
new file mode 100644
index 000000000..fa478cbe9
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/targets/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 125b3b75c..b2d630279 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -31,6 +31,10 @@ auth:
 host-set:
   types:
     static: Static
+target:
+  protocols:
+    ssh: SSH
+    SSH: SSH
 resources:
   user: User
   users: Users
@@ -48,6 +52,7 @@ resources:
   auth-methods: Auth Methods
   host-set: Host Set
   host-sets: Host Sets
+  targets: Targets
 titles:
   iam: IAM
   new: New
@@ -64,10 +69,12 @@ titles:
   roles-welcome: Welcome to Roles
   groups-welcome: Welcome to Groups
   auth-methods-welcome: Welcome to Auth Methods
+  targets-welcome: Create your first Target
   grants: Permissions
   new-grant: New Grant
   principals: Principals
   host-sets: Host Sets
+  targets: Targets
   global: Global
 descriptions:
   host-catalogs: Overview of collections of hosts and host sets.
@@ -79,6 +86,7 @@ descriptions:
   roles-welcome: Roles are collections of capabilities that can be granted to user and/or groups.
   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.
 states:
   info: Info
   success: Success
@@ -95,6 +103,7 @@ form:
     manage: Manage
     grant: Grant
     principal: Principal
+    protocol: Protocol
 errors:
   titles:
     unauthenticated-error: You are not signed in

From 56a059ba962c4eeabaaed749665643ba68d400c5 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 12:52:23 -0400
Subject: [PATCH 09/14] chore: Add save and delete workflow to a target

---
 ui/core/app/components/form/target/index.hbs  | 49 +++++++++++++++
 ui/core/app/router.js                         |  4 +-
 .../project/host-catalogs/host-catalog.js     |  2 +-
 .../scopes/scope/projects/project/targets.js  | 60 +++++++++++++++++++
 .../scope/projects/project/targets/target.js  | 18 ++++++
 .../projects/project/targets/target/index.js  |  4 ++
 .../scope/projects/project/targets/index.hbs  |  7 ++-
 .../scope/projects/project/targets/target.hbs |  1 +
 .../projects/project/targets/target/index.hbs | 35 +++++++++++
 .../components/form/target-test.js            | 23 +++++++
 .../projects/project/targets/target-test.js   | 11 ++++
 .../project/targets/target/index-test.js      | 11 ++++
 ui/core/translations/en-us.yaml               |  2 +
 13 files changed, 224 insertions(+), 3 deletions(-)
 create mode 100644 ui/core/app/components/form/target/index.hbs
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/targets/target.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/targets/target/index.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
 create mode 100644 ui/core/tests/integration/components/form/target-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/index-test.js

diff --git a/ui/core/app/components/form/target/index.hbs b/ui/core/app/components/form/target/index.hbs
new file mode 100644
index 000000000..45adc26d0
--- /dev/null
+++ b/ui/core/app/components/form/target/index.hbs
@@ -0,0 +1,49 @@
+<Rose::Form
+  @onSubmit={{@submit}}
+  @cancel={{@cancel}}
+  @disabled={{@model.isSaving}}
+  @error={{@model.errors.base}}
+  as |form|
+>
+
+  <form.input
+    @name="name"
+    @type="name"
+    @value={{@model.name}}
+    @label={{t "form.label.name"}}
+    @error={{@model.errors.name}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.name}}
+      <field.errors as |errors|>
+        {{#each @model.errors.name as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.input>
+
+  <form.textarea
+    @name="description"
+    @type="description"
+    @value={{@model.description}}
+    @label={{t "form.label.description"}}
+    @error={{@model.errors.description}}
+    disabled={{@model.isSaving}}
+    readonly={{false}}
+  as |field|>
+    {{#if @model.errors.description}}
+      <field.errors as |errors|>
+        {{#each @model.errors.description as |error|}}
+          <errors.message>{{error.message}}</errors.message>
+        {{/each}}
+      </field.errors>
+    {{/if}}
+  </form.textarea>
+
+  <form.actions
+    @disabled={{if @model.cannotSave @model.cannotSave}}
+    @submitText={{t "actions.save"}}
+    @cancelText={{t "actions.cancel"}} />
+
+</Rose::Form>
diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index eb486f950..34435c631 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -29,7 +29,9 @@ Router.map(function () {
               });
             });
           });
-          this.route('targets', function() {});
+          this.route('targets', function() {
+            this.route('target', { path: ':target_id' }, function() {});
+          });
         });
         this.route('new');
       });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
index 7247e9446..b9afbdf98 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
@@ -17,7 +17,7 @@ export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogRoute exte
     });
   }
 
-    /**
+  /**
    * Renders the host-catalog specific templates for header, navigation, and actions page sections.
    * @override
    * @param {object} controller
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets.js b/ui/core/app/routes/scopes/scope/projects/project/targets.js
index 91f399648..acb1e07cc 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/targets.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets.js
@@ -1,6 +1,14 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ScopesScopeProjectsProjectTargetsRoute extends Route {
+
+  // =services
+
+  @service intl;
+  @service notify;
+
   // =methods
 
   /**
@@ -11,4 +19,56 @@ export default class ScopesScopeProjectsProjectTargetsRoute extends Route {
     const scopeID = this.modelFor('scopes.scope.projects.project').id;
     return this.store.findAll('target', { adapterOptions: { scopeID } });
   }
+
+  // =actions
+
+  /**
+   * Rollback changes on a target.
+   * @param {TargetModel} target
+   */
+  @action
+  cancel(target) {
+    const { isNew } = target;
+    target.rollbackAttributes();
+    if (isNew) this.transitionTo('scopes.scope.projects.project.targets');
+  }
+
+  /**
+   * Handle save.
+   * @param {TargetModel} target
+   * @param {Event} e
+   */
+  @action
+  async save(target) {
+    const { isNew } = target;
+    try {
+      await target.save();
+      this.refresh();
+      this.notify.success(
+        this.intl.t(isNew ? 'notify.create-success' : 'notify.save-success')
+      );
+      this.transitionTo('scopes.scope.projects.project.targets.target', target);
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Deletes a target and redirects to targets index.
+   * @param {TargetModel} target
+   */
+  @action
+  async delete(target) {
+    try {
+      await target.destroyRecord();
+      this.refresh();
+      this.notify.success(this.intl.t('notify.delete-success'));
+      this.transitionTo('scopes.scope.projects.project.targets');
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
 }
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
new file mode 100644
index 000000000..8b5cf77ab
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target.js
@@ -0,0 +1,18 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsTargetRoute extends Route {
+
+  // =methods
+
+  /**
+   * Load a target.
+   * @param {object} params
+   * @param {string} params.target_id
+   * @return {TargetModel}
+   */
+  async model({ target_id }) {
+    const { id: scopeID } = this.modelFor('scopes.scope.projects.project');
+    return this.store.findRecord('target', target_id, { adapterOptions: { scopeID } });
+  }
+
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/target/index.js b/ui/core/app/routes/scopes/scope/projects/project/targets/target/index.js
new file mode 100644
index 000000000..ff772f61f
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/target/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsTargetIndexRoute extends Route {
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
index 113b126dc..8d330854c 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -20,7 +20,12 @@
           {{#each @model as |target|}}
             <body.row as |row|>
               <row.cell>
-                {{target.displayName}}
+                <LinkTo
+                  @route="scopes.scope.projects.project.targets.target"
+                  @model={{target}}
+                >
+                  {{target.displayName}}
+                </LinkTo>
                 <p>{{target.description}}</p>
               </row.cell>
               <row.cell>
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
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
new file mode 100644
index 000000000..64fc6b7d2
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
@@ -0,0 +1,35 @@
+<Rose::Layout::Page as |page|>
+
+  <page.header>
+    <h2>{{t "resources.target"}}</h2>
+  </page.header>
+
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='scopes.scope.projects.project.targets.target'>
+        {{t 'titles.details'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
+
+  <page.actions>
+    <Rose::Dropdown @text="{{t 'form.label.manage'}}" @dropdownRight={{true}} as |dropdown|>
+      <dropdown.button
+        @style="danger"
+        @disabled={{@model.canSave}}
+        {{on "click" (route-action "delete" @model)}}
+      >
+        {{t 'actions.delete-target'}}
+      </dropdown.button>
+    </Rose::Dropdown>
+  </page.actions>
+
+  <page.body>
+    <Form::Target
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
diff --git a/ui/core/tests/integration/components/form/target-test.js b/ui/core/tests/integration/components/form/target-test.js
new file mode 100644
index 000000000..e0246833f
--- /dev/null
+++ b/ui/core/tests/integration/components/form/target-test.js
@@ -0,0 +1,23 @@
+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/target', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+    this.submit = () => {};
+    this.cancel = () => {};
+
+    await render(hbs`
+      <Form::Target
+        @submit={{this.submit}}
+        @cancel={{this.cancel}}
+      />`);
+
+    assert.ok(find('form'));
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target-test.js
new file mode 100644
index 000000000..0fa4c6fc5
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target-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', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets/target');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/index-test.js
new file mode 100644
index 000000000..5b1f35962
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/target/index-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/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets/target/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index b2d630279..20114979f 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -16,6 +16,7 @@ actions:
   delete-host-catalog: Delete host catalog
   delete-auth-method: Delete auth method
   delete-host-set: Delete host set
+  delete-target: Delete target
   add-host-set: Create Host Set
 auth:
   titles:
@@ -52,6 +53,7 @@ resources:
   auth-methods: Auth Methods
   host-set: Host Set
   host-sets: Host Sets
+  target: Target
   targets: Targets
 titles:
   iam: IAM

From 286a994896333f75341caf21f2fb5fee10fa6c4c Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 13:14:21 -0400
Subject: [PATCH 10/14] chore: Add new target route

---
 ui/core/app/router.js                         |  1 +
 .../scope/projects/project/targets/new.js     | 16 +++++++++++++++
 .../scope/projects/project/targets/index.hbs  | 20 ++++++++++++++++---
 .../scope/projects/project/targets/new.hbs    | 17 ++++++++++++++++
 .../projects/project/targets/new-test.js      | 11 ++++++++++
 5 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/targets/new.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/targets/new-test.js

diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index 34435c631..a047d9042 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -31,6 +31,7 @@ Router.map(function () {
           });
           this.route('targets', function() {
             this.route('target', { path: ':target_id' }, function() {});
+            this.route('new');
           });
         });
         this.route('new');
diff --git a/ui/core/app/routes/scopes/scope/projects/project/targets/new.js b/ui/core/app/routes/scopes/scope/projects/project/targets/new.js
new file mode 100644
index 000000000..000752c13
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/targets/new.js
@@ -0,0 +1,16 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectTargetsNewRoute extends Route {
+
+  // =methods
+
+  /**
+   * Creates a new unsaved target in current project scope.
+   * @return {TargetModel}
+   */
+  model() {
+    const scopeModel = this.modelFor('scopes.scope.projects.project');
+    return this.store.createRecord('target', { scopeModel });
+  }
+
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
index 8d330854c..20b6f19ee 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -4,6 +4,14 @@
     <h2>{{t "resources.targets"}}</h2>
   </page.header>
 
+  <page.actions>
+    {{#if @model}}
+      <Rose::LinkButton @route="scopes.scope.projects.project.targets.new" @style="primary">
+        {{t "titles.new"}}
+      </Rose::LinkButton>
+    {{/if}}
+  </page.actions>
+
   <page.body>
 
     {{#if @model}}
@@ -29,9 +37,11 @@
                 <p>{{target.description}}</p>
               </row.cell>
               <row.cell>
-                <Rose::Badge @style="outline">
-                  {{t (concat "target.protocols." target.protocol)}}
-                </Rose::Badge>
+                {{#if target.protocol}}
+                  <Rose::Badge @style="outline">
+                    {{t (concat "target.protocols." target.protocol)}}
+                  </Rose::Badge>
+                {{/if}}
               </row.cell>
               <row.cell>
                 <code>{{target.id}}</code>
@@ -48,6 +58,10 @@
           <message.description>
             {{t "descriptions.targets-welcome"}}
           </message.description>
+          <message.link @route="scopes.scope.projects.project.targets.new">
+            <Rose::Icon @name="plus-circle-outline" />
+            {{t "titles.new"}}
+          </message.link>
         </Rose::Message>
       </Rose::Layout::Centered>
 
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs
new file mode 100644
index 000000000..df5cde8f1
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs
@@ -0,0 +1,17 @@
+{{title (t 'titles.new')}}
+
+<Rose::Layout::Page as |page|>
+
+  <page.header>
+    <h2>{{t "titles.new"}}</h2>
+  </page.header>
+
+  <page.body>
+    <Form::Target
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/new-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/new-test.js
new file mode 100644
index 000000000..dea235c50
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/targets/new-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/projects/project/targets/new', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/targets/new');
+    assert.ok(route);
+  });
+});

From 786f8b884713f449a8f536429ee5f0eb740e21f4 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 13:18:14 -0400
Subject: [PATCH 11/14] chore: Add target breadcrumbs

---
 .../scopes/scope/projects/project/targets.js  | 20 +++++++++++++++++++
 .../scope/projects/project/targets/new.js     | 20 +++++++++++++++++++
 .../scope/projects/project/targets/target.js  | 15 ++++++++++++++
 .../scope/projects/project/targets/index.hbs  |  4 ++++
 .../scope/projects/project/targets/new.hbs    |  4 ++++
 .../projects/project/targets/target/index.hbs |  4 ++++
 .../scope/projects/project/targets-test.js    | 12 +++++++++++
 .../projects/project/targets/new-test.js      | 12 +++++++++++
 .../projects/project/targets/target-test.js   | 12 +++++++++++
 9 files changed, 103 insertions(+)
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/targets.js
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/targets/new.js
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/targets/target.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/targets-test.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/new-test.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target-test.js

diff --git a/ui/core/app/controllers/scopes/scope/projects/project/targets.js b/ui/core/app/controllers/scopes/scope/projects/project/targets.js
new file mode 100644
index 000000000..a0d75250f
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/targets.js
@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectTargetsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Targets breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.targets');
+  }
+
+}
diff --git a/ui/core/app/controllers/scopes/scope/projects/project/targets/new.js b/ui/core/app/controllers/scopes/scope/projects/project/targets/new.js
new file mode 100644
index 000000000..035a83756
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/targets/new.js
@@ -0,0 +1,20 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectTargetsNewController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * Translated new target breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('titles.new');
+  }
+
+}
diff --git a/ui/core/app/controllers/scopes/scope/projects/project/targets/target.js b/ui/core/app/controllers/scopes/scope/projects/project/targets/target.js
new file mode 100644
index 000000000..0da51ffa4
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/targets/target.js
@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeProjectsProjectTargetsTargetController extends Controller {
+
+  // =attributes
+
+  /**
+   * A target breadcrumb
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
index 20b6f19ee..184dd9910 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -1,5 +1,9 @@
 <Rose::Layout::Page as |page|>
 
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
   <page.header>
     <h2>{{t "resources.targets"}}</h2>
   </page.header>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs
index df5cde8f1..4ac91435b 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/new.hbs
@@ -2,6 +2,10 @@
 
 <Rose::Layout::Page as |page|>
 
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
   <page.header>
     <h2>{{t "titles.new"}}</h2>
   </page.header>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
index 64fc6b7d2..da4860986 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/target/index.hbs
@@ -1,5 +1,9 @@
 <Rose::Layout::Page as |page|>
 
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
   <page.header>
     <h2>{{t "resources.target"}}</h2>
   </page.header>
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets-test.js
new file mode 100644
index 000000000..908c813bf
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/targets', 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');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/new-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/new-test.js
new file mode 100644
index 000000000..d7634fb8c
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/new-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | scopes/scope/projects/project/targets/new', 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/new');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target-test.js
new file mode 100644
index 000000000..839332da1
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/targets/target-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', 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');
+    assert.ok(controller);
+  });
+});

From 0d93a839c73aabf97204640403cc38f0abda1ef3 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 13:22:00 -0400
Subject: [PATCH 12/14] chore: Update target tests

---
 ui/core/tests/acceptance/host-sets-test.js |  4 +-
 ui/core/tests/acceptance/targets-test.js   | 61 ++++++++++++++++++++++
 2 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 ui/core/tests/acceptance/targets-test.js

diff --git a/ui/core/tests/acceptance/host-sets-test.js b/ui/core/tests/acceptance/host-sets-test.js
index f7ba7226d..b018fc1d8 100644
--- a/ui/core/tests/acceptance/host-sets-test.js
+++ b/ui/core/tests/acceptance/host-sets-test.js
@@ -47,7 +47,7 @@ module('Acceptance | host sets', function (hooks) {
     assert.expect(0);
   });
 
-  test('errors are displayed when save on auth method fails', async function (assert) {
+  test('errors are displayed when save on host set fails', async function (assert) {
     assert.expect(0);
   });
 
@@ -55,7 +55,7 @@ module('Acceptance | host sets', function (hooks) {
     assert.expect(0);
   });
 
-  test('saving an existing auth method with invalid fields displays error messages', async function (assert) {
+  test('saving an existing host set with invalid fields displays error messages', async function (assert) {
     assert.expect(0);
   });
 });
diff --git a/ui/core/tests/acceptance/targets-test.js b/ui/core/tests/acceptance/targets-test.js
new file mode 100644
index 000000000..8ff26fa7f
--- /dev/null
+++ b/ui/core/tests/acceptance/targets-test.js
@@ -0,0 +1,61 @@
+import { module, test } from 'qunit';
+//import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+//import a11yAudit from 'ember-a11y-testing/test-support/audit';
+// import {
+//   authenticateSession,
+//   // These are left here intentionally for future reference.
+//   //currentSession,
+//   //invalidateSession,
+// } from 'ember-simple-auth/test-support';
+
+module('Acceptance | targets', function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function () {
+    // Setup Mirage mock resources for this test
+    // Generate route URLs for resources
+  });
+
+  test('visiting targets', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can navigate to a target form', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can update a target and save changes', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can update a target and cancel changes', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can create new target', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('can cancel new target creation', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('saving a new target with invalid fields displays error messages', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('errors are displayed when save on target fails', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('errors are displayed when delete on a target fails', async function (assert) {
+    assert.expect(0);
+  });
+
+  test('saving an existing target with invalid fields displays error messages', async function (assert) {
+    assert.expect(0);
+  });
+});

From c0f648f47788b99562d95bc4c9e2176611cdacfe Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 13:43:18 -0400
Subject: [PATCH 13/14] chore: Update tableheader cells to "row.headerCell"
 component

---
 .../scopes/scope/auth-methods/index.hbs          | 14 ++++++++------
 .../app/templates/scopes/scope/groups/index.hbs  | 11 +++++++----
 .../host-catalog/host-sets/index.hbs             | 10 +++++-----
 .../host-catalogs/host-catalog/hosts/index.hbs   | 10 +++++-----
 .../projects/project/host-catalogs/index.hbs     | 16 ++++++++--------
 .../app/templates/scopes/scope/roles/index.hbs   | 11 +++++++----
 .../app/templates/scopes/scope/users/index.hbs   |  9 ++++++---
 ui/core/tests/acceptance/host-catalogs-test.js   |  2 +-
 8 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/ui/core/app/templates/scopes/scope/auth-methods/index.hbs b/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
index a5bc4f485..3a7d79661 100644
--- a/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
+++ b/ui/core/app/templates/scopes/scope/auth-methods/index.hbs
@@ -21,16 +21,16 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t 'form.label.name'}}</row.cell>
-            <row.cell>{{t 'form.label.type'}}</row.cell>
-            <row.cell>{{t 'form.label.id'}}</row.cell>
+            <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
+            <row.headerCell>{{t 'form.label.type'}}</row.headerCell>
+            <row.headerCell>{{t 'form.label.id'}}</row.headerCell>
           </header.row>
         </table.header>
 
         <table.body as |body|>
           {{#each @model as |authMethod|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.auth-methods.auth-method"
                   @model={{authMethod}}
@@ -38,13 +38,15 @@
                   {{authMethod.name}}
                 </LinkTo>
                 <p>{{authMethod.description}}</p>
-              </row.cell>
+              </row.headerCell>
               <row.cell>
                 <Rose::Badge @style="outline">
                   {{t (concat 'auth.method-types.' authMethod.type)}}
                 </Rose::Badge>
               </row.cell>
-              <row.cell>{{authMethod.id}}</row.cell>
+              <row.cell>
+                <code>{{authMethod.id}}</code>
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/core/app/templates/scopes/scope/groups/index.hbs b/ui/core/app/templates/scopes/scope/groups/index.hbs
index cddaa478b..158ea31d0 100644
--- a/ui/core/app/templates/scopes/scope/groups/index.hbs
+++ b/ui/core/app/templates/scopes/scope/groups/index.hbs
@@ -21,22 +21,25 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t 'form.label.name'}}</row.cell>
-            <row.cell>{{t 'form.label.description'}}</row.cell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |group|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.groups.group"
                   @model={{group}}
                 >
                   {{group.name}}
                 </LinkTo>
+                <p>{{group.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <code>{{group.id}}</code>
               </row.cell>
-              <row.cell>{{group.description}}</row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
index 8b7dc963b..a3d132659 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/host-sets/index.hbs
@@ -3,15 +3,15 @@
   <Rose::Table as |table|>
     <table.header as |header|>
       <header.row as |row|>
-        <row.cell>{{t "form.label.name"}}</row.cell>
-        <row.cell>{{t "form.label.type"}}</row.cell>
-        <row.cell>{{t "form.label.id"}}</row.cell>
+        <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+        <row.headerCell>{{t "form.label.type"}}</row.headerCell>
+        <row.headerCell>{{t "form.label.id"}}</row.headerCell>
       </header.row>
     </table.header>
     <table.body as |body|>
       {{#each @model as |hostSet|}}
         <body.row as |row|>
-          <row.cell>
+          <row.headerCell>
             <LinkTo
               @route="scopes.scope.projects.project.host-catalogs.host-catalog.host-sets.host-set"
               @model={{hostSet}}
@@ -19,7 +19,7 @@
               {{hostSet.displayName}}
             </LinkTo>
             <p>{{hostSet.description}}</p>
-          </row.cell>
+          </row.headerCell>
           <row.cell>
             <Rose::Badge @style="outline">{{hostSet.type}}</Rose::Badge>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
index 7905988e5..3e5b48c5f 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/hosts/index.hbs
@@ -3,15 +3,15 @@
   <Rose::Table as |table|>
     <table.header as |header|>
       <header.row as |row|>
-        <row.cell>{{t "form.label.name"}}</row.cell>
-        <row.cell>{{t "form.label.type"}}</row.cell>
-        <row.cell>{{t "form.label.id"}}</row.cell>
+        <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+        <row.headerCell>{{t "form.label.type"}}</row.headerCell>
+        <row.headerCell>{{t "form.label.id"}}</row.headerCell>
       </header.row>
     </table.header>
     <table.body as |body|>
       {{#each @model as |host|}}
         <body.row as |row|>
-          <row.cell>
+          <row.headerCell>
             <LinkTo
               @route="scopes.scope.projects.project.host-catalogs.host-catalog.hosts.host"
               @model={{host}}
@@ -19,7 +19,7 @@
               {{host.displayName}}
             </LinkTo>
             <p>{{host.description}}</p>
-          </row.cell>
+          </row.headerCell>
           <row.cell>
             <Rose::Badge @style="outline">{{host.type}}</Rose::Badge>
           </row.cell>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
index 8cc81e3db..56c923f9c 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
@@ -24,18 +24,15 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t "form.label.id"}}</row.cell>
-            <row.cell>{{t "form.label.name"}}</row.cell>
-            <row.cell>{{t "form.label.type"}}</row.cell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.type"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |hostCatalog|}}
             <body.row as |row|>
-              <row.cell>
-                <code>{{hostCatalog.id}}</code>
-              </row.cell>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.projects.project.host-catalogs.host-catalog"
                   @model={{hostCatalog}}
@@ -43,8 +40,11 @@
                   {{hostCatalog.displayName}}
                 </LinkTo>
                 <p>{{hostCatalog.description}}</p>
-              </row.cell>
+              </row.headerCell>
               <row.cell>{{hostCatalog.type}}</row.cell>
+              <row.cell>
+                <code>{{hostCatalog.id}}</code>
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/core/app/templates/scopes/scope/roles/index.hbs b/ui/core/app/templates/scopes/scope/roles/index.hbs
index e0e28cf9a..7572875cf 100644
--- a/ui/core/app/templates/scopes/scope/roles/index.hbs
+++ b/ui/core/app/templates/scopes/scope/roles/index.hbs
@@ -21,22 +21,25 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t 'form.label.name'}}</row.cell>
-            <row.cell>{{t 'form.label.description'}}</row.cell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |role|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.roles.role"
                   @model={{role}}
                 >
                   {{role.displayName}}
                 </LinkTo>
+                <p>{{role.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <code>{{role.id}}</code>
               </row.cell>
-              <row.cell>{{role.description}}</row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/core/app/templates/scopes/scope/users/index.hbs b/ui/core/app/templates/scopes/scope/users/index.hbs
index fb0a06a09..40c312997 100644
--- a/ui/core/app/templates/scopes/scope/users/index.hbs
+++ b/ui/core/app/templates/scopes/scope/users/index.hbs
@@ -21,8 +21,8 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.headerCell>{{t 'form.label.name'}}</row.headerCell>
-            <row.headerCell>{{t 'form.label.description'}}</row.headerCell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
@@ -35,8 +35,11 @@
                 >
                   {{user.name}}
                 </LinkTo>
+                <p>{{user.description}}</p>
               </row.headerCell>
-              <row.cell>{{user.description}}</row.cell>
+              <row.cell>
+                <code>{{user.id}}</code>
+              </row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js
index fada1730e..3b79331c9 100644
--- a/ui/core/tests/acceptance/host-catalogs-test.js
+++ b/ui/core/tests/acceptance/host-catalogs-test.js
@@ -69,7 +69,7 @@ module('Acceptance | host catalogs', function (hooks) {
     assert.expect(1);
     authenticateSession({});
     await visit(urls.hostCatalogs);
-    await click('main tbody .rose-table-cell:nth-child(2) a');
+    await click('main tbody .rose-table-header-cell:nth-child(1) a');
     await a11yAudit();
     assert.equal(currentURL(), urls.hostCatalog);
   });

From 710dd98da0ea2d7f255afc089ac003001c099cd6 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Fri, 21 Aug 2020 15:13:55 -0400
Subject: [PATCH 14/14] chore: Add version attribute to target

Update target table header cells
---
 addons/api/addon/generated/models/target.js            |  4 ++++
 .../scopes/scope/projects/project/targets/index.hbs    | 10 +++++-----
 ui/core/mirage/generated/factories/target.js           |  1 +
 ui/core/translations/en-us.yaml                        |  1 -
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/addons/api/addon/generated/models/target.js b/addons/api/addon/generated/models/target.js
index 5c053d46a..f80ea83cc 100644
--- a/addons/api/addon/generated/models/target.js
+++ b/addons/api/addon/generated/models/target.js
@@ -34,4 +34,8 @@ export default class GeneratedTargetModel extends BaseModel {
     description: 'Whether the catalog is disabled'
   }) disabled;
 
+  @attr('number', {
+    description: 'Current version number of this resource.',
+  })
+  version;
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
index 184dd9910..16511299f 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/targets/index.hbs
@@ -23,15 +23,15 @@
       <Rose::Table as |table|>
         <table.header as |header|>
           <header.row as |row|>
-            <row.cell>{{t "form.label.name"}}</row.cell>
-            <row.cell>{{t "form.label.protocol"}}</row.cell>
-            <row.cell>{{t "form.label.id"}}</row.cell>
+            <row.headerCell>{{t "form.label.name"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.protocol"}}</row.headerCell>
+            <row.headerCell>{{t "form.label.id"}}</row.headerCell>
           </header.row>
         </table.header>
         <table.body as |body|>
           {{#each @model as |target|}}
             <body.row as |row|>
-              <row.cell>
+              <row.headerCell>
                 <LinkTo
                   @route="scopes.scope.projects.project.targets.target"
                   @model={{target}}
@@ -39,7 +39,7 @@
                   {{target.displayName}}
                 </LinkTo>
                 <p>{{target.description}}</p>
-              </row.cell>
+              </row.headerCell>
               <row.cell>
                 {{#if target.protocol}}
                   <Rose::Badge @style="outline">
diff --git a/ui/core/mirage/generated/factories/target.js b/ui/core/mirage/generated/factories/target.js
index 5033064c8..134cc7c02 100644
--- a/ui/core/mirage/generated/factories/target.js
+++ b/ui/core/mirage/generated/factories/target.js
@@ -12,5 +12,6 @@ export default Factory.extend({
   created_time: () => date.recent(),
   updated_time: () => date.recent(),
   disabled: () => random.boolean(),
+  version: () => random.number(),
 
 });
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index fea3cd671..d9aa82900 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -36,7 +36,6 @@ host-set:
     static: Static
 target:
   protocols:
-    ssh: SSH
     SSH: SSH
 host:
   types: