feat(connections): Engage sledgehammer

src/app/connections/create-page/configure-fields/configure-fields.component.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { RouterStateSnapshot } from '@angular/router';
 
-import { CurrentConnectionService } from '../current-connection';
+import {
+  CurrentConnectionService,
+  ConnectionEvent,
+} from '../current-connection';
 import { Connection } from '../../../model';
 import { log } from '../../../logging';
 import { CanComponentDeactivate } from '../../../common/can-deactivate-guard.service';
@@ -11,7 +14,8 @@ import { ModalService } from '../../../common/modal/modal.service';
   selector: 'syndesis-connections-configure-fields',
   templateUrl: 'configure-fields.component.html',
 })
-export class ConnectionsConfigureFieldsComponent implements OnInit, CanComponentDeactivate {
+export class ConnectionsConfigureFieldsComponent
+  implements OnInit, CanComponentDeactivate {
   constructor(
     private current: CurrentConnectionService,
     private modalService: ModalService,
@@ -22,6 +26,9 @@ export class ConnectionsConfigureFieldsComponent implements OnInit, CanComponent
   }
 
   set connection(connection: Connection) {
+    if (!connection.connectorId) {
+      return;
+    }
     this.current.connection = connection;
   }
 
@@ -33,15 +40,14 @@ export class ConnectionsConfigureFieldsComponent implements OnInit, CanComponent
     this.current.acquireCredentials();
   }
 
-  ngOnInit() {
-    log.infoc(() => 'Credentials: ' + JSON.stringify(this.current.credentials));
-    log.infoc(() => 'hasCredentials: ' + this.current.hasCredentials());
-  }
+  ngOnInit() {}
 
   canDeactivate(nextState: RouterStateSnapshot) {
-    return nextState.url === '/connections/create/cancel' ||
-           nextState.url === '/connections/create/connection-basics' ||
-           nextState.url === '/connections/create/review' ||
-           this.modalService.show();
+    return (
+      nextState.url === '/connections/create/cancel' ||
+      nextState.url === '/connections/create/connection-basics' ||
+      nextState.url === '/connections/create/review' ||
+      this.modalService.show()
+    );
   }
 }

src/app/connections/create-page/connection-basics/connection-basics.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute, Router, RouterStateSnapshot } from '@angular/router';
+import { Subscription } from 'rxjs/Subscription';
 
 import {
   CurrentConnectionService,
@@ -11,7 +12,8 @@ import { Connection } from '../../../model';
   selector: 'syndesis-connections-connection-basics',
   templateUrl: 'connection-basics.component.html',
 })
-export class ConnectionsConnectionBasicsComponent implements OnInit {
+export class ConnectionsConnectionBasicsComponent implements OnInit, OnDestroy {
+  private subscription: Subscription;
 
   constructor(
     private current: CurrentConnectionService,
@@ -24,11 +26,14 @@ export class ConnectionsConnectionBasicsComponent implements OnInit {
   }
 
   set connection(connection: Connection) {
+    if (!connection.connectorId) {
+      return;
+    }
     this.current.connection = connection;
   }
 
   ngOnInit() {
-    const subscription = this.current.events.subscribe(
+    this.subscription = this.current.events.subscribe(
       (event: ConnectionEvent) => {
         switch (event.kind) {
           case 'connection-set-connection':
@@ -37,9 +42,11 @@ export class ConnectionsConnectionBasicsComponent implements OnInit {
             });
             return;
         }
-        subscription.unsubscribe();
       },
     );
   }
 
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 }

src/app/connections/create-page/create-page.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 
 import { NavigationService } from '../../common/navigation.service';
-import { CurrentConnectionService } from './current-connection';
+import { CurrentConnectionService, ConnectionEvent } from './current-connection';
 import { Connection, TypeFactory } from '../../model';
 import { log, getCategory } from '../../logging';
 import { CanComponentDeactivate } from '../../common/can-deactivate-guard.service';
@@ -150,12 +150,51 @@ export class ConnectionsCreatePage implements OnInit, OnDestroy {
     }
   }
 
-  ngOnInit() {
-    this.current.connection = TypeFactory.createConnection();
-    // we always want to start at the beginning of the wizard on a refresh
-    if (this.getCurrentPage() !== 'connection-basics') {
-      this.router.navigate(['connection-basics'], { relativeTo: this.route });
+  handleEvent(event: ConnectionEvent) {
+    switch (event.kind) {
+      case 'connection-set-connection':
+        log.infoc(
+          () => 'Credentials: ' + JSON.stringify(this.current.credentials),
+        );
+        log.infoc(() => 'hasCredentials: ' + this.current.hasCredentials());
+        if (
+          !this.current.connection.connector ||
+          !this.current.connection.connectorId
+        ) {
+          this.router.navigate(['connection-basics'], {
+            relativeTo: this.route,
+          });
+          return;
+        }
+        /*
+        TODO
+        if (document.cookie) {
+          const cookie = document.cookie;
+          if (cookie.indexOf('cred-') !== -1) {
+            this.router.navigate(['review'], { relativeTo: this.route });
+            return;
+          }
+        }
+        */
+        break;
     }
+
+  }
+
+  ngOnInit() {
+    this.current.events.subscribe(event => {
+      this.handleEvent(event);
+    });
+    this.route.queryParams.subscribe((params) => {
+      if (this.current.connection) {
+        // if the connection has started to be configured we don't want this sub to reset it
+        return;
+      }
+      const connection = TypeFactory.createConnection();
+      // detect if there's a selected connection ID already or not
+      connection.connectorId = params.connectorId;
+      this.current.connection = connection;
+    });
     this.nav.hide();
     this.routerEventsSubscription = this.router.events.subscribe(event => {
       this.detector.detectChanges();

src/app/connections/create-page/current-connection.ts

@@ -32,8 +32,103 @@ export class CurrentConnectionService {
     );
   }
 
+
+  private checkCredentials() {
+    const connectorId = this._connection.connectorId;
+    if (!connectorId) {
+      return false;
+    }
+    if (!this._credentials || this._credentials.connectorId !== connectorId) {
+      // fetch any credentials for the connector
+      const sub = this.fetchCredentials().subscribe(
+        () => {
+          sub.unsubscribe();
+          this.events.emit({
+            kind: 'connection-set-connection',
+            connection: this._connection,
+          });
+        },
+        error => {
+          log.infoc(
+            () =>
+              'Failed to fetch connector credentials: ' + JSON.stringify(error),
+            category,
+          );
+          sub.unsubscribe();
+          this.events.emit({
+            kind: 'connection-set-connection',
+            connection: this._connection,
+          });
+        },
+      );
+      return true;
+    } else {
+      return false;
+    }
+
+  }
+
+  private fetchConnector(connectorId: string) {
+    if (connectorId && !this._connection.connector) {
+      const sub = this.connectorStore.load(connectorId).subscribe(
+        connector => {
+          if (!connector.id) {
+            return;
+          }
+          this._connection.connector = connector;
+          this._connection.icon = connector.icon;
+          this.events.emit({
+            kind: 'connection-check-credentials',
+            connection: this._connection,
+          });
+          sub.unsubscribe();
+        },
+        error => {
+          try {
+            log.infoc(
+              () =>
+                'Failed to fetch connector: ' +
+                JSON.stringify(error),
+              category,
+            );
+          } catch (err) {
+            log.infoc(
+              () => 'Failed to fetch connector: ' + error,
+              category,
+            );
+          }
+          this.events.emit({
+            kind: 'connection-check-credentials',
+            error: error,
+            connection: this._connection,
+          });
+          sub.unsubscribe();
+        },
+      );
+      return true;
+    }
+    return false;
+  }
+
   handleEvent(event: ConnectionEvent) {
+    log.infoc(() => 'connection event: ' + JSON.stringify(event), category);
     switch (event.kind) {
+      case 'connection-check-connector':
+        if (!this.fetchConnector(this._connection.connectorId)) {
+          this.events.emit({
+            kind: 'connection-check-credentials',
+            connectorId: this._connection.connectorId,
+          });
+        }
+        break;
+      case 'connection-check-credentials':
+        if (!this.checkCredentials()) {
+          this.events.emit({
+            kind: 'connection-set-connection',
+            connection: this._connection,
+          });
+        }
+        break;
       case 'connection-set-connection':
         break;
       // TODO not sure if these next 3 cases are needed really
@@ -60,14 +155,12 @@ export class CurrentConnectionService {
     }
     const connectorId = this._connection.connectorId;
     return Observable.create(observer => {
-      this.connectorStore
-        .credentials(connectorId)
-        .subscribe((resp: any) => {
-          // enrich the response with the connectorId
-          this._credentials = { ...resp, ...{ connectorId: connectorId } };
-          observer.next(this._credentials);
-          observer.complete();
-        });
+      this.connectorStore.credentials(connectorId).subscribe((resp: any) => {
+        // enrich the response with the connectorId
+        this._credentials = { ...resp, ...{ connectorId: connectorId } };
+        observer.next(this._credentials);
+        observer.complete();
+      });
     });
   }
 
@@ -77,9 +170,11 @@ export class CurrentConnectionService {
       return Observable.empty();
     }
     const connectorId = this._connection.connectorId;
-    this.connectorStore.acquireCredentials(connectorId).subscribe((resp: any) => {
-      log.infoc(() => 'Got response: ' + JSON.stringify(resp));
-    });
+    this.connectorStore
+      .acquireCredentials(connectorId)
+      .subscribe((resp: any) => {
+        log.infoc(() => 'Got response: ' + JSON.stringify(resp));
+      });
   }
 
   private saveConnection(event: ConnectionEvent) {
@@ -129,47 +224,16 @@ export class CurrentConnectionService {
     return this._credentials && this._credentials.type !== undefined;
   }
 
-
   get connection(): Connection {
     return this._connection;
   }
 
   set connection(connection: Connection) {
     this._connection = connection;
     const connectorId = connection.connectorId;
-    // only query for credentials if the stored ones don't match the passed in connector
-    if (
-      !connection ||
-      !connectorId ||
-      (this._credentials && this._credentials.connectorId === connectorId)
-    ) {
-      this.events.emit({
-        kind: 'connection-set-connection',
-        connection: this._connection,
-      });
-      return;
-    }
-    // fetch any credentials for the connector
-    const sub = this.fetchCredentials().subscribe(
-      () => {
-        sub.unsubscribe();
-        this.events.emit({
-          kind: 'connection-set-connection',
-          connection: this._connection,
-        });
-      },
-      error => {
-        log.infoc(
-          () =>
-            'Failed to fetch connector credentials: ' + JSON.stringify(error),
-          category,
-        );
-        sub.unsubscribe();
-        this.events.emit({
-          kind: 'connection-set-connection',
-          connection: this._connection,
-        });
-      },
-    );
+    this.events.emit({
+      kind: 'connection-check-connector',
+      connection: this._connection,
+    });
   }
 }