feat(cli): User Management and Credentials sharing (#3602)

* 🎉 starting feature development

* ✨ sharing/unsharing a credential (#3601)

* 🎉 initial design

* ✨ sharing/unsharing of credentials

* ✅ add tests for EE credentials controller

* 💪 implement review comments

* 🛠 refactor agent creation and credential role locking

* 👕 linting adjustments (#3691)

* 👕 Adjust rule `naming-convention`

* 👕 Fix `naming-convention` config value

* 👕 Disregard casing for EE-prefixed vars

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* 🛠 refactor authAgents in tests (#3725)

* 🛠 refactor authAgent

* 🛠 refactor authAgent

* 🛠 refactor authAgent

* 🛠 refactor authAgent

* 👕 fix ts issue

* 🐘 add migration for mysql and postgres + add AuthAgent type

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* ⚡️ refactor existing credentials routes (#3672)

* 🎉 initial design

* ✨ sharing/unsharing of credentials

* ♻️ split credential update route into controller and service

* 🔥 remove credentials test that is no longer applicable

* ♻️ split credential creation route into controller and service

* ♻️ split single credential get

* ♻️ split delete credentials route

* ♻️ split get all credentials route

* 🔥 remove unused imports in credentials contoller

* 🔥 remove console.log

* :refactor: changes to credentials controller and service from review

 - removed credentials from service function names
 - made relations list optional
 - put allowGlobalOwner in options objects
 - check length of relations array so join doesn't happen if empty
 - update some comments to further explain rationale
 - remove unneeded `Object.assign`
 - remove non-null assertion from test

* ♻️ move filtered credentials selected fields to variable

* ♻️ remove unneeded merges in credentials service

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* ✅ fix test

* 🐛 fix imports

* 👕 fix lint issue

* User Management: switch over to decorators to define routes (#3827)

* Add permissions details to credentials for User Management (#3863)

* ⚡ Open `GET /users`

* ⚡ Add permissions to cred service

* 🚚 Rename method

* ⚡ Refactor cred controller

* 🧪 Adjust test

* ✏️ Improve comment

* ✏️ Improve another comment

* ⚡ Account for multiple sharings

* 🐛 Fix access when user is editor

* 📘 Expand interface

* 📘 Relocate types

* 📘 Exempt cred entity with service-injected fields

* 📘 Adjust interface

* ♻️ Add permissions only in `GET /credentials`

* 🧪 Add expectations for `ownedBy`

* 🧪 Add sharing details test

* 🧪 Make `ownedBy` checks more granular

* 📘 Adjust interface

* 🚚 Rename cred getter

* ♻️ Refactor cred getter

* 🧪 Expand tests

* ♻️ Refactor to use guard

* 👕 Remove unneeded lint exception

* 🔥 Remove unneeded relation

* 🚚 Move relation to `GET /credentials/:id`

* 📘 Consolidate typings

* 🎨 Add multiline for readability

* 🔥 Remove unneeded type

* ✏️ Clarity comment

* ✏️ Make comments consistent

* 👕 Add exception to fix build

* 👕 Add more lint exceptions to fix build

* 🐛 Check for non-owner

* 📘 Improve typings

* 🧪 Temporarily skip tests

* 🔥 Remove `@ts-ignore`

* 👕 Move lint exceptions

* ♻️ Refactor cred service and controller

* ⚡ Simplify check

* ✏️ adjust naming to experimental

* ⚡️ add credentialsSharing flag to settings

* 🛠 add helper to check if UM is also enabled as dependency for CredentialsSharing

* 👕 fix lint error

* 🐘 change name of credential role

* 🚧 WIP batch sharing

* 🚧 WIP use put for sharing

* ✅ add tests for batch sharing, 🛠 implement review suggestions

* ✅ expand credential sharing tests for User Management (#3931)

* 🧪 Expand cred sharing tests

* ⚡ Add recently added flags

* ✅ fix and adjust tests for /credentials

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

* ✨ User management v2 Front End (#3795)

* feat: Added responsive generic page view layout.

* feat: Added empty state.

* feat: Added credentials view empty state.

* test: Added unit tests for N8nActionBox

* feat: Added credentials list initial design.

* feat: Added credential actions. Started working on filters.

* feat: Updated InfoTip markup, added tests and changed stories to typescript.

* feat: Added credentials filtering by type. Added support for apply/reset filters.

* feat: Added credential sharing user select and user list. Added paywall component.

* feat: Updated credentials view permissions.

* feat: Added support for temporary sharing config for unsaved credentials.

* test: Fixed broken snapshots.

* feat: Added overflow styles to page-view-layout list.

* feat: Handled sharee specific views.

* feat: Integration between FE and BE to support real-world credential sharing scenario.

* feat: Added front end permissions table.

* feat: Refactored credential sharing flow. Updated design elements.

* feat: Added margin and padding auto spacer utilities.

* feat: Rehauled permissions to support instanceOwner role and action inheritance.

* feat: Updated credentials view to apply filters automatically.

* feat: Removed apply filters button and added active button state.

* test: Updated component snapshots.

* refactor: Renamed ResourceSharee to ResourceReader.

* feat: Credential sharing error handling, permissions improvement.

* feat: Updated permissions and error handling.

* chore: Removed console.log.

* 🛠 refactor enabling of credentialsSharing

* feat: Removed owner menu selector from credentials when sharing is disabled.

* refactor: Moved EE features into ee store module file.

* 🛠 add sharing info to GET credentials/:id

* fix: Fixed initial credential data loading for sharing.

* chore: Removed console.log.

* 🐛 owner can fetch any credential

* 🛠 refactor users test

* 👕 fix build type issue

* fix: Removed owner tag when credential sharing is disabled. Fixed small reactivity issue.

* chore: Removed console.log.

* 🚧 separate fetching credentials between EE and open

* fix: Fixed empty dropdown in users list.

* fix: Fixed error message and initialization when credential gets unshared.

* ✅ add tests for fetching single credential

* Revert decorators based controllers

* ⚡️ adjust credentials test route to also allow testing for sharees (#3999)

* ⚡️ pull data if user is sharee

* fix: Removed sharedWith and ownedBy from credentialData on testing credentials.

Co-authored-by: Alex Grozav <alex@grozav.com>

* 📈 add BE analytics

* 💪 improve credential test

* ⚡️ adjust tracking properties

* ⚡️ removed roles from tracking

* 🐛 fix build by removing imports

* 🐛 fix missed merge conflict

* feat: User management P2 Front End bug bash and improvements (#4014)

* fix: Fixed type select size after reopening dropdown.

* fix: Fixed template cards.

* fix: Fixed card content size and copy input.

* fix: Fixed horizontal overflow.

* fix: Hiding el-tags scrollbar in select.

* fix: Added fallback credential icon. Added oAuth credential owner check.

* feat: Added disabled state to user select.

* feat: Added fallback scenario for non-existent credential types.

* feat: Adjusted credentials empty state to show that there are shared credentials.

* fix: Fixed time title.

* feat: Added actionable empty state when shared credentials are present.

* fix: Made action box x padding smaller

* feat: Repositioned owner tag for credential card.

* feat: Updated message box styling to use n8n css variables.

* feat: Added confirmation for deleting sharee.

* fix: Fixed deleted credential types. Fixed select in dropdown bug.

* fix: Various code improvements. Addressed PR review comments.

* fix: Fixed credential deletion errors.

* fix: Various code quality improvements.

* feat: N8N-4531 update cloud coming soon features (#4025)

* feat: Showing different upcoming feature messages and format for cloud.

* fix: Changed url format.

* fix: Updated how cloud deployment is determined.

* feat: N8N-4527 implementing credential sharing FE telemetry (#4023)

* feat: Added credential sharing telemetry.

* chore: Renamed computed function for consistency.

* refactor: Simplified subview telemetry sending.

* fix: Changed to callDebounced() helper.

* 📧 update email text

* fix: Adjusted feature coming soon margin.

* chore: Fixed type and line height for delete sharee confirmation modal.

* refactor(editor-ui): Update telemetry (#4040)

* 🔥 Remove `identify` from BE

* ⚡ Add `versionCli`

* ⚡ Add node creator ignore input

* ⚡ Move obfuscators to editor-ui

* ⚡ Refactor `ph-no-capture`

* ⚡ Pass `user_id` to manual exec props

* 🚚 Relocate class in `SettingsApiView`

* ⚡ Add `userId` to BE PH `identify` call

* ⏪ Revert "⚡ Add `userId` to BE PH `identify` call"

This reverts commit 895aaa45e51506d5dbdcbdabe249a2c743d8e468.

* Revert "⏪ Revert "⚡ Add `userId` to BE PH `identify` call""

This reverts commit b86a098c202155742c927c88c04c971a5d34dce5.

* 🐛 Fix `Promise` handling in `track()` call

* ⏪ Restore `Db.collections` call

* ⚡ Set up PH payload to mirror RS

* 🔥 Remove excess `userId`

* 📘 Remove `userId` from interface

* 🔥 Remove unused ref and method

* fix: Fixed bug causing instanceOwner to become credential owner on update. (#4079)

* 🐛 fix test for credential shared with member

* 👕 fix lint issues

* delete conflicting migration. this data is already seeded in CreateUserManagement

* feat: Expand obfuscation to User Management credential sharing (#4070)

⚡ Expand obfuscation

* feat: Added credential sharing infotip for instance owner.

* bring back the migration. add a check to avoid conflicts on inserts

* fix(cli): use a non-env config flag to detect of enterprise features are enabled (#4105)

* chore: Changed ampersand to and in translation.

* refactor(telemetry): Obfuscate code and JSON editors (#4118)

⚡ Obfuscate code and JSON editors

* feat(editor): improve design and functionality of coming soon features (#4116)

* feat: Improved coming soon feature design and functionality.

* style: Removed empty line.

* chore: Removed unused translation.

* fix: fix telemetry for credential creates and updates (#4125)

fix telemetry for credential creates and updates

* feat: Display errors due to missing credentials in the correct node (#4124)

feat: Display errors due to invalid credentials in the correct node when missing permissions

* fix: remove duplicate header for coming soon features in cloud deployment

* telemetry: fix the payload for `User viewed credential tab`

* telemetry: add credential_id to 'User selected credential from node modal'

* feat: update empty states for coming soon features

* Update ActionBox.spec.ts.snap

* replace UserSharingsDetails with a subset of User properties

* rename the CreateCredentialsEditorRole to CreateCredentialsUserRole

* move IUser to the workflow package

* use IUser in the frontend as well

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Valya <68596159+valya@users.noreply.github.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com>
Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Omar Ajoue <krynble@gmail.com>

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

@@ -9,21 +9,22 @@
 		height="80%"
 	>
 		<template slot="header">
-			<div v-if="credentialType" :class="$style.header">
+			<div :class="$style.header">
 				<div :class="$style.credInfo">
 					<div :class="$style.credIcon">
 						<CredentialIcon :credentialTypeName="credentialTypeName" />
 					</div>
 					<InlineNameEdit
 						:name="credentialName"
-						:subtitle="credentialType.displayName"
+						:subtitle="credentialType ? credentialType.displayName : ''"
+						:readonly="!credentialPermissions.updateName"
 						type="Credential"
 						@input="onNameEdit"
 					/>
 				</div>
 				<div :class="$style.credActions">
 					<n8n-icon-button
-						v-if="currentCredential"
+						v-if="currentCredential && credentialPermissions.delete"
 						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
 						icon="trash"
 						size="medium"
@@ -33,7 +34,7 @@
 						@click="deleteCredential"
 					/>
 					<SaveButton
-						v-if="hasUnsavedChanges || credentialId"
+						v-if="(hasUnsavedChanges || credentialId) && credentialPermissions.save"
 						:saved="!hasUnsavedChanges && !isTesting"
 						:isSaving="isSaving || isTesting"
 						:savingLabel="isTesting
@@ -54,20 +55,27 @@
 						defaultActive="connection"
 						:light="true"
 					>
-						<n8n-menu-item index="connection"
-							><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span></n8n-menu-item
-						>
-						<n8n-menu-item
-							v-for="fakeDoor in credentialsFakeDoorFeatures"
-							v-bind:key="fakeDoor.featureName"
-							:index="`coming-soon/${fakeDoor.id}`"
-							:class="$style.tab"
-						>
-							<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
+						<n8n-menu-item index="connection">
+							<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.connection') }}</span>
+						</n8n-menu-item>
+						<enterprise-edition v-if="credentialType" :features="[EnterpriseEditionFeature.Sharing]">
+							<n8n-menu-item index="sharing">
+								<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.sharing') }}</span>
+							</n8n-menu-item>
+							<template #fallback>
+								<n8n-menu-item
+									v-for="fakeDoor in credentialsFakeDoorFeatures"
+									v-bind:key="fakeDoor.featureName"
+									:index="`coming-soon/${fakeDoor.id}`"
+									:class="$style.tab"
+								>
+									<span slot="title">{{ $locale.baseText(fakeDoor.featureName) }}</span>
+								</n8n-menu-item>
+							</template>
+						</enterprise-edition>
+						<n8n-menu-item v-if="credentialType" index="details">
+							<span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span>
 						</n8n-menu-item>
-						<n8n-menu-item index="details"
-							><span slot="title">{{ $locale.baseText('credentialEdit.credentialEdit.details') }}</span></n8n-menu-item
-						>
 					</n8n-menu>
 				</div>
 				<div v-if="activeTab === 'connection'" :class="$style.mainContent" ref="content">
@@ -75,6 +83,7 @@
 						:credentialType="credentialType"
 						:credentialProperties="credentialProperties"
 						:credentialData="credentialData"
+						:credentialId="credentialId"
 						:showValidationWarning="showValidationWarning"
 						:authError="authError"
 						:testedSuccessfully="testedSuccessfully"
@@ -83,21 +92,36 @@
 						:isRetesting="isRetesting"
 						:parentTypes="parentTypes"
 						:requiredPropertiesFilled="requiredPropertiesFilled"
+						:credentialPermissions="credentialPermissions"
 						@change="onDataChange"
 						@oauth="oAuthCredentialAuthorize"
 						@retest="retestCredential"
 						@scrollToTop="scrollToTop"
 					/>
 				</div>
-				<div v-if="activeTab === 'details'" :class="$style.mainContent">
+				<enterprise-edition
+					v-else-if="activeTab === 'sharing' && credentialType"
+					:class="$style.mainContent"
+					:features="[EnterpriseEditionFeature.Sharing]"
+				>
+					<CredentialSharing
+						:credential="currentCredential"
+						:credentialData="credentialData"
+						:credentialId="credentialId"
+						:credentialPermissions="credentialPermissions"
+						@change="onChangeSharedWith"
+					/>
+				</enterprise-edition>
+				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
 					<CredentialInfo
 						:nodeAccess="nodeAccess"
 						:nodesWithAccess="nodesWithAccess"
 						:currentCredential="currentCredential"
+						:credentialPermissions="credentialPermissions"
 						@accessChange="onNodeAccessChange"
 					/>
 				</div>
-				<div v-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
+				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
 					<FeatureComingSoon :featureId="activeTab.split('/')[1]"></FeatureComingSoon>
 				</div>
 			</div>
@@ -126,6 +150,7 @@ import {
 	INodeProperties,
 	INodeTypeDescription,
 	ITelemetryTrackProperties,
+	IUser,
 	NodeHelpers,
 } from 'n8n-workflow';
 import CredentialIcon from '../CredentialIcon.vue';
@@ -136,18 +161,24 @@ import { showMessage } from '../mixins/showMessage';
 
 import CredentialConfig from './CredentialConfig.vue';
 import CredentialInfo from './CredentialInfo.vue';
+import CredentialSharing from "./CredentialSharing.ee.vue";
 import SaveButton from '../SaveButton.vue';
 import Modal from '../Modal.vue';
 import InlineNameEdit from '../InlineNameEdit.vue';
+import {EnterpriseEditionFeature} from "@/constants";
+import {IDataObject} from "n8n-workflow";
 import FeatureComingSoon from '../FeatureComingSoon.vue';
+import {mapGetters} from "vuex";
+import {getCredentialPermissions, IPermissions} from "@/permissions";
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
 }
 
 export default mixins(showMessage, nodeHelpers).extend({
-	name: 'CredentialsDetail',
+	name: 'CredentialEdit',
 	components: {
+		CredentialSharing,
 		CredentialConfig,
 		CredentialIcon,
 		CredentialInfo,
@@ -162,7 +193,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			required: true,
 		},
 		activeId: {
-			type: String,
+			type: [String, Number],
 			required: true,
 		},
 		mode: {
@@ -173,7 +204,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		return {
 			activeTab: 'connection',
 			authError: '',
-			credentialId: '',
+			credentialId: '' as string | number,
 			credentialName: '',
 			credentialData: {} as ICredentialDataDecryptedObject,
 			modalBus: new Vue(),
@@ -186,6 +217,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			showValidationWarning: false,
 			testedSuccessfully: false,
 			isRetesting: false,
+			EnterpriseEditionFeature,
 		};
 	},
 	async mounted() {
@@ -207,6 +239,13 @@ export default mixins(showMessage, nodeHelpers).extend({
 				'credentials/getNewCredentialName',
 				{ credentialTypeName: this.credentialTypeName },
 			);
+
+			Vue.set(this.credentialData, 'ownedBy', {
+				id: this.currentUser.id,
+				firstName: this.currentUser.firstName,
+				lastName: this.currentUser.lastName,
+				email: this.currentUser.email,
+			});
 		} else {
 			await this.loadCurrentCredential();
 		}
@@ -239,6 +278,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		this.loading = false;
 	},
 	computed: {
+		...mapGetters('users', ['currentUser']),
 		currentCredential(): ICredentialsResponse | null {
 			if (!this.credentialId) {
 				return null;
@@ -257,7 +297,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return null;
 			}
 
-			return this.activeId;
+			return `${this.activeId}`;
 		},
 		credentialType(): ICredentialType | null {
 			if (!this.credentialTypeName) {
@@ -268,6 +308,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 				this.credentialTypeName,
 			);
 
+			if (!type) {
+				return null;
+			}
+
 			return {
 				...type,
 				properties: this.getCredentialProperties(this.credentialTypeName),
@@ -278,7 +322,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return false;
 			}
 
-			const hasExpressions = Object.values(this.credentialData).reduce((accu: boolean, value: CredentialInformation) => accu || (typeof value === 'string' && value.startsWith('=')), false);
+			const { ownedBy, sharedWith, ...credentialData } = this.credentialData;
+			const hasExpressions = Object.values(credentialData).reduce((accu: boolean, value: CredentialInformation) => accu || (typeof value === 'string' && value.startsWith('=')), false);
 			if (hasExpressions) {
 				return false;
 			}
@@ -369,6 +414,13 @@ export default mixins(showMessage, nodeHelpers).extend({
 		credentialsFakeDoorFeatures(): IFakeDoor[] {
 			return this.$store.getters['ui/getFakeDoorByLocation']('credentialsModal');
 		},
+		credentialPermissions(): IPermissions {
+			if (this.loading) {
+				return {};
+			}
+
+			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
+		},
 	},
 	methods: {
 		async beforeClose() {
@@ -383,8 +435,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText'),
 					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText'),
 				);
-			}
-			else if (this.isOAuthType && !this.isOAuthConnected) {
+			} else if (this.credentialPermissions.isOwner && this.isOAuthType && !this.isOAuthConnected) {
 				keepEditing = await this.confirmMessage(
 					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'),
 					this.$locale.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'),
@@ -426,21 +477,19 @@ export default mixins(showMessage, nodeHelpers).extend({
 			);
 		},
 		getCredentialProperties(name: string): INodeProperties[] {
-			const credentialsData =
+			const credentialTypeData =
 				this.$store.getters['credentials/getCredentialTypeByName'](name);
 
-			if (!credentialsData) {
-				throw new Error(
-					this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialOfType') + ':' + name,
-				);
+			if (!credentialTypeData) {
+				return [];
 			}
 
-			if (credentialsData.extends === undefined) {
-				return credentialsData.properties;
+			if (credentialTypeData.extends === undefined) {
+				return credentialTypeData.properties;
 			}
 
 			const combineProperties = [] as INodeProperties[];
-			for (const credentialsTypeName of credentialsData.extends) {
+			for (const credentialsTypeName of credentialTypeData.extends) {
 				const mergeCredentialProperties =
 					this.getCredentialProperties(credentialsTypeName);
 				NodeHelpers.mergeNodeProperties(
@@ -452,7 +501,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			// The properties defined on the parent credentials take presidence
 			NodeHelpers.mergeNodeProperties(
 				combineProperties,
-				credentialsData.properties,
+				credentialTypeData.properties,
 			);
 
 			return combineProperties;
@@ -462,10 +511,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.credentialId = this.activeId;
 
 			try {
-				const currentCredentials: ICredentialsDecryptedResponse =
-					await this.$store.dispatch('credentials/getCredentialData', {
-						id: this.credentialId,
-					});
+				const currentCredentials: ICredentialsDecryptedResponse = await this.$store.dispatch('credentials/getCredentialData', {
+					id: this.credentialId,
+				});
+
 				if (!currentCredentials) {
 					throw new Error(
 						this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') + ':' + this.credentialId,
@@ -473,6 +522,13 @@ export default mixins(showMessage, nodeHelpers).extend({
 				}
 
 				this.credentialData = currentCredentials.data || {};
+				if (currentCredentials.sharedWith) {
+					Vue.set(this.credentialData, 'sharedWith', currentCredentials.sharedWith);
+				}
+				if (currentCredentials.ownedBy) {
+					Vue.set(this.credentialData, 'ownedBy', currentCredentials.ownedBy);
+				}
+
 				this.credentialName = currentCredentials.name;
 				currentCredentials.nodesAccess.forEach(
 					(access: { nodeType: string }) => {
@@ -500,6 +556,9 @@ export default mixins(showMessage, nodeHelpers).extend({
 				credential_type: credType,
 				node_type: activeNode ? activeNode.type : null,
 				tab: tabName,
+				workflow_id: this.$store.getters.workflowId,
+				credential_id: this.credentialId,
+				sharing_enabled: EnterpriseEditionFeature.Sharing,
 			});
 		},
 		onNodeAccessChange({name, value}: {name: string, value: boolean}) {
@@ -519,6 +578,10 @@ export default mixins(showMessage, nodeHelpers).extend({
 				};
 			}
 		},
+		onChangeSharedWith(sharees: IDataObject[]) {
+			Vue.set(this.credentialData, 'sharedWith', sharees);
+			this.hasUnsavedChanges = true;
+		},
 		onDataChange({ name, value }: { name: string; value: any }) { // tslint:disable-line:no-any
 			this.hasUnsavedChanges = true;
 
@@ -588,11 +651,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 				(access) => !!access,
 			) as ICredentialNodeAccess[];
 
+			const { ownedBy, sharedWith, ...credentialData } = this.credentialData;
 			const details: ICredentialsDecrypted = {
 				id: this.credentialId,
 				name: this.credentialName,
 				type: this.credentialTypeName!,
-				data: this.credentialData,
+				data: credentialData,
 				nodesAccess,
 			};
 
@@ -638,12 +702,21 @@ export default mixins(showMessage, nodeHelpers).extend({
 				null,
 			);
 
+			let sharedWith: IUser[] | undefined;
+			let ownedBy: IUser | undefined;
+			if (this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
+				sharedWith = this.credentialData.sharedWith as unknown as IUser[];
+				ownedBy = this.credentialData.ownedBy as unknown as IUser;
+			}
+
 			const credentialDetails: ICredentialsDecrypted = {
 				id: this.credentialId,
 				name: this.credentialName,
 				type: this.credentialTypeName!,
 				data: data as unknown as ICredentialDataDecryptedObject,
 				nodesAccess,
+				sharedWith,
+				ownedBy,
 			};
 
 			let credential;
@@ -728,11 +801,17 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return null;
 			}
 
-			this.$externalHooks().run('credentials.create', {
-				credentialTypeData: this.credentialData,
+			this.$externalHooks().run('credential.saved', {
+				credential_type: credentialDetails.type,
+				credential_id: credential.id,
+				is_new: true,
 			});
 
-			this.$telemetry.track('User created credentials', { credential_type: credentialDetails.type, workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User created credentials', {
+				credential_type: credentialDetails.type,
+				credential_id: credential.id,
+				workflow_id: this.$store.getters.workflowId,
+			});
 
 			return credential;
 		},
@@ -756,6 +835,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return null;
 			}
 
+			this.$externalHooks().run('credential.saved', {
+				credential_type: credentialDetails.type,
+				credential_id: credential.id,
+				is_new: false,
+			});
+
 			// Now that the credentials changed check if any nodes use credentials
 			// which have now a different name
 			this.updateNodesCredentialsIssues();
@@ -879,12 +964,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 <style module lang="scss">
 .credentialModal {
-	max-width: 900px;
-	--dialog-close-top: 28px;
+	--dialog-max-width: 900px;
+	--dialog-close-top: 31px;
 }
 
 .mainContent {
-	flex-grow: 1;
+	flex: 1;
 	overflow: auto;
 	padding-bottom: 100px;
 }
@@ -907,14 +992,19 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 .credInfo {
 	display: flex;
+	align-items: center;
+	flex-direction: row;
 	flex-grow: 1;
-	margin-bottom: var(--spacing-s);
+	margin-bottom: var(--spacing-l);
 }
 
 .credActions {
 	display: flex;
-	align-items: flex-start;
+	flex-direction: row;
+	align-items: center;
 	margin-right: var(--spacing-xl);
+	margin-bottom: var(--spacing-l);
+
 	> * {
 		margin-left: var(--spacing-2xs);
 	}
@@ -925,5 +1015,4 @@ export default mixins(showMessage, nodeHelpers).extend({
 	align-items: center;
 	margin-right: var(--spacing-xs);
 }
-
 </style>