From cba6409e5dda5d0ca9bde5426fc5c1cecdab78a9 Mon Sep 17 00:00:00 2001
From: Alexander Zaslonov <zaslonov.alexander@gmail.com>
Date: Thu, 4 Jun 2020 17:15:30 -0700
Subject: [PATCH] Added support for wildcard hostnames in Test console. (#681)

---
 .../ko/runtime/operation-console.html         | 99 +++++++++++--------
 .../ko/runtime/operation-console.ts           | 20 +++-
 src/themes/website/styles/forms.scss          |  4 +
 src/themes/website/styles/reboot.scss         |  1 -
 src/themes/website/styles/utils.scss          |  4 +
 5 files changed, 80 insertions(+), 48 deletions(-)

diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.html b/src/components/operations/operation-details/ko/runtime/operation-console.html
index 7ddee6bc6..6d1d165de 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-console.html
+++ b/src/components/operations/operation-details/ko/runtime/operation-console.html
@@ -8,7 +8,7 @@
 
 <div class="panel panel-dark animation-fade-in" data-bind="with: consoleOperation">
     <button type="button" class="no-border pull-right" data-dismiss="modal" aria-label="Close console"
-            data-bind="click: $parents[1].closeConsole">
+        data-bind="click: $parents[1].closeConsole">
         <i class="icon icon-simple-remove"></i>
     </button>
 
@@ -36,11 +36,13 @@ <h3>Host</h3>
 
     <div class="row flex flex-row">
         <div class="col-4">
-            <input type="text" readonly class="form-control form-control-sm" value="Hostname" />
+            <label for="hostname" class="text-monospace form-label">
+                Hostname
+            </label>
         </div>
         <div class="col-6">
             <div class="form-group">
-                <select id="hostnames" class="form-control" data-bind="value: $component.requestHostname">
+                <select id="hostname" class="form-control" data-bind="value: $component.selectedHostname">
                     <!-- ko foreach: { data: $component.hostnames, as: 'hostname' } -->
                     <option data-bind="value: hostname, text: hostname"></option>
                     <!-- /ko -->
@@ -50,11 +52,30 @@ <h3>Host</h3>
     </div>
     <!-- /ko -->
 
+    <!-- ko if: $component.isHostnameWildcarded -->
+    <div class="row flex flex-row">
+        <div class="col-4">
+            <label for="wildcardSegment" class="text-monospace form-label">
+                Wildcard segment
+            </label>
+        </div>
+        <div class="col-6">
+            <div class="form-group">
+                <input id="wildcardSegment" type="text" autocomplete="off" class="form-control form-control-sm"
+                    placeholder="name" spellcheck="false"
+                    data-bind="event: { keyup: $component.updateRequestSummary }, textInput: $component.wildcardSegment">
+            </div>
+        </div>
+    </div>
+    <!-- /ko -->
+
     <h3>Authorization</h3>
 
     <div class="row flex flex-row">
         <div class="col-4">
-            <input type="text" readonly class="form-control form-control-sm" value="Subscription key" />
+            <label for="subscriptionKey" class="text-monospace form-label">
+                Subscription key
+            </label>
         </div>
         <div class="col-6">
             <div class="form-group">
@@ -71,37 +92,31 @@ <h3>Authorization</h3>
                 <!-- /ko -->
                 <!-- ko if: !$component.products() || $component.products().length === 0 -->
                 <input type="text" class="form-control" placeholder="subscription key"
-                       data-bind="textInput: $component.selectedSubscriptionKey" />
+                    data-bind="textInput: $component.selectedSubscriptionKey" />
                 <!-- /ko -->
             </div>
         </div>
     </div>
 
-    <h4>Parameters</h4>
+    <h3>Parameters</h3>
     <!-- ko if: (templateParameters && templateParameters().length > 0) || (request.queryParameters && request.queryParameters().length > 0) -->
     <div data-bind="foreach: { data: templateParameters, as: 'parameter' }">
         <div class="row flex flex-row">
             <div class="col-4">
-                <div class="form-group">
-                    <div class="input-group">
-                        <input type="text" readonly autocomplete="off" class="form-control form-control-sm"
-                               placeholder="name" spellcheck="false" aria-label="Parameter name"
-                               data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.name">
-                        <span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
-                    </div>
-                </div>
+                <label class="text-monospace form-label" data-bind="text: parameter.name">
+                </label>
             </div>
             <div class="col-6">
                 <div class="form-group">
                     <!-- ko if: parameter.options.length > 0 -->
                     <select class="form-control" aria-label="Parameter value"
-                            data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
+                        data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                     <!-- /ko -->
                     <!-- ko if: parameter.options.length === 0 -->
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                               spellcheck="false" aria-label="Parameter value"
-                               data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
+                            spellcheck="false" aria-label="Parameter value"
+                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
                         <span class="invalid-feedback" data-bind="validationMessage: parameter.value"></span>
                     </div>
                     <!-- /ko -->
@@ -115,7 +130,7 @@ <h4>Parameters</h4>
                 <div class="form-group">
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="name"
-                               spellcheck="false" aria-label="Parameter name" data-bind="textInput: parameter.name">
+                            spellcheck="false" aria-label="Parameter name" data-bind="textInput: parameter.name">
                         <span class="invalid-feedback" data-bind="validationMessage: parameter.name"></span>
                     </div>
                 </div>
@@ -124,12 +139,12 @@ <h4>Parameters</h4>
                 <div class="form-group">
                     <!-- ko if: parameter.options.length > 0 -->
                     <select class="form-control" aria-label="Parameter value"
-                            data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
+                        data-bind="value: parameter.value, options: parameter.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                     <!-- /ko -->
                     <!-- ko if: parameter.options.length === 0 -->
                     <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                           spellcheck="false" aria-label="Parameter value"
-                           data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
+                        spellcheck="false" aria-label="Parameter value"
+                        data-bind="event: { keyup: $component.updateRequestSummary }, textInput: parameter.value">
                     <!-- /ko -->
                 </div>
             </div>
@@ -155,7 +170,7 @@ <h3>Headers</h3>
                 <div class="form-group">
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="name"
-                               spellcheck="false" aria-label="Header name" data-bind="textInput: header.name">
+                            spellcheck="false" aria-label="Header name" data-bind="textInput: header.name">
                         <span class="invalid-feedback" data-bind="validationMessage: header.name"></span>
                     </div>
                 </div>
@@ -164,18 +179,16 @@ <h3>Headers</h3>
                 <div class="form-group">
                     <!-- ko if: header.options && header.options.length > 0 -->
                     <select class="form-control" aria-label="Header value"
-                            data-bind="value: header.value, options: header.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
+                        data-bind="value: header.value, options: header.options, optionsAfterRender: $component.updateRequestSummary, event:{ change: $component.updateRequestSummary }"></select>
                     <!-- /ko -->
                     <!-- ko if: !header.options || header.options.length === 0 -->
                     <div class="input-group">
                         <input type="text" autocomplete="off" class="form-control form-control-sm" placeholder="value"
-                               spellcheck="false" aria-label="Header value"
-                               data-bind="event: { keyup: $component.updateRequestSummary }, textInput: header.value">
+                            spellcheck="false" aria-label="Header value"
+                            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: header.value">
                         <span class="invalid-feedback" data-bind="validationMessage: header.value"></span>
                     </div>
                     <!-- /ko -->
-
-
                 </div>
             </div>
             <div class="col-2">
@@ -196,24 +209,24 @@ <h3>Body</h3>
     <div class="flex justify-content-end">
         <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatRaw" value="raw"
-                   data-bind="checked: request.bodyFormat">
+                data-bind="checked: request.bodyFormat">
             <label class="form-check-label" for="bodyFormatRaw">Raw</label>
         </div>
         <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="bodyFormat" id="bodyFormatBinary" value="binary"
-                   data-bind="checked: request.bodyFormat">
+                data-bind="checked: request.bodyFormat">
             <label class="form-check-label" for="bodyFormatBinary">Binary</label>
         </div>
     </div>
     <div class="form-group">
         <!-- ko if: request.bodyFormat() === 'raw' -->
         <textarea class="form-control form-control-sm" rows="5"
-                  data-bind="event: { keyup: $component.updateRequestSummary }, textInput: request.body, valueUpdate: 'keyup'"></textarea>
+            data-bind="event: { keyup: $component.updateRequestSummary }, textInput: request.body, valueUpdate: 'keyup'"></textarea>
         <!-- /ko -->
         <!-- ko if: request.bodyFormat() === 'binary' -->
-        <file-input params="{ onSelect: $component.onFileSelect }" class="form-control" data-bind="css: { 'is-invalid': !request.binary.isValid() }"></file-input>
-        <span class="invalid-feedback"
-              data-bind="validationMessage: request.binary"></span>
+        <file-input params="{ onSelect: $component.onFileSelect }" class="form-control"
+            data-bind="css: { 'is-invalid': !request.binary.isValid() }"></file-input>
+        <span class="invalid-feedback" data-bind="validationMessage: request.binary"></span>
         <!-- /ko -->
     </div>
     <!-- /ko -->
@@ -223,55 +236,55 @@ <h3>Body</h3>
     <ul class="nav" role="tablist">
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'http'), css: { 'nav-link-active': $component.selectedLanguage() === 'http' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'http'), css: { 'nav-link-active': $component.selectedLanguage() === 'http' }">
                 HTTP
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'curl'), css: { 'nav-link-active': $component.selectedLanguage() === 'curl' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'curl'), css: { 'nav-link-active': $component.selectedLanguage() === 'curl' }">
                 Curl
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'csharp'), css: { 'nav-link-active': $component.selectedLanguage() === 'csharp' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'csharp'), css: { 'nav-link-active': $component.selectedLanguage() === 'csharp' }">
                 C#
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'java'), css: { 'nav-link-active': $component.selectedLanguage() === 'java' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'java'), css: { 'nav-link-active': $component.selectedLanguage() === 'java' }">
                 Java
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'javascript'), css: { 'nav-link-active': $component.selectedLanguage() === 'javascript' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'javascript'), css: { 'nav-link-active': $component.selectedLanguage() === 'javascript' }">
                 JavaScript
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'php'), css: { 'nav-link-active': $component.selectedLanguage() === 'php' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'php'), css: { 'nav-link-active': $component.selectedLanguage() === 'php' }">
                 PHP
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'python'), css: { 'nav-link-active': $component.selectedLanguage() === 'python' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'python'), css: { 'nav-link-active': $component.selectedLanguage() === 'python' }">
                 Python
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'ruby'), css: { 'nav-link-active': $component.selectedLanguage() === 'ruby' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'ruby'), css: { 'nav-link-active': $component.selectedLanguage() === 'ruby' }">
                 Ruby
             </a>
         </li>
         <li class="nav-item" role="presentation">
             <a class="nav-link" href="#" role="tab"
