fix(shareModal/index.tsx): fix typo in variable name 'unavaliableNames' to 'unavailableNames' for better readability
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
parent
76adfda7fe
commit
e269fdf986
1 changed files with 128 additions and 127 deletions
|
|
@ -47,7 +47,7 @@ export default function ShareModal({
|
||||||
const [name, setName] = useState(component?.name ?? "");
|
const [name, setName] = useState(component?.name ?? "");
|
||||||
const [description, setDescription] = useState(component?.description ?? "");
|
const [description, setDescription] = useState(component?.description ?? "");
|
||||||
const [internalOpen, internalSetOpen] = useState(children ? false : true);
|
const [internalOpen, internalSetOpen] = useState(children ? false : true);
|
||||||
|
const [openConfirmationModal, setOpenConfirmationModal] = useState(false);
|
||||||
const nameComponent = is_component ? "Component" : "Flow";
|
const nameComponent = is_component ? "Component" : "Flow";
|
||||||
|
|
||||||
const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
|
const [tags, setTags] = useState<{ id: string; name: string }[]>([]);
|
||||||
|
|
@ -161,61 +161,133 @@ export default function ShareModal({
|
||||||
else internalSetOpen(false);
|
else internalSetOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
let modalConfirmationButton = useMemo(() => {
|
let modalConfirmation = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{unavaliableNames.find((element) => element.name === name) ? (
|
<ConfirmationModal
|
||||||
<ConfirmationModal
|
open={openConfirmationModal}
|
||||||
title={`Replace`}
|
title={`Replace`}
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
confirmationText="Replace"
|
confirmationText="Replace"
|
||||||
size={"x-small"}
|
size={"x-small"}
|
||||||
icon={"SaveAll"}
|
icon={"SaveAll"}
|
||||||
index={6}
|
index={6}
|
||||||
onConfirm={() => {
|
onConfirm={() => {
|
||||||
handleUpdateComponent();
|
handleUpdateComponent();
|
||||||
}}
|
setOpenConfirmationModal(false);
|
||||||
onCancel={() => {}}
|
}}
|
||||||
>
|
onCancel={() => {
|
||||||
<ConfirmationModal.Content>
|
setOpenConfirmationModal(false);
|
||||||
<span>
|
}}
|
||||||
It seems {name} already exists. Do you want to replace it with
|
>
|
||||||
the current?
|
<ConfirmationModal.Content>
|
||||||
</span>
|
<span>
|
||||||
<br></br>
|
It seems {name} already exists. Do you want to replace it with the
|
||||||
<span className=" text-xs text-destructive ">
|
current?
|
||||||
Warning: This action cannot be undone.
|
</span>
|
||||||
</span>
|
<br></br>
|
||||||
</ConfirmationModal.Content>
|
<span className=" text-xs text-destructive ">
|
||||||
<ConfirmationModal.Trigger>
|
Warning: This action cannot be undone.
|
||||||
<div className="text-right">
|
</span>
|
||||||
<Button disabled={loadingNames} type="button">
|
</ConfirmationModal.Content>
|
||||||
{loadingNames ? (
|
<ConfirmationModal.Trigger>
|
||||||
<>
|
<></>
|
||||||
<div className="center w-16">
|
</ConfirmationModal.Trigger>
|
||||||
<Loader2 className="m-auto h-4 w-4 animate-spin"></Loader2>
|
</ConfirmationModal>
|
||||||
</div>
|
</>
|
||||||
</>
|
);
|
||||||
) : (
|
}, [
|
||||||
<>
|
unavaliableNames,
|
||||||
{is_component && !loadingNames ? "Save and " : ""}Share{" "}
|
name,
|
||||||
{!is_component && !loadingNames ? "Flow" : ""}
|
loadingNames,
|
||||||
</>
|
handleShareComponent,
|
||||||
)}
|
openConfirmationModal,
|
||||||
</Button>
|
]);
|
||||||
</div>
|
|
||||||
</ConfirmationModal.Trigger>
|
return (
|
||||||
</ConfirmationModal>
|
<>
|
||||||
) : (
|
<BaseModal
|
||||||
<>
|
size="smaller-h-full"
|
||||||
|
open={(!disabled && open) ?? internalOpen}
|
||||||
|
setOpen={setOpen ?? internalSetOpen}
|
||||||
|
>
|
||||||
|
<BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
|
||||||
|
<BaseModal.Header
|
||||||
|
description={`Share your ${nameComponent} to the Langflow Store.`}
|
||||||
|
>
|
||||||
|
<span className="pr-2">Share</span>
|
||||||
|
<IconComponent
|
||||||
|
name="Share2"
|
||||||
|
className="h-6 w-6 pl-1 text-foreground"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</BaseModal.Header>
|
||||||
|
<BaseModal.Content>
|
||||||
|
<EditFlowSettings
|
||||||
|
name={name}
|
||||||
|
invalidNameList={unavaliableNames.map((element) => element.name)}
|
||||||
|
description={description}
|
||||||
|
setName={setName}
|
||||||
|
setDescription={setDescription}
|
||||||
|
/>
|
||||||
|
<div className="mt-3 flex h-8 w-full">
|
||||||
|
<TagsSelector
|
||||||
|
tags={tags}
|
||||||
|
loadingTags={loadingTags}
|
||||||
|
disabled={false}
|
||||||
|
selectedTags={selectedTags}
|
||||||
|
setSelectedTags={setSelectedTags}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-5 flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="public"
|
||||||
|
checked={sharePublic}
|
||||||
|
onCheckedChange={(event: boolean) => {
|
||||||
|
setSharePublic(event);
|
||||||
|
setChecked(false);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label htmlFor="public" className="export-modal-save-api text-sm ">
|
||||||
|
Make {nameComponent} public
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="terms"
|
||||||
|
checked={checked}
|
||||||
|
onCheckedChange={(event: boolean) => {
|
||||||
|
setChecked(event);
|
||||||
|
}}
|
||||||
|
disabled={sharePublic}
|
||||||
|
/>
|
||||||
|
<label htmlFor="terms" className="export-modal-save-api text-sm ">
|
||||||
|
Save with my API keys
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<span className=" text-xs text-destructive ">
|
||||||
|
Warning: Deselecting this box will exclusively eliminate API keys
|
||||||
|
from fields explicitly designated for API keys.
|
||||||
|
</span>
|
||||||
|
</BaseModal.Content>
|
||||||
|
|
||||||
|
<BaseModal.Footer>
|
||||||
|
<div className="text-right">
|
||||||
<Button
|
<Button
|
||||||
disabled={loadingNames}
|
disabled={loadingNames}
|
||||||
onClick={() => {
|
|
||||||
handleShareComponent();
|
|
||||||
if (setOpen) setOpen(false);
|
|
||||||
else internalSetOpen(false);
|
|
||||||
}}
|
|
||||||
type="button"
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
const isNameAvailable = !unavaliableNames.some(
|
||||||
|
(element) => element.name === name
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isNameAvailable) {
|
||||||
|
handleShareComponent();
|
||||||
|
(setOpen || internalSetOpen)(false);
|
||||||
|
} else {
|
||||||
|
setOpenConfirmationModal(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{loadingNames ? (
|
{loadingNames ? (
|
||||||
<>
|
<>
|
||||||
|
|
@ -230,81 +302,10 @@ export default function ShareModal({
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</div>
|
||||||
)}
|
</BaseModal.Footer>
|
||||||
</>
|
</BaseModal>
|
||||||
);
|
<>{modalConfirmation}</>
|
||||||
}, [unavaliableNames, name, loadingNames, handleShareComponent]);
|
</>
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseModal
|
|
||||||
size="smaller-h-full"
|
|
||||||
open={(!disabled && open) ?? internalOpen}
|
|
||||||
setOpen={setOpen ?? internalSetOpen}
|
|
||||||
>
|
|
||||||
<BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>
|
|
||||||
<BaseModal.Header
|
|
||||||
description={`Share your ${nameComponent} to the Langflow Store.`}
|
|
||||||
>
|
|
||||||
<span className="pr-2">Share</span>
|
|
||||||
<IconComponent
|
|
||||||
name="Share2"
|
|
||||||
className="h-6 w-6 pl-1 text-foreground"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</BaseModal.Header>
|
|
||||||
<BaseModal.Content>
|
|
||||||
<EditFlowSettings
|
|
||||||
name={name}
|
|
||||||
invalidNameList={unavaliableNames.map((element) => element.name)}
|
|
||||||
description={description}
|
|
||||||
setName={setName}
|
|
||||||
setDescription={setDescription}
|
|
||||||
/>
|
|
||||||
<div className="mt-3 flex h-8 w-full">
|
|
||||||
<TagsSelector
|
|
||||||
tags={tags}
|
|
||||||
loadingTags={loadingTags}
|
|
||||||
disabled={false}
|
|
||||||
selectedTags={selectedTags}
|
|
||||||
setSelectedTags={setSelectedTags}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="public"
|
|
||||||
checked={sharePublic}
|
|
||||||
onCheckedChange={(event: boolean) => {
|
|
||||||
setSharePublic(event);
|
|
||||||
setChecked(false);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<label htmlFor="public" className="export-modal-save-api text-sm ">
|
|
||||||
Make {nameComponent} public
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3 flex items-center space-x-2">
|
|
||||||
<Checkbox
|
|
||||||
id="terms"
|
|
||||||
checked={checked}
|
|
||||||
onCheckedChange={(event: boolean) => {
|
|
||||||
setChecked(event);
|
|
||||||
}}
|
|
||||||
disabled={sharePublic}
|
|
||||||
/>
|
|
||||||
<label htmlFor="terms" className="export-modal-save-api text-sm ">
|
|
||||||
Save with my API keys
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<span className=" text-xs text-destructive ">
|
|
||||||
Warning: Deselecting this box will exclusively eliminate API keys from
|
|
||||||
fields explicitly designated for API keys.
|
|
||||||
</span>
|
|
||||||
</BaseModal.Content>
|
|
||||||
|
|
||||||
<BaseModal.Footer>
|
|
||||||
<>{modalConfirmationButton}</>
|
|
||||||
</BaseModal.Footer>
|
|
||||||
</BaseModal>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue