refactor(editor): Migrate community nodes modals to composition api (no-changelog) (#10909)

Co-authored-by: Ricardo Espinoza <ricardo@n8n.io>

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

@@ -1,6 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
 import { createEventBus } from 'n8n-design-system/utils';
 import Modal from '@/components/Modal.vue';
 import {
@@ -11,97 +9,87 @@ import {
 } from '@/constants';
 import { useToast } from '@/composables/useToast';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
+import { ref } from 'vue';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useI18n } from '@/composables/useI18n';
 
-export default defineComponent({
+const communityNodesStore = useCommunityNodesStore();
-	name: 'CommunityPackageInstallModal',
+
-	components: {
+const toast = useToast();
-		Modal,
+const telemetry = useTelemetry();
-	},
+const i18n = useI18n();
-	setup() {
+
-		return {
+const modalBus = createEventBus();
-			...useToast(),
+
-		};
+const loading = ref(false);
-	},
+const packageName = ref('');
-	data() {
+const userAgreed = ref(false);
-		return {
+const checkboxWarning = ref(false);
-			loading: false,
+const infoTextErrorMessage = ref('');
-			packageName: '',
+
-			userAgreed: false,
+const openNPMPage = () => {
-			modalBus: createEventBus(),
+	telemetry.track('user clicked cnr browse button', { source: 'cnr install modal' });
-			checkboxWarning: false,
+	window.open(NPM_KEYWORD_SEARCH_URL, '_blank');
-			infoTextErrorMessage: '',
+};
-			COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
+
-			NPM_KEYWORD_SEARCH_URL,
+const onInstallClick = async () => {
-			COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+	if (!userAgreed.value) {
-			COMMUNITY_NODES_RISKS_DOCS_URL,
+		checkboxWarning.value = true;
-		};
+	} else {
-	},
+		try {
-	computed: {
+			telemetry.track('user started cnr package install', {
-		...mapStores(useCommunityNodesStore),
+				input_string: packageName.value,
-	},
+				source: 'cnr settings page',
-	methods: {
-		openNPMPage() {
-			this.$telemetry.track('user clicked cnr browse button', { source: 'cnr install modal' });
-			window.open(NPM_KEYWORD_SEARCH_URL, '_blank');
-		},
-		async onInstallClick() {
-			if (!this.userAgreed) {
-				this.checkboxWarning = true;
-			} else {
-				try {
-					this.$telemetry.track('user started cnr package install', {
-						input_string: this.packageName,
-						source: 'cnr settings page',
-					});
-					this.infoTextErrorMessage = '';
-					this.loading = true;
-					await this.communityNodesStore.installPackage(this.packageName);
-					this.loading = false;
-					this.modalBus.emit('close');
-					this.showMessage({
-						title: this.$locale.baseText('settings.communityNodes.messages.install.success'),
-						type: 'success',
-					});
-				} catch (error) {
-					if (error.httpStatusCode && error.httpStatusCode === 400) {
-						this.infoTextErrorMessage = error.message;
-					} else {
-						this.showError(
-							error,
-							this.$locale.baseText('settings.communityNodes.messages.install.error'),
-						);
-					}
-				} finally {
-					this.loading = false;
-				}
-			}
-		},
-		onCheckboxChecked() {
-			this.checkboxWarning = false;
-		},
-		onModalClose() {
-			return !this.loading;
-		},
-		onInputBlur() {
-			this.packageName = this.packageName.replaceAll('npm i ', '').replaceAll('npm install ', '');
-		},
-		onMoreInfoTopClick() {
-			this.$telemetry.track('user clicked cnr docs link', { source: 'install package modal top' });
-		},
-		onLearnMoreLinkClick() {
-			this.$telemetry.track('user clicked cnr docs link', {
-				source: 'install package modal bottom',
 			});
-		},
+			infoTextErrorMessage.value = '';
-	},
+			loading.value = true;
-});
+			await communityNodesStore.installPackage(packageName.value);
+			loading.value = false;
+			modalBus.emit('close');
+			toast.showMessage({
+				title: i18n.baseText('settings.communityNodes.messages.install.success'),
+				type: 'success',
+			});
+		} catch (error) {
+			if (error.httpStatusCode && error.httpStatusCode === 400) {
+				infoTextErrorMessage.value = error.message;
+			} else {
+				toast.showError(error, i18n.baseText('settings.communityNodes.messages.install.error'));
+			}
+		} finally {
+			loading.value = false;
+		}
+	}
+};
+
+const onCheckboxChecked = () => {
+	checkboxWarning.value = false;
+};
+
+const onModalClose = () => {
+	return !loading.value;
+};
+
+const onInputBlur = () => {
+	packageName.value = packageName.value.replaceAll('npm i ', '').replaceAll('npm install ', '');
+};
+
+const onMoreInfoTopClick = () => {
+	telemetry.track('user clicked cnr docs link', { source: 'install package modal top' });
+};
+
+const onLearnMoreLinkClick = () => {
+	telemetry.track('user clicked cnr docs link', {
+		source: 'install package modal bottom',
+	});
+};
 </script>
 
 <template>
 	<Modal
 		width="540px"
 		:name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY"
-		:title="$locale.baseText('settings.communityNodes.installModal.title')"
+		:title="i18n.baseText('settings.communityNodes.installModal.title')"
 		:event-bus="modalBus"
 		:center="true"
 		:before-close="onModalClose"
@@ -111,15 +99,15 @@ export default defineComponent({
 			<div :class="[$style.descriptionContainer, 'p-s']">
 				<div>
 					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.description') }}
+						{{ i18n.baseText('settings.communityNodes.installModal.description') }}
 					</n8n-text>
 					{{ ' ' }}
 					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
-						{{ $locale.baseText('generic.moreInfo') }}
+						{{ i18n.baseText('generic.moreInfo') }}
 					</n8n-link>
 				</div>
 				<n8n-button
-					:label="$locale.baseText('settings.communityNodes.browseButton.label')"
+					:label="i18n.baseText('settings.communityNodes.browseButton.label')"
 					icon="external-link-alt"
 					:class="$style.browseButton"
 					@click="openNPMPage"
@@ -128,9 +116,9 @@ export default defineComponent({
 			<div :class="[$style.formContainer, 'mt-m']">
 				<n8n-input-label
 					:class="$style.labelTooltip"
-					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
+					:label="i18n.baseText('settings.communityNodes.installModal.packageName.label')"
 					:tooltip-text="
-						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
+						i18n.baseText('settings.communityNodes.installModal.packageName.tooltip', {
 							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
 						})
 					"
@@ -139,9 +127,10 @@ export default defineComponent({
 						v-model="packageName"
 						name="packageNameInput"
 						type="text"
+						data-test-id="package-name-input"
 						:maxlength="214"
 						:placeholder="
-							$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')
+							i18n.baseText('settings.communityNodes.installModal.packageName.placeholder')
 						"
 						:required="true"
 						:disabled="loading"
@@ -163,10 +152,10 @@ export default defineComponent({
 					@update:model-value="onCheckboxChecked"
 				>
 					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
+						{{ i18n.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
 					><br />
 					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
-						$locale.baseText('generic.moreInfo')
+						i18n.baseText('generic.moreInfo')
 					}}</n8n-link>
 				</el-checkbox>
 			</div>
@@ -177,8 +166,8 @@ export default defineComponent({
 				:disabled="!userAgreed || packageName === '' || loading"
 				:label="
 					loading
-						? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
+						? i18n.baseText('settings.communityNodes.installModal.installButton.label.loading')
-						: $locale.baseText('settings.communityNodes.installModal.installButton.label')
+						: i18n.baseText('settings.communityNodes.installModal.installButton.label')
 				"
 				size="large"
 				float="right"

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

@@ -1,163 +1,137 @@
-<script>
+<script setup lang="ts">
-import { defineComponent } from 'vue';
 import Modal from '@/components/Modal.vue';
 import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
 import { useToast } from '@/composables/useToast';
-import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
 import { createEventBus } from 'n8n-design-system/utils';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { computed, ref } from 'vue';
 
-export default defineComponent({
+export type CommunityPackageManageMode = 'uninstall' | 'update' | 'view-documentation';
-	name: 'CommunityPackageManageConfirmModal',
+
-	components: {
+interface Props {
-		Modal,
+	modalName: string;
-	},
+	activePackageName: string;
-	props: {
+	mode: CommunityPackageManageMode;
-		modalName: {
+}
-			type: String,
+
-			required: true,
+const props = defineProps<Props>();
-		},
+
-		activePackageName: {
+const communityNodesStore = useCommunityNodesStore();
-			type: String,
+
-			required: true,
+const modalBus = createEventBus();
-		},
+
-		mode: {
+const toast = useToast();
-			type: String,
+const i18n = useI18n();
-		},
+const telemetry = useTelemetry();
-	},
+
-	setup() {
+const loading = ref(false);
+
+const activePackage = computed(
+	() => communityNodesStore.installedPackages[props.activePackageName],
+);
+
+const getModalContent = computed(() => {
+	if (props.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL) {
 		return {
-			...useToast(),
+			title: i18n.baseText('settings.communityNodes.confirmModal.uninstall.title'),
+			message: i18n.baseText('settings.communityNodes.confirmModal.uninstall.message', {
+				interpolate: {
+					packageName: props.activePackageName,
+				},
+			}),
+			buttonLabel: i18n.baseText('settings.communityNodes.confirmModal.uninstall.buttonLabel'),
+			buttonLoadingLabel: i18n.baseText(
+				'settings.communityNodes.confirmModal.uninstall.buttonLoadingLabel',
+			),
 		};
-	},
+	}
-	data() {
+	return {
-		return {
+		title: i18n.baseText('settings.communityNodes.confirmModal.update.title', {
-			loading: false,
+			interpolate: {
-			modalBus: createEventBus(),
+				packageName: props.activePackageName,
-			COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
+			},
-			COMMUNITY_PACKAGE_MANAGE_ACTIONS,
+		}),
-		};
+		description: i18n.baseText('settings.communityNodes.confirmModal.update.description'),
-	},
+		message: i18n.baseText('settings.communityNodes.confirmModal.update.message', {
-	computed: {
+			interpolate: {
-		...mapStores(useCommunityNodesStore),
+				packageName: props.activePackageName,
-		activePackage() {
+				version: activePackage.value.updateAvailable ?? '',
-			return this.communityNodesStore.installedPackages[this.activePackageName];
+			},
-		},
+		}),
-		getModalContent() {
+		buttonLabel: i18n.baseText('settings.communityNodes.confirmModal.update.buttonLabel'),
-			if (this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL) {
+		buttonLoadingLabel: i18n.baseText(
-				return {
+			'settings.communityNodes.confirmModal.update.buttonLoadingLabel',
-					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.communityNodesStore.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.communityNodesStore.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');
-			}
-		},
-	},
 });
+
+const onModalClose = () => {
+	return !loading.value;
+};
+
+const onConfirmButtonClick = async () => {
+	if (props.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL) {
+		await onUninstall();
+	} else if (props.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE) {
+		await onUpdate();
+	}
+};
+
+const onUninstall = async () => {
+	try {
+		telemetry.track('user started cnr package deletion', {
+			package_name: activePackage.value.packageName,
+			package_node_names: activePackage.value.installedNodes.map((node) => node.name),
+			package_version: activePackage.value.installedVersion,
+			package_author: activePackage.value.authorName,
+			package_author_email: activePackage.value.authorEmail,
+		});
+		loading.value = true;
+		await communityNodesStore.uninstallPackage(props.activePackageName);
+		toast.showMessage({
+			title: i18n.baseText('settings.communityNodes.messages.uninstall.success.title'),
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.communityNodes.messages.uninstall.error'));
+	} finally {
+		loading.value = false;
+		modalBus.emit('close');
+	}
+};
+
+const onUpdate = async () => {
+	try {
+		telemetry.track('user started cnr package update', {
+			package_name: activePackage.value.packageName,
+			package_node_names: activePackage.value.installedNodes.map((node) => node.name),
+			package_version_current: activePackage.value.installedVersion,
+			package_version_new: activePackage.value.updateAvailable,
+			package_author: activePackage.value.authorName,
+			package_author_email: activePackage.value.authorEmail,
+		});
+		loading.value = true;
+		const updatedVersion = activePackage.value.updateAvailable;
+		await communityNodesStore.updatePackage(props.activePackageName);
+		toast.showMessage({
+			title: i18n.baseText('settings.communityNodes.messages.update.success.title'),
+			message: i18n.baseText('settings.communityNodes.messages.update.success.message', {
+				interpolate: {
+					packageName: props.activePackageName,
+					version: updatedVersion ?? '',
+				},
+			}),
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.communityNodes.messages.update.error.title'));
+	} finally {
+		loading.value = false;
+		modalBus.emit('close');
+	}
+};
 </script>
 
 <template>

packages/editor-ui/src/components/__tests__/CommunityPackageInstallModal.spec.ts

@@ -45,8 +45,11 @@ describe('CommunityPackageInstallModal', () => {
 
 		await retry(() => expect(getByTestId('communityPackageInstall-modal')).toBeInTheDocument());
 
+		const packageNameInput = getByTestId('package-name-input');
 		const installButton = getByTestId('install-community-package-button');
 
+		await userEvent.type(packageNameInput, 'n8n-nodes-test');
+
 		expect(installButton).toBeDisabled();
 
 		await userEvent.click(getByTestId('user-agreement-checkbox'));