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

🔧 fix(AccordionComponent/index.tsx): fix import formatting and add missing semicolon

Browse source 
✨ feat(AccordionComponent/index.tsx): add support for opening and closing accordion items on click
🔧 fix(popUpContext.tsx): add missing semicolon and fix formatting
✨ feat(popUpContext.tsx): add closeEdit state and setCloseEdit function to manage closing edit pop-up

🐛 fix(ApiModal/index.tsx): add missing dependencies to useEffect to prevent stale data
✨ feat(ApiModal/index.tsx): add support for opening and closing accordion when there are tweaks present
🔧 chore(ApiModal/index.tsx): refactor getValue function to improve readability and maintainability
🔧 chore(ApiModal/index.tsx): refactor buildContent function to improve readability and maintainability
🔧 chore(ApiModal/index.tsx): refactor buildTweakObject function to improve readability and maintainability
🔧 chore(ApiModal/index.tsx): refactor onChange functions to improve readability and maintainability
🔧 chore(ApiModal/index.tsx): refactor value props to improve readability and maintainability

🔧 fix(codeAreaModal): add setCloseEdit function to PopUpContext to handle closing editcode
🔧 fix(promptModal): add setCloseEdit function to PopUpContext to handle closing prompt
🔧 fix(textAreaModal): add setCloseEdit function to PopUpContext to handle closing textarea
🔧 fix(components): change value prop to open prop in AccordionComponentType for better semantics
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-28 11:35:30 -03:00
commit b29a54c678
7 changed files with 195 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/frontend/src/components/AccordionComponent/index.tsx
View file

