fix: loader for add webhook, test nedpoint check on webhook creation, survey check, updated webhook logo

apps/web/app/(app)/environments/[environmentId]/integrations/custom-webhook/AddWebhookModal.tsx

@@ -36,14 +36,24 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
   const [selectedTriggers, setSelectedTriggers] = useState<TPipelineTrigger[]>([]);
   const [selectedSurveys, setSelectedSurveys] = useState<string[]>([]);
   const [selectedAllSurveys, setSelectedAllSurveys] = useState(false);
+  const [creatingWebhook, setCreatingWebhook] = useState(false);
 
   const submitWebhook = async (): Promise<void> => {
+    setCreatingWebhook(true);
     if (testEndpointInput === undefined || testEndpointInput === "") {
       toast.error("Please enter a URL");
+      setCreatingWebhook(false);
       return;
     }
     if (selectedTriggers.length === 0) {
       toast.error("Please select at least one trigger");
+      setCreatingWebhook(false);
+      return;
+    }
+
+    if (!selectedAllSurveys && selectedSurveys.length === 0) {
+      toast.error("Please select at least one survey");
+      setCreatingWebhook(false);
       return;
     }
 
@@ -53,11 +63,17 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
       surveyIds: selectedSurveys,
     };
     try {
+      const endpointHitSuccessfully = await handleTestEndpoint();
+      if (!endpointHitSuccessfully) {
+        setCreatingWebhook(false);
+        return;
+      }
       await createWebhook(environmentId, updatedData);
       router.refresh();
       resetStates();
       reset();
       setOpen(false);
+      setCreatingWebhook(false);
       toast.success("Webhook added successfully.");
     } catch (e) {
       toast.error(e.message);
@@ -105,10 +121,12 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
       setHittingEndpoint(false);
       toast.success("Yay! We are able to ping the webhook!");
       setEndpointAccessible(true);
+      return true;
     } catch (err) {
       setHittingEndpoint(false);
       toast.error("Oh no! We are unable to ping the webhook!");
       setEndpointAccessible(false);
+      return false;
     }
   };
 
@@ -167,8 +185,8 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
 
               <div>
                 <Label htmlFor="Triggers">Triggers</Label>
-                <div className="mt-1 rounded-lg border border-slate-20">
-                  <div className="grid content-center rounded-lg p-3 bg-slate-50 text-left text-sm text-slate-900">
+                <div className="border-slate-20 mt-1 rounded-lg border">
+                  <div className="grid content-center rounded-lg bg-slate-50 p-3 text-left text-sm text-slate-900">
                     {triggers.map((survey) => (
                       <div key={survey.value} className="my-1 flex items-center space-x-2">
                         <label htmlFor={survey.value} className="flex cursor-pointer items-center">
@@ -246,7 +264,7 @@ export default function AddWebhookModal({ environmentId, surveys, open, setOpen
                 }}>
                 Cancel
               </Button>
-              <Button variant="darkCTA" type="submit">
+              <Button variant="darkCTA" type="submit" loading={creatingWebhook}>
                 Add Webhook
               </Button>
             </div>

apps/web/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookSettingsTab.tsx

@@ -50,10 +50,12 @@ export default function WebhookSettingsTab({
       setHittingEndpoint(false);
       toast.success("Yay! We are able to ping the webhook!");
       setEndpointAccessible(true);
+      return true;
     } catch (err) {
       setHittingEndpoint(false);
       toast.error("Oh no! We are unable to ping the webhook!");
       setEndpointAccessible(false);
+      return false;
     }
   };
 
@@ -71,10 +73,20 @@ export default function WebhookSettingsTab({
   });
 
   const onSubmit = async (data) => {
+    const endpointHitSuccessfully = await handleTestEndpoint();
+    if (!endpointHitSuccessfully) {
+      return;
+    }
     if (selectedTriggers.length === 0) {
       toast.error("Please select at least one trigger");
       return;
     }
+
+    if (!selectedAllSurveys && selectedSurveys.length === 0) {
+      toast.error("Please select at least one survey");
+      return;
+    }
+
     const updatedData: TWebhookInput = {
       url: data.url as string,
       triggers: selectedTriggers,

apps/web/app/(app)/environments/[environmentId]/integrations/custom-webhook/WebhookTable.tsx

@@ -63,26 +63,6 @@ export default function WebhookTable({
         <div className="rounded-lg border border-slate-200">
           {TableHeading}
           <div className="grid-cols-7">
-            <div className="mt-2 grid h-16 grid-cols-12 content-center rounded-lg hover:bg-slate-100">
-              <div className="col-span-4 flex items-center pl-6 text-sm">
-                <div className="flex items-center">
-                  <div className="text-left">
-                    <div className="font-medium text-slate-900">webhook.url</div>
-                  </div>
-                </div>
-              </div>
-              <div className="col-span-4 my-auto text-center text-sm text-slate-500">
-                <div className="font-medium text-slate-500">surveysbaazi</div>
-              </div>
-              <div className="col-span-2 my-auto text-center text-sm text-slate-500">
-                <div className="font-medium text-slate-500">trigeysbaazi</div>
-              </div>
-
-              <div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
-                kab bana
-              </div>
-              <div className="text-center"></div>
-            </div>
             {webhooks.map((webhook, index) => (
               <button
                 onClick={(e) => {