fixed some issues with source editing de-selecting the item in the master panel

Author: EricWittmann

front-end/app/studio/pages/apis/{apiId}/editor/_components/forms/definition-form.component.ts

@@ -113,6 +113,10 @@ export class DefinitionFormComponent extends SourceFormComponent<Oas20Definition
         this.onDeselect.emit(true);
     }
 
+    public formType(): string {
+        return "definition";
+    }
+
     public enableSourceMode(): void {
         this.sourceNode = this.definition;
         super.enableSourceMode();

front-end/app/studio/pages/apis/{apiId}/editor/_components/forms/operation-form.component.html

@@ -36,6 +36,11 @@
     <button class="btn btn-default btn-xs" [disabled]="!canFormatSource()" (click)="formatSource()"><span class="fa fa-fw fa-indent"></span> <span>Format</span></button>
     <button class="btn btn-default btn-xs" [disabled]="!canRevertSource()" (click)="revertSource()"><span class="fa fa-fw fa-undo"></span> <span>Revert</span></button>
     <button class="btn btn-primary btn-xs" [disabled]="!canSaveSource()" (click)="saveSource()"><span class="pficon pficon-save"></span> <span>Save</span></button>
+    <button class="btn btn-default btn-xs" (click)="toggleSourceFormat()">
+        <span class="fa fa-fw fa-code"></span>
+        <span *ngIf="sourceFormat() === 'yaml'">As JSON</span>
+        <span *ngIf="sourceFormat() === 'json'">As YAML</span>
+    </button>
 </div>
 <div class="detail-content" style="position: relative" *ngIf="isSourceMode()">
     <ace-editor #sourceEditor

front-end/app/studio/pages/apis/{apiId}/editor/_components/forms/operation-form.component.ts

@@ -550,6 +550,10 @@ export class OperationFormComponent extends SourceFormComponent<Oas20Operation>
         this.onCommand.emit(command);
     }
 
