feat(support): Initial commit of angular-console-nrwl-extensions inte…

…gration

.gitignore

@@ -42,3 +42,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+#Environment
+.env

apps/angular-console/src/app/app.component.css

@@ -3,3 +3,15 @@
   height: 100vh;
   overflow: hidden;
 }
+
+mat-sidenav-container {
+  height: 100%;
+}
+
+a {
+  background: rgba(0, 0, 0, 0) !important;
+}
+
+a.active-link {
+  background: rgba(0, 0, 0, 0.12) !important;
+}

apps/angular-console/src/app/app.component.html

@@ -1,9 +1,25 @@
-<div fxLayout="column" fxFlex>
-  <ui-contextual-action-bar *ngIf="settingsLoaded"></ui-contextual-action-bar>
+<mat-sidenav-container id="navigationSidenavContainer">
+  <mat-sidenav #sidenav mode="over" [opened]="showSiteMenu" (closedStart)="showSiteMenu = false">
+    <mat-nav-list>
+      <a routerLinkActive="active-link" mat-list-item (click)="showSiteMenu = false" [routerLink]="link.route" *ngFor="let link of sidenavLinks">
+        <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
+          <mat-icon>
+            {{ link.icon }}
+          </mat-icon>
+          <span>{{ link.text }}</span>
+        </div>
+      </a>
+    </mat-nav-list>
+  </mat-sidenav>
+  <mat-sidenav-content id="navigationSidenavContent">
+    <div fxLayout="column" fxFlex>
+      <ui-contextual-action-bar *ngIf="settingsLoaded" (hamburgerClicked)="showSiteMenu = true"></ui-contextual-action-bar>
 
-  <div fxFlex class="outlet-container" [@routerTransition]="routerTransition | async">
-    <router-outlet></router-outlet>
-  </div>
+      <div fxFlex class="outlet-container" [@routerTransition]="routerTransition | async">
+        <router-outlet></router-outlet>
+      </div>
 
-  <ui-data-collection *ngIf="settingsLoaded"></ui-data-collection>
-</div>
+      <ui-data-collection *ngIf="settingsLoaded"></ui-data-collection>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>

apps/angular-console/src/app/app.component.ts

@@ -4,18 +4,20 @@ import {
   IMPORT_WORKSPACE,
   WORKSPACES
 } from '@angular-console/feature-workspaces';
-import { ContextualActionBarService, FADE_IN } from '@angular-console/ui';
+import { FADE_IN } from '@angular-console/ui';
+import { Settings } from '@angular-console/utils';
 import { transition, trigger } from '@angular/animations';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  OnInit,
-  ViewChild
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, ViewChild } from '@angular/core';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { AuthService, ContextualActionBarService } from '@nrwl/angular-console-enterprise-frontend';
 import { Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import { Settings } from '@angular-console/utils';
+
+interface SidenavLink {
+  icon: string;
+  route: string;
+  text: string;
+}
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -38,12 +40,25 @@ export class AppComponent implements OnInit {
     this.routerTransition = this.routerOutlet.activateEvents.pipe(
       map(() => this.routerOutlet.activatedRouteData.state)
     );
+    this.authService.isAuthenticated$.subscribe(isAuthenticated => {
+      console.log('is authenticated?', isAuthenticated);
+    });
   }
 
+  sidenavLinks: SidenavLink[] = [
+    { icon: 'view_list', route: '/workspaces', text: 'Recent Workspaces' },
+    {
+      icon: 'question_answer',
+      route: '/support',
+      text: 'Ask a Narwhal Engineer'
+    }
+  ];
+
   constructor(
     router: Router,
     public settings: Settings,
-    contextualActionBarService: ContextualActionBarService
+    contextualActionBarService: ContextualActionBarService,
+    private authService: AuthService
   ) {
     settings.fetch().subscribe(() => {
       this.settingsLoaded = true;

apps/angular-console/src/app/app.module.ts

@@ -1,23 +1,13 @@
+import { FeatureWorkspacesModule, workspaceRoutes } from '@angular-console/feature-workspaces';
+import { UiModule } from '@angular-console/ui';
+import { AnalyticsCollector, CancelCommandGuard, Messenger } from '@angular-console/utils';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
-import {
-  MatIconModule,
-  MatIconRegistry,
-  MatSnackBarModule
-} from '@angular/material';
+import { MatIconModule, MatIconRegistry, MatListModule, MatSidenavModule, MatSnackBarModule } from '@angular/material';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
-import {
-  FeatureWorkspacesModule,
-  workspaceRoutes
-} from '@angular-console/feature-workspaces';
-import { UiModule } from '@angular-console/ui';
-import {
-  AnalyticsCollector,
-  CancelCommandGuard,
-  Messenger
-} from '@angular-console/utils';
+import { AngularConsoleEnterpriseFrontendModule, SupportComponent } from '@nrwl/angular-console-enterprise-frontend';
 import { APOLLO_OPTIONS, ApolloModule } from 'apollo-angular';
 import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
 import { InMemoryCache } from 'apollo-cache-inmemory';
@@ -64,6 +54,8 @@ export function initApollo(
 @NgModule({
   declarations: [AppComponent],
   imports: [
+    MatSidenavModule,
+    MatListModule,
     MatIconModule,
     MatSnackBarModule,
     BrowserModule,
@@ -73,13 +65,18 @@ export function initApollo(
     HttpClientModule,
     FeatureWorkspacesModule,
     UiModule,
+    AngularConsoleEnterpriseFrontendModule.forRoot(),
     RouterModule.forRoot(
       [
         { path: '', pathMatch: 'full', redirectTo: '/workspaces' },
         {
           path: '',
           children: workspaceRoutes,
           canActivateChild: [CancelCommandGuard]
+        },
+        {
+          path: 'support',
+          component: SupportComponent
         }
       ],
       { paramsInheritanceStrategy: 'always', initialNavigation: 'disabled' }