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

* 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

View File

@@ -154,6 +154,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
import { useWorkflowsEEStore } from '@/stores/workflows.ee';
import { ITelemetryTrackProperties } from 'n8n-workflow';
import { useUsageStore } from '@/stores/usage';
import { BaseTextKey } from '@/plugins/i18n';
export default mixins(showMessage).extend({
name: 'workflow-share-modal',
@@ -175,7 +176,7 @@ export default mixins(showMessage).extend({
return {
WORKFLOW_SHARE_MODAL_KEY,
loading: false,
loading: true,
modalBus: new Vue(),
sharedWith: [...(workflow.sharedWith || [])] as Array<Partial<IUser>>,
EnterpriseEditionFeature,
@@ -199,8 +200,9 @@ export default mixins(showMessage).extend({
modalTitle(): string {
return this.$locale.baseText(
this.isSharingEnabled
? this.uiStore.contextBasedTranslationKeys.workflows.sharing.title
: this.uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.title,
? (this.uiStore.contextBasedTranslationKeys.workflows.sharing.title as BaseTextKey)
: (this.uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable
.title as BaseTextKey),
{
interpolate: { name: this.workflow.name },
},
@@ -380,7 +382,7 @@ export default mixins(showMessage).extend({
},
),
this.$locale.baseText('workflows.shareModal.list.delete.confirm.title', {
interpolate: { name: user.fullName },
interpolate: { name: user.fullName as string },
}),
null,
this.$locale.baseText('workflows.shareModal.list.delete.confirm.confirmButtonText'),
@@ -437,18 +439,37 @@ export default mixins(showMessage).extend({
});
},
goToUpgrade() {
let linkUrl = this.$locale.baseText(this.uiStore.contextBasedTranslationKeys.upgradeLinkUrl);
let linkUrl = this.$locale.baseText(
this.uiStore.contextBasedTranslationKeys.upgradeLinkUrl as BaseTextKey,
);
if (linkUrl.includes('subscription')) {
linkUrl = `${this.usageStore.viewPlansUrl}&source=workflow_sharing`;
}
window.open(linkUrl, '_blank');
},
async initialize() {
if (this.isSharingEnabled) {
await this.loadUsers();
if (
this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID &&
!this.workflow.sharedWith?.length // Sharing info already loaded
) {
await this.workflowsStore.fetchWorkflow(this.workflow.id);
}
}
this.loading = false;
},
},
mounted() {
if (this.isSharingEnabled) {
this.loadUsers();
}
this.initialize();
},
watch: {
workflow(workflow) {
this.sharedWith = workflow.sharedWith;
},
},
});
</script>