re #2613 Apicurio Integration

app/ui/.yarnrc

@@ -0,0 +1 @@
+config set ignore-engines true

app/ui/package.json

@@ -43,6 +43,7 @@
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
     "@atlasmap/atlasmap-data-mapper": "1.35.4",
+    "apicurio-design-studio": "^0.2.11-3",
     "@ng-dynamic-forms/core": "^5.4.6",
     "@ngrx/effects": "^6.0.1",
     "@ngrx/store": "^6.0.1",
@@ -51,6 +52,7 @@
     "angular2-text-mask": "^9.0.0",
     "better-npm-run": "^0.0.15",
     "bootstrap": "3.3.7",
+    "brace": "^0.11.1",
     "core-js": "^2.5.5",
     "file-saver": "^1.3.3",
     "jquery": "3.1.1",
@@ -60,6 +62,8 @@
     "ng2-file-upload": "1.3.0",
     "ngx-bootstrap": "^3.0.0",
     "ngx-chips": "^1.9.2",
+    "oai-ts-commands": "^0.2.28",
+    "oai-ts-core": "^0.2.15",
     "patternfly": "3.51.2",
     "patternfly-ng": "^4.0.0",
     "pluralize": "5.0.0",
@@ -69,6 +73,7 @@
     "ts-helpers": "1.1.2",
     "typescript-logging": "0.4.0",
     "url": "^0.11.0",
+    "yamljs": "^0.3.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {

app/ui/src/app/connections/list/list.component.spec.ts

@@ -7,7 +7,6 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { CoreModule } from '@syndesis/ui/core';
 import { VendorModule } from '@syndesis/ui/vendor';
 import { SyndesisStoreModule } from '../../store/store.module';
-
 import { SyndesisCommonModule } from '../../common/common.module';
 import { ConnectionsListComponent } from './list.component';
 import { TestApiModule } from '@syndesis/ui/api/testing';

app/ui/src/app/customizations/api-connector/api-connector-create/api-connector-create.component.html

@@ -42,7 +42,7 @@
           *ngIf="currentActiveStep == 1"
           (request)="onValidationRequest($event)">
         </syndesis-api-connector-swagger-upload>
-        <syndesis-api-connector-review *ngIf="currentActiveStep == 2"
+        <syndesis-api-connector-review *ngIf="currentActiveStep == 2 && displayDefinitionEditor === false"
           [apiConnectorTemplateName]="'OpenAPI'"
           [apiConnectorData]="(apiConnectorState$ | async)?.createRequest"
           [showNextButton]="true"
@@ -58,6 +58,24 @@
         </syndesis-api-connector-info>
       </div>
     </div>
+
+    <div class="row row-cards-pf apicurio" *ngIf="currentActiveStep == 2 && displayDefinitionEditor === true">
+      <div class="card-pf">
+        <div class="card-pf-heading">
+          <h2 class="card-pf-title">
+            Edit Definition
+          </h2>
+        </div>
+        <div class="card-pf-body">
+          <api-editor #apiEditor
+                      [api]="apiDef"
+                      [embedded]="true"
+                      (onCommandExecuted)="onUserChange($event)"
+                      (onSelectionChanged)="onUserSelection($event)"></api-editor>
+        </div>
+      </div>
+    </div>
+
   </section>
 </article>
 

app/ui/src/app/customizations/api-connector/api-connector-create/api-connector-create.component.scss

@@ -9,4 +9,8 @@
 .wizard__body {
   max-width: 700px;
   margin: auto;
+
+  .apicurio {
+    //z-index: auto;
+  }
 }

app/ui/src/app/customizations/api-connector/api-connector-create/api-connector-create.component.ts

@@ -10,6 +10,9 @@ import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { Store } from '@ngrx/store';
 
