From cd0c15a41fb76a6cd24f0ff65cf57f7860d4dfb2 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 28 Jul 2020 11:06:06 -0400
Subject: [PATCH 1/8] chore: add initial host catalogs index

---
 ui/core/app/router.js                         |  7 +-
 .../scope/projects/project/host-catalogs.js   | 73 +++++++++++++++++++
 .../project/host-catalogs/host-catalog.js     |  4 +
 .../host-catalogs/host-catalog/index.js       |  4 +
 .../projects/project/host-catalogs/index.js   |  4 +
 .../projects/project/host-catalogs/new.js     |  4 +
 .../scope/projects/project/host-catalogs.hbs  |  3 +
 .../project/host-catalogs/host-catalog.hbs    |  1 +
 .../host-catalogs/host-catalog/index.hbs      |  1 +
 .../projects/project/host-catalogs/index.hbs  | 68 +++++++++++++++++
 .../projects/project/host-catalogs/new.hbs    |  1 +
 ui/core/mirage/scenarios/default.js           | 17 +----
 .../projects/project/host-catalogs-test.js    | 11 +++
 .../host-catalogs/host-catalog-test.js        | 11 +++
 .../host-catalogs/host-catalog/index-test.js  | 11 +++
 .../project/host-catalogs/index-test.js       | 11 +++
 .../project/host-catalogs/new-test.js         | 11 +++
 17 files changed, 228 insertions(+), 14 deletions(-)
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/index.js
 create mode 100644 ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/index-test.js
 create mode 100644 ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/new-test.js