+    public formType(): string {
+        return "operation";
+    }
+
     public enableSourceMode(): void {
         this.sourceNode = this.operation;
         super.enableSourceMode();

front-end/app/studio/pages/apis/{apiId}/editor/_components/forms/path-form.component.html

@@ -28,6 +28,11 @@
     <button class="btn btn-default btn-xs" [disabled]="!canFormatSource()" (click)="formatSource()"><span class="fa fa-fw fa-indent"></span> <span>Format</span></button>
     <button class="btn btn-default btn-xs" [disabled]="!canRevertSource()" (click)="revertSource()"><span class="fa fa-fw fa-undo"></span> <span>Revert</span></button>
     <button class="btn btn-primary btn-xs" [disabled]="!canSaveSource()" (click)="saveSource()"><span class="pficon pficon-save"></span> <span>Save</span></button>
+    <button class="btn btn-default btn-xs" (click)="toggleSourceFormat()">
+        <span class="fa fa-fw fa-code"></span>
+        <span *ngIf="sourceFormat() === 'yaml'">As JSON</span>
+        <span *ngIf="sourceFormat() === 'json'">As YAML</span>
+    </button>
 </div>
 <div class="detail-content" style="position: relative" *ngIf="isSourceMode()">
     <ace-editor #sourceEditor

front-end/app/studio/pages/apis/{apiId}/editor/_components/forms/path-form.component.ts

@@ -26,7 +26,7 @@ import {
     DeleteAllParameters, DeleteNodeCommand, DeleteParameterCommand,
     DeletePathCommand
 } from "../../_commands/delete.command";
-import {SourceFormComponent} from "./source-form.base";
+import {NodeSelectionEvent, SourceFormComponent} from "./source-form.base";
 import {ReplacePathItemCommand} from "../../_commands/replace.command";
 import {ModelUtils} from "../../_util/model.util";
 import {
@@ -58,7 +58,6 @@ export class PathFormComponent extends SourceFormComponent<Oas20PathItem> {
         return this._path;
     }
 
-    @Output() onOperationSelected: EventEmitter<string> = new EventEmitter<string>();
     @Output() onDeselect: EventEmitter<boolean> = new EventEmitter<boolean>();
 
     @ViewChild("addQueryParamDialog") public addQueryParamDialog: AddQueryParamDialogComponent;
@@ -178,7 +177,7 @@ export class PathFormComponent extends SourceFormComponent<Oas20PathItem> {
     }
 
     public selectOperation(operation: Oas20Operation): void {
-        this.onOperationSelected.emit(operation.method());
+        this.onNodeSelected.emit(new NodeSelectionEvent(operation, "operation"));
     }
 
     public createOperation(operationType: string): void {
@@ -285,6 +284,10 @@ export class PathFormComponent extends SourceFormComponent<Oas20PathItem> {
         this.onCommand.emit(command);
     }
 
+    public formType(): string {
+        return "path";
+    }
+
     public enableSourceMode(): void {
         this.sourceNode = this.path;
         super.enableSourceMode();

front-end/app/studio/pages/apis/{apiId}/editor/_components/forms/source-form.base.ts

@@ -26,6 +26,17 @@ import {AceEditorDirective} from "ng2-ace-editor";
 import {ObjectUtils} from "../../_util/object.util";
 import * as YAML from "yamljs";
 
+
+export class NodeSelectionEvent {
+    public node: OasNode;
+    public type: string;
+
+    constructor(node: OasNode, type: string) {
+        this.node = node;
+        this.type = type;
+    }
+}
+
 /**
  * Base class for all forms that support a "Source" tab.
  */
@@ -34,6 +45,7 @@ export abstract class SourceFormComponent<T extends OasNode> {
     private static library: OasLibraryUtils = new OasLibraryUtils();
 
     @Output() onCommand: EventEmitter<ICommand> = new EventEmitter<ICommand>();
+    @Output() onNodeSelected: EventEmitter<NodeSelectionEvent> = new EventEmitter<NodeSelectionEvent>();
 
     private _mode: string = "design";
     private _sourceFormat: string = "yaml";
@@ -64,15 +76,20 @@ export abstract class SourceFormComponent<T extends OasNode> {
 
     public source(): string {
         if (this._sourceFormat === "yaml") {
-            return YAML.stringify(this.sourceJs(), 100, 2);
+            return YAML.stringify(this.sourceJs(), 100, 4);
         } else {
             return JSON.stringify(this.sourceJs(), null, 4);
         }
     }
 
     public updateSource(newSource: any): void {
         try {
-            let newJsObject: any = YAML.parse(newSource);
+            let newJsObject: any;
+            if (this.sourceFormat() === "yaml") {
+                newJsObject = YAML.parse(newSource);
+            } else {
+                newJsObject = JSON.parse(newSource);
+            }
             let currentJsObj: any = this.sourceJs();
             this._source.dirty = !ObjectUtils.objectEquals(currentJsObj, newJsObject);
             this._source.value = SourceFormComponent.library.readNode(newJsObject, this.createEmptyNodeForSource());
@@ -108,12 +125,15 @@ export abstract class SourceFormComponent<T extends OasNode> {
     public saveSource(): void {
         let command: ICommand = this.createReplaceNodeCommand(<T>this._source.value);
         this.onCommand.emit(command);
+        this.onNodeSelected.emit(new NodeSelectionEvent(<T>this._source.value, this.formType()));
         this.sourceNode = this._source.value;
         this._source.dirty = false;
         this._source.value = null;
         this._source.valid = true;
     }
 
+    public abstract formType(): string;
+
     public sourceFormat(): string {
         return this._sourceFormat;
     }
@@ -132,7 +152,12 @@ export abstract class SourceFormComponent<T extends OasNode> {
 
     public formatSource(): void {
         let nsrc: any = SourceFormComponent.library.writeNode(this._source.value);
-        let nsrcStr: string = YAML.stringify(nsrc);
+        let nsrcStr: string;
+        if (this._sourceFormat === "yaml") {
+            nsrcStr = YAML.stringify(this.sourceJs(), 100, 4);
+        } else {
+            nsrcStr = JSON.stringify(this.sourceJs(), null, 4);
+        }
         this.sourceEditor.setText(nsrcStr);
     }
 

front-end/app/studio/pages/apis/{apiId}/editor/editor.component.html

@@ -214,11 +214,13 @@ <h2>{{ document().info.title }}</h2>
         <main-form [document]="document()" (onCommand)="onCommand($event)" class="editor-detail-form"
                    *ngIf="selectedType === 'main'"></main-form>
         <path-form [path]="selectedPath()" (onCommand)="onCommand($event)" class="editor-detail-form"
-                   (onOperationSelected)="selectOperation(selectedPath(), $event)" (onDeselect)="deselectPath()"
+                   (onNodeSelected)="selectNode($event)" (onDeselect)="deselectPath()"
                    *ngIf="selectedType === 'path'"></path-form>
         <operation-form [operation]="selectedOperation()" (onCommand)="onCommand($event)" class="editor-detail-form"
+                        (onNodeSelected)="selectNode($event)"
                         (onDeselect)="deselectOperation()" *ngIf="selectedType === 'operation'"></operation-form>
         <definition-form [definition]="selectedDefinition()" (onCommand)="onCommand($event)" class="editor-detail-form"
+                         (onNodeSelected)="selectNode($event)"
                          (onDeselect)="deselectDefinition()" *ngIf="selectedType === 'definition'"></definition-form>
         <problem-form [problem]="selectedProblem()" (onCommand)="onCommand($event)" class="editor-detail-form"
                       (onGoToProblem)="goToProblem()"

front-end/app/studio/pages/apis/{apiId}/editor/editor.component.ts

@@ -33,6 +33,7 @@ import {AddPathDialogComponent} from "./_components/dialogs/add-path.component";
 import {DeleteDefinitionSchemaCommand, DeleteNodeCommand, DeletePathCommand} from "./_commands/delete.command";
 import {AllNodeVisitor, ModelUtils} from "./_util/model.util";
 import {ObjectUtils} from "./_util/object.util";
+import {NodeSelectionEvent} from "./_components/forms/source-form.base";
 
 
 @Component({
@@ -217,8 +218,8 @@ export class ApiEditorComponent {
         if (this.selectedType === "operation" && this.selectedItem === operation) {
             this.selectPath(operation.parent() as Oas20PathItem);
         } else {
-            this.selectedType = "operation";
             this.selectedItem = operation;
+            this.selectedType = "operation";
         }
     }
 
@@ -229,8 +230,17 @@ export class ApiEditorComponent {
         if (this.selectedType !== "operation") {
             return;
         }
-        this.selectedType = "path";
         this.selectedItem = this.selectedItem.parent();
+        this.selectedType = "path";
+    }
+
+    /**
+     * Called when the user does something to cause the selection to change.
+     * @param event
+     */
+    public selectNode(event: NodeSelectionEvent): void {
+        this.selectedItem = event.node;
+        this.selectedType = event.type;
     }
 
     /**