Examples column added to operation details table (#2012)

Azure · Dec 1, 2022 · 0939b62 · 0939b62
1 parent f30cc70
commit 0939b62
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 14 deletions.
diff --git a/src/components/operations/operation-details/ko/operationDetailsEditor.html b/src/components/operations/operation-details/ko/operationDetailsEditor.html
@@ -35,6 +35,13 @@
                     Automatically scroll to operation name
                 </label>
             </div>
+            <div class="form-group">
+                <label for="showExamples" class="form-label">
+                    <input type="checkbox" id="showExamples" name="showExamples"
+                        data-bind="checked: showExamples" />
+                    Show field examples in a table column
+                </label>
+            </div>
             <div class="form-group">
                 <label for="defaultSchemaView" class="form-label">
                     Default schema view

diff --git a/src/components/operations/operation-details/ko/operationDetailsEditor.ts b/src/components/operations/operation-details/ko/operationDetailsEditor.ts
@@ -12,12 +12,14 @@ export class OperationDetailsEditor {
     public readonly enableScrollTo: ko.Observable<boolean>;
     public readonly defaultSchemaView: ko.Observable<string>;
     public readonly useCorsProxy: ko.Observable<boolean>;
+    public readonly showExamples: ko.Observable<boolean>;
 
     constructor() {
         this.enableConsole = ko.observable();
         this.enableScrollTo = ko.observable();
         this.defaultSchemaView = ko.observable();
         this.useCorsProxy = ko.observable();
+        this.showExamples = ko.observable();
     }
 
     @Param()
@@ -32,18 +34,21 @@ export class OperationDetailsEditor {
         this.useCorsProxy(this.model.useCorsProxy);
         this.enableScrollTo(this.model.enableScrollTo);
         this.defaultSchemaView(this.model.defaultSchemaView || "table");
-
+        this.showExamples(this.model.showExamples);
+
         this.enableConsole.subscribe(this.applyChanges);
         this.useCorsProxy.subscribe(this.applyChanges);
         this.enableScrollTo.subscribe(this.applyChanges);
         this.defaultSchemaView.subscribe(this.applyChanges);
+        this.showExamples.subscribe(this.applyChanges);
     }
 
     private applyChanges(): void {
         this.model.enableConsole = this.enableConsole();
         this.model.useCorsProxy = this.useCorsProxy();
         this.model.enableScrollTo = this.enableScrollTo();
         this.model.defaultSchemaView = this.defaultSchemaView();
+        this.model.showExamples = this.showExamples();
         this.onChange(this.model);
     }
 }
diff --git a/src/components/operations/operation-details/ko/operationDetailsViewModelBinder.ts b/src/components/operations/operation-details/ko/operationDetailsViewModelBinder.ts
@@ -31,7 +31,8 @@ export class OperationDetailsViewModelBinder implements ViewModelBinder<Operatio
             enableConsole: model.enableConsole,
             enableScrollTo: model.enableScrollTo,
             defaultSchemaView: model.defaultSchemaView,
-            useCorsProxy: model.useCorsProxy
+            useCorsProxy: model.useCorsProxy,
+            showExamples: model.showExamples,
         };
 
         viewModel.config(JSON.stringify(runtimeConfig));

diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.html b/src/components/operations/operation-details/ko/runtime/operation-details.html
@@ -233,7 +233,7 @@ <h4>Response headers</h4>
                 <div class="tab-content">
                     <!-- ko if: representation.typeName -->
                     <type-definition
-                        params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionForRepresentation(representation), defaultSchemaView: $component.defaultSchemaView }">
+                        params="{ apiName: $component.api().name, operationName: $component.operation().name, definition: $component.getDefinitionForRepresentation(representation), defaultSchemaView: $component.defaultSchemaView, examples: $component.examples()[response.identifier]?.[representation.contentType] }">
                     </type-definition>
                     <!-- /ko -->
 

diff --git a/src/components/operations/operation-details/ko/runtime/operation-details.ts b/src/components/operations/operation-details/ko/runtime/operation-details.ts
@@ -5,8 +5,8 @@ import { Component, RuntimeComponent, OnMounted, OnDestroyed, Param } from "@pap
 import { Api } from "../../../../../models/api";
 import { Operation } from "../../../../../models/operation";
 import { ApiService } from "../../../../../services/apiService";
-import { AuthorizationServer } from "./../../../../../models/authorizationServer";
-import { Representation } from "./../../../../../models/representation";
+import { AuthorizationServer } from "../../../../../models/authorizationServer";
+import { Representation } from "../../../../../models/representation";
 import { RouteHelper } from "../../../../../routing/routeHelper";
 import { Utils } from "../../../../../utils";
 import { TypeOfApi } from "../../../../../constants";
@@ -17,7 +17,8 @@ import {
     TypeDefinitionPropertyTypeArrayOfReference,
     TypeDefinitionPropertyTypeArrayOfPrimitive,
     TypeDefinitionPropertyTypeCombination,
-    TypeDefinitionPropertyTypePrimitive
+    TypeDefinitionPropertyTypePrimitive,
+    OperationExamples,
 } from "../../../../../models/typeDefinition";
 import { OAuthService } from "../../../../../services/oauthService";
 import { LruCache } from "@paperbits/common/caching/lruCache";