@ -1,5 +1,8 @@
import { ReactElement, useContext, useEffect, useRef, useState } from "react"; import { ReactElement, useContext, useEffect, useRef, useState } from "react";
import { AccordionComponentType, ProgressBarType } from "../../types/components"; import {
AccordionComponentType,
ProgressBarType,
} from "../../types/components";
import { Progress } from "../../components/ui/progress"; import { Progress } from "../../components/ui/progress";
import { setInterval } from "timers/promises"; import { setInterval } from "timers/promises";
import { import {
@ -7,22 +10,33 @@ import {
AccordionContent, AccordionContent,
AccordionItem, AccordionItem,
AccordionTrigger, AccordionTrigger,
} from "../../components/ui/accordion" } from "../../components/ui/accordion";
export default function AccordionComponent({ export default function AccordionComponent({
trigger, trigger,
children, children,
open = false,
}: AccordionComponentType) { }: AccordionComponentType) {
const [value, setValue] = useState(!open ? "" : trigger);
function handleClick() {
value == "" ? setValue(trigger) : setValue("");
}
return (
return <> <>
<Accordion type="single" collapsible> <Accordion type="single" value={value} onValueChange={setValue}>
<AccordionItem value="item-1" className="border-none"> <AccordionItem value={trigger} className="border-none">
<AccordionTrigger className="ml-3">{trigger}</AccordionTrigger> <AccordionTrigger
<AccordionContent> onClick={() => {
{children} handleClick();
</AccordionContent> }}
</AccordionItem> className="ml-3"
</Accordion> >
</> {trigger}
</AccordionTrigger>
<AccordionContent>{children}</AccordionContent>
</AccordionItem>
</Accordion>
</>
);
} }

8
src/frontend/src/contexts/popUpContext.tsx
View file

@ -5,12 +5,15 @@ import React, { useState } from "react";
export const PopUpContext = createContext({ export const PopUpContext = createContext({
openPopUp: (popUpElement: JSX.Element) => {}, openPopUp: (popUpElement: JSX.Element) => {},
closePopUp: () => {}, closePopUp: () => {},
setCloseEdit: (value: string) => {},
closeEdit: "",
}); });
interface PopUpProviderProps { interface PopUpProviderProps {
children: React.ReactNode; children: React.ReactNode;
} }
const PopUpProvider = ({ children }: PopUpProviderProps) => { const PopUpProvider = ({ children }: PopUpProviderProps) => {
const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]); const [popUpElements, setPopUpElements] = useState<JSX.Element[]>([]);
@ -22,8 +25,11 @@ const PopUpProvider = ({ children }: PopUpProviderProps) => {
setPopUpElements((prevPopUps) => prevPopUps.slice(1)); setPopUpElements((prevPopUps) => prevPopUps.slice(1));
}; };
const [closeEdit, setCloseEdit] = useState("");
return ( return (
<PopUpContext.Provider value={{ openPopUp, closePopUp }}> <PopUpContext.Provider value={{ openPopUp, closePopUp, closeEdit, setCloseEdit }}>
{children} {children}
{popUpElements[0]} {popUpElements[0]}
</PopUpContext.Provider> </PopUpContext.Provider>

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

@ -54,10 +54,11 @@ import { TabsContext } from "../../contexts/tabsContext";
export default function ApiModal({ flow }: { flow: FlowType }) { export default function ApiModal({ flow }: { flow: FlowType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
const [activeTab, setActiveTab] = useState("0"); const [activeTab, setActiveTab] = useState("0");
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const [enabled, setEnabled] = useState(null); const [enabled, setEnabled] = useState(null);
const [openAccordion, setOpenAccordion] = useState(false);
const tweak = useRef([]); const tweak = useRef([]);
const { setTweak, getTweak } = useContext(TabsContext); const { setTweak, getTweak } = useContext(TabsContext);
const copyToClipboard = () => { const copyToClipboard = () => {
@ -76,10 +77,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setCloseEdit("");
setTweak([]);
closePopUp(); closePopUp();
} }
} }
useEffect(() => {
if (closeEdit !== "") {
setActiveTab("3");
setOpenAccordion(true);
}
}, [closeEdit]);
const pythonApiCode = getPythonApiCode(flow, tweak.current); const pythonApiCode = getPythonApiCode(flow, tweak.current);
const curl_code = getCurlCode(flow, tweak.current); const curl_code = getCurlCode(flow, tweak.current);
const pythonCode = getPythonCode(flow, tweak.current); const pythonCode = getPythonCode(flow, tweak.current);
@ -179,39 +189,35 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
function buildContent(value) { function buildContent(value) {
const htmlContent = ( const htmlContent = (
<div className="w-[200px]"> <div className="w-[200px]">
<span>{value != null && value != '' ? value : 'None'}</span> <span>{value != null && value != "" ? value : "None"}</span>
</div> </div>
); );
return htmlContent; return htmlContent;
} }
function getValue(value, node, template){ function getValue(value, node, template) {
let returnValue = value ?? ""; let returnValue = value ?? "";
if(getTweak.length > 0){ if (getTweak.length > 0) {
for (const obj of getTweak) { for (const obj of getTweak) {
// Obtém a chave do objeto interno // Obtém a chave do objeto interno
const key = Object.keys(obj)[0]; const key = Object.keys(obj)[0];
// Obtém o valor do objeto interno // Obtém o valor do objeto interno
const value = obj[key]; const value = obj[key];
if(key == node['id']){ if (key == node["id"]) {
Object.keys(value).forEach((key) => { Object.keys(value).forEach((key) => {
if(key == template['name']){ if (key == template["name"]) {
returnValue = value[key]; returnValue = value[key];
} }
}) });
}
} }
} }
else{ } else {
return value ?? ""; return value ?? "";
} }
return returnValue; return returnValue;
} }
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger> <DialogTrigger></DialogTrigger>
@ -228,9 +234,15 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</DialogHeader> </DialogHeader>
<Tabs <Tabs
defaultValue={"0"} value={activeTab}
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" className="w-full h-full overflow-hidden text-center bg-muted rounded-md border"
onValueChange={(value) => setActiveTab(value)} onValueChange={(value) => {
setActiveTab(value)
if(tweak.current.length > 0){
setOpenAccordion(true);
}
}}
> >
<div className="flex items-center justify-between px-2"> <div className="flex items-center justify-between px-2">
<TabsList> <TabsList>
@ -280,7 +292,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
> >
{flow["data"]["nodes"].map((t: any, index) => ( {flow["data"]["nodes"].map((t: any, index) => (
<div className="px-3" key={index}> <div className="px-3" key={index}>
<AccordionComponent trigger={t["data"]["id"]}> <AccordionComponent
trigger={t["data"]["id"]}
open={openAccordion}
>
<div className="flex flex-col gap-5 h-fit"> <div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10"> <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
@ -309,7 +324,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
"code" || "code" ||
t.data.node.template[n].type === t.data.node.template[n].type ===
"prompt" || "prompt" ||
t.data.node.template[n].type === t.data.node.template[n].type ===
"file" || "file" ||
t.data.node.template[n].type === t.data.node.template[n].type ===
"int") "int")
@ -346,9 +361,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
: t.data.node : t.data.node
.template[n].value .template[n].value
} }
onChange={(k) => { onChange={(k) => {}}
}}
onAddInput={(k) => { onAddInput={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
@ -371,14 +384,23 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
)} )}
> >
<TextAreaComponent <TextAreaComponent
disabled={true} disabled={false}
editNode={true} editNode={true}
value={ value={getValue(
t.data.node t.data.node
.template[n] .template[n]
.value ?? "" .value,
} t.data,
t.data.node
.template[n]
)}
onChange={(k) => { onChange={(k) => {
buildTweakObject(
t["data"]["id"],
k,
t.data.node
.template[n]
);
}} }}
/> />
</ShadTooltip> </ShadTooltip>
@ -391,12 +413,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.password ?? false .password ?? false
} }
value={ value={getValue(
t.data.node.template[n]
getValue(t.data.node.template[n] .value,
.value, t.data, t.data.node.template[n]) t.data,
t.data.node.template[n]
} )}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
@ -433,52 +455,54 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
disabled={false} disabled={false}
/> />
</div> </div>
) ) : t.data.node.template[n]
:
t.data.node.template[n]
.type === "file" ? ( .type === "file" ? (
<ShadTooltip <ShadTooltip
delayDuration={1000} delayDuration={1000}
content={buildContent( content={buildContent(
getValue(
t.data.node.template[n] t.data.node.template[n]
.value .value,
)} t.data,
> t.data.node.template[n]
)
)}
>
<div className="mx-auto"> <div className="mx-auto">
<InputFileComponent <InputFileComponent
editNode={true} editNode={true}
disabled={true} disabled={false}
value={ value={
t.data.node.template[n] t.data.node.template[n]
.value ?? "" .value ?? ""
} }
onChange={(k: any) => { onChange={(k: any) => {}}
}} fileTypes={
fileTypes={ t.data.node.template[n]
t.data.node.template[n] .fileTypes
.fileTypes }
} suffixes={
suffixes={ t.data.node.template[n]
t.data.node.template[n] .suffixes
.suffixes }
} onFileChange={(
onFileChange={(k: any) => { k: any
}} ) => {}}
></InputFileComponent> ></InputFileComponent>
</div> </div>
</ShadTooltip> </ShadTooltip>
) : t.data.node.template[n]
)
: t.data.node.template[n]
.type === "float" ? ( .type === "float" ? (
<div className="mx-auto"> <div className="mx-auto">
<FloatComponent <FloatComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={getValue(
getValue(t.data.node.template[n] t.data.node.template[n]
.value, t.data, t.data.node.template[n]) .value,
} t.data,
t.data.node.template[n]
)}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
@ -500,22 +524,19 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
t.data.node.template[n] t.data.node.template[n]
.options .options
} }
onSelect={(k) =>{ onSelect={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
k, k,
t.data.node.template[n] t.data.node.template[n]
) );
} }}
value={getValue(
} t.data.node.template[n]
value={ .value,
getValue(t.data.node.template[n] t.data,
.value, t.data, t.data.node.template[n]) t.data.node.template[n]
} )}
></Dropdown> ></Dropdown>
</div> </div>
) : t.data.node.template[n] ) : t.data.node.template[n]
@ -524,10 +545,12 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<IntComponent <IntComponent
disabled={false} disabled={false}
editNode={true} editNode={true}
value={ value={getValue(
getValue(t.data.node.template[n] t.data.node.template[n]
.value, t.data, t.data.node.template[n]) .value,
} t.data,
t.data.node.template[n]
)}
onChange={(k) => { onChange={(k) => {
buildTweakObject( buildTweakObject(
t["data"]["id"], t["data"]["id"],
@ -542,19 +565,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<ShadTooltip <ShadTooltip
delayDuration={1000} delayDuration={1000}
content={buildContent( content={buildContent(
t.data.node.template[n] getValue(
.value t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
<PromptAreaComponent <PromptAreaComponent
editNode={true} editNode={true}
disabled={true} disabled={false}
value={ value={getValue(
t.data.node.template[n] t.data.node.template[n]
.value ?? "" .value,
} t.data,
t.data.node.template[n]
)}
onChange={(k) => { onChange={(k) => {
buildTweakObject(
t["data"]["id"],
k,
t.data.node.template[
n
]
);
}} }}
/> />
</div> </div>
@ -564,19 +600,32 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<ShadTooltip <ShadTooltip
delayDuration={1000} delayDuration={1000}
content={buildContent( content={buildContent(
t.data.node.template[n] getValue(
.value t.data.node.template[n]
.value,
t.data,
t.data.node.template[n]
)
)} )}
> >
<div className="mx-auto"> <div className="mx-auto">
<CodeAreaComponent <CodeAreaComponent
disabled={true} disabled={false}
editNode={true} editNode={true}
value={ value={getValue(
t.data.node.template[n] t.data.node.template[n]
.value ?? "" .value,
} t.data,
t.data.node.template[n]
)}
onChange={(k) => { onChange={(k) => {
buildTweakObject(
t["data"]["id"],
k,
t.data.node.template[
n
]
);
}} }}
/> />
</div> </div>

4
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -34,13 +34,15 @@ export default function CodeAreaModal({
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp,setCloseEdit } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
closePopUp(); closePopUp();
setCloseEdit("editcode");
}, 300); }, 300);
} }
} }

3
src/frontend/src/modals/promptModal/index.tsx
View file

@ -16,12 +16,13 @@ export default function PromptAreaModal({
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
setCloseEdit("prompt");
closePopUp(); closePopUp();
}, 300); }, 300);
} }

3
src/frontend/src/modals/textAreaModal/index.tsx
View file

@ -15,12 +15,13 @@ export default function TextAreaModal({
}) { }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const [myValue, setMyValue] = useState(value); const [myValue, setMyValue] = useState(value);
const { closePopUp } = useContext(PopUpContext); const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => { setTimeout(() => {
setCloseEdit("textarea");
closePopUp(); closePopUp();
}, 300); }, 300);
} }

2
src/frontend/src/types/components/index.ts
View file

@ -121,6 +121,6 @@ export type RadialProgressType = {
export type AccordionComponentType = { export type AccordionComponentType = {
children?: ReactElement; children?: ReactElement;
value?: string; open?: boolean;
trigger?: string; trigger?: string;
}; };