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

changing code, export, python modal to shadcn ui

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-07 18:59:11 -03:00
commit 3cc8c8e6b5
10 changed files with 315 additions and 341 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/package-lock.json generated
View file

@ -13,6 +13,7 @@
"@headlessui/react": "^1.7.10", "@headlessui/react": "^1.7.10",
"@heroicons/react": "^2.0.15", "@heroicons/react": "^2.0.15",
"@mui/material": "^5.11.9", "@mui/material": "^5.11.9",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
@ -1295,6 +1296,36 @@
"@babel/runtime": "^7.13.10" "@babel/runtime": "^7.13.10"
} }
}, },
"node_modules/@radix-ui/react-checkbox": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz",
"integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/react-use-previous": "1.0.1",
"@radix-ui/react-use-size": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-compose-refs": { "node_modules/@radix-ui/react-compose-refs": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",

1
src/frontend/package.json
View file

@ -8,6 +8,7 @@
"@headlessui/react": "^1.7.10", "@headlessui/react": "^1.7.10",
"@heroicons/react": "^2.0.15", "@heroicons/react": "^2.0.15",
"@mui/material": "^5.11.9", "@mui/material": "^5.11.9",
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-label": "^2.0.2", "@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",

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

@ -39,7 +39,7 @@ export default function CodeAreaComponent({
); );
}} }}
className={ className={
editNode ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" : editNode ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200" :
"truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" + "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") (disabled ? " bg-gray-200" : "")
} }

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

@ -13,8 +13,6 @@ export default function IntComponent({
const [myValue, setMyValue] = useState(value ?? ""); const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext); const { setDisableCopyPaste } = useContext(TabsContext);
console.log(editNode);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");

30
src/frontend/src/components/ui/checkbox.tsx Normal file
View file

@ -0,0 +1,30 @@
"use client"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "../../utils"
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }

25
src/frontend/src/components/ui/input.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react"
import { cn } from "../../utils"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

122
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Dialog, Transition } from "@headlessui/react";
import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react"; import { IconCheck, IconClipboard, IconDownload } from "@tabler/icons-react";
import { import {
XMarkIcon, XMarkIcon,
@ -15,13 +14,22 @@ import "ace-builds/src-noconflict/ext-language_tools";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
export default function ApiModal({ flowName }) { export default function ApiModal({ flowName }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
const ref = useRef();
const [isCopied, setIsCopied] = useState<Boolean>(false); const [isCopied, setIsCopied] = useState<Boolean>(false);
const copyToClipboard = () => { const copyToClipboard = () => {
@ -40,9 +48,7 @@ export default function ApiModal({ flowName }) {
function setModalOpen(x: boolean) { function setModalOpen(x: boolean) {
setOpen(x); setOpen(x);
if (x === false) { if (x === false) {
setTimeout(() => {
closePopUp(); closePopUp();
}, 300);
} }
} }
@ -82,71 +88,34 @@ flow("Hey, have you heard of LangFlow?")`;
}, },
]; ];
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}>
<Dialog
as="div"
className="relative z-10"
onClose={setModalOpen}
initialFocus={ref}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <Dialog open={true} onOpenChange={setModalOpen}>
<Transition.Child <DialogTrigger>
as={Fragment} </DialogTrigger>
enter="ease-out duration-300" <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[600px]">
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" <DialogHeader>
enterTo="opacity-100 translate-y-0 sm:scale-100" <DialogTitle className="flex items-center">
leave="ease-in duration-200" <span className="pr-2">
leaveFrom="opacity-100 translate-y-0 sm:scale-100" Code
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" </span>
> <CodeBracketSquareIcon
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]"> className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> aria-hidden="true"
<button />
type="button"
className="rounded-md text-gray-400 hover:text-gray-500" </DialogTitle>
onClick={() => { <DialogDescription>
setModalOpen(false); Export your flow to use it with this code.
}}
> </DialogDescription>
<span className="sr-only">Close</span> </DialogHeader>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<CodeBracketSquareIcon
className="h-6 w-6 text-blue-600"
aria-hidden="true"
/>
</div>
<div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900"
>
Code
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex flex-col h-full w-full "> <div className="flex flex-col h-full w-full ">
<div className="flex px-5 z-10"> <div className="flex px-5 z-10">
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<button <button key={index}
onClick={() => { onClick={() => {
setActiveTab(index); setActiveTab(index);
}} }}
@ -162,11 +131,9 @@ flow("Hey, have you heard of LangFlow?")`;
</button> </button>
))} ))}
</div> </div>
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800"> <div className="overflow-hidden px-4 py-2 sm:p-4 sm:pb-0 sm:pt-2 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
<div className="w-full flex items-center justify-between mb-2"> <div className="items-center mb-2">
<span className="text-sm text-gray-500 dark:text-gray-300"> <div className="float-right">
Export your flow to use it with this code.
</span>
<button <button
className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300" className="flex gap-1.5 items-center rounded bg-none p-1 text-xs text-gray-500 dark:text-gray-300"
onClick={copyToClipboard} onClick={copyToClipboard}
@ -178,9 +145,11 @@ flow("Hey, have you heard of LangFlow?")`;
)} )}
{isCopied ? "Copied!" : "Copy code"} {isCopied ? "Copied!" : "Copy code"}
</button> </button>
</div>
</div> </div>
<SyntaxHighlighter <SyntaxHighlighter
className="h-[370px]" className="h-[370px] w-full"
language={tabs[activeTab].mode} language={tabs[activeTab].mode}
style={oneDark} style={oneDark}
customStyle={{ margin: 0 }} customStyle={{ margin: 0 }}
@ -189,13 +158,8 @@ flow("Hey, have you heard of LangFlow?")`;
</SyntaxHighlighter> </SyntaxHighlighter>
</div> </div>
</div> </div>
</div> </DialogContent>
</div> </Dialog>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
); );
} }

