Displayed environment title in header.

Closes #612.
altair-graphql · Mar 9, 2019 · 73b44d6 · 73b44d6
1 parent ed17115
commit 73b44d6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/src/app/containers/app/app.component.html b/src/app/containers/app/app.component.html
@@ -43,12 +43,16 @@
         <clr-dropdown>
           <button
             clrDropdownTrigger
-            class="nav-icon"
+            class="nav-text"
             type="button"
             track-id="show_environment_menu"
             [popper]="'ENVIRONMENTS_BUTTON' | translate"
           >
-              <clr-icon shape="file-settings" [ngClass]="{ 'has-badge': (environments$ | async)?.activeSubEnvironment}"></clr-icon>
+            <span class="header__environemnt-link">
+              <clr-icon shape="file-settings" [ngClass]="{ 'has-badge': (activeEnvironment$ | async) }"></clr-icon>
+              <span *ngIf="(activeEnvironment$ | async)">{{ (activeEnvironment$ | async)?.title }}</span>
+              <span *ngIf="!(activeEnvironment$ | async)">{{ 'NO_ENVIRONMENT_TEXT' | translate }}</span>
+            </span>
           </button>
           <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
             <ng-container *ngIf="(environments$ | async)?.subEnvironments.length">
@@ -57,7 +61,7 @@
                 clrDropdownItem
                 (click)="selectActiveEnvironment(environment.id)"
                 *ngFor="let environment of (environments$ | async).subEnvironments"
-                [ngClass]="{ 'active': environment.id === (environments$ | async).activeSubEnvironment }"
+                [ngClass]="{ 'active': environment.id === (activeEnvironment$ | async) }"
                 track-id="select_environment">{{ environment.title }}</button>
               <button type="button" clrDropdownItem (click)="selectActiveEnvironment(null)" track-id="select_no_environment">{{ 'NO_ENVIRONMENT_TEXT' | translate }}</button>
               <div class="dropdown-divider"></div>

diff --git a/src/app/containers/app/app.component.ts b/src/app/containers/app/app.component.ts
@@ -46,6 +46,7 @@ export class AppComponent {
   collection$: Observable<fromCollection.State>;
   windowsMeta$: Observable<fromWindowsMeta.State>;
   environments$: Observable<fromEnvironments.State>;
+  activeEnvironment$: Observable<fromEnvironments.EnvironmentState>;
 
   windowIds = [];
   windows = {};
@@ -73,6 +74,14 @@ export class AppComponent {
     this.collection$ = this.store.select('collection');
     this.windowsMeta$ = this.store.select('windowsMeta');
     this.environments$ = this.store.select('environments');
+    this.activeEnvironment$ = this.environments$.pipe(
+      map(environments => {
+        if (environments.activeSubEnvironment) {
+          return environments.subEnvironments.find(subEnvironment => subEnvironment.id === environments.activeSubEnvironment);
+        }
+        return null;
+      })
+    );
 
     this.setDefaultLanguage();
     this.setAvailableLanguages();

diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
@@ -18,3 +18,10 @@
 .header-logo {
   width: 30px;
 }
+
+.header__environemnt-link {
+  padding: 3px 5px;
+  background: var(--theme-bg-color);
+  border-radius: 4px;
+  border: 1px solid var(--theme-border-color);
+}