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

Adding constants pattern, textfile edit node fix

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-08 16:58:05 -03:00
commit 10b3ad711e
7 changed files with 67 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ export default function TextAreaComponent({
value,
onChange,
disabled,
editNode = false,
}: TextAreaComponentType) {
const [myValue, setMyValue] = useState(value);
const { openPopUp } = useContext(PopUpContext);
@ -37,8 +38,10 @@ export default function TextAreaComponent({
);
}}
className={
"truncate block w-full text-gray-500 dark:text-gray-100 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" : "")
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 dark:text-gray-100 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" : "")
}
>
{myValue !== "" ? myValue : "Text empty"}
@ -59,7 +62,9 @@ export default function TextAreaComponent({
);
}}
>
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
{!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
)}
</button>
</div>
</div>

39
src/frontend/src/constants.tsx Normal file
View file

@ -0,0 +1,39 @@
// src/constants.tsx
/**
* The base text for subtitle of Export Dialog (Toolbar)
* @constant
*/
export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
/**
* The base text for subtitle of Code Dialog (Toolbar)
* @constant
*/
export const CODE_DIALOG_SUBTITLE =
"Export your flow to use it with this code.";
/**
* The base text for subtitle of Edit Node Dialog
* @constant
*/
export const EDIT_DIALOG_SUBTITLE =
"Make configurations changes to your nodes. Click save when you're done.";
/**
* The base text for subtitle of Code Dialog
* @constant
*/
export const CODE_PROMPT_DIALOG_SUBTITLE = "Edit you python code.";
/**
* The base text for subtitle of Prompt Dialog
* @constant
*/
export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
/**
* The base text for subtitle of Text Dialog
* @constant
*/
export const TEXT_DIALOG_SUBTITLE = "Edit you text.";

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

@ -42,7 +42,7 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { modalSubtitle } from "../modal-texts";
import { EDIT_DIALOG_SUBTITLE } from "../../constants";
export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true);
@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
/>
</DialogTitle>
<DialogDescription>
{modalSubtitle['edit']}
{EDIT_DIALOG_SUBTITLE}
<div className="flex pt-3">
<VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
&nbsp;
@ -179,6 +179,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
) : data.node.template[n].multiline ? (
<TextAreaComponent
disabled={false}
editNode={true}
value={data.node.template[n].value ?? ""}
onChange={(t: string) => {
data.node.template[n].value = t;

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

@ -21,7 +21,7 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { modalSubtitle } from "../modal-texts";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
export default function CodeAreaModal({
value,
@ -56,9 +56,7 @@ export default function CodeAreaModal({
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>
{modalSubtitle['codeprompt']}
</DialogDescription>
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<div className="flex h-full w-full mt-2">

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

@ -23,7 +23,7 @@ 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";
import { modalSubtitle } from "../modal-texts";
import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
export default function ExportModal() {
const [open, setOpen] = useState(true);
@ -53,9 +53,7 @@ export default function ExportModal() {
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>
{modalSubtitle['export']}
</DialogDescription>
<DialogDescription>{EXPORT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader>
<Label>

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

@ -16,7 +16,7 @@ import {
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea";
import { modalSubtitle } from "../modal-texts";
import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
export default function PromptAreaModal({
value,
@ -60,7 +60,18 @@ export default function PromptAreaModal({
/>
</DialogTitle>
<DialogDescription>
{modalSubtitle['prompt']}
{(() => {
switch (myModalTitle) {
case "Edit Text":
return TEXT_DIALOG_SUBTITLE;
case "Edit Prompt":
return PROMPT_DIALOG_SUBTITLE;
default:
return null;
}
})()}
</DialogDescription>
</DialogHeader>

8
src/frontend/src/modals/modal-texts.tsx
View file

@ -1,8 +0,0 @@
export const modalSubtitle = {
export: "Export your models.",
code: "Export your flow to use it with this code.",
edit: "Make configurations changes to your nodes. Click save when you're done.",
codeprompt: "Edit you python code.",
prompt: "Edit you prompt."
};