215
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline"; import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
@ -12,6 +11,17 @@ import { darkContext } from "../../contexts/darkContext";
import { checkCode } from "../../controllers/API"; import { checkCode } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,
setValue, setValue,
@ -34,70 +44,31 @@ export default function CodeAreaModal({
} }
} }
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}>
<Dialog
as="div"
className="relative z-10"
onClose={setModalOpen}
initialFocus={ref}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <Dialog open={true} onOpenChange={setModalOpen}>
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <DialogTrigger>
<Transition.Child </DialogTrigger>
as={Fragment} <DialogContent className="lg:max-w-[700px] h-[500px]">
enter="ease-out duration-300" <DialogHeader>
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" <DialogTitle className="flex items-center">
enterTo="opacity-100 translate-y-0 sm:scale-100" <span className="pr-2">
leave="ease-in duration-200" Edit Code
leaveFrom="opacity-100 translate-y-0 sm:scale-100" </span>
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" <CommandLineIcon
> className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]"> aria-hidden="true"
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> />
<button
type="button" </DialogTitle>
className="rounded-md text-gray-400 hover:text-gray-500" <DialogDescription>
onClick={() => { Make configurations changes to your nodes. Click save when you're done.
setModalOpen(false);
}} </DialogDescription>
> </DialogHeader>
<span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> <div className="flex h-full w-full mt-2">
</div> <AceEditor
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<CommandLineIcon
className="h-6 w-6 text-blue-600"
aria-hidden="true"
/>
</div>
<div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium dark:text-white leading-10 text-gray-900"
>
Edit Code
</Dialog.Title>
</div>
</div>
<div className="h-full w-full bg-gray-200 overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
<div className="flex h-full w-full">
<div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
<AceEditor
value={code} value={code}
mode="python" mode="python"
highlightActiveLine={true} highlightActiveLine={true}
@ -110,67 +81,63 @@ export default function CodeAreaModal({
onChange={(value) => { onChange={(value) => {
setCode(value); setCode(value);
}} }}
className="h-full w-full rounded-lg" className="w-full rounded-lg h-[300px] custom-scroll"
/> />
</div>
</div> </div>
</div>
<div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
<button
type="button" <DialogFooter>
className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm" <Button
onClick={() => { className="mt-3"
checkCode(code) onClick={() => {
.then((apiReturn) => { checkCode(code)
if (apiReturn.data) { .then((apiReturn) => {
let importsErrors = apiReturn.data.imports.errors; if (apiReturn.data) {
let funcErrors = apiReturn.data.function.errors; let importsErrors = apiReturn.data.imports.errors;
if ( let funcErrors = apiReturn.data.function.errors;
funcErrors.length === 0 && if (
importsErrors.length === 0 funcErrors.length === 0 &&
) { importsErrors.length === 0
setSuccessData({ ) {
title: "Code is ready to run", setSuccessData({
}); title: "Code is ready to run",
setModalOpen(false); });
setValue(code); setModalOpen(false);
} else { setValue(code);
if (funcErrors.length !== 0) { } else {
setErrorData({ if (funcErrors.length !== 0) {
title: "There is an error in your function", setErrorData({
list: funcErrors, title: "There is an error in your function",
}); list: funcErrors,
} });
if (importsErrors.length !== 0) { }
setErrorData({ if (importsErrors.length !== 0) {
title: "There is an error in your imports", setErrorData({
list: importsErrors, title: "There is an error in your imports",
}); list: importsErrors,
} });
} }
} else { }
setErrorData({ } else {
title: "Something went wrong, please try again", setErrorData({
}); title: "Something went wrong, please try again",
} });
}) }
.catch((_) => })
setErrorData({ .catch((_) =>
title: setErrorData({
"There is something wrong with this code, please review it", title:
}) "There is something wrong with this code, please review it",
); })
}} );
> }}
Check & Save
</button> type="submit">Check & Save</Button>
</div> </DialogFooter>
</div> </DialogContent>
</Dialog.Panel> </Dialog>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
); );
} }

