[Maps] WMS Client should keep query parameters in URL (#34200)

* WMS Client should keep query parameters in URL

x-pack/plugins/maps/public/shared/layers/sources/wms_source/wms_client.js

@@ -7,6 +7,7 @@
 import _ from 'lodash';
 import { parseString } from 'xml2js';
 import fetch from 'node-fetch';
+import { parse, format } from 'url';
 
 export class WmsClient {
   constructor({ serviceUrl }) {
@@ -17,8 +18,59 @@ export class WmsClient {
     return fetch(url);
   }
 
+  _createUrl(defaultQueryParams) {
+    const serviceUrl = parse(this._serviceUrl, true);
+    const queryParams = {
+      ...serviceUrl.query,
+      ...defaultQueryParams
+    };
+    return format({
+      protocol: serviceUrl.protocol,
+      hostname: serviceUrl.hostname,
+      port: serviceUrl.port,
+      pathname: serviceUrl.pathname,
+      query: queryParams
+    });
+  }
+
+  getUrlTemplate(layers, styles) {
+    const urlTemplate = this._createUrl({
+      format: 'image/png',
+      service: 'WMS',
+      version: '1.1.1',
+      request: 'GetMap',
+      srs: 'EPSG:3857',
+      transparent: 'true',
+      width: '256',
+      height: '256',
+      layers,
+      styles
+    });
+    //TODO Find a better way to avoid URL encoding the template braces
+    return `${urlTemplate}&bbox={bbox-epsg-3857}`;
+  }
+
+  /**
+   * Extend any query parameters supplied in the URL but override with required defaults
+   * (ex. service must be WMS)
+   */
   async _fetchCapabilities() {
-    const resp = await this._fetch(`${this._serviceUrl}?version=1.1.1&request=GetCapabilities&service=WMS`);
+    const getCapabilitiesUrl = parse(this._serviceUrl, true);
+    const queryParams = {
+      ...getCapabilitiesUrl.query,
+      ...{
+        version: '1.1.1',
+        request: 'GetCapabilities',
+        service: 'WMS'
+      }
+    };
+    const resp = await this._fetch(format({
+      protocol: getCapabilitiesUrl.protocol,
+      hostname: getCapabilitiesUrl.hostname,
+      port: getCapabilitiesUrl.port,
+      pathname: getCapabilitiesUrl.pathname,
+      query: queryParams
+    }));
     if (resp.status >= 400) {
       throw new Error(`Unable to access ${this.state.serviceUrl}`);
     }

x-pack/plugins/maps/public/shared/layers/sources/wms_source/wms_client.test.js

@@ -195,4 +195,13 @@ describe('getCapabilities', () => {
       { label: 'layer1', value: '1' },
     ]);
   });
+
+  it('Should not overwrite specific query parameters when defined in the url', async () => {
+    const urlWithQuery = 'http://example.com/wms?map=MyMap&format=image/jpeg&service=NotWMS&version=0&request=GetNull&srs=Invalid&transparent=false&width=1024&height=640';
+    const wmsClient = new WmsClient({ serviceUrl: urlWithQuery });
+    const urlTemplate = await wmsClient.getUrlTemplate('MyLayer', 'MyStyle');
+    expect(urlTemplate).toEqual(
+      'http://example.com/wms?map=MyMap&format=image%2Fpng&service=WMS&version=1.1.1&request=GetMap&srs=EPSG%3A3857&transparent=true&width=256&height=256&layers=MyLayer&styles=MyStyle&bbox={bbox-epsg-3857}'
+    );
+  });
 });

x-pack/plugins/maps/public/shared/layers/sources/wms_source/wms_source.js

@@ -11,6 +11,7 @@ import { TileLayer } from '../../tile_layer';
 import { WMSCreateSourceEditor } from './wms_create_source_editor';
 import { i18n } from '@kbn/i18n';
 import { getDataSourceLabel, getUrlLabel } from '../../../../../common/i18n_getters';
+import { WmsClient } from './wms_client';
 
 export class WMSSource extends AbstractTMSSource {
 
@@ -84,8 +85,7 @@ export class WMSSource extends AbstractTMSSource {
   }
 
   getUrlTemplate() {
-    const styles = this._descriptor.styles || '';
-    // eslint-disable-next-line max-len
-    return `${this._descriptor.serviceUrl}?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=${this._descriptor.layers}&styles=${styles}`;
+    const client = new WmsClient({ serviceUrl: this._descriptor.serviceUrl });
+    return client.getUrlTemplate(this._descriptor.layers, this._descriptor.styles || '');
   }
 }