feat: 🎸 add org nav to header

addons/auth/addon/authenticators/password.js

@@ -64,7 +64,7 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
       case 404:
         return reject();
     }
-    return resolve(data);
+    return resolve(this.normalizeData(data));
   }
 
   /**
@@ -93,7 +93,20 @@ export default class PasswordAuthenticator extends BaseAuthenticator {
     const authEndpointURL = this.buildAuthEndpointURL(options);
     const response = await fetch(authEndpointURL, { method: 'post', body });
     const json = await response.json();
-    return response.status < 400 ? resolve(json) : reject();
+    return response.status < 400 ? resolve(this.normalizeData(json)) : reject();
+  }
+
+  /**
+   * Normalizes the auth data.  Adds convenience booleans depending on the
+   * scope within which the session is authenticated:  isGlobal, isOrg.
+   * @param {object} data
+   * @return {object}
+   */
+  normalizeData(data) {
+    // Add booleans indicated the scope type
+    data.isGlobal = (data?.scope?.type === 'global');
+    data.isOrg = (data?.scope?.type === 'org');
+    return data;
   }
 
   /**

addons/rose/addon/styles/rose/components/dropdown/_button.scss

@@ -6,8 +6,7 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  // Targeting min-width of ~200
-  min-width: (sizing.rems(m)) * 10;
+  min-width: (sizing.rems(m)) * 13;
   border: 0;
   padding: 0 sizing.rems(s);
   text-decoration: none;

addons/rose/addon/styles/rose/components/dropdown/_link.scss

@@ -6,8 +6,7 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  // Targeting min-width of ~200
-  min-width: (sizing.rems(m)) * 10;
+  min-width: (sizing.rems(m)) * 13;
   border: 0;
   padding: 0 sizing.rems(s);
   text-decoration: none;

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

@@ -38,6 +38,8 @@ export default class ScopesScopeRoute extends Route {
    * Set scope in application controller
    */
   afterModel() {
+    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);
   }

ui/core/app/styles/app.scss

@@ -67,6 +67,12 @@
     display: none;
   }
 
+  .rose-dropdown {
+    .rose-icon {
+      transform: scale(0.7);
+    }
+  }
+
   &.loading {
     &::after {
       animation: gradient 1s linear infinite;

ui/core/app/templates/application.hbs

@@ -6,16 +6,34 @@
   <layout.header>
     <Rose::Header class="{{if (is-loading) " loading"}}" as |header|>
       <header.brand @logo="logo-boundary" @text={{app-name}} />
+
       {{#if this.session.isAuthenticated}}
-        <header.nav as |nav|>
-          {{#if this.scope.isOrg}}
-            <nav.link @route="scopes.scope" @model={{this.scope}}>{{this.scope.displayName}}</nav.link>
-          {{/if}}
-        </header.nav>
+        {{#if this.scope.isOrg}}
+          <header.nav as |nav|>
+            <nav.dropdown
+              @text={{this.scope.displayName}}
+              @icon="boundary-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}}
+                <dropdown.link @route="scopes.scope" @model={{this.scope.id}}>
+                  {{this.scope.displayName}}
+                </dropdown.link>
+              {{/if}}
+            </nav.dropdown>
+          </header.nav>
+        {{/if}}
 
         <header.utilities as |utilities|>
           <utilities.dropdown
-            @text="user@example.net"
             @iconOnly={{true}}
             @icon="boundary-icons/user-profile" as |dropdown|
           >
@@ -29,7 +47,9 @@
             </dropdown.button>
           </utilities.dropdown>
         </header.utilities>
+
       {{/if}}
+
     </Rose::Header>
   </layout.header>