226
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Dialog, Transition } from "@headlessui/react";
import { import {
XMarkIcon, XMarkIcon,
ArrowDownTrayIcon, ArrowDownTrayIcon,
@ -10,6 +9,20 @@ import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils"; import { removeApiKeys } from "../../utils";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { Label } from "@radix-ui/react-label";
import { Checkbox } from "../../components/ui/checkbox";
import { Textarea } from "../../components/ui/textarea";
import { Input } from "../../components/ui/input";
export default function ExportModal() { export default function ExportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -28,105 +41,55 @@ export default function ExportModal() {
const [checked, setChecked] = useState(true); const [checked, setChecked] = useState(true);
const [name, setName] = useState(flows[tabIndex].name); const [name, setName] = useState(flows[tabIndex].name);
return ( return (
<Transition.Root show={open} appear={true} as={Fragment}>
<Dialog
as="div"
className="relative z-10"
onClose={setModalOpen}
initialFocus={ref}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <Dialog open={true} onOpenChange={setModalOpen} >
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <DialogTrigger asChild>
<Transition.Child
as={Fragment} </DialogTrigger>
enter="ease-out duration-300" <DialogContent className="lg:max-w-[600px] h-[450px]">
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" <DialogHeader>
enterTo="opacity-100 translate-y-0 sm:scale-100" <DialogTitle className="flex items-center">
leave="ease-in duration-200" <span className="pr-2">
leaveFrom="opacity-100 translate-y-0 sm:scale-100" Export
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" </span>
> <ArrowDownTrayIcon
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]"> className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
<div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block"> aria-hidden="true"
<button />
type="button"
className="rounded-md text-gray-400 hover:text-gray-500" </DialogTitle>
onClick={() => { <DialogDescription>
setModalOpen(false); Make configurations changes to your nodes. Click save when you're done.
}}
> </DialogDescription>
<span className="sr-only">Close</span> </DialogHeader>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> <Label>
</div> <span className="font-medium">Name</span>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm"> <Input
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10"> className="mt-2"
<ArrowDownTrayIcon onChange={(event) => {
className="h-6 w-6 text-blue-600" if (event.target.value != "") {
aria-hidden="true" let newFlow = flows[tabIndex];
/> newFlow.name = event.target.value;
</div> setName(event.target.value);
<div className="mt-4 text-center sm:ml-4 sm:text-left"> updateFlow(newFlow);
<Dialog.Title } else {
as="h3" setName(event.target.value);
className="text-lg font-medium dark:text-white leading-10 text-gray-900" }
> }}
Export type="text"
</Dialog.Title> name="name"
</div> value={name ?? null}
</div> placeholder="File name"
<div className="pt-16 flex flex-col items-start justify-start h-full w-full bg-gray-200 dark:bg-gray-900 p-4 gap-16"> id="name"
<div className="w-full"> />
<label </Label>
htmlFor="name" <Label>
className="block mb-2 font-medium text-gray-700 dark:text-white" <span className="font-medium">Description (optional)</span>
> <Textarea
Name
</label>
<input
onChange={(event) => {
if (event.target.value != "") {
let newFlow = flows[tabIndex];
newFlow.name = event.target.value;
setName(event.target.value);
updateFlow(newFlow);
} else {
setName(event.target.value);
}
}}
type="text"
name="name"
value={name ?? null}
placeholder="File name"
id="name"
className="focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500 text-gray-900 dark:text-gray-100"
/>
</div>
<div className="w-full">
<label
htmlFor="description"
className="block mb-2 font-medium text-gray-700 dark:text-white"
>
Description{" "}
<span className="text-gray-400 text-sm">
{" "}
(optional)
</span>
</label>
<textarea
name="description" name="description"
id="description" id="description"
onChange={(event) => { onChange={(event) => {
@ -136,45 +99,40 @@ export default function ExportModal() {
}} }}
value={flows[tabIndex].description ?? null} value={flows[tabIndex].description ?? null}
placeholder="Flow description" placeholder="Flow description"
rows={3} className="max-h-[100px] mt-2"
className=" focus:border focus:border-blue block w-full px-3 py-2 border-gray-300 text-gray-900 dark:text-gray-100 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500" rows={3} />
></textarea>
</div>
<div> </Label>
<label htmlFor="checkbox" className="flex items-center"> <div className="flex items-center space-x-2">
<input <Checkbox id="terms"
onChange={(event) => { onCheckedChange={(event: boolean) => {
setChecked(event.target.checked); setChecked(event);
}} }}
checked={checked}
id="checkbox" />
type="checkbox" <label
className="h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-800 dark:border-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500" htmlFor="terms"
/> className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
<span className="ml-2 font-medium text-gray-700 dark:text-white"> >
Save with my API keys Save with my API keys
</span> </label>
</label> </div>
</div>
<div className="w-full flex justify-end"> <DialogFooter>
<button <Button
onClick={() => { onClick={() => {
if (checked) downloadFlow(flows[tabIndex]); if (checked) downloadFlow(flows[tabIndex]);
else downloadFlow(removeApiKeys(flows[tabIndex])); else downloadFlow(removeApiKeys(flows[tabIndex]));
}} }}
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
> type="submit">Download Flow</Button>
Download Flow </DialogFooter>
</button> </DialogContent>
</div> </Dialog>
</div>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
); );
} }