-               data-bind="click: $component.selectedLanguage.bind(this, 'objc'), css: { 'nav-link-active': $component.selectedLanguage() === 'objc' }">
+                data-bind="click: $component.selectedLanguage.bind(this, 'objc'), css: { 'nav-link-active': $component.selectedLanguage() === 'objc' }">
                 Objective C
             </a>
         </li>
@@ -281,7 +294,7 @@ <h3>HTTP request</h3>
     <div class="code-block">
         <div class="code-block-heading">
             <button class="code-block-command" data-bind="copyToClipboard: $component.codeSample"
-                    aria-label="Copy to clipboard">
+                aria-label="Copy to clipboard">
                 <i class="icon icon-duplicate"></i> Copy
             </button>
         </div>
diff --git a/src/components/operations/operation-details/ko/runtime/operation-console.ts b/src/components/operations/operation-details/ko/runtime/operation-console.ts
index b244fc929..46419ffa5 100644
--- a/src/components/operations/operation-details/ko/runtime/operation-console.ts
+++ b/src/components/operations/operation-details/ko/runtime/operation-console.ts
@@ -43,8 +43,10 @@ export class OperationConsole {
     public readonly selectedProduct: ko.Observable<Product>;
     public readonly requestError: ko.Observable<string>;
     public readonly codeSample: ko.Observable<string>;
-    public readonly requestHostname: ko.Observable<string>;
+    public readonly selectedHostname: ko.Observable<string>;
+    public readonly isHostnameWildcarded: ko.Computed<boolean>;
     public readonly hostnameSelectionEnabled: ko.Observable<boolean>;
+    public readonly wildcardSegment: ko.Observable<string>;
     public masterKey: string;
     public isConsumptionMode: boolean;
     public templates: Object;
@@ -78,8 +80,11 @@ export class OperationConsole {
         this.codeSample = ko.observable();
         this.selectedProduct = ko.observable();
         this.onFileSelect = this.onFileSelect.bind(this);
-        this.requestHostname = ko.observable();
+        this.selectedHostname = ko.observable("");
         this.hostnameSelectionEnabled = ko.observable();
+        this.isHostnameWildcarded = ko.computed(() => this.selectedHostname().includes("*"));
+
+        this.wildcardSegment = ko.observable();
 
         validation.rules["maxFileSize"] = {
             validator: (file: File, maxSize: number) => !file || file.size < maxSize,
@@ -115,7 +120,14 @@ export class OperationConsole {
 
         await this.resetConsole();
 
-        this.requestHostname.subscribe(this.setHostname);
+        this.selectedHostname.subscribe(this.setHostname);
+        this.wildcardSegment.subscribe((wildcardSegment) => {
+            const hostname = wildcardSegment
+                ? this.selectedHostname().replace("*", wildcardSegment)
+                : this.selectedHostname();
+
+            this.setHostname(hostname);
+        });
         this.selectedSubscriptionKey.subscribe(this.applySubscriptionKey.bind(this));
         this.api.subscribe(this.resetConsole);
         this.operation.subscribe(this.resetConsole);
@@ -148,7 +160,7 @@ export class OperationConsole {
         this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
 
         const hostname = hostnames[0];
-        this.requestHostname(hostname);
+        this.selectedHostname(hostname);
 
         this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
         consoleOperation.host.hostname(hostname);
diff --git a/src/themes/website/styles/forms.scss b/src/themes/website/styles/forms.scss
index b6568bff5..38a8d7e8c 100644
--- a/src/themes/website/styles/forms.scss
+++ b/src/themes/website/styles/forms.scss
@@ -63,6 +63,10 @@ $switch-trigger-size: $switch-height - $switch-trigger-gap * 2;
     }
 }
 
+.form-label {
+    padding: .375rem .75rem;
+}
+
 .form-control {
     display: block;
     width: 100%;
diff --git a/src/themes/website/styles/reboot.scss b/src/themes/website/styles/reboot.scss
index 86bf540b3..63671d7f4 100644
--- a/src/themes/website/styles/reboot.scss
+++ b/src/themes/website/styles/reboot.scss
@@ -166,7 +166,6 @@ th {
 }
 label {
     display: inline-block;
-    margin-bottom: 0.5rem;
 }
 button {
     border-radius: 0;
diff --git a/src/themes/website/styles/utils.scss b/src/themes/website/styles/utils.scss
index 37f36c301..c03691d66 100644
--- a/src/themes/website/styles/utils.scss
+++ b/src/themes/website/styles/utils.scss
@@ -57,4 +57,8 @@
     text-shadow: none;
     background-color: transparent;
     border: 0;
+}
+
+.text-monospace {
+    font-family: monospace;
 }
\ No newline at end of file