mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-18 10:31:15 +00:00
103 lines
2.8 KiB
Vue
103 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useTelemetry } from '@/composables/useTelemetry';
|
|
import { COMMUNITY_NODES_INSTALLATION_DOCS_URL, CUSTOM_NODES_DOCS_URL } from '@/constants';
|
|
import type { INodeUi } from '@/Interface';
|
|
import { isCommunityPackageName } from '@/utils/nodeTypesUtils';
|
|
import { N8nIcon, N8nLink, N8nText } from '@n8n/design-system';
|
|
import { useI18n } from '@n8n/i18n';
|
|
import { computed } from 'vue';
|
|
import { I18nT } from 'vue-i18n';
|
|
|
|
const { node } = defineProps<{ node: INodeUi }>();
|
|
|
|
const i18n = useI18n();
|
|
const telemetry = useTelemetry();
|
|
|
|
const isCommunityNode = computed(() => isCommunityPackageName(node.type));
|
|
const npmPackage = computed(() => node.type.split('.')[0]);
|
|
|
|
function onMissingNodeTextClick(event: MouseEvent) {
|
|
if (event.target instanceof Element && event.target.localName === 'a') {
|
|
telemetry.track('user clicked cnr browse button', {
|
|
source: 'cnr missing node modal',
|
|
});
|
|
}
|
|
}
|
|
|
|
function onMissingNodeLearnMoreLinkClick() {
|
|
telemetry.track('user clicked cnr docs link', {
|
|
source: 'missing node modal source',
|
|
package_name: node.type.split('.')[0],
|
|
node_type: node.type,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="$style.nodeIsNotValid">
|
|
<p :class="$style.warningIcon">
|
|
<N8nIcon icon="triangle-alert" />
|
|
</p>
|
|
<div class="mt-s mb-xs">
|
|
<N8nText size="large" color="text-dark" bold>
|
|
{{ i18n.baseText('nodeSettings.communityNodeUnknown.title') }}
|
|
</N8nText>
|
|
</div>
|
|
<div v-if="isCommunityNode" :class="$style.descriptionContainer">
|
|
<div class="mb-l">
|
|
<I18nT
|
|
keypath="nodeSettings.communityNodeUnknown.description"
|
|
tag="span"
|
|
scope="global"
|
|
@click="onMissingNodeTextClick"
|
|
>
|
|
<template #action>
|
|
<a
|
|
:href="`https://www.npmjs.com/package/${npmPackage}`"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{{ npmPackage }}
|
|
</a>
|
|
</template>
|
|
</I18nT>
|
|
</div>
|
|
<N8nLink :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMissingNodeLearnMoreLinkClick">
|
|
{{ i18n.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
|
|
</N8nLink>
|
|
</div>
|
|
<I18nT v-else keypath="nodeSettings.nodeTypeUnknown.description" tag="span" scope="global">
|
|
<template #action>
|
|
<a
|
|
:href="CUSTOM_NODES_DOCS_URL"
|
|
target="_blank"
|
|
v-text="i18n.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
|
|
/>
|
|
</template>
|
|
</I18nT>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" module>
|
|
.nodeIsNotValid {
|
|
height: 75%;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
line-height: var(--font-line-height-regular);
|
|
}
|
|
|
|
.warningIcon {
|
|
color: var(--color-text-lighter);
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.descriptionContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|