From 8dd3c70a3c3e60e743eeda49deb644bfe92aeecf Mon Sep 17 00:00:00 2001
From: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Date: Mon, 20 May 2024 11:14:19 -0500
Subject: [PATCH] Require URL contains valid protocol in MDM settings end user
 migration form (#19124)

---
 .../EndUserMigrationSection.tsx               | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/EndUserMigrationSection/EndUserMigrationSection.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/EndUserMigrationSection/EndUserMigrationSection.tsx
index 6677e74a41..be08c0e91d 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/EndUserMigrationSection/EndUserMigrationSection.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/components/EndUserMigrationSection/EndUserMigrationSection.tsx
@@ -2,18 +2,23 @@ import React, { useContext, useState } from "react";
 import { InjectedRouter } from "react-router";
 import classnames from "classnames";
 
+import isURL from "validator/lib/isURL";
+
 import PATHS from "router/paths";
-import configAPI from "services/entities/config";
+
 import { AppContext } from "context/app";
 import { NotificationContext } from "context/notification";
 
+import { getErrorReason } from "interfaces/errors";
+
+import configAPI from "services/entities/config";
+
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
 import Radio from "components/forms/fields/Radio/Radio";
 import Slider from "components/forms/fields/Slider/Slider";
 import Button from "components/buttons/Button/Button";
 import SectionHeader from "components/SectionHeader";
-import validateUrl from "components/forms/validators/valid_url";
 import PremiumFeatureMessage from "components/PremiumFeatureMessage/PremiumFeatureMessage";
 import EmptyTable from "components/EmptyTable/EmptyTable";
 
@@ -39,7 +44,11 @@ interface IEndUserMigrationSectionProps {
 }
 
 const validateWebhookUrl = (val: string) => {
-  return validateUrl({ url: val });
+  return isURL(val, {
+    protocols: ["http", "https"],
+    require_protocol: true,
+    require_valid_protocol: true,
+  });
 };
 
 const EndUserMigrationSection = ({ router }: IEndUserMigrationSectionProps) => {
@@ -82,6 +91,7 @@ const EndUserMigrationSection = ({ router }: IEndUserMigrationSectionProps) => {
 
   const onChangeWebhookUrl = (webhookUrl: string) => {
     setFormData((prevFormData) => ({ ...prevFormData, webhookUrl }));
+    setIsValidWebhookUrl(validateWebhookUrl(webhookUrl));
   };
 
   const onSubmit = async (e: React.FormEvent<SubmitEvent>) => {
@@ -105,6 +115,14 @@ const EndUserMigrationSection = ({ router }: IEndUserMigrationSectionProps) => {
       renderFlash("success", "Successfully updated end user migration!");
       setConfig(updatedConfig);
     } catch (err) {
+      if (
+        getErrorReason(err, {
+          nameEquals: "macos_migration.webhook_url",
+        })
+      ) {
+        setIsValidWebhookUrl(false);
+        return;
+      }
       renderFlash("error", "Could not update. Please try again.");
     }
   };