Merge pull request #256 from hashicorp/feature-org-nav

Feature org nav
2020-10-01 22:00:13 -04:00
commit dd11fc22d5
@@ -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;
  }

  /**
@@ -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;
@@ -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;
@@ -11,9 +11,9 @@
  margin: 10px;

  svg {
-    $logoSize: sizing.rems(xl) * 3;
+    //$logoSize: sizing.rems(xl) * 3;
    display: block;
-    width: $logoSize;
+    //width: $logoSize;
  }

  .rose-header-brand-text {
@@ -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);
  }
@@ -63,6 +63,16 @@
 .rose-header {
  position: relative;

+  .logotype {
+    display: none;
+  }
+
+  .rose-dropdown {
+    .rose-icon {
+      transform: scale(0.7);
+    }
+  }
+
  &.loading {
    &::after {
      animation: gradient 1s linear infinite;
@@ -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>

@@ -1,9 +1,33 @@
 <svg
+  width="30"
  height="30"
  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 310 67">
+  viewBox="0 0 67 67">

-  <g id="LOGOS">
+  <g class="logomark">
+    <polygon
+      fill="#f04e54"
+      points="9.89 64.1 9.89 59.28 19.9 59.28 19.9 56.3 15.05 56.3 15.05 51.45 37.97 51.45 27.32 33.01 37.97 14.57 14.47 14.57 14.47 40.15 1.82 40.15 1.82 1.92 45.34 1.92 52.61 14.5 41.92 33.01 52.83 51.9 45.78 64.1 9.89 64.1">
+    </polygon>
+
+    <rect
+      fill="#f04e54"
+      x="6.98"
+      y="51.45"
+      width="4.85"
+      height="4.85">
+    </rect>
+
+    <rect
+      fill="#f04e54"
+      x="1.82"
+      y="59.25"
+      width="4.85"
+      height="4.85">
+    </rect>
+  </g>
+
+  <g class="logotype">
    <path
      fill="#ffffff"
      d="M104.58,32.17c3.08-1.33,4.48-3.21,4.48-6.54V21.45c0-5.44-3.09-8.59-10.72-8.59H82.5v40.3H99.44c7.32,0,11-3.57,11-9.26V39.61C110.45,35.67,108.27,33,104.58,32.17Zm-14.46-13h7.32c2.78,0,4,1,4,3.27V26c0,2.36-1.08,3.76-4.05,3.76H90.12Zm12.71,23.78c0,3-1.46,3.94-4.91,3.94h-7.8v-11h8.47c3,0,4.24,1.33,4.24,4Z">
@@ -43,26 +67,5 @@
      fill="#ffffff"
      d="M300.61,23.69l-6.77,22.39-6.72-22.39h-7.56l9.32,29.47h2.59l-3.68,11.92h7l3.93-11.92,9.44-29.47Z">
    </path>
-
-    <polygon
-      fill="#f04e54"
-      points="9.89 64.1 9.89 59.28 19.9 59.28 19.9 56.3 15.05 56.3 15.05 51.45 37.97 51.45 27.32 33.01 37.97 14.57 14.47 14.57 14.47 40.15 1.82 40.15 1.82 1.92 45.34 1.92 52.61 14.5 41.92 33.01 52.83 51.9 45.78 64.1 9.89 64.1">
-    </polygon>
-
-    <rect
-      fill="#f04e54"
-      x="6.98"
-      y="51.45"
-      width="4.85"
-      height="4.85">
-    </rect>
-
-    <rect
-      fill="#f04e54"
-      x="1.82"
-      y="59.25"
-      width="4.85"
-      height="4.85">
-    </rect>
  </g>
 </svg>