jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(ApiModal/index.tsx): fix tabs state initialization and update logic to handle different scenarios

Browse source 
✨ feat(ApiModal/index.tsx): add support for dynamic tabs based on tweaksCode presence and set active tab to "cURL" when tweaksCode is present
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-14 16:20:13 -03:00
commit 2161e62e4f
1 changed files with 60 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -89,7 +89,7 @@ const ApiModal = forwardRef(
const curl_code = getCurlCode(flow, tweak.current, tabsState); const curl_code = getCurlCode(flow, tweak.current, tabsState);
const pythonCode = getPythonCode(flow, tweak.current, tabsState); const pythonCode = getPythonCode(flow, tweak.current, tabsState);
const tweaksCode = buildTweaks(flow); const tweaksCode = buildTweaks(flow);
const tabs = [ const [tabs, setTabs] = useState([
{ {
name: "cURL", name: "cURL",
mode: "bash", mode: "bash",
@ -109,7 +109,8 @@ const ApiModal = forwardRef(
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode, code: pythonCode,
}, },
];
]);
useEffect(() => { useEffect(() => {
@ -126,15 +127,65 @@ const ApiModal = forwardRef(
filterNodes(); filterNodes();
if (Object.keys(tweaksCode).length > 0) { if (Object.keys(tweaksCode).length > 0) {
tabs.push({
name: "Tweaks", setActiveTab("0");
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png", setTabs([
code: pythonCode, {
}); name: "cURL",
mode: "bash",
image: "https://curl.se/logo/curl-symbol-transparent.png",
code: curl_code,
},
{
name: "Python API",
mode: "python",
image:
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
code: pythonApiCode,
},
{
name: "Python Code",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
},
{
name: "Tweaks",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
}
])
}
else{
setTabs([
{
name: "cURL",
mode: "bash",
image: "https://curl.se/logo/curl-symbol-transparent.png",
code: curl_code,
},
{
name: "Python API",
mode: "python",
image:
"https://images.squarespace-cdn.com/content/v1/5df3d8c5d2be5962e4f87890/1628015119369-OY4TV3XJJ53ECO0W2OLQ/Python+API+Training+Logo.png?format=1000w",
code: pythonApiCode,
},
{
name: "Python Code",
mode: "python",
image: "https://cdn-icons-png.flaticon.com/512/5968/5968350.png",
code: pythonCode,
}
])
} }
}, [flow["data"]["nodes"]]); }, [flow["data"]["nodes"], closePopUp]);
function filterNodes() { function filterNodes() {