Refactor deprecate rendertemplate (#1382)

Refactor deprecate rendertemplate for host-catalogs

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog.js

@@ -12,33 +12,4 @@ export default class ScopesScopeHostCatalogsHostCatalogRoute extends Route {
   async model({ host_catalog_id }) {
     return this.store.findRecord('host-catalog', host_catalog_id);
   }
-
-  /**
-   * Renders the host-catalog specific templates for header, navigation,
-   * and actions page sections.
-   * @override
-   * @param {object} controller
-   * @param {object} model
-   */
-  renderTemplate(controller, model) {
-    super.renderTemplate(...arguments);
-
-    this.render('scopes/scope/host-catalogs/host-catalog/-header', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'header',
-      model: model,
-    });
-
-    this.render('scopes/scope/host-catalogs/host-catalog/-navigation', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'navigation',
-      model: model,
-    });
-
-    this.render('scopes/scope/host-catalogs/host-catalog/-actions', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'actions',
-      model: model,
-    });
-  }
 }

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets.js

@@ -19,18 +19,24 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsRoute extends Rou
    * Loads all host-sets under the current host catalog and it's parent scope.
    * @return {Promise{[HostSetModel]}}
    */
-  model() {
+  async model() {
     const hostCatalog = this.modelFor(
       'scopes.scope.host-catalogs.host-catalog'
     );
-
     const { id: host_catalog_id } = hostCatalog;
+    let hostSets
+
     if (
       this.can.can('list model', hostCatalog, {
         collection: 'host-sets',
       })
     ) {
-      return this.store.query('host-set', { host_catalog_id });
+      hostSets = await this.store.query('host-set', { host_catalog_id });
+    }
+
+    return {
+      hostCatalog,
+      hostSets
     }
   }
 

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set.js

@@ -14,46 +14,9 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetRoute exte
     return this.store.findRecord('host-set', host_set_id, { reload: true });
   }
 
-  /**
-   * Renders the host-set 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/host-catalogs/host-catalog/host-sets/host-set/-header',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'header',
-        model: model,
-      }
-    );
-
-    this.render(
-      'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/-navigation',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'navigation',
-        model: model,
-      }
-    );
-
-    this.render(
-      'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/-actions',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'actions',
-        model: model,
-      }
-    );
-  }
-
   /**
    * Adds a string item to array `property` on the passed `filter`.
-   
+
    * @param {hostSetModel} hostSet
    * @param {string} property
    * @param {string} value

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts.js

@@ -37,33 +37,6 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetAddHostsRo
     });
   }
 
-  /**
-   * Renders the add-hosts-specific header template.
-   * Empties the actions and navigation outlets and renders a custom empty header.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts/-header',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'header',
-      }
-    );
-
-    this.render('-empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'navigation',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'actions',
-    });
-  }
-
   // =actions
 
   /**

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host.js

@@ -8,7 +8,6 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetCreateAndA
   // =services
 
   @service intl;
-
   @service router;
 
   // =methods
@@ -28,33 +27,6 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetCreateAndA
     });
   }
 
-  /**
-   * Renders the create host-specific header template.
-   * Empties the actions and navigation outlets and renders a custom empty header.
-   * @override
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-
-    this.render(
-      'scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host/-header',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'header',
-      }
-    );
-
-    this.render('-empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'navigation',
-    });
-
-    this.render('-empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'actions',
-    });
-  }
-
   // =actions
 
   /**

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/new.js

@@ -21,37 +21,6 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsNewRoute extends
     });
   }
 
-  /**
-   * Renders new host-set 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/host-catalogs/host-catalog/host-sets/new/-header',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'header',
-        model: model,
-      }
-    );
-
-    this.render('_empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'navigation',
-      model: model,
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'actions',
-      model: model,
-    });
-  }
-
   /**
    * Adds a string item to array `property` on the passed `filter`.
 

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts.js

@@ -19,17 +19,24 @@ export default class ScopesScopeHostCatalogsHostCatalogHostsRoute extends Route
    * Loads all hosts under the current host catalog and it's parent scope.
    * @return {Promise{[HostModel]}}
    */
