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

Put component and flow export into share modal

Browse source
This commit is contained in:
Lucas Oliveira 2023-12-10 23:26:07 -03:00
commit 68a777b230
3 changed files with 82 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,6 +17,7 @@ import {
} from "../../controllers/API";
import { FlowType } from "../../types/flow";
import {
downloadNode,
removeApiKeys,
removeFileNameFromComponents,
} from "../../utils/reactflowUtils";
@ -39,7 +40,7 @@ export default function ShareModal({
setOpen?: (open: boolean) => void;
disabled?: boolean;
}): JSX.Element {
const { version, addFlow } = useContext(FlowsContext);
const { version, addFlow, downloadFlow } = useContext(FlowsContext);
const { hasApiKey, hasStore } = useContext(StoreContext);
const { setSuccessData, setErrorData } = useContext(alertContext);
const { reactFlowInstance } = useContext(typesContext);
@ -155,6 +156,13 @@ export default function ShareModal({
else internalSetOpen(false);
};
const handleExportComponent = () => {
if (!checked) {
component = removeApiKeys(component);
}
downloadNode(component);
};
let modalConfirmation = useMemo(() => {
return (
<>
@ -205,7 +213,9 @@ export default function ShareModal({
open={(!disabled && open) ?? internalOpen}
setOpen={setOpen ?? internalSetOpen}
>
<BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
<BaseModal.Trigger asChild>
{children ? children : <></>}
</BaseModal.Trigger>
<BaseModal.Header
description={`Share your ${nameComponent} to the Langflow Store.`}
>
@ -262,10 +272,23 @@ export default function ShareModal({
</BaseModal.Content>
<BaseModal.Footer>
<div className="text-right">
<div className="flex w-full justify-between gap-2">
<Button
type="button"
variant="outline"
className="gap-2"
onClick={() => {
handleExportComponent();
(setOpen || internalSetOpen)(false);
}}
>
<IconComponent name="Download" className="h-4 w-4" />
Export
</Button>
<Button
disabled={loadingNames}
type="button"
className={is_component ? "w-40" : "w-28"}
onClick={() => {
const isNameAvailable = !unavaliableNames.some(
(element) => element.name === name
@ -281,7 +304,7 @@ export default function ShareModal({
>
{loadingNames ? (
<>
<div className="center w-16">
<div className="center">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>

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

@ -184,14 +184,18 @@ export default function ExtraSidebar(): JSX.Element {
}, [getFilterEdge, data]);
const ModalMemo = useMemo(
() =>
!hasApiKey || !validApiKey ? (
() => (
<ShareModal
is_component={false}
component={flow!}
disabled={!hasApiKey || !validApiKey || !hasStore}
>
<button
disabled={!hasApiKey || !validApiKey || !hasStore}
className={classNames(
"extra-side-bar-buttons",
"extra-side-bar-buttons gap-2 text-sm",
!hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default"
? "button-disable cursor-default text-muted-foreground"
: ""
)}
>
@ -204,34 +208,10 @@ export default function ExtraSidebar(): JSX.Element {
: ""
)}
/>
Share
</button>
) : (
<ShareModal
is_component={false}
component={flow!}
disabled={!hasApiKey || !validApiKey || !hasStore}
>
<button
disabled={!hasApiKey || !validApiKey || !hasStore}
className={classNames(
"extra-side-bar-buttons",
!hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default"
: ""
)}
>
<IconComponent
name="Share2"
className={classNames(
"side-bar-button-size",
!hasApiKey || !validApiKey || !hasStore
? "extra-side-bar-save-disable"
: ""
)}
/>
</button>
</ShareModal>
),
</ShareModal>
),
[hasApiKey, validApiKey, flow, hasStore]
);
@ -270,7 +250,7 @@ export default function ExtraSidebar(): JSX.Element {
</button>
</ShadTooltip>
</div>
<div className="side-bar-button">{ExportMemo}</div>
{!hasStore && ExportMemo}
<ShadTooltip content={"Code"} side="top">
<div className="side-bar-button">
{flow && flow.data && (
@ -295,36 +275,44 @@ export default function ExtraSidebar(): JSX.Element {
<div className="side-bar-button">
{flow && flow.data && (
<ShadTooltip content="Save" side="top">
<div>
<button
disabled={flow?.data?.nodes.length === 0}
<button
disabled={flow?.data?.nodes.length === 0}
className={
"extra-side-bar-buttons " +
(isPending && flow!.data!.nodes?.length > 0
? ""
: "button-disable")
}
onClick={(event) => {
saveFlow(flow!);
}}
>
<IconComponent
name="Save"
className={
"extra-side-bar-buttons " +
"side-bar-button-size" +
(isPending && flow!.data!.nodes?.length > 0
? ""
: "button-disable")
? " "
: " extra-side-bar-save-disable")
}
onClick={(event) => {
saveFlow(flow!);
}}
>
<IconComponent
name="Save"
className={
"side-bar-button-size" +
(isPending && flow!.data!.nodes?.length > 0
? " "
: " extra-side-bar-save-disable")
}
/>
</button>
</div>
/>
</button>
</ShadTooltip>
)}
</div>
<ShadTooltip content="Share" side="top" styleClasses="cursor-default">
<div className="side-bar-button">{ModalMemo}</div>
</ShadTooltip>
{hasStore && (
<ShadTooltip
content={
!hasApiKey || !validApiKey
? "Please review your API key."
: "Share"
}
side="top"
styleClasses="cursor-default"
>
<div className="side-bar-button">{ModalMemo}</div>
</ShadTooltip>
)}
</div>
<Separator />
<div className="side-bar-search-div-placement">

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

@ -257,15 +257,17 @@ export default function NodeToolbarComponent({
</div>{" "}
</SelectItem>
)}
<SelectItem value={"Download"}>
<div className="flex">
<IconComponent
name="Download"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Download{" "}
</div>{" "}
</SelectItem>
{!hasStore && (
<SelectItem value={"Download"}>
<div className="flex">
<IconComponent
name="Download"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Download{" "}
</div>{" "}
</SelectItem>
)}
{isMinimal && (
<SelectItem value={"show"}>
<div className="flex">