refactor: improve readability of several components (#3714)
* 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
GitHub
parent
835559a05d
commit
40798c5b5a
13 changed files with 737 additions and 710 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={disabled ? "pointer-events-none w-full" : "w-full"}>
|
||||
<IconComponent
|
||||
name="ExternalLink"
|
||||
className={cn(
|
||||
"icons-parameters-comp shrink-0",
|
||||
disabled ? "text-ring" : "hover:text-accent-foreground",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -69,14 +69,7 @@ export default function Dropdown({
|
|||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(options ?? [])?.length > 0 || combobox ? (
|
||||
<>
|
||||
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
|
||||
{children ? (
|
||||
<PopoverAnchor>{children}</PopoverAnchor>
|
||||
) : (
|
||||
const renderTriggerButton = () => (
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
disabled={disabled}
|
||||
|
|
@ -85,44 +78,30 @@ export default function Dropdown({
|
|||
role="combobox"
|
||||
ref={refButton}
|
||||
aria-expanded={open}
|
||||
data-testid={`${id ?? ""}`}
|
||||
data-testid={id}
|
||||
className={cn(
|
||||
editNode
|
||||
? "dropdown-component-outline"
|
||||
: "dropdown-component-false-outline",
|
||||
? "dropdown-component-outline input-edit-node"
|
||||
: "dropdown-component-false-outline py-2",
|
||||
"w-full justify-between font-normal",
|
||||
editNode ? "input-edit-node" : "py-2",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="truncate"
|
||||
data-testid={`value-dropdown-` + id}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<PopoverContentDropdown
|
||||
side="bottom"
|
||||
avoidCollisions={!!children}
|
||||
className="noflow nowheel nopan nodelete nodrag p-0"
|
||||
style={
|
||||
children
|
||||
? {}
|
||||
: { minWidth: refButton?.current?.clientWidth ?? "200px" }
|
||||
}
|
||||
>
|
||||
<Command>
|
||||
);
|
||||
|
||||
const renderSearchInput = () => (
|
||||
<div className="flex items-center border-b px-3">
|
||||
<ForwardedIconComponent
|
||||
name="search"
|
||||
|
|
@ -134,32 +113,26 @@ export default function Dropdown({
|
|||
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, id) => (
|
||||
<ShadTooltip
|
||||
delayDuration={700}
|
||||
key={id}
|
||||
content={option}
|
||||
>
|
||||
{filteredOptions?.map((option, index) => (
|
||||
<ShadTooltip key={index} delayDuration={700} 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`}
|
||||
data-testid={`${option}-${index}-option`}
|
||||
>
|
||||
{customValue === option ? (
|
||||
<span className="text-muted-foreground">
|
||||
Text:
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
{customValue === option && (
|
||||
<span className="text-muted-foreground">Text: </span>
|
||||
)}
|
||||
<span className="truncate">{option}</span>
|
||||
<ForwardedIconComponent
|
||||
|
|
@ -175,25 +148,46 @@ export default function Dropdown({
|
|||
))}
|
||||
</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>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
|
||||
if (Object.keys(options).length === 0 && !combobox) {
|
||||
return isLoading ? (
|
||||
<div>
|
||||
<span className="text-sm italic">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{(!isLoading && (
|
||||
<div>
|
||||
<span className="text-sm italic">
|
||||
No parameters are available for display.
|
||||
</span>
|
||||
</div>
|
||||
)) || (
|
||||
<div>
|
||||
<span className="text-sm italic">Loading...</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
|
||||
{children ? (
|
||||
<PopoverAnchor>{children}</PopoverAnchor>
|
||||
) : (
|
||||
renderTriggerButton()
|
||||
)}
|
||||
{renderPopoverContent()}
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{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) => {
|
||||
let newInputList = _.cloneDeep(value);
|
||||
newInputList[idx] = event.target.value;
|
||||
onChange(newInputList);
|
||||
}}
|
||||
data-testid={`${id}_` + idx}
|
||||
onChange={(event) => handleInputChange(index, event.target.value)}
|
||||
data-testid={`${id}_${index}`}
|
||||
/>
|
||||
{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
|
||||
}
|
||||
className={getButtonClassName()}
|
||||
onClick={index === 0 ? addNewInput : (e) => removeInput(index, e)}
|
||||
data-testid={getTestId(index === 0 ? "plus" : "minus", index)}
|
||||
disabled={disabled || playgroundDisabled}
|
||||
>
|
||||
<IconComponent name="Plus" className="h-4 w-4" />
|
||||
<IconComponent
|
||||
name={index === 0 ? "Plus" : "X"}
|
||||
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>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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,62 +42,64 @@ 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 (
|
||||
{values?.map((obj, index) =>
|
||||
Object.keys(obj).map((key, idx) => (
|
||||
<div key={idx} className="flex w-full gap-2">
|
||||
<Input
|
||||
data-testid={
|
||||
editNode ? "editNodekeypair" + index : "keypair" + index
|
||||
}
|
||||
id={editNode ? "editNodekeypair" + index : "keypair" + index}
|
||||
data-testid={getTestId("keypair", index)}
|
||||
id={getTestId("keypair", index)}
|
||||
type="text"
|
||||
value={key.trim()}
|
||||
className={classNames(
|
||||
editNode ? "input-edit-node" : "",
|
||||
duplicateKey ? "input-invalid" : "",
|
||||
)}
|
||||
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()
|
||||
}
|
||||
data-testid={getTestId("keypair", index + 100)}
|
||||
id={getTestId("keypair", index + 100)}
|
||||
type="text"
|
||||
disabled={disabled}
|
||||
value={obj[key]}
|
||||
|
|
@ -107,56 +108,34 @@ export default function KeypairListComponent({
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,14 +92,15 @@ export default function MultiselectComponent({
|
|||
}
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(options ?? [])?.length > 0 || combobox ? (
|
||||
<>
|
||||
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
|
||||
{children ? (
|
||||
<PopoverAnchor>{children}</PopoverAnchor>
|
||||
) : (
|
||||
const handleOptionSelect = (currentValue) => {
|
||||
if (value.includes(currentValue)) {
|
||||
onSelect(value.filter((v) => v !== currentValue));
|
||||
} else {
|
||||
onSelect([...value, currentValue]);
|
||||
}
|
||||
};
|
||||
|
||||
const renderDropdownTrigger = () => (
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
disabled={disabled}
|
||||
|
|
@ -108,47 +109,28 @@ export default function MultiselectComponent({
|
|||
role="combobox"
|
||||
ref={refButton}
|
||||
aria-expanded={open}
|
||||
data-testid={`${id ?? ""}`}
|
||||
data-testid={id}
|
||||
className={cn(
|
||||
editNode
|
||||
? "dropdown-component-outline"
|
||||
: "dropdown-component-false-outline",
|
||||
? "dropdown-component-outline input-edit-node"
|
||||
: "dropdown-component-false-outline py-2",
|
||||
"w-full justify-between font-normal",
|
||||
editNode ? "input-edit-node" : "py-2",
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className="truncate"
|
||||
data-testid={`value-dropdown-` + id}
|
||||
>
|
||||
{value &&
|
||||
value.length > 0 &&
|
||||
options.find((option) => value.includes(option))
|
||||
<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>
|
||||
)}
|
||||
<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>
|
||||
);
|
||||
|
||||
const renderSearchInput = () => (
|
||||
<div className="flex items-center border-b px-3">
|
||||
<ForwardedIconComponent
|
||||
name="search"
|
||||
|
|
@ -157,7 +139,6 @@ export default function MultiselectComponent({
|
|||
<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"
|
||||
|
|
@ -173,48 +154,30 @@ export default function MultiselectComponent({
|
|||
/>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderOptionsList = () => (
|
||||
<CommandList className="overflow-y-scroll">
|
||||
<CommandEmpty>No values found.</CommandEmpty>
|
||||
<CommandGroup defaultChecked={false}>
|
||||
{filteredOptions?.map((option, id) => (
|
||||
<ShadTooltip
|
||||
delayDuration={700}
|
||||
key={id}
|
||||
content={option}
|
||||
>
|
||||
<CommandGroup>
|
||||
{filteredOptions.map((option, index) => (
|
||||
<ShadTooltip key={index} delayDuration={700} content={option}>
|
||||
<div>
|
||||
<CommandItem
|
||||
key={id}
|
||||
value={option}
|
||||
onSelect={(currentValue) => {
|
||||
if (value.includes(currentValue)) {
|
||||
onSelect(
|
||||
value.filter((v) => v !== currentValue),
|
||||
);
|
||||
} else {
|
||||
onSelect([...value, currentValue]);
|
||||
}
|
||||
}}
|
||||
onSelect={handleOptionSelect}
|
||||
className="items-center overflow-hidden truncate"
|
||||
data-testid={`${option}-${id ?? ""}-option`}
|
||||
>
|
||||
{customValues.includes(option) ||
|
||||
searchValue === option ? (
|
||||
<span className="text-muted-foreground">
|
||||
Text:
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
{(customValues.includes(option) || searchValue === option) && (
|
||||
<span className="text-muted-foreground">Text: </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",
|
||||
value.includes(option) ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
|
|
@ -223,25 +186,45 @@ export default function MultiselectComponent({
|
|||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContentDropdown>
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
|
||||
if (Object.keys(options).length === 0 && !combobox) {
|
||||
return isLoading ? (
|
||||
<div>
|
||||
<span className="text-sm italic">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{(!isLoading && (
|
||||
<div>
|
||||
<span className="text-sm italic">
|
||||
No parameters are available for display.
|
||||
</span>
|
||||
</div>
|
||||
)) || (
|
||||
<div>
|
||||
<span className="text-sm italic">Loading...</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={children ? () => {} : setOpen}>
|
||||
{children ? (
|
||||
<PopoverAnchor>{children}</PopoverAnchor>
|
||||
) : (
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className={disabled ? "pointer-events-none w-full" : "w-full"}>
|
||||
<IconComponent
|
||||
id={id}
|
||||
name="ExternalLink"
|
||||
className={cn(
|
||||
"icons-parameters-comp shrink-0",
|
||||
disabled ? "text-ring" : "hover:text-accent-foreground",
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -22,65 +22,67 @@ 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}>
|
||||
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" : "",
|
||||
"w-full",
|
||||
"resize-none",
|
||||
password !== undefined ? "pr-8" : "",
|
||||
)}
|
||||
rows={1}
|
||||
placeholder={"Type something..."}
|
||||
onChange={(event) => {
|
||||
onChange(event.target.value);
|
||||
}}
|
||||
placeholder="Type something..."
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
/>
|
||||
);
|
||||
|
||||
const renderExternalLinkButton = () => (
|
||||
<ComponentTextModal
|
||||
changeVisibility={updateVisibility}
|
||||
value={value}
|
||||
setValue={(value: string) => {
|
||||
onChange(value);
|
||||
}}
|
||||
setValue={(value) => onChange(value)}
|
||||
disabled={disabled}
|
||||
password={password}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
"flex items-center" + (password ? "relative left-6" : "")
|
||||
}
|
||||
className={classNames(
|
||||
"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")
|
||||
}
|
||||
className={classNames(
|
||||
"icons-parameters-comp shrink-0",
|
||||
disabled ? "text-ring" : "hover:text-accent-foreground",
|
||||
)}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</ComponentTextModal>
|
||||
{password !== undefined && (
|
||||
);
|
||||
|
||||
const renderPasswordToggle = () => {
|
||||
if (password === undefined) return null;
|
||||
|
||||
return (
|
||||
<Button
|
||||
unstyled
|
||||
tabIndex={-1}
|
||||
className={classNames(
|
||||
"mb-px text-muted-foreground hover:text-current",
|
||||
"side-bar-button-size absolute 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]",
|
||||
? "bottom-[1.3rem] right-[4.2rem]"
|
||||
: "bottom-4 right-[4.2rem]",
|
||||
)}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -122,7 +124,15 @@ export default function TextAreaComponent({
|
|||
</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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 ? (
|
||||
|
||||
const handleBlur = () => {
|
||||
setIsRename(false);
|
||||
if (componentValue !== "") {
|
||||
setValue(componentValue);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setComponentValue(event.target.value);
|
||||
};
|
||||
|
||||
const handleDoubleClick = () => {
|
||||
setIsRename(true);
|
||||
setComponentValue(value);
|
||||
};
|
||||
|
||||
const renderInput = () => (
|
||||
<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,
|
||||
className,
|
||||
)}
|
||||
onBlur={() => {
|
||||
setIsRename(false);
|
||||
if (props.value !== "") {
|
||||
props.setValue(myValue);
|
||||
}
|
||||
}}
|
||||
value={myValue}
|
||||
onChange={(event) => {
|
||||
setMyValue(event.target.value);
|
||||
}}
|
||||
onBlur={handleBlur}
|
||||
value={componentValue}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
) : (
|
||||
);
|
||||
|
||||
const renderSpan = () => (
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn("truncate px-2 text-left", props.className)}
|
||||
onDoubleClick={() => {
|
||||
setIsRename(true);
|
||||
setMyValue(props.value);
|
||||
}}
|
||||
className={cn("truncate px-2 text-left", className)}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
>
|
||||
{props.value}
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return <div>{isRename ? renderInput() : renderSpan()}</div>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,31 +27,29 @@ 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]);
|
||||
|
||||
return (
|
||||
<BaseModal
|
||||
size="medium-h-full"
|
||||
open={open}
|
||||
disable={disabled}
|
||||
setOpen={setOpen}
|
||||
onSubmit={
|
||||
onChange
|
||||
? () => {
|
||||
onChange(myValue);
|
||||
const handleSubmit = () => {
|
||||
if (onChange) {
|
||||
onChange(componentValue);
|
||||
setOpen(false);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
|
||||
<BaseModal.Header
|
||||
description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
|
||||
>
|
||||
};
|
||||
|
||||
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>
|
||||
|
|
@ -61,6 +59,9 @@ export default function DictAreaModal({
|
|||
aria-hidden="true"
|
||||
/>
|
||||
</BaseModal.Header>
|
||||
);
|
||||
|
||||
const renderContent = () => (
|
||||
<BaseModal.Content>
|
||||
<div className="flex h-full w-full flex-col transition-all">
|
||||
<JsonView
|
||||
|
|
@ -69,16 +70,25 @@ export default function DictAreaModal({
|
|||
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));
|
||||
}}
|
||||
onChange={handleJsonChange}
|
||||
src={cloneDeep(componentValue)}
|
||||
customizeCopy={customizeCopy}
|
||||
/>
|
||||
</div>
|
||||
</BaseModal.Content>
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseModal
|
||||
size="medium-h-full"
|
||||
open={open}
|
||||
disable={disabled}
|
||||
setOpen={setOpen}
|
||||
onSubmit={onChange ? handleSubmit : undefined}
|
||||
>
|
||||
<BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
|
||||
{renderHeader()}
|
||||
{renderContent()}
|
||||
<BaseModal.Footer submit={onChange ? { label: "Save" } : undefined} />
|
||||
</BaseModal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue