Refactor: refactor apiModal tabs generation to prevent bugs and enhance reliability

src/frontend/src/constants/constants.ts

@@ -863,3 +863,5 @@ export const TITLE_ERROR_UPDATING_COMPONENT =
   "Error while updating the Component";
 
 export const EMPTY_INPUT_SEND_MESSAGE = "No input message provided.";
+
+export const TABS_ORDER = ["run curl", "python api", "js api", "python code", "chat widget html"]

src/frontend/src/modals/apiModal/index.tsx

@@ -26,6 +26,8 @@ import getPythonCode from "./utils/get-python-code";
 import { getValue } from "./utils/get-value";
 import getWidgetCode from "./utils/get-widget-code";
 import { createTabsArray } from "./utils/tabs-array";
+import getTabsOrder from "./utils/get-tabs-order";
+import getCodesObj from "./utils/get-codes-obj";
 
 const ApiModal = forwardRef(
   (
@@ -213,21 +215,24 @@ const ApiModal = forwardRef(
       );
       const pythonCode = getPythonCode(flow?.name, cloneTweak);
       const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
+      const isThereTweaks = Object.keys(tweaksCode).length > 0;
+      const codesObj = getCodesObj({
+        runCurlCode,
+        webhookCurlCode,
+        pythonApiCode,
+        jsApiCode,
+        pythonCode,
+        widgetCode
+      })
+      const tabsOrder = getTabsOrder(includeWebhook, isThereTweaks);
       if (tabs && tabs?.length > 0) {
-        let i = 0;
+        tabs.forEach((tab, idx) => {
-        tabs![i].code = runCurlCode;
+          const order = tabsOrder[idx];
-        i++;
+          if (order && order.toLowerCase() === tab.name.toLowerCase()) {
-        if (includeWebhook) {
+            const codeToFind = codesObj.find(c => c.name.toLowerCase() === tab.name.toLowerCase());
-          tabs![i].code = webhookCurlCode;
+            tab.code = codeToFind?.code;
-          i++;
+          }
-        }
+        })
-        tabs![i].code = pythonApiCode;
-        i++;
-        tabs![i].code = jsApiCode;
-        i++;
-        tabs![i].code = pythonCode;
-        i++;
-        tabs![i].code = widgetCode;
       }
     };
 

src/frontend/src/modals/apiModal/utils/get-codes-obj.tsx

@@ -0,0 +1,38 @@
+import { getCodesObjProps, getCodesObjReturn } from "../../../types/utils/functions";
+
+export default function getCodesObj({
+  runCurlCode,
+  webhookCurlCode,
+  pythonApiCode,
+  jsApiCode,
+  pythonCode,
+  widgetCode,
+}: getCodesObjProps): getCodesObjReturn {
+  return [
+    {
+      name: "run curl",
+      code: runCurlCode,
+    },
+    {
+      name: "webhook curl",
+      code: webhookCurlCode,
+    },
+    {
+      name: "python api",
+      code: pythonApiCode,
+    },
+    {
+      name: "js api",
+      code: jsApiCode,
+    },
+    {
+      name: "python code",
+      code: pythonCode,
+    },
+    {
+      name: "chat widget html",
+      code: widgetCode,
+    },
+    
+  ]
+}

src/frontend/src/modals/apiModal/utils/get-tabs-order.tsx

@@ -0,0 +1,12 @@
+import { TABS_ORDER } from "../../../constants/constants";
+
+export default function getTabsOrder(isThereWH: boolean = false, isThereTweaks: boolean = false): string[] {
+  const defaultOrder = TABS_ORDER;
+  if (isThereTweaks) {
+    defaultOrder.push("tweaks");
+  }
+  if (isThereWH) {
+    defaultOrder.splice(1, 0, "webhook curl");
+  }
+  return defaultOrder;
+}

src/frontend/src/modals/apiModal/utils/tabs-array.tsx

@@ -1,4 +1,5 @@
-export function createTabsArray(
+export function 
+createTabsArray(
   codes,
   includeWebhookCurl = false,
   includeTweaks = false,

src/frontend/src/types/utils/functions.ts

@@ -0,0 +1,10 @@
+export type getCodesObjProps = {
+    runCurlCode: string,
+    webhookCurlCode: string,
+    pythonApiCode: string,
+    jsApiCode: string,
+    pythonCode: string,
+    widgetCode: string,
+};
+
+export type getCodesObjReturn = Array<{name: string; code: string;}>