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

🔧 fix(ApiModal): import ReactNode from react to fix missing type error

Browse source 
✨ feat(ApiModal): add BaseModal component as a wrapper for the modal to improve code organization and reusability
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop name from children to flow in ApiModal component for better clarity
🔧 fix(ApiModal): change prop

🐛 fix(extraSidebarComponent): remove unnecessary onClick event handlers for Export and Code buttons
✨ feat(extraSidebarComponent): wrap Export and Code buttons with ExportModal and ApiModal components respectively to handle click events and display modals
🐛 fix(nodeToolbarComponent): remove unnecessary onClick event handler for Edit button
✨ feat(nodeToolbarComponent): wrap Edit button with EditNodeModal component to handle click events and display modal
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-13 17:59:46 -03:00
commit 607e57d4d9
6 changed files with 66 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ 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 { useContext, useEffect, useRef, useState } from "react";
import { ReactNode, useContext, useEffect, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext";
// import "ace-builds/webpack-resolver";
import { Check, Clipboard, Code2 } from "lucide-react";
@ -52,8 +52,9 @@ import { darkContext } from "../../contexts/darkContext";
import { TabsContext } from "../../contexts/tabsContext";
import { FlowType } from "../../types/flow/index";
import { buildTweaks, classNames } from "../../utils";
import BaseModal from "../baseModal";
export default function ApiModal({ flow }: { flow: FlowType }) {
export default function ApiModal({ flow, children }: { flow: FlowType; children: ReactNode }) {
const [open, setOpen] = useState(true);
const { dark } = useContext(darkContext);
const { closePopUp, closeEdit, setCloseEdit } = useContext(PopUpContext);
@ -265,21 +266,25 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="h-[80vh] md:max-w-[80vw]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
<Code2
className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader>
<Tabs
<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
value={activeTab}
className="api-modal-tabs"
onValueChange={(value) => {
@ -318,7 +323,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
>
{index < 3 ? (
<SyntaxHighlighter
className="h-[60vh] w-full overflow-auto custom-scroll"
className="h-[70vh] w-full overflow-auto custom-scroll"
language={tab.mode}
style={oneDark}
>
@ -329,7 +334,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<div className="api-modal-according-display">
<div
className={classNames(
"h-[60vh] w-full rounded-lg bg-muted",
"h-[70vh] w-full rounded-lg bg-muted",
1 == 1
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
@ -720,34 +725,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
)}
</div>
))}
{/*
<div className="flex flex-col gap-5 bg-muted">
<Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
<TableRow className="dark:border-b-muted">
<TableHead className="h-5 text-center">
TWEAK
</TableHead>
<TableHead className="p-0 h-5 text-center">
VALUE
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{invoices.map((invoice) => (
<TableRow className="p-0 text-center text-gray-900 text-sm">
<TableCell className="p-2 text-center text-gray-900 text-sm truncate">
{invoice.paymentStatus}
</TableCell>
<TableCell className="p-2 text-center text-gray-900 text-sm truncate">
{invoice.paymentMethod}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div> */}
</div>
</div>
</>
@ -755,7 +732,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</TabsContent>
))}
</Tabs>
</DialogContent>
</Dialog>
</BaseModal.Content>
</BaseModal>
);
}

