2022-04-11 06:12:13 -07:00
|
|
|
<template>
|
2022-09-29 03:33:16 -07:00
|
|
|
<n8n-tabs :options="options" :value="value" @input="onTabSelect" @tooltipClick="onTooltipClick" />
|
2022-04-11 06:12:13 -07:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2022-11-23 04:41:53 -08:00
|
|
|
import { externalHooks } from '@/mixins/externalHooks';
|
2022-12-14 01:04:10 -08:00
|
|
|
import {
|
|
|
|
BUILTIN_NODES_DOCS_URL,
|
|
|
|
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
|
|
|
|
NPM_PACKAGE_DOCS_BASE_URL,
|
|
|
|
} from '@/constants';
|
2022-05-23 08:56:15 -07:00
|
|
|
import { INodeUi, ITab } from '@/Interface';
|
2022-11-04 06:04:31 -07:00
|
|
|
import { useNDVStore } from '@/stores/ndv';
|
|
|
|
import { useWorkflowsStore } from '@/stores/workflows';
|
2022-04-11 06:12:13 -07:00
|
|
|
import { INodeTypeDescription } from 'n8n-workflow';
|
2022-11-04 06:04:31 -07:00
|
|
|
import { mapStores } from 'pinia';
|
2022-04-11 06:12:13 -07:00
|
|
|
|
|
|
|
import mixins from 'vue-typed-mixins';
|
2022-11-23 04:41:53 -08:00
|
|
|
import { isCommunityPackageName } from '@/utils';
|
2022-04-11 06:12:13 -07:00
|
|
|
|
2022-12-14 01:04:10 -08:00
|
|
|
export default mixins(externalHooks).extend({
|
2022-05-23 08:56:15 -07:00
|
|
|
name: 'NodeSettingsTabs',
|
2022-04-11 06:12:13 -07:00
|
|
|
props: {
|
|
|
|
value: {
|
|
|
|
type: String,
|
|
|
|
},
|
2022-12-14 01:04:10 -08:00
|
|
|
nodeType: {},
|
2022-05-23 08:56:15 -07:00
|
|
|
sessionId: {
|
|
|
|
type: String,
|
|
|
|
},
|
2022-04-11 06:12:13 -07:00
|
|
|
},
|
|
|
|
computed: {
|
2022-12-14 01:04:10 -08:00
|
|
|
...mapStores(useNDVStore, useWorkflowsStore),
|
2022-11-04 06:04:31 -07:00
|
|
|
activeNode(): INodeUi | null {
|
|
|
|
return this.ndvStore.activeNode;
|
2022-05-23 08:56:15 -07:00
|
|
|
},
|
2022-12-14 01:04:10 -08:00
|
|
|
documentationUrl(): string {
|
2022-04-11 06:12:13 -07:00
|
|
|
const nodeType = this.nodeType as INodeTypeDescription | null;
|
2022-07-20 07:24:03 -07:00
|
|
|
|
2022-04-11 06:12:13 -07:00
|
|
|
if (!nodeType) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (nodeType.documentationUrl && nodeType.documentationUrl.startsWith('http')) {
|
|
|
|
return nodeType.documentationUrl;
|
|
|
|
}
|
|
|
|
|
2022-12-14 01:04:10 -08:00
|
|
|
const utmTags =
|
|
|
|
'?utm_source=n8n_app&utm_medium=node_settings_modal-credential_link' +
|
|
|
|
'&utm_campaign=' +
|
|
|
|
nodeType.name;
|
2022-09-29 03:33:16 -07:00
|
|
|
|
|
|
|
// Built-in node documentation available via its codex entry
|
|
|
|
const primaryDocUrl = nodeType.codex?.resources?.primaryDocumentation?.[0]?.url;
|
|
|
|
if (primaryDocUrl) {
|
|
|
|
return primaryDocUrl + utmTags;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (this.isCommunityNode) {
|
|
|
|
return `${NPM_PACKAGE_DOCS_BASE_URL}${nodeType.name.split('.')[0]}`;
|
2022-04-11 06:12:13 -07:00
|
|
|
}
|
|
|
|
|
2022-09-29 03:33:16 -07:00
|
|
|
// Fallback to the root of the node documentation
|
|
|
|
return BUILTIN_NODES_DOCS_URL + utmTags;
|
2022-07-20 07:24:03 -07:00
|
|
|
},
|
|
|
|
isCommunityNode(): boolean {
|
|
|
|
const nodeType = this.nodeType as INodeTypeDescription | null;
|
|
|
|
if (nodeType) {
|
|
|
|
return isCommunityPackageName(nodeType.name);
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
packageName(): string {
|
|
|
|
const nodeType = this.nodeType as INodeTypeDescription;
|
|
|
|
return nodeType.name.split('.')[0];
|
2022-04-11 06:12:13 -07:00
|
|
|
},
|
2022-12-14 01:04:10 -08:00
|
|
|
options(): ITab[] {
|
2022-04-11 06:12:13 -07:00
|
|
|
const options: ITab[] = [
|
|
|
|
{
|
|
|
|
label: this.$locale.baseText('nodeSettings.parameters'),
|
|
|
|
value: 'params',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
if (this.documentationUrl) {
|
|
|
|
options.push({
|
|
|
|
label: this.$locale.baseText('nodeSettings.docs'),
|
|
|
|
value: 'docs',
|
|
|
|
href: this.documentationUrl,
|
|
|
|
});
|
|
|
|
}
|
2022-07-20 07:24:03 -07:00
|
|
|
if (this.isCommunityNode) {
|
|
|
|
options.push({
|
|
|
|
icon: 'cube',
|
|
|
|
value: 'communityNode',
|
|
|
|
align: 'right',
|
|
|
|
tooltip: this.$locale.baseText('generic.communityNode.tooltip', {
|
|
|
|
interpolate: {
|
|
|
|
docUrl: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
|
|
|
|
packageName: this.packageName,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// If both tabs have align right, both will have excessive left margin
|
|
|
|
const pushCogRight = this.isCommunityNode ? false : true;
|
2022-12-14 01:04:10 -08:00
|
|
|
options.push({
|
|
|
|
icon: 'cog',
|
|
|
|
value: 'settings',
|
|
|
|
align: pushCogRight ? 'right' : undefined,
|
|
|
|
});
|
2022-04-11 06:12:13 -07:00
|
|
|
|
|
|
|
return options;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onTabSelect(tab: string) {
|
|
|
|
if (tab === 'docs' && this.nodeType) {
|
2022-12-14 01:04:10 -08:00
|
|
|
this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', {
|
|
|
|
nodeType: this.nodeType as INodeTypeDescription,
|
|
|
|
documentationUrl: this.documentationUrl,
|
|
|
|
});
|
2022-05-23 08:56:15 -07:00
|
|
|
this.$telemetry.track('User clicked ndv link', {
|
|
|
|
node_type: this.activeNode.type,
|
2022-11-04 06:04:31 -07:00
|
|
|
workflow_id: this.workflowsStore.workflowId,
|
2022-05-23 08:56:15 -07:00
|
|
|
session_id: this.sessionId,
|
|
|
|
pane: 'main',
|
|
|
|
type: 'docs',
|
|
|
|
});
|
2022-04-11 06:12:13 -07:00
|
|
|
}
|
|
|
|
|
2022-12-14 01:04:10 -08:00
|
|
|
if (tab === 'settings' && this.nodeType) {
|
|
|
|
this.$telemetry.track('User viewed node settings', {
|
|
|
|
node_type: (this.nodeType as INodeTypeDescription).name,
|
|
|
|
workflow_id: this.workflowsStore.workflowId,
|
|
|
|
});
|
2022-04-11 06:12:13 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
if (tab === 'settings' || tab === 'params') {
|
|
|
|
this.$emit('input', tab);
|
|
|
|
}
|
|
|
|
},
|
2022-07-20 07:24:03 -07:00
|
|
|
onTooltipClick(tab: string, event: MouseEvent) {
|
|
|
|
if (tab === 'communityNode' && (event.target as Element).localName === 'a') {
|
|
|
|
this.$telemetry.track('user clicked cnr docs link', { source: 'node details view' });
|
|
|
|
}
|
|
|
|
},
|
2022-04-11 06:12:13 -07:00
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|
2022-07-20 07:24:03 -07:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
#communityNode > div {
|
|
|
|
cursor: auto;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: unset;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|