feat(node): Add api endpoints to detect/install node

.gitignore

@@ -15,6 +15,7 @@
 
 # IDEs and editors
 /.idea
+/.vscode
 .project
 .classpath
 .c9/
@@ -44,4 +45,4 @@ testem.log
 Thumbs.db
 
 #Environment
-.env
+.env

angular.json

@@ -103,6 +103,25 @@
       "architect": {
       }
     },
+    "feature-install-node-js": {
+      "root": "libs/feature-install-node-js",
+      "sourceRoot": "libs/feature-install-node-js/src",
+      "projectType": "library",
+      "prefix": "angular-console",
+      "architect": {
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/feature-install-node-js/tsconfig.lib.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
     "feature-workspaces": {
       "root": "libs/feature-workspaces",
       "sourceRoot": "libs/feature-workspaces/src",

apps/angular-console-e2e/src/integration/extensions.spec.ts

@@ -9,7 +9,8 @@ import {
   taskListHeaders,
   tasks,
   texts,
-  waitForActionToComplete
+  waitForActionToComplete,
+  waitForAnimation
 } from './utils';
 
 describe('Extensions', () => {
@@ -52,6 +53,7 @@ describe('Extensions', () => {
     taskListHeaders($p => {
       expect(texts($p)[0]).to.equal('Available Extensions');
     });
+    waitForAnimation();
 
     // check that the schematics added by angular material are available
     goToGenerate();

apps/angular-console-e2e/src/integration/utils.ts

@@ -168,7 +168,7 @@ export function selectFolder(name: string) {
 }
 
 export function waitForAnimation() {
-  cy.wait(300);
+  cy.wait(400);
 }
 
 export function waitForAutocomplete() {

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

@@ -81,7 +81,14 @@ export class AppComponent implements OnInit, OnDestroy {
       .pipe(filter(event => event instanceof NavigationEnd))
       .subscribe(event => {
         const navigationEnd = event as NavigationEnd;
-        if (navigationEnd.url.startsWith('/workspace/')) {
+        if (navigationEnd.url.startsWith('/install-nodejs')) {
+          contextualActionBarService.contextualTabs$.next(null);
+          contextualActionBarService.breadcrumbs$.next([
+            { title: 'Welcome to Angular Console' }
+          ]);
+          contextualActionBarService.nonContextualActions$.next([]);
+          contextualActionBarService.contextualActions$.next(null);
+        } else if (navigationEnd.url.startsWith('/workspace/')) {
           contextualActionBarService.contextualTabs$.next(null);
         } else {
           switch (

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

@@ -6,6 +6,7 @@ import { UiModule } from '@angular-console/ui';
 import {
   AnalyticsCollector,
   CancelCommandGuard,
+  IsNodeJsInstalledGuard,
   Messenger
 } from '@angular-console/utils';
 import { HttpClientModule } from '@angular/common/http';
@@ -88,7 +89,12 @@ export function initApollo(
         {
           path: '',
           children: workspaceRoutes,
-          canActivateChild: [CancelCommandGuard]
+          canActivateChild: [IsNodeJsInstalledGuard, CancelCommandGuard]
+        },
+        {
+          path: 'install-nodejs',
+          loadChildren:
+            '@angular-console/feature-install-node-js#FeatureInstallNodeJsModule'
         },
         {
           path: 'support',
@@ -99,6 +105,7 @@ export function initApollo(
     )
   ],
   providers: [
+    IsNodeJsInstalledGuard,
     CancelCommandGuard,
     AnalyticsCollector,
     {

apps/angular-console/src/assets/xterm.css

@@ -36,124 +36,124 @@
  */
 
 .xterm {
-    font-family: courier-new, courier, monospace;
-    font-feature-settings: "liga" 0;
-    position: relative;
-    user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
+  font-family: courier-new, courier, monospace;
+  font-feature-settings: 'liga' 0;
+  position: relative;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
 }
 
 .xterm.focus,
 .xterm:focus {
-    outline: none;
+  outline: none;
 }
 
 .xterm .xterm-helpers {
-    position: absolute;
-    top: 0;
-    /**
+  position: absolute;
+  top: 0;
+  /**
      * The z-index of the helpers must be higher than the canvases in order for
      * IMEs to appear on top.
      */
-    z-index: 10;
+  z-index: 10;
 }
 
 .xterm .xterm-helper-textarea {
-    /*
+  /*
      * HACK: to fix IE's blinking cursor
      * Move textarea out of the screen to the far left, so that the cursor is not visible.
      */
-    position: absolute;
-    opacity: 0;
-    left: -9999em;
-    top: 0;
-    width: 0;
-    height: 0;
-    z-index: -10;
-    /** Prevent wrapping so the IME appears against the textarea at the correct position */
-    white-space: nowrap;
-    overflow: hidden;
-    resize: none;
+  position: absolute;
+  opacity: 0;
+  left: -9999em;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: -10;
+  /** Prevent wrapping so the IME appears against the textarea at the correct position */
+  white-space: nowrap;
+  overflow: hidden;
+  resize: none;
 }
 
 .xterm .composition-view {
-    /* TODO: Composition position got messed up somewhere */
-    background: #000;
-    color: #FFF;
-    display: none;
-    position: absolute;
-    white-space: nowrap;
-    z-index: 1;
+  /* TODO: Composition position got messed up somewhere */
+  background: #000;
+  color: #fff;
+  display: none;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 1;
 }
 
 .xterm .composition-view.active {
-    display: block;
+  display: block;
 }
 
 .xterm .xterm-viewport {
-    /* On OS X this is required in order for the scroll bar to appear fully opaque */
-    background-color: #000;
-    overflow-y: scroll;
-    cursor: default;
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    bottom: 0;
+  /* On OS X this is required in order for the scroll bar to appear fully opaque */
+  background-color: #000;
+  overflow-y: scroll;
+  cursor: default;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
 }
 
 .xterm .xterm-screen {
-    position: relative;
+  position: relative;
 }
 
 .xterm .xterm-screen canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 .xterm .xterm-scroll-area {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 .xterm-char-measure-element {
-    display: inline-block;
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    left: -9999em;
-    line-height: normal;
+  display: inline-block;
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: -9999em;
+  line-height: normal;
 }
 
 .xterm {
-    cursor: text;
+  cursor: text;
 }
 
 .xterm.enable-mouse-events {
-    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
-    cursor: default;
+  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+  cursor: default;
 }
 
 .xterm.xterm-cursor-pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .xterm .xterm-accessibility,
 .xterm .xterm-message {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 100;
-    color: transparent;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 100;
+  color: transparent;
 }
 
 .xterm .live-region {
-    position: absolute;
-    left: -9999px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
 }

apps/angular-console/src/styles.scss

@@ -1,7 +1,7 @@
 @import '~@angular/material/theming';
 @include mat-core();
 
-$primary: mat-palette($mat-blue, 700, 600, 800);
+$primary: mat-palette($mat-blue, 700, 100, 800);
 $accent: mat-palette($mat-red, 700, 600, 800);
 $warn: mat-palette($mat-red);
 

apps/angular-console/tsconfig.app.json

@@ -5,11 +5,6 @@
     "module": "es2015",
     "types": []
   },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ],
-  "include": [
-    "**/*.ts"
-  ]
+  "exclude": ["src/test.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts", "../../libs/feature-install-node-js/src/index.ts"]
 }

cypress.json

@@ -0,0 +1 @@
+{}

libs/feature-extensions/src/lib/extension/extension.component.scss

@@ -2,7 +2,6 @@
   width: 100%;
 }
 
-
 .ui-flags {
   background: white;
   overflow: auto;

libs/feature-extensions/src/lib/extensions/extensions.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { Extension, ExtensionGroup, Schematic } from '@angular-console/schema';
+import { Extension, ExtensionGroup } from '@angular-console/schema';
 import { Apollo } from 'apollo-angular';
 import gql from 'graphql-tag';
 import { combineLatest, Observable } from 'rxjs';
@@ -86,7 +86,7 @@ export class ExtensionsComponent {
   );
 
   readonly taskCollections$: Observable<
-    TaskCollections<Schematic>
+    TaskCollections<Extension>
   > = combineLatest(this.extensions$, this.selectedExtensionId$).pipe(
     map(([extensions, selectedId]) => {
       const collections: Array<TaskCollection<Extension>> = extensions.map(

libs/feature-generate/src/lib/schematics/schematics.component.scss

@@ -1 +0,0 @@
-

libs/feature-install-node-js/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/feature-install-node-js.module';

libs/feature-install-node-js/src/lib/feature-install-node-js.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { InstallNodeJsComponent } from './install-node-js.component';
+import { UiModule } from '@angular-console/ui';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    UiModule,
+    RouterModule.forChild([
+      { path: '', pathMatch: 'full', component: InstallNodeJsComponent }
+    ])
+  ],
+  declarations: [InstallNodeJsComponent]
+})
+export class FeatureInstallNodeJsModule {}