From 590ab5135e1a14d03fe132b8cbd51af21b0df810 Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Date: Sun, 23 Jun 2024 13:16:22 -0300
Subject: [PATCH] refactor: Update CodeTabsComponent to handle additional tabs

This commit updates the CodeTabsComponent to handle an additional tab in the code tabs display. The previous implementation had a condition that checked if the active tab index was less than 4, but it has been updated to check if the active tab index is less than 5. This change ensures that the component can handle the new tab and display the corresponding content correctly. The code has been modified in the index.tsx file of the CodeTabsComponent directory.
---
 .../components/codeTabsComponent/index.tsx    |  6 +-
 src/frontend/src/modals/apiModal/index.tsx    | 55 ++++++++++++++-----
 .../src/modals/apiModal/utils/tabs-array.tsx  | 13 ++++-
 3 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 8b0106902..4b22ac11e 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -147,7 +147,7 @@ export default function CodeTabsComponent({
             </div>
           )}
 
-          {Number(activeTab) < 4 && (
+          {Number(activeTab) < 5 && (
             <>
               <Button
                 variant="ghost"
@@ -172,7 +172,7 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content overflow-hidden"
           key={idx} // Remember to add a unique key prop
         >
-          {idx < 4 ? (
+          {idx < 5 ? (
             <div className="flex h-full w-full flex-col">
               {tab.description && (
                 <div
@@ -188,7 +188,7 @@ export default function CodeTabsComponent({
                 {tab.code}
               </SyntaxHighlighter>
             </div>
-          ) : idx === 4 ? (
+          ) : idx === 5 ? (
             <>
               <div className="api-modal-according-display">
                 <div
diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx
index ead038ad2..36ded5afb 100644
--- a/src/frontend/src/modals/apiModal/index.tsx
+++ b/src/frontend/src/modals/apiModal/index.tsx
@@ -10,7 +10,7 @@ import IconComponent from "../../components/genericIconComponent";
 import { EXPORT_CODE_DIALOG } from "../../constants/constants";
 import { AuthContext } from "../../contexts/authContext";
 import { useTweaksStore } from "../../stores/tweaksStore";
-import { TemplateVariableType } from "../../types/api";
+import { InputFieldType } from "../../types/api";
 import { uniqueTweakType } from "../../types/components";
 import { FlowType } from "../../types/flow/index";
 import BaseModal from "../baseModal";
@@ -19,6 +19,7 @@ import { buildTweaks } from "./utils/build-tweaks";
 import { checkCanBuildTweakObject } from "./utils/check-can-build-tweak-object";
 import { getChangesType } from "./utils/get-changes-types";
 import { getCurlRunCode, getCurlWebhookCode } from "./utils/get-curl-code";
+import getJsApiCode from "./utils/get-js-api-code";
 import { getNodesWithDefaultValue } from "./utils/get-nodes-with-default-value";
 import getPythonApiCode from "./utils/get-python-api-code";
 import getPythonCode from "./utils/get-python-code";
@@ -59,13 +60,19 @@ const ApiModal = forwardRef(
       tweak,
       flow?.endpoint_name,
     );
-    const curl_run_code = getCurlRunCode(
+    const jsApiCode = getJsApiCode(
       flow?.id,
       autoLogin,
       tweak,
       flow?.endpoint_name,
     );
-    const curl_webhook_code = getCurlWebhookCode(
+    const runCurlCode = getCurlRunCode(
+      flow?.id,
+      autoLogin,
+      tweak,
+      flow?.endpoint_name,
+    );
+    const webhookCurlCode = getCurlWebhookCode(
       flow?.id,
       autoLogin,
       flow?.endpoint_name,
@@ -75,12 +82,12 @@ const ApiModal = forwardRef(
     const includeWebhook = flow.webhook;
     const tweaksCode = buildTweaks(flow);
     const codesArray = [
-      curl_run_code,
-      curl_webhook_code,
+      runCurlCode,
+      webhookCurlCode,
       pythonApiCode,
+      jsApiCode,
       pythonCode,
       widgetCode,
-      pythonCode,
     ];
     const [tabs, setTabs] = useState(
       createTabsArray(codesArray, includeWebhook),
@@ -116,7 +123,7 @@ const ApiModal = forwardRef(
         setActiveTab("0");
         setTabs(createTabsArray(codesArray, includeWebhook, true));
       } else {
-        setTabs(createTabsArray(codesArray, includeWebhook, true));
+        setTabs(createTabsArray(codesArray, includeWebhook, false));
       }
     }, [flow["data"]!["nodes"], open]);
 
@@ -149,7 +156,7 @@ const ApiModal = forwardRef(
     async function buildTweakObject(
       tw: string,
       changes: string | string[] | boolean | number | Object[] | Object,
-      template: TemplateVariableType,
+      template: InputFieldType,
     ) {
       changes = getChangesType(changes, template);
 
@@ -187,20 +194,40 @@ const ApiModal = forwardRef(
 
     const addCodes = (cloneTweak) => {
       const pythonApiCode = getPythonApiCode(flow?.id, autoLogin, cloneTweak);
-      const curl_code = getCurlRunCode(
+      const runCurlCode = getCurlRunCode(
         flow?.id,
         autoLogin,
         cloneTweak,
         flow?.endpoint_name,
       );
+      const jsApiCode = getJsApiCode(
+        flow?.id,
+        autoLogin,
+        cloneTweak,
+        flow?.endpoint_name,
+      );
+      const webhookCurlCode = getCurlWebhookCode(
+        flow?.id,
+        autoLogin,
+        flow?.endpoint_name,
+      );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
-
       if (tabs && tabs?.length > 0) {
-        tabs![0].code = curl_code;
-        tabs![1].code = pythonApiCode;
-        tabs![2].code = pythonCode;
-        tabs![3].code = widgetCode;
+        let i = 0;
+        tabs![i].code = runCurlCode;
+        i++;
+        if (includeWebhook) {
+          tabs![i].code = webhookCurlCode;
+          i++;
+        }
+        tabs![i].code = pythonApiCode;
+        i++;
+        tabs![i].code = jsApiCode;
+        i++;
+        tabs![i].code = pythonCode;
+        i++;
+        tabs![i].code = widgetCode;
       }
     };
 
diff --git a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
index deed73332..dc50bf7a3 100644
--- a/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
+++ b/src/frontend/src/modals/apiModal/utils/tabs-array.tsx
@@ -19,12 +19,19 @@ export function createTabsArray(
       language: "py",
       code: codes[2],
     },
+    {
+      name: "JS API",
+      mode: "javascript",
+      image: "https://cdn-icons-png.flaticon.com/512/136/136530.png",
+      language: "js",
+      code: codes[3],
+    },
     {
       name: "Python Code",
       mode: "python",
       image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
       language: "py",
-      code: codes[3],
+      code: codes[4],
     },
     {
       name: "Chat Widget HTML",
@@ -33,7 +40,7 @@ export function createTabsArray(
       mode: "html",
       image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
       language: "html",
-      code: codes[4],
+      code: codes[5],
     },
   ];
 
@@ -53,7 +60,7 @@ export function createTabsArray(
       mode: "python",
       image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
       language: "py",
-      code: codes[5],
+      code: codes[6],
     });
   }