admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-21 11:49:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improve workflow list performance using RecycleScroller and on-demand sharing data loading (#5181)

Browse Source 
* feat(editor): Load workflow sharedWith info only when opening share modal (#5125)

* feat(editor): load workflow sharedWith info only when opening share modal

* fix(editor): update workflow share modal loading state at the end of initialize fn

* feat: initial recycle scroller commit

* feat: prepare recycle scroller for dynamic item sizes (no-changelog)

* feat: add recycle scroller with variable size support and caching

* feat: integrated recycle scroller with existing resources list

* feat: improve recycle scroller performance

* fix: fix recycle-scroller storybook

* fix: update recycle-scroller styles to fix scrollbar size

* chore: undo vite config changes

* chore: undo installed packages

* chore: remove commented code

* chore: remove vue-virtual-scroller code.

* feat: update size cache updating mechanism

* chore: remove console.log

* fix: adjust code for e2e tests

* fix: fix linting issues
This commit is contained in:
Alex Grozav
2023-01-27 09:51:32 +02:00
committed by GitHub
parent 8ce85e3759
commit 874c735d0a
15 changed files with 468 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View File

@@ -106,56 +106,56 @@
</div>
</div>
</div>
<slot name="callout"></slot>
<div v-show="hasFilters" class="mt-xs">
<n8n-info-tip :bold="false">
{{ $locale.baseText(`${resourceKey}.filters.active`) }}
<n8n-link @click="resetFilters" size="small">
{{ $locale.baseText(`${resourceKey}.filters.active.reset`) }}
</n8n-link>
</n8n-info-tip>
</div>
<div class="pb-xs" />
</template>
<slot name="callout"></slot>
<n8n-recycle-scroller
v-if="filteredAndSortedSubviewResources.length > 0"
data-test-id="resources-list"
:class="[$style.list, 'list-style-none']"
:items="filteredAndSortedSubviewResources"
:item-size="itemSize"
item-key="id"
>
<template #default="{ item, updateItemSize }">
<slot :data="item" :updateItemSize="updateItemSize" />
</template>
</n8n-recycle-scroller>
<div v-show="hasFilters" class="mt-xs">
<n8n-info-tip :bold="false">
{{ $locale.baseText(`${resourceKey}.filters.active`) }}
<n8n-link @click="resetFilters" size="small">
{{ $locale.baseText(`${resourceKey}.filters.active.reset`) }}
</n8n-link>
</n8n-info-tip>
</div>
<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
{{ $locale.baseText(`${resourceKey}.noResults`) }}
<template v-if="shouldSwitchToAllSubview">
<span v-if="!filters.search">
({{ $locale.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
<n8n-link @click="setOwnerSubview(false)">
{{ $locale.baseText(`${resourceKey}.noResults.switchToShared.link`) }} </n8n-link
>)
</span>
<div class="mt-xs mb-l">
<ul
:class="[$style.list, 'list-style-none']"
v-if="filteredAndSortedSubviewResources.length > 0"
data-test-id="resources-list"
>
<li
v-for="resource in filteredAndSortedSubviewResources"
:key="resource.id"
class="mb-2xs"
data-test-id="resources-list-item"
>
<slot :data="resource" />
</li>
</ul>
<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
{{ $locale.baseText(`${resourceKey}.noResults`) }}
<template v-if="shouldSwitchToAllSubview">
<span v-if="!filters.search">
({{ $locale.baseText(`${resourceKey}.noResults.switchToShared.preamble`) }}
<n8n-link @click="setOwnerSubview(false)">{{
$locale.baseText(`${resourceKey}.noResults.switchToShared.link`)
}}</n8n-link
>)
</span>
<span v-else>
({{
$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`)
}}
<n8n-link @click="setOwnerSubview(false)">{{
<span v-else>
({{
$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.preamble`)
}}
<n8n-link @click="setOwnerSubview(false)">
{{
$locale.baseText(`${resourceKey}.noResults.withSearch.switchToShared.link`)
}}</n8n-link
>)
</span>
</template>
</n8n-text>
</div>
}} </n8n-link
>)
</span>
</template>
</n8n-text>
</page-view-layout-list>
</template>
</page-view-layout>
@@ -217,6 +217,10 @@ export default mixins(showMessage, debounceHelper).extend({
type: Array,
default: (): IResource[] => [],
},
itemSize: {
type: Number,
default: 80,
},
initialize: {
type: Function as PropType<() => Promise<void>>,
default: () => () => Promise.resolve(),
@@ -438,8 +442,8 @@ export default mixins(showMessage, debounceHelper).extend({
}
.list {
display: flex;
flex-direction: column;
//display: flex;
//flex-direction: column;
}
.sort-and-filter {