mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-07 16:40:05 +00:00
[feat] Show context-appropriate empty state messages in Manager tabs (#8415)
## Summary Shows tab-specific empty state messages in Node Manager instead of generic "No search results found" message. ## Changes - Added computed properties to determine empty state messages based on current tab and search state - Display tab-specific messages when a tab is empty without active search (e.g., "No Missing Nodes" for Missing tab) - Fall back to search-related messages only when there's an active search query - Added Korean translations for empty state messages | Tab | Empty State Title | |-----|-------------------| | All Installed | No Extensions Installed | | Update Available | All Up to Date | | Conflicting | No Conflicts Detected | | Workflow | No Extensions in Workflow | | Missing | No Missing Nodes | ## Review Focus - Verify i18n key structure matches existing patterns ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8415-feat-Show-context-appropriate-empty-state-messages-in-Manager-tabs-2f76d73d3650817ab8a0d41b45df3411) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -343,6 +343,28 @@
|
||||
"errorConnecting": "Error connecting to the Comfy Node Registry.",
|
||||
"noResultsFound": "No results found matching your search.",
|
||||
"tryDifferentSearch": "Please try a different search query.",
|
||||
"emptyState": {
|
||||
"allInstalled": {
|
||||
"title": "No Extensions Installed",
|
||||
"message": "You haven't installed any extensions yet."
|
||||
},
|
||||
"updateAvailable": {
|
||||
"title": "All Up to Date",
|
||||
"message": "All your extensions are up to date."
|
||||
},
|
||||
"conflicting": {
|
||||
"title": "No Conflicts Detected",
|
||||
"message": "All your extensions are compatible."
|
||||
},
|
||||
"workflow": {
|
||||
"title": "No Extensions in Workflow",
|
||||
"message": "This workflow doesn't use any extension nodes."
|
||||
},
|
||||
"missing": {
|
||||
"title": "No Missing Nodes",
|
||||
"message": "All required nodes are installed."
|
||||
}
|
||||
},
|
||||
"tryAgainLater": "Please try again later.",
|
||||
"gettingInfo": "Getting info...",
|
||||
"nodePack": "Node Pack",
|
||||
|
||||
@@ -1302,6 +1302,28 @@
|
||||
"discoverCommunityContent": "커뮤니티에서 만든 노드 팩 및 확장 프로그램을 찾아보세요...",
|
||||
"downloads": "다운로드",
|
||||
"enablePackToChangeVersion": "버전을 변경하려면 이 팩을 활성화하세요",
|
||||
"emptyState": {
|
||||
"allInstalled": {
|
||||
"title": "설치된 확장 프로그램 없음",
|
||||
"message": "아직 설치한 확장 프로그램이 없습니다."
|
||||
},
|
||||
"conflicting": {
|
||||
"title": "충돌 없음",
|
||||
"message": "모든 확장 프로그램이 호환됩니다."
|
||||
},
|
||||
"missing": {
|
||||
"title": "누락된 노드 없음",
|
||||
"message": "필요한 모든 노드가 설치되어 있습니다."
|
||||
},
|
||||
"updateAvailable": {
|
||||
"title": "모두 최신 상태",
|
||||
"message": "모든 확장 프로그램이 최신 버전입니다."
|
||||
},
|
||||
"workflow": {
|
||||
"title": "워크플로에 확장 프로그램 없음",
|
||||
"message": "이 워크플로는 확장 노드를 사용하지 않습니다."
|
||||
}
|
||||
},
|
||||
"errorConnecting": "Comfy Node Registry에 연결하는 중 오류가 발생했습니다.",
|
||||
"extensionsSuccessfullyInstalled": "확장이 성공적으로 설치되어 사용할 준비가 되었습니다!",
|
||||
"failed": "실패 ({count})",
|
||||
|
||||
@@ -130,16 +130,8 @@
|
||||
</div>
|
||||
<NoResultsPlaceholder
|
||||
v-else-if="displayPacks.length === 0"
|
||||
:title="
|
||||
comfyManagerStore.error
|
||||
? $t('manager.errorConnecting')
|
||||
: $t('manager.noResultsFound')
|
||||
"
|
||||
:message="
|
||||
comfyManagerStore.error
|
||||
? $t('manager.tryAgainLater')
|
||||
: $t('manager.tryDifferentSearch')
|
||||
"
|
||||
:title="emptyStateTitle"
|
||||
:message="emptyStateMessage"
|
||||
/>
|
||||
<div v-else class="h-full w-full" @click="handleGridContainerClick">
|
||||
<VirtualGrid
|
||||
@@ -398,6 +390,40 @@ const isMissingTab = computed(
|
||||
() => selectedTab.value?.id === ManagerTab.Missing
|
||||
)
|
||||
|
||||
// Map of tab IDs to their empty state i18n key suffixes
|
||||
const tabEmptyStateKeys: Partial<Record<ManagerTab, string>> = {
|
||||
[ManagerTab.AllInstalled]: 'allInstalled',
|
||||
[ManagerTab.UpdateAvailable]: 'updateAvailable',
|
||||
[ManagerTab.Conflicting]: 'conflicting',
|
||||
[ManagerTab.Workflow]: 'workflow',
|
||||
[ManagerTab.Missing]: 'missing'
|
||||
}
|
||||
|
||||
// Empty state messages based on current tab and search state
|
||||
const emptyStateTitle = computed(() => {
|
||||
if (comfyManagerStore.error) return t('manager.errorConnecting')
|
||||
if (searchQuery.value) return t('manager.noResultsFound')
|
||||
|
||||
const tabId = selectedTab.value?.id as ManagerTab | undefined
|
||||
const emptyStateKey = tabId ? tabEmptyStateKeys[tabId] : undefined
|
||||
|
||||
return emptyStateKey
|
||||
? t(`manager.emptyState.${emptyStateKey}.title`)
|
||||
: t('manager.noResultsFound')
|
||||
})
|
||||
|
||||
const emptyStateMessage = computed(() => {
|
||||
if (comfyManagerStore.error) return t('manager.tryAgainLater')
|
||||
if (searchQuery.value) return t('manager.tryDifferentSearch')
|
||||
|
||||
const tabId = selectedTab.value?.id as ManagerTab | undefined
|
||||
const emptyStateKey = tabId ? tabEmptyStateKeys[tabId] : undefined
|
||||
|
||||
return emptyStateKey
|
||||
? t(`manager.emptyState.${emptyStateKey}.message`)
|
||||
: t('manager.tryDifferentSearch')
|
||||
})
|
||||
|
||||
const onClickWarningLink = () => {
|
||||
window.open(
|
||||
buildDocsUrl('/troubleshooting/custom-node-issues', {
|
||||
|
||||
Reference in New Issue
Block a user