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

@ -12,8 +12,6 @@ export default function IntComponent({
}: FloatComponentType) { }: FloatComponentType) {
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) {

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 }

2
src/frontend/src/index.css
View file

@ -98,4 +98,4 @@ code {
The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */ The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
.react-flow__pane { .react-flow__pane {
cursor: default; cursor: default;
} }

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>
); );
} }