diff --git a/ui/core/app/router.js b/ui/core/app/router.js
index ef3536c60..4385741d0 100644
--- a/ui/core/app/router.js
+++ b/ui/core/app/router.js
@@ -14,7 +14,12 @@ Router.map(function () {
         this.route('method', { path: ':auth_method_id'});
       });
       this.route('projects', function() {
-        this.route('project', { path: ':project_id' }, function() {});
+        this.route('project', { path: ':project_id' }, function() {
+          this.route('host-catalogs', function() {
+            this.route('new');
+            this.route('host-catalog', { path: ':host_catalog_id' }, function() {});
+          });
+        });
         this.route('new');
       });
     });
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs.js
new file mode 100644
index 000000000..de945f71c
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs.js
@@ -0,0 +1,73 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ScopesScopeProjectsProjectHostCatalogsRoute extends Route {
+
+  // =services
+
+  @service notify;
+
+  // =methods
+
+
+  /**
+   * Loads all scopes under the current scope.
+   * @return {Promise{[HostCatalogModel]}}
+   */
+  async model() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    return this.store.findAll('host-catalog', { adapterOptions: { scopeID } });
+  }
+
+  // =actions
+
+  /**
+   * Rollback changes on project.
+   * @param {HostCatalogModel} hostCatalog
+   */
+  @action
+  cancel(hostCatalog) {
+    const { isNew } = hostCatalog;
+    hostCatalog.rollbackAttributes();
+    if (isNew) this.transitionTo('scopes.scope.projects.project.host-catalogs');
+  }
+
+  /**
+   * Handle save.
+   * @param {HostCatalogModel} hostCatalog
+   * @param {Event} e
+   */
+  @action
+  async save(hostCatalog) {
+    try {
+      await hostCatalog.save();
+      this.refresh();
+      // TODO: replace with translated strings
+      this.notify.success('Save succeeded.');
+      this.transitionTo('scopes.scope.projects.project.host-catalogs.host-catalog', hostCatalog);
+    } catch (error) {
+      // TODO: replace with translated strings
+      this.notify.error(error.message, { closeAfter: null });
+    }
+  }
+
+  /**
+   * Deletes the host catalog and redirects to index.
+   * @param {ProjectModel} project
+   */
+  @action
+  async delete(project) {
+    try {
+      await project.destroyRecord();
+      this.refresh();
+      this.transitionTo('scopes.scope.projects.project.host-catalogs');
+      // TODO: replace with translated strings
+      this.notify.success('Deleted host catalog succesfully.');
+    } 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/host-catalogs/host-catalog.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
new file mode 100644
index 000000000..f54947470
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index.js
new file mode 100644
index 000000000..34bccc035
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogIndexRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/index.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/index.js
new file mode 100644
index 000000000..b01277c47
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/index.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsIndexRoute extends Route {
+}
diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
new file mode 100644
index 000000000..9e076cd1d
--- /dev/null
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeProjectsProjectHostCatalogsNewRoute extends Route {
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs.hbs
new file mode 100644
index 000000000..6ad0035fb
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs.hbs
@@ -0,0 +1,3 @@
+{{title (t "resources.host-catalogs")}}
+
+{{outlet}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.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/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
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
new file mode 100644
index 000000000..935cf9f30
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/index.hbs
@@ -0,0 +1,68 @@
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "resources.host-catalogs"}}</h2>
+    <p>{{t "descriptions.host-catalogs"}}</p>
+  </page.header>
+
+  <page.actions>
+    {{#if @model}}
+      <Rose::LinkButton @route="scopes.scope.projects.project.host-catalogs.new" @style="primary">
+        {{t "titles.new"}}
+      </Rose::LinkButton>
+    {{/if}}
+  </page.actions>
+
+  <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.type"}}</row.cell>
+            <row.cell>{{t "form.label.description"}}</row.cell>
+          </header.row>
+        </table.header>
+        <table.body as |body|>
+          {{#each @model as |hostCatalog|}}
+            <body.row as |row|>
+              <row.cell>
+                <LinkTo
+                  @route="scopes.scope.projects.project.host-catalogs.host-catalog"
+                  @model={{hostCatalog}}
+                >
+                  {{hostCatalog.name}}
+                </LinkTo>
+              </row.cell>
+              <row.cell>{{hostCatalog.type}}</row.cell>
+              <row.cell>{{hostCatalog.description}}</row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+
+    {{else}}
+
+      <Rose::Layout::Centered>
+        <Rose::Message @title={{t "titles.host-catalogs-welcome"}} as |message|>
+          <message.description>
+            {{t "descriptions.host-catalogs-welcome"}}
+          </message.description>
+          <message.link @route="scopes.scope.projects.project.host-catalogs.new">
+            <Rose::Icon @name="plus-circle-outline" />
+            {{t "titles.new"}}
+          </message.link>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+
+  </page.body>
+
+</Rose::Layout::Page>
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/core/mirage/scenarios/default.js b/ui/core/mirage/scenarios/default.js
index 1bbae80d5..f5727e195 100644
--- a/ui/core/mirage/scenarios/default.js
+++ b/ui/core/mirage/scenarios/default.js
@@ -7,20 +7,8 @@ export default function(server) {
     type: 'org',
     scope: { id: globalScope.id, type: globalScope.type }
   }, 'withChildren');
-
   const scope = { id: orgScope.id, type: orgScope.type };
 
-  // Create additional scopes for authentication organization selection
-  server.create('scope', {
-    type: 'org',
-    scope: { id: globalScope.id, type: globalScope.type }
-  }, 'withChildren');
-
-  server.create('scope', {
-    type: 'org',
-    scope: { id: globalScope.id, type: globalScope.type }
-  }, 'withChildren');
-
   // Auth
 
   // Auth methods exist both at the global scope and the org scope.
@@ -38,6 +26,9 @@ export default function(server) {
 
   // Other resources
 
-  server.createList('host-catalog', 6);
+  server.db.scopes.where({type: 'project'}).forEach(projectScope => {
+    const scope = { id: projectScope.id, type: projectScope.type };
+    server.createList('host-catalog', 2, { scope });
+  });
 
 }
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs-test.js
new file mode 100644
index 000000000..dde4328e4
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs-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', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog-test.js
new file mode 100644
index 000000000..9cdc47735
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog-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', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/index-test.js
new file mode 100644
index 000000000..92f1aa677
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/host-catalog/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/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/host-catalog/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/index-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/index-test.js
new file mode 100644
index 000000000..5cc1d842c
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/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/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/new-test.js b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/new-test.js
new file mode 100644
index 000000000..96ccdff8b
--- /dev/null
+++ b/ui/core/tests/unit/routes/scopes/scope/projects/project/host-catalogs/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/new', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/projects/project/host-catalogs/new');
+    assert.ok(route);
+  });
+});

