From 41f0b1f22cd493169654c36b7452f9312be166fd Mon Sep 17 00:00:00 2001
From: yahyha benzha <yahya.benzha1@gmail.com>
Date: Sun, 25 Feb 2024 17:48:48 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20delete=20out=20of=20sync?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/AgentInputs/HttpToolInput.tsx  | 39 ++++++++++++++-----
 .../components/AgentInputs/ToolsInput.tsx     | 17 ++++----
 apps/dashboard/components/HttpToolForm.tsx    |  8 ++--
 .../LeadCaptureToolFormInput.tsx              |  4 +-
 .../pages/agents/[agentId]/index.tsx          |  6 +--
 5 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/apps/dashboard/components/AgentInputs/HttpToolInput.tsx b/apps/dashboard/components/AgentInputs/HttpToolInput.tsx
index 6101e6e3f..a220a2f0e 100644
--- a/apps/dashboard/components/AgentInputs/HttpToolInput.tsx
+++ b/apps/dashboard/components/AgentInputs/HttpToolInput.tsx
@@ -66,6 +66,16 @@ export type Fields =
     }[]
   | undefined;
 
+type KeyValueNames =
+  | 'config.queryParameters'
+  | 'config.pathVariables'
+  | 'config.body'
+  | 'config.headers'
+  | `tools.${number}.config.queryParameters`
+  | `tools.${number}.config.pathVariables`
+  | `tools.${number}.config.body`
+  | `tools.${number}.config.headers`;
+
 const KeyValueFieldArray = ({
   name,
   label,
@@ -77,13 +87,13 @@ const KeyValueFieldArray = ({
     | 'config.pathVariables'
     | 'config.body'
     | 'config.headers'
-    | 'tools.0.config.queryParameters'
-    | 'tools.0.config.pathVariables'
-    | 'tools.0.config.body'
-    | 'tools.0.config.headers';
+    | `tools.${number}.config.queryParameters`
+    | `tools.${number}.config.pathVariables`
+    | `tools.${number}.config.body`
+    | `tools.${number}.config.headers`;
   label?: string;
   userOnly?: boolean;
-  prefix: '' | 'tools.0.';
+  prefix: `tools.${number}.` | '';
 }) => {
   const methods = useFormContext<HttpToolSchema | CreateAgentSchema>();
 
@@ -286,7 +296,6 @@ const KeyValueFieldArray = ({
               <FormControl>
                 <Card variant="outlined" size="sm">
                   <Checkbox
-                    id={`${field.key}-user-provided`}
                     size="sm"
                     label="Provided By User"
                     checked={!!field.isUserProvided}
@@ -317,7 +326,15 @@ const KeyValueFieldArray = ({
                   try {
                     if (name.includes('queryParameters')) {
                       const Url = new URL(url);
-                      Url.searchParams.delete(field.key);
+                      const searchParams = Url.search
+                        .replace('?', '')
+                        .split('&');
+
+                      // use index instead of key, to avoid out_of_sync issue
+                      const synchronizedKey = searchParams[index].split('=')[0];
+
+                      Url.searchParams.delete(synchronizedKey);
+
                       methods.setValue(
                         `${prefix}config.url`,
                         decodeURI(Url.toString())
@@ -335,7 +352,8 @@ const KeyValueFieldArray = ({
                       // use index instead of key, to avoid out_of_sync issue
                       urlPaths.splice(index, 1);
 
-                      const newUrl = baseUrl + '/' + urlPaths.join('');
+                      const newUrl =
+                        baseUrl + '/' + urlPaths.join('/') + Url.search;
 
                       methods.setValue(`${prefix}config.url`, newUrl);
                     }
@@ -417,12 +435,13 @@ const KeyValueFieldArray = ({
 };
 
 type Props = {
-  name?: 'tools.0';
+  name?: `tools.${number}`;
 };
 
 function HttpToolInput({ name }: Props) {
   const methods = useFormContext<HttpToolSchema | CreateAgentSchema>();
-  const prefix: 'tools.0.' | '' = name ? `${name}.` : '';
+  // Narrow down to prevent inference as string.
+  const prefix: `tools.${number}.` | '' = name ? `${name}.` : '';
   const templatesModal = useModal();
   const [withApprovalChecked] = methods.watch([`${prefix}config.withApproval`]);
   const [methodValue] = methods.watch([`${prefix}config.method`]);
diff --git a/apps/dashboard/components/AgentInputs/ToolsInput.tsx b/apps/dashboard/components/AgentInputs/ToolsInput.tsx
index 51938cc0e..d235f5fab 100644
--- a/apps/dashboard/components/AgentInputs/ToolsInput.tsx
+++ b/apps/dashboard/components/AgentInputs/ToolsInput.tsx
@@ -137,7 +137,7 @@ function ToolsInput({}: Props) {
     `tools.${currentToolIndex}.config.method`,
     `tools.${currentToolIndex}.config.pathVariables`,
     `tools.${currentToolIndex}.config.queryParameters`,
-  ] as any);
+  ]);
 
   const newDatastoreModal = useModal();
   const newApiToolForm = useModal();
@@ -454,6 +454,8 @@ function ToolsInput({}: Props) {
               shouldValidate: true,
             });
             newApiToolForm.close();
+            // auto save.
+            btnSubmitRef?.current?.click();
           }}
         />
       </newApiToolForm.component>
@@ -550,7 +552,7 @@ function ToolsInput({}: Props) {
       >
         {currentToolIndex >= 0 && (
           <Stack gap={2}>
-            <HttpToolInput name={`tools.${currentToolIndex}` as `tools.0`} />
+            <HttpToolInput name={`tools.${currentToolIndex}`} />
             <validateToolModal.component
               title="Set up a request to your endpoint"
               description="Send a request to your endpoint to make sure it's working well."
@@ -564,7 +566,7 @@ function ToolsInput({}: Props) {
                 setToolValidState={(state: boolean) => {
                   isToolValidRef.current = state;
                 }}
-                name={`tools.${currentToolIndex}` as `tools.0`}
+                name={`tools.${currentToolIndex}`}
                 handleCloseModal={validateToolModal.close}
               />
             </validateToolModal.component>
@@ -577,9 +579,10 @@ function ToolsInput({}: Props) {
                 if (!isToolValidRef.current && formState.isValid) {
                   validateToolModal.open();
                   return;
+                } else if (isToolValidRef.current) {
+                  editApiToolForm.close();
+                  btnSubmitRef?.current?.click();
                 }
-                editApiToolForm.close();
-                btnSubmitRef?.current?.click();
               }}
             >
               {isToolValidRef.current ? 'Update' : 'Validate Config'}
@@ -599,9 +602,7 @@ function ToolsInput({}: Props) {
       >
         {currentToolIndex >= 0 && (
           <Stack gap={2}>
-            <LeadCaptureToolFormInput
-              name={`tools.${currentToolIndex}` as `tools.0`}
-            />
+            <LeadCaptureToolFormInput name={`tools.${currentToolIndex}`} />
             <Button
               type="button"
               loading={formState.isSubmitting}
diff --git a/apps/dashboard/components/HttpToolForm.tsx b/apps/dashboard/components/HttpToolForm.tsx
index f3be8bf9b..b1f808d25 100644
--- a/apps/dashboard/components/HttpToolForm.tsx
+++ b/apps/dashboard/components/HttpToolForm.tsx
@@ -67,7 +67,7 @@ const ParamFields = memo(
           {parameters?.map((field, index) => (
             <Stack
               direction="row"
-              key={field.key}
+              key={`${index}${field.key}`}
               gap={2}
               alignItems={'end'}
               pl={2}
@@ -127,13 +127,13 @@ export function HttpToolTestForm<T extends HttpToolSchema | CreateAgentSchema>({
 }: {
   setToolValidState(arg: boolean): void;
   handleCloseModal?: () => void;
-  name?: 'tools.0';
+  name?: `tools.${number}`;
 }) {
   const methods =
     useFormContext<
       T extends HttpToolSchema ? HttpToolSchema : CreateAgentSchema
     >();
-  const prefix: 'tools.0.' | '' = name ? `${name}.` : '';
+  const prefix: `tools.${number}.` | '' = name ? `${name}.` : '';
   const config = methods.getValues(
     `${prefix}config` as any
   ) as HttpToolSchema['config'];
@@ -380,7 +380,7 @@ function HttpToolForm({ onSubmit, defaultValues }: Props) {
     },
   });
 
-  const config = methods.getValues([
+  const config = methods.watch([
     'config.body',
     'config.headers',
     'config.method',
diff --git a/apps/dashboard/components/LeadCaptureToolForm/LeadCaptureToolFormInput.tsx b/apps/dashboard/components/LeadCaptureToolForm/LeadCaptureToolFormInput.tsx
index c6f9f4d32..b42fcd65c 100644
--- a/apps/dashboard/components/LeadCaptureToolForm/LeadCaptureToolFormInput.tsx
+++ b/apps/dashboard/components/LeadCaptureToolForm/LeadCaptureToolFormInput.tsx
@@ -14,14 +14,14 @@ import {
 } from '@chaindesk/lib/types/dtos';
 
 type Props = {
-  name?: 'tools.0';
+  name?: `tools.${number}`;
 };
 
 export default function LeadCaptureToolFormInput({ name }: Props) {
   const methods = useFormContext<LeadCaptureToolSchema | CreateAgentSchema>();
   const prefix = useMemo(() => {
     return name ? `${name}.` : '';
-  }, [name]) as 'tools.0.' | '';
+  }, [name]) as `tools.${number}.` | '';
 
   const values = methods.watch(`${prefix}config` as const);
 
diff --git a/apps/dashboard/pages/agents/[agentId]/index.tsx b/apps/dashboard/pages/agents/[agentId]/index.tsx
index 430dcaa39..b66c18023 100644
--- a/apps/dashboard/pages/agents/[agentId]/index.tsx
+++ b/apps/dashboard/pages/agents/[agentId]/index.tsx
@@ -511,9 +511,7 @@ export default function AgentPage() {
                 >
                   {({ mutation }) => (
                     <Stack gap={2}>
-                      <HttpToolInput
-                        name={`tools.${state.currentToolIndex}` as `tools.0`}
-                      />
+                      <HttpToolInput name={`tools.${state.currentToolIndex}`} />
                       <Button type="submit" loading={mutation.isMutating}>
                         Update
                       </Button>
@@ -543,7 +541,7 @@ export default function AgentPage() {
                   {({ mutation }) => (
                     <Stack gap={2}>
                       <LeadCaptureToolFormInput
-                        name={`tools.${state.currentToolIndex}` as `tools.0`}
+                        name={`tools.${state.currentToolIndex}`}
                       />
                       <Button type="submit" loading={mutation.isMutating}>
                         Update