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

fix(shareModal/index.tsx): fix typo in variable name 'unavaliableNames' to 'unavailableNames' for better readability

Browse source 
feat(shareModal/index.tsx): add confirmation modal to prompt user to replace existing component with current one if name already exists
This commit is contained in:
cristhianzl 2023-12-09 11:41:04 -03:00
commit e269fdf986
1 changed files with 128 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -47,7 +47,7 @@ export default function ShareModal({
const [name, setName] = useState(component?.name ?? "");
const [description, setDescription] = useState(component?.description ?? "");
const [internalOpen, internalSetOpen] = useState(children ? false : true);
const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
const nameComponent = is_component ? "Component" : "Flow";
const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
@ -161,11 +161,11 @@ export default function ShareModal({
else internalSetOpen(false);
};
let modalConfirmationButton = useMemo(() => {
let modalConfirmation = useMemo(() => {
return (
<>
{unavaliableNames.find((element) => element.name === name) ? (
<ConfirmationModal
open={openConfirmationModal}
title={`Replace`}
cancelText="Cancel"
confirmationText="Replace"
@ -174,13 +174,16 @@ export default function ShareModal({
index={6}
onConfirm={() => {
handleUpdateComponent();
setOpenConfirmationModal(false);
}}
onCancel={() => {
setOpenConfirmationModal(false);
}}
onCancel={() => {}}
>
<ConfirmationModal.Content>
<span>
It seems {name} already exists. Do you want to replace it with
the current?
It seems {name} already exists. Do you want to replace it with the
current?
</span>
<br></br>
<span className=" text-xs text-destructive ">
@ -188,55 +191,21 @@ export default function ShareModal({
</span>
</ConfirmationModal.Content>
<ConfirmationModal.Trigger>
<div className="text-right">
<Button disabled={loadingNames} type="button">
{loadingNames ? (
<>
<div className="center w-16">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>
) : (
<>
{is_component && !loadingNames ? "Save and " : ""}Share{" "}
{!is_component && !loadingNames ? "Flow" : ""}
</>
)}
</Button>
</div>
<></>
</ConfirmationModal.Trigger>
</ConfirmationModal>
) : (
<>
<Button
disabled={loadingNames}
onClick={() => {
handleShareComponent();
if (setOpen) setOpen(false);
else internalSetOpen(false);
}}
type="button"
>
{loadingNames ? (
<>
<div className="center w-16">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>
) : (
<>
{is_component && !loadingNames ? "Save and " : ""}Share{" "}
{!is_component && !loadingNames ? "Flow" : ""}
</>
)}
</Button>
</>
)}
</>
);
}, [unavaliableNames, name, loadingNames, handleShareComponent]);
}, [
unavaliableNames,
name,
loadingNames,
handleShareComponent,
openConfirmationModal,
]);
return (
<>
<BaseModal
size="smaller-h-full"
open={(!disabled && open) ?? internalOpen}
@ -297,14 +266,46 @@ export default function ShareModal({
</label>
</div>
<span className=" text-xs text-destructive ">
Warning: Deselecting this box will exclusively eliminate API keys from
fields explicitly designated for API keys.
Warning: Deselecting this box will exclusively eliminate API keys
from fields explicitly designated for API keys.
</span>
</BaseModal.Content>
<BaseModal.Footer>
<>{modalConfirmationButton}</>
<div className="text-right">
<Button
disabled={loadingNames}
type="button"
onClick={() => {
const isNameAvailable = !unavaliableNames.some(
(element) => element.name === name
);
if (isNameAvailable) {
handleShareComponent();
(setOpen || internalSetOpen)(false);
} else {
setOpenConfirmationModal(true);
}
}}
>
{loadingNames ? (
<>
<div className="center w-16">
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
</div>
</>
) : (
<>
{is_component && !loadingNames ? "Save and " : ""}Share{" "}
{!is_component && !loadingNames ? "Flow" : ""}
</>
)}
</Button>
</div>
</BaseModal.Footer>
</BaseModal>
<>{modalConfirmation}</>
</>
);
}