Add dropdown for the case when there are multiple examples (#2208)

* Add dropdown for the case when there are multiple examples
---------

Co-authored-by: Farhad Alizada <falizada@microsoft.com>

Author: f-alizada

src/components/operations/operation-details/ko/runtime/operation-details.html

@@ -175,11 +175,30 @@ <h4>Request body</h4>
                     <!-- /ko -->
 
                     <!-- ko if: representation.examples -->
-                    <!-- ko foreach: { data: representation.examples, as: 'example' } -->
+                    <!-- ko if: representation.examples.length > 1 -->
+                        <div class="row flex flex-row example-form-control">
+                            <div class="col-12">
+                                <label data-bind="attr : { for: 'select' + representation.contentType + '_' + $index() }, text: 'Examples'"></label>
+                            </div>
+                            <div class="col-4">
+                                <div class="form-group">
+                                    <select class="form-control" data-bind="options: representation.examples, value: $component.selectedRepresentatnionsValue()[representation.contentType] ,optionsValue: 'title', optionsText: 'title', attr : {title: 'Representation examples selector', id: 'select-' + representation.contentType + '_' + $index() }"></select>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- ko foreach: { data: representation.examples, as: 'example' } -->
+                        <code-snippet data-bind="visible: $component.selectedRepresentatnionsValue()[representation.contentType]() == example.title"
+                            params="{ title: example.title, content: example.value, language: example.format, description: example.description }">
+                        </code-snippet>
+                        <!-- /ko -->
+                    <!-- /ko -->
+
+                    <!-- ko if: representation.examples.length == 1 -->
                     <code-snippet
-                        params="{ title: example.title, content: example.value, language: example.format, description: example.description }">
+                        params="{ title: representation.examples[0].title, content: representation.examples[0].value, language: representation.examples[0].format, description: representation.examples[0].description }">
                     </code-snippet>
                     <!-- /ko -->
+
                     <!-- /ko -->
                 </div>
             </div>

src/components/operations/operation-details/ko/runtime/operation-details.ts

@@ -52,6 +52,9 @@ export class OperationDetails {
     public readonly protocol: ko.Computed<string>;
     public readonly examples: ko.Observable<OperationExamples>;
 
+    public readonly selectedRepresentatnionsValue: ko.Observable<object>;
+
+
     constructor(
         private readonly apiService: ApiService,
         private readonly oauthService: OAuthService,
@@ -73,6 +76,8 @@ export class OperationDetails {
         this.defaultSchemaView = ko.observable("table");
         this.useCorsProxy = ko.observable();
         this.includeAllHostnames = ko.observable();
+        this.selectedRepresentatnionsValue = ko.observable<object>();
+        
         this.requestUrlSample = ko.computed(() => {
 
             const api = this.api();
@@ -115,6 +120,7 @@ export class OperationDetails {
 
             return api.protocols?.join(", ");
         });
+
         this.examples = ko.observable({});
 
         this.apiType = ko.observable();
@@ -231,7 +237,10 @@ export class OperationDetails {
 
         if (operation) {
             await this.loadDefinitions(operation);
-            if (this.showExamples) this.parseExamples(operation);
+            if (this.showExamples) this.parseResponseExamples(operation);
+
+            this.loadRequestExamples(operation);
+
             this.operation(operation);
         }
         else {
@@ -244,6 +253,19 @@ export class OperationDetails {
         this.working(false);
     }
 
+    public async loadRequestExamples(operation: Operation): Promise<void> {
+        const representations = operation.request.meaningfulRepresentations();
+        const requestExamples = {};
+        if (representations && representations.length) {
+            for(let i = 0; i < representations.length; i++) {
+                const value = representations[i].examples?.[0];
+                if (!value) continue;
+                requestExamples[representations[i].contentType] =  ko.observable(value.title);
+            }
+        }
+        this.selectedRepresentatnionsValue(requestExamples);
+    }
+
     public async loadDefinitions(operation: Operation): Promise<void> {
         const cachedDefinitions = this.definitionsCache.getItem(operation.id);
         if (cachedDefinitions) {
@@ -346,11 +368,11 @@ export class OperationDetails {
         return result;
     }
 
-    private parseExamples(operation: Operation): void {
+    private parseResponseExamples(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;

src/themes/website/styles/operations.scss

@@ -0,0 +1,11 @@
+.example-form-control{
+    padding-left: 8px;
+
+    label {
+        font-weight: bold;
+    }
+
+    select {
+        margin-bottom: 0px;
+    }
+}

src/themes/website/styles/styles.scss

@@ -31,3 +31,4 @@
 @import "gql.scss";
 @import "details.scss";
 @import "subscriptions.scss";
+@import "operations.scss";