mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(editor): Migrate SettingsCommunityNodesView.vue to composition API (#10724)

Browse source
This commit is contained in:
Ricardo Espinoza 2024-09-10 10:20:27 -04:00 committed by GitHub
parent 8d4afddcf4
commit 482b5d8bec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 144 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
packages/editor-ui/src/views/SettingsCommunityNodesView.vue
View file

@ -1,4 +1,4 @@
<script lang="ts"> <script setup lang="ts">
import { import {
COMMUNITY_PACKAGE_INSTALL_MODAL_KEY, COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
COMMUNITY_NODES_INSTALLATION_DOCS_URL, COMMUNITY_NODES_INSTALLATION_DOCS_URL,
@ -10,79 +10,73 @@ import type { PublicInstalledPackage } from 'n8n-workflow';
import { useCommunityNodesStore } from '@/stores/communityNodes.store'; import { useCommunityNodesStore } from '@/stores/communityNodes.store';
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/settings.store'; import { useSettingsStore } from '@/stores/settings.store';
import { defineComponent } from 'vue'; import { onBeforeUnmount, ref } from 'vue';
import { useExternalHooks } from '@/composables/useExternalHooks'; import { useExternalHooks } from '@/composables/useExternalHooks';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { usePushConnection } from '@/composables/usePushConnection'; import { usePushConnection } from '@/composables/usePushConnection';
import { usePushConnectionStore } from '@/stores/pushConnection.store'; import { usePushConnectionStore } from '@/stores/pushConnection.store';
import { computed } from 'vue';
import { useI18n } from '@/composables/useI18n';
import { onBeforeMount } from 'vue';
import { onMounted } from 'vue';
import { useTelemetry } from '@/composables/useTelemetry';
const PACKAGE_COUNT_THRESHOLD = 31; const PACKAGE_COUNT_THRESHOLD = 31;
export default defineComponent({ const loading = ref(false);
name: 'SettingsCommunityNodesView',
components: {
CommunityPackageCard,
},
setup() {
const router = useRouter();
const pushConnection = usePushConnection({ router });
const externalHooks = useExternalHooks();
return { const router = useRouter();
externalHooks, const pushConnection = usePushConnection({ router });
...useToast(), const pushStore = usePushConnectionStore();
pushConnection, const externalHooks = useExternalHooks();
}; const i18n = useI18n();
}, const telemetry = useTelemetry();
data() { const toast = useToast();
return {
loading: false,
};
},
computed: {
...mapStores(useCommunityNodesStore, useSettingsStore, useUIStore, usePushConnectionStore),
getEmptyStateDescription(): string {
const packageCount = this.communityNodesStore.availablePackageCount;
if (this.settingsStore.isDesktopDeployment) { const communityNodesStore = useCommunityNodesStore();
return this.$locale.baseText('contextual.communityNodes.unavailable.description.desktop'); const settingsStore = useSettingsStore();
const uiStore = useUIStore();
const getEmptyStateDescription = computed(() => {
const packageCount = communityNodesStore.availablePackageCount;
if (settingsStore.isDesktopDeployment) {
return i18n.baseText('contextual.communityNodes.unavailable.description.desktop');
} }
return packageCount < PACKAGE_COUNT_THRESHOLD return packageCount < PACKAGE_COUNT_THRESHOLD
? this.$locale.baseText('settings.communityNodes.empty.description.no-packages', { ? i18n.baseText('settings.communityNodes.empty.description.no-packages', {
interpolate: { interpolate: {
docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL, docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
}, },
}) })
: this.$locale.baseText('settings.communityNodes.empty.description', { : i18n.baseText('settings.communityNodes.empty.description', {
interpolate: { interpolate: {
docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL, docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
count: (Math.floor(packageCount / 10) * 10).toString(), count: (Math.floor(packageCount / 10) * 10).toString(),
}, },
}); });
}, });
getEmptyStateButtonText(): string {
if (this.settingsStore.isDesktopDeployment) { const shouldShowInstallButton = computed(() => {
return this.$locale.baseText('contextual.communityNodes.unavailable.button.desktop'); return settingsStore.isDesktopDeployment || settingsStore.isNpmAvailable;
});
const getEmptyStateButtonText = computed(() => {
if (settingsStore.isDesktopDeployment) {
return i18n.baseText('contextual.communityNodes.unavailable.button.desktop');
} }
return this.shouldShowInstallButton return shouldShowInstallButton.value
? this.$locale.baseText('settings.communityNodes.empty.installPackageLabel') ? i18n.baseText('settings.communityNodes.empty.installPackageLabel')
: ''; : '';
}, });
shouldShowInstallButton(): boolean {
return this.settingsStore.isDesktopDeployment || this.settingsStore.isNpmAvailable; const actionBoxConfig = computed(() => {
}, if (!settingsStore.isNpmAvailable) {
actionBoxConfig(): {
calloutText: string;
calloutTheme: 'warning' | string;
hideButton: boolean;
} {
if (!this.settingsStore.isNpmAvailable) {
return { return {
calloutText: this.$locale.baseText('settings.communityNodes.npmUnavailable.warning', { calloutText: i18n.baseText('settings.communityNodes.npmUnavailable.warning', {
interpolate: { npmUrl: COMMUNITY_NODES_NPM_INSTALLATION_URL }, interpolate: { npmUrl: COMMUNITY_NODES_NPM_INSTALLATION_URL },
}), }),
calloutTheme: 'warning', calloutTheme: 'warning',
@ -95,24 +89,46 @@ export default defineComponent({
calloutTheme: '', calloutTheme: '',
hideButton: false, hideButton: false,
}; };
}, });
},
beforeMount() {
this.pushConnection.initialize();
// The push connection is needed here to receive `reloadNodeType` and `removeNodeType` events when community nodes are installed, updated, or removed.
this.pushStore.pushConnect();
},
async mounted() {
try {
this.loading = true;
await this.communityNodesStore.fetchInstalledPackages();
const installedPackages: PublicInstalledPackage[] = const goToUpgrade = () => {
this.communityNodesStore.getInstalledPackages; void uiStore.goToUpgrade('community-nodes', 'upgrade-community-nodes');
};
const onClickEmptyStateButton = () => {
if (settingsStore.isDesktopDeployment) {
return goToUpgrade();
}
openInstallModal();
};
const openInstallModal = () => {
const telemetryPayload = {
is_empty_state: communityNodesStore.getInstalledPackages.length === 0,
};
telemetry.track('user clicked cnr install button', telemetryPayload);
void externalHooks.run('settingsCommunityNodesView.openInstallModal', telemetryPayload);
uiStore.openModal(COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
};
onBeforeMount(() => {
pushConnection.initialize();
// The push connection is needed here to receive `reloadNodeType` and `removeNodeType` events when community nodes are installed, updated, or removed.
pushStore.pushConnect();
});
onMounted(async () => {
try {
loading.value = true;
await communityNodesStore.fetchInstalledPackages();
const installedPackages: PublicInstalledPackage[] = communityNodesStore.getInstalledPackages;
const packagesToUpdate: PublicInstalledPackage[] = installedPackages.filter( const packagesToUpdate: PublicInstalledPackage[] = installedPackages.filter(
(p) => p.updateAvailable, (p) => p.updateAvailable,
); );
this.$telemetry.track('user viewed cnr settings page', { telemetry.track('user viewed cnr settings page', {
num_of_packages_installed: installedPackages.length, num_of_packages_installed: installedPackages.length,
installed_packages: installedPackages.map((p) => { installed_packages: installedPackages.map((p) => {
return { return {
@ -132,55 +148,34 @@ export default defineComponent({
number_of_updates_available: packagesToUpdate.length, number_of_updates_available: packagesToUpdate.length,
}); });
} catch (error) { } catch (error) {
this.showError( toast.showError(
error, error,
this.$locale.baseText('settings.communityNodes.fetchError.title'), i18n.baseText('settings.communityNodes.fetchError.title'),
this.$locale.baseText('settings.communityNodes.fetchError.message'), i18n.baseText('settings.communityNodes.fetchError.message'),
); );
} finally { } finally {
this.loading = false; loading.value = false;
} }
try { try {
await this.communityNodesStore.fetchAvailableCommunityPackageCount(); await communityNodesStore.fetchAvailableCommunityPackageCount();
} finally { } finally {
this.loading = false; loading.value = false;
}
},
beforeUnmount() {
this.pushStore.pushDisconnect();
this.pushConnection.terminate();
},
methods: {
onClickEmptyStateButton(): void {
if (this.settingsStore.isDesktopDeployment) {
return this.goToUpgrade();
} }
});
this.openInstallModal(); onBeforeUnmount(() => {
}, pushStore.pushDisconnect();
goToUpgrade(): void { pushConnection.terminate();
void this.uiStore.goToUpgrade('community-nodes', 'upgrade-community-nodes');
},
openInstallModal(): void {
const telemetryPayload = {
is_empty_state: this.communityNodesStore.getInstalledPackages.length === 0,
};
this.$telemetry.track('user clicked cnr install button', telemetryPayload);
void this.externalHooks.run('settingsCommunityNodesView.openInstallModal', telemetryPayload);
this.uiStore.openModal(COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
},
},
}); });
</script> </script>
<template> <template>
<div :class="$style.container"> <div :class="$style.container">
<div :class="$style.headingContainer"> <div :class="$style.headingContainer">
<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading> <n8n-heading size="2xlarge">{{ i18n.baseText('settings.communityNodes') }}</n8n-heading>
<n8n-button <n8n-button
v-if="communityNodesStore.getInstalledPackages.length > 0 && !loading" v-if="communityNodesStore.getInstalledPackages.length > 0 && !loading"
:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')" :label="i18n.baseText('settings.communityNodes.installModal.installButton.label')"
size="large" size="large"
@click="openInstallModal" @click="openInstallModal"
/> />
@ -197,7 +192,7 @@ export default defineComponent({
:class="$style.actionBoxContainer" :class="$style.actionBoxContainer"
> >
<n8n-action-box <n8n-action-box
:heading="$locale.baseText('settings.communityNodes.empty.title')" :heading="i18n.baseText('settings.communityNodes.empty.title')"
:description="getEmptyStateDescription" :description="getEmptyStateDescription"
:button-text="getEmptyStateButtonText" :button-text="getEmptyStateButtonText"
:callout-text="actionBoxConfig.calloutText" :callout-text="actionBoxConfig.calloutText"