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

Feat: create isThereModal validate function to prevent modals from opening on top of each other

Browse source
This commit is contained in:
igorrCarvalho 2024-06-09 20:29:35 -03:00
commit 4f80346602
4 changed files with 32 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/src/components/chatComponent/index.tsx
View file

@ -8,23 +8,29 @@ import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useShortcutsStore } from "../../stores/shortcuts";
import { useStoreStore } from "../../stores/storeStore";
import { classNames } from "../../utils/utils";
import { classNames, isThereModal } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
import { Separator } from "../ui/separator";
export default function FlowToolbar(): JSX.Element {
const preventDefault = true;
const [open, setOpen] = useState<boolean>(false);
const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
const [openShareModal, setOpenShareModal] = useState<boolean>(false);
function handleAPIWShortcut(e: KeyboardEvent) {
if (isThereModal() && !openCodeModal) return;
setOpenCodeModal((oldOpen) => !oldOpen);
}
function handleChatWShortcut(e: KeyboardEvent) {
if (isThereModal() && !open) return;
if (useFlowStore.getState().hasIO) {
setOpen((oldState) => !oldState);
}
}
function handleShareWShortcut(e: KeyboardEvent) {
if (isThereModal() && !openShareModal) return;
setOpenShareModal((oldState) => !oldState);
}
@ -36,10 +42,6 @@ export default function FlowToolbar(): JSX.Element {
useHotkeys(api, handleAPIWShortcut, { preventDefault });
useHotkeys(flow, handleShareWShortcut, { preventDefault });
const [open, setOpen] = useState<boolean>(false);
const [openCodeModal, setOpenCodeModal] = useState<boolean>(false);
const [openShareModal, setOpenShareModal] = useState<boolean>(false);
const hasIO = useFlowStore((state) => state.hasIO);
const hasStore = useStoreStore((state) => state.hasStore);
const validApiKey = useStoreStore((state) => state.validApiKey);

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

@ -1,5 +1,4 @@
import { ReactNode, useEffect, useMemo, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import EditFlowSettings from "../../components/editFlowSettingsComponent";
import IconComponent from "../../components/genericIconComponent";
import { TagsSelector } from "../../components/tagsSelectorComponent";

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

@ -32,7 +32,7 @@ import {
expandGroupNode,
updateFlowPosition,
} from "../../../../utils/reactflowUtils";
import { classNames, cn } from "../../../../utils/utils";
import { classNames, cn, isThereModal } from "../../../../utils/utils";
import ToolbarSelectItem from "./toolbarSelectItem";
import RenderIcons from "../../../../components/renderIconComponent";
@ -47,6 +47,13 @@ export default function NodeToolbarComponent({
setShowState,
onCloseAdvancedModal,
}: nodeToolbarPropsType): JSX.Element {
const version = useDarkStore((state) => state.version);
const [showModalAdvanced, setShowModalAdvanced] = useState(false);
const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version),
);
const preventDefault = true;
const isMac = navigator.platform.toUpperCase().includes("MAC");
const nodeLength = Object.keys(data.node!.template).filter(
@ -99,20 +106,23 @@ export default function NodeToolbarComponent({
}
function handleShareWShortcut(e: KeyboardEvent) {
e.preventDefault();
if (isThereModal() && !showOverrideModal) return;
if (hasApiKey || hasStore) {
e.preventDefault();
setShowconfirmShare((state) => !state);
}
}
function handleCodeWShortcut(e: KeyboardEvent) {
e.preventDefault();
if (isThereModal() && !openModal) return;
if (hasCode) return setOpenModal((state) => !state);
setNoticeData({ title: `You can not access ${data.id} code` });
}
function handleAdvancedWShortcut(e: KeyboardEvent) {
e.preventDefault();
if (isThereModal() && !showModalAdvanced) return;
if (!isGroup) {
setShowModalAdvanced((state) => !state);
}
@ -120,11 +130,12 @@ export default function NodeToolbarComponent({
function handleSaveWShortcut(e: KeyboardEvent) {
e.preventDefault();
if (isThereModal() && !showOverrideModal) return;
if (isSaved) {
setShowOverrideModal((state) => !state);
return;
}
if (hasCode) {
if (hasCode && !isSaved) {
saveComponent(cloneDeep(data), false);
setSuccessData({ title: `${data.id} saved successfully` });
return;
@ -195,14 +206,7 @@ export default function NodeToolbarComponent({
const saveComponent = useFlowsManagerStore((state) => state.saveComponent);
const getNodePosition = useFlowStore((state) => state.getNodePosition);
const flows = useFlowsManagerStore((state) => state.flows);
const version = useDarkStore((state) => state.version);
const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
const [showModalAdvanced, setShowModalAdvanced] = useState(false);
const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version),
);
// useEffect(() => {
// if (openWDoubleClick) setShowModalAdvanced(true);
@ -428,7 +432,7 @@ export default function NodeToolbarComponent({
side="top"
>
<button
className="relative inline-flex items-center rounded-l-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"
className="relative inline-flex items-center rounded-l-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"
onClick={() => {
setOpenModal(!openModal);
}}
@ -448,7 +452,7 @@ export default function NodeToolbarComponent({
side="top"
>
<button
className="relative -ml-px inline-flex items-center 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"
className={`${isGroup ? "rounded-l-md" : ""} relative -ml-px inline-flex items-center 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`}
onClick={() => {
setShowModalAdvanced(true);
}}

9
src/frontend/src/utils/utils.ts
View file

@ -406,3 +406,12 @@ export function extractColumnsFromRows(
return Object.values(columnsKeys);
}
export function isThereModal(): boolean {
const modal = document.body.getElementsByClassName(
"nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
);
console.log(modal);
if (modal.length > 0) return true;
return false;
}