+import { WindowRef } from '../../window-ref';
+import * as YAML from 'yamljs';
+
 import { ModalService, NavigationService } from '@syndesis/ui/common';
 import {
   ApiConnectorState,
@@ -20,6 +23,9 @@ import {
   CustomApiConnectorAuthSettings
 } from '@syndesis/ui/customizations/api-connector';
 
+import { ApiEditorComponent, ApiDefinition } from 'apicurio-design-studio';
+import { OtCommand } from 'oai-ts-commands';
+
 enum WizardSteps {
   UploadSwagger = 1,
   ReviewApiConnector = 2,
@@ -35,16 +41,36 @@ enum WizardSteps {
 export class ApiConnectorCreateComponent implements OnInit, OnDestroy {
   currentActiveStep = 1;
   apiConnectorState$: Observable<ApiConnectorState>;
+  displayDefinitionEditor = false;
+
+  @ViewChild('_apiEditor') _apiEditor: ApiEditorComponent;
+  apiDef: ApiDefinition;
+
   @ViewChild('cancelModalTemplate') cancelModalTemplate: TemplateRef<any>;
 
   private cancelModalId = 'create-cancellation-modal';
 
   constructor(
-    private router: Router,
-    private modalService: ModalService,
     private apiConnectorStore: Store<ApiConnectorStore>,
-    private nav: NavigationService
-  ) {}
+    private modalService: ModalService,
+    private nav: NavigationService,
+    private router: Router,
+    private winRef: WindowRef
+  ) {
+    this.winRef.nativeWindow.dump = YAML.dump;
+  }
+
+  public onUserSelection(selection: string): void {
+    //console.log('User selection changed: ', selection);
+  }
+
+  public onUserChange(command: OtCommand): void {
+    //console.log('Something happened! ' + JSON.stringify(command));
+  }
+
+  public showDefinitionEditor(): boolean {
+    return true;
+  }
 
   ngOnInit() {
     this.modalService.registerModal(
@@ -56,12 +82,23 @@ export class ApiConnectorCreateComponent implements OnInit, OnDestroy {
     );
 
     // Once the request validation results are yielded for the 1st time, we move user to step 2
-    this.apiConnectorState$
-      .pipe(map(apiConnectorState => apiConnectorState.createRequest))
-      .pipe(first(request => !!request && !!request.actionsSummary))
-      .subscribe(
-        () => (this.currentActiveStep = WizardSteps.ReviewApiConnector)
-      );
+    this.apiConnectorState$.map(apiConnectorState => apiConnectorState.createRequest)
+      .first(request => !!request && !!request.actionsSummary)
+      .subscribe( apiConnectorState => {
+        // TODO error handling!
+        const reader = new FileReader();
+        reader.onload = () => {
+          this.apiDef = new ApiDefinition();
+          this.apiDef.createdBy = 'user1';
+          this.apiDef.createdOn = new Date();
+          this.apiDef.tags = [];
+          this.apiDef.description = '';
+          this.apiDef.id = 'api-1';
+          this.apiDef.spec = reader.result;
+          this.currentActiveStep = WizardSteps.ReviewApiConnector;
+        };
+        reader.readAsText(apiConnectorState.specificationFile);
+      });
 
     // Once the request object is flagged as 'isComplete', we redirect the user to the main listing
     this.apiConnectorState$
@@ -89,8 +126,15 @@ export class ApiConnectorCreateComponent implements OnInit, OnDestroy {
     );
   }
 
-  onReviewComplete(): void {
-    this.currentActiveStep = WizardSteps.UpdateAuthSettings;
+  onReviewComplete({event: event, displayEditor: displayEditor}): void {
+    // Check if request is to show editor or not
+    if (displayEditor === true) {
+      this.displayDefinitionEditor = true;
+
+    } else {
+      this.displayDefinitionEditor = false;
+      this.currentActiveStep = WizardSteps.UpdateAuthSettings;
+    }
   }
 
   onAuthSetup(authSettings: CustomApiConnectorAuthSettings): void {

app/ui/src/app/customizations/api-connector/api-connector-review/api-connector-review.component.html

@@ -42,10 +42,20 @@ <h5 class="connector-actions__header" *ngIf="warnings.length">
     </ol>
   </div>
 
-  <button *ngIf="showNextButton" (click)="reviewComplete.emit()" type="button" class="connector-form__submit btn btn-primary">
+  <button *ngIf="showNextButton"
+          (click)="reviewComplete.emit({event: event, displayEditor: false})"
+          type="button"
+          class="connector-form__submit btn btn-primary">
     Next
   </button>
 
+  <button *ngIf="showNextButton"
+          (click)="reviewComplete.emit({event: event, displayEditor: true})"
+          type="button"
+          class="connector-form__submit btn btn-default apicurio pull-right">
+    Review/Edit
+  </button>
+
 </div>
 <ng-template #validationFallback>
   <h5 class="connector-fallback">No connector details are currently available.</h5>

app/ui/src/app/customizations/api-connector/api-connector-review/api-connector-review.component.scss

@@ -4,6 +4,10 @@
   padding-bottom: 1.4em;
 }
 
+button.connector-form__submit.btn.btn-default.apicurio.pull-right {
+  margin-top: -25px;
+}
+
 .connector-actions {
   padding-bottom: 0.5em;
 

app/ui/src/app/customizations/api-connector/api-connector.module.ts

@@ -24,6 +24,8 @@ import { apiConnectorReducer } from './api-connector.reducer';
 import { ApiConnectorEffects } from './api-connector.effects';
 import { ApiConnectorService } from './api-connector.service';
 
+import { ApicurioEditorModule, ApicurioCommonComponentsModule } from 'apicurio-design-studio';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -35,7 +37,9 @@ import { ApiConnectorService } from './api-connector.service';
     ApiConnectorRoutingModule,
     ApiModule.forChild(apiConnectorEndpoints),
     StoreModule.forFeature('apiConnectorState', apiConnectorReducer),
-    EffectsModule.forFeature([ApiConnectorEffects])
+    EffectsModule.forFeature([ApiConnectorEffects]),
+    ApicurioEditorModule,
+    ApicurioCommonComponentsModule
   ],
   exports: [RouterModule],
   declarations: [

app/ui/src/app/customizations/customizations.module.ts

@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { FileUploadModule } from 'ng2-file-upload';
 import { VendorModule } from '@syndesis/ui/vendor';
 import { SyndesisCommonModule, PatternflyUIModule } from '@syndesis/ui/common';
+import { WindowRef } from './window-ref';
 
 import {
   ApiConnectorListComponent,
@@ -72,6 +73,7 @@ const routes: Routes = [
     TechExtensionImportComponent,
     TechExtensionDeleteModalComponent,
     TechExtensionDetailComponent
-  ]
+  ],
+  providers: [WindowRef]
 })
 export class CustomizationsModule {}

app/ui/src/app/customizations/window-ref.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+function _window(): Window {
+  return window;
+}
+
+@Injectable()
+export class WindowRef {
+  get nativeWindow(): any {
+    return _window();
+  }
+}

app/ui/src/global-shims.ts

@@ -1 +1,5 @@
 (window as any).global = window;
+
+// Does nothing. Used to shim out node.js modules
+// which are no-ops in the browser.
+export const NOOP = 0;

app/ui/src/polyfills.ts

@@ -71,8 +71,8 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
 // import 'rxjs/add/operator/combineLatest';
 // import 'rxjs/add/operator/do';
 // import 'rxjs/add/operator/filter';
-// import 'rxjs/add/operator/first';
-// import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/first';
+import 'rxjs/add/operator/map';
 // import 'rxjs/add/operator/mergeMap';
 // import 'rxjs/add/operator/share';
 // import 'rxjs/add/operator/switchMap';

app/ui/src/tsconfig.json

@@ -38,7 +38,8 @@
       ],
       "@syndesis/ui/*": [
         "app/*"
-      ]
+      ],
+      "fs": [ "./global-shims" ]
     }
   }
 }