mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Make it possible to dynamically load community nodes (#2849)

Browse Source 
* ✨ 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:
Jan Oberhauser
2022-07-20 16:24:03 +02:00
committed by GitHub
parent a02b206170
commit c85faff4f1
80 changed files with 3951 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
packages/editor-ui/src/views/SettingsCommunityNodesView.vue Normal file
View File

@@ -0,0 +1,199 @@
<template>
<SettingsView>
<div :class="$style.container">
<div :class="$style.headingContainer">
<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
<n8n-button
v-if="!isQueueModeEnabled && getInstalledPackages.length > 0 && !loading"
:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
size="large"
@click="openInstallModal"
/>
</div>
<n8n-action-box
v-if="isQueueModeEnabled"
:heading="$locale.baseText('settings.communityNodes.empty.title')"
:description="getEmptyStateDescription"
:calloutText="actionBoxConfig.calloutText"
:calloutTheme="actionBoxConfig.calloutTheme"
@click="openInstallModal"
@descriptionClick="onDescriptionTextClick"
/>
<div
:class="$style.cardsContainer"
v-else-if="loading"
>
<community-package-card
v-for="n in 2"
:key="'index-' + n"
:loading="true"
></community-package-card>
</div>
<div
v-else-if="getInstalledPackages.length === 0"
:class="$style.actionBoxContainer"
>
<n8n-action-box
:heading="$locale.baseText('settings.communityNodes.empty.title')"
:description="getEmptyStateDescription"
:buttonText="$locale.baseText('settings.communityNodes.empty.installPackageLabel')"
:calloutText="actionBoxConfig.calloutText"
:calloutTheme="actionBoxConfig.calloutTheme"
@click="openInstallModal"
@descriptionClick="onDescriptionTextClick"
/>
</div>
<div
:class="$style.cardsContainer"
v-else
>
<community-package-card
v-for="communityPackage in getInstalledPackages"
:key="communityPackage.packageName"
:communityPackage="communityPackage"
></community-package-card>
</div>
</div>
</SettingsView>
</template>
<script lang="ts">
import { mapGetters } from 'vuex';
import SettingsView from './SettingsView.vue';
import CommunityPackageCard from '../components/CommunityPackageCard.vue';
import { showMessage } from '@/components/mixins/showMessage';
import mixins from 'vue-typed-mixins';
import { COMMUNITY_PACKAGE_INSTALL_MODAL_KEY, COMMUNITY_NODES_INSTALLATION_DOCS_URL } from '../constants';
import { PublicInstalledPackage } from 'n8n-workflow';
const PACKAGE_COUNT_THRESHOLD = 31;
export default mixins(
showMessage,
).extend({
name: 'SettingsCommunityNodesView',
components: {
SettingsView,
CommunityPackageCard,
},
data () {
return {
loading: false,
};
},
async mounted() {
try {
this.$data.loading = true;
await this.$store.dispatch('communityNodes/fetchInstalledPackages');
const installedPackages: PublicInstalledPackage[] = this.getInstalledPackages;
const packagesToUpdate: PublicInstalledPackage[] = installedPackages.filter(p => p.updateAvailable );
this.$telemetry.track('user viewed cnr settings page', {
num_of_packages_installed: installedPackages.length,
installed_packages: installedPackages.map(p => {
return {
package_name: p.packageName,
package_version: p.installedVersion,
package_nodes: p.installedNodes.map(node => `${node.name}-v${node.latestVersion}`),
is_update_available: p.updateAvailable !== undefined,
};
}),
packages_to_update: packagesToUpdate.map(p => {
return {
package_name: p.packageName,
package_version_current: p.installedVersion,
package_version_available: p.updateAvailable,
};
}),
number_of_updates_available: packagesToUpdate.length,
});
} catch (error) {
this.$showError(
error,
this.$locale.baseText('settings.communityNodes.fetchError.title'),
this.$locale.baseText('settings.communityNodes.fetchError.message'),
);
} finally {
this.$data.loading = false;
}
try {
await this.$store.dispatch('communityNodes/fetchAvailableCommunityPackageCount');
} finally {
this.$data.loading = false;
}
},
computed: {
...mapGetters('settings', ['isQueueModeEnabled']),
...mapGetters('communityNodes', ['getInstalledPackages']),
getEmptyStateDescription() {
const packageCount = this.$store.getters['communityNodes/availablePackageCount'];
return packageCount < PACKAGE_COUNT_THRESHOLD ?
this.$locale.baseText('settings.communityNodes.empty.description.no-packages', {
interpolate: {
docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
},
}) :
this.$locale.baseText('settings.communityNodes.empty.description', {
interpolate: {
docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
count: (Math.floor(packageCount / 10) * 10).toString(),
},
});
},
actionBoxConfig() {
return this.isQueueModeEnabled ? {
calloutText: this.$locale.baseText('settings.communityNodes.queueMode.warning', {
interpolate: { docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL },
}),
calloutTheme: 'warning',
hideButton: true,
} : {
calloutText: '',
calloutTheme: '',
hideButton: false,
};
},
},
methods: {
openInstallModal(event: MouseEvent) {
this.$telemetry.track('user clicked cnr install button', { is_empty_state: this.getInstalledPackages.length === 0 });
this.$store.dispatch('ui/openModal', COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
},
onDescriptionTextClick(event: MouseEvent) {
if ((event.target as Element).localName === 'a') {
this.$telemetry.track('user clicked cnr learn more link', { source: 'cnr settings page' });
}
},
},
});
</script>
<style lang="scss" module>
.container {
height: 100%;
padding-right: var(--spacing-2xs);
> * {
margin-bottom: var(--spacing-2xl);
}
}
.headingContainer {
display: flex;
justify-content: space-between;
}
.loadingContainer {
display: flex;
gap: var(--spacing-xs);
}
.actionBoxContainer {
text-align: center;
}
.cardsContainer {
display: flex;
flex-direction: column;
gap: var(--spacing-2xs);
}
</style>