Added UI validation when creating a Webhook connector with invalid URL

x-pack/plugins/actions/server/builtin_action_types/webhook.test.ts

@@ -114,6 +114,17 @@ describe('config validation', () => {
     });
   });
 
+  test('config validation failed when a url is invalid', () => {
+    const config: Record<string, string> = {
+      url: 'example.com/do-something',
+    };
+    expect(() => {
+      validateConfig(actionType, config);
+    }).toThrowErrorMatchingInlineSnapshot(
+      '"error validating action type config: error configuring webhook action: unable to parse url: TypeError: Invalid URL: example.com/do-something"'
+    );
+  });
+
   test('config validation passes when valid headers are provided', () => {
     // any for testing
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

x-pack/plugins/actions/server/builtin_action_types/webhook.ts

@@ -85,8 +85,20 @@ function validateActionTypeConfig(
   configurationUtilities: ActionsConfigurationUtilities,
   configObject: ActionTypeConfigType
 ) {
+  let url: URL;
   try {
-    configurationUtilities.ensureWhitelistedUri(configObject.url);
+    url = new URL(configObject.url);
+  } catch (err) {
+    return i18n.translate('xpack.actions.builtin.webhook.webhookConfigurationErrorNoHostname', {
+      defaultMessage: 'error configuring webhook action: unable to parse url: {err}',
+      values: {
+        err,
+      },
+    });
+  }
+
+  try {
+    configurationUtilities.ensureWhitelistedUri(url.toString());
   } catch (whitelistError) {
     return i18n.translate('xpack.actions.builtin.webhook.webhookConfigurationError', {
       defaultMessage: 'error configuring webhook action: {message}',

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook.test.tsx

@@ -40,7 +40,7 @@ describe('webhook connector validation', () => {
       isPreconfigured: false,
       config: {
         method: 'PUT',
-        url: 'http:\\test',
+        url: 'http://test.com',
         headers: { 'content-type': 'text' },
       },
     } as WebhookActionConnector;
@@ -77,6 +77,31 @@ describe('webhook connector validation', () => {
       },
     });
   });
+
+  test('connector validation fails when url in config is not valid', () => {
+    const actionConnector = {
+      secrets: {
+        user: 'user',
+        password: 'pass',
+      },
+      id: 'test',
+      actionTypeId: '.webhook',
+      name: 'webhook',
+      config: {
+        method: 'PUT',
+        url: 'invalid.url',
+      },
+    } as WebhookActionConnector;
+
+    expect(actionTypeModel.validateConnector(actionConnector)).toEqual({
+      errors: {
+        url: ['URL is invalid.'],
+        method: [],
+        user: [],
+        password: [],
+      },
+    });
+  });
 });
 
 describe('webhook action params validation', () => {

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook.tsx

@@ -7,6 +7,7 @@ import { lazy } from 'react';
 import { i18n } from '@kbn/i18n';
 import { ActionTypeModel, ValidationResult } from '../../../../types';
 import { WebhookActionParams, WebhookActionConnector } from '../types';
+import { isValidUrl } from '../../../lib/value_validators';
 
 export function getActionType(): ActionTypeModel<WebhookActionConnector, WebhookActionParams> {
   return {
@@ -43,6 +44,17 @@ export function getActionType(): ActionTypeModel<WebhookActionConnector, Webhook
           )
         );
       }
+      if (action.config.url && !isValidUrl(action.config.url)) {
+        errors.url = [
+          ...errors.url,
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.webhookAction.error.invalidUrlTextField',
+            {
+              defaultMessage: 'URL is invalid.',
+            }
+          ),
+        ];
+      }
       if (!action.config.method) {
         errors.method.push(
           i18n.translate(

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/webhook/webhook_connectors.tsx

@@ -246,6 +246,7 @@ const WebhookActionConnectorFields: React.FunctionComponent<ActionConnectorField
               isInvalid={errors.url.length > 0 && url !== undefined}
               fullWidth
               value={url || ''}
+              placeholder="https://<site-url> or http://<site-url>"
               data-test-subj="webhookUrlText"
               onChange={(e) => {
                 editActionConfig('url', e.target.value);

x-pack/plugins/triggers_actions_ui/public/application/lib/value_validators.test.ts

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { throwIfAbsent, throwIfIsntContained } from './value_validators';
+import { throwIfAbsent, throwIfIsntContained, isValidUrl } from './value_validators';
 import uuid from 'uuid';
 
 describe('throwIfAbsent', () => {
@@ -79,3 +79,17 @@ describe('throwIfIsntContained', () => {
     ).toEqual(values);
   });
 });
+
+describe('isValidUrl', () => {
+  test('verifies invalid url', () => {
+    expect(isValidUrl('this is not a url')).toBeFalsy();
+  });
+
+  test('verifies valid url any protocol', () => {
+    expect(isValidUrl('https://www.elastic.co/')).toBeTruthy();
+  });
+
+  test('verifies valid url with specific protocol', () => {
+    expect(isValidUrl('https://www.elastic.co/', 'https:')).toBeTruthy();
+  });
+});

x-pack/plugins/triggers_actions_ui/public/application/lib/value_validators.ts

@@ -31,3 +31,15 @@ export function throwIfIsntContained<T>(
     return values;
   };
 }
+
+export const isValidUrl = (urlString: string, protocol?: string) => {
+  try {
+    const urlObject = new URL(urlString);
+    if (protocol === undefined || urlObject.protocol === protocol) {
+      return true;
+    }
+    return false;
+  } catch (err) {
+    return false;
+  }
+};