Added an input field for a hostname if it was not specified (#1666)

Author: jsorohova

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

@@ -35,8 +35,7 @@
     <div class="text-monospace" data-bind="text: urlTemplate, attr: { 'data-method': method }"></div>
     <!-- /ko -->
 
-
-    <!-- ko if: $component.hostnameSelectionEnabled -->
+    <!-- ko if: $component.hostnameSelectionEnabled() || $component.showHostnameInput() -->
     <h3>Host</h3>
 
     <div class="row flex flex-row">
@@ -47,11 +46,18 @@ <h3>Host</h3>
         </div>
         <div class="col-6">
             <div class="form-group">
+                <!-- ko if: $component.hostnameSelectionEnabled -->
                 <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 -->
                 </select>
+                <!-- /ko -->
+                <!-- ko if: $component.showHostnameInput -->
+                <input id="hostname" type="text" autocomplete="off" class="form-control form-control-sm"
+                    placeholder="hostname" spellcheck="false"
+                    data-bind="event: { keyup: $component.updateRequestSummary }, textInput: $component.selectedHostname">
+                <!-- /ko -->
             </div>
         </div>
     </div>

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

@@ -43,6 +43,7 @@ export class OperationConsole {
     public readonly selectedRepresentation: ko.Observable<ConsoleRepresentation>;
     public readonly requestError: ko.Observable<string>;
     public readonly codeSample: ko.Observable<string>;
+    public readonly showHostnameInput: ko.Observable<boolean>;
     public readonly selectedHostname: ko.Observable<string>;
     public readonly isHostnameWildcarded: ko.Computed<boolean>;
     public readonly hostnameSelectionEnabled: ko.Observable<boolean>;
@@ -89,6 +90,7 @@ export class OperationConsole {
         this.sendingRequest = ko.observable(false);
         this.codeSample = ko.observable();
         this.onFileSelect = this.onFileSelect.bind(this);
+        this.showHostnameInput = ko.observable(false);
         this.selectedHostname = ko.observable("");
         this.hostnameSelectionEnabled = ko.observable();
         this.isHostnameWildcarded = ko.computed(() => this.selectedHostname().includes("*"));
@@ -192,8 +194,14 @@ export class OperationConsole {
         const hostnames = this.hostnames();
         this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
 
-        const hostname = hostnames[0];
-        this.selectedHostname(hostname);
+        let hostname = "";
+
+        if (hostnames) {
+            hostname = hostnames[0];
+            this.selectedHostname(hostname);
+        } else {
+            this.showHostnameInput(true);
+        }
 
         this.hostnameSelectionEnabled(this.hostnames()?.length > 1);
         consoleOperation.host.hostname(hostname);

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

@@ -67,7 +67,7 @@ export class OperationDetails {
         this.requestUrlSample = ko.computed(() => {
 
             const api = this.api();
-            const hostname = this.sampleHostname();
+            const hostname = this.sampleHostname() ?? null;
 
             if ((!this.api() || !this.operation()) && api?.type !== TypeOfApi.graphQL) {
                 return null;
@@ -83,12 +83,14 @@ export class OperationDetails {
 
             let requestUrl = "";
 
-            if (api.type === TypeOfApi.webSocket) {
-                requestUrl = `${hostname}${Utils.ensureLeadingSlash(operationPath)}`;
-            } else {
-                requestUrl = `https://${hostname}${Utils.ensureLeadingSlash(operationPath)}`;
+            if (hostname && api.type !== TypeOfApi.webSocket) {
+                requestUrl = 'https://';
             }
 
+            if (hostname) requestUrl += hostname;
+
+            requestUrl += Utils.ensureLeadingSlash(operationPath);
+
             if (api.apiVersion && api.apiVersionSet?.versioningScheme === "Query") {
                 return Utils.addQueryParameter(requestUrl, api.apiVersionSet.versionQueryName, api.apiVersion);
             }
@@ -284,12 +286,10 @@ export class OperationDetails {
     public async loadGatewayInfo(apiName: string): Promise<void> {
         const hostnames = await this.apiService.getApiHostnames(apiName);
 
-        if (hostnames.length === 0) {
-            throw new Error(`Unable to fetch gateway hostnames.`);
+        if (hostnames.length !== 0) {
+            this.sampleHostname(hostnames[0]);
+            this.hostnames(hostnames);
         }
-
-        this.sampleHostname(hostnames[0]);
-        this.hostnames(hostnames);
     }
 
     private cleanSelection(): void {

src/models/console/consoleOperation.ts

@@ -45,7 +45,8 @@ export class ConsoleOperation {
         this.requestUrl = ko.computed(() => {
             const protocol = this.api.protocols.indexOf("https") !== -1 ? "https" : "http";
             const urlTemplate = this.getRequestPath();
-            const result = `${protocol}://${this.host.hostname()}${Utils.ensureLeadingSlash(urlTemplate)}`;
+            let result = this.host.hostname() ? `${protocol}://${this.host.hostname()}` : '';
+            result += Utils.ensureLeadingSlash(urlTemplate);
 
             return result;
         });