treat examples as objects when possible. Fixes #671

Signed-off-by: Eric Wittmann <eric.wittmann@gmail.com>
Apicurio · Mar 12, 2019 · 66aff7a · 66aff7a
1 parent 3c5a32b
commit 66aff7a
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 45 deletions.
diff --git a/...tudio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example-20.component.html b/...tudio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example-20.component.html
@@ -1,7 +1,7 @@
 <!-- Add Example Dialog -->
 <div>
     <div bsModal #addExampleModal="bs-modal" class="modal fade" id="addExampleModal" tabindex="-1" role="dialog"
-         aria-labelledby="addExampleModalLabel" role="dialog" aria-hidden="true" *ngIf="isOpen()"
+         aria-labelledby="addExampleModalLabel" aria-hidden="true" *ngIf="isOpen()"
          (onShown)="addExampleInput.focus()" (onHidden)="close()">
         <div class="modal-dialog">
             <div class="modal-content">

diff --git a/.../studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example-20.component.ts b/.../studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example-20.component.ts
@@ -111,15 +111,15 @@ export class AddExample20DialogComponent {
             contentType: this.model.contentType,
             value: this.model.value
         };
-        console.info("EVENT: ", event);
-        // TODO investigate whether to restore this functionality (treat JSON data differently)
-        // if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
-        //     try {
-        //         event.value = JSON.parse(this.model.value)
-        //     } catch (e) {
-        //         console.error("[AddExampleDialogComponent] Failed to parse example.");
-        //     }
-        // }
+
+        // Convert to jsobject if the data is JSON and is valid
+        if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
+            try {
+                event.value = JSON.parse(this.model.value)
+            } catch (e) { // should never happen!
+                console.error("[AddExample20DialogComponent] Failed to parse example.");
+            }
+        }
         this.onAdd.emit(event);
         this.cancel();
     }

diff --git a/...d/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example.component.html b/...d/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example.component.html
@@ -1,7 +1,7 @@
 <!-- Add Example Dialog -->
 <div>
     <div bsModal #addExampleModal="bs-modal" class="modal fade" id="addExampleModal" tabindex="-1" role="dialog"
-         aria-labelledby="addExampleModalLabel" role="dialog" aria-hidden="true" *ngIf="isOpen()"
+         aria-labelledby="addExampleModalLabel" aria-hidden="true" *ngIf="isOpen()"
          (onShown)="addExampleInput.focus()" (onHidden)="close()">
         <div class="modal-dialog">
             <div class="modal-content">

diff --git a/...end/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example.component.ts b/...end/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/add-example.component.ts
@@ -111,14 +111,16 @@ export class AddExampleDialogComponent {
             name: this.model.name,
             value: this.model.value
         };
-        // TODO investigate whether to restore this functionality (treat JSON data differently)
-        // if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
-        //     try {
-        //         event.value = JSON.parse(this.model.value)
-        //     } catch (e) {
-        //         console.error("[AddExampleDialogComponent] Failed to parse example.");
-        //     }
-        // }
+
+        // Convert to jsobject if the data is JSON and is valid
+        if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
+            try {
+                event.value = JSON.parse(this.model.value)
+            } catch (e) { // should never happen!
+                console.error("[AddExampleDialogComponent] Failed to parse example.");
+            }
+        }
+
         this.onAdd.emit(event);
         this.cancel();
     }

diff --git a/...studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/edit-example-20.component.ts b/...studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/edit-example-20.component.ts
@@ -81,10 +81,7 @@ export class EditExample20DialogComponent {
         };
 
         let val: any = value;
-        if (StringUtils.isJSON(val)) {
-            try { val = JSON.stringify(JSON.parse(val), null, 4); } catch (e) {}
-        }
-        if (typeof val === "object") {
+        if (typeof val === "object" || Array.isArray(val)) {
             val = JSON.stringify(val, null, 4);
         }
 
@@ -113,14 +110,15 @@ export class EditExample20DialogComponent {
             contentType: this.model.contentType,
             value: this.model.value
         };
-        // TODO investigate whether to restore this functionality (treat JSON data differently)
-        // if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
-        //     try {
-        //         event.value = JSON.parse(this.model.value);
-        //     } catch (e) {
-        //         console.error("[EditExample20DialogComponent] Failed to parse example.");
-        //     }
-        // }
+
+        // Convert to jsobject if the data is JSON and is valid
+        if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
+            try {
+                event.value = JSON.parse(this.model.value);
+            } catch (e) {
+                console.error("[EditExample20DialogComponent] Failed to parse example.");
+            }
+        }
         this.onEdit.emit(event);
         this.cancel();
     }

diff --git a/...nd/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/edit-example.component.ts b/...nd/studio/src/app/pages/apis/{apiId}/editor/_components/dialogs/edit-example.component.ts
@@ -79,7 +79,7 @@ export class EditExampleDialogComponent {
         };
 
         let val: any = example.value;
