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

Add global variable functionality and display on Global Variables page

Browse source
This commit is contained in:
anovazzi1 2024-02-05 18:30:41 -03:00
commit 4a1c9f8dae
3 changed files with 71 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/frontend/src/components/inputComponent/index.tsx
View file

@ -7,7 +7,6 @@ import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input"; import { Input } from "../ui/input";
export default function InputComponent({ export default function InputComponent({
autoFocus = false, autoFocus = false,
onBlur, onBlur,
@ -27,8 +26,13 @@ export default function InputComponent({
const [pwdVisible, setPwdVisible] = useState(false); const [pwdVisible, setPwdVisible] = useState(false);
const refInput = useRef<HTMLInputElement>(null); const refInput = useRef<HTMLInputElement>(null);
const [showOptions, setShowOptions] = useState<boolean>(false); const [showOptions, setShowOptions] = useState<boolean>(false);
const [filteredOpts, setFilteredValue] = useState<string[]>(["key", "key2", "key3", "key4", "key5"]); const [filteredOpts, setFilteredValue] = useState<string[]>([
"key",
"key2",
"key3",
"key4",
"key5",
]);
// Clear component state // Clear component state
useEffect(() => { useEffect(() => {
@ -37,16 +41,15 @@ export default function InputComponent({
} }
}, [disabled]); }, [disabled]);
const filteredOptions = filteredOpts.filter((option) =>
const filteredOptions = filteredOpts.filter((option) => option.toLowerCase().includes(value.toLowerCase())) option.toLowerCase().includes(value.toLowerCase())
);
function onInputLostFocus(event): void { function onInputLostFocus(event): void {
if (onBlur) onBlur(event); if (onBlur) onBlur(event);
setShowOptions(false); setShowOptions(false);
} }
return ( return (
<div className="relative w-full"> <div className="relative w-full">
{isForm ? ( {isForm ? (
@ -136,59 +139,54 @@ export default function InputComponent({
false ? "mb-2 w-[250px]" : "absolute w-full" false ? "mb-2 w-[250px]" : "absolute w-full"
)} )}
> >
{filteredOptions.map( {filteredOptions.map((option, id) => (
(option, id) => ( <Listbox.Option
<Listbox.Option key={id}
key={id} className={({ active }) =>
className={({ active }) => classNames(
classNames( active ? " bg-accent" : "",
active ? " bg-accent" : "", editNode
editNode ? "dropdown-component-false-option"
? "dropdown-component-false-option" : "dropdown-component-true-option",
: "dropdown-component-true-option", " hover:bg-accent"
" hover:bg-accent" )
) }
} value={option}
value={option} >
> {({ selected, active }) => (
{({ selected, active }) => ( <>
<> <span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate "
)}
data-testid={`${option}-${id ?? ""}-option`}
>
{option}
</span>
{selected ? (
<span <span
className={classNames( className={classNames(
selected active ? "text-background " : "",
? "font-semibold" "dropdown-component-choosal"
: "font-normal",
"block truncate "
)} )}
data-testid={`${option}-${id ?? ""}-option`}
> >
{option} <IconComponent
name="Check"
className={
active
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>
</span> </span>
) : null}
</>
{selected ? ( )}
<span </Listbox.Option>
className={classNames( ))}
active ? "text-background " : "",
"dropdown-component-choosal"
)}
>
<IconComponent
name="Check"
className={
active
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>
</span>
) : null}
</>
)}
</Listbox.Option>
)
)}
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</div> </div>
@ -199,7 +197,6 @@ export default function InputComponent({
</> </>
)} )}
<span <span
className={ className={
password password
@ -214,7 +211,6 @@ export default function InputComponent({
/> />
</span> </span>
{password && ( {password && (
<button <button
type="button" type="button"

8
src/frontend/src/pages/globalVariablesPage/components/addNewVariableButton.tsx
View file

@ -5,14 +5,20 @@ import { Label } from "../../../components/ui/label";
import { Textarea } from "../../../components/ui/textarea"; import { Textarea } from "../../../components/ui/textarea";
import { registerGlobalVariable } from "../../../controllers/API"; import { registerGlobalVariable } from "../../../controllers/API";
import BaseModal from "../../../modals/baseModal"; import BaseModal from "../../../modals/baseModal";
import { useGlobalVariablesStore } from "../../../stores/globalVariables";
//TODO IMPLEMENT FORM LOGIC //TODO IMPLEMENT FORM LOGIC
export default function AddNewVariableButton(): JSX.Element { export default function AddNewVariableButton(): JSX.Element {
const [key, setKey] = useState(""); const [key, setKey] = useState("");
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const addGlobalVariable = useGlobalVariablesStore(
(state) => state.addGlobalVariable
);
function handleSaveVariable() { function handleSaveVariable() {
registerGlobalVariable(key, value).then((_) => {}); registerGlobalVariable(key, value).then((_) => {
addGlobalVariable(key, value);
});
} }
return ( return (
<BaseModal size="small"> <BaseModal size="small">

15
src/frontend/src/pages/globalVariablesPage/index.tsx
View file

@ -3,16 +3,23 @@ import { useGlobalVariablesStore } from "../../stores/globalVariables";
import AddNewVariableButton from "./components/addNewVariableButton"; import AddNewVariableButton from "./components/addNewVariableButton";
export default function GlobalVariablesPage() { export default function GlobalVariablesPage() {
const globalVariables = useGlobalVariablesStore( const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariables (state) => state.globalVariablesEntries
); );
return ( return (
<PageLayout <PageLayout
title="Variables" title="Variables"
description="set your own personal varaibles and use it on your flow" description="set your own personal varaibles and use it on your flow"
> >
{Object.keys(globalVariables).length > 0 ? ( {globalVariablesEntries.length > 0 ? (
<div></div> <div className="flex h-full w-full flex-col justify-around">
{globalVariablesEntries.map((key, index) => (
<div className="flex w-full items-start" key={index}>
<span>{key}</span>
</div>
))}
<AddNewVariableButton />
</div>
) : ( ) : (
<div className="flex h-full w-full flex-col items-center justify-center align-middle"> <div className="flex h-full w-full flex-col items-center justify-center align-middle">
<div> <div>