feat: updated the UI to enable editing of provider URLs (#234)

* feat: updated the UI to enable editing of provider URLs


---------

Co-authored-by: foxx-tech <robin.foxx.tech@gmail.com>

ui/src/views/jobs/mutation/JobMutation.jsx

@@ -34,6 +34,7 @@ export default function JobMutator() {
   const defaultNotificationAdapter = jobToBeEdit?.notificationAdapter || [];
   const defaultEnabled = jobToBeEdit?.enabled ?? true;
 
+  const [providerToEdit, setProviderToEdit] = useState(null);
   const [providerCreationVisible, setProviderCreationVisibility] = useState(false);
   const [notificationCreationVisible, setNotificationCreationVisibility] = useState(false);
   const [editNotificationAdapter, setEditNotificationAdapter] = useState(null);
@@ -50,6 +51,12 @@ export default function JobMutator() {
     return Boolean(notificationAdapterData.length && providerData.length && name);
   };
 
+  const handleProviderEdit = (data) => {
+    setProviderData(
+      providerData.map((provider) => (provider.url === data.oldProviderToEdit.url ? data.newData : provider)),
+    );
+  };
+
   const mutateJob = async () => {
     try {
       await xhrPost('/api/jobs', {
@@ -78,6 +85,8 @@ export default function JobMutator() {
         onData={(data) => {
           setProviderData([...providerData, data]);
         }}
+        onEditData={handleProviderEdit}
+        providerToEdit={providerToEdit}
       />
 
       {notificationCreationVisible && (
@@ -127,7 +136,10 @@ export default function JobMutator() {
             type="primary"
             icon={<IconPlusCircle />}
             className="jobMutation__newButton"
-            onClick={() => setProviderCreationVisibility(true)}
+            onClick={() => {
+              setProviderToEdit(null);
+              setProviderCreationVisibility(true);
+            }}
           >
             Add new Provider
           </Button>
@@ -137,6 +149,10 @@ export default function JobMutator() {
             onRemove={(providerUrl) => {
               setProviderData(providerData.filter((provider) => provider.url !== providerUrl));
             }}
+            onEdit={(provider) => {
+              setProviderCreationVisibility(true);
+              setProviderToEdit(provider);
+            }}
           />
         </SegmentPart>
         <Divider margin="1rem" />