From 6fd8106d06be41882a50bcc3116f5b43145bf457 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 28 Jul 2020 12:04:55 -0400
Subject: [PATCH 2/8] chore: add projects sidebar

---
 .../app/routes/scopes/scope/projects/project.js   | 15 +++++++++++++++
 .../scopes/scope/projects/project/_sidebar.hbs    |  5 +++++
 ui/core/translations/en-us.yaml                   |  1 +
 3 files changed, 21 insertions(+)
 create mode 100644 ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs

diff --git a/ui/core/app/routes/scopes/scope/projects/project.js b/ui/core/app/routes/scopes/scope/projects/project.js
index c2aee8ed3..e5d96124b 100644
--- a/ui/core/app/routes/scopes/scope/projects/project.js
+++ b/ui/core/app/routes/scopes/scope/projects/project.js
@@ -14,4 +14,19 @@ export default class ScopesScopeProjectsProjectRoute extends Route {
     return this.store.findRecord('scope', project_id);
   }
 
+  /**
+   * Renders the project-specific sidebar template.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    this.render('scopes/scope/projects/project/_sidebar', {
+      into: 'scopes/scope',
+      outlet: 'sidebar',
+      model: model
+    });
+    super.renderTemplate(...arguments);
+  }
+
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs b/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
new file mode 100644
index 000000000..8f46f6113
--- /dev/null
+++ b/ui/core/app/templates/scopes/scope/projects/project/_sidebar.hbs
@@ -0,0 +1,5 @@
+<Rose::Nav::Sidebar @title={{t "titles.resources"}} as |nav|>
+  <nav.link @route="scopes.scope.projects.project.host-catalogs">
+    {{t "resources.host-catalogs"}}
+  </nav.link>
+</Rose::Nav::Sidebar>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index e4af341c7..135a2f3ea 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -33,6 +33,7 @@ resources:
 titles:
   iam: IAM
   new: New
+  resources: Resources
   details: Details
   general: General
   overview: Overview

From 234dc2a746d4ffd90674d0eed95824336144369a Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 28 Jul 2020 12:17:30 -0400
Subject: [PATCH 3/8] chore: add host catalog edit

---
 .../scope/projects/project/host-catalogs.js   | 19 ++++++++++
 .../project/host-catalogs/host-catalog.js     | 14 ++++++++
 .../project/host-catalogs/host-catalog.hbs    |  4 ++-
 .../host-catalogs/host-catalog/index.hbs      | 36 ++++++++++++++++++-
 .../projects/project/host-catalogs/index.hbs  |  9 +++--
 .../projects/project/host-catalogs-test.js    | 12 +++++++
 .../host-catalogs/host-catalog-test.js        | 12 +++++++
 ui/core/translations/en-us.yaml               |  1 +
 8 files changed, 102 insertions(+), 5 deletions(-)
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/host-catalogs.js
 create mode 100644 ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs-test.js
 create mode 100644 ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog-test.js

diff --git a/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs.js b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs.js
new file mode 100644
index 000000000..854de55e2
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs.js
@@ -0,0 +1,19 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+
+export default class ScopesScopeProjectsProjectHostCatalogsController extends Controller {
+
+  // =services
+
+  @service intl;
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.intl.t('resources.host-catalogs');
+  }
+
+}
diff --git a/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog.js b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog.js
new file mode 100644
index 000000000..97fa6533b
--- /dev/null
+++ b/ui/core/app/controllers/scopes/scope/projects/project/host-catalogs/host-catalog.js
@@ -0,0 +1,14 @@
+import Controller from '@ember/controller';
+
+export default class ScopesScopeProjectsProjectHostCatalogsHostCatalogController extends Controller {
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  get breadCrumb() {
+    return this.model.displayName;
+  }
+
+}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
index e2147cab0..d66e83390 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog.hbs
@@ -1 +1,3 @@
-{{outlet}}
\ No newline at end of file
+{{title @model.displayName}}
+
+{{outlet}}
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
index e2147cab0..cb0a4a0cf 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/host-catalog/index.hbs
@@ -1 +1,35 @@
-{{outlet}}
\ No newline at end of file
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "resources.host-catalog"}}</h2>
+  </page.header>
+
+  <page.navigation>
+    <Rose::Nav::Tabs as |nav|>
+      <nav.link @route='scopes.scope.projects.project.host-catalogs.host-catalog'>
+        {{t 'titles.details'}}
+      </nav.link>
+    </Rose::Nav::Tabs>
+  </page.navigation>
+
+  <page.body>
+    <Form::HostCatalog
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+    <Rose::Separator />
+    <Rose::Button
+      @style="warning"
+      @disabled={{@model.canSave}}
+      {{on "click" (route-action "delete" @model)}}
+    >
+      {{t 'actions.delete'}}
+    </Rose::Button>
+  </page.body>
+
+</Rose::Layout::Page>
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 935cf9f30..8cc81e3db 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,24 +24,27 @@
       <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.cell>{{t "form.label.description"}}</row.cell>
           </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>
                 <LinkTo
                   @route="scopes.scope.projects.project.host-catalogs.host-catalog"
                   @model={{hostCatalog}}
                 >
-                  {{hostCatalog.name}}
+                  {{hostCatalog.displayName}}
                 </LinkTo>
+                <p>{{hostCatalog.description}}</p>
               </row.cell>
               <row.cell>{{hostCatalog.type}}</row.cell>
-              <row.cell>{{hostCatalog.description}}</row.cell>
             </body.row>
           {{/each}}
         </table.body>
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs-test.js
new file mode 100644
index 000000000..ce6e91cd3
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs-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', 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');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog-test.js b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog-test.js
new file mode 100644
index 000000000..b93e2d1ce
--- /dev/null
+++ b/ui/core/tests/unit/controllers/scopes/scope/projects/project/host-catalogs/host-catalog-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', 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');
+    assert.ok(controller);
+  });
+});
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index 135a2f3ea..af1322a87 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -59,6 +59,7 @@ states:
   error: Error
 form:
   label:
+    id: ID
     name: Name
     description: Description
     type: Type

From ee6c6626c990bbb235aa493dc79b3ff7350306f4 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 28 Jul 2020 12:21:45 -0400
Subject: [PATCH 4/8] chore: add new host catalog logic

---
 .../projects/project/host-catalogs/new.js     | 12 ++++++++++
 .../projects/project/host-catalogs/new.hbs    | 22 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
index 9e076cd1d..923eb7ac3 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
@@ -1,4 +1,16 @@
 import Route from '@ember/routing/route';
 
 export default class ScopesScopeProjectsProjectHostCatalogsNewRoute extends Route {
+
+  // =methods
+
+  /**
+   * Creates a new unsaved host catalog belonging to the current project scope.
+   * @return {HostCatalogModel}
+   */
+  model() {
+    const scopeID = this.modelFor('scopes.scope.projects.project').id;
+    return this.store.createRecord('host-catalog', { scopeID });
+  }
+
 }
