[ALERTING][APM] Fix service names with spaces are not being URL encod…

…ed properly for {{context.viewInAppUrl}} (elastic#202890)

## Summary
It fixes elastic#184381 by encoding correctly the service name and adding tests

x-pack/plugins/observability_solution/apm/common/utils/formatters/alert_url.test.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getAlertUrlErrorCount, getAlertUrlTransaction } from './alert_url';
+describe('alert_url', () => {
+  describe('getAlertUrlErrorCount', () => {
+    it('return the URL where the service name is camelcase', () => {
+      const url = getAlertUrlErrorCount('serviceName', 'serviceEnv');
+      expect(url).toBe('/app/apm/services/serviceName/errors?environment=serviceEnv');
+    });
+    it('return the URL where the service name is sneak case', () => {
+      const url = getAlertUrlErrorCount('service_name', 'serviceEnv');
+      expect(url).toBe('/app/apm/services/service_name/errors?environment=serviceEnv');
+    });
+    it('return the URL encoded correctly where the service name has spaces', () => {
+      const url = getAlertUrlErrorCount('service name', 'serviceEnv');
+      expect(url).toBe('/app/apm/services/service%20name/errors?environment=serviceEnv');
+    });
+  });
+  describe('getAlertUrlTransaction', () => {
+    it('return the URL where the service name is camelcase', () => {
+      const url = getAlertUrlTransaction('serviceName', 'serviceEnv', 'transactionType');
+      expect(url).toBe(
+        '/app/apm/services/serviceName?transactionType=transactionType&environment=serviceEnv'
+      );
+    });
+    it('return the URL where the service name is sneak case', () => {
+      const url = getAlertUrlTransaction('service_name', 'serviceEnv', 'transactionType');
+      expect(url).toBe(
+        '/app/apm/services/service_name?transactionType=transactionType&environment=serviceEnv'
+      );
+    });
+    it('return the URL encoded correctly where the service name has spaces', () => {
+      const url = getAlertUrlTransaction('service name', 'serviceEnv', 'transactionType');
+      expect(url).toBe(
+        '/app/apm/services/service%20name?transactionType=transactionType&environment=serviceEnv'
+      );
+    });
+  });
+});

x-pack/plugins/observability_solution/apm/common/utils/formatters/alert_url.ts

@@ -13,7 +13,7 @@ const format = ({ pathname, query }: { pathname: string; query: Record<string, a
 
 export const getAlertUrlErrorCount = (serviceName: string, serviceEnv: string | undefined) =>
   format({
-    pathname: `/app/apm/services/${serviceName}/errors`,
+    pathname: `/app/apm/services/${encodeURIComponent(serviceName)}/errors`,
     query: {
       environment: serviceEnv ?? ENVIRONMENT_ALL.value,
     },
@@ -25,7 +25,7 @@ export const getAlertUrlTransaction = (
   transactionType: string
 ) =>
   format({
-    pathname: `/app/apm/services/${serviceName}`,
+    pathname: `/app/apm/services/${encodeURIComponent(serviceName)}`,
     query: {
       transactionType,
       environment: serviceEnv ?? ENVIRONMENT_ALL.value,