opensource/n8n
3
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-09-01 15:47:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Show tooltip on dependency pill (#27545)

Browse Source
This commit is contained in:
Charlie Kolb
2026-03-30 12:36:23 +02:00
committed by GitHub
parent 6d6a10c55e
commit 91d56d2f61
2 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/@n8n/i18n/src/locales/en.json
+3
View File
@@ -3849,6 +3849,9 @@
"workflows.dynamic.tooltipTitle": "Dynamic credentials",
"workflows.dynamic.resolverMissing": "Credential resolver missing",
"workflows.dependencies.tooltip": "1 dependency | {count} dependencies",
"workflows.dependencies.tooltip.workflow": "Resources referenced by this workflow",
"workflows.dependencies.tooltip.credential": "Resources referencing this credential",
"workflows.dependencies.tooltip.dataTable": "Resources referencing this data table",
"workflows.dependencies.modal.title": "Dependencies",
"workflows.dependencies.modal.search": "Search dependencies...",
"workflows.dependencies.type.credentials": "Credentials",
packages/frontend/editor-ui/src/app/components/DependencyPill.vue
+41 -35
View File
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
import { useI18n } from '@n8n/i18n';
import { useRouter } from 'vue-router';
import type { BaseTextKey } from '@n8n/i18n';
import { N8nBadge, N8nIcon } from '@n8n/design-system';
import { N8nBadge, N8nIcon, N8nTooltip } from '@n8n/design-system';
import {
N8nDropdownMenu,
type DropdownMenuItemProps,
@@ -47,6 +47,10 @@ const effectiveCount = computed(() => {
const hasHiddenDeps = computed(() => (depsResult.value?.inaccessibleCount ?? 0) > 0);
const tooltipText = computed(() =>
i18n.baseText(`workflows.dependencies.tooltip.${props.resourceType}` as BaseTextKey),
);
const hasFullDeps = computed(() => depsResult.value !== undefined);
const showSearch = computed(
@@ -194,40 +198,42 @@ async function onDropdownToggle(open: boolean) {
</script>
<template>
<N8nDropdownMenu
:items="menuItems"
trigger="hover"
placement="bottom"
:loading="isLoadingDetails"
:loading-item-count="1"
:searchable="showSearch"
extra-popper-class="dependency-pill-dropdown"
:search-placeholder="i18n.baseText('workflows.dependencies.search.placeholder')"
:max-height="280"
:data-test-id="dataTestId"
@select="onSelect"
@search="onSearch"
@update:model-value="onDropdownToggle"
>
<template #trigger>
<N8nBadge theme="tertiary" :class="$style.badge">
<span :class="$style.badgeText">
<N8nIcon icon="link" size="medium" />
{{ effectiveCount }}
</span>
</N8nBadge>
</template>
<template v-if="hasHiddenDeps" #footer>
<div :class="$style.hiddenNotice">
{{
i18n.baseText('workflows.dependencies.hiddenNotice', {
adjustToNumber: depsResult!.inaccessibleCount,
interpolate: { count: String(depsResult!.inaccessibleCount) },
})
}}
</div>
</template>
</N8nDropdownMenu>
<N8nTooltip :content="tooltipText" placement="left" :show-after="200">
<N8nDropdownMenu
:items="menuItems"
trigger="hover"
placement="bottom"
:loading="isLoadingDetails"
:loading-item-count="1"
:searchable="showSearch"
extra-popper-class="dependency-pill-dropdown"
:search-placeholder="i18n.baseText('workflows.dependencies.search.placeholder')"
:max-height="280"
:data-test-id="dataTestId"
@select="onSelect"
@search="onSearch"
@update:model-value="onDropdownToggle"
>
<template #trigger>
<N8nBadge theme="tertiary" :class="$style.badge">
<span :class="$style.badgeText">
<N8nIcon icon="link" size="medium" />
{{ effectiveCount }}
</span>
</N8nBadge>
</template>
<template v-if="hasHiddenDeps" #footer>
<div :class="$style.hiddenNotice">
{{
i18n.baseText('workflows.dependencies.hiddenNotice', {
adjustToNumber: depsResult!.inaccessibleCount,
interpolate: { count: String(depsResult!.inaccessibleCount) },
})
}}
</div>
</template>
</N8nDropdownMenu>
</N8nTooltip>
</template>
<style lang="scss" module>