Fix: Tweaks tab dissapearing with hook component (#2412)

This pull request addresses an issue where the tweaks tab on ApiModal
disappears when using a webhook component.

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -26,6 +26,7 @@ import {
   TabsTrigger,
 } from "../../components/ui/tabs";
 import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
+import getTabsOrder from "../../modals/apiModal/utils/get-tabs-order";
 import { Case } from "../../shared/components/caseComponent";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
@@ -56,6 +57,8 @@ export default function CodeTabsComponent({
   setActiveTweaks,
   activeTweaks,
   allowExport = false,
+  isThereTweaks = false,
+  isThereWH = false,
 }: codeTabsPropsType) {
   const [isCopied, setIsCopied] = useState<Boolean>(false);
   const [data, setData] = useState(flow ? flow["data"]!["nodes"] : null);
@@ -93,6 +96,8 @@ export default function CodeTabsComponent({
     return node.data.node.template[templateParam].type;
   };
 
+  const tabsOrder = getTabsOrder(isThereWH, isThereTweaks);
+
   return (
     <Tabs
       value={activeTab}
@@ -172,7 +177,7 @@ export default function CodeTabsComponent({
           className="api-modal-tabs-content overflow-hidden"
           key={idx} // Remember to add a unique key prop
         >
-          {idx < 5 ? (
+          {tabsOrder[idx].toLowerCase() !== "tweaks" ? (
             <div className="flex h-full w-full flex-col">
               {tab.description && (
                 <div
@@ -188,7 +193,7 @@ export default function CodeTabsComponent({
                 {tab.code}
               </SyntaxHighlighter>
             </div>
-          ) : idx === 5 ? (
+          ) : tabsOrder[idx].toLowerCase() === "tweaks" ? (
             <>
               <div className="api-modal-according-display">
                 <div

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

@@ -44,11 +44,12 @@ const ApiModal = forwardRef(
     },
     ref,
   ) => {
+    const tweaksCode = buildTweaks(flow);
     const tweak = useTweaksStore((state) => state.tweak);
     const addTweaks = useTweaksStore((state) => state.setTweak);
     const setTweaksList = useTweaksStore((state) => state.setTweaksList);
     const tweaksList = useTweaksStore((state) => state.tweaksList);
-
+    const isThereTweaks = Object.keys(tweaksCode).length > 0;
     const [activeTweaks, setActiveTweaks] = useState(false);
     const { autoLogin } = useContext(AuthContext);
     const [open, setOpen] =
@@ -82,7 +83,6 @@ const ApiModal = forwardRef(
     const pythonCode = getPythonCode(flow?.name, tweak);
     const widgetCode = getWidgetCode(flow?.id, flow?.name, autoLogin);
     const includeWebhook = flow.webhook;
-    const tweaksCode = buildTweaks(flow);
     const codesArray = [
       runCurlCode,
       webhookCurlCode,
@@ -121,7 +121,7 @@ const ApiModal = forwardRef(
 
       filterNodes();
 
-      if (Object.keys(tweaksCode).length > 0) {
+      if (isThereTweaks) {
         setActiveTab("0");
         setTabs(createTabsArray(codesArray, includeWebhook, true));
       } else {
@@ -215,7 +215,6 @@ 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,
@@ -251,6 +250,8 @@ const ApiModal = forwardRef(
         </BaseModal.Header>
         <BaseModal.Content overflowHidden>
           <CodeTabsComponent
+            isThereTweaks={isThereTweaks}
+            isThereWH={includeWebhook ?? false}
             flow={flow}
             tabs={tabs!}
             activeTab={activeTab}

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

@@ -1,10 +1,11 @@
+import { cloneDeep } from "lodash";
 import { TABS_ORDER } from "../../../constants/constants";
 
 export default function getTabsOrder(
   isThereWH: boolean = false,
   isThereTweaks: boolean = false,
 ): string[] {
-  const defaultOrder = TABS_ORDER;
+  const defaultOrder = cloneDeep(TABS_ORDER);
   if (isThereTweaks) {
     defaultOrder.push("tweaks");
   }

src/frontend/src/types/components/index.ts

@@ -695,6 +695,8 @@ type codeTabsFuncTempType = {
 };
 
 export type codeTabsPropsType = {
+  isThereTweaks?: boolean;
+  isThereWH?: boolean;
   flow?: FlowType;
   tabs: Array<tabsArrayType>;
   activeTab: string;