Skip to content

Commit

Permalink
refactor(editor): Migrate community nodes modals to composition api (…
Browse files Browse the repository at this point in the history 
…no-changelog) (#10909)

Co-authored-by: Ricardo Espinoza <[email protected]>
  • Loading branch information
@MiloradFilipovic @RicardoE105
MiloradFilipovic and RicardoE105 authored Sep 23, 2024
1 parent 0290e38 commit f9515b9
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 246 deletions.
179 changes: 84 additions & 95 deletions packages/editor-ui/src/components/CommunityPackageInstallModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
<script setup lang="ts">
import { createEventBus } from 'n8n-design-system/utils';
import Modal from '@/components/Modal.vue';
import {
Expand All @@ -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({
name: 'CommunityPackageInstallModal',
components: {
Modal,
},
setup() {
return {
...useToast(),
};
},
data() {
return {
loading: false,
packageName: '',
userAgreed: false,
modalBus: createEventBus(),
checkboxWarning: false,
infoTextErrorMessage: '',
COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
NPM_KEYWORD_SEARCH_URL,
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
COMMUNITY_NODES_RISKS_DOCS_URL,
};
},
computed: {
...mapStores(useCommunityNodesStore),
},
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;
const communityNodesStore = useCommunityNodesStore();
const toast = useToast();
const telemetry = useTelemetry();
const i18n = useI18n();
const modalBus = createEventBus();
const loading = ref(false);
const packageName = ref('');
const userAgreed = ref(false);
const checkboxWarning = ref(false);
const infoTextErrorMessage = ref('');
const openNPMPage = () => {
telemetry.track('user clicked cnr browse button', { source: 'cnr install modal' });
window.open(NPM_KEYWORD_SEARCH_URL, '_blank');
};
const onInstallClick = async () => {
if (!userAgreed.value) {
checkboxWarning.value = true;
} else {
try {
telemetry.track('user started cnr package install', {
input_string: packageName.value,
source: 'cnr settings page',
});
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 {
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;
}
toast.showError(error, i18n.baseText('settings.communityNodes.messages.install.error'));
}
},
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',
});
},
},
});
} 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"
Expand All @@ -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"
Expand All @@ -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 },
})
"
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -177,8 +166,8 @@ export default defineComponent({
:disabled="!userAgreed || packageName === '' || loading"
:label="
loading
? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
: $locale.baseText('settings.communityNodes.installModal.installButton.label')
? i18n.baseText('settings.communityNodes.installModal.installButton.label.loading')
: i18n.baseText('settings.communityNodes.installModal.installButton.label')
"
size="large"
float="right"
Expand Down
Loading

0 comments on commit f9515b9

Please sign in to comment.