feat(frontend): add ErrorOutput component to display error messages in output modal

feat(frontend): update SwitchOutputView to render ErrorOutput component for 'ValueError'
fix(frontend): update BaseModal header text in OutputModal component
fix(frontend): update displayOutputPreview logic in ParameterComponent to check for specific log type
This commit is contained in:
anovazzi1 2024-05-31 17:42:47 -03:00
commit 300be557c2
4 changed files with 28 additions and 11 deletions

View file

@ -0,0 +1,13 @@
import { Textarea } from "../../../../../../../components/ui/textarea";
export default function ErrorOutput({ value }: { value: string }) {
console.log(value);
return (
<Textarea
className={`h-full w-full text-destructive custom-scroll`}
placeholder={"Empty"}
value={value}
readOnly
/>
);
}

View file

@ -2,6 +2,7 @@ import RecordsOutputComponent from "../../../../../../components/recordsOutputCo
import { Case } from "../../../../../../shared/components/caseComponent";
import TextOutputView from "../../../../../../shared/components/textOutputView";
import useFlowStore from "../../../../../../stores/flowStore";
import ErrorOutput from "./components";
import { convertToTableRows } from "./helpers/convert-to-table-rows";
export default function SwitchOutputView(nodeId): JSX.Element {
@ -21,13 +22,12 @@ export default function SwitchOutputView(nodeId): JSX.Element {
return (
<>
<Case
condition={
!resultType || resultType === "unknown" || resultType === "valueError"
}
>
<Case condition={!resultType || resultType === "unknown"}>
<div>NO OUTPUT</div>
</Case>
<Case condition={resultType === "ValueError"}>
<ErrorOutput value={resultMessage}></ErrorOutput>
</Case>
<Case condition={node && resultType === "text"}>
<TextOutputView left={false} value={resultMessage} />

View file

@ -4,10 +4,10 @@ import SwitchOutputView from "./components/switchOutputView";
export default function OutputModal({ open, setOpen, nodeId }): JSX.Element {
return (
<BaseModal open={open} setOpen={setOpen} size="medium-log">
<BaseModal.Header description="Output Visualization">
<BaseModal open={open} setOpen={setOpen} size="medium">
<BaseModal.Header description="DESCRICAO RODRIGO">
<div className="flex items-center">
<span className="pr-2">Output View</span>
<span className="pr-2">TITULO RODRIGO</span>
</div>
</BaseModal.Header>
<BaseModal.Content>

View file

@ -81,7 +81,11 @@ export default function ParameterComponent({
const [openOutputModal, setOpenOutputModal] = useState(false);
const flowPool = useFlowStore((state) => state.flowPool);
const displayOutputPreview = !!flowPool[data.id];
const displayOutputPreview = !!(
flowPool[data.id] &&
flowPool[data.id][flowPool[data.id].length - 1]?.data?.logs[0]?.type !==
"unknown"
);
const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue(
data,
@ -272,9 +276,9 @@ export default function ParameterComponent({
>
<IconComponent
className={classNames(
"h-5 w-5",
"h-5 w-5 rounded-md",
displayOutputPreview
? ""
? " hover:bg-secondary-foreground/5 hover:text-medium-indigo"
: " cursor-not-allowed text-muted-foreground",
)}
name={"ScanEye"}