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

Added Submit buttons in every modal, except confirmation

Browse source
This commit is contained in:
Lucas Oliveira 2024-05-24 15:00:56 +02:00
commit 47cbedced4
7 changed files with 131 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/src/components/fetchErrorComponent/index.tsx
View file

@ -1,7 +1,6 @@
import BaseModal from "../../modals/baseModal";
import { fetchErrorComponentType } from "../../types/components";
import IconComponent from "../genericIconComponent";
import { Button } from "../ui/button";
export default function FetchErrorComponent({
message,
@ -12,7 +11,14 @@ export default function FetchErrorComponent({
}: fetchErrorComponentType) {
return (
<>
<BaseModal size="small-h-full" open={openModal} type="modal">
<BaseModal
size="small-h-full"
open={openModal}
type="modal"
onSubmit={() => {
setRetry();
}}
>
<BaseModal.Content>
<div role="status" className="m-auto flex flex-col items-center">
<IconComponent
@ -27,24 +33,9 @@ export default function FetchErrorComponent({
</div>
</BaseModal.Content>
<BaseModal.Footer>
<div className="m-auto">
<Button
disabled={isLoadingHealth}
onClick={() => {
setRetry();
}}
>
{isLoadingHealth ? (
<div>
<IconComponent name={"Loader2"} className={"animate-spin"} />
</div>
) : (
"Retry"
)}
</Button>
</div>
</BaseModal.Footer>
<BaseModal.Footer
submit={{ label: "Retry", loading: isLoadingHealth }}
/>
</BaseModal>
</>
);

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

@ -3,7 +3,6 @@ import AccordionComponent from "../../components/accordionComponent";
import IconComponent from "../../components/genericIconComponent";
import ShadTooltip from "../../components/shadTooltipComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
Tabs,
TabsContent,
@ -121,6 +120,7 @@ export default function IOModal({
open={open}
setOpen={setOpen}
disable={disable}
onSubmit={() => sendMessage(1)}
>
<BaseModal.Trigger>{children}</BaseModal.Trigger>
{/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */}
@ -371,13 +371,10 @@ export default function IOModal({
</div>
</BaseModal.Content>
{!haveChat ? (
<BaseModal.Footer>
<div className="flex w-full justify-end pt-2">
<Button
variant={"outline"}
className="flex gap-2 px-3"
onClick={() => sendMessage(1)}
>
<BaseModal.Footer
submit={{
label: "Run Flow",
icon: (
<IconComponent
name={isBuilding ? "Loader2" : "Zap"}
className={cn(
@ -387,10 +384,9 @@ export default function IOModal({
: "fill-current text-medium-indigo",
)}
/>
Run Flow
</Button>
</div>
</BaseModal.Footer>
),
}}
/>
) : (
<></>
)}

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

@ -16,6 +16,7 @@ import {
} from "../../components/ui/dialog-with-no-close";
import { DialogClose } from "@radix-ui/react-dialog";
import ForwardedIconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { modalHeaderType } from "../../types/components";
import { cn } from "../../utils/utils";
@ -65,7 +66,12 @@ const Header: React.FC<{ children: ReactNode; description: string | null }> = ({
const Footer: React.FC<{
children?: ReactNode;
submit?: { label: string; icon?: ReactNode };
submit?: {
label: string;
icon?: ReactNode;
loading?: boolean;
disabled?: boolean;
};
}> = ({ children, submit }) => {
return submit ? (
<div className="flex w-full items-center justify-between">
@ -76,9 +82,26 @@ const Footer: React.FC<{
Cancel
</Button>
</DialogClose>
<Button type="submit">
{submit.icon && submit.icon}
{submit.label}
<Button
type="submit"
disabled={submit.loading || submit.disabled}
className="relative"
>
<div
className={cn(
submit.loading ? "opacity-100" : "opacity-0",
"absolute self-center",
)}
>
<ForwardedIconComponent
name={"Loader2"}
className={"animate-spin"}
/>
</div>
<div className={cn(submit.loading ? "opacity-0" : "opacity-100")}>
{submit.icon && submit.icon}
{submit.label}
</div>
</Button>
</div>
</div>
@ -242,7 +265,7 @@ function BaseModal({
event.preventDefault();
onSubmit();
}}
className="flex flex-col gap-4"
className="flex flex-col gap-6"
>
<div
className={`flex flex-col ${height} w-full transition-all duration-300`}

32
src/frontend/src/modals/editNodeModal/index.tsx
View file

@ -15,7 +15,6 @@ import ShadTooltip from "../../components/shadTooltipComponent";
import TextAreaComponent from "../../components/textAreaComponent";
import ToggleShadComponent from "../../components/toggleShadComponent";
import { Badge } from "../../components/ui/badge";
import { Button } from "../../components/ui/button";
import {
Table,
TableBody,
@ -98,6 +97,16 @@ const EditNodeModal = forwardRef(
onChangeOpenModal={(open) => {
setMyData(data);
}}
onSubmit={() => {
setNode(data.id, (old) => ({
...old,
data: {
...old.data,
node: myData.node,
},
}));
setOpen(false);
}}
>
<BaseModal.Trigger>
<></>
@ -608,26 +617,7 @@ const EditNodeModal = forwardRef(
</div>
</BaseModal.Content>
<BaseModal.Footer>
<Button
data-test-id="saveChangesBtn"
id={"saveChangesBtn"}
className="mt-3"
onClick={() => {
setNode(data.id, (old) => ({
...old,
data: {
...old.data,
node: myData.node,
},
}));
setOpen(false);
}}
type="submit"
>
Save Changes
</Button>
</BaseModal.Footer>
<BaseModal.Footer submit={{ label: "Save Changes" }} />
</BaseModal>
);
},

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

@ -1,7 +1,6 @@
import { ReactNode, forwardRef, useEffect, useState } from "react";
import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { Button } from "../../components/ui/button";
import { Checkbox } from "../../components/ui/checkbox";
import { API_WARNING_NOTICE_ALERT } from "../../constants/alerts_constants";
import {
@ -30,7 +29,43 @@ const ExportModal = forwardRef(
const [open, setOpen] = useState(false);
return (
<BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
<BaseModal
size="smaller-h-full"
open={open}
setOpen={setOpen}
onSubmit={() => {
if (checked) {
downloadFlow(
{
id: currentFlow!.id,
data: currentFlow!.data!,
description,
name,
last_tested_version: version,
is_component: false,
},
name!,
description,
);
setNoticeData({
title: API_WARNING_NOTICE_ALERT,
});
} else
downloadFlow(
removeApiKeys({
id: currentFlow!.id,
data: currentFlow!.data!,
description,
name,
last_tested_version: version,
is_component: false,
}),
name!,
description,
);
setOpen(false);
}}
>
<BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>
<BaseModal.Header description={EXPORT_DIALOG_SUBTITLE}>
<span className="pr-2">Export</span>
@ -64,47 +99,9 @@ const ExportModal = forwardRef(
</span>
</BaseModal.Content>
<BaseModal.Footer>
<Button
onClick={() => {
if (checked) {
downloadFlow(
{
id: currentFlow!.id,
data: currentFlow!.data!,
description,
name,
last_tested_version: version,
is_component: false,
},
name!,
description
);
setNoticeData({
title: API_WARNING_NOTICE_ALERT,
});
} else
downloadFlow(
removeApiKeys({
id: currentFlow!.id,
data: currentFlow!.data!,
description,
name,
last_tested_version: version,
is_component: false,
}),
name!,
description
);
setOpen(false);
}}
type="submit"
>
Download Flow
</Button>
</BaseModal.Footer>
<BaseModal.Footer submit={{ label: "Download Flow" }} />
</BaseModal>
);
}
},
);
export default ExportModal;

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

@ -41,7 +41,12 @@ export default function FlowSettingsModal({
}, [flows]);
return (
<BaseModal open={open} setOpen={setOpen} size="smaller">
<BaseModal
open={open}
setOpen={setOpen}
size="smaller"
onSubmit={handleClick}
>
<BaseModal.Header description={SETTINGS_DIALOG_SUBTITLE}>
<span className="pr-2">Settings</span>
<IconComponent name="Settings2" className="mr-2 h-4 w-4 " />
@ -56,15 +61,12 @@ export default function FlowSettingsModal({
/>
</BaseModal.Content>
<BaseModal.Footer>
<Button
disabled={nameLists.includes(name) && name !== currentFlow!.name}
onClick={handleClick}
type="submit"
>
Save
</Button>
</BaseModal.Footer>
<BaseModal.Footer
submit={{
label: "Save",
disabled: nameLists.includes(name) && name !== currentFlow!.name,
}}
/>
</BaseModal>
);
}

56
src/frontend/src/modals/shareModal/index.tsx
View file

@ -1,4 +1,3 @@
import { Loader2 } from "lucide-react";
import { ReactNode, useEffect, useMemo, useState } from "react";
import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
@ -202,6 +201,18 @@ export default function ShareModal({
size="smaller-h-full"
open={(!disabled && open) ?? internalOpen}
setOpen={setOpen ?? internalSetOpen}
onSubmit={() => {
const isNameAvailable = !unavaliableNames.some(
(element) => element.name === name,
);
if (isNameAvailable) {
handleShareComponent();
(setOpen || internalSetOpen)(false);
} else {
setOpenConfirmationModal(true);
}
}}
>
<BaseModal.Trigger asChild>
{children ? children : <></>}
@ -250,8 +261,15 @@ export default function ShareModal({
</span>
</BaseModal.Content>
<BaseModal.Footer>
<div className="flex w-full justify-between gap-2">
<BaseModal.Footer
submit={{
label: `Share ${
!loadingNames && (!is_component ? " Flow" : " Component")
}`,
loading: loadingNames,
}}
>
<>
{!is_component && (
<ExportModal>
<Button
@ -281,37 +299,7 @@ export default function ShareModal({
Export
</Button>
)}
<Button
disabled={loadingNames}
type="button"
className={is_component ? "w-40" : "w-28"}
onClick={() => {
const isNameAvailable = !unavaliableNames.some(
(element) => element.name === name,
);
if (isNameAvailable) {
handleShareComponent();
(setOpen || internalSetOpen)(false);
} else {
setOpenConfirmationModal(true);
}
}}
>
{loadingNames ? (
<>
<div className="center">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>
) : (
<>
Share{" "}
{!loadingNames && (!is_component ? "Flow" : "Component")}
</>
)}
</Button>
</div>
</>
</BaseModal.Footer>
</BaseModal>
<>{modalConfirmation}</>