-  model() {
+  async model() {
     const hostCatalog = this.modelFor(
       'scopes.scope.host-catalogs.host-catalog'
     );
     const { id: host_catalog_id } = hostCatalog;
+    let hosts;
+
     if (
       this.can.can('list model', hostCatalog, {
         collection: 'hosts',
       })
     ) {
-      return this.store.query('host', { host_catalog_id });
+      hosts = await this.store.query('host', { host_catalog_id });
+    }
+
+    return {
+      hostCatalog,
+      hosts,
     }
   }
 

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts/host.js

@@ -12,35 +12,4 @@ export default class ScopesScopeHostCatalogsHostCatalogHostsHostRoute extends Ro
   async model({ host_id }) {
     return this.store.findRecord('host', host_id, { reload: true });
   }
-
-  /**
-   * Renders the 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/host-catalogs/host-catalog/hosts/host/-header', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'header',
-      model: model,
-    });
-
-    this.render(
-      'scopes/scope/host-catalogs/host-catalog/hosts/host/-navigation',
-      {
-        into: 'scopes/scope/host-catalogs/host-catalog',
-        outlet: 'navigation',
-        model: model,
-      }
-    );
-
-    this.render('scopes/scope/host-catalogs/host-catalog/hosts/host/-actions', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'actions',
-      model: model,
-    });
-  }
 }

ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts/new.js

@@ -16,33 +16,4 @@ export default class ScopesScopeHostCatalogsHostCatalogHostsNewRoute extends Rou
       host_catalog_id,
     });
   }
-
-  /**
-   * 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/host-catalogs/host-catalog/hosts/new/-header', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'header',
-      model: model,
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'navigation',
-      model: model,
-    });
-
-    this.render('_empty', {
-      into: 'scopes/scope/host-catalogs/host-catalog',
-      outlet: 'actions',
-      model: model,
-    });
-  }
 }

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog.hbs

@@ -1,25 +1,3 @@
 {{page-title @model.displayName}}
 
-<Rose::Layout::Page as |page|>
-
-  <page.breadcrumbs>
-    <BreadCrumbs />
-  </page.breadcrumbs>
-
-  <page.header>
-    {{outlet 'header'}}
-  </page.header>
-
-  <page.actions>
-    {{outlet 'actions'}}
-  </page.actions>
-
-  <page.navigation>
-    {{outlet 'navigation'}}
-  </page.navigation>
-
-  <page.body>
-    {{outlet}}
-  </page.body>
-
-</Rose::Layout::Page>
+{{outlet}}

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts.hbs

@@ -1,8 +1,20 @@
 {{page-title (t 'resources.host-set.actions.add-hosts')}}
 
-<Form::HostSet::AddHosts
-  @model={{@model.hostSet}}
-  @hosts={{@model.hosts}}
-  @submit={{route-action 'addHosts' @model.hostSet}}
-  @cancel={{route-action 'cancel'}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::AddHosts::Header />
+  </page.header>
+
+  <page.body>
+    <Form::HostSet::AddHosts
+      @model={{@model.hostSet}}
+      @hosts={{@model.hosts}}
+      @submit={{route-action 'addHosts' @model.hostSet}}
+      @cancel={{route-action 'cancel'}}
+    />
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host.hbs

@@ -1,7 +1,21 @@
 {{page-title (t 'resources.host-set.actions.create-and-add-host')}}
 
-<Form::Host
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::CreateAndAddHost::Header
+      @model={{@model}}
+    />
+  </page.header>
+
+  <page.body>
+    <Form::Host
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs

@@ -1,91 +1,113 @@
-{{#if @model.hosts}}
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        {{#if @model.isStatic}}
-          <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
-        {{/if}}
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model.hosts as |host|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{#if host.isStatic}}
-              <LinkTo
-                @route='scopes.scope.host-catalogs.host-catalog.hosts.host'
-                @model={{host.id}}
-              >
-                {{host.displayName}}
-              </LinkTo>
-            {{else}}
-              {{! Link to a different subroute for dynamic/plugin hosts }}
-              <LinkTo
-                @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts.host'
-                @model={{host.id}}
-              >
-                {{host.displayName}}
-              </LinkTo>
+  <page.header>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Header
+      @model={{@model.hostSet}}
+    />
+  </page.header>
+
+  <page.actions>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Actions
+      @model={{@model.hostSet}}
+    />
+  </page.actions>
+
+  <page.navigation>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Navigation
+      @model={{@model}}
+    />
+  </page.navigation>
+
+  <page.body>
+    {{#if @model.hosts}}
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+            {{#if @model.isStatic}}
+              <row.headerCell>{{t 'titles.actions'}}</row.headerCell>
             {{/if}}
-            <p>{{host.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <HostCatalogTypeBadge @model={{host}} />
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{host.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{host.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            {{#if (can 'removeHosts hostSet' @model.hostSet)}}
-              <Rose::Dropdown
-                @icon='flight-icons/svg/more-horizontal-16'
-                @iconOnly={{true}}
-                @showCaret={{false}}
-                @dropdownRight={{true}}
-                @text={{t 'actions.manage'}}
-                as |dropdown|
-              >
-                <dropdown.button
-                  @style='danger'
-                  {{on 'click' (route-action 'removeHost' @model.hostSet host)}}
+          </header.row>
+        </table.header>
+
+        <table.body as |body|>
+          {{#each @model.hosts as |host|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{#if host.isStatic}}
+                  <LinkTo
+                    @route='scopes.scope.host-catalogs.host-catalog.hosts.host'
+                    @model={{host.id}}
+                  >
+                    {{host.displayName}}
+                  </LinkTo>
+                {{else}}
+                  {{! Link to a different subroute for dynamic/plugin hosts }}
+                  <LinkTo
+                    @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts.host'
+                    @model={{host.id}}
+                  >
+                    {{host.displayName}}
+                  </LinkTo>
+                {{/if}}
+                <p>{{host.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <HostCatalogTypeBadge @model={{host}} />
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{host.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
                 >
-                  {{t 'actions.remove'}}
-                </dropdown.button>
-              </Rose::Dropdown>
-            {{/if}}
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+                  <code>{{host.id}}</code>
+                </Copyable>
+              </row.cell>
+              <row.cell>
+                {{#if (can 'removeHosts hostSet' @model.hostSet)}}
+                  <Rose::Dropdown
+                    @icon='flight-icons/svg/more-horizontal-16'
+                    @iconOnly={{true}}
+                    @showCaret={{false}}
+                    @dropdownRight={{true}}
+                    @text={{t 'actions.manage'}}
+                    as |dropdown|
+                  >
+                    <dropdown.button
+                      @style='danger'
+                      {{on
+                        'click'
+                        (route-action 'removeHost' @model.hostSet host)
+                      }}
+                    >
+                      {{t 'actions.remove'}}
+                    </dropdown.button>
+                  </Rose::Dropdown>
+                {{/if}}
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
+    {{/if}}
 
-{{/if}}
-
-{{#unless @model.hosts}}
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.host-set.host.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.host-set.host.messages.none.description'}}
-      </message.description>
-      {{!--
-      <message.link @route="scopes.scope.host-catalogs.host-catalog.host-sets.host-set.create-and-add-host">
-        <Rose::Icon @name="flight-icons/svg/plus-circle-16" />
-        {{t "resources.host-set.actions.create-and-add-host"}}
-      </message.link>
-      --}}
-    </Rose::Message>
-  </Rose::Layout::Centered>
-{{/unless}}
+    {{#unless @model.hosts}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.host-set.host.messages.none.title'}}
+          as |message|
+        >
+          <message.description>
+            {{t 'resources.host-set.host.messages.none.description'}}
+          </message.description>
+        </Rose::Message>
+      </Rose::Layout::Centered>
+    {{/unless}}
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/index.hbs

@@ -1,7 +1,29 @@
-<Form::HostSet
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-  @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
-  @addStringItem={{route-action 'addStringItem' @model}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Header @model={{@model}} />
+  </page.header>
+
+  <page.actions>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.navigation>
+    <HostCatalogs::HostCatalog::HostSets::HostSet::Navigation
+      @model={{@model}}
+    />
+  </page.navigation>
+
+  <page.body>
+    <Form::HostSet
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+      @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
+      @addStringItem={{route-action 'addStringItem' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs

@@ -1,83 +1,104 @@
-{{#if @model}}
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model as |hostSet|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{#if (can 'read model' hostSet)}}
-              <LinkTo
-                @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set'
-                @model={{hostSet.id}}
-              >
-                {{hostSet.displayName}}
-              </LinkTo>
-            {{else}}
-              {{hostSet.displayName}}
-            {{/if}}
-            <p>{{hostSet.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <HostCatalogTypeBadge @model={{hostSet}} />
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{hostSet.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{hostSet.id}}</code>
-            </Copyable>
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+  <page.header>
+    <HostCatalogs::HostCatalog::Header @model={{@model.hostCatalog}} />
+  </page.header>
 
-{{else}}
+  <page.actions>
+    <HostCatalogs::HostCatalog::Actions @model={{@model.hostCatalog}} />
+  </page.actions>
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.host-set.messages.welcome.title'}}
-      as |message|
-    >
-      <message.description>
+  <page.navigation>
+    <HostCatalogs::HostCatalog::Navigation @model={{@model.hostCatalog}} />
+  </page.navigation>
 
-        {{#if (can 'list model' this.hostCatalog collection='host-sets')}}
-          {{! can list (at least):  show default welcome message}}
-          {{t 'resources.host-set.description'}}
+  <page.body>
+    {{#if @model.hostSets}}
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+          </header.row>
+        </table.header>
 
-        {{else if (can 'create model' this.hostCatalog collection='host-sets')}}
-          {{! can create (only):  show create-but-not-list welcome message}}
-          {{t
-            'descriptions.create-but-not-list'
-            resource=(t 'resources.host-set.title_plural')
-          }}
-        {{else}}
-          {{! can neither list nor create }}
-          {{t
-            'descriptions.neither-list-nor-create'
-            resource=(t 'resources.host-set.title_plural')
-          }}
-        {{/if}}
-      </message.description>
+        <table.body as |body|>
+          {{#each @model.hostSets as |hostSet|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{#if (can 'read model' hostSet)}}
+                  <LinkTo
+                    @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set'
+                    @model={{hostSet.id}}
+                  >
+                    {{hostSet.displayName}}
+                  </LinkTo>
+                {{else}}
+                  {{hostSet.displayName}}
+                {{/if}}
+                <p>{{hostSet.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <HostCatalogTypeBadge @model={{hostSet}} />
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{hostSet.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{hostSet.id}}</code>
+                </Copyable>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
 
-      {{#if (can 'create model' this.hostCatalog collection='host-sets')}}
-        <message.link
-          @route='scopes.scope.host-catalogs.host-catalog.host-sets.new'
+    {{else}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.host-set.messages.welcome.title'}}
+          as |message|
         >
-          <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-          {{t 'titles.new'}}
-        </message.link>
-      {{/if}}
-    </Rose::Message>
-  </Rose::Layout::Centered>
+          <message.description>
 
-{{/if}}
+            {{#if (can 'list model' this.hostCatalog collection='host-sets')}}
+              {{! can list (at least):  show default welcome message}}
+              {{t 'resources.host-set.description'}}
+
+            {{else if (can
+              'create model' this.hostCatalog collection='host-sets'
+            )}}
+              {{! can create (only):  show create-but-not-list welcome message}}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.host-set.title_plural')
+              }}
+            {{else}}
+              {{! can neither list nor create }}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.host-set.title_plural')
+              }}
+            {{/if}}
+          </message.description>
+
+          {{#if (can 'create model' this.hostCatalog collection='host-sets')}}
+            <message.link
+              @route='scopes.scope.host-catalogs.host-catalog.host-sets.new'
+            >
+              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+              {{t 'titles.new'}}
+            </message.link>
+          {{/if}}
+        </Rose::Message>
+      </Rose::Layout::Centered>
+
+    {{/if}}
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/new.hbs

@@ -1,9 +1,21 @@
 {{page-title (t 'titles.new')}}
 
-<Form::HostSet
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-  @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
-  @addStringItem={{route-action 'addStringItem' @model}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::HostSets::New::Header @model={{@model}} />
+  </page.header>
+
+  <page.body>
+    <Form::HostSet
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+      @removeItemByIndex={{route-action 'removeItemByIndex' @model}}
+      @addStringItem={{route-action 'addStringItem' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/host/index.hbs

@@ -1,5 +1,26 @@
-<Form::Host
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::Hosts::Host::Header @model={{@model}} />
+  </page.header>
+
+  <page.actions>
+    <HostCatalogs::HostCatalog::Hosts::Host::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.navigation>
+    <HostCatalogs::HostCatalog::Hosts::Host::Navigation @model={{@model}} />
+  </page.navigation>
+
+  <page.body>
+    <Form::Host
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs

@@ -1,89 +1,105 @@
-{{#if @model}}
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
 
-  <Rose::Table as |table|>
-    <table.header as |header|>
-      <header.row as |row|>
-        <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
-        <row.headerCell>{{t 'form.address.label'}}</row.headerCell>
-      </header.row>
-    </table.header>
-    <table.body as |body|>
-      {{#each @model as |host|}}
-        <body.row as |row|>
-          <row.headerCell>
-            {{#if (can 'read model' host)}}
-              <LinkTo
-                @route='scopes.scope.host-catalogs.host-catalog.hosts.host'
-                @model={{host.id}}
-              >
+  <page.header>
+    <HostCatalogs::HostCatalog::Header @model={{@model.hostCatalog}} />
+  </page.header>
 
-                {{host.displayName}}
-              </LinkTo>
-            {{else}}
-              {{host.displayName}}
-            {{/if}}
-            <p>{{host.description}}</p>
-          </row.headerCell>
-          <row.cell>
-            <HostCatalogTypeBadge @model={{host}} />
-          </row.cell>
-          <row.cell>
-            <Copyable
-              @text={{host.id}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{host.id}}</code>
-            </Copyable>
-          </row.cell>
-          <row.cell>
-            <code>{{host.address}}</code>
-          </row.cell>
-        </body.row>
-      {{/each}}
-    </table.body>
-  </Rose::Table>
+  <page.actions>
+    <HostCatalogs::HostCatalog::Actions @model={{@model.hostCatalog}} />
+  </page.actions>
 
-{{else}}
+  <page.navigation>
+    <HostCatalogs::HostCatalog::Navigation @model={{@model.hostCatalog}} />
+  </page.navigation>
 
-  <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.host.messages.welcome.title'}}
-      as |message|
-    >
-      <message.description>
+  <page.body>
+    {{#if @model.hosts}}
+      <Rose::Table as |table|>
+        <table.header as |header|>
+          <header.row as |row|>
+            <row.headerCell>{{t 'form.name.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.type.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.id.label'}}</row.headerCell>
+            <row.headerCell>{{t 'form.address.label'}}</row.headerCell>
+          </header.row>
+        </table.header>
 
-        {{#if (can 'list model' this.hostCatalog collection='hosts')}}
-          {{! can list (at least):  show default welcome message}}
-          {{t 'resources.host.description'}}
+        <table.body as |body|>
+          {{#each @model.hosts as |host|}}
+            <body.row as |row|>
+              <row.headerCell>
+                {{#if (can 'read model' host)}}
+                  <LinkTo
+                    @route='scopes.scope.host-catalogs.host-catalog.hosts.host'
+                    @model={{host.id}}
+                  >
+                    {{host.displayName}}
+                  </LinkTo>
+                {{else}}
+                  {{host.displayName}}
+                {{/if}}
+                <p>{{host.description}}</p>
+              </row.headerCell>
+              <row.cell>
+                <HostCatalogTypeBadge @model={{host}} />
+              </row.cell>
+              <row.cell>
+                <Copyable
+                  @text={{host.id}}
+                  @buttonText={{t 'actions.copy-to-clipboard'}}
+                  @acknowledgeText={{t 'states.copied'}}
+                >
+                  <code>{{host.id}}</code>
+                </Copyable>
+              </row.cell>
 
-        {{else if (can 'create model' this.hostCatalog collection='hosts')}}
-          {{! can create (only):  show create-but-not-list welcome message}}
-          {{t
-            'descriptions.create-but-not-list'
-            resource=(t 'resources.host.title_plural')
-          }}
-        {{else}}
-          {{! can neither list nor create }}
-          {{t
-            'descriptions.neither-list-nor-create'
-            resource=(t 'resources.host.title_plural')
-          }}
-        {{/if}}
-      </message.description>
+              <row.cell>
+                <code>{{host.address}}</code>
+              </row.cell>
+            </body.row>
+          {{/each}}
+        </table.body>
+      </Rose::Table>
 
-      {{#if (can 'create model' this.hostCatalog collection='hosts')}}
-
-        <message.link
-          @route='scopes.scope.host-catalogs.host-catalog.hosts.new'
+    {{else}}
+      <Rose::Layout::Centered>
+        <Rose::Message
+          @title={{t 'resources.host.messages.welcome.title'}}
+          as |message|
         >
-          <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-          {{t 'titles.new'}}
-        </message.link>
-      {{/if}}
-    </Rose::Message>
-  </Rose::Layout::Centered>
+          <message.description>
+            {{#if (can 'list model' this.hostCatalog collection='hosts')}}
+              {{! can list (at least):  show default welcome message}}
+              {{t 'resources.host.description'}}
 
-{{/if}}
+            {{else if (can 'create model' this.hostCatalog collection='hosts')}}
+              {{! can create (only):  show create-but-not-list welcome message}}
+              {{t
+                'descriptions.create-but-not-list'
+                resource=(t 'resources.host.title_plural')
+              }}
+            {{else}}
+              {{! can neither list nor create }}
+              {{t
+                'descriptions.neither-list-nor-create'
+                resource=(t 'resources.host.title_plural')
+              }}
+            {{/if}}
+          </message.description>
+
+          {{#if (can 'create model' this.hostCatalog collection='hosts')}}
+            <message.link
+              @route='scopes.scope.host-catalogs.host-catalog.hosts.new'
+            >
+              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
+              {{t 'titles.new'}}
+            </message.link>
+          {{/if}}
+        </Rose::Message>
+      </Rose::Layout::Centered>
+    {{/if}}
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/new.hbs

@@ -1,7 +1,19 @@
 {{page-title (t 'titles.new')}}
 
-<Form::Host
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::Hosts::New::Header @model={{@model}} />
+  </page.header>
+
+  <page.body>
+    <Form::Host
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/index.hbs

@@ -1,5 +1,25 @@
-<Form::HostCatalog
-  @model={{@model}}
-  @submit={{route-action 'save' @model}}
-  @cancel={{route-action 'cancel' @model}}
-/>
+<Rose::Layout::Page as |page|>
+  <page.breadcrumbs>
+    <BreadCrumbs />
+  </page.breadcrumbs>
+
+  <page.header>
+    <HostCatalogs::HostCatalog::Header @model={{@model}} />
+  </page.header>
+
+  <page.navigation>
+    <HostCatalogs::HostCatalog::Navigation @model={{@model}} />
+  </page.navigation>
+
+  <page.actions>
+    <HostCatalogs::HostCatalog::Actions @model={{@model}} />
+  </page.actions>
+
+  <page.body>
+    <Form::HostCatalog
+      @model={{@model}}
+      @submit={{route-action 'save' @model}}
+      @cancel={{route-action 'cancel' @model}}
+    />
+  </page.body>
+</Rose::Layout::Page>