feat(editor): Load workflow sharedWith info only when opening share m…

…odal (#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
n8n-io · Jan 11, 2023 · bfc6ddd · bfc6ddd
1 parent 044b153
commit bfc6ddd
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/packages/editor-ui/src/api/workflows.ts b/packages/editor-ui/src/api/workflows.ts
@@ -10,6 +10,12 @@ export async function getNewWorkflow(context: IRestApiContext, name?: string) {
 	};
 }
 
+export async function getWorkflow(context: IRestApiContext, id: string, filter?: object) {
+	const sendData = filter ? { filter } : undefined;
+
+	return await makeRestApiRequest(context, 'GET', `/workflows/${id}`, sendData);
+}
+
 export async function getWorkflows(context: IRestApiContext, filter?: object) {
 	const sendData = filter ? { filter } : undefined;
 

diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -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>

diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
@@ -50,6 +50,7 @@ import {
 	getExecutionData,
 	getFinishedExecutions,
 	getNewWorkflow,
+	getWorkflow,
 	getWorkflows,
 } from '@/api/workflows';
 import { useUIStore } from './ui';
@@ -254,6 +255,13 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return workflows;
 		},
 
+		async fetchWorkflow(id: string): Promise<IWorkflowDb> {
+			const rootStore = useRootStore();
+			const workflow = await getWorkflow(rootStore.getRestApiContext, id);
+			this.addWorkflow(workflow);
+			return workflow;
+		},
+
 		async getNewWorkflowData(name?: string): Promise<INewWorkflowData> {
 			const workflowsEEStore = useWorkflowsEEStore();