-        if (typeof val === "object") {
+        if (typeof val === "object" || Array.isArray(val)) {
             val = JSON.stringify(val, null, 4);
         }
 
@@ -108,14 +108,15 @@ export class EditExampleDialogComponent {
             example: this.example,
             value: this.model.value
         };
-        // TODO investigate whether to restore this functionality (treat JSON data differently)
-        // if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
-        //     try {
-        //         event.value = JSON.parse(this.model.value);
-        //     } catch (e) {
-        //         console.error("[EditExampleDialogComponent] Failed to parse example.");
-        //     }
-        // }
+
+        // Convert to jsobject if the data is JSON and is valid
+        if (this.model.valid && this.model.format === CodeEditorMode.JSON) {
+            try {
+                event.value = JSON.parse(this.model.value);
+            } catch (e) {
+                console.error("[EditExampleDialogComponent] Failed to parse example.");
+            }
+        }
         this.onEdit.emit(event);
         this.cancel();
     }

diff --git a/...c/app/pages/apis/{apiId}/editor/_components/forms/definition/example-section.component.ts b/...c/app/pages/apis/{apiId}/editor/_components/forms/definition/example-section.component.ts
@@ -23,6 +23,7 @@ import {AbstractBaseComponent} from "../../common/base-component";
 import {DocumentService} from "../../../_services/document.service";
 import {SelectionService} from "../../../_services/selection.service";
 import {ModelUtils} from "../../../_util/model.util";
+import {StringUtils} from "apicurio-ts-core";
 
 
 @Component({
@@ -36,16 +37,27 @@ export class DefinitionExampleSectionComponent extends AbstractBaseComponent {
 
     @Input() definition: Oas20SchemaDefinition | Oas30SchemaDefinition;
 
+    /**
+     * C'tor.
+     * @param changeDetectorRef
+     * @param documentService
+     * @param commandService
+     * @param selectionService
+     */
     constructor(private changeDetectorRef: ChangeDetectorRef, private documentService: DocumentService,
                 private commandService: CommandService, private selectionService: SelectionService) {
         super(changeDetectorRef, documentService, selectionService);
     }
 
     /**
-     * returns the example.
+     * Returns the example.  Converts to a string if the example is an object.
      */
     public example(): string {
-        return this.definition.example;
+        let value: string = this.definition.example;
+        if (typeof value === "object" || Array.isArray(value)) {
+            value = JSON.stringify(value, null,  4);
+        }
+        return value;
     }
 
     /**
@@ -54,8 +66,16 @@ export class DefinitionExampleSectionComponent extends AbstractBaseComponent {
      */
     public onExampleChange(newExample: string): void {
         console.info("[DefinitionExampleSectionComponent] User changed the data type example.");
+        let newValue: any = newExample;
+        if (StringUtils.isJSON(newValue)) {
+            try {
+                newValue = JSON.parse(newValue);
+            } catch (e) {
+                console.info("[DefinitionExampleSectionComponent] Failed to parse example: ", e);
+            }
+        }
         let command: ICommand = createChangePropertyCommand(this.definition.ownerDocument(), this.definition,
-            "example", newExample);
+            "example", newValue);
         this.commandService.emit(command);
     }
 

diff --git a/...pp/pages/apis/{apiId}/editor/_components/forms/path/operation/response-tab.component.html b/...pp/pages/apis/{apiId}/editor/_components/forms/path/operation/response-tab.component.html
@@ -38,7 +38,7 @@
                         <td class="content-type">
                             <span>{{ contentType }}</span>
                         </td>
-                        <td class="value pre-actions">{{ exampleValue(contentType) }}</td>
+                        <td class="value pre-actions">{{ exampleDisplayValue(contentType) }}</td>
                         <td class="actions">
                             <div>
                                 <icon-button (onClick)="deleteExample(contentType)" [pullRight]="true" type="delete"

diff --git a/.../app/pages/apis/{apiId}/editor/_components/forms/path/operation/response-tab.component.ts b/.../app/pages/apis/{apiId}/editor/_components/forms/path/operation/response-tab.component.ts
@@ -89,14 +89,19 @@ export class ResponseTabComponent extends AbstractBaseComponent {
         return this.response.examples.exampleContentTypes();
     }
 
-    public exampleValue(contentType: string): string {
+    public exampleDisplayValue(contentType: string): string {
         let evalue: any = this.response.examples.example(contentType);
         if (typeof evalue === "object" || Array.isArray(evalue)) {
             evalue = JSON.stringify(evalue);
         }
         return evalue;
     }
 
+    public exampleValue(contentType: string): string {
+        let evalue: any = this.response.examples.example(contentType);
+        return evalue;
+    }
+
     public displayType(): SimplifiedType {
         return SimplifiedType.fromSchema(this.response.schema);
     }