mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
feat: Make it possible to dynamically load community nodes (#2849)
* ✨ Make it possible to dynamically load node packages * ⚡ Fix comment * ✨ Make possible to dynamically install nodes from npm * Created migration for sqlite regarding community nodes * Saving to db whenever a package with nodes is installed * Created endpoint to fetch installed packages * WIP - uninstall package with nodes * Fix lint issues * Updating nodes via API * Lint and improvement fixes * Created community node helpers and removed packages taht do not contain nodes * Check for package updates when fetching installed packages * Blocked access to non-owner and preventing incorrect install of packages * Added auto healing process * Unit tests for helpers * Finishing tests for helpers * Improved unit tests, refactored more helpers and created integration tests for GET * Implemented detection of missing packages on init and added warning to frontend settings * Add check for banned packages and fix broken tests * Create migrations for other db systems * Updated with latest changes from master * Fixed conflict errors * Improved unit tests, refactored more helpers and created integration tests for GET * Implemented detection of missing packages on init and added warning to frontend settings * 🔥 Removing access check for the Settings sidebar item * ✨ Added inital community nodes settings screen * ⚡Added executionMode flag to settings * ✨ Implemented N8N-callout component * 💄Updating Callout component template propery names * 💄 Updating Callout component styling. * 💄Updating Callout component sizing and colors. * ✔️ Updating Callout component test snapshots after styling changes * ✨ Updating the `ActionBox` component so it supports callouts and conditional button rendering * 💄 Removing duplicate callout theme validation in the `ActionBox` component. Adding a selection control for it in the storybook. * ✨ Added warning message if instance is in the queue mode. Updated colors based on the new design. * ⚡ Added a custom permission support to router * 🔨 Implemented UM detection as a custom permission. * 👌Updating route permission logic. * ✨ Implemented installed community packages list in the settings view * 👌 Updating settings routes rules and community nodes setting view. * Allow installation of packages that failed to load * 👌 Updating `ActionBox`, `CommuntyPackageCard` components and settings loading logic. * 👌 Fixing community nodes loading state and sidebar icon spacing. * ✨ Implemented loading skeletons for community package cards * 👌 Handling errrors while loading installed package list. Updating spacing. * 👌 Updating community nodes error messages. * Added disable flag * 🐛 Fixing a community nodes update detection bug when there are missing packages. (#3497) * ✨ Added front-end support for community nodes feature flag * ✨ Implemented community package installation modal dialog * 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state. * ✨ Implemented community packages install flow * Standardize error codes (#3501) * Standardize error: 400 for request issues such as invalid package name and 500 for installation problems * Fix http status code for when package is not found * ✨ Implemented community package installation modal dialog * 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state. * ✨ Implemented community packages install flow * ✨ Updated error handling based on the response codes * ✨ Implemented community package installation modal dialog * ✨ Implemented community package uninstall flow. * ✨ Finished update confirm modal UI * 💄 Replaced community nodes tooltip image with the one exported from figma. * ✨ Implemented community package update process * ✨ Updating community nodes list after successful package update * 🔒 Updating public API setting route to use new access rules. Updating express app definition in community nodes tests * ✨ Implemented community package installation modal dialog * 💄 Community nodes installation modal updates: Moved links to constants and used them in translations, disabling inputs in loading state. * ✨ Implemented community packages install flow * ✨ Updated error handling based on the response codes * Change output for installation request * Improve payload for update requests * 👌 Updating community nodes install modal UI * 👌 Updating community nodes confirm modal logic * 👌 Refactoring community nodes confirm modal dialog * 👌 Separating community nodes components loading states * 💄 Updating community nodes install modal spacing. * Fix behavior for installing already installed packages * 💡 Commenting community nodes install process * 🔥 Removing leftover commits of deleted Vue mutations * ✨ Updated node list to identify community nodes and handle node name clash * ✨ Implemented missing community node dialog. * 💄 Updating n8n-tabs component to support tooltips * ✨ Updating node details with community node details. * 🔨 Using back-end response when updating community packages * 👌 Updating tabs component and refactoring community nodes store mutations * 👌 Adding community node flag to node type descriptions and using it to identify community nodes * 👌 Hiding unnecessary elements from missing node details panel. * 👌 Updating missing node type descriptions for custom and community nodes * 👌 Updating community node package name detection logic * 👌 Removing communityNode flag from node description * ✨ Adding `force` flag to credentials fetching (#3527) * ✨ Adding `force` flag to credentials fetching which can be used to skip check when loading credentials * ✨ Forcing credentials loading when opening nodeView * 👌 Minor updates to community nodes details panel * tests for post endpoint * duplicate comments * Add Patch and Delete enpoints tests * 🔒 Using `pageCategory`prop to assemble the list of settings routes instead of hard-coded array (#3562) * 📈 Added front-end telemetry events for community nodes * 📈 Updating community nodes telemetry events * 💄 Updating community nodes settings UI elements based on product/design review * 💄 Updating node view & node details view for community nodes based on product/design feedback * 💄 Fixing community node text capitalisation * ✨ Adding community node install error message under the package name input field * Fixed and improved tests * Fix lint issue * feat: Migrated to npm release of riot-tmpl fork. * 📈 Updating community nodes telemetry events based on the product review * 💄 Updating community nodes UI based on the design feedback * 🔀 Merging recent node draggable panels changes * Implement self healing process * Improve error messages for package name requirement and disk space * 💄 Removing front-end error message override since appropriate response is available from the back-end * Fix lint issues * Fix installed node name * 💄 Removed additional node name parsing * 📈 Updating community nodes telemetry events * Fix postgres migration for cascading nodes when package is removed * Remove postman mock for banned packages * 📈 Adding missing telemetry event for community node documentation click * 🐛 Fixing community nodes UI bugs reported during the bug bash * Fix issue with uninstalling packages not reflecting UI * 🐛 Fixing a missing node type bug when trying to run a workflow. * Improve error detection for installing packages * 💄 Updating community nodes components styling and wording based on the product feedback * Implement telemetry be events * Add author name and email to packages * Fix telemetry be events for community packages * 📈 Updating front-end telemetry events with community nodes author data * 💄 Updating credentials documentation link logic to handle community nodes credentials * 🐛 Fixing draggable panels logic * Fix duplicate wrong import * 💄 Hiding community nodes credentials documentation links when they don't contain an absolute URL * Fix issue with detection of missing packages * 💄 Adding the `Docs` tab to community nodes * 💄 Adding a failed loading indicator to community nodes list * Prevent n8n from crashing on startup * Refactor and improve code quality * ⚡ Remove not needed depenedency Co-authored-by: Omar Ajoue <krynble@gmail.com> Co-authored-by: Milorad Filipović <milorad@n8n.io> Co-authored-by: Milorad FIlipović <miloradfilipovic19@gmail.com> Co-authored-by: agobrech <ael.gobrecht@gmail.com> Co-authored-by: Alex Grozav <alex@grozav.com>
This commit is contained in:
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<Modal
|
||||
width="540px"
|
||||
:name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"
|
||||
:title="getModalContent.title"
|
||||
:eventBus="modalBus"
|
||||
:center="true"
|
||||
:showClose="!loading"
|
||||
:beforeClose="onModalClose"
|
||||
>
|
||||
<template slot="content">
|
||||
<n8n-text>{{ getModalContent.message }}</n8n-text>
|
||||
<div :class="$style.descriptionContainer" v-if="this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE">
|
||||
<n8n-info-tip theme="info" type="note" :bold="false">
|
||||
<template>
|
||||
<span v-html="getModalContent.description"></span>
|
||||
</template>
|
||||
</n8n-info-tip>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="footer">
|
||||
<n8n-button
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
|
||||
size="large"
|
||||
float="right"
|
||||
@click="onConfirmButtonClick"
|
||||
/>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import mixins from 'vue-typed-mixins';
|
||||
import Modal from './Modal.vue';
|
||||
import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '../constants';
|
||||
import { showMessage } from './mixins/showMessage';
|
||||
|
||||
export default mixins(showMessage).extend({
|
||||
name: 'CommunityPackageManageConfirmModal',
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
props: {
|
||||
modalName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
activePackageName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
modalBus: new Vue(),
|
||||
COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
|
||||
COMMUNITY_PACKAGE_MANAGE_ACTIONS,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
activePackage() {
|
||||
return this.$store.getters['communityNodes/getInstalledPackageByName'](this.activePackageName);
|
||||
},
|
||||
getModalContent() {
|
||||
if (this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL) {
|
||||
return {
|
||||
title: this.$locale.baseText('settings.communityNodes.confirmModal.uninstall.title'),
|
||||
message: this.$locale.baseText('settings.communityNodes.confirmModal.uninstall.message', {
|
||||
interpolate: {
|
||||
packageName: this.activePackageName,
|
||||
},
|
||||
}),
|
||||
buttonLabel: this.$locale.baseText('settings.communityNodes.confirmModal.uninstall.buttonLabel'),
|
||||
buttonLoadingLabel: this.$locale.baseText('settings.communityNodes.confirmModal.uninstall.buttonLoadingLabel'),
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: this.$locale.baseText('settings.communityNodes.confirmModal.update.title', {
|
||||
interpolate: {
|
||||
packageName: this.activePackageName,
|
||||
},
|
||||
}),
|
||||
description: this.$locale.baseText('settings.communityNodes.confirmModal.update.description'),
|
||||
message: this.$locale.baseText('settings.communityNodes.confirmModal.update.message', {
|
||||
interpolate: {
|
||||
packageName: this.activePackageName,
|
||||
version: this.activePackage.updateAvailable,
|
||||
},
|
||||
}),
|
||||
buttonLabel: this.$locale.baseText('settings.communityNodes.confirmModal.update.buttonLabel'),
|
||||
buttonLoadingLabel: this.$locale.baseText('settings.communityNodes.confirmModal.update.buttonLoadingLabel'),
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onModalClose() {
|
||||
return !this.loading;
|
||||
},
|
||||
async onConfirmButtonClick() {
|
||||
if (this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL) {
|
||||
await this.onUninstall();
|
||||
} else if (this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE) {
|
||||
await this.onUpdate();
|
||||
}
|
||||
},
|
||||
async onUninstall() {
|
||||
try {
|
||||
this.$telemetry.track('user started cnr package deletion', {
|
||||
package_name: this.activePackage.packageName,
|
||||
package_node_names: this.activePackage.installedNodes.map(node => node.name),
|
||||
package_version: this.activePackage.installedVersion,
|
||||
package_author: this.activePackage.authorName,
|
||||
package_author_email: this.activePackage.authorEmail,
|
||||
});
|
||||
this.loading = true;
|
||||
await this.$store.dispatch('communityNodes/uninstallPackage', this.activePackageName);
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('settings.communityNodes.messages.uninstall.success.title'),
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.communityNodes.messages.uninstall.error'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.modalBus.$emit('close');
|
||||
}
|
||||
},
|
||||
async onUpdate() {
|
||||
try {
|
||||
this.$telemetry.track('user started cnr package update', {
|
||||
package_name: this.activePackage.packageName,
|
||||
package_node_names: this.activePackage.installedNodes.map(node => node.name),
|
||||
package_version_current: this.activePackage.installedVersion,
|
||||
package_version_new: this.activePackage.updateAvailable,
|
||||
package_author: this.activePackage.authorName,
|
||||
package_author_email: this.activePackage.authorEmail,
|
||||
});
|
||||
this.loading = true;
|
||||
const updatedVersion = this.activePackage.updateAvailable;
|
||||
await this.$store.dispatch('communityNodes/updatePackage', this.activePackageName);
|
||||
this.$showMessage({
|
||||
title: this.$locale.baseText('settings.communityNodes.messages.update.success.title'),
|
||||
message: this.$locale.baseText('settings.communityNodes.messages.update.success.message', {
|
||||
interpolate: {
|
||||
packageName: this.activePackageName,
|
||||
version: updatedVersion,
|
||||
},
|
||||
}),
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
this.$showError(error, this.$locale.baseText('settings.communityNodes.messages.update.error.title'));
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.modalBus.$emit('close');
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module lang="scss">
|
||||
.descriptionContainer {
|
||||
display: flex;
|
||||
margin: var(--spacing-s) 0;
|
||||
}
|
||||
|
||||
.descriptionIcon {
|
||||
align-self: center;
|
||||
color: var(--color-text-lighter);
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
padding: 0 var(--spacing-xs);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user