Added UI validation when creating a Webhook connector with invalid URL

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 { isUrlInvalid } from '../../../lib/value_validators';
 
 export function getActionType(): ActionTypeModel<WebhookActionConnector, WebhookActionParams> {
   return {
@@ -43,6 +44,17 @@ export function getActionType(): ActionTypeModel<WebhookActionConnector, Webhook
           )
         );
       }
+      if (isUrlInvalid(action.config.url)) {
+        errors.url = [
+          ...errors.url,
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.servicenow.invalidApiUrlTextField',
+            {
+              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, isUrlInvalid } from './value_validators';
 import uuid from 'uuid';
 
 describe('throwIfAbsent', () => {
@@ -79,3 +79,13 @@ describe('throwIfIsntContained', () => {
     ).toEqual(values);
   });
 });
+
+describe('isUrlInvalid', () => {
+  test('verifies invalid url', () => {
+    expect(isUrlInvalid('this is not a url')).toBeTruthy();
+  });
+
+  test('verifies valid url', () => {
+    expect(isUrlInvalid('https://www.elastic.co')).toBeFalsy();
+  });
+});

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { constant } from 'lodash';
+import { constant, isEmpty } from 'lodash';
 
 export function throwIfAbsent<T>(message: string) {
   return (value: T | undefined): T => {
@@ -31,3 +31,12 @@ export function throwIfIsntContained<T>(
     return values;
   };
 }
+
+const urlExpression = /^https?:\/\/([\w\d\-]+\.)+\w{2,}(\/.+)?$/;
+
+export const isUrlInvalid = (url: string | null | undefined) => {
+  if (!isEmpty(url) && url != null && url.match(urlExpression) == null) {
+    return true;
+  }
+  return false;
+};