18
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -1,5 +1,5 @@
import { Variable } from "lucide-react";
import { useContext, useRef, useState } from "react";
import { ReactNode, useContext, useRef, useState } from "react";
import CodeAreaComponent from "../../components/codeAreaComponent";
import Dropdown from "../../components/dropdownComponent";
import FloatComponent from "../../components/floatComponent";
@ -28,7 +28,7 @@ import { NodeDataType } from "../../types/flow";
import { classNames, limitScrollFieldsModal } from "../../utils";
import BaseModal from "../baseModal";
export default function EditNodeModal({ data }: { data: NodeDataType }) {
export default function EditNodeModal({ data, children }: { data: NodeDataType; children: ReactNode }) {
const [open, setOpen] = useState(true);
const [nodeLength, setNodeLength] = useState(
Object.keys(data.node.template).filter(
@ -58,12 +58,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
closePopUp();
}
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
closePopUp();
}
}
function changeAdvanced(node) {
Object.keys(data.node.template).map((n, i) => {
@ -89,8 +83,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
});
};
return (
<BaseModal open={true} setOpen={setModalOpen} size="large-h-full">
<BaseModal size="large-h-full">
<BaseModal.Trigger>
{children}
</BaseModal.Trigger>
<BaseModal.Header description={data.node?.description}>
<DialogTitle className="flex items-center">
<span className="pr-2">{data.type}</span>
@ -309,7 +307,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<Button
className="mt-3"
onClick={() => {
setModalOpen(false);
setOpen(false);
}}
type="submit"
>

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

@ -1,5 +1,5 @@
import { Download } from "lucide-react";
import { useContext, useRef, useState } from "react";
import { ReactNode, useContext, useRef, useState } from "react";
import EditFlowSettings from "../../components/EditFlowSettingsComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
@ -11,30 +11,22 @@ import { TabsContext } from "../../contexts/tabsContext";
import { removeApiKeys } from "../../utils";
import BaseModal from "../baseModal";
export default function ExportModal() {
const [open, setOpen] = useState(true);
export default function ExportModal({children} : {children: ReactNode}) {
const { closePopUp } = useContext(PopUpContext);
const ref = useRef();
const { setErrorData } = useContext(alertContext);
const { flows, tabId, updateFlow, downloadFlow, saveFlow } =
useContext(TabsContext);
const [isMaxLength, setIsMaxLength] = useState(false);
function setModalOpen(x: boolean) {
setOpen(x);
if (x === false) {
setTimeout(() => {
closePopUp();
}, 300);
}
}
const [checked, setChecked] = useState(false);
const [name, setName] = useState(flows.find((f) => f.id === tabId).name);
const [description, setDescription] = useState(
flows.find((f) => f.id === tabId).description
);
return (
<BaseModal open={true} setOpen={setModalOpen} size="smaller">
<BaseModal size="smaller">
<BaseModal.Trigger>
{children}
</BaseModal.Trigger>
<BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>
<Download

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

@ -40,7 +40,7 @@ export default function GenericModal({
value: string;
buttonText: string;
modalTitle: string;
type: number;
type: "prompt" | "text";
children: ReactNode;
nodeClass?: APIClassType;
setNodeClass?: (Class: APIClassType) => void;
@ -92,7 +92,7 @@ export default function GenericModal({
}
useEffect(() => {
if (type === TypeModal.PROMPT && inputValue && inputValue != "") {
if (type === "prompt" && inputValue && inputValue != "") {
checkVariables(inputValue);
}
}, [inputValue, type]);
@ -198,7 +198,7 @@ export default function GenericModal({
"flex h-full w-full"
)}
>
{type === TypeModal.PROMPT && isEdit ? (
{type === "prompt" && isEdit ? (
<Textarea
ref={divRefPrompt}
className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
@ -213,9 +213,9 @@ export default function GenericModal({
}}
placeholder="Type message here."
/>
) : type === TypeModal.PROMPT && !isEdit ? (
) : type === "prompt" && !isEdit ? (
<TextAreaContentView />
) : type !== TypeModal.PROMPT ? (
) : type !== "prompt" ? (
<Textarea
ref={ref}
className="form-input h-full w-full rounded-lg focus-visible:ring-1"
@ -232,7 +232,7 @@ export default function GenericModal({
<div className="mt-6 flex h-fit w-full items-end justify-between">
<div className="mb-auto flex-1">
{type === TypeModal.PROMPT && (
{type === "prompt" && (
<div className=" mr-2">
<div
ref={divRef}
@ -279,11 +279,11 @@ export default function GenericModal({
<Button
onClick={() => {
switch (myModalType) {
case 1:
case "text":
setValue(inputValue);
setModalOpen(false);
break;
case 2:
case "prompt":
!inputValue || inputValue === ""
? setModalOpen(false)
: validatePrompt(false);

17
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -76,27 +76,28 @@ export default function ExtraSidebar() {
</ShadTooltip>
<ShadTooltip content="Export" side="top">
<button
<ExportModal>
<button
className={classNames("extra-side-bar-buttons")}
onClick={(event) => {
openPopUp(<ExportModal />);
}}
>
<FileDown
strokeWidth={1.5}
className="side-bar-button-size"
></FileDown>
</button>
</ExportModal>
</ShadTooltip>
<ShadTooltip content="Code" side="top">
<button
<ApiModal flow={flows.find((f) => f.id === tabId)}>
<button
className={classNames("extra-side-bar-buttons")}
onClick={(event) => {
openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
}}
>
<Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
</button>
</ApiModal>
</ShadTooltip>
<ShadTooltip content="Save" side="top">

14
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -95,23 +95,21 @@ const NodeToolbarComponent = (props) => {
</ShadTooltip>
<ShadTooltip content="Edit" side="top">
<button
<EditNodeModal data={props.data} >
<button
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
? " text-muted-foreground"
: " text-foreground")
)}
onClick={(event) => {
if (nodeLength == 0) {
event.preventDefault();
}
event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />);
}}
>
<Settings2 className="h-4 w-4 "></Settings2>
</button>
</EditNodeModal>
</ShadTooltip>
{/*