diff --git a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
index e2147cab0..0d969f874 100644
--- a/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
+++ b/ui/core/app/templates/scopes/scope/projects/project/host-catalogs/new.hbs
@@ -1 +1,21 @@
-{{outlet}}
\ No newline at end of file
+{{title (t 'titles.new')}}
+
+<Rose::Layout::Page as |page|>
+
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <h2>{{t "titles.new"}}</h2>
+  </page.header>
+
+  <page.body>
+    <Form::HostCatalog
+      @model={{@model}}
+      @submit={{route-action "save" @model}}
+      @cancel={{route-action "cancel" @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>

From 830e6b4116b6410566b732639a00c33aed5e65ac Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 28 Jul 2020 13:20:48 -0400
Subject: [PATCH 5/8] chore: simplify new model instantiation

---
 .../routes/scopes/scope/projects/project/host-catalogs/new.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
index 923eb7ac3..badecca3b 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
@@ -9,8 +9,8 @@ export default class ScopesScopeProjectsProjectHostCatalogsNewRoute extends Rout
    * @return {HostCatalogModel}
    */
   model() {
-    const scopeID = this.modelFor('scopes.scope.projects.project').id;
-    return this.store.createRecord('host-catalog', { scopeID });
+    const scopeModel = this.modelFor('scopes.scope.projects.project');
+    return this.store.createRecord('host-catalog', { scopeModel });
   }
 
 }

From 65e0a73305a0a9fd31934ecfc11869c4e47a52b3 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 28 Jul 2020 15:16:55 -0400
Subject: [PATCH 6/8] chore: ensure host catalog type is saved

---
 .../scopes/scope/projects/project/host-catalogs/new.js       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
index badecca3b..22097c23d 100644
--- a/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
+++ b/ui/core/app/routes/scopes/scope/projects/project/host-catalogs/new.js
@@ -10,7 +10,10 @@ export default class ScopesScopeProjectsProjectHostCatalogsNewRoute extends Rout
    */
   model() {
     const scopeModel = this.modelFor('scopes.scope.projects.project');
-    return this.store.createRecord('host-catalog', { scopeModel });
+    return this.store.createRecord('host-catalog', {
+      type: 'static',
+      scopeModel
+    });
   }
 
 }

