admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-20 11:22:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Extract large chunks from NodeSettings (#17665)

Browse Source 
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
This commit is contained in:
Suguru Inoue
2025-07-29 15:13:38 +02:00
committed by GitHub
parent b64c8ad3a4
commit d16960bad3
6 changed files with 367 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/frontend/editor-ui/src/components/NodeSettingsInvalidNodeWarning.vue Normal file
View File

@@ -0,0 +1,102 @@
<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>