@@ -49,6 +50,7 @@ export class OperationDetails {
     public readonly associatedAuthServer: ko.Observable<AuthorizationServer>;
     public readonly apiType: ko.Observable<string>;
     public readonly protocol: ko.Computed<string>;
+    public readonly examples: ko.Observable<OperationExamples>;
 
     constructor(
         private readonly apiService: ApiService,
@@ -112,6 +114,8 @@ export class OperationDetails {
 
             return api.protocols?.join(", ");
         });
+        this.examples = ko.observable({});
+
         this.apiType = ko.observable();
         this.onRouteChange = this.onRouteChange.bind(this);
 
@@ -132,6 +136,9 @@ export class OperationDetails {
     @Param()
     public defaultSchemaView: ko.Observable<string>;
 
+    @Param()
+    public showExamples: boolean;
+
     @OnMounted()
     public async initialize(): Promise<void> {
         const apiName = this.routeHelper.getApiName();
@@ -210,6 +217,7 @@ export class OperationDetails {
 
         if (operation) {
             await this.loadDefinitions(operation);
+            if (this.showExamples) this.parseExamples(operation);
             this.operation(operation);
         }
         else {
@@ -329,6 +337,40 @@ export class OperationDetails {
         return result;
     }
 
+    private parseExamples(operation: Operation): void {
+        const examples = operation.getMeaningfulResponses().reduce((acc, cur) => {
+            const representations = cur.meaningfulRepresentations();
+            if (!representations || !representations.length) return acc;
+
+            const examplesObj = {}
+            representations.forEach(representation => {
+                const value = representation.examples?.[0]?.value;
+                if (!value) return;
+
+                let valueObj;
+                try {
+                    valueObj = JSON.parse(value);
+                } catch (e) {
+                    return;
+                }
+
+                const contentTypeObj = {}
+                Object.entries(valueObj).forEach(([key, val]) => {
+                    if (typeof val === 'object') return
+                    contentTypeObj[key] = val.toString();
+                })
+
+                if (Object.keys(contentTypeObj).length) examplesObj[representation.contentType] = contentTypeObj;
+            });
+            if (!Object.keys(examplesObj).length) return acc;
+
+            acc[cur.identifier] = examplesObj;
+            return acc;
+        }, {} as OperationExamples);
+
+        this.examples(examples);
+    }
+
     public async loadGatewayInfo(apiName: string): Promise<void> {
         const hostnames = await this.apiService.getApiHostnames(apiName);
 

diff --git a/src/components/operations/operation-details/ko/runtime/type-definition-object.html b/src/components/operations/operation-details/ko/runtime/type-definition-object.html
@@ -1,6 +1,6 @@
 <!-- ko if: properties.length > 0 -->
 
-<div role="table" class="table-preset" data-bind="css: readOnly === true ? 'table-preset-schema-readonly' : 'table-preset-schema'">
+<div role="table" class="table-preset table-preset-schema" data-bind="css: {'table-preset-schema-examples': $component.examples, 'table-preset-schema-readonly': readOnly}">
     <div class="d-contents" role="rowgroup">
         <div class="d-contents" role="row">
             <div role="columnheader" class="table-preset-head text-truncate">Name</div>
@@ -9,6 +9,9 @@
             <div role="columnheader" class="table-preset-head text-truncate">Read-only</div>
             <!-- /ko -->
             <div role="columnheader" class="table-preset-head text-truncate">Type</div>
+            <!-- ko if: $component.examples -->
+            <div role="columnheader" class="table-preset-head text-truncate">Example</div>
+            <!-- /ko -->
             <div role="columnheader" class="table-preset-head">Description</div>
         </div>
     </div>
@@ -63,6 +66,9 @@
 
                 <!-- /ko -->
             </div>
+            <!-- ko if: $component.examples -->
+            <div role="cell" class="text-truncate" data-bind="text: $component.examples[property.name], attr: {title: $component.examples[property.name]}"></div>
+            <!-- /ko -->
             <div role="cell" data-bind="markdown: property.description"></div>
         </div>
         <!-- /ko -->

diff --git a/src/components/operations/operation-details/ko/runtime/type-definition.ts b/src/components/operations/operation-details/ko/runtime/type-definition.ts
@@ -51,6 +51,9 @@ export class TypeDefinitionViewModel {
     @Param()
     public defaultSchemaView: ko.Observable<string>;
 
+    @Param()
+    public examples?: Record<string, string>;
+
     @OnMounted()
     public initialize(): void {
         this.schemaView(this.defaultSchemaView() || "table");

diff --git a/src/components/operations/operation-details/operationDetailsContract.ts b/src/components/operations/operation-details/operationDetailsContract.ts
@@ -1,6 +1,6 @@
 import { Contract } from "@paperbits/common";
 
-export interface OperationDetailsContract extends Contract { 
+export interface OperationDetailsContract extends Contract {
     /**
      * Indicates whether "Try" button should appear on the operation details widget.
      */
@@ -20,4 +20,9 @@ export interface OperationDetailsContract extends Contract {
      * Indicates whether the Test console should use CORS proxy vs direct calls from the browser.
      */
     useCorsProxy?: boolean;
+
+    /**
+     * Show operation attribute values examples in a column in tables.
+     */
+    showExamples?: boolean;
 }
diff --git a/src/components/operations/operation-details/operationDetailsModel.ts b/src/components/operations/operation-details/operationDetailsModel.ts
@@ -19,6 +19,11 @@ export class OperationDetailsModel {
      */
     public useCorsProxy?: boolean;
 
+    /**
+     * Show operation attribute values examples in a column in tables.
+     */
+    public showExamples?: boolean;
+
     constructor() {
         this.enableConsole = true;
     }

diff --git a/src/components/operations/operation-details/operationDetailsModelBinder.ts b/src/components/operations/operation-details/operationDetailsModelBinder.ts
@@ -19,6 +19,7 @@ export class OperationDetailsModelBinder implements IModelBinder<OperationDetail
         model.enableScrollTo = contract.enableScrollTo !== undefined && contract.enableScrollTo === true;
         model.defaultSchemaView = contract.defaultSchemaView || "table";
         model.useCorsProxy = contract.useCorsProxy;
+        model.showExamples = contract.showExamples || false;
 
         return model;
     }
@@ -29,7 +30,8 @@ export class OperationDetailsModelBinder implements IModelBinder<OperationDetail
             enableConsole: model.enableConsole,
             enableScrollTo: model.enableScrollTo,
             defaultSchemaView: model.defaultSchemaView,
-            useCorsProxy: model.useCorsProxy
+            useCorsProxy: model.useCorsProxy,
+            showExamples: model.showExamples,
         };
 
         return contract;

diff --git a/src/models/typeDefinition.ts b/src/models/typeDefinition.ts
@@ -18,6 +18,8 @@ export interface ProcessedCombinationPropertiesObject {
     combinationRequiredPropereties?: string[];
 }
 
+export type OperationExamples = Record<string, Record<string, Record<string, string>>>;
+
 export abstract class TypeDefinitionPropertyType {
     public displayAs: string;
 
@@ -282,11 +284,11 @@ export class TypeDefinitionObjectProperty extends TypeDefinitionProperty {
             processedTypeDefinitionsArray = combinationPropertiesProcessed.combinationReferenceObjectsArray;
             processedTypeDefinitionsArray.push(
                 new TypeDefinition(
-                    "Other properties", 
+                    "Other properties",
                     {
                         properties: combinationPropertiesProcessed.combinationOtherProperties,
                         required: combinationPropertiesProcessed.combinationRequiredPropereties
-                    }, 
+                    },
                     definitions
                 ));
 
@@ -305,8 +307,8 @@ export class TypeDefinitionObjectProperty extends TypeDefinitionProperty {
             if (combinationArrayItem.allOf || combinationArrayItem.anyOf || combinationArrayItem.oneOf) {
                 const { combinationType, combinationArray } = this.destructCombination(combinationArrayItem);
                 processedCombinationPropertiesObject = this.processCombinationProperties(combinationArray, definitions, processedCombinationPropertiesObject);
-            } 
-            
+            }
+
             if (combinationArrayItem.$ref) {
                 const combinationReferenceName = this.getTypeNameFromRef(combinationArrayItem.$ref);
                 processedCombinationPropertiesObject.combinationReferencesNames.push(combinationReferenceName);
@@ -317,7 +319,7 @@ export class TypeDefinitionObjectProperty extends TypeDefinitionProperty {
             if (combinationArrayItem.required) {
                 processedCombinationPropertiesObject.combinationRequiredPropereties = combinationArrayItem.required;
             }
-            
+
             if (combinationArrayItem.properties) {
                 processedCombinationPropertiesObject.combinationOtherProperties = { ...processedCombinationPropertiesObject.combinationOtherProperties, ...combinationArrayItem.properties };
             }

diff --git a/src/themes/website/styles/tables.scss b/src/themes/website/styles/tables.scss
@@ -105,10 +105,18 @@ $body-bg: none;
     grid-template-columns: minmax(150px, 350px) 100px 200px minmax(350px, 1fr);
 }
 
+.table-preset-schema-examples {
+    grid-template-columns: minmax(150px, 350px) 100px 150px 150px minmax(350px, 1fr);
+}
+
 .table-preset-schema-readonly {
     grid-template-columns: minmax(150px, 350px) 100px 100px 200px minmax(350px, 1fr);
 }
 
+.table-preset-schema-examples.table-preset-schema-readonly {
+    grid-template-columns: minmax(150px, 350px) 100px 100px 100px 150px minmax(350px, 1fr);
+}
+
 .table-preset-definitions {
     grid-template-columns: minmax(150px, 350px) minmax(350px, 1fr);
 }