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

refactor: improve readability of several components (#3714)

Browse source 
* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* refactor to improve readability

* ✅ (Simple Agent.spec.ts): update expected count of python words to 2 for accurate test results
📝 (auto-login-off.spec.ts): add a 1-second timeout before checking visibility of a text element to ensure proper rendering and improve test reliability

* 📝 (cardComponent/index.tsx): Extract handlePlaygroundClick function to improve code readability and maintainability
📝 (codeAreaComponent/index.tsx): Refactor code to use consistent naming conventions and improve code structure
📝 (rename-label.tsx): Refactor code to use consistent naming conventions and improve code structure
📝 (dictAreaModal/index.tsx): Refactor code to use consistent naming conventions and improve code structure

* 🔧 (rename-label.tsx): Refactor RenameLabel component to improve readability and maintainability by restructuring the component logic into separate functions for handling blur, change, and double click events. Split the component rendering logic into separate functions for input and span elements.

* update type

* [autofix.ci] apply automated fixes

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
Cristhian Zanforlin Lousa 2024-09-06 15:30:20 -03:00 • committed by GitHub
commit 40798c5b5a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 737 additions and 710 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/frontend/src/components/cardComponent/index.tsx
View file

@ -55,6 +55,32 @@ export default function CollectionCardComponent({
const { onDragStart } = useDragStart(data);
const handlePlaygroundClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
e.stopPropagation();
track("Playground Button Clicked", { flowId: data.id });
setLoadingPlayground(true);
const flow = getFlowById(data.id);
if (flow) {
if (!hasPlayground(flow)) {
setErrorData({
title: "Error",
list: ["This flow doesn't have a playground."],
});
setLoadingPlayground(false);
return;
}
setCurrentFlow(flow);
setOpenPlayground(true);
setLoadingPlayground(false);
} else {
setErrorData({
title: "Error",
list: ["Error getting flow data."],
});
}
};
return (
<>
<Card
@ -135,31 +161,7 @@ export default function CollectionCardComponent({
size="sm"
className="gap-2 whitespace-nowrap bg-muted"
data-testid={"playground-flow-button-" + data.id}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
track("Playground Button Clicked", { flowId: data.id });
setLoadingPlayground(true);
const flow = getFlowById(data.id);
if (flow) {
if (!hasPlayground(flow)) {
setErrorData({
title: "Error",
list: ["This flow doesn't have a playground."],
});
setLoadingPlayground(false);
return;
}
setCurrentFlow(flow);
setOpenPlayground(true);
setLoadingPlayground(false);
} else {
setErrorData({
title: "Error",
list: ["Error getting flow data."],
});
}
}}
onClick={handlePlaygroundClick}
>
{!loadingPlayground ? (
<IconComponent

74
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import CodeAreaModal from "../../modals/codeAreaModal";
import { CodeAreaComponentType } from "../../types/components";
import { cn } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
@ -17,57 +18,68 @@ export default function CodeAreaComponent({
open,
setOpen,
}: CodeAreaComponentType) {
const [myValue, setMyValue] = useState(
const [componentValue, setComponentValue] = useState(
typeof value == "string" ? value : JSON.stringify(value),
);
useEffect(() => {
if (disabled && myValue !== "") {
setMyValue("");
if (disabled && componentValue !== "") {
setComponentValue("");
onChange("", undefined, true);
}
}, [disabled]);
useEffect(() => {
setMyValue(typeof value == "string" ? value : JSON.stringify(value));
setComponentValue(typeof value == "string" ? value : JSON.stringify(value));
}, [value]);
const handleValueChange = (newValue) => {
onChange(newValue);
};
const renderInputText = () => (
<span
id={id}
data-testid={id}
className={cn(
editNode
? "input-edit-node input-dialog"
: "primary-input text-muted-foreground",
disabled && !editNode && "input-disable input-ring",
)}
>
{value !== "" ? value : "Type something..."}
</span>
);
const renderExternalLinkIcon = () => {
if (editNode) return null;
return (
<IconComponent
name="ExternalLink"
className={cn(
"icons-parameters-comp shrink-0",
disabled ? "text-ring" : "hover:text-accent-foreground",
)}
/>
);
};
return (
<div className={disabled ? "pointer-events-none w-full" : "w-full"}>
<div className={cn("w-full", disabled && "pointer-events-none")}>
<CodeAreaModal
open={open}
setOpen={setOpen}
readonly={readonly}
dynamic={dynamic}
value={myValue}
value={value}
nodeClass={nodeClass}
setNodeClass={setNodeClass!}
setValue={(value: string) => {
setMyValue(value);
onChange(value);
}}
setValue={handleValueChange}
>
<div className="flex w-full items-center gap-3">
<span
id={id}
data-testid={id}
className={
editNode
? "input-edit-node input-dialog"
: (disabled ? "input-disable input-ring " : "") +
" primary-input text-muted-foreground"
}
>
{myValue !== "" ? myValue : "Type something..."}
</span>
{!editNode && (
<IconComponent
name="ExternalLink"
className={
"icons-parameters-comp shrink-0" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
{renderInputText()}
{renderExternalLinkIcon()}
</div>
</CodeAreaModal>
</div>

240
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -69,131 +69,125 @@ export default function Dropdown({
}
}, [open]);
return (
<>
{Object.keys(options ?? [])?.length > 0 || combobox ? (
<>
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
{children ? (
<PopoverAnchor>{children}</PopoverAnchor>
) : (
<PopoverTrigger asChild>
<Button
disabled={disabled}
variant="primary"
size="xs"
role="combobox"
ref={refButton}
aria-expanded={open}
data-testid={`${id ?? ""}`}
className={cn(
editNode
? "dropdown-component-outline"
: "dropdown-component-false-outline",
"w-full justify-between font-normal",
editNode ? "input-edit-node" : "py-2",
)}
>
<span
className="truncate"
data-testid={`value-dropdown-` + id}
>
{value &&
value !== "" &&
filteredOptions.find((option) => option === value)
? filteredOptions.find((option) => option === value)
: "Choose an option..."}
</span>
const renderTriggerButton = () => (
<PopoverTrigger asChild>
<Button
disabled={disabled}
variant="primary"
size="xs"
role="combobox"
ref={refButton}
aria-expanded={open}
data-testid={id}
className={cn(
editNode
? "dropdown-component-outline input-edit-node"
: "dropdown-component-false-outline py-2",
"w-full justify-between font-normal",
)}
>
<span className="truncate" data-testid={`value-dropdown-${id}`}>
{value &&
value !== "" &&
filteredOptions.find((option) => option === value)
? filteredOptions.find((option) => option === value)
: "Choose an option..."}
</span>
<ForwardedIconComponent
name="ChevronsUpDown"
className="ml-2 h-4 w-4 shrink-0 opacity-50"
/>
</Button>
</PopoverTrigger>
);
<ForwardedIconComponent
name="ChevronsUpDown"
className="ml-2 h-4 w-4 shrink-0 opacity-50"
/>
</Button>
</PopoverTrigger>
)}
<PopoverContentDropdown
side="bottom"
avoidCollisions={!!children}
className="noflow nowheel nopan nodelete nodrag p-0"
style={
children
? {}
: { minWidth: refButton?.current?.clientWidth ?? "200px" }
}
>
<Command>
<div className="flex items-center border-b px-3">
<ForwardedIconComponent
name="search"
className="mr-2 h-4 w-4 shrink-0 opacity-50"
/>
<input
onChange={searchRoleByTerm}
placeholder="Search options..."
className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
<CommandList>
<CommandEmpty>No values found.</CommandEmpty>
<CommandGroup defaultChecked={false}>
{filteredOptions?.map((option, id) => (
<ShadTooltip
delayDuration={700}
key={id}
content={option}
>
<div>
<CommandItem
key={id}
value={option}
onSelect={(currentValue) => {
onSelect(currentValue);
setOpen(false);
}}
className="items-center overflow-hidden truncate"
data-testid={`${option}-${id ?? ""}-option`}
>
{customValue === option ? (
<span className="text-muted-foreground">
Text:&nbsp;
</span>
) : (
<></>
)}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value === option ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
</div>
</ShadTooltip>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContentDropdown>
</Popover>
</>
const renderSearchInput = () => (
<div className="flex items-center border-b px-3">
<ForwardedIconComponent
name="search"
className="mr-2 h-4 w-4 shrink-0 opacity-50"
/>
<input
onChange={searchRoleByTerm}
placeholder="Search options..."
className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
/>
</div>
);
const renderOptionsList = () => (
<CommandList>
<CommandEmpty>No values found.</CommandEmpty>
<CommandGroup defaultChecked={false}>
{filteredOptions?.map((option, index) => (
<ShadTooltip key={index} delayDuration={700} content={option}>
<div>
<CommandItem
value={option}
onSelect={(currentValue) => {
onSelect(currentValue);
setOpen(false);
}}
className="items-center overflow-hidden truncate"
data-testid={`${option}-${index}-option`}
>
{customValue === option && (
<span className="text-muted-foreground">Text:&nbsp;</span>
)}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value === option ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
</div>
</ShadTooltip>
))}
</CommandGroup>
</CommandList>
);
const renderPopoverContent = () => (
<PopoverContentDropdown
side="bottom"
avoidCollisions={!!children}
className="noflow nowheel nopan nodelete nodrag p-0"
style={
children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }
}
>
<Command>
{renderSearchInput()}
{renderOptionsList()}
</Command>
</PopoverContentDropdown>
);
if (Object.keys(options).length === 0 && !combobox) {
return isLoading ? (
<div>
<span className="text-sm italic">Loading...</span>
</div>
) : (
<div>
<span className="text-sm italic">
No parameters are available for display.
</span>
</div>
);
}
return (
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
{children ? (
<PopoverAnchor>{children}</PopoverAnchor>
) : (
<>
{(!isLoading && (
<div>
<span className="text-sm italic">
No parameters are available for display.
</span>
</div>
)) || (
<div>
<span className="text-sm italic">Loading...</span>
</div>
)}
</>
renderTriggerButton()
)}
</>
{renderPopoverContent()}
</Popover>
);
}

32
src/frontend/src/components/floatComponent/index.tsx
View file

@ -20,6 +20,19 @@ export default function FloatComponent({
}
}, [disabled]);
const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
const inputValue = Number(event.target.value);
if (inputValue < min) {
event.target.value = min.toString();
} else if (inputValue > max) {
event.target.value = max.toString();
}
};
const handleChange = (event) => {
onChange(event.target.value);
};
return (
<div className="w-full">
<Input
@ -28,25 +41,14 @@ export default function FloatComponent({
type="number"
step={step}
min={min}
onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
if (Number(event.target.value) < min) {
event.target.value = min.toString();
}
if (Number(event.target.value) > max) {
event.target.value = max.toString();
}
}}
max={max}
value={value ?? ""}
disabled={disabled}
className={editNode ? "input-edit-node" : ""}
placeholder={`Enter a value`}
onChange={(event) => {
onChange(event.target.value);
}}
onKeyDown={(e) => {
handleKeyDown(e, value, "");
}}
placeholder="Enter a value"
onInput={handleInput}
onChange={handleChange}
onKeyDown={(e) => handleKeyDown(e, value, "")}
/>
</div>
);

119
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -29,6 +29,36 @@ export default function InputListComponent({
if (!value?.length) value = [""];
const handleInputChange = (index, newValue) => {
const newInputList = _.cloneDeep(value);
newInputList[index] = newValue;
onChange(newInputList);
};
const addNewInput = (e) => {
e.preventDefault();
const newInputList = _.cloneDeep(value);
newInputList.push("");
onChange(newInputList);
};
const removeInput = (index, e) => {
e.preventDefault();
const newInputList = _.cloneDeep(value);
newInputList.splice(index, 1);
onChange(newInputList);
};
const getButtonClassName = () =>
classNames(
disabled || playgroundDisabled
? "cursor-not-allowed text-muted-foreground"
: "text-primary hover:text-accent-foreground",
);
const getTestId = (type, index) =>
`input-list-${type}-btn${editNode ? "-edit" : ""}_${componentName}-${index}`;
return (
<div
className={classNames(
@ -36,72 +66,31 @@ export default function InputListComponent({
"flex w-full flex-col gap-3",
)}
>
{value.map((singleValue, idx) => {
return (
<div key={idx} className="flex w-full gap-3">
<Input
disabled={disabled || playgroundDisabled}
type="text"
value={singleValue}
className={editNode ? "input-edit-node" : ""}
placeholder="Type something..."
onChange={(event) => {
let newInputList = _.cloneDeep(value);
newInputList[idx] = event.target.value;
onChange(newInputList);
}}
data-testid={`${id}_` + idx}
{value.map((singleValue, index) => (
<div key={index} className="flex w-full gap-3">
<Input
disabled={disabled || playgroundDisabled}
type="text"
value={singleValue}
className={editNode ? "input-edit-node" : ""}
placeholder="Type something..."
onChange={(event) => handleInputChange(index, event.target.value)}
data-testid={`${id}_${index}`}
/>
<Button
unstyled
className={getButtonClassName()}
onClick={index === 0 ? addNewInput : (e) => removeInput(index, e)}
data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
disabled={disabled || playgroundDisabled}
>
<IconComponent
name={index === 0 ? "Plus" : "X"}
className="h-4 w-4"
/>
{idx === 0 ? (
<Button
unstyled
className={cn(
disabled || playgroundDisabled
? "cursor-not-allowed text-muted-foreground"
: "text-primary hover:text-accent-foreground",
)}
onClick={(e) => {
let newInputList = _.cloneDeep(value);
newInputList.push("");
onChange(newInputList);
e.preventDefault();
}}
data-testid={
`input-list-plus-btn${
editNode ? "-edit" : ""
}_${componentName}-` + idx
}
disabled={disabled || playgroundDisabled}
>
<IconComponent name="Plus" className="h-4 w-4" />
</Button>
) : (
<Button
unstyled
className={cn(
disabled || playgroundDisabled
? "cursor-not-allowed text-muted-foreground"
: "text-primary hover:text-accent-foreground",
)}
data-testid={
`input-list-minus-btn${
editNode ? "-edit" : ""
}_${componentName}-` + idx
}
onClick={(e) => {
let newInputList = _.cloneDeep(value);
newInputList.splice(idx, 1);
onChange(newInputList);
e.preventDefault();
}}
disabled={disabled || playgroundDisabled}
>
<IconComponent name="X" className="h-4 w-4" />
</Button>
)}
</div>
);
})}
</Button>
</div>
))}
</div>
);
}

59
src/frontend/src/components/intComponent/index.tsx
View file

@ -38,36 +38,57 @@ export default function IntComponent({
onChange(Number(e.target.value));
};
const getStepValue = () => {
return (Number.isInteger(rangeSpec?.step) ? rangeSpec.step : 1) ?? 1;
};
const getMinValue = () => {
return rangeSpec?.min ?? min;
};
const getMaxValue = () => {
return rangeSpec?.max ?? undefined;
};
const getInputClassName = () => {
return cn(
editNode ? "input-edit-node" : "",
"nopan nodelete nodrag noflow primary-input",
);
};
const handleNumberChange = (newValue) => {
onChange(Number(newValue));
};
const handleInputChange = (event) => {
const inputValue = Number(event.target.value);
if (inputValue < getMinValue()) {
event.target.value = getMinValue().toString();
}
};
const inputRef = useRef(null);
return (
<div className="w-full">
<NumberInput
id={id}
step={(Number.isInteger(rangeSpec?.step) ? rangeSpec?.step : 1) ?? 1}
min={rangeSpec?.min ?? min}
max={rangeSpec?.max ?? undefined}
onChange={(value) => {
onChange(Number(value));
}}
step={getStepValue()}
min={getMinValue()}
max={getMaxValue()}
onChange={handleNumberChange}
value={value ?? ""}
>
<NumberInputField
className={cn(
editNode ? "input-edit-node" : "",
"nopan nodelete nodrag noflow primary-input",
)}
className={getInputClassName()}
onChange={handleChangeInput}
onKeyDown={(event) => {
handleKeyDown(event, value, "");
}}
onInput={(event: React.ChangeEvent<HTMLInputElement>) => {
if (Number(event.target.value) < min) {
event.target.value = min.toString();
}
}}
onKeyDown={(event) => handleKeyDown(event, value, "")}
onInput={handleInputChange}
disabled={disabled}
placeholder={editNode ? "Integer number" : "Type an integer number"}
data-testid={id}
ref={ref}
ref={inputRef}
/>
<NumberInputStepper paddingRight={10}>
<NumberIncrementStepper fontSize={8} marginTop={6} />

143
src/frontend/src/components/keypairListComponent/index.tsx
View file

@ -7,7 +7,6 @@ import {
hasDuplicateKeys,
} from "@/utils/reactflowUtils";
import { cloneDeep } from "lodash";
import { classNames } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
import { Input } from "../ui/input";
@ -27,7 +26,7 @@ export default function KeypairListComponent({
const [duplicateKey, setDuplicateKey] = useState(false);
const myValue =
const values =
Object.keys(value || {})?.length === 0 || !value
? [{ "": "" }]
: convertObjToArray(value, "dict");
@ -43,120 +42,100 @@ export default function KeypairListComponent({
};
const handleChangeKey = (event, idx) => {
const oldKey = Object.keys(myValue[idx])[0];
const updatedObj = { [event.target.value]: myValue[idx][oldKey] };
const oldKey = Object.keys(values[idx])[0];
const updatedObj = { [event.target.value]: values[idx][oldKey] };
const newValue = cloneDeep(myValue);
const newValue = cloneDeep(values);
newValue[idx] = updatedObj;
handleNewValue(newValue);
};
const handleChangeValue = (event, idx) => {
const key = Object.keys(myValue[idx])[0];
const key = Object.keys(values[idx])[0];
const updatedObj = { [key]: event.target.value };
const newValue = cloneDeep(myValue);
const newValue = cloneDeep(values);
newValue[idx] = updatedObj;
handleNewValue(newValue);
};
const addNewKeyValuePair = () => {
const newValues = cloneDeep(values);
newValues.push({ "": "" });
onChange(newValues);
};
const removeKeyValuePair = (index) => {
const newValues = cloneDeep(values);
newValues.splice(index, 1);
onChange(newValues);
};
const getInputClassName = (isEditNode, isDuplicateKey) => {
return `${isEditNode ? "input-edit-node" : ""} ${isDuplicateKey ? "input-invalid" : ""}`.trim();
};
const getTestId = (prefix, index) =>
`${editNode ? "editNode" : ""}${prefix}${index}`;
return (
<div
className={classNames(
myValue?.length > 1 && editNode ? "mx-2 my-1" : "",
"flex h-full flex-col gap-3",
)}
className={`flex h-full flex-col gap-3 ${values?.length > 1 && editNode ? "mx-2 my-1" : ""}`}
>
{myValue?.map((obj, index) => {
return Object.keys(obj).map((key, idx) => {
return (
<div key={idx} className="flex w-full gap-2">
<Input
data-testid={
editNode ? "editNodekeypair" + index : "keypair" + index
}
id={editNode ? "editNodekeypair" + index : "keypair" + index}
type="text"
value={key.trim()}
className={classNames(
editNode ? "input-edit-node" : "",
duplicateKey ? "input-invalid" : "",
)}
placeholder="Type key..."
onChange={(event) => handleChangeKey(event, index)}
/>
{values?.map((obj, index) =>
Object.keys(obj).map((key, idx) => (
<div key={idx} className="flex w-full gap-2">
<Input
data-testid={getTestId("keypair", index)}
id={getTestId("keypair", index)}
type="text"
value={key.trim()}
className={getInputClassName(editNode, duplicateKey)}
placeholder="Type key..."
onChange={(event) => handleChangeKey(event, index)}
/>
<Input
data-testid={
editNode
? "editNodekeypair" + (index + 100).toString()
: "keypair" + (index + 100).toString()
}
id={
editNode
? "editNodekeypair" + (index + 100).toString()
: "keypair" + (index + 100).toString()
}
type="text"
disabled={disabled}
value={obj[key]}
className={editNode ? "input-edit-node" : ""}
placeholder="Type a value..."
onChange={(event) => handleChangeValue(event, index)}
/>
<Input
data-testid={getTestId("keypair", index + 100)}
id={getTestId("keypair", index + 100)}
type="text"
disabled={disabled}
value={obj[key]}
className={editNode ? "input-edit-node" : ""}
placeholder="Type a value..."
onChange={(event) => handleChangeValue(event, index)}
/>
{isList && index === myValue.length - 1 ? (
{isList &&
(index === values.length - 1 ? (
<button
disabled={disabled}
onClick={() => {
let newInputList = cloneDeep(myValue);
newInputList.push({ "": "" });
onChange(newInputList);
}}
id={
editNode
? "editNodeplusbtn" + index.toString()
: "plusbtn" + index.toString()
}
onClick={addNewKeyValuePair}
id={getTestId("plusbtn", index)}
data-testid={id}
>
<IconComponent
name="Plus"
className={"h-4 w-4 hover:text-accent-foreground"}
className="h-4 w-4 hover:text-accent-foreground"
/>
</button>
) : isList ? (
) : (
<button
onClick={() => {
let newInputList = cloneDeep(myValue);
newInputList.splice(index, 1);
onChange(newInputList);
}}
data-testid={
editNode
? "editNodeminusbtn" + index.toString()
: "minusbtn" + index.toString()
}
id={
editNode
? "editNodeminusbtn" + index.toString()
: "minusbtn" + index.toString()
}
onClick={() => removeKeyValuePair(index)}
data-testid={getTestId("minusbtn", index)}
id={getTestId("minusbtn", index)}
>
<IconComponent
name="X"
className="h-4 w-4 hover:text-status-red"
/>
</button>
) : (
""
)}
</div>
);
});
})}
))}
</div>
)),
)}
</div>
);
}

273
src/frontend/src/components/multiselectComponent/index.tsx
View file

@ -92,156 +92,139 @@ export default function MultiselectComponent({
}
}, [open]);
return (
<>
{Object.keys(options ?? [])?.length > 0 || combobox ? (
<>
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
{children ? (
<PopoverAnchor>{children}</PopoverAnchor>
) : (
<PopoverTrigger asChild>
<Button
disabled={disabled}
variant="primary"
size="xs"
role="combobox"
ref={refButton}
aria-expanded={open}
data-testid={`${id ?? ""}`}
const handleOptionSelect = (currentValue) => {
if (value.includes(currentValue)) {
onSelect(value.filter((v) => v !== currentValue));
} else {
onSelect([...value, currentValue]);
}
};
const renderDropdownTrigger = () => (
<PopoverTrigger asChild>
<Button
disabled={disabled}
variant="primary"
size="xs"
role="combobox"
ref={refButton}
aria-expanded={open}
data-testid={id}
className={cn(
editNode
? "dropdown-component-outline input-edit-node"
: "dropdown-component-false-outline py-2",
"w-full justify-between font-normal",
)}
>
<span className="truncate" data-testid={`value-dropdown-${id}`}>
{value.length > 0 && options.find((option) => value.includes(option))
? value.join(", ")
: "Choose an option..."}
</span>
<ForwardedIconComponent
name="ChevronsUpDown"
className="ml-2 h-4 w-4 shrink-0 opacity-50"
/>
</Button>
</PopoverTrigger>
);
const renderSearchInput = () => (
<div className="flex items-center border-b px-3">
<ForwardedIconComponent
name="search"
className="mr-2 h-4 w-4 shrink-0 opacity-50"
/>
<input
onChange={(event) => {
setSearchValue(event.target.value);
}}
placeholder="Search options..."
className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
/>
<Button
unstyled
className="ml-2"
onClick={() => setOnlySelected((old) => !old)}
>
<ForwardedIconComponent
className="h-4 w-4"
name={onlySelected ? "CheckCheck" : "Check"}
/>
</Button>
</div>
);
const renderOptionsList = () => (
<CommandList className="overflow-y-scroll">
<CommandEmpty>No values found.</CommandEmpty>
<CommandGroup>
{filteredOptions.map((option, index) => (
<ShadTooltip key={index} delayDuration={700} content={option}>
<div>
<CommandItem
value={option}
onSelect={handleOptionSelect}
className="items-center overflow-hidden truncate"
data-testid={`${option}-${id ?? ""}-option`}
>
{(customValues.includes(option) || searchValue === option) && (
<span className="text-muted-foreground">Text:&nbsp;</span>
)}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
editNode
? "dropdown-component-outline"
: "dropdown-component-false-outline",
"w-full justify-between font-normal",
editNode ? "input-edit-node" : "py-2",
"ml-auto h-4 w-4 shrink-0 text-primary",
value.includes(option) ? "opacity-100" : "opacity-0",
)}
>
<span
className="truncate"
data-testid={`value-dropdown-` + id}
>
{value &&
value.length > 0 &&
options.find((option) => value.includes(option))
? value.join(", ")
: "Choose an option..."}
</span>
/>
</CommandItem>
</div>
</ShadTooltip>
))}
</CommandGroup>
</CommandList>
);
<ForwardedIconComponent
name="ChevronsUpDown"
className="ml-2 h-4 w-4 shrink-0 opacity-50"
/>
</Button>
</PopoverTrigger>
)}
<PopoverContentDropdown
onOpenAutoFocus={(event) => {
event.preventDefault();
}}
side="bottom"
avoidCollisions={!!children}
className="noflow nowheel nopan nodelete nodrag p-0"
style={
children
? {}
: { minWidth: refButton?.current?.clientWidth ?? "200px" }
}
>
<Command>
<div className="flex items-center border-b px-3">
<ForwardedIconComponent
name="search"
className="mr-2 h-4 w-4 shrink-0 opacity-50"
/>
<input
onChange={(event) => {
setSearchValue(event.target.value);
searchRoleByTerm(event.target.value);
}}
placeholder="Search options..."
className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
/>
<Button
unstyled
className="ml-2"
onClick={() => setOnlySelected((old) => !old)}
>
<ForwardedIconComponent
className="h-4 w-4"
name={onlySelected ? "CheckCheck" : "Check"}
/>
</Button>
</div>
if (Object.keys(options).length === 0 && !combobox) {
return isLoading ? (
<div>
<span className="text-sm italic">Loading...</span>
</div>
) : (
<div>
<span className="text-sm italic">
No parameters are available for display.
</span>
</div>
);
}
<CommandList className="overflow-y-scroll">
<CommandEmpty>No values found.</CommandEmpty>
<CommandGroup defaultChecked={false}>
{filteredOptions?.map((option, id) => (
<ShadTooltip
delayDuration={700}
key={id}
content={option}
>
<div>
<CommandItem
key={id}
value={option}
onSelect={(currentValue) => {
if (value.includes(currentValue)) {
onSelect(
value.filter((v) => v !== currentValue),
);
} else {
onSelect([...value, currentValue]);
}
}}
className="items-center overflow-hidden truncate"
data-testid={`${option}-${id ?? ""}-option`}
>
{customValues.includes(option) ||
searchValue === option ? (
<span className="text-muted-foreground">
Text:&nbsp;
</span>
) : (
<></>
)}
<span className="truncate">{option}</span>
<ForwardedIconComponent
name="Check"
className={cn(
"ml-auto h-4 w-4 shrink-0 text-primary",
value.includes(option)
? "opacity-100"
: "opacity-0",
)}
/>
</CommandItem>
</div>
</ShadTooltip>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContentDropdown>
</Popover>
</>
return (
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
{children ? (
<PopoverAnchor>{children}</PopoverAnchor>
) : (
<>
{(!isLoading && (
<div>
<span className="text-sm italic">
No parameters are available for display.
</span>
</div>
)) || (
<div>
<span className="text-sm italic">Loading...</span>
</div>
)}
</>
renderDropdownTrigger()
)}
</>
<PopoverContentDropdown
onOpenAutoFocus={(event) => event.preventDefault()}
side="bottom"
avoidCollisions={!!children}
className="noflow nowheel nopan nodelete nodrag p-0"
style={
children
? {}
: { minWidth: refButton?.current?.clientWidth ?? "200px" }
}
>
<Command>
{renderSearchInput()}
{renderOptionsList()}
</Command>
</PopoverContentDropdown>
</Popover>
);
}

57
src/frontend/src/components/promptComponent/index.tsx
View file

@ -1,6 +1,7 @@
import PromptModal from "@/modals/promptModal";
import { useEffect } from "react";
import { PromptAreaComponentType } from "../../types/components";
import { cn } from "../../utils/utils";
import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button";
@ -21,8 +22,38 @@ export default function PromptAreaComponent({
}
}, [disabled]);
const renderPromptText = () => (
<span
id={id}
data-testid={id}
className={cn(
editNode
? "input-edit-node input-dialog"
: "primary-input text-muted-foreground",
disabled && !editNode && "input-disable text-ring",
)}
>
{value !== "" ? value : "Type your prompt here..."}
</span>
);
const renderExternalLinkIcon = () => {
if (editNode) return null;
return (
<IconComponent
id={id}
name="ExternalLink"
className={cn(
"icons-parameters-comp shrink-0",
disabled ? "text-ring" : "hover:text-accent-foreground",
)}
/>
);
};
return (
<div className={disabled ? "pointer-events-none w-full" : "w-full"}>
<div className={cn("w-full", disabled && "pointer-events-none")}>
<PromptModal
id={id}
field_name={field_name}
@ -34,28 +65,8 @@ export default function PromptAreaComponent({
>
<Button unstyled className="w-full">
<div className="flex w-full items-center gap-3">
<span
id={id}
data-testid={id}
className={
editNode
? "input-edit-node input-dialog"
: (disabled ? "input-disable text-ring " : "") +
" primary-input text-muted-foreground"
}
>
{value !== "" ? value : "Type your prompt here..."}
</span>
{!editNode && (
<IconComponent
id={id}
name="ExternalLink"
className={
"icons-parameters-comp shrink-0" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
{renderPromptText()}
{renderExternalLinkIcon()}
</div>
</Button>
</PromptModal>

210
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -22,107 +22,117 @@ export default function TextAreaComponent({
}
}, [disabled]);
return (
<div className={"flex w-full items-center" + (disabled ? "" : "")}>
<div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
<Textarea
id={id}
data-testid={id}
value={value}
disabled={disabled}
className={classNames(
password !== undefined && password && value !== ""
? "text-clip password"
: "",
editNode ? "input-edit-node" : "",
password != undefined ? "pr-8" : "",
"w-full",
"resize-none",
)}
rows={1}
placeholder={"Type something..."}
onChange={(event) => {
onChange(event.target.value);
}}
/>
<ComponentTextModal
changeVisibility={updateVisibility}
value={value}
setValue={(value: string) => {
onChange(value);
}}
disabled={disabled}
password={password}
>
<div
className={
"flex items-center" + (password ? "relative left-6" : "")
}
>
<Button unstyled>
<IconComponent
strokeWidth={1.5}
id={id}
name="ExternalLink"
className={
"icons-parameters-comp shrink-0" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
</Button>
</div>
</ComponentTextModal>
{password !== undefined && (
<Button
unstyled
tabIndex={-1}
className={classNames(
"mb-px text-muted-foreground hover:text-current",
editNode
? "side-bar-button-size absolute bottom-[1.3rem] right-[4.2rem]"
: "side-bar-button-size absolute bottom-4 right-[4.2rem]",
)}
onClick={(event) => {
event.preventDefault();
if (updateVisibility) updateVisibility();
}}
>
{password ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
)}
</Button>
const renderTextarea = () => (
<Textarea
id={id}
data-testid={id}
value={value}
disabled={disabled}
className={classNames(
"w-full resize-none",
password !== undefined && password && value !== ""
? "text-clip password"
: "",
editNode ? "input-edit-node" : "",
password !== undefined ? "pr-8" : "",
)}
rows={1}
placeholder="Type something..."
onChange={(event) => onChange(event.target.value)}
/>
);
const renderExternalLinkButton = () => (
<ComponentTextModal
changeVisibility={updateVisibility}
value={value}
setValue={(value) => onChange(value)}
disabled={disabled}
password={password}
>
<div
className={classNames(
"flex items-center",
password ? "relative left-6" : "",
)}
>
<Button unstyled>
<IconComponent
strokeWidth={1.5}
id={id}
name="ExternalLink"
className={classNames(
"icons-parameters-comp shrink-0",
disabled ? "text-ring" : "hover:text-accent-foreground",
)}
/>
</Button>
</div>
</ComponentTextModal>
);
const renderPasswordToggle = () => {
if (password === undefined) return null;
return (
<Button
unstyled
tabIndex={-1}
className={classNames(
"side-bar-button-size absolute mb-px text-muted-foreground hover:text-current",
editNode
? "bottom-[1.3rem] right-[4.2rem]"
: "bottom-4 right-[4.2rem]",
)}
onClick={(event) => {
event.preventDefault();
if (updateVisibility) updateVisibility();
}}
>
{password ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
/>
</svg>
)}
</Button>
);
};
return (
<div className={classNames("flex w-full items-center", disabled ? "" : "")}>
<div className="flex w-full items-center gap-3" data-testid={`div-${id}`}>
{renderTextarea()}
{renderExternalLinkButton()}
{renderPasswordToggle()}
</div>
</div>
);

96
src/frontend/src/components/ui/rename-label.tsx
View file

@ -1,24 +1,30 @@
import { useEffect, useRef, useState } from "react";
import { cn } from "../../utils/utils";
export default function RenameLabel(props) {
export default function RenameLabel({
value,
setValue,
className,
rename,
setRename,
}) {
const [internalState, setInternalState] = useState(false);
const [isRename, setIsRename] = props.rename
? [props.rename, props.setRename]
const [componentValue, setComponentValue] = useState(value);
const [isRename, setIsRename] = rename
? [rename, setRename]
: [internalState, setInternalState];
useEffect(() => {
if (props.value) setMyValue(props.value);
}, [props.value]);
if (value) setComponentValue(value);
}, [value]);
const [myValue, setMyValue] = useState(props.value);
useEffect(() => {
if (isRename) {
setMyValue(props.value);
setComponentValue(value);
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
setIsRename(false);
props.setValue("");
setValue("");
}
});
if (inputRef.current) {
@ -52,41 +58,47 @@ export default function RenameLabel(props) {
input.style.width = `${textWidth + 16}px`;
}
};
return (
<div>
{isRename ? (
<input
autoFocus
ref={inputRef}
onInput={resizeInput}
className={cn(
"nopan nodelete nodrag noflow rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
props.className,
)}
onBlur={() => {
setIsRename(false);
if (props.value !== "") {
props.setValue(myValue);
}
}}
value={myValue}
onChange={(event) => {
setMyValue(event.target.value);
}}
/>
) : (
<div className="flex items-center gap-2">
<span
className={cn("truncate px-2 text-left", props.className)}
onDoubleClick={() => {
setIsRename(true);
setMyValue(props.value);
}}
>
{props.value}
</span>
</div>
const handleBlur = () => {
setIsRename(false);
if (componentValue !== "") {
setValue(componentValue);
}
};
const handleChange = (event) => {
setComponentValue(event.target.value);
};
const handleDoubleClick = () => {
setIsRename(true);
setComponentValue(value);
};
const renderInput = () => (
<input
ref={inputRef}
onInput={resizeInput}
className={cn(
"nopan nodelete nodrag noflow rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
className,
)}
onBlur={handleBlur}
value={componentValue}
onChange={handleChange}
/>
);
const renderSpan = () => (
<div className="flex items-center gap-2">
<span
className={cn("truncate px-2 text-left", className)}
onDoubleClick={handleDoubleClick}
>
{value}
</span>
</div>
);
return <div>{isRename ? renderInput() : renderSpan()}</div>;
}

90
src/frontend/src/modals/dictAreaModal/index.tsx
View file

@ -27,58 +27,68 @@ export default function DictAreaModal({
}): JSX.Element {
const [open, setOpen] = useState(false);
const isDark = useDarkStore((state) => state.dark);
const [myValue, setMyValue] = useState(value);
const [componentValue, setComponentValue] = useState(value);
useEffect(() => {
setMyValue(value);
setComponentValue(value);
}, [value, open]);
const handleSubmit = () => {
if (onChange) {
onChange(componentValue);
setOpen(false);
}
};
const handleJsonChange = (edit) => {
setComponentValue(edit.src);
};
const customizeCopy = (copy) => {
navigator.clipboard.writeText(JSON.stringify(copy));
};
const renderHeader = () => (
<BaseModal.Header description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}>
<span className="pr-2">
{onChange ? "Edit Dictionary" : "View Dictionary"}
</span>
<IconComponent
name="BookMarked"
className="h-6 w-6 pl-1 text-primary"
aria-hidden="true"
/>
</BaseModal.Header>
);
const renderContent = () => (
<BaseModal.Content>
<div className="flex h-full w-full flex-col transition-all">
<JsonView
theme="vscode"
dark={isDark}
className={!isDark ? "json-view-white" : "json-view-dark"}
editable={!!onChange}
enableClipboard
onChange={handleJsonChange}
src={cloneDeep(componentValue)}
customizeCopy={customizeCopy}
/>
</div>
</BaseModal.Content>
);
return (
<BaseModal
size="medium-h-full"
open={open}
disable={disabled}
setOpen={setOpen}
onSubmit={
onChange
? () => {
onChange(myValue);
setOpen(false);
}
: undefined
}
onSubmit={onChange ? handleSubmit : undefined}
>
<BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
<BaseModal.Header
description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
>
<span className="pr-2">
{onChange ? "Edit Dictionary" : "View Dictionary"}
</span>
<IconComponent
name="BookMarked"
className="h-6 w-6 pl-1 text-primary"
aria-hidden="true"
/>
</BaseModal.Header>
<BaseModal.Content>
<div className="flex h-full w-full flex-col transition-all">
<JsonView
theme="vscode"
dark={isDark}
className={!isDark ? "json-view-white" : "json-view-dark"}
editable={!!onChange}
enableClipboard
onChange={(edit) => {
setMyValue(edit.src);
}}
src={cloneDeep(myValue)}
customizeCopy={(copy) => {
navigator.clipboard.writeText(JSON.stringify(copy));
}}
/>
</div>
</BaseModal.Content>
{renderHeader()}
{renderContent()}
<BaseModal.Footer submit={onChange ? { label: "Save" } : undefined} />
</BaseModal>
);

2
src/frontend/tests/end-to-end/auto-login-off.spec.ts
View file

@ -217,6 +217,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
timeout: 30000,
});
await page.waitForTimeout(1000);
expect(
await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
).toBe(true);