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" />

ui/src/views/jobs/mutation/components/provider/ProviderMutator.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 import { Banner, Modal, Select, Input } from '@douyinfe/semi-ui';
 import { transform } from '../../../../../services/transformer/providerTransformer';
@@ -17,12 +17,32 @@ const sortProvider = (a, b) => {
   return 0;
 };
 
-export default function ProviderMutator({ onVisibilityChanged, visible = false, onData } = {}) {
+const returnOriginalSelectedProvider = (providerToEdit, provider) => {
+  return provider.find((pro) => pro.id === providerToEdit.id);
+};
+
+export default function ProviderMutator({
+  onVisibilityChanged,
+  visible = false,
+  onData,
+  onEditData,
+  providerToEdit,
+} = {}) {
   const provider = useSelector((state) => state.provider);
   const [selectedProvider, setSelectedProvider] = useState(null);
   const [providerUrl, setProviderUrl] = useState(null);
   const [validationMessage, setValidationMessage] = useState(null);
 
+  useEffect(() => {
+    if (providerToEdit) {
+      setSelectedProvider(returnOriginalSelectedProvider(providerToEdit, provider));
+      setProviderUrl(providerToEdit.url);
+    } else {
+      setSelectedProvider(null);
+      setProviderUrl(null);
+    }
+  }, [providerToEdit, visible]);
+
   const width = useScreenWidth();
   const isMobile = width <= 850;
 
@@ -46,13 +66,24 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
     if (doStore) {
       const validationResult = validate();
       if (validationResult == null) {
-        onData(
-          transform({
-            url: providerUrl,
-            id: selectedProvider.id,
-            name: selectedProvider.name,
-          }),
-        );
+        if (providerToEdit != null) {
+          onEditData({
+            newData: transform({
+              url: providerUrl,
+              id: selectedProvider.id,
+              name: selectedProvider.name,
+            }),
+            oldProviderToEdit: providerToEdit,
+          });
+        } else {
+          onData(
+            transform({
+              url: providerUrl,
+              id: selectedProvider.id,
+              name: selectedProvider.name,
+            }),
+          );
+        }
         setProviderUrl(null);
         setSelectedProvider(null);
         onVisibilityChanged(false);
@@ -68,7 +99,7 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
 
   return (
     <Modal
-      title="Adding a new Provider"
+      title={providerToEdit ? 'Editing an existing Provider' : 'Adding a new Provider'}
       visible={visible}
       onOk={() => onSubmit(true)}
       onCancel={() => onSubmit(false)}
@@ -85,19 +116,26 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
           description={validationMessage}
         />
       )}
-
-      <p>
-        Provider are the <IconLikeHeart style={{ color: '#ff0000' }} /> of Fredy. We're supporting multiple Provider
-        such as Immowelt, Kalaydo etc. Select a provider from the list below.
-        <br />
-        Fredy will then open the provider's url in a new tab.
-      </p>
-      <p>
-        You will need to configure your search parameter like you would do when you do a regular search on the
-        provider's website.
-        <br />
-        When the search results are shown on the website, copy the url and paste it into the textfield below.
-      </p>
+      {providerToEdit != null ? (
+        <p>
+          You can now edit the <strong>{providerToEdit.name}</strong> provider's URL in the input field below.
+        </p>
+      ) : (
+        <>
+          <p>
+            Provider are the <IconLikeHeart style={{ color: '#ff0000' }} /> of Fredy. We're supporting multiple Provider
+            such as Immowelt, Kalaydo etc. Select a provider from the list below.
+            <br />
+            Fredy will then open the provider's url in a new tab.
+          </p>
+          <p>
+            You will need to configure your search parameter like you would do when you do a regular search on the
+            provider's website.
+            <br />
+            When the search results are shown on the website, copy the url and paste it into the textfield below.
+          </p>
+        </>
+      )}
       <Banner
         fullMode={false}
         type="warning"
@@ -117,6 +155,7 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
         filter
         placeholder="Select a provider"
         className="providerMutator__fields"
+        disabled={providerToEdit != null}
         optionList={provider
           .map((pro) => {
             return {
@@ -131,7 +170,6 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
         onChange={(value) => {
           const selectedProvider = provider.find((pro) => pro.id === value);
           setSelectedProvider(selectedProvider);
-
           window.open(selectedProvider.baseUrl);
         }}
       />
@@ -142,7 +180,8 @@ export default function ProviderMutator({ onVisibilityChanged, visible = false,
         placeholder="Provider Url"
         width={10}
         className="providerMutator__fields"
-        onBlur={(e) => {
+        value={providerUrl}
+        onInput={(e) => {
           setProviderUrl(e.target.value);
         }}
       />