+
{t('Add unclaimed node')}
+
+
+ {t('ID')}
+
+ {duplicatedNode?.id?.replace(/^(?!$)/, t('Duplicated node: '))}
+
+ {errors.id?.message}
+
+
+ {/*
Publisher
*/}
-
- {t('Name')}
-
- {similarNodes?.nodes
- ?.map((node) => `${node.id} ${node.name}`)
- .join('\n')
- .replace(
- /^(?!$)/,
- t('Warning: found some similar nodes: \n')
- )}
-
-
- {errors.name?.message}
-
-
-
-
- {t('Description')}
-
-
- {errors.description?.message}
-
-
-
-
- {t('Category')}
-
- {errors.category?.message}
-
-
-
-
- {t('Author')}
-
- {errors.author?.message}
-
-
-
-
- {t('Repository')}
-
- {errors.repository?.message}
-
-
-
-
- {t('License')}
-
- {errors.license?.message}
-
-
-
-
-
-
-
-
-
-
- )
+
+ {t('Name')}
+
+ {similarNodes?.nodes
+ ?.map((node) => `${node.id} ${node.name}`)
+ .join('\n')
+ .replace(/^(?!$)/, t('Warning: found some similar nodes: \n'))}
+
+ {errors.name?.message}
+
+
+
+ {t('Description')}
+
+ {errors.description?.message}
+
+
+
+ {t('Category')}
+ {errors.category?.message}
+
+
+
+ {t('Author')}
+ {errors.author?.message}
+
+
+
+ {t('Repository')}
+ {errors.repository?.message}
+
+
+
+ {t('License')}
+ {errors.license?.message}
+
+
+
+
+
+
+
+
+
+ )
}
diff --git a/components/nodes/AdminNodeClaimModal.stories.tsx b/components/nodes/AdminNodeClaimModal.stories.tsx
index 912e0ca1..6f63ca96 100644
--- a/components/nodes/AdminNodeClaimModal.stories.tsx
+++ b/components/nodes/AdminNodeClaimModal.stories.tsx
@@ -6,29 +6,29 @@ import { Node, Publisher } from '@/src/api/generated'
// Mock function for actions
const meta: Meta
= {
- title: 'Components/Nodes/AdminNodeClaimModal',
- component: AdminNodeClaimModal,
- parameters: {
- layout: 'centered',
- backgrounds: { default: 'dark' },
- },
- tags: ['autodocs'],
- decorators: [
- (Story) => {
- const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- retry: false,
- },
- },
- })
- return (
-
-
- )
+ title: 'Components/Nodes/AdminNodeClaimModal',
+ component: AdminNodeClaimModal,
+ parameters: {
+ layout: 'centered',
+ backgrounds: { default: 'dark' },
+ },
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => {
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
},
- ],
+ })
+ return (
+
+
+ )
+ },
+ ],
}
export default meta
@@ -36,36 +36,36 @@ type Story = StoryObj
// Sample node data
const sampleNode: Node = {
- id: 'sample-node-1',
- name: 'Sample Custom Node',
- description: 'A sample ComfyUI custom node for testing purposes',
- icon: 'https://via.placeholder.com/200',
- downloads: 1250,
- rating: 4.5,
- repository: 'https://github.com/sample-user/sample-comfy-node',
- publisher: {
- id: 'unclaimed-admin',
- name: 'Unclaimed Admin',
- },
+ id: 'sample-node-1',
+ name: 'Sample Custom Node',
+ description: 'A sample ComfyUI custom node for testing purposes',
+ icon: 'https://via.placeholder.com/200',
+ downloads: 1250,
+ rating: 4.5,
+ repository: 'https://github.com/sample-user/sample-comfy-node',
+ publisher: {
+ id: 'unclaimed-admin',
+ name: 'Unclaimed Admin',
+ },
}
// Sample publishers data
const samplePublishers: Publisher[] = [
- {
- id: 'publisher-1',
- name: 'ComfyUI Publisher',
- description: 'Official ComfyUI publisher',
- },
- {
- id: 'publisher-2',
- name: 'Community Publisher',
- description: 'Community-driven publisher',
- },
- {
- id: 'long-publisher-name',
- name: 'Very Long Publisher Name That Should Be Handled Properly',
- description: 'Testing long names',
- },
+ {
+ id: 'publisher-1',
+ name: 'ComfyUI Publisher',
+ description: 'Official ComfyUI publisher',
+ },
+ {
+ id: 'publisher-2',
+ name: 'Community Publisher',
+ description: 'Community-driven publisher',
+ },
+ {
+ id: 'long-publisher-name',
+ name: 'Very Long Publisher Name That Should Be Handled Properly',
+ description: 'Testing long names',
+ },
]
// Create mock data for the component
@@ -74,60 +74,60 @@ const samplePublishers: Publisher[] = [
// For this component, we'll need to set up MSW handlers in the stories
export const Default: Story = {
- args: {
- isOpen: true,
- onClose: () => {},
- node: sampleNode,
- onSuccess: () => {},
- },
+ args: {
+ isOpen: true,
+ onClose: () => {},
+ node: sampleNode,
+ onSuccess: () => {},
+ },
}
export const WithLongNodeName: Story = {
- args: {
- isOpen: true,
- onClose: () => {},
- node: {
- ...sampleNode,
- name: 'Very Long Node Name That Should Be Handled Properly In The Modal',
- id: 'very-long-node-id-that-should-also-be-handled-properly',
- },
- onSuccess: () => {},
+ args: {
+ isOpen: true,
+ onClose: () => {},
+ node: {
+ ...sampleNode,
+ name: 'Very Long Node Name That Should Be Handled Properly In The Modal',
+ id: 'very-long-node-id-that-should-also-be-handled-properly',
},
+ onSuccess: () => {},
+ },
}
export const WithoutRepository: Story = {
- args: {
- isOpen: true,
- onClose: () => {},
- node: {
- ...sampleNode,
- repository: undefined,
- },
- onSuccess: () => {},
+ args: {
+ isOpen: true,
+ onClose: () => {},
+ node: {
+ ...sampleNode,
+ repository: undefined,
},
+ onSuccess: () => {},
+ },
}
export const LoadingPublishers: Story = {
- args: {
- isOpen: true,
- onClose: () => {},
- node: sampleNode,
- onSuccess: () => {},
- },
- parameters: {
- msw: {
- handlers: [
- // Mock loading state
- ],
- },
+ args: {
+ isOpen: true,
+ onClose: () => {},
+ node: sampleNode,
+ onSuccess: () => {},
+ },
+ parameters: {
+ msw: {
+ handlers: [
+ // Mock loading state
+ ],
},
+ },
}
export const Closed: Story = {
- args: {
- isOpen: false,
- onClose: () => {},
- node: sampleNode,
- onSuccess: () => {},
- },
+ args: {
+ isOpen: false,
+ onClose: () => {},
+ node: sampleNode,
+ onSuccess: () => {},
+ },
}
diff --git a/components/nodes/AdminNodeClaimModal.tsx b/components/nodes/AdminNodeClaimModal.tsx
index c2889bce..13967f4e 100644
--- a/components/nodes/AdminNodeClaimModal.tsx
+++ b/components/nodes/AdminNodeClaimModal.tsx
@@ -5,471 +5,447 @@ import { HiExternalLink, HiOutlineCheck, HiOutlineSearch } from 'react-icons/hi'
import { toast } from 'react-toastify'
import { customThemeTModal } from 'utils/comfyTheme'
import {
- INVALIDATE_CACHE_OPTION,
- shouldInvalidate,
+ INVALIDATE_CACHE_OPTION,
+ shouldInvalidate,
} from '@/components/cache-control'
import {
- getGetNodeQueryKey,
- getListNodesForPublisherV2QueryKey,
- getSearchNodesQueryKey,
- Node,
- Publisher,
- useListPublishers,
- useUpdateNode,
+ getGetNodeQueryKey,
+ getListNodesForPublisherV2QueryKey,
+ getSearchNodesQueryKey,
+ Node,
+ Publisher,
+ useListPublishers,
+ useUpdateNode,
} from '@/src/api/generated'
import { UNCLAIMED_ADMIN_PUBLISHER_ID } from '@/src/constants'
import { useNextTranslation } from '@/src/hooks/i18n'
import { PublisherId } from '../Search/PublisherId'
interface NodeClaimModalProps {
- isOpen: boolean
- onClose: () => void
- node: Node
- onSuccess?: () => void
+ isOpen: boolean
+ onClose: () => void
+ node: Node
+ onSuccess?: () => void
}
export function AdminNodeClaimModal({
- isOpen,
- onClose,
- node,
- onSuccess,
+ isOpen,
+ onClose,
+ node,
+ onSuccess,
}: NodeClaimModalProps) {
- const { t } = useNextTranslation()
- const queryClient = useQueryClient()
- const [selectedPublisher, setSelectedPublisher] =
- useState(null)
- const [searchTerm, setSearchTerm] = useState('')
- const [isVerifying, setIsVerifying] = useState(false)
- const [verificationResult, setVerificationResult] = useState<{
- publisherId?: string
- error?: string
- message?: string
- verified?: boolean
- } | null>(null)
+ const { t } = useNextTranslation()
+ const queryClient = useQueryClient()
+ const [selectedPublisher, setSelectedPublisher] = useState(
+ null
+ )
+ const [searchTerm, setSearchTerm] = useState('')
+ const [isVerifying, setIsVerifying] = useState(false)
+ const [verificationResult, setVerificationResult] = useState<{
+ publisherId?: string
+ error?: string
+ message?: string
+ verified?: boolean
+ } | null>(null)
- // Reset state when modal opens/closes
- useEffect(() => {
- if (!isOpen) {
- setSelectedPublisher(null)
- setSearchTerm('')
- setIsVerifying(false)
- setVerificationResult(null)
- }
- }, [isOpen])
+ // Reset state when modal opens/closes
+ useEffect(() => {
+ if (!isOpen) {
+ setSelectedPublisher(null)
+ setSearchTerm('')
+ setIsVerifying(false)
+ setVerificationResult(null)
+ }
+ }, [isOpen])
- // Fetch publishers list
- const { data: allPublishers, isLoading: isLoadingPublishers } =
- useListPublishers()
+ // Fetch publishers list
+ const { data: allPublishers, isLoading: isLoadingPublishers } =
+ useListPublishers()
- // Filter publishers based on search term
- const filteredPublishers =
- allPublishers?.filter(
- (publisher) =>
- publisher.name
- ?.toLowerCase()
- .includes(searchTerm.toLowerCase()) ||
- publisher.id?.toLowerCase().includes(searchTerm.toLowerCase())
- ) || []
+ // Filter publishers based on search term
+ const filteredPublishers =
+ allPublishers?.filter(
+ (publisher) =>
+ publisher.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ publisher.id?.toLowerCase().includes(searchTerm.toLowerCase())
+ ) || []
- // Setup mutation for updating node
- const updateNodeMutation = useUpdateNode({
- mutation: {
- onSuccess: () => {
- toast.success(
- t(
- 'Node {{name}} successfully claimed by {{publisherName}}',
- {
- name: node.name,
- publisherName: selectedPublisher?.name,
- }
- )
- )
- // Cache-busting invalidation for cached endpoints
- queryClient.fetchQuery(
- shouldInvalidate.getGetNodeQueryOptions(
- node.id!,
- undefined,
- INVALIDATE_CACHE_OPTION
- )
- )
+ // Setup mutation for updating node
+ const updateNodeMutation = useUpdateNode({
+ mutation: {
+ onSuccess: () => {
+ toast.success(
+ t('Node {{name}} successfully claimed by {{publisherName}}', {
+ name: node.name,
+ publisherName: selectedPublisher?.name,
+ })
+ )
+ // Cache-busting invalidation for cached endpoints
+ queryClient.fetchQuery(
+ shouldInvalidate.getGetNodeQueryOptions(
+ node.id!,
+ undefined,
+ INVALIDATE_CACHE_OPTION
+ )
+ )
- // Invalidate unclaimed nodes list (UNCLAIMED_ADMIN_PUBLISHER_ID)
- queryClient.invalidateQueries({
- queryKey: getListNodesForPublisherV2QueryKey(
- UNCLAIMED_ADMIN_PUBLISHER_ID
- ),
- refetchType: 'all',
- })
+ // Invalidate unclaimed nodes list (UNCLAIMED_ADMIN_PUBLISHER_ID)
+ queryClient.invalidateQueries({
+ queryKey: getListNodesForPublisherV2QueryKey(
+ UNCLAIMED_ADMIN_PUBLISHER_ID
+ ),
+ refetchType: 'all',
+ })
- // Invalidate the new publisher's nodes list
- if (selectedPublisher?.id) {
- queryClient.invalidateQueries({
- queryKey: getListNodesForPublisherV2QueryKey(
- selectedPublisher.id
- ),
- refetchType: 'all',
- })
- }
+ // Invalidate the new publisher's nodes list
+ if (selectedPublisher?.id) {
+ queryClient.invalidateQueries({
+ queryKey: getListNodesForPublisherV2QueryKey(selectedPublisher.id),
+ refetchType: 'all',
+ })
+ }
- // Invalidate search results which might include this node
- queryClient.invalidateQueries({
- queryKey: getSearchNodesQueryKey().slice(0, 1),
- refetchType: 'all',
- })
+ // Invalidate search results which might include this node
+ queryClient.invalidateQueries({
+ queryKey: getSearchNodesQueryKey().slice(0, 1),
+ refetchType: 'all',
+ })
- onSuccess?.()
- onClose()
- },
- onError: (error) => {
- toast.error(
- t('Failed to update node: {{error}}', {
- error:
- String(error?.message || error) ||
- t('Unknown error'),
- })
- )
- },
- },
- })
+ onSuccess?.()
+ onClose()
+ },
+ onError: (error) => {
+ toast.error(
+ t('Failed to update node: {{error}}', {
+ error: String(error?.message || error) || t('Unknown error'),
+ })
+ )
+ },
+ },
+ })
- // Verify repository to check publisher ID
- const verifyRepository = async () => {
- if (!selectedPublisher) {
- toast.error(t('Please select a publisher first'))
- return
- }
- if (!node.repository) {
- toast.error(t('No repository URL available for this node'))
- return
- }
+ // Verify repository to check publisher ID
+ const verifyRepository = async () => {
+ if (!selectedPublisher) {
+ toast.error(t('Please select a publisher first'))
+ return
+ }
+ if (!node.repository) {
+ toast.error(t('No repository URL available for this node'))
+ return
+ }
- setIsVerifying(true)
- setVerificationResult(null)
+ setIsVerifying(true)
+ setVerificationResult(null)
- try {
- // Extract GitHub owner/repo from repository URL
- const repoUrl = node.repository
- const match = repoUrl.match(
- /https:\/\/github\.com\/([^/]+)\/([^/]+)/
- )
+ try {
+ // Extract GitHub owner/repo from repository URL
+ const repoUrl = node.repository
+ const match = repoUrl.match(/https:\/\/github\.com\/([^/]+)\/([^/]+)/)
- if (!match) {
- setVerificationResult({
- error: t('Invalid repository URL format'),
- })
- return
- }
+ if (!match) {
+ setVerificationResult({
+ error: t('Invalid repository URL format'),
+ })
+ return
+ }
- const [, owner, repo] = match
- if (!owner || !repo) {
- setVerificationResult({
- error: t('Could not extract owner and repo from URL'),
- })
- return
- }
+ const [, owner, repo] = match
+ if (!owner || !repo) {
+ setVerificationResult({
+ error: t('Could not extract owner and repo from URL'),
+ })
+ return
+ }
- // Try to fetch pyproject.toml
- const file = 'pyproject.toml'
+ // Try to fetch pyproject.toml
+ const file = 'pyproject.toml'
- // Use object to store results that we'll get from the loop
- const result = {
- publisherId: null as string | null,
- fileContent: null as string | null,
- foundFile: null as string | null,
- }
+ // Use object to store results that we'll get from the loop
+ const result = {
+ publisherId: null as string | null,
+ fileContent: null as string | null,
+ foundFile: null as string | null,
+ }
- try {
- const fileUrl = `https://raw.githubusercontent.com/${owner}/${repo}/main/${file}`
- const response = await fetch(fileUrl)
+ try {
+ const fileUrl = `https://raw.githubusercontent.com/${owner}/${repo}/main/${file}`
+ const response = await fetch(fileUrl)
- if (response.ok) {
- result.fileContent = await response.text()
- result.foundFile = file
- } else {
- toast.error(
- `Failed to fetch ${file}: ${response.status} ${response.statusText}`
- )
- return
- }
- } catch (error) {
- toast.error(
- `Error fetching ${file}: ${error instanceof Error ? error.message : String(error)}`
- )
- return
- }
+ if (response.ok) {
+ result.fileContent = await response.text()
+ result.foundFile = file
+ } else {
+ toast.error(
+ `Failed to fetch ${file}: ${response.status} ${response.statusText}`
+ )
+ return
+ }
+ } catch (error) {
+ toast.error(
+ `Error fetching ${file}: ${error instanceof Error ? error.message : String(error)}`
+ )
+ return
+ }
- if (!result.fileContent) {
- setVerificationResult({
- error: t('Could not find pyproject configuration files'),
- })
- return
- }
+ if (!result.fileContent) {
+ setVerificationResult({
+ error: t('Could not find pyproject configuration files'),
+ })
+ return
+ }
- // Simple parsing to find publisher ID
- // This is a basic implementation - YAML/TOML parsing would be more robust
- const publisherIdMatches = [
- ...result.fileContent.matchAll(
- /publisher_?id\s*[=:]\s*["']?([^"'\s]+)["']?/gi
- ),
- ]
- if (publisherIdMatches.length === 0) {
- setVerificationResult({
- error: t('Could not find publisher ID in pyproject.toml'),
- })
- return
- }
- if (publisherIdMatches.length > 1) {
- setVerificationResult({
- error: `Found multiple publisher IDs in pyproject.toml: ${publisherIdMatches.map((m) => m[1]).join(', ')}`,
- })
- return
- }
- const publisherIdMatch = publisherIdMatches[0]
- result.publisherId = publisherIdMatch[1]
+ // Simple parsing to find publisher ID
+ // This is a basic implementation - YAML/TOML parsing would be more robust
+ const publisherIdMatches = [
+ ...result.fileContent.matchAll(
+ /publisher_?id\s*[=:]\s*["']?([^"'\s]+)["']?/gi
+ ),
+ ]
+ if (publisherIdMatches.length === 0) {
+ setVerificationResult({
+ error: t('Could not find publisher ID in pyproject.toml'),
+ })
+ return
+ }
+ if (publisherIdMatches.length > 1) {
+ setVerificationResult({
+ error: `Found multiple publisher IDs in pyproject.toml: ${publisherIdMatches.map((m) => m[1]).join(', ')}`,
+ })
+ return
+ }
+ const publisherIdMatch = publisherIdMatches[0]
+ result.publisherId = publisherIdMatch[1]
- const matchesSelected = result.publisherId === selectedPublisher.id
+ const matchesSelected = result.publisherId === selectedPublisher.id
- setVerificationResult({
- publisherId: result.publisherId,
- message: matchesSelected
- ? `✅ Publisher ID in repository matches selected publisher @${result.publisherId}`
- : `❌ Found publisher ID in repository pyproject.toml: @${result.publisherId}, but it does not match the selected publisher @${selectedPublisher?.id}`,
- error: matchesSelected
- ? undefined
- : t(
- 'Publisher ID in repository does not match selected publisher'
- ),
- verified: !!matchesSelected,
- })
- } catch (error) {
- setVerificationResult({
- error: `Failed to verify repository: ${
- error instanceof Error ? error.message : String(error)
- }`,
- })
- } finally {
- setIsVerifying(false)
- }
+ setVerificationResult({
+ publisherId: result.publisherId,
+ message: matchesSelected
+ ? `✅ Publisher ID in repository matches selected publisher @${result.publisherId}`
+ : `❌ Found publisher ID in repository pyproject.toml: @${result.publisherId}, but it does not match the selected publisher @${selectedPublisher?.id}`,
+ error: matchesSelected
+ ? undefined
+ : t('Publisher ID in repository does not match selected publisher'),
+ verified: !!matchesSelected,
+ })
+ } catch (error) {
+ setVerificationResult({
+ error: `Failed to verify repository: ${
+ error instanceof Error ? error.message : String(error)
+ }`,
+ })
+ } finally {
+ setIsVerifying(false)
}
+ }
- // Handle claiming the node
- const handleClaimNode = async () => {
- if (!selectedPublisher?.id) {
- toast.error(t('Please select a publisher'))
- return
- }
- if (node.publisher?.id !== UNCLAIMED_ADMIN_PUBLISHER_ID) {
- toast.error(`Node ${node.id} is not Unclaimed`)
- return
- }
- try {
- await updateNodeMutation.mutateAsync({
- nodeId: node.id!,
- publisherId: UNCLAIMED_ADMIN_PUBLISHER_ID,
- data: { publisher: selectedPublisher },
- })
- } catch (error) {
- // Error is handled in the mutation's onError
- toast.error(
- t('An unexpected error occurred while claiming the node.')
- )
- }
+ // Handle claiming the node
+ const handleClaimNode = async () => {
+ if (!selectedPublisher?.id) {
+ toast.error(t('Please select a publisher'))
+ return
+ }
+ if (node.publisher?.id !== UNCLAIMED_ADMIN_PUBLISHER_ID) {
+ toast.error(`Node ${node.id} is not Unclaimed`)
+ return
}
+ try {
+ await updateNodeMutation.mutateAsync({
+ nodeId: node.id!,
+ publisherId: UNCLAIMED_ADMIN_PUBLISHER_ID,
+ data: { publisher: selectedPublisher },
+ })
+ } catch (error) {
+ // Error is handled in the mutation's onError
+ toast.error(t('An unexpected error occurred while claiming the node.'))
+ }
+ }
+
+ return (
+
+
+ {t('Edit unclaimed node')}
+
+
+
+
+
+
+ {t('Node')}: {node.name}
+
+
+ {t('ID')}: {node.id}
+
+
+
+ {t('View')}
+
+
+
+
+ {t('Select Publisher')}:
+
+
+
setSearchTerm(e.target.value)}
+ />
+
+
+
+
- return (
-
-
- {t('Edit unclaimed node')}
-
-
-
+
+ {isLoadingPublishers ? (
+
+
+ ) : filteredPublishers.length === 0 ? (
+
+ {t('No publishers found')}
+
+ ) : (
+
+
+
+ )
}
diff --git a/components/nodes/NodeDeleteModal.tsx b/components/nodes/NodeDeleteModal.tsx
index be5111cf..d7e0196b 100644
--- a/components/nodes/NodeDeleteModal.tsx
+++ b/components/nodes/NodeDeleteModal.tsx
@@ -10,123 +10,119 @@ import { useNextTranslation } from '@/src/hooks/i18n'
import { INVALIDATE_CACHE_OPTION, shouldInvalidate } from '../cache-control'
type NodeDeleteModalProps = {
- openDeleteModal: boolean
- onClose: () => void
- nodeId: string
- publisherId?: string
+ openDeleteModal: boolean
+ onClose: () => void
+ nodeId: string
+ publisherId?: string
}
export const NodeDeleteModal: React.FC
= ({
- openDeleteModal,
- onClose,
- nodeId,
- publisherId,
+ openDeleteModal,
+ onClose,
+ nodeId,
+ publisherId,
}) => {
- const { t } = useNextTranslation()
- const mutation = useDeleteNode({})
- const router = useRouter()
- const qc = useQueryClient()
- const handleSubmit = async () => {
- if (!publisherId) {
- toast.error(t('Cannot delete node.'))
- return
- }
- return mutation.mutate(
- {
- nodeId: nodeId,
- publisherId: publisherId,
- },
- {
- onError: (error) => {
- if (error instanceof AxiosError) {
- toast.error(
- t(`Failed to delete node. {{message}}`, {
- message: error.response?.data?.message,
- })
- )
- } else {
- toast.error(t('Failed to delete node'))
- }
- },
- onSuccess: () => {
- toast.success(t('Node deleted successfully'))
- qc.fetchQuery(
- shouldInvalidate.getGetNodeQueryOptions(
- nodeId,
- undefined,
- INVALIDATE_CACHE_OPTION
- )
- )
- onClose()
- router.push('/nodes')
- },
- }
- )
+ const { t } = useNextTranslation()
+ const mutation = useDeleteNode({})
+ const router = useRouter()
+ const qc = useQueryClient()
+ const handleSubmit = async () => {
+ if (!publisherId) {
+ toast.error(t('Cannot delete node.'))
+ return
}
+ return mutation.mutate(
+ {
+ nodeId: nodeId,
+ publisherId: publisherId,
+ },
+ {
+ onError: (error) => {
+ if (error instanceof AxiosError) {
+ toast.error(
+ t(`Failed to delete node. {{message}}`, {
+ message: error.response?.data?.message,
+ })
+ )
+ } else {
+ toast.error(t('Failed to delete node'))
+ }
+ },
+ onSuccess: () => {
+ toast.success(t('Node deleted successfully'))
+ qc.fetchQuery(
+ shouldInvalidate.getGetNodeQueryOptions(
+ nodeId,
+ undefined,
+ INVALIDATE_CACHE_OPTION
+ )
+ )
+ onClose()
+ router.push('/nodes')
+ },
+ }
+ )
+ }
- const validateText = `${publisherId}/${nodeId}`
- const [confirmationText, setConfirmationText] = useState('')
- return (
-
+
+
+ {t('Delete Node')}
+
+
- )
+
+ {t(
+ 'Are you sure you want to delete this node? This action cannot be undone.'
+ )}
+
+
+
+ {t('Type')}{' '}
+ {validateText}{' '}
+ {t('to confirm')}:
+
+ setConfirmationText(e.target.value)}
+ />
+
+
+
+ {t('Cancel')}
+
+
+ {t('Delete')}
+
+
+
+
+
+ )
}
diff --git a/components/nodes/NodeDetails.stories.tsx b/components/nodes/NodeDetails.stories.tsx
index 99dd3331..01f047e2 100644
--- a/components/nodes/NodeDetails.stories.tsx
+++ b/components/nodes/NodeDetails.stories.tsx
@@ -9,24 +9,24 @@ import { CAPI } from '@/src/mocks/apibase'
import { handlers } from '@/src/mocks/handlers'
const meta: Meta = {
- title: 'Components/Nodes/NodeDetails',
- component: NodeDetails,
- parameters: {
- layout: 'fullscreen',
- backgrounds: { default: 'dark' },
- msw: {
- handlers: handlers,
- },
- nextjs: {
- router: {
- query: { nodeId: 'example-comfyui-custom-node' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/1',
- isReady: true,
- },
- },
+ title: 'Components/Nodes/NodeDetails',
+ component: NodeDetails,
+ parameters: {
+ layout: 'fullscreen',
+ backgrounds: { default: 'dark' },
+ msw: {
+ handlers: handlers,
},
- tags: ['autodocs'],
+ nextjs: {
+ router: {
+ query: { nodeId: 'example-comfyui-custom-node' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/1',
+ isReady: true,
+ },
+ },
+ },
+ tags: ['autodocs'],
}
export default meta
@@ -34,500 +34,482 @@ type Story = StoryObj
// Mock Firebase user data
const mockFirebaseUser = {
- uid: 'firebase-user-123',
- email: 'user@example.com',
- displayName: 'Test User',
- photoURL: 'https://picsum.photos/40/40',
- emailVerified: true,
- isAnonymous: false,
- metadata: {},
- providerData: [],
- refreshToken: '',
- tenantId: null,
- delete: async () => undefined,
- getIdToken: async () => '',
- getIdTokenResult: async () => ({}) as any,
- reload: async () => undefined,
- toJSON: () => ({}),
- phoneNumber: null,
- providerId: 'google',
+ uid: 'firebase-user-123',
+ email: 'user@example.com',
+ displayName: 'Test User',
+ photoURL: 'https://picsum.photos/40/40',
+ emailVerified: true,
+ isAnonymous: false,
+ metadata: {},
+ providerData: [],
+ refreshToken: '',
+ tenantId: null,
+ delete: async () => undefined,
+ getIdToken: async () => '',
+ getIdTokenResult: async () => ({}) as any,
+ reload: async () => undefined,
+ toJSON: () => ({}),
+ phoneNumber: null,
+ providerId: 'google',
} satisfies FirebaseUser
export const Default: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'example-comfyui-custom-node' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/1',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(CAPI('/nodes/1'), () => {
- return HttpResponse.json({
- id: '1',
- name: 'Test Node',
- description:
- 'This is a test node for demonstration purposes',
- })
- }),
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'example-comfyui-custom-node' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/1',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ msw: {
+ handlers: [
+ http.get(CAPI('/nodes/1'), () => {
+ return HttpResponse.json({
+ id: '1',
+ name: 'Test Node',
+ description: 'This is a test node for demonstration purposes',
+ })
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const WithPublisherRoute: Story = {
- parameters: {
- nextjs: {
- router: {
- query: {
- publisherId: 'kosinkadink',
- nodeId: 'example-comfyui-custom-node',
- },
- pathname: '/publishers/[publisherId]/nodes/[nodeId]',
- asPath: '/publishers/kosinkadink/nodes/1',
- isReady: true,
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: {
+ publisherId: 'kosinkadink',
+ nodeId: 'example-comfyui-custom-node',
},
+ pathname: '/publishers/[publisherId]/nodes/[nodeId]',
+ asPath: '/publishers/kosinkadink/nodes/1',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
- },
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const Loading: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'example-comfyui-custom-node' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/1',
- isReady: false,
- },
- },
- },
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'example-comfyui-custom-node' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/1',
+ isReady: false,
+ },
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const NodeNotFound: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'nonexistent' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/nonexistent',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(CAPI('/nodes/nonexistent'), () => {
- return new HttpResponse(null, { status: 404 })
- }),
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'nonexistent' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/nonexistent',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ msw: {
+ handlers: [
+ http.get(CAPI('/nodes/nonexistent'), () => {
+ return new HttpResponse(null, { status: 404 })
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const UnclaimedNode: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'unclaimed' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/unclaimed',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(CAPI('/nodes/unclaimed'), () => {
- return HttpResponse.json({
- id: 'unclaimed',
- name: 'Unclaimed Node',
- description:
- 'This node has not been claimed by any publisher yet',
- author: 'Unknown',
- repository: 'https://github.com/example/unclaimed-node',
- downloads: 0,
- publisher: {
- id: UNCLAIMED_ADMIN_PUBLISHER_ID,
- name: 'Unclaimed Admin Publisher',
- display_name: 'Unclaimed',
- description: 'System publisher for unclaimed nodes',
- status: PublisherStatus.PublisherStatusActive,
- created_at: '2023-01-01T00:00:00Z',
- },
- status: NodeStatus.NodeStatusActive,
- created_at: '2023-01-01T00:00:00Z',
- updated_at: '2023-01-01T00:00:00Z',
- })
- }),
- http.get(CAPI('/nodes/unclaimed/versions'), () => {
- return HttpResponse.json([])
- }),
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'unclaimed' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/unclaimed',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ msw: {
+ handlers: [
+ http.get(CAPI('/nodes/unclaimed'), () => {
+ return HttpResponse.json({
+ id: 'unclaimed',
+ name: 'Unclaimed Node',
+ description: 'This node has not been claimed by any publisher yet',
+ author: 'Unknown',
+ repository: 'https://github.com/example/unclaimed-node',
+ downloads: 0,
+ publisher: {
+ id: UNCLAIMED_ADMIN_PUBLISHER_ID,
+ name: 'Unclaimed Admin Publisher',
+ display_name: 'Unclaimed',
+ description: 'System publisher for unclaimed nodes',
+ status: PublisherStatus.PublisherStatusActive,
+ created_at: '2023-01-01T00:00:00Z',
+ },
+ status: NodeStatus.NodeStatusActive,
+ created_at: '2023-01-01T00:00:00Z',
+ updated_at: '2023-01-01T00:00:00Z',
+ })
+ }),
+ http.get(CAPI('/nodes/unclaimed/versions'), () => {
+ return HttpResponse.json([])
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const AdminUser: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'example-comfyui-custom-node' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/1',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(
- CAPI('/publishers/:publisherId/nodes/:nodeId/permissions'),
- () => {
- return HttpResponse.json({
- canEdit: true,
- canDelete: true,
- canPublish: true,
- })
- }
- ),
- http.get(CAPI('/users'), () => {
- return HttpResponse.json({
- id: 'admin-user',
- name: 'Admin User',
- email: 'admin@example.com',
- isAdmin: true,
- isApproved: true,
- })
- }),
- http.get(CAPI('/users/publishers'), () => {
- return HttpResponse.json([
- {
- id: 'admin-publisher',
- name: 'Admin Publisher',
- display_name: 'Admin Publisher',
- description: 'Publisher for admin users',
- status: PublisherStatus.PublisherStatusActive,
- created_at: '2023-01-01T00:00:00Z',
- },
- ])
- }),
-
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'example-comfyui-custom-node' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/1',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as admin
- useFirebaseUser.mockReturnValue([
+ msw: {
+ handlers: [
+ http.get(
+ CAPI('/publishers/:publisherId/nodes/:nodeId/permissions'),
+ () => {
+ return HttpResponse.json({
+ canEdit: true,
+ canDelete: true,
+ canPublish: true,
+ })
+ }
+ ),
+ http.get(CAPI('/users'), () => {
+ return HttpResponse.json({
+ id: 'admin-user',
+ name: 'Admin User',
+ email: 'admin@example.com',
+ isAdmin: true,
+ isApproved: true,
+ })
+ }),
+ http.get(CAPI('/users/publishers'), () => {
+ return HttpResponse.json([
{
- ...mockFirebaseUser,
- email: 'admin@example.com',
- displayName: 'Admin User',
+ id: 'admin-publisher',
+ name: 'Admin Publisher',
+ display_name: 'Admin Publisher',
+ description: 'Publisher for admin users',
+ status: PublisherStatus.PublisherStatusActive,
+ created_at: '2023-01-01T00:00:00Z',
},
- false,
- undefined,
- ])
+ ])
+ }),
+
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as admin
+ useFirebaseUser.mockReturnValue([
+ {
+ ...mockFirebaseUser,
+ email: 'admin@example.com',
+ displayName: 'Admin User',
+ },
+ false,
+ undefined,
+ ])
+ },
}
export const NoPermissions: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'example-comfyui-custom-node' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/1',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(
- CAPI('/publishers/:publisherId/nodes/:nodeId/permissions'),
- () => {
- return HttpResponse.json({
- canEdit: false,
- canDelete: false,
- canPublish: false,
- })
- }
- ),
- http.get(CAPI('/users'), () => {
- return HttpResponse.json({
- id: 'regular-user',
- name: 'Regular User',
- email: 'user@example.com',
- isAdmin: false,
- isApproved: true,
- })
- }),
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'example-comfyui-custom-node' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/1',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as regular user with no permissions
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ msw: {
+ handlers: [
+ http.get(
+ CAPI('/publishers/:publisherId/nodes/:nodeId/permissions'),
+ () => {
+ return HttpResponse.json({
+ canEdit: false,
+ canDelete: false,
+ canPublish: false,
+ })
+ }
+ ),
+ http.get(CAPI('/users'), () => {
+ return HttpResponse.json({
+ id: 'regular-user',
+ name: 'Regular User',
+ email: 'user@example.com',
+ isAdmin: false,
+ isApproved: true,
+ })
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as regular user with no permissions
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const NodeWithoutIcon: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'no-icon' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/no-icon',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(CAPI('/nodes/no-icon'), () => {
- return HttpResponse.json({
- id: 'no-icon',
- name: 'Node Without Icon',
- description: 'This node does not have a custom icon',
- author: 'Test Author',
- repository: 'https://github.com/example/no-icon-node',
- downloads: 1234,
- publisher: {
- id: 'test-publisher',
- name: 'Test Publisher',
- display_name: 'Test Publisher',
- description: 'Test publisher description',
- status: PublisherStatus.PublisherStatusActive,
- created_at: '2023-01-01T00:00:00Z',
- },
- latest_version: {
- version: '1.0.0',
- downloadUrl:
- 'https://api.example.com/downloads/no-icon/v1.0.0.zip',
- },
- status: NodeStatus.NodeStatusActive,
- created_at: '2023-01-01T00:00:00Z',
- updated_at: '2023-01-01T00:00:00Z',
- })
- }),
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'no-icon' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/no-icon',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ msw: {
+ handlers: [
+ http.get(CAPI('/nodes/no-icon'), () => {
+ return HttpResponse.json({
+ id: 'no-icon',
+ name: 'Node Without Icon',
+ description: 'This node does not have a custom icon',
+ author: 'Test Author',
+ repository: 'https://github.com/example/no-icon-node',
+ downloads: 1234,
+ publisher: {
+ id: 'test-publisher',
+ name: 'Test Publisher',
+ display_name: 'Test Publisher',
+ description: 'Test publisher description',
+ status: PublisherStatus.PublisherStatusActive,
+ created_at: '2023-01-01T00:00:00Z',
+ },
+ latest_version: {
+ version: '1.0.0',
+ downloadUrl:
+ 'https://api.example.com/downloads/no-icon/v1.0.0.zip',
+ },
+ status: NodeStatus.NodeStatusActive,
+ created_at: '2023-01-01T00:00:00Z',
+ updated_at: '2023-01-01T00:00:00Z',
+ })
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const NodeWithManyVersions: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'many-versions' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/many-versions',
- isReady: true,
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'many-versions' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/many-versions',
+ isReady: true,
+ },
+ },
+ msw: {
+ handlers: [
+ http.get(CAPI('/nodes/many-versions'), () => {
+ return HttpResponse.json({
+ id: 'many-versions',
+ name: 'Node With Many Versions',
+ description: 'This node has multiple version releases',
+ author: 'Prolific Developer',
+ repository: 'https://github.com/example/many-versions-node',
+ downloads: 5000,
+ publisher: {
+ id: 'prolific-dev',
+ name: 'Prolific Developer',
+ description: 'Active node developer',
+ status: PublisherStatus.PublisherStatusActive,
},
- },
- msw: {
- handlers: [
- http.get(CAPI('/nodes/many-versions'), () => {
- return HttpResponse.json({
- id: 'many-versions',
- name: 'Node With Many Versions',
- description: 'This node has multiple version releases',
- author: 'Prolific Developer',
- repository:
- 'https://github.com/example/many-versions-node',
- downloads: 5000,
- publisher: {
- id: 'prolific-dev',
- name: 'Prolific Developer',
- description: 'Active node developer',
- status: PublisherStatus.PublisherStatusActive,
- },
- latest_version: {
- version: '5.2.1',
- downloadUrl:
- 'https://api.example.com/downloads/many-versions/v5.2.1.zip',
- },
- status: NodeStatus.NodeStatusActive,
- created_at: '2023-01-01T00:00:00Z',
- } satisfies Node)
- }),
- http.get(CAPI('/nodes/many-versions/versions'), () => {
- const versions = [
- {
- version: '5.2.1',
- changelog:
- 'Latest bug fixes and performance improvements',
- date: '2024-01-15T10:30:00Z',
- },
- {
- version: '5.2.0',
- changelog:
- 'Added new features and improved stability',
- date: '2024-01-01T14:20:00Z',
- },
- {
- version: '5.1.0',
- changelog:
- 'Major performance optimizations and bug fixes',
- date: '2023-12-15T09:45:00Z',
- },
- {
- version: '5.0.0',
- changelog:
- 'Breaking changes: Complete API rewrite for better performance',
- date: '2023-11-01T12:00:00Z',
- },
- {
- version: '4.9.2',
- changelog:
- 'Final release of v4 series - legacy support',
- date: '2023-10-15T08:30:00Z',
- },
- {
- version: '4.9.1',
- changelog:
- 'Critical security fixes and stability improvements',
- date: '2023-09-20T16:15:00Z',
- },
- {
- version: '4.9.0',
- changelog:
- 'New animation features and improved UI controls',
- date: '2023-08-10T11:45:00Z',
- },
- {
- version: '4.8.3',
- changelog:
- 'Bug fixes for memory leak and crash issues',
- date: '2023-07-25T09:20:00Z',
- },
- {
- version: '4.8.2',
- changelog:
- 'Performance optimizations for large datasets',
- date: '2023-06-30T14:10:00Z',
- },
- {
- version: '4.8.1',
- changelog: 'Hotfix for rendering pipeline issues',
- date: '2023-06-15T08:40:00Z',
- },
- {
- version: '4.8.0',
- changelog: 'Major update with new rendering engine',
- date: '2023-05-20T13:25:00Z',
- },
- {
- version: '4.7.5',
- changelog:
- 'Compatibility fixes for latest ComfyUI version',
- date: '2023-04-18T10:55:00Z',
- },
- {
- version: '4.7.4',
- changelog:
- 'Minor bug fixes and documentation updates',
- date: '2023-03-22T15:30:00Z',
- },
- {
- version: '4.7.3',
- changelog: 'Enhanced error handling and logging',
- date: '2023-02-28T12:15:00Z',
- },
- {
- version: '4.7.2',
- changelog: 'Fixed issues with batch processing',
- date: '2023-01-30T09:45:00Z',
- },
- {
- version: '4.7.1',
- changelog:
- 'Initial stable release with core features',
- date: '2023-01-15T14:20:00Z',
- },
- ]
+ latest_version: {
+ version: '5.2.1',
+ downloadUrl:
+ 'https://api.example.com/downloads/many-versions/v5.2.1.zip',
+ },
+ status: NodeStatus.NodeStatusActive,
+ created_at: '2023-01-01T00:00:00Z',
+ } satisfies Node)
+ }),
+ http.get(CAPI('/nodes/many-versions/versions'), () => {
+ const versions = [
+ {
+ version: '5.2.1',
+ changelog: 'Latest bug fixes and performance improvements',
+ date: '2024-01-15T10:30:00Z',
+ },
+ {
+ version: '5.2.0',
+ changelog: 'Added new features and improved stability',
+ date: '2024-01-01T14:20:00Z',
+ },
+ {
+ version: '5.1.0',
+ changelog: 'Major performance optimizations and bug fixes',
+ date: '2023-12-15T09:45:00Z',
+ },
+ {
+ version: '5.0.0',
+ changelog:
+ 'Breaking changes: Complete API rewrite for better performance',
+ date: '2023-11-01T12:00:00Z',
+ },
+ {
+ version: '4.9.2',
+ changelog: 'Final release of v4 series - legacy support',
+ date: '2023-10-15T08:30:00Z',
+ },
+ {
+ version: '4.9.1',
+ changelog: 'Critical security fixes and stability improvements',
+ date: '2023-09-20T16:15:00Z',
+ },
+ {
+ version: '4.9.0',
+ changelog: 'New animation features and improved UI controls',
+ date: '2023-08-10T11:45:00Z',
+ },
+ {
+ version: '4.8.3',
+ changelog: 'Bug fixes for memory leak and crash issues',
+ date: '2023-07-25T09:20:00Z',
+ },
+ {
+ version: '4.8.2',
+ changelog: 'Performance optimizations for large datasets',
+ date: '2023-06-30T14:10:00Z',
+ },
+ {
+ version: '4.8.1',
+ changelog: 'Hotfix for rendering pipeline issues',
+ date: '2023-06-15T08:40:00Z',
+ },
+ {
+ version: '4.8.0',
+ changelog: 'Major update with new rendering engine',
+ date: '2023-05-20T13:25:00Z',
+ },
+ {
+ version: '4.7.5',
+ changelog: 'Compatibility fixes for latest ComfyUI version',
+ date: '2023-04-18T10:55:00Z',
+ },
+ {
+ version: '4.7.4',
+ changelog: 'Minor bug fixes and documentation updates',
+ date: '2023-03-22T15:30:00Z',
+ },
+ {
+ version: '4.7.3',
+ changelog: 'Enhanced error handling and logging',
+ date: '2023-02-28T12:15:00Z',
+ },
+ {
+ version: '4.7.2',
+ changelog: 'Fixed issues with batch processing',
+ date: '2023-01-30T09:45:00Z',
+ },
+ {
+ version: '4.7.1',
+ changelog: 'Initial stable release with core features',
+ date: '2023-01-15T14:20:00Z',
+ },
+ ]
- return HttpResponse.json(
- versions.map((v, index) => ({
- id: `v${index + 1}`,
- version: v.version,
- changelog: v.changelog,
- createdAt: v.date,
- status: 'active',
- downloadUrl: `https://api.example.com/downloads/many-versions/v${v.version}.zip`,
- }))
- )
- }),
- ...handlers,
- ],
- },
- },
- beforeEach: () => {
- // Mock Firebase user as logged in
- useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ return HttpResponse.json(
+ versions.map((v, index) => ({
+ id: `v${index + 1}`,
+ version: v.version,
+ changelog: v.changelog,
+ createdAt: v.date,
+ status: 'active',
+ downloadUrl: `https://api.example.com/downloads/many-versions/v${v.version}.zip`,
+ }))
+ )
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged in
+ useFirebaseUser.mockReturnValue([mockFirebaseUser, false, undefined])
+ },
}
export const LoggedOut: Story = {
- parameters: {
- nextjs: {
- router: {
- query: { nodeId: 'example-comfyui-custom-node' },
- pathname: '/nodes/[nodeId]',
- asPath: '/nodes/1',
- isReady: true,
- },
- },
- msw: {
- handlers: [
- http.get(CAPI('/nodes/1'), () => {
- return HttpResponse.json({
- id: '1',
- name: 'Test Node',
- description:
- 'This is a test node for demonstration purposes',
- })
- }),
- http.get(CAPI('/users'), () => {
- return HttpResponse.json(
- { error: 'Unauthorized' },
- { status: 401 }
- )
- }),
- ...handlers,
- ],
- },
+ parameters: {
+ nextjs: {
+ router: {
+ query: { nodeId: 'example-comfyui-custom-node' },
+ pathname: '/nodes/[nodeId]',
+ asPath: '/nodes/1',
+ isReady: true,
+ },
},
- beforeEach: () => {
- // Mock Firebase user as logged out
- useFirebaseUser.mockReturnValue([null, false, undefined])
+ msw: {
+ handlers: [
+ http.get(CAPI('/nodes/1'), () => {
+ return HttpResponse.json({
+ id: '1',
+ name: 'Test Node',
+ description: 'This is a test node for demonstration purposes',
+ })
+ }),
+ http.get(CAPI('/users'), () => {
+ return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 })
+ }),
+ ...handlers,
+ ],
},
+ },
+ beforeEach: () => {
+ // Mock Firebase user as logged out
+ useFirebaseUser.mockReturnValue([null, false, undefined])
+ },
}
diff --git a/components/nodes/NodeDetails.tsx b/components/nodes/NodeDetails.tsx
index ae6de605..9b111e91 100644
--- a/components/nodes/NodeDetails.tsx
+++ b/components/nodes/NodeDetails.tsx
@@ -9,20 +9,20 @@ import { HiTrash } from 'react-icons/hi'
import { MdEdit, MdOpenInNew } from 'react-icons/md'
import analytic from 'src/analytic/analytic'
import {
- REQUEST_OPTIONS_NO_CACHE,
- UNCLAIMED_ADMIN_PUBLISHER_ID,
+ REQUEST_OPTIONS_NO_CACHE,
+ UNCLAIMED_ADMIN_PUBLISHER_ID,
} from 'src/constants'
import {
- NodeVersion,
- NodeVersionStatus,
- useGetNode,
- useGetPermissionOnPublisherNodes,
- useGetUser,
- useListNodeVersions,
- useListPublishersForUser,
+ NodeVersion,
+ NodeVersionStatus,
+ useGetNode,
+ useGetPermissionOnPublisherNodes,
+ useGetUser,
+ useListNodeVersions,
+ useListPublishersForUser,
} from '@/src/api/generated'
import nodesLogo from '@/src/assets/images/nodesLogo.svg'
-import { useNextTranslation } from '@/src/hooks/i18n'
+import { useDynamicTranslate, useNextTranslation } from '@/src/hooks/i18n'
import CopyableCodeBlock from '../CodeBlock/CodeBlock'
import { NodeDeleteModal } from './NodeDeleteModal'
import { NodeEditModal } from './NodeEditModal'
@@ -32,312 +32,290 @@ import PreemptedComfyNodeNamesEditModal from './PreemptedComfyNodeNamesEditModal
import SearchRankingEditModal from './SearchRankingEditModal'
export function FormatRelativeDate({ date: dateString }: { date: string }) {
- const { t } = useNextTranslation()
- const date = new Date(dateString)
- const now = new Date()
- const oneDay = 24 * 60 * 60 * 1000 // milliseconds in one day
- const difference = now.getTime() - date.getTime() // difference in milliseconds
- const daysAgo = Math.floor(difference / oneDay)
-
- if (daysAgo < 7) {
- if (daysAgo === 0) {
- return <>{t('Today')}
- } else if (daysAgo === 1) {
- return <>{t('Yesterday')}
- } else {
- return <>{t('{{days}} days ago', { days: daysAgo })}
- }
+ const { t } = useNextTranslation()
+ const date = new Date(dateString)
+ const now = new Date()
+ const oneDay = 24 * 60 * 60 * 1000 // milliseconds in one day
+ const difference = now.getTime() - date.getTime() // difference in milliseconds
+ const daysAgo = Math.floor(difference / oneDay)
+
+ if (daysAgo < 7) {
+ if (daysAgo === 0) {
+ return <>{t('Today')}
+ } else if (daysAgo === 1) {
+ return <>{t('Yesterday')}
} else {
- // Formatting to YYYY-MM-DD
- const year = date.getFullYear()
- const month = (date.getMonth() + 1).toString().padStart(2, '0')
- const day = date.getDate().toString().padStart(2, '0')
- return <>{`${year}-${month}-${day}`}
+ return <>{t('{{days}} days ago', { days: daysAgo })}
}
+ } else {
+ // Formatting to YYYY-MM-DD
+ const year = date.getFullYear()
+ const month = (date.getMonth() + 1).toString().padStart(2, '0')
+ const day = date.getDate().toString().padStart(2, '0')
+ return <>{`${year}-${month}-${day}`}
+ }
}
const downloadFile = async (url: string, filename: string) => {
- try {
- console.log('downloading file from:', url)
- const response = await fetch(url)
- const blob = await response.blob()
- download(blob, filename, 'application/gzip')
- } catch (error) {
- console.error('Error downloading file:', error)
- }
+ try {
+ console.log('downloading file from:', url)
+ const response = await fetch(url)
+ const blob = await response.blob()
+ download(blob, filename, 'application/gzip')
+ } catch (error) {
+ console.error('Error downloading file:', error)
+ }
}
export function formatDownloadCount(count: number): string {
- if (count === 0) return '0'
+ if (count === 0) return '0'
- const units = ['', 'K', 'M', 'B']
- const unitSize = 1000
- const unitIndex = Math.floor(Math.log10(count) / Math.log10(unitSize))
+ const units = ['', 'K', 'M', 'B']
+ const unitSize = 1000
+ const unitIndex = Math.floor(Math.log10(count) / Math.log10(unitSize))
- // Don't format if less than 1000
- if (unitIndex === 0) return count.toString()
+ // Don't format if less than 1000
+ if (unitIndex === 0) return count.toString()
- // Calculate the formatted number with one decimal place
- const formattedNum = (count / Math.pow(unitSize, unitIndex)).toFixed(1)
+ // Calculate the formatted number with one decimal place
+ const formattedNum = (count / Math.pow(unitSize, unitIndex)).toFixed(1)
- // Remove .0 if it exists
- const cleanNum = formattedNum.endsWith('.0')
- ? formattedNum.slice(0, -2)
- : formattedNum
+ // Remove .0 if it exists
+ const cleanNum = formattedNum.endsWith('.0')
+ ? formattedNum.slice(0, -2)
+ : formattedNum
- return `${cleanNum}${units[unitIndex]}`
+ return `${cleanNum}${units[unitIndex]}`
}
const NodeDetails = () => {
- const { t, i18n } = useNextTranslation()
- // state for drawer and modals
- const [isDrawerOpen, setIsDrawerOpen] = useState(false)
- const [selectedVersion, setSelectedVersion] = useState(
- null
- )
- const [isEditModalOpen, setIsEditModal] = useState(false)
- const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
- const [isSearchRankingEditModalOpen, setIsSearchRankingEditModalOpen] =
- useState(false)
- const [
- isPreemptedComfyNodeNamesEditModalOpen,
- setIsPreemptedComfyNodeNamesEditModalOpen,
- ] = useState(false)
- // useNodeList
- // parse query parameters from the URL
- // note: publisherId can be undefined when accessing `/nodes/[nodeId]`
- const router = useRouter()
- const { publisherId: _publisherId, nodeId: _nodeId } = router.query
- const nodeId = String(_nodeId) // nodeId is always string
-
- // fetch node details and permissions with no-cache headers for real-time data
- const {
- data: node,
- isLoading,
- error,
- } = useGetNode(nodeId, undefined, {
- query: {
- enabled: !!_nodeId,
- },
- })
- const publisherId = String(node?.publisher?.id ?? _publisherId) // try use _publisherId from url while useGetNode is loading
-
- const { data: permissions } = useGetPermissionOnPublisherNodes(
- publisherId,
- nodeId,
- {
- query: {
- enabled: !!nodeId,
- },
- }
- )
-
- const { data: user } = useGetUser()
- const isAdmin = user?.isAdmin
- const canEdit = isAdmin || permissions?.canEdit
- const { data: myPublishers } = useListPublishersForUser({})
- const warningForAdminEdit =
- isAdmin && !myPublishers?.map((e) => e.id)?.includes(publisherId) // if admin is editing a node that is not owned by them, show a warning
-
- const { data: nodeVersions, refetch: refetchVersions } =
- useListNodeVersions(
- nodeId as string,
- {
- statuses: [
- NodeVersionStatus.NodeVersionStatusActive,
- NodeVersionStatus.NodeVersionStatusPending,
- NodeVersionStatus.NodeVersionStatusFlagged,
- // show rejected versions only to publisher
- ...(!canEdit
- ? []
- : [NodeVersionStatus.NodeVersionStatusBanned]),
- ],
- },
- {
- query: {
- enabled: !!nodeId,
- },
- }
- )
-
- const isUnclaimed = node?.publisher?.id === UNCLAIMED_ADMIN_PUBLISHER_ID
-
- const toggleDrawer = () => {
- analytic.track('View Node Version Details')
- setIsDrawerOpen(!isDrawerOpen)
+ const { t, i18n } = useNextTranslation()
+ const { dt } = useDynamicTranslate()
+
+ // state for drawer and modals
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+ const [selectedVersion, setSelectedVersion] = useState(
+ null
+ )
+ const [isEditModalOpen, setIsEditModal] = useState(false)
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
+ const [isSearchRankingEditModalOpen, setIsSearchRankingEditModalOpen] =
+ useState(false)
+ const [
+ isPreemptedComfyNodeNamesEditModalOpen,
+ setIsPreemptedComfyNodeNamesEditModalOpen,
+ ] = useState(false)
+ // useNodeList
+ // parse query parameters from the URL
+ // note: publisherId can be undefined when accessing `/nodes/[nodeId]`
+ const router = useRouter()
+ const { publisherId: _publisherId, nodeId: _nodeId } = router.query
+ const nodeId = String(_nodeId) // nodeId is always string
+
+ // fetch node details and permissions with no-cache headers for real-time data
+ const {
+ data: node,
+ isLoading,
+ error,
+ } = useGetNode(nodeId, undefined, {
+ query: {
+ enabled: !!_nodeId,
+ },
+ })
+ const publisherId = String(node?.publisher?.id ?? _publisherId) // try use _publisherId from url while useGetNode is loading
+
+ const { data: permissions } = useGetPermissionOnPublisherNodes(
+ publisherId,
+ nodeId,
+ {
+ query: {
+ enabled: !!nodeId,
+ },
}
-
- const selectVersion = (version: NodeVersion) => {
- setSelectedVersion(version)
- setIsDrawerOpen(true)
+ )
+
+ const { data: user } = useGetUser()
+ const isAdmin = user?.isAdmin
+ const canEdit = isAdmin || permissions?.canEdit
+ const { data: myPublishers } = useListPublishersForUser({})
+ const warningForAdminEdit =
+ isAdmin && !myPublishers?.map((e) => e.id)?.includes(publisherId) // if admin is editing a node that is not owned by them, show a warning
+
+ const { data: nodeVersions, refetch: refetchVersions } = useListNodeVersions(
+ nodeId as string,
+ {
+ statuses: [
+ NodeVersionStatus.NodeVersionStatusActive,
+ NodeVersionStatus.NodeVersionStatusPending,
+ NodeVersionStatus.NodeVersionStatusFlagged,
+ // show rejected versions only to publisher
+ ...(!canEdit ? [] : [NodeVersionStatus.NodeVersionStatusBanned]),
+ ],
+ },
+ {
+ query: {
+ enabled: !!nodeId,
+ },
}
+ )
- const handleOpenModal = () => {
- analytic.track('Edit Node')
- setIsEditModal(true)
- }
+ const isUnclaimed = node?.publisher?.id === UNCLAIMED_ADMIN_PUBLISHER_ID
- const onCloseEditModal = () => {
- setIsEditModal(false)
- }
+ const toggleDrawer = () => {
+ analytic.track('View Node Version Details')
+ setIsDrawerOpen(!isDrawerOpen)
+ }
- const handleClaimNode = () => {
- if (!user) {
- router.push(`/auth/login?fromUrl=${router.asPath}`)
- return
- }
- // Redirect to publisher selection page for claiming
- router.push(`/nodes/${nodeId}/claim`)
- }
+ const selectVersion = (version: NodeVersion) => {
+ setSelectedVersion(version)
+ setIsDrawerOpen(true)
+ }
- // redirect to correct /publishers/[publisherId]/nodes/[nodeId] if publisherId in query is different from the one in node
- // usually this happens when publisher changes, e.g. when user claims a node
- const isPublisherIdMismatchedBetweenURLandNode =
- node && _publisherId && publisherId !== _publisherId
- if (isPublisherIdMismatchedBetweenURLandNode) {
- router.replace(`/publishers/${publisherId}/nodes/${nodeId}`)
- return null // prevent rendering the component while redirecting
- }
+ const handleOpenModal = () => {
+ analytic.track('Edit Node')
+ setIsEditModal(true)
+ }
- const shouldShowLoading = isLoading || !router.isReady || !_nodeId
- if (shouldShowLoading) {
- return (
-
-
- )
- }
+ const onCloseEditModal = () => {
+ setIsEditModal(false)
+ }
- if (error) {
- // TODO: show error message and allow navigate back to the list
- return (
-
-
-
-
-
- {t('Error loading node details')}
-
- {/* reason */}
-
- {t('Reason')}:{' '}
- {t(
- 'An unexpected error occurred. Please try again later.'
- )}
-
- {process.env.NODE_ENV === 'development' && (
-
- {t('Debug info')}: {error.message}
-
- )}
-
- router.back()}
- >
- {t('Go back')}
-
-
-
-
-
+
+ )
+ }
- if (!node) {
- return (
-
-
-
-
-
- {t('Node not found')}
-
-
-
+ if (error) {
+ // TODO: show error message and allow navigate back to the list
+ return (
+
+
+
+
+
+ {t('Error loading node details')}
+
+ {/* reason */}
+
+ {t('Reason')}:{' '}
+ {t('An unexpected error occurred. Please try again later.')}
+
+ {process.env.NODE_ENV === 'development' && (
+
+ {t('Debug info')}: {error.message}
+
+ )}
+
+ router.back()}>
+ {t('Go back')}
+
+
- )
- }
+
+
+ )
+ }
+ if (!node) {
return (
- <>
- {/* TODO(sno): unwrap this div out of fragment in another PR */}
-
-
-
+
+
+
+
+
+ {t('Node not found')}
+
+
+
+
+ )
+ }
+
+ return (
+ <>
+ {/* TODO(sno): unwrap this div out of fragment in another PR */}
+
+
+
+
+
+
+
+
+
{node.name}
+
+
+ {[
+
+ {node.publisher?.id?.replace(/^(?!$)/, '@')}
+
,
+
+ node.latest_version?.version?.replace(/^(?!$)/, 'v'),
+
+ node.latest_version?.createdAt &&
+ intlFormatDistance(
+ new Date(node.latest_version.createdAt),
+ new Date(),
+ {
+ numeric: 'auto',
+ locale: i18n.language,
+ }
+ ),
+ ]
+ .flatMap((e) => (e ? [e] : []))
+ // same as .join(' | '), but with span element
+ .reduce(
+ (acc, x, i, a) => [
+ ...acc,
+ x,
+ i < a.length - 1 && (
+
|
+ ),
+ ],
+ [] as ReactNode[]
+ )
+ .filter(Boolean)}
+
-
-
-
-
-
-
- {node.name}
-
-
-
- {[
-
- {node.publisher?.id?.replace(
- /^(?!$)/,
- '@'
- )}
-
,
-
- node.latest_version?.version?.replace(
- /^(?!$)/,
- 'v'
- ),
-
- node.latest_version?.createdAt &&
- intlFormatDistance(
- new Date(
- node.latest_version
- .createdAt
- ),
- new Date(),
- {
- numeric: 'auto',
- locale: i18n.language,
- }
- ),
- ]
- .flatMap((e) => (e ? [e] : []))
- // same as .join(' | '), but with span element
- .reduce(
- (acc, x, i, a) => [
- ...acc,
- x,
- i < a.length - 1 && (
-
- {' '}
- |{' '}
-
- ),
- ],
- [] as ReactNode[]
- )
- .filter(Boolean)}
-
-
-
-
-
- {/* {data.license && (
+
+
+
+ {/* {data.license && (
{
)}*/}
- {/*{data.rating && (
+ {/*{data.rating && (
{
)} */}
- {node.downloads != 0 && (
-
-
-
-
- {formatDownloadCount(
- node.downloads || 0
- )}{' '}
- {t('downloads')}
-
-
- )}
- {node.github_stars != null &&
- node.github_stars > 0 && (
-
-
-
-
- {formatDownloadCount(
- node.github_stars || 0
- )}{' '}
- {t('GitHub stars')}
-
-
- )}
-
-
- <>
- {isUnclaimed || !nodeVersions?.length ? (
-
- {isUnclaimed
- ? t(
- "This node can only be installed via git, because it's unclaimed by any publisher"
- )
- : !nodeVersions?.length
- ? t(
- 'This node can only be installed via git, because it has no versions published yet'
- )
- : t(
- 'This node can only be installed via git'
- )}
- {node.repository && (
-
- ) : (
-
- )}
-
- {isUnclaimed && user && (
- // TODO: change this button to a small hint like this: "(i) This is my node? [Claim]", and move into [publisher] section above
-
- {t('Claim my node')}
-
- )}
-
-
-
-
- {t('Description')}
-
-
- {node.description}
-
-
-
-
- {t('Version history')}
-
-
- {nodeVersions?.map((version, index) => (
-
-
- {t('Version')} {version.version}
-
-
-
-
- {version.changelog}
-
-
- selectVersion(version)
- }
- tabIndex={0}
- >
- {t('More')}
-
-
- ))}
-
-
-
-
-
-
-
- {node.repository && (
-
{
- analytic.track('View Repository')
- e.preventDefault()
- window.open(
- node.repository,
- '_blank',
- 'noopener noreferrer'
- )
- }}
- href={node.repository || ''}
- >
-
- )}
-
- {!!node.latest_version?.downloadUrl && (
-
- ) => {
- e.preventDefault()
- if (node?.latest_version?.downloadUrl) {
- downloadFile(
- node.latest_version?.downloadUrl,
- `${node.name}_${node.latest_version.version}.zip`
- )
- }
- analytic.track(
- 'Download Latest Node Version'
- )
- }}
- >
- {t('Download Latest')}
-
- )}
-
- {canEdit && (
-
-
-
- {t('Edit details')}
- {warningForAdminEdit && (
- <> {t('(admin)')}
- )}
-
- )}
-
- {canEdit && (
-
setIsDeleteModalOpen(true)}
- >
- {t('Delete')}
- {warningForAdminEdit && (
- <> {t('(admin)')}
- )}
-
- )}
-
- {/* admin zone */}
- {isAdmin && (
- <>
-
-
- {/* Search Ranking: integer from 1 to 10. Lower number means higher search ranking, all else equal */}
- {null != node.search_ranking && (
- <>
-
- {
- setIsSearchRankingEditModalOpen(
- true
- )
- analytic.track(
- 'Edit Search Ranking'
- )
- }}
- >
-
-
-
- {t('Search Ranking')}:{' '}
- {node.search_ranking}
-
-
-
-
- setIsSearchRankingEditModalOpen(
- false
- )
- }
- />
-
- )}
-
- {/* Preempted Comfy Node Names management section */}
- <>
-
- {
- setIsPreemptedComfyNodeNamesEditModalOpen(
- true
- )
- analytic.track(
- 'Edit Preempted Comfy Node Names'
- )
- }}
- >
-
-
-
- {t('Preempted Names')}:{' '}
-
- {node.preempted_comfy_node_names &&
- node
- .preempted_comfy_node_names
- .length > 0
- ? node.preempted_comfy_node_names.join(
- '\n'
- )
- : t('None')}
-
-
-
-
- setIsPreemptedComfyNodeNamesEditModalOpen(
- false
- )
- }
- />
-
-
- )}
+ {node.downloads != 0 && (
+
+
+
+
+ {formatDownloadCount(node.downloads || 0)}{' '}
+ {t('downloads')}
+
+
+ )}
+ {node.github_stars != null && node.github_stars > 0 && (
+
+
+
+
+ {formatDownloadCount(node.github_stars || 0)}{' '}
+ {t('GitHub stars')}
+
+
+ )}
+
+
+ <>
+ {isUnclaimed || !nodeVersions?.length ? (
+
+ {isUnclaimed
+ ? t(
+ "This node can only be installed via git, because it's unclaimed by any publisher"
+ )
+ : !nodeVersions?.length
+ ? t(
+ 'This node can only be installed via git, because it has no versions published yet'
+ )
+ : t('This node can only be installed via git')}
+ {node.repository && (
+
+ ) : (
+
+ )}
+
+ {isUnclaimed && user && (
+ // TODO: change this button to a small hint like this: "(i) This is my node? [Claim]", and move into [publisher] section above
+
+ {t('Claim my node')}
+
+ )}
+
+
+
+
{t('Description')}
+
+ {dt(node.description)}
+
+
+
+
+ {t('Version history')}
+
+
+ {nodeVersions?.map((version, index) => (
+
+
+ {t('Version')} {version.version}
+
+
+
+
+ {dt(version.changelog)}
+
+
selectVersion(version)}
+ tabIndex={0}
+ >
+ {t('More')}
+
+ ))}
-
-
-
-
setIsDeleteModalOpen(false)}
- nodeId={nodeId}
- publisherId={publisherId}
- />
-
- {isDrawerOpen && selectedVersion && nodeId && (
- {
- refetchVersions()
+
+
+
+
+
+
+ {node.repository && (
+
{
+ analytic.track('View Repository')
+ e.preventDefault()
+ window.open(node.repository, '_blank', 'noopener noreferrer')
+ }}
+ href={node.repository || ''}
+ >
+
+ )}
+
+ {!!node.latest_version?.downloadUrl && (
+
) => {
+ e.preventDefault()
+ if (node?.latest_version?.downloadUrl) {
+ downloadFile(
+ node.latest_version?.downloadUrl,
+ `${node.name}_${node.latest_version.version}.zip`
+ )
+ }
+ analytic.track('Download Latest Node Version')
+ }}
+ >
+ {t('Download Latest')}
+
+ )}
+
+ {canEdit && (
+
+
+
+ {t('Edit details')}
+ {warningForAdminEdit && <> {t('(admin)')}}
+
+ )}
+
+ {canEdit && (
+
setIsDeleteModalOpen(true)}
+ >
+ {t('Delete')}
+ {warningForAdminEdit && <> {t('(admin)')}}
+
+ )}
+
+ {/* admin zone */}
+ {isAdmin && (
+ <>
+
+
+ {/* Search Ranking: integer from 1 to 10. Lower number means higher search ranking, all else equal */}
+ {null != node.search_ranking && (
+ <>
+
+ {
+ setIsSearchRankingEditModalOpen(true)
+ analytic.track('Edit Search Ranking')
}}
+ >
+
+
+
+ {t('Search Ranking')}: {node.search_ranking}
+
+
+
+
setIsSearchRankingEditModalOpen(false)}
/>
+
)}
-
-
- )
+
+ {/* Preempted Comfy Node Names management section */}
+ <>
+
+ {
+ setIsPreemptedComfyNodeNamesEditModalOpen(true)
+ analytic.track('Edit Preempted Comfy Node Names')
+ }}
+ >
+
+
+
+ {t('Preempted Names')}:{' '}
+
+ {node.preempted_comfy_node_names &&
+ node.preempted_comfy_node_names.length > 0
+ ? node.preempted_comfy_node_names.join('\n')
+ : t('None')}
+
+
+
+
+ setIsPreemptedComfyNodeNamesEditModalOpen(false)
+ }
+ />
+
+
+ )}
+
+
+
+
+
+
setIsDeleteModalOpen(false)}
+ nodeId={nodeId}
+ publisherId={publisherId}
+ />
+
+ {isDrawerOpen && selectedVersion && nodeId && (
+ {
+ refetchVersions()
+ }}
+ />
+ )}
+
+
+ )
}
export default NodeDetails
diff --git a/components/nodes/NodeEditModal.tsx b/components/nodes/NodeEditModal.tsx
index 0f53d18e..3f9bdfdb 100644
--- a/components/nodes/NodeEditModal.tsx
+++ b/components/nodes/NodeEditModal.tsx
@@ -5,245 +5,235 @@ import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import { toast } from 'react-toastify'
import {
- CustomThemeTextArea,
- customThemeTextInput,
- customThemeTModal,
+ CustomThemeTextArea,
+ customThemeTextInput,
+ customThemeTModal,
} from 'utils/comfyTheme'
import {
- INVALIDATE_CACHE_OPTION,
- shouldInvalidate,
+ INVALIDATE_CACHE_OPTION,
+ shouldInvalidate,
} from '@/components/cache-control'
import { ErrorResponse, Node, useUpdateNode } from '@/src/api/generated'
import nodesLogo from '@/src/assets/images/nodelogo2.png'
import { useNextTranslation } from '@/src/hooks/i18n'
type NodeEditModalProps = {
- openEditModal: boolean
- onCloseEditModal: () => void
- nodeData: Node
- publisherId: string
+ openEditModal: boolean
+ onCloseEditModal: () => void
+ nodeData: Node
+ publisherId: string
}
export const NodeEditModal: React.FC
= ({
- publisherId,
- openEditModal,
- onCloseEditModal,
- nodeData,
+ publisherId,
+ openEditModal,
+ onCloseEditModal,
+ nodeData,
}) => {
- const { t } = useNextTranslation()
- const updateNodeMutation = useUpdateNode({})
- const queryClient = useQueryClient()
- const [nodeName, setNodeName] = useState('')
- // const [openLogoModal, setOpenLogoModal] = useState(false)
- const [description, setDescription] = useState('')
- const [license, setLicense] = useState('')
- const [githubLink, setGithubLink] = useState('')
+ const { t } = useNextTranslation()
+ const updateNodeMutation = useUpdateNode({})
+ const queryClient = useQueryClient()
+ const [nodeName, setNodeName] = useState('')
+ // const [openLogoModal, setOpenLogoModal] = useState(false)
+ const [description, setDescription] = useState('')
+ const [license, setLicense] = useState('')
+ const [githubLink, setGithubLink] = useState('')
- useEffect(() => {
- if (nodeData) {
- setNodeName(nodeData.name || '')
- setDescription(nodeData.description || '')
- setLicense(nodeData.license || '')
- setGithubLink(nodeData.repository || '')
- }
- }, [nodeData])
- // const handleOpenLogoModal = () => {
- // onCloseEditModal()
- // setOpenLogoModal(true)
- // }
+ useEffect(() => {
+ if (nodeData) {
+ setNodeName(nodeData.name || '')
+ setDescription(nodeData.description || '')
+ setLicense(nodeData.license || '')
+ setGithubLink(nodeData.repository || '')
+ }
+ }, [nodeData])
+ // const handleOpenLogoModal = () => {
+ // onCloseEditModal()
+ // setOpenLogoModal(true)
+ // }
- // const handleCloseLogoModal = () => {
- // setOpenLogoModal(false)
- // }
+ // const handleCloseLogoModal = () => {
+ // setOpenLogoModal(false)
+ // }
- const handleUpdateNode = () => {
- if (nodeData.id) {
- updateNodeMutation.mutate(
- {
- data: {
- id: nodeData.id, // solve missing id error
- name: nodeName,
- description: description,
- license: license,
- repository: githubLink,
- },
- nodeId: nodeData.id,
- publisherId: publisherId,
- },
- {
- onSuccess: (data) => {
- // Cache-busting invalidation for cached endpoints
- queryClient.fetchQuery(
- shouldInvalidate.getGetNodeQueryOptions(
- nodeData.id!,
- undefined,
- INVALIDATE_CACHE_OPTION
- )
- )
- if (data) {
- toast.success(t('Node updated successfully'))
- } else {
- toast.error(t('Failed to update node'))
- }
- },
- onError: (error, variables, context) => {
- if (error instanceof AxiosError) {
- const axiosError: AxiosError =
- error
- toast.error(
- t(`Failed to update node.\n{{detail}}`, {
- detail: parseAxiosErrorResponse(axiosError),
- })
- )
- } else {
- toast.error(t('Failed to update node'))
- }
- },
- }
+ const handleUpdateNode = () => {
+ if (nodeData.id) {
+ updateNodeMutation.mutate(
+ {
+ data: {
+ id: nodeData.id, // solve missing id error
+ name: nodeName,
+ description: description,
+ license: license,
+ repository: githubLink,
+ },
+ nodeId: nodeData.id,
+ publisherId: publisherId,
+ },
+ {
+ onSuccess: (data) => {
+ // Cache-busting invalidation for cached endpoints
+ queryClient.fetchQuery(
+ shouldInvalidate.getGetNodeQueryOptions(
+ nodeData.id!,
+ undefined,
+ INVALIDATE_CACHE_OPTION
+ )
)
+ if (data) {
+ toast.success(t('Node updated successfully'))
+ } else {
+ toast.error(t('Failed to update node'))
+ }
+ },
+ onError: (error, variables, context) => {
+ if (error instanceof AxiosError) {
+ const axiosError: AxiosError = error
+ toast.error(
+ t(`Failed to update node.\n{{detail}}`, {
+ detail: parseAxiosErrorResponse(axiosError),
+ })
+ )
+ } else {
+ toast.error(t('Failed to update node'))
+ }
+ },
}
- onCloseEditModal()
+ )
}
+ onCloseEditModal()
+ }
- return (
- <>
-
-
-
- {t('Edit Node')}
-
-
-
-
-
-
-
-
-
- setNodeName(e.target.value)
- }
- value={nodeName}
- required
- />
-
-