Bug fixes of DOM nesting
This commit is contained in:
Lucas Oliveira
parent
f40c4a88a2
commit
ea94c3f9e8
7 changed files with 676 additions and 660 deletions
|
|
@ -2,7 +2,14 @@ import "ace-builds/src-noconflict/ext-language_tools";
|
|||
import "ace-builds/src-noconflict/mode-python";
|
||||
import "ace-builds/src-noconflict/theme-github";
|
||||
import "ace-builds/src-noconflict/theme-twilight";
|
||||
import { ReactNode, useContext, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
ReactNode,
|
||||
forwardRef,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
// import "ace-builds/webpack-resolver";
|
||||
import { Check, Clipboard, Code2 } from "lucide-react";
|
||||
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||
|
|
@ -19,7 +26,6 @@ import IntComponent from "../../components/intComponent";
|
|||
import PromptAreaComponent from "../../components/promptComponent";
|
||||
import TextAreaComponent from "../../components/textAreaComponent";
|
||||
import ToggleShadComponent from "../../components/toggleShadComponent";
|
||||
import { DialogTitle } from "../../components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -45,13 +51,17 @@ import { FlowType } from "../../types/flow/index";
|
|||
import { buildTweaks, classNames } from "../../utils";
|
||||
import BaseModal from "../baseModal";
|
||||
|
||||
export default function ApiModal({
|
||||
const ApiModal = forwardRef(
|
||||
(
|
||||
{
|
||||
flow,
|
||||
children,
|
||||
}: {
|
||||
}: {
|
||||
flow: FlowType;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [activeTab, setActiveTab] = useState("0");
|
||||
const [isCopied, setIsCopied] = useState<Boolean>(false);
|
||||
const [openAccordion, setOpenAccordion] = useState([]);
|
||||
|
|
@ -232,14 +242,12 @@ export default function ApiModal({
|
|||
<BaseModal>
|
||||
<BaseModal.Trigger>{children}</BaseModal.Trigger>
|
||||
<BaseModal.Header description={EXPORT_CODE_DIALOG}>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Code</span>
|
||||
<Code2
|
||||
strokeWidth={1.5}
|
||||
className="h-6 w-6 pl-1 text-primary "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</DialogTitle>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<Tabs
|
||||
|
|
@ -318,7 +326,9 @@ export default function ApiModal({
|
|||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="p-0">
|
||||
{Object.keys(t["data"]["node"]["template"])
|
||||
{Object.keys(
|
||||
t["data"]["node"]["template"]
|
||||
)
|
||||
.filter(
|
||||
(n) =>
|
||||
n.charAt(0) !== "_" &&
|
||||
|
|
@ -362,12 +372,12 @@ export default function ApiModal({
|
|||
editNode={true}
|
||||
disabled={false}
|
||||
value={
|
||||
!t.data.node.template[
|
||||
n
|
||||
].value ||
|
||||
t.data.node.template[
|
||||
n
|
||||
].value === ""
|
||||
!t.data.node
|
||||
.template[n]
|
||||
.value ||
|
||||
t.data.node
|
||||
.template[n]
|
||||
.value === ""
|
||||
? [""]
|
||||
: t.data.node
|
||||
.template[n]
|
||||
|
|
@ -383,13 +393,13 @@ export default function ApiModal({
|
|||
);
|
||||
}}
|
||||
/>
|
||||
) : t.data.node.template[n]
|
||||
.multiline ? (
|
||||
) : t.data.node.template[
|
||||
n
|
||||
].multiline ? (
|
||||
<ShadTooltip
|
||||
content={buildContent(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value
|
||||
t.data.node
|
||||
.template[n].value
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
|
|
@ -406,7 +416,9 @@ export default function ApiModal({
|
|||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
t["data"][
|
||||
"id"
|
||||
],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
|
|
@ -420,18 +432,17 @@ export default function ApiModal({
|
|||
editNode={true}
|
||||
disabled={false}
|
||||
password={
|
||||
t.data.node.template[
|
||||
n
|
||||
].password ?? false
|
||||
t.data.node
|
||||
.template[n]
|
||||
.password ?? false
|
||||
}
|
||||
value={getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data.node
|
||||
.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
t.data.node
|
||||
.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
|
|
@ -450,8 +461,9 @@ export default function ApiModal({
|
|||
{" "}
|
||||
<ToggleShadComponent
|
||||
enabled={
|
||||
t.data.node.template[n]
|
||||
.value
|
||||
t.data.node.template[
|
||||
n
|
||||
].value
|
||||
}
|
||||
setEnabled={(e) => {
|
||||
t.data.node.template[
|
||||
|
|
@ -460,9 +472,8 @@ export default function ApiModal({
|
|||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
e,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
size="small"
|
||||
|
|
@ -474,10 +485,13 @@ export default function ApiModal({
|
|||
<ShadTooltip
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)
|
||||
)}
|
||||
>
|
||||
|
|
@ -486,22 +500,22 @@ export default function ApiModal({
|
|||
editNode={true}
|
||||
disabled={false}
|
||||
value={
|
||||
t.data.node.template[
|
||||
n
|
||||
].value ?? ""
|
||||
t.data.node
|
||||
.template[n]
|
||||
.value ?? ""
|
||||
}
|
||||
onChange={(
|
||||
k: any
|
||||
) => {}}
|
||||
fileTypes={
|
||||
t.data.node.template[
|
||||
n
|
||||
].fileTypes
|
||||
t.data.node
|
||||
.template[n]
|
||||
.fileTypes
|
||||
}
|
||||
suffixes={
|
||||
t.data.node.template[
|
||||
n
|
||||
].suffixes
|
||||
t.data.node
|
||||
.template[n]
|
||||
.suffixes
|
||||
}
|
||||
onFileChange={(
|
||||
k: any
|
||||
|
|
@ -515,91 +529,6 @@ export default function ApiModal({
|
|||
<FloatComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "str" &&
|
||||
t.data.node.template[n]
|
||||
.options ? (
|
||||
<div className="mx-auto">
|
||||
<Dropdown
|
||||
editNode={true}
|
||||
apiModal={true}
|
||||
options={
|
||||
t.data.node.template[n]
|
||||
.options
|
||||
}
|
||||
onSelect={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
value={getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
></Dropdown>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "int" ? (
|
||||
<div className="mx-auto">
|
||||
<IntComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "prompt" ? (
|
||||
<ShadTooltip
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<PromptAreaComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
|
|
@ -619,21 +548,42 @@ export default function ApiModal({
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : t.data.node.template[n]
|
||||
.type === "code" ? (
|
||||
<ShadTooltip
|
||||
content={buildContent(
|
||||
getValue(
|
||||
.type === "str" &&
|
||||
t.data.node.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node.template[n]
|
||||
)
|
||||
)}
|
||||
>
|
||||
.options ? (
|
||||
<div className="mx-auto">
|
||||
<CodeAreaComponent
|
||||
<Dropdown
|
||||
editNode={true}
|
||||
apiModal={true}
|
||||
options={
|
||||
t.data.node.template[
|
||||
n
|
||||
].options
|
||||
}
|
||||
onSelect={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
value={getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)}
|
||||
></Dropdown>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "int" ? (
|
||||
<div className="mx-auto">
|
||||
<IntComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
|
|
@ -655,6 +605,81 @@ export default function ApiModal({
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
) : t.data.node.template[n]
|
||||
.type === "prompt" ? (
|
||||
<ShadTooltip
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<PromptAreaComponent
|
||||
editNode={true}
|
||||
disabled={false}
|
||||
value={getValue(
|
||||
t.data.node
|
||||
.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node
|
||||
.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : t.data.node.template[n]
|
||||
.type === "code" ? (
|
||||
<ShadTooltip
|
||||
content={buildContent(
|
||||
getValue(
|
||||
t.data.node.template[
|
||||
n
|
||||
].value,
|
||||
t.data,
|
||||
t.data.node.template[
|
||||
n
|
||||
]
|
||||
)
|
||||
)}
|
||||
>
|
||||
<div className="mx-auto">
|
||||
<CodeAreaComponent
|
||||
disabled={false}
|
||||
editNode={true}
|
||||
value={getValue(
|
||||
t.data.node
|
||||
.template[n]
|
||||
.value,
|
||||
t.data,
|
||||
t.data.node
|
||||
.template[n]
|
||||
)}
|
||||
onChange={(k) => {
|
||||
buildTweakObject(
|
||||
t["data"]["id"],
|
||||
k,
|
||||
t.data.node
|
||||
.template[n]
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ShadTooltip>
|
||||
) : t.data.node.template[n]
|
||||
.type === "Any" ? (
|
||||
|
|
@ -692,4 +717,7 @@ export default function ApiModal({
|
|||
</BaseModal.Content>
|
||||
</BaseModal>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default ApiModal;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import TextAreaComponent from "../../components/textAreaComponent";
|
|||
import ToggleShadComponent from "../../components/toggleShadComponent";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { DialogTitle } from "../../components/ui/dialog";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -93,10 +92,8 @@ export default function EditNodeModal({
|
|||
<BaseModal size="large-h-full" open={modalOpen} setOpen={setModalOpen}>
|
||||
<BaseModal.Trigger>{children}</BaseModal.Trigger>
|
||||
<BaseModal.Header description={data.node?.description}>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">{data.type}</span>
|
||||
<Badge variant="secondary">ID: {data.id}</Badge>
|
||||
</DialogTitle>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<div className="flex pb-2">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { DialogTitle } from "@radix-ui/react-dialog";
|
||||
import "ace-builds/src-noconflict/ace";
|
||||
import "ace-builds/src-noconflict/ext-language_tools";
|
||||
import "ace-builds/src-noconflict/mode-python";
|
||||
|
|
@ -77,14 +76,12 @@ export default function CodeAreaModal({
|
|||
<BaseModal open={open} setOpen={setOpen}>
|
||||
<BaseModal.Trigger>{children}</BaseModal.Trigger>
|
||||
<BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Edit Code</span>
|
||||
<TerminalSquare
|
||||
strokeWidth={1.5}
|
||||
className="h-6 w-6 pl-1 text-primary "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</DialogTitle>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<div className="flex h-full w-full flex-col transition-all">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { ReactNode, forwardRef, useContext, useState } from "react";
|
|||
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { Checkbox } from "../../components/ui/checkbox";
|
||||
import { DialogTitle } from "../../components/ui/dialog";
|
||||
import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
|
||||
import { PopUpContext } from "../../contexts/popUpContext";
|
||||
import { TabsContext } from "../../contexts/tabsContext";
|
||||
|
|
@ -23,14 +22,12 @@ const ExportModal = forwardRef((props: { children: ReactNode }, ref) => {
|
|||
<BaseModal size="smaller">
|
||||
<BaseModal.Trigger>{props.children}</BaseModal.Trigger>
|
||||
<BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">Export</span>
|
||||
<Download
|
||||
strokeWidth={1.5}
|
||||
className="h-6 w-6 pl-1 text-primary "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</DialogTitle>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<EditFlowSettings
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
|
|||
import ShadTooltip from "../../components/ShadTooltipComponent";
|
||||
import { Badge } from "../../components/ui/badge";
|
||||
import { Button } from "../../components/ui/button";
|
||||
import { DialogTitle } from "../../components/ui/dialog";
|
||||
import { Textarea } from "../../components/ui/textarea";
|
||||
import {
|
||||
MAX_WORDS_HIGHLIGHT,
|
||||
|
|
@ -180,14 +179,12 @@ export default function GenericModal({
|
|||
}
|
||||
})()}
|
||||
>
|
||||
<DialogTitle className="flex items-center">
|
||||
<span className="pr-2">{myModalTitle}</span>
|
||||
<FileText
|
||||
strokeWidth={1.5}
|
||||
className="h-6 w-6 pl-1 text-primary "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</DialogTitle>
|
||||
</BaseModal.Header>
|
||||
<BaseModal.Content>
|
||||
<div className="flex h-full flex-col">
|
||||
|
|
|
|||
|
|
@ -75,23 +75,23 @@ export default function ExtraSidebar() {
|
|||
|
||||
<ShadTooltip content="Export" side="top">
|
||||
<ExportModal>
|
||||
<button className={classNames("extra-side-bar-buttons")}>
|
||||
<div className={classNames("extra-side-bar-buttons")}>
|
||||
<FileDown
|
||||
strokeWidth={1.5}
|
||||
className="side-bar-button-size"
|
||||
></FileDown>
|
||||
</button>
|
||||
</div>
|
||||
</ExportModal>
|
||||
</ShadTooltip>
|
||||
<ShadTooltip content="Code" side="top">
|
||||
{flow && flow.data && (
|
||||
<ApiModal flow={flow}>
|
||||
<button className={classNames("extra-side-bar-buttons")}>
|
||||
<div className={classNames("extra-side-bar-buttons")}>
|
||||
<Code2
|
||||
strokeWidth={1.5}
|
||||
className="side-bar-button-size"
|
||||
></Code2>
|
||||
</button>
|
||||
</div>
|
||||
</ApiModal>
|
||||
)}
|
||||
</ShadTooltip>
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ const NodeToolbarComponent = (props) => {
|
|||
|
||||
<ShadTooltip content="Edit" side="top">
|
||||
<EditNodeModal data={props.data}>
|
||||
<button
|
||||
<div
|
||||
className={classNames(
|
||||
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
|
||||
(nodeLength == 0
|
||||
|
|
@ -105,7 +105,7 @@ const NodeToolbarComponent = (props) => {
|
|||
)}
|
||||
>
|
||||
<Settings2 className="h-4 w-4 "></Settings2>
|
||||
</button>
|
||||
</div>
|
||||
</EditNodeModal>
|
||||
</ShadTooltip>
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue