fix Vector map layers will not render when runtime field has '%' (#135491)

x-pack/plugins/maps/common/mvt_request_body.test.ts

@@ -38,3 +38,40 @@ test('Should encode shape into URI safe string and decode back to original shape
   );
   expect(decodeMvtResponseBody(encodedSearchRequest)).toEqual(searchRequest);
 });
+
+test(`Should handle '%' character`, () => {
+  const runtimeFieldScript = `if (doc['price'].size() != 0){
+  String tmp=dissect('$%{price}').extract(doc["price"].value)?.price;
+
+  tmp = tmp.replace(',','');
+
+  def pn = Double.parseDouble( tmp );
+
+  if (pn != null) emit(pn);
+}
+else { 
+  emit(0)
+}`;
+  const searchRequest = {
+    size: 10000,
+    _source: false,
+    runtime_mappings: {
+      price_as_number: {
+        type: 'keyword',
+        script: {
+          source: runtimeFieldScript,
+        },
+      },
+    },
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+  };
+  const encodedSearchRequest = encodeMvtResponseBody(searchRequest);
+  expect(decodeMvtResponseBody(encodedSearchRequest)).toEqual(searchRequest);
+});

x-pack/plugins/maps/common/mvt_request_body.ts

@@ -10,11 +10,15 @@ import rison from 'rison-node';
 import { RENDER_AS } from './constants';
 
 export function decodeMvtResponseBody(encodedRequestBody: string): object {
-  return rison.decode(decodeURIComponent(encodedRequestBody)) as object;
+  return rison.decode(decodeURIComponent(encodedRequestBody).replace('%25', '%')) as object;
 }
 
 export function encodeMvtResponseBody(unencodedRequestBody: object): string {
-  return encodeURIComponent(rison.encode(unencodedRequestBody as RisonValue));
+  // URL encoding replaces unsafe ASCII characters with a '%' followed by two hexadecimal digits
+  // encodeURIComponent does not encode '%'
+  // This causes preexisting '%' to break decoding because they are not valid URL encoding
+  // To prevent this, properly url encode '%' before calling encodeURIComponent
+  return encodeURIComponent(rison.encode(unencodedRequestBody as RisonValue).replace('%', '%25'));
 }
 
 export function getAggsTileRequest({