Skip to content

Commit

Permalink
Add delete modal.
Browse files Browse the repository at this point in the history
  • Loading branch information
robinjhuang committed Jan 9, 2025
1 parent 177352a commit 5ebcf83
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 21 deletions.
66 changes: 45 additions & 21 deletions components/nodes/NodeVDrawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { formatRelativeDate } from './NodeDetails'
import { toast } from 'react-toastify'
import { Button, Spinner } from 'flowbite-react'
import analytic from 'src/analytic/analytic'
import NodeVersionStatusBadge from './NodeVersionStatusBadge'
import { NodeVersionDeleteModal } from './NodeVersionDeleteModal'
type NodeVDrawerProps = {
isDrawerOpen: boolean
toggleDrawer: () => void
Expand Down Expand Up @@ -36,7 +36,9 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({

const isVersionAvailable = version && !version.deprecated
const updateNodeVersionMutation = useUpdateNodeVersion()
const handleToggle = () => {
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)

const handleToggleDeprecate = () => {
if (!version || !version.id) {
toast.error('Version not found')
return
Expand Down Expand Up @@ -81,6 +83,10 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({
)
}

if (!version || !version.id || !publisherId) {
return null
}

return (
<>
<div
Expand Down Expand Up @@ -114,37 +120,48 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({
</button>
</div>
<div>
<h5
{/* <h5
id="drawer-label"
className="inline-flex items-center mb-6 text-xl font-semibold text-white "
>
{version ? version.version : ''}{' '}
<div className="ml-1">
<NodeVersionStatusBadge status={version?.status} />
</div>
</h5>
</h5> */}

{version?.createdAt && (
<p className="text-gray-400">
Released {formatRelativeDate(version.createdAt)}
</p>
)}
{version?.downloadUrl && (
<Button
className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px] mt-5"
onClick={() => {
analytic.track('Download Node Version', {
version: version.version,
publisherId: publisherId,
nodeId: nodeId,
})
}}
>
<a href={version.downloadUrl}>
Download Version {version.version}
</a>
</Button>
)}

<div className="flex gap-4">
{version?.downloadUrl && (
<Button
className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px] mt-5"
onClick={() => {
analytic.track('Download Node Version', {
version: version.version,
publisherId: publisherId,
nodeId: nodeId,
})
}}
>
<a href={version.downloadUrl}>
Download Version {version.version}
</a>
</Button>
)}
{canEdit && (
<Button
className="flex-shrink-0 px-4 text-white bg-red-600 rounded whitespace-nowrap text-[16px] mt-5"
onClick={() => setIsDeleteModalOpen(true)}
>
Delete Version
</Button>
)}
</div>
<hr className="h-px my-8 bg-gray-700 border-0"></hr>

<div className="space-y-4">
Expand All @@ -165,7 +182,7 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({
type="checkbox"
checked={!isVersionAvailable}
className="sr-only peer"
onClick={handleToggle}
onClick={handleToggleDeprecate}
/>
<div className=" mt-[10px] relative w-11 h-6 bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-gray-400 after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
</label>
Expand All @@ -180,6 +197,13 @@ const NodeVDrawer: React.FC<NodeVDrawerProps> = ({
</div>
)}
</div>
<NodeVersionDeleteModal
openDeleteModal={isDeleteModalOpen}
onCloseDeleteModal={() => setIsDeleteModalOpen(false)}
nodeId={nodeId}
versionId={version.id}
publisherId={publisherId}
/>
</>
)
}
Expand Down
89 changes: 89 additions & 0 deletions components/nodes/NodeVersionDeleteModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react'
import { Button, Modal } from 'flowbite-react'
import { customThemeTModal } from 'utils/comfyTheme'
import { useDeleteNodeVersion } from 'src/api/generated'
import { toast } from 'react-toastify'
import { AxiosError } from 'axios'

type NodeVersionDeleteModalProps = {
openDeleteModal: boolean
onCloseDeleteModal: () => void
nodeId: string
versionId: string
publisherId: string
}

export const NodeVersionDeleteModal: React.FC<NodeVersionDeleteModalProps> = ({
openDeleteModal,
onCloseDeleteModal,
nodeId,
versionId,
publisherId,
}) => {
const deleteVersionMutation = useDeleteNodeVersion({})

const handleDeleteVersion = () => {
deleteVersionMutation.mutate(
{
nodeId: nodeId,
versionId: versionId,
publisherId: publisherId,
},
{
onError: (error) => {
if (error instanceof AxiosError) {
toast.error(
`Failed to delete version. ${error.response?.data?.message}`
)
} else {
toast.error('Failed to delete version')
}
},
onSuccess: () => {
toast.success('Version deleted successfully')
onCloseDeleteModal()
},
}
)
}

return (
<Modal
show={openDeleteModal}
size="md"
onClose={onCloseDeleteModal}
popup
//@ts-ignore
theme={customThemeTModal}
dismissible
>
<Modal.Body className="!bg-gray-800 p-8 md:px-9 md:py-8 rounded-none">
<Modal.Header className="!bg-gray-800 px-8">
<p className="text-white">Delete Version</p>
</Modal.Header>
<div className="space-y-6">
<p className="text-white">
Are you sure you want to delete this version? This
action cannot be undone.
</p>
<div className="flex">
<Button
color="gray"
className="w-full text-white bg-gray-800"
onClick={onCloseDeleteModal}
>
Cancel
</Button>
<Button
color="red"
className="w-full ml-5"
onClick={handleDeleteVersion}
>
Delete
</Button>
</div>
</div>
</Modal.Body>
</Modal>
)
}

0 comments on commit 5ebcf83

Please sign in to comment.