feat: Add share button to workflows list (#4681)

* feat: Add share button to workflows list

* fix: take empty workflow into account when sharing

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -241,7 +241,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 			if (saved) await this.settingsStore.fetchPromptsData();
 		},
 		onShareButtonClick() {
-			this.uiStore.openModal(WORKFLOW_SHARE_MODAL_KEY);
+			this.uiStore.openModalWithData({ name: WORKFLOW_SHARE_MODAL_KEY, data: { id: this.currentWorkflowId } });
 		},
 		onTagsEditEnable() {
 			this.$data.appliedTagIds = this.currentWorkflowTagIds;

packages/editor-ui/src/components/Modals.vue

@@ -83,7 +83,13 @@
 		</ModalRoot>
 
 		<ModalRoot :name="WORKFLOW_SHARE_MODAL_KEY">
-			<WorkflowShareModal />
+			<template #default="{ modalName, active, data }">
+				<WorkflowShareModal
+					:data="data"
+					:isActive="active"
+					:modalName="modalName"
+				/>
+			</template>
 		</ModalRoot>
 
 		<ModalRoot :name="ONBOARDING_CALL_SIGNUP_MODAL_KEY">

packages/editor-ui/src/components/WorkflowCard.vue

@@ -59,7 +59,7 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import {IWorkflowDb, IUser, ITag} from "@/Interface";
-import {DUPLICATE_MODAL_KEY, EnterpriseEditionFeature, VIEWS} from '@/constants';
+import {DUPLICATE_MODAL_KEY, EnterpriseEditionFeature, VIEWS, WORKFLOW_SHARE_MODAL_KEY} from '@/constants';
 import {showMessage} from "@/components/mixins/showMessage";
 import {getWorkflowPermissions, IPermissions} from "@/permissions";
 import dateformat from "dateformat";
@@ -74,6 +74,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 
 export const WORKFLOW_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
+	SHARE: 'share',
 	DUPLICATE: 'duplicate',
 	DELETE: 'delete',
 };
@@ -131,6 +132,10 @@ export default mixins(
 					label: this.$locale.baseText('workflows.item.open'),
 					value: WORKFLOW_LIST_ITEM_ACTIONS.OPEN,
 				},
+				{
+					label: this.$locale.baseText('workflows.item.share'),
+					value: WORKFLOW_LIST_ITEM_ACTIONS.SHARE,
+				},
 				{
 					label: this.$locale.baseText('workflows.item.duplicate'),
 					value: WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE,
@@ -183,6 +188,8 @@ export default mixins(
 						tags: (this.data.tags || []).map((tag: ITag) => tag.id),
 					},
 				});
+			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.SHARE) {
+				this.uiStore.openModalWithData({ name: WORKFLOW_SHARE_MODAL_KEY, data: { id: this.data.id } });
 			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DELETE) {
 				const deleteConfirmed = await this.confirmMessage(
 					this.$locale.baseText(

packages/editor-ui/src/components/WorkflowShareModal.ee.vue

@@ -120,14 +120,23 @@ export default mixins(
 	components: {
 		Modal,
 	},
+	props: {
+		data: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
 	data() {
 		const workflowsStore = useWorkflowsStore();
+		const workflow = this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
+			? workflowsStore.workflow
+			: workflowsStore.workflowsById[this.data.id];
 
 		return {
 			WORKFLOW_SHARE_MODAL_KEY,
 			loading: false,
 			modalBus: new Vue(),
-			sharedWith: [...(workflowsStore.workflow.sharedWith || [])] as Array<Partial<IUser>>,
+			sharedWith: [...(workflow.sharedWith || [])] as Array<Partial<IUser>>,
 			EnterpriseEditionFeature,
 		};
 	},
@@ -150,7 +159,9 @@ export default mixins(
 			] as Array<Partial<IUser>>).concat(this.sharedWith || []);
 		},
 		workflow(): IWorkflowDb {
-			return this.workflowsStore.workflow;
+			return this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID
+				? this.workflowsStore.workflow
+				: this.workflowsStore.workflowsById[this.data.id];
 		},
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
@@ -221,7 +232,7 @@ export default mixins(
 			}
 
 			if (confirm) {
-				this.sharedWith = this.sharedWith.filter((sharee: IUser) => {
+				this.sharedWith = this.sharedWith.filter((sharee: Partial<IUser>) => {
 					return sharee.id !== user.id;
 				});
 			}

packages/editor-ui/src/components/mixins/workflowHelpers.ts

@@ -4,7 +4,7 @@ import {
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	START_NODE_TYPE,
 	WEBHOOK_NODE_TYPE,
-	VIEWS,
+	VIEWS, EnterpriseEditionFeature,
 } from '@/constants';
 
 import {
@@ -65,6 +65,8 @@ import { IWorkflowSettings } from 'n8n-workflow';
 import { useNDVStore } from '@/stores/ndv';
 import { useTemplatesStore } from '@/stores/templates';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import useWorkflowsEEStore from "@/stores/workflows.ee";
+import {useUsersStore} from "@/stores/users";
 
 let cachedWorkflowKey: string | null = '';
 let cachedWorkflow: Workflow | null = null;
@@ -83,6 +85,8 @@ export const workflowHelpers = mixins(
 				useRootStore,
 				useTemplatesStore,
 				useWorkflowsStore,
+				useWorkflowsEEStore,
+				useUsersStore,
 				useUIStore,
 			),
 		},
@@ -796,6 +800,10 @@ export const workflowHelpers = mixins(
 					this.workflowsStore.addWorkflow(workflowData);
 					this.workflowsStore.setWorkflowHash(workflowData.hash);
 
+					if (this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing) && this.usersStore.currentUser) {
+						this.workflowsEEStore.setWorkflowOwnedBy({ workflowId: workflowData.id, ownedBy: this.usersStore.currentUser });
+					}
+
 					if (openInNewWindow) {
 						const routeData = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: workflowData.id}});
 						window.open(routeData.href, '_blank');

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -1342,6 +1342,7 @@
 	"workflows.menu.my": "My workflows",
 	"workflows.menu.all": "All workflows",
 	"workflows.item.open": "Open",
+	"workflows.item.share": "Share...",
 	"workflows.item.duplicate": "Duplicate",
 	"workflows.item.delete": "Delete",
 	"workflows.item.updated": "Last updated",