refactor: 💡 Deprecate renderTemplate in header-nav (#1385)

Deprecate the usage of renderTemplate in the application header-nav

addons/core/addon/services/scope.js

@@ -3,7 +3,7 @@ import { tracked } from '@glimmer/tracking';
 
 /**
  * This simple non-functional service is used to retain references to
- * the current active scope(s).
+ * lists of scopes (orgs and projects) and selected scopes (orgs and projects).
  */
 export default class ScopeService extends Service {
   // =attributes
@@ -13,8 +13,18 @@ export default class ScopeService extends Service {
    */
   @tracked org;
 
+  /**
+   * @type {ScopeModel}
+   */
+  @tracked orgsList;
+
   /**
    * @type {ScopeModel}
    */
   @tracked project;
+
+  /**
+   * @type {ScopeModel}
+   */
+  @tracked projectsList;
 }

addons/core/tests/unit/services/scope-test.js

@@ -10,9 +10,21 @@ module('Unit | Service | scope', function (hooks) {
     assert.ok(service.org, 'Service contains org scope');
   });
 
+  test('it can contain orgs list scope', function (assert) {
+    let service = this.owner.lookup('service:scope');
+    service.orgsList = [];
+    assert.ok(service.orgsList, 'Service contains orgs list scope');
+  });
+
   test('it can contain project scope', function (assert) {
     let service = this.owner.lookup('service:scope');
     service.project = {};
     assert.ok(service.project, 'Service contains project scope');
   });
+
+  test('it can contain projects list scope', function (assert) {
+    let service = this.owner.lookup('service:scope');
+    service.projectsList = [];
+    assert.ok(service.projectsList, 'Service contains projects list scope');
+  });
 });

ui/admin/app/components/header-nav/index.hbs

@@ -1,7 +1,7 @@
 <Rose::Dropdown
-  @text={{this.scopes.selectedOrg.displayName}}
+  @text={{this.scope.org.displayName}}
   @icon={{if
-    this.scopes.selectedOrg.isGlobal
+    this.scope.org.isGlobal
     'flight-icons/svg/globe-16'
     'flight-icons/svg/org-16'
   }}
@@ -13,22 +13,22 @@
     </dropdown.link>
     <dropdown.separator />
   {{/if}}
-  {{#each this.scopes.orgs as |scope|}}
-    <dropdown.link @route='scopes.scope' @model={{scope.id}}>
-      {{scope.displayName}}
+  {{#each this.scope.orgsList as |org|}}
+    <dropdown.link @route='scopes.scope' @model={{org.id}}>
+      {{org.displayName}}
     </dropdown.link>
   {{/each}}
 </Rose::Dropdown>
 
-{{#if this.scopes.selectedProject}}
+{{#if this.scope.project}}
   <Rose::Dropdown
-    @text={{this.scopes.selectedProject.displayName}}
+    @text={{this.scope.project.displayName}}
     @icon='flight-icons/svg/grid-16'
     as |dropdown|
   >
-    {{#each this.scopes.projects as |scope|}}
-      <dropdown.link @route='scopes.scope' @model={{scope.id}}>
-        {{scope.displayName}}
+    {{#each this.scope.projectsList as |project|}}
+      <dropdown.link @route='scopes.scope' @model={{project.id}}>
+        {{project.displayName}}
       </dropdown.link>
     {{/each}}
   </Rose::Dropdown>

ui/admin/app/components/header-nav/index.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class HeaderNavComponent extends Component {
+  // =services
+
+  @service session;
+  @service scope;
+}

ui/admin/app/routes/scopes/scope.js

@@ -68,6 +68,8 @@ export default class ScopesScopeRoute extends Route {
     // Update the scope service with the current scope(s);
     this.scope.org = selectedOrg;
     this.scope.project = selectedProject;
+    this.scope.orgsList = orgs;
+    this.scope.projectsList = projects;
     this.scopes = { orgs, projects, selectedOrg, selectedProject };
     // Update the controller (if exists), since setupController is only
     // called once the first time the route is activated.  It is not called
@@ -94,20 +96,6 @@ export default class ScopesScopeRoute extends Route {
     this.controller.setProperties({ scopes });
   }
 
-  /**
-   * Renders the scope-specific header template.
-   * @override
-   * @param {object} controller
-   * @param {object} model
-   */
-  renderTemplate() {
-    super.renderTemplate(...arguments);
-    this.render('scopes/scope/-header-nav', {
-      into: 'application',
-      outlet: 'header-nav',
-    });
-  }
-
   // =actions
 
   /**

ui/admin/app/templates/application.hbs

@@ -8,9 +8,7 @@
 
       {{#if this.session.isAuthenticated}}
         <header.nav>
-
-          {{outlet 'header-nav'}}
-
+          <HeaderNav />
         </header.nav>
 
         <header.utilities as |utilities|>