[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:
Jin Yi
2026-01-30 09:16:28 +09:00
committed by GitHub
parent a032e50721
commit d7654baebf
3 changed files with 80 additions and 10 deletions

View File

@@ -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', {