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 { Input } from "../ui/input";
export default function InputComponent({
autoFocus = false,
onBlur,
@ -27,8 +26,13 @@ export default function InputComponent({
const [pwdVisible, setPwdVisible] = useState(false);
const refInput = useRef<HTMLInputElement>(null);
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
useEffect(() => {
@ -37,16 +41,15 @@ export default function InputComponent({
}
}, [disabled]);
const filteredOptions = filteredOpts.filter((option) => option.toLowerCase().includes(value.toLowerCase()))
const filteredOptions = filteredOpts.filter((option) =>
option.toLowerCase().includes(value.toLowerCase())
);
function onInputLostFocus(event): void {
if (onBlur) onBlur(event);
setShowOptions(false);
}
return (
<div className="relative w-full">
{isForm ? (
@ -136,59 +139,54 @@ export default function InputComponent({
false ? "mb-2 w-[250px]" : "absolute w-full"
)}
>
{filteredOptions.map(
(option, id) => (
<Listbox.Option
key={id}
className={({ active }) =>
classNames(
active ? " bg-accent" : "",
editNode
? "dropdown-component-false-option"
: "dropdown-component-true-option",
" hover:bg-accent"
)
}
value={option}
>
{({ selected, active }) => (
<>
{filteredOptions.map((option, id) => (
<Listbox.Option
key={id}
className={({ active }) =>
classNames(
active ? " bg-accent" : "",
editNode
? "dropdown-component-false-option"
: "dropdown-component-true-option",
" hover:bg-accent"
)
}
value={option}
>
{({ selected, active }) => (
<>
<span
className={classNames(
selected ? "font-semibold" : "font-normal",
"block truncate "
)}
data-testid={`${option}-${id ?? ""}-option`}
>
{option}
</span>
{selected ? (
<span
className={classNames(
selected
? "font-semibold"
: "font-normal",
"block truncate "
active ? "text-background " : "",
"dropdown-component-choosal"
)}
data-testid={`${option}-${id ?? ""}-option`}
>
{option}
<IconComponent
name="Check"
className={
active
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>
</span>
{selected ? (
<span
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>
)
)}
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
@ -199,7 +197,6 @@ export default function InputComponent({
</>
)}
<span
className={
password
@ -214,7 +211,6 @@ export default function InputComponent({
/>
</span>
{password && (
<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 { registerGlobalVariable } from "../../../controllers/API";
import BaseModal from "../../../modals/baseModal";
import { useGlobalVariablesStore } from "../../../stores/globalVariables";
//TODO IMPLEMENT FORM LOGIC
export default function AddNewVariableButton(): JSX.Element {
const [key, setKey] = useState("");
const [value, setValue] = useState("");
const addGlobalVariable = useGlobalVariablesStore(
(state) => state.addGlobalVariable
);
function handleSaveVariable() {
registerGlobalVariable(key, value).then((_) => {});
registerGlobalVariable(key, value).then((_) => {
addGlobalVariable(key, value);
});
}
return (
<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";
export default function GlobalVariablesPage() {
const globalVariables = useGlobalVariablesStore(
(state) => state.globalVariables
const globalVariablesEntries = useGlobalVariablesStore(
(state) => state.globalVariablesEntries
);
return (
<PageLayout
title="Variables"
description="set your own personal varaibles and use it on your flow"
>
{Object.keys(globalVariables).length > 0 ? (
<div></div>
{globalVariablesEntries.length > 0 ? (
<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>