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

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

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

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

@ -40,9 +40,10 @@ export default function TextAreaComponent({
setDisableCopyPaste(false);
}}
className={
editNode
(editNode
? " input-edit-node "
: " input-primary " + (disabled ? " input-disable" : "")
: " input-primary " + (disabled ? " input-disable" : "")) +
" w-full"
}
placeholder={"Type something..."}
onChange={(e) => {
@ -50,33 +51,28 @@ export default function TextAreaComponent({
onChange(e.target.value);
}}
/>
<button
onClick={() => {
openPopUp(
<GenericModal
type={TypeModal.TEXT}
buttonText="Finishing Editing"
modalTitle="Edit Text"
value={myValue}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
<div>
<GenericModal
type={TypeModal.TEXT}
buttonText="Finishing Editing"
modalTitle="Edit Text"
value={myValue}
setValue={(t: string) => {
setMyValue(t);
onChange(t);
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
);
}}
>
{!editNode && (
<ExternalLink
strokeWidth={1.5}
className={
"icons-parameters-comp" +
(disabled ? " text-ring" : " hover:text-accent-foreground")
}
/>
)}
</button>
)}
</GenericModal>
</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 {
@ -9,15 +9,18 @@ import {
DialogTitle,
DialogTrigger,
} from "../../components/ui/dialog";
import { PopUpContext } from "../../contexts/popUpContext";
type ContentProps = { children: ReactNode };
type HeaderProps = { children: ReactNode; description: string };
type FooterProps = { children: ReactNode };
type TriggerProps = { children: ReactNode };
const Content: React.FC<ContentProps> = ({ children }) => {
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 }> = ({
children,
@ -38,10 +41,11 @@ interface BaseModalProps {
children: [
React.ReactElement<ContentProps>,
React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>,
React.ReactElement<FooterProps>?
];
open: boolean;
setOpen: (open: boolean) => void;
open?: boolean;
setOpen?: (open: boolean) => void;
size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
}
function BaseModal({
@ -50,20 +54,12 @@ function BaseModal({
children,
size = "large",
}: 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(
(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(
(child) => (child as React.ReactElement).type === Content
);
@ -102,8 +98,8 @@ function BaseModal({
//UPDATE COLORS AND STYLE CLASSSES
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger className="hidden"></DialogTrigger>
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className="w-full">{triggerChild}</DialogTrigger>
<DialogContent className={minWidth}>
{headerChild}
<div className={`mt-2 flex ${height} w-full `}>{ContentChild}</div>
@ -116,5 +112,6 @@ function BaseModal({
BaseModal.Content = Content;
BaseModal.Header = Header;
BaseModal.Trigger = Trigger;
BaseModal.Footer = Footer;
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-twilight";
import { TerminalSquare } from "lucide-react";
import { useContext, useState } from "react";
import { ReactNode, useContext, useState } from "react";
import AceEditor from "react-ace";
import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
import { alertContext } from "../../contexts/alertContext";
import { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidateCode } from "../../controllers/API";
import { APIClassType } from "../../types/api";
import BaseModal from "../baseModal";
@ -21,24 +20,18 @@ export default function CodeAreaModal({
setValue,
nodeClass,
setNodeClass,
children,
}: {
setValue: (value: string) => void;
value: string;
nodeClass: APIClassType;
children: ReactNode;
setNodeClass: (Class: APIClassType) => void;
}) {
const [code, setCode] = useState(value);
const { dark } = useContext(darkContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
function setModalOpen(x: boolean) {
if (x === false) {
setCloseEdit("codearea");
closePopUp();
}
}
function handleClick() {
postValidateCode(code)
.then((apiReturn) => {
@ -50,7 +43,7 @@ export default function CodeAreaModal({
title: "Code is ready to run",
});
setValue(code);
setModalOpen(false);
setOpen(false);
} else {
if (funcErrors.length !== 0) {
setErrorData({
@ -78,8 +71,11 @@ export default function CodeAreaModal({
});
}
const [open, setOpen] = useState(false);
return (
<BaseModal open={true} setOpen={setModalOpen}>
<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>

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

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

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

@ -1,15 +1,17 @@
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 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, 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 { darkContext } from "../../contexts/darkContext";
import { PopUpContext } from "../../contexts/popUpContext";
import { postValidatePrompt } from "../../controllers/API";
import { APIClassType } from "../../types/api";
import {
@ -31,6 +33,7 @@ export default function GenericModal({
type,
nodeClass,
setNodeClass,
children,
}: {
field_name?: string;
setValue: (value: string) => void;
@ -38,6 +41,7 @@ export default function GenericModal({
buttonText: string;
modalTitle: string;
type: number;
children: ReactNode;
nodeClass?: APIClassType;
setNodeClass?: (Class: APIClassType) => void;
}) {
@ -47,17 +51,9 @@ export default function GenericModal({
const [inputValue, setInputValue] = useState(value);
const [isEdit, setIsEdit] = useState(true);
const [wordsHighlight, setWordsHighlight] = useState([]);
const { dark } = useContext(darkContext);
const { setErrorData, setSuccessData, setNoticeData } =
useContext(alertContext);
const { closePopUp, setCloseEdit } = useContext(PopUpContext);
const ref = useRef();
function setModalOpen(x: boolean) {
if (x === false) {
setCloseEdit("generic");
closePopUp();
}
}
const divRef = useRef(null);
const divRefPrompt = useRef(null);
@ -120,15 +116,16 @@ export default function GenericModal({
);
};
function getClassByNumberLength(){
function getClassByNumberLength() {
let sumOfCaracteres: number = 0;
wordsHighlight.forEach(element => {
sumOfCaracteres = sumOfCaracteres + element.replace(/[{}]/g, "").length
wordsHighlight.forEach((element) => {
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) {
postValidatePrompt(field_name, inputValue, nodeClass)
.then((apiReturn) => {
@ -165,8 +162,11 @@ export default function GenericModal({
});
}
const [modalOpen, setModalOpen] = useState(false);
return (
<BaseModal open={true} setOpen={setModalOpen}>
<BaseModal open={modalOpen} setOpen={setModalOpen}>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header
description={(() => {
switch (myModalTitle) {
@ -234,7 +234,10 @@ export default function GenericModal({
<div className="mb-auto flex-1">
{type === TypeModal.PROMPT && (
<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">
<Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
<span className="text-md font-semibold text-primary">