Implement functionality for adding web hooks in settings Git tab (#37)

* Add webhookUrl card in settings/git

* Implement copy functionality

* Fix form reset

* Handle review changes

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/Domains.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useParams, Link } from 'react-router-dom';
+
 import { Button, Typography } from '@material-tailwind/react';
 
 import DomainCard from './DomainCard';

packages/frontend/src/components/projects/project/settings/GitTabPanel.tsx

@@ -1,4 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
 
 import { Button, Input, Switch, Typography } from '@material-tailwind/react';
 
@@ -6,10 +8,12 @@ import RepositoryList from '../../create/RepositoryList';
 import RepoConnectedSection from './RepoConnectedSection';
 import GitSelectionSection from './GitSelectionSection';
 import { GitSelect, RepositoryDetails } from '../../../../types/project';
+import WebhookCard from './WebhookCard';
 
 const GitTabPanel = () => {
   const [gitSelect, setGitSelect] = useState('none');
   const [linkedRepo, setLinkedRepo] = useState<RepositoryDetails>();
+  const [webhooksArray, setWebhooksArray] = useState<Array<string>>([]);
 
   const gitSelectionHandler = (git: GitSelect) => {
     setGitSelect(git);
@@ -19,6 +23,23 @@ const GitTabPanel = () => {
     setLinkedRepo(repoDetails);
   };
 
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isSubmitSuccessful },
+  } = useForm();
+
+  useEffect(() => {
+    reset();
+  }, [isSubmitSuccessful]);
+
+  const handleDelete = (index: number) => {
+    const newArray = webhooksArray.filter((value, idx) => idx != index);
+    setWebhooksArray(newArray);
+    toast.success('Webhook deleted successfully');
+  };
+
   return (
     <>
       <div className="mb-2 p-2">
@@ -85,25 +106,45 @@ const GitTabPanel = () => {
         </Button>
       </div>
 
-      <div className="mb-2 p-2">
-        <Typography variant="h6" className="text-black">
-          Deploy webhooks
-        </Typography>
-        <Typography variant="small">
-          Webhooks configured to trigger when there is a change in a
-          project&apos;s build or deployment status.
-        </Typography>
-        <div className="flex gap-1">
-          <div className="grow">
-            <Typography variant="small">Webhook URL</Typography>
-            <Input crossOrigin={undefined} />
-          </div>
-          <div className="self-end">
-            <Button size="sm" disabled>
-              Save
-            </Button>
+      <form
+        onSubmit={handleSubmit((data) => {
+          setWebhooksArray((prevArray) => [...prevArray, data.webhookUrl]);
+
+          toast.success('Webhook added successfully.');
+        })}
+      >
+        <div className="mb-2 p-2">
+          <Typography variant="h6" className="text-black">
+            Deploy webhooks
+          </Typography>
+          <Typography variant="small">
+            Webhooks configured to trigger when there is a change in a
+            project&apos;s build or deployment status.
+          </Typography>
+          <div className="flex gap-1">
+            <div className="grow">
+              <Typography variant="small">Webhook URL</Typography>
+              <Input crossOrigin={undefined} {...register('webhookUrl')} />
+            </div>
+            <div className="self-end">
+              <Button size="sm" type="submit">
+                Save
+              </Button>
+            </div>
           </div>
         </div>
+      </form>
+      <div className="mb-2 p-2">
+        {webhooksArray?.map((webhookUrl, index) => {
+          return (
+            <WebhookCard
+              webhooksArray={webhooksArray}
+              webhookUrl={webhookUrl}
+              handleDelete={() => handleDelete(index)}
+              key={index}
+            />
+          );
+        })}
       </div>
     </>
   );

packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
+
 import { RepositoryDetails } from '../../../../types/project';
 
 const RepoConnectedSection = ({

packages/frontend/src/components/projects/project/settings/SetupDomain.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
+
 import {
   Radio,
   Typography,

packages/frontend/src/components/projects/project/settings/WebhookCard.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+
+import { Button, Typography } from '@material-tailwind/react';
+
+import ConfirmDialog from '../../../shared/ConfirmDialog';
+
+const WebhookCard = (props: {
+  webhooksArray: string[];
+  webhookUrl: string;
+  handleDelete: () => void;
+}) => {
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  return (
+    <div className="flex justify-between w-full mb-3">
+      {props.webhookUrl}
+
+      <div className="flex gap-3">
+        <Button
+          size="sm"
+          onClick={() => {
+            navigator.clipboard.writeText(props.webhookUrl);
+            toast.success('Copied to clipboard');
+          }}
+        >
+          C
+        </Button>
+        <Button
+          color="red"
+          size="sm"
+          onClick={() => {
+            setDeleteDialogOpen(true);
+          }}
+        >
+          X
+        </Button>
+      </div>
+
+      <ConfirmDialog
+        dialogTitle="Delete webhook"
+        handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
+        open={deleteDialogOpen}
+        confirmButtonTitle="Yes, Confirm delete"
+        handleConfirm={() => {
+          setDeleteDialogOpen((preVal) => !preVal);
+          props.handleDelete();
+        }}
+        color="red"
+      >
+        <Typography variant="small">
+          Are you sure you want to delete the variable{' '}
+          <span className="bg-blue-100 p-0.5 rounded-sm">
+            {props.webhookUrl}
+          </span>
+          ?
+        </Typography>
+      </ConfirmDialog>
+    </div>
+  );
+};
+
+export default WebhookCard;