From 3fe86614f120e92a66795c98e39764d2ec513a51 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 29 Jul 2020 11:20:37 -0400
Subject: [PATCH 7/8] test: add host catalogs acceptance tests

---
 .../tests/acceptance/host-catalogs-test.js    | 130 +++++++++++-------
 1 file changed, 83 insertions(+), 47 deletions(-)

diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js
index 4be43309f..682f9c163 100644
--- a/ui/core/tests/acceptance/host-catalogs-test.js
+++ b/ui/core/tests/acceptance/host-catalogs-test.js
@@ -1,52 +1,92 @@
 import { module, test } from 'qunit';
-import { visit, currentURL, click, fillIn, find } from '@ember/test-helpers';
+import { visit, currentURL, fillIn, click, find } 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 { Response } from 'miragejs';
+import {
+//  currentSession,
+  authenticateSession,
+//  invalidateSession,
+} from 'ember-simple-auth/test-support';
 
 module('Acceptance | host catalogs', function(hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
+  const instances = {
+    scopes: {
+      global: null,
+      org: null,
+      project: null
+    },
+    hostCatalog: null
+  };
+  const urls = {
+    orgScope: null,
+    projects: null,
+    project: null,
+    hostCatalogs: null,
+    newHostCatalog: null,
+    hostCatalog: null
+  };
+
   hooks.beforeEach(function () {
-    this.server.create('org');
+    // 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.hostCatalog = this.server.create('host-catalog', {
+      scope: {
+        id: instances.scopes.project.id,
+        type: instances.scopes.project.type
+      }
+    });
+
+    // Generate route URLs for resources
+    urls.orgScope = `/scopes/${instances.scopes.org.id}`;
+    urls.projects = `${urls.orgScope}/projects`;
+    urls.project = `${urls.projects}/${instances.hostCatalog.scope.id}`;
+    urls.hostCatalogs = `${urls.project}/host-catalogs`;
+    urls.newHostCatalog = `${urls.hostCatalogs}/new`;
+    urls.hostCatalog = `${urls.hostCatalogs}/${instances.hostCatalog.id}`;
   });
 
   test('visiting host catalogs', async function (assert) {
     assert.expect(1);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    await visit('/orgs/1/projects/1/host-catalogs');
+    authenticateSession();
+    await visit(urls.hostCatalogs);
     await a11yAudit();
-    assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs');
+    assert.equal(currentURL(), urls.hostCatalogs);
   });
 
   test('can navigate to host catalog form', async function(assert) {
     assert.expect(1);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    await visit('/orgs/1/projects/1/host-catalogs');
-    await click('main .rose-table-cell:first-child a');
+    authenticateSession({});
+    await visit(urls.hostCatalogs);
+    await click('main tbody .rose-table-cell:nth-child(2) a');
     await a11yAudit();
-    assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs/1');
+    assert.equal(currentURL(), urls.hostCatalog);
   });
 
   test('can delete host catalog', async function(assert) {
     assert.expect(2);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    assert.equal(this.server.db.hostCatalogs.length, 1);
-    await visit('/orgs/1/projects/1/host-catalogs/1');
+    const hostCatalogsCount = this.server.db.hostCatalogs.length;
+    authenticateSession({});
+    await visit(urls.hostCatalog);
+    assert.equal(currentURL(), urls.hostCatalog);
     await click('.rose-button-warning');
-    assert.equal(this.server.db.hostCatalogs.length, 0);
+    assert.equal(this.server.db.hostCatalogs.length, hostCatalogsCount - 1);
   });
 
   test('can update host catalog and save changes', async function(assert) {
     assert.expect(1);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    await visit('/orgs/1/projects/1/host-catalogs/1');
+    authenticateSession({});
+    await visit(urls.hostCatalog);
     await fillIn('[name="name"]', 'Test Name');
     await click('form [type="submit"]:not(:disabled)');
     assert.equal(this.server.db.hostCatalogs[0].name, 'Test Name');
@@ -54,39 +94,36 @@ module('Acceptance | host catalogs', function(hooks) {
 
   test('can update host catalog and cancel changes', async function(assert) {
     assert.expect(1);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    await visit('/orgs/1/projects/1/host-catalogs/1');
+    authenticateSession({});
+    await visit(urls.hostCatalog);
     await fillIn('[name="name"]', 'Test Name');
     await click('form button:not([type="submit"])');
     assert.notEqual(this.server.db.hostCatalogs[0].name, 'Test Name');
   });
 
   test('can create host catalog and save changes', async function(assert) {
-    assert.expect(2);
-    this.server.createList('project', 1);
-    await visit('/orgs/1/projects/1/host-catalogs/new');
+    assert.expect(1);
+    const hostCatalogsCount = this.server.db.hostCatalogs.length;
+    authenticateSession({});
+    await visit(urls.newHostCatalog);
     await fillIn('[name="name"]', 'Test Name');
     await click('form [type="submit"]:not(:disabled)');
-    assert.equal(this.server.db.hostCatalogs.length, 1);
-    assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs/1');
+    assert.equal(this.server.db.hostCatalogs.length, hostCatalogsCount + 1);
   });
 
   test('can create host catalog and cancel changes', async function(assert) {
-    assert.expect(2);
-    this.server.createList('project', 1);
-    await visit('/orgs/1/projects/1/host-catalogs/new');
+    assert.expect(1);
+    const hostCatalogsCount = this.server.db.hostCatalogs.length;
+    authenticateSession({});
+    await visit(urls.newHostCatalog);
     await fillIn('[name="name"]', 'Test Name');
     await click('form button:not([type="submit"])');
-    assert.equal(this.server.db.hostCatalogs.length, 0);
-    assert.equal(currentURL(), '/orgs/1/projects/1/host-catalogs');
+    assert.equal(this.server.db.hostCatalogs.length, hostCatalogsCount);
   });
 
   test('errors are displayed when save host catalog fails', async function (assert) {
     assert.expect(1);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    this.server.patch('/orgs/:org_id/projects/:project_id/host-catalogs/:id', () => {
+    this.server.patch('/scopes/:scope_id/host-catalogs/:id', () => {
       return new Response(
         490,
         {},
@@ -97,7 +134,8 @@ module('Acceptance | host catalogs', function(hooks) {
         }
       );
     });
-    await visit('/orgs/1/projects/1/host-catalogs/1');
+    authenticateSession({});
+    await visit(urls.hostCatalog);
     await fillIn('[name="name"]', 'random string');
     await click('form [type="submit"]');
     await a11yAudit();
@@ -110,9 +148,7 @@ module('Acceptance | host catalogs', function(hooks) {
 
   test('errors are displayed when delete host catalog fails', async function (assert) {
     assert.expect(1);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    this.server.del('/orgs/:org_id/projects/:project_id/host-catalogs/:id', () => {
+    this.server.del('/scopes/:scope_id/host-catalogs/:id', () => {
       return new Response(
         490,
         {},
@@ -123,7 +159,8 @@ module('Acceptance | host catalogs', function(hooks) {
         }
       );
     });
-    await visit('/orgs/1/projects/1/host-catalogs/1');
+    authenticateSession({});
+    await visit(urls.hostCatalog);
     await click('.rose-button-warning');
     await a11yAudit();
     assert.ok(
@@ -135,7 +172,7 @@ module('Acceptance | host catalogs', function(hooks) {
 
   test('saving a new host catalog with invalid fields displays error messages', async function (assert) {
     assert.expect(2);
-    this.server.post('/orgs/:org_id/projects/:project_id/host-catalogs', () => {
+    this.server.post('/scopes/:scope_id/host-catalogs', () => {
       return new Response(
         400,
         {},
@@ -154,8 +191,8 @@ module('Acceptance | host catalogs', function(hooks) {
         }
       );
     });
-    this.server.createList('project', 1);
-    await visit('/orgs/1/projects/1/host-catalogs/new');
+    authenticateSession({});
+    await visit(urls.newHostCatalog);
     await fillIn('[name="name"]', 'random string');
     await click('form [type="submit"]');
     await a11yAudit();
@@ -173,9 +210,7 @@ module('Acceptance | host catalogs', function(hooks) {
 
   test('saving an existing host catalog with invalid fields displays error messages', async function (assert) {
     assert.expect(2);
-    this.server.createList('project', 1);
-    this.server.createList('host-catalog', 1);
-    this.server.patch('/orgs/:org_id/projects/:project_id/host-catalogs/:id', () => {
+    this.server.patch('/scopes/:scope_id/host-catalogs/:id', () => {
       return new Response(
         400,
         {},
@@ -194,7 +229,8 @@ module('Acceptance | host catalogs', function(hooks) {
         }
       );
     });
-    await visit('/orgs/1/projects/1/host-catalogs/1');
+    authenticateSession({});
+    await visit(urls.hostCatalog);
     await fillIn('[name="name"]', 'random string');
     await click('form [type="submit"]');
     await a11yAudit();

From deca73ba5f322671537ce60db1944704c200def0 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 29 Jul 2020 13:13:43 -0400
Subject: [PATCH 8/8] chore: generate multiple org scopes in mocks and add
 import comment

---
 ui/core/mirage/scenarios/default.js            | 4 ++--
 ui/core/tests/acceptance/host-catalogs-test.js | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/core/mirage/scenarios/default.js b/ui/core/mirage/scenarios/default.js
index f5727e195..7bc409465 100644
--- a/ui/core/mirage/scenarios/default.js
+++ b/ui/core/mirage/scenarios/default.js
@@ -3,10 +3,10 @@ export default function(server) {
   // Scope resources
 
   const globalScope = server.create('scope', { id: 'global' });  // creates a global scope
-  const orgScope = server.create('scope', {
+  const orgScope = server.createList('scope', 3, {
     type: 'org',
     scope: { id: globalScope.id, type: globalScope.type }
-  }, 'withChildren');
+  }, 'withChildren')[0];
   const scope = { id: orgScope.id, type: orgScope.type };
 
   // Auth
diff --git a/ui/core/tests/acceptance/host-catalogs-test.js b/ui/core/tests/acceptance/host-catalogs-test.js
index 682f9c163..96b49cd8c 100644
--- a/ui/core/tests/acceptance/host-catalogs-test.js
+++ b/ui/core/tests/acceptance/host-catalogs-test.js
@@ -5,9 +5,10 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { Response } from 'miragejs';
 import {
-//  currentSession,
   authenticateSession,
-//  invalidateSession,
+  // These are left here intentionally for future reference.
+  //currentSession,
+  //invalidateSession,
 } from 'ember-simple-auth/test-support';
 
 module('Acceptance | host catalogs', function(hooks) {