Merge pull request #352 from hashicorp/feature-scope-nav

refactor: 💡 move org scope nav to separate template

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

@@ -35,13 +35,14 @@ export default class ScopesScopeRoute extends Route {
   }
 
   /**
-   * Set scope in application controller
+   * Adds the set of all org scopes to the controller, which is used by the
+   * scope navigation template.
+   * @param {Controller} controller
    */
-  afterModel() {
+  setupController(controller) {
+    super.setupController(...arguments);
     const orgScopes = this.modelFor('scopes').filterBy('isOrg', true);
-    this.controllerFor('application').set('orgScopes', orgScopes);
-    const scope = this.modelFor('scopes.scope');
-    this.controllerFor('application').set('scope', scope);
+    controller.setProperties({ orgScopes });
   }
 
   /**
@@ -53,6 +54,12 @@ export default class ScopesScopeRoute extends Route {
   renderTemplate(controller, model) {
     super.renderTemplate(...arguments);
 
+    this.render('scopes/scope/-header-nav', {
+      into: 'application',
+      outlet: 'header-nav',
+      model: model,
+    });
+
     this.render('scopes/scope/-sidebar', {
       into: 'scopes/scope',
       outlet: 'sidebar',

ui/core/app/templates/application.hbs

@@ -8,28 +8,10 @@
       <header.brand @logo="logo-app" @text={{app-name}} />
 
       {{#if this.session.isAuthenticated}}
-        <header.nav as |nav|>
-          <nav.dropdown
-            @text={{this.scope.displayName}}
-            @icon="app-icons/org" as |dropdown|
-          >
-            {{#if this.session.data.authenticated.isGlobal}}
-              <dropdown.link @route="scopes.scope" @model="global">
-                {{t "titles.global"}}
-              </dropdown.link>
-              {{#each this.orgScopes as |scope|}}
-                <dropdown.link @route="scopes.scope" @model={{scope.id}}>
-                  {{scope.displayName}}
-                </dropdown.link>
-              {{/each}}
-            {{else}}
-              {{#if this.scope}}
-                <dropdown.link @route="scopes.scope" @model={{this.scope.id}}>
-                  {{this.scope.displayName}}
-                </dropdown.link>
-              {{/if}}
-            {{/if}}
-          </nav.dropdown>
+        <header.nav>
+
+          {{outlet "header-nav"}}
+
         </header.nav>
 
         <header.utilities as |utilities|>

ui/core/app/templates/scopes/scope/-header-nav.hbs

@@ -0,0 +1,20 @@
+<Rose::Dropdown
+  @text={{this.model.displayName}}
+  @icon="app-icons/org" as |dropdown|
+>
+  {{#if this.session.data.authenticated.isGlobal}}
+    <dropdown.link @route="scopes.scope" @model="global">
+      {{t "titles.global"}}
+    </dropdown.link>
+    <dropdown.separator />
+    {{#each this.orgScopes as |scope|}}
+      <dropdown.link @route="scopes.scope" @model={{scope.id}}>
+        {{scope.displayName}}
+      </dropdown.link>
+    {{/each}}
+  {{else}}
+    <dropdown.link @route="scopes.scope" @model={{this.model.id}}>
+      {{this.model.displayName}}
+    </dropdown.link>
+  {{/if}}
+</Rose::Dropdown>