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

Started transition to Radix modal logic

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-13 17:20:18 -03:00
commit 6488750bc2
7 changed files with 119 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,4 @@
import { useContext, useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal"; import CodeAreaModal from "../../modals/codeAreaModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
@ -16,7 +15,6 @@ export default function CodeAreaComponent({
const [myValue, setMyValue] = useState( const [myValue, setMyValue] = useState(
typeof value == "string" ? value : JSON.stringify(value) typeof value == "string" ? value : JSON.stringify(value)
); );
const { openPopUp } = useContext(PopUpContext);
useEffect(() => { useEffect(() => {
if (disabled) { if (disabled) {
setMyValue(""); setMyValue("");
@ -30,45 +28,26 @@ export default function CodeAreaComponent({
return ( return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}> <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<div className="flex w-full items-center"> <CodeAreaModal
<span value={myValue}
onClick={() => { nodeClass={nodeClass}
openPopUp( setNodeClass={setNodeClass}
<CodeAreaModal setValue={(t: string) => {
value={myValue} setMyValue(t);
nodeClass={nodeClass} onChange(t);
setNodeClass={setNodeClass} }}
setValue={(t: string) => { >
setMyValue(t); <div className="flex w-full items-center">
onChange(t); <span
}} className={
/> editNode
); ? "input-edit-node input-dialog"
}} : (disabled ? " input-disable input-ring " : "") +
className={ " input-primary text-muted-foreground "
editNode }
? "input-edit-node input-dialog" >
: (disabled ? " input-disable input-ring " : "") + {myValue !== "" ? myValue : "Type something..."}
" input-primary text-muted-foreground " </span>
}
>
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {
openPopUp(
<CodeAreaModal
setNodeClass={setNodeClass}
value={myValue}
nodeClass={nodeClass}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
/>
);
}}
>
{!editNode && ( {!editNode && (
<ExternalLink <ExternalLink
strokeWidth={1.5} strokeWidth={1.5}
@ -78,8 +57,8 @@ export default function CodeAreaComponent({
} }
/> />
)} )}
</button> </div>
</div> </CodeAreaModal>
</div> </div>
); );
} }

73
src/frontend/src/components/promptComponent/index.tsx
View file

@ -59,52 +59,29 @@ export default function PromptAreaComponent({
return ( return (
<div className={disabled ? "pointer-events-none w-full " : " w-full"}> <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
<div className="flex w-full items-center"> <GenericModal
<span type={TypeModal.PROMPT}
onClick={() => { value={myValue}
openPopUp( buttonText="Check & Save"
<GenericModal modalTitle="Edit Prompt"
type={TypeModal.PROMPT} setValue={(t: string) => {
value={myValue} setMyValue(t);
buttonText="Check & Save" onChange(t);
modalTitle="Edit Prompt" }}
setValue={(t: string) => { nodeClass={nodeClass}
setMyValue(t); setNodeClass={setNodeClass}
onChange(t); >
}} <div className="flex w-full items-center">
nodeClass={nodeClass} <span
setNodeClass={setNodeClass} className={
/> editNode
); ? "input-edit-node input-dialog"
}} : (disabled ? " input-disable text-ring " : "") +
className={ " input-primary text-muted-foreground "
editNode }
? "input-edit-node input-dialog" >
: (disabled ? " input-disable text-ring " : "") + {myValue !== "" ? myValue : "Type your prompt here"}
" input-primary text-muted-foreground " </span>
}
>
{myValue !== "" ? myValue : "Type your prompt here"}
</span>
<button
onClick={() => {
openPopUp(
<GenericModal
field_name={field_name}
type={TypeModal.PROMPT}
value={myValue}
buttonText="Check & Save"
modalTitle="Edit Prompt"
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
nodeClass={nodeClass}
setNodeClass={setNodeClass}
/>
);
}}
>
{!editNode && ( {!editNode && (
<ExternalLink <ExternalLink
strokeWidth={1.5} strokeWidth={1.5}
@ -114,8 +91,8 @@ export default function PromptAreaComponent({
} }
/> />
)} )}
</button> </div>
</div> </GenericModal>
</div> </div>
); );
} }

52
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -40,9 +40,10 @@ export default function TextAreaComponent({
setDisableCopyPaste(false); setDisableCopyPaste(false);
}} }}
className={ className={
editNode (editNode
? " input-edit-node " ? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : "") : " input-primary " + (disabled ? " input-disable" : "")) +
" w-full"
} }
placeholder={"Type something..."} placeholder={"Type something..."}
onChange={(e) => { onChange={(e) => {
@ -50,33 +51,28 @@ export default function TextAreaComponent({
onChange(e.target.value); onChange(e.target.value);
}} }}
/> />
<div>
<button <GenericModal
onClick={() => { type={TypeModal.TEXT}
openPopUp( buttonText="Finishing Editing"
<GenericModal modalTitle="Edit Text"
type={TypeModal.TEXT} value={myValue}
buttonText="Finishing Editing" setValue={(t: string) => {
modalTitle="Edit Text" setMyValue(t);
value={myValue} onChange(t);
setValue={(t: string) => { }}
setMyValue(t); >
onChange(t); {!editNode && (
}} <ExternalLink
strokeWidth={1.5}
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/> />
); )}
}} </GenericModal>
> </div>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
</button>
</div> </div>
</div> </div>
); );

31
src/frontend/src/modals/baseModal/index.tsx
View file

@ -1,4 +1,4 @@
import { ReactNode, useContext } from "react"; import { ReactNode } from "react";
import React from "react"; import React from "react";
import { import {
@ -9,15 +9,18 @@ import {
DialogTitle, DialogTitle,
DialogTrigger, DialogTrigger,
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { PopUpContext } from "../../contexts/popUpContext";
type ContentProps = { children: ReactNode }; type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string }; type HeaderProps = { children: ReactNode; description: string };
type FooterProps = { children: ReactNode }; type FooterProps = { children: ReactNode };
type TriggerProps = { children: ReactNode };
const Content: React.FC<ContentProps> = ({ children }) => { const Content: React.FC<ContentProps> = ({ children }) => {
return <div className="h-full w-full">{children}</div>; return <div className="h-full w-full">{children}</div>;
}; };
const Trigger: React.FC<ContentProps> = ({ children }) => {
return <>{children}</>;
};
const Header: React.FC<{ children: ReactNode; description: string }> = ({ const Header: React.FC<{ children: ReactNode; description: string }> = ({
children, children,
@ -38,10 +41,11 @@ interface BaseModalProps {
children: [ children: [
React.ReactElement<ContentProps>, React.ReactElement<ContentProps>,
React.ReactElement<HeaderProps>, React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>,
React.ReactElement<FooterProps>? React.ReactElement<FooterProps>?
]; ];
open: boolean; open?: boolean;
setOpen: (open: boolean) => void; setOpen?: (open: boolean) => void;
size?: "smaller" | "small" | "medium" | "large" | "large-h-full"; size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
} }
function BaseModal({ function BaseModal({
@ -50,20 +54,12 @@ function BaseModal({
children, children,
size = "large", size = "large",
}: BaseModalProps) { }: BaseModalProps) {
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
setCloseEdit("editcode");
closePopUp();
}, 300);
}
}
const headerChild = React.Children.toArray(children).find( const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header (child) => (child as React.ReactElement).type === Header
); );
const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger
);
const ContentChild = React.Children.toArray(children).find( const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content (child) => (child as React.ReactElement).type === Content
); );
@ -102,8 +98,8 @@ function BaseModal({
//UPDATE COLORS AND STYLE CLASSSES //UPDATE COLORS AND STYLE CLASSSES
return ( return (
<Dialog open={true} onOpenChange={setModalOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger className="w-full">{triggerChild}</DialogTrigger>
<DialogContent className={minWidth}> <DialogContent className={minWidth}>
{headerChild} {headerChild}
<div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div> <div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
@ -116,5 +112,6 @@ function BaseModal({
BaseModal.Content = Content; BaseModal.Content = Content;
BaseModal.Header = Header; BaseModal.Header = Header;
BaseModal.Trigger = Trigger;
BaseModal.Footer = Footer; BaseModal.Footer = Footer;
export default BaseModal; export default BaseModal;

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

@ -5,13 +5,12 @@ import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight"; import "ace-builds/src-noconflict/theme-twilight";
import { TerminalSquare } from "lucide-react"; import { TerminalSquare } from "lucide-react";
import { useContext, useState } from "react"; import { ReactNode, useContext, useState } from "react";
import AceEditor from "react-ace"; import AceEditor from "react-ace";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidateCode } from "../../controllers/API"; import { postValidateCode } from "../../controllers/API";
import { APIClassType } from "../../types/api"; import { APIClassType } from "../../types/api";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
@ -21,24 +20,18 @@ export default function CodeAreaModal({
setValue, setValue,
nodeClass, nodeClass,
setNodeClass, setNodeClass,
children,
}: { }: {
setValue: (value: string) => void; setValue: (value: string) => void;
value: string; value: string;
nodeClass: APIClassType; nodeClass: APIClassType;
children: ReactNode;
setNodeClass: (Class: APIClassType) => void; setNodeClass: (Class: APIClassType) => void;
}) { }) {
const [code, setCode] = useState(value); const [code, setCode] = useState(value);
const { dark } = useContext(darkContext); const { dark } = useContext(darkContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const { setErrorData, setSuccessData } = useContext(alertContext); const { setErrorData, setSuccessData } = useContext(alertContext);
function setModalOpen(x: boolean) {
if (x === false) {
setCloseEdit("codearea");
closePopUp();
}
}
function handleClick() { function handleClick() {
postValidateCode(code) postValidateCode(code)
.then((apiReturn) => { .then((apiReturn) => {
@ -50,7 +43,7 @@ export default function CodeAreaModal({
title: "Code is ready to run", title: "Code is ready to run",
}); });
setValue(code); setValue(code);
setModalOpen(false); setOpen(false);
} else { } else {
if (funcErrors.length !== 0) { if (funcErrors.length !== 0) {
setErrorData({ setErrorData({
@ -78,8 +71,11 @@ export default function CodeAreaModal({
}); });
} }
const [open, setOpen] = useState(false);
return ( return (
<BaseModal open={true} setOpen={setModalOpen}> <BaseModal open={open} setOpen={setOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}> <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>

6
src/frontend/src/modals/formModal/index.tsx
View file

@ -36,7 +36,7 @@ export default function FormModal({
setOpen, setOpen,
}: { }: {
open: boolean; open: boolean;
setOpen: Function; setOpen: (open: boolean) => void;
flow: FlowType; flow: FlowType;
}) { }) {
const { tabsState, setTabsState } = useContext(TabsContext); const { tabsState, setTabsState } = useContext(TabsContext);
@ -389,8 +389,8 @@ export default function FormModal({
} }
} }
return ( return (
<Dialog open={open} onOpenChange={setModalOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className="hidden"></DialogTrigger> <DialogTrigger hidden></DialogTrigger>
{tabsState[flow.id].formKeysData && ( {tabsState[flow.id].formKeysData && (
<DialogContent className="min-w-[80vw]"> <DialogContent className="min-w-[80vw]">
<DialogHeader> <DialogHeader>

41
src/frontend/src/modals/genericModal/index.tsx
View file

@ -1,15 +1,17 @@
import { FileText, Variable } from "lucide-react"; import { FileText, Variable } from "lucide-react";
import { useContext, useEffect, useRef, useState } from "react"; import { ReactNode, useContext, useEffect, useRef, useState } from "react";
import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper"; import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
import ShadTooltip from "../../components/ShadTooltipComponent"; import ShadTooltip from "../../components/ShadTooltipComponent";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { DialogTitle } from "../../components/ui/dialog"; import { DialogTitle } from "../../components/ui/dialog";
import { Textarea } from "../../components/ui/textarea"; import { Textarea } from "../../components/ui/textarea";
import { MAX_WORDS_HIGHLIGHT, PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants"; import {
MAX_WORDS_HIGHLIGHT,
PROMPT_DIALOG_SUBTITLE,
TEXT_DIALOG_SUBTITLE,
} from "../../constants";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidatePrompt } from "../../controllers/API"; import { postValidatePrompt } from "../../controllers/API";
import { APIClassType } from "../../types/api"; import { APIClassType } from "../../types/api";
import { import {
@ -31,6 +33,7 @@ export default function GenericModal({
type, type,
nodeClass, nodeClass,
setNodeClass, setNodeClass,
children,
}: { }: {
field_name?: string; field_name?: string;
setValue: (value: string) => void; setValue: (value: string) => void;
@ -38,6 +41,7 @@ export default function GenericModal({
buttonText: string; buttonText: string;
modalTitle: string; modalTitle: string;
type: number; type: number;
children: ReactNode;
nodeClass?: APIClassType; nodeClass?: APIClassType;
setNodeClass?: (Class: APIClassType) => void; setNodeClass?: (Class: APIClassType) => void;
}) { }) {
@ -47,17 +51,9 @@ export default function GenericModal({
const [inputValue, setInputValue] = useState(value); const [inputValue, setInputValue] = useState(value);
const [isEdit, setIsEdit] = useState(true); const [isEdit, setIsEdit] = useState(true);
const [wordsHighlight, setWordsHighlight] = useState([]); const [wordsHighlight, setWordsHighlight] = useState([]);
const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData, setNoticeData } = const { setErrorData, setSuccessData, setNoticeData } =
useContext(alertContext); useContext(alertContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const ref = useRef(); const ref = useRef();
function setModalOpen(x: boolean) {
if (x === false) {
setCloseEdit("generic");
closePopUp();
}
}
const divRef = useRef(null); const divRef = useRef(null);
const divRefPrompt = useRef(null); const divRefPrompt = useRef(null);
@ -120,15 +116,16 @@ export default function GenericModal({
); );
}; };
function getClassByNumberLength(){ function getClassByNumberLength() {
let sumOfCaracteres: number = 0; let sumOfCaracteres: number = 0;
wordsHighlight.forEach(element => { wordsHighlight.forEach((element) => {
sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length;
}); });
return sumOfCaracteres > MAX_WORDS_HIGHLIGHT ? "code-highlight" : "code-nohighlight" return sumOfCaracteres > MAX_WORDS_HIGHLIGHT
? "code-highlight"
: "code-nohighlight";
} }
function validatePrompt(closeModal: boolean) { function validatePrompt(closeModal: boolean) {
postValidatePrompt(field_name, inputValue, nodeClass) postValidatePrompt(field_name, inputValue, nodeClass)
.then((apiReturn) => { .then((apiReturn) => {
@ -165,8 +162,11 @@ export default function GenericModal({
}); });
} }
const [modalOpen, setModalOpen] = useState(false);
return ( return (
<BaseModal open={true} setOpen={setModalOpen}> <BaseModal open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header <BaseModal.Header
description={(() => { description={(() => {
switch (myModalTitle) { switch (myModalTitle) {
@ -234,7 +234,10 @@ export default function GenericModal({
<div className="mb-auto flex-1"> <div className="mb-auto flex-1">
{type === TypeModal.PROMPT && ( {type === TypeModal.PROMPT && (
<div className=" mr-2"> <div className=" mr-2">
<div ref={divRef} className="max-h-20 overflow-y-auto custom-scroll"> <div
ref={divRef}
className="max-h-20 overflow-y-auto custom-scroll"
>
<div className="flex flex-wrap items-center"> <div className="flex flex-wrap items-center">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable> <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary"> <span className="text-md font-semibold text-primary">