n8n/packages/editor-ui/src/components/NodeSettings.vue
Milorad FIlipović b321c5e4ec
feat(editor): Simplify NDV by moving authentication details to credentials modal (#5067)
*  Removing authentication parameter from NDV
*  Added auth type selector to credentials modal
* 🔨 Extracting reusable logic to util functions
*  Updating credentials position, adding label for radio buttons
*  Using first node credentials for nodes with single auth options and hiding auth selector UI in that case
*  Fixing credentials modal when opened from credentials page
*  Showing all available credentials in NDV credentials dropdown
*  Updating node credentials dropdown component to show credentials description. Disabling `Credentials of type not found` error in node
*  Moving auth related fields from NDV to credentials modal. Added support for multiple auth fileds
*  Moving NDV fields that authentication depends on to credentials modal
*  Keeping old auth/credentials UI in NDV for HTTP Request and Webhook nodes. Pre-populating credential type for HTTP request node when selected from 'app action' menu
* 💄 Use old label and field position for nodes that use old credentials UI in NDV
*  Implementing more generic way to find node's auth fileds
* 📚 Adding comments on parameter hiding logic
*  Fixing node auth options logic for multiple auth fields
* 👕 Fixing lint errors
* 💄 Addressing design review comments
*  Not selecting first auth option when opening new credential dialog
*  Using default credentials name and icon if authentication type is not selected
*  Updating credential data when auth type is changed
*  Setting new credentials type for HTTP Request and Webhook nodes
*  Setting nodes with access when changing auth type
* 👕 Fixing lint error
*  Updating active node auth type from credentials modal
*  Syncronizing credentials modal and dropdown
* 👕 Fixing linter error
*  Handling credential dropdown UI for multiple credentials
* 👕 Removing unused imports
*  Handling auth selection when default auth type is the first option
*  Updating credentials change listening logic
*  Resetting credential data when deleting a credential, disabling 'Details' and 'Sharing' tabs if auth type is not selected
* 🐛 Skipping credentials type check when showing mixed credentials in the dropdown and switching credentials type
*  Showing credential modal tabs for saved credentials
*  Preventing renaming credentials when no auth type is selected
* 🐛 Fixing credentials modal when opened from credentials page
*  Keeping auth radio buttons selected when switching tabs
*  Adding initial batch of credentials NDV tests
*  Updating node auth filed value when new credential type is selected
*  Using all available credential types for current node to sync credential dropdown with modal
*  Sorting mixed credentials by date, simplifying credential dropdown option logic
* 🔨 Extracting some reusable logic to utils
*  Improving required vs optional credentials detection and using it to show auth radio buttons
* 👕 Fixing lint errors
*  Adding more credentials tests
*  Filtering credential options based on authentication type
* 🔨 Refactoring credentials and auth utils
*  Updated handling of auth options in credentials modal to work with new logic
* 🔨 Getting the terminology in line
* 📚 Removing leftover comment
*  Updating node auth filed detection logic to account for different edge-cases
*  Adding Wait node as an exception for new UI
*  Updating NDV display when auth type changes
*  Updating default credentials name when auth type changes
*  Hiding auth settings after credentials are saved
*  Always showing credentials modal menu tabs
*  Improving main auth field detection logic so it doesn't account for authentication fields which can have `none` value
*  Restoring accidentally deleted not existing credential issue logic
*  Updating other nodes when deleted credentials have been updated
*  Using filtered auth type list to show or hide radio buttons section in credentials modal
* 👕 Addressing lint error
* 👌 Addressing PR review feedback
* 👕 Fixing lint issues
*  Updating main auth filed detection logic so it checks full dependency path to determine if the field is required or optional
* 👌 Addressing the rest of PR feedback
*  Updating credential tests
*  Resetting credential data on authentication type change
*  Created AuthTypeSelector component
* 👌 Addressing PR comments
*  Not resetting overwritten credential properties when changing auth type
*  Hiding auth selector section if there are no options to show
2023-01-27 09:05:43 +01:00

986 lines
26 KiB
Vue

<template>
<div
:class="{
'node-settings': true,
dragging: dragging,
}"
@keydown.stop
>
<div :class="$style.header">
<div class="header-side-menu">
<NodeTitle
class="node-name"
:value="node && node.name"
:nodeType="nodeType"
:isReadOnly="isReadOnly"
@input="nameChanged"
></NodeTitle>
<div v-if="isExecutable">
<NodeExecuteButton
v-if="!blockUI"
data-test-id="node-execute-button"
:nodeName="node.name"
:disabled="outputPanelEditMode.enabled && !isTriggerNode"
size="small"
telemetrySource="parameters"
@execute="onNodeExecute"
@stopExecution="onStopExecution"
/>
</div>
</div>
<NodeSettingsTabs
v-if="node && nodeValid"
v-model="openPanel"
:nodeType="nodeType"
:sessionId="sessionId"
/>
</div>
<div class="node-is-not-valid" v-if="node && !nodeValid">
<p :class="$style.warningIcon">
<font-awesome-icon icon="exclamation-triangle" />
</p>
<div class="missingNodeTitleContainer mt-s mb-xs">
<n8n-text size="large" color="text-dark" bold>
{{ $locale.baseText('nodeSettings.communityNodeUnknown.title') }}
</n8n-text>
</div>
<div v-if="isCommunityNode" :class="$style.descriptionContainer">
<div class="mb-l">
<i18n
path="nodeSettings.communityNodeUnknown.description"
tag="span"
@click="onMissingNodeTextClick"
>
<template #action>
<a
:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
target="_blank"
>{{ node.type.split('.')[0] }}</a
>
</template>
</i18n>
</div>
<n8n-link
:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
@click="onMissingNodeLearnMoreLinkClick"
>
{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
</n8n-link>
</div>
<i18n v-else path="nodeSettings.nodeTypeUnknown.description" tag="span">
<template #action>
<a
:href="CUSTOM_NODES_DOCS_URL"
target="_blank"
v-text="$locale.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
/>
</template>
</i18n>
</div>
<div class="node-parameters-wrapper" data-test-id="node-parameters" v-if="node && nodeValid">
<n8n-notice
v-if="hasForeignCredential"
:content="
$locale.baseText('nodeSettings.hasForeignCredential', {
interpolate: { owner: workflowOwnerName },
})
"
/>
<div v-show="openPanel === 'params'">
<node-webhooks :node="node" :nodeType="nodeType" />
<parameter-input-list
:parameters="parametersNoneSetting"
:hideDelete="true"
:nodeValues="nodeValues"
:isReadOnly="isReadOnly"
:hiddenIssuesInputs="hiddenIssuesInputs"
path="parameters"
@valueChanged="valueChanged"
@activate="onWorkflowActivate"
@parameterBlur="onParameterBlur"
>
<node-credentials
:node="node"
:readonly="isReadOnly"
:showAll="true"
@credentialSelected="credentialSelected"
@valueChanged="valueChanged"
@blur="onParameterBlur"
:hide-issues="hiddenIssuesInputs.includes('credentials')"
/>
</parameter-input-list>
<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
<n8n-text>
{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
</n8n-text>
</div>
<div v-if="isCustomApiCallSelected(nodeValues)" class="parameter-item parameter-notice">
<n8n-notice
:content="
$locale.baseText('nodeSettings.useTheHttpRequestNode', {
interpolate: { nodeTypeDisplayName: nodeType.displayName },
})
"
/>
</div>
</div>
<div v-show="openPanel === 'settings'">
<parameter-input-list
:parameters="parametersSetting"
:nodeValues="nodeValues"
:isReadOnly="isReadOnly"
:hiddenIssuesInputs="hiddenIssuesInputs"
path="parameters"
@valueChanged="valueChanged"
@parameterBlur="onParameterBlur"
/>
<parameter-input-list
:parameters="nodeSettings"
:hideDelete="true"
:nodeValues="nodeValues"
:isReadOnly="isReadOnly"
:hiddenIssuesInputs="hiddenIssuesInputs"
path=""
@valueChanged="valueChanged"
@parameterBlur="onParameterBlur"
/>
</div>
</div>
<n8n-block-ui :show="blockUI" />
</div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue';
import {
INodeTypeDescription,
INodeParameters,
INodeProperties,
NodeHelpers,
NodeParameterValue,
deepCopy,
} from 'n8n-workflow';
import { INodeUi, INodeUpdatePropertiesInformation, IUpdateInformation } from '@/Interface';
import {
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
CUSTOM_NODES_DOCS_URL,
MAIN_NODE_PANEL_WIDTH,
IMPORT_CURL_MODAL_KEY,
} from '@/constants';
import NodeTitle from '@/components/NodeTitle.vue';
import ParameterInputFull from '@/components/ParameterInputFull.vue';
import ParameterInputList from '@/components/ParameterInputList.vue';
import NodeCredentials from '@/components/NodeCredentials.vue';
import NodeSettingsTabs from '@/components/NodeSettingsTabs.vue';
import NodeWebhooks from '@/components/NodeWebhooks.vue';
import { get, set, unset } from 'lodash';
import { externalHooks } from '@/mixins/externalHooks';
import { nodeHelpers } from '@/mixins/nodeHelpers';
import mixins from 'vue-typed-mixins';
import NodeExecuteButton from './NodeExecuteButton.vue';
import { isCommunityPackageName } from '@/utils';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNDVStore } from '@/stores/ndv';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { useHistoryStore } from '@/stores/history';
import { RenameNodeCommand } from '@/models/history';
import useWorkflowsEEStore from '@/stores/workflows.ee';
export default mixins(externalHooks, nodeHelpers).extend({
name: 'NodeSettings',
components: {
NodeTitle,
NodeCredentials,
ParameterInputFull,
ParameterInputList,
NodeSettingsTabs,
NodeWebhooks,
NodeExecuteButton,
},
computed: {
...mapStores(
useHistoryStore,
useNodeTypesStore,
useNDVStore,
useUIStore,
useWorkflowsStore,
useWorkflowsEEStore,
),
isCurlImportModalOpen(): boolean {
return this.uiStore.isModalOpen(IMPORT_CURL_MODAL_KEY);
},
isReadOnly(): boolean {
return this.readOnly || this.hasForeignCredential;
},
isExecutable(): boolean {
return this.executable || this.hasForeignCredential;
},
nodeTypeName(): string {
if (this.nodeType) {
const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
return this.$locale.headerText({
key: `headers.${shortNodeType}.displayName`,
fallback: this.nodeType.name,
});
}
return '';
},
nodeTypeDescription(): string {
if (this.nodeType && this.nodeType.description) {
const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
return this.$locale.headerText({
key: `headers.${shortNodeType}.description`,
fallback: this.nodeType.description,
});
} else {
return this.$locale.baseText('nodeSettings.noDescriptionFound');
}
},
headerStyle(): object {
if (!this.node) {
return {};
}
return {
'background-color': this.node.color,
};
},
node(): INodeUi | null {
return this.ndvStore.activeNode;
},
parametersSetting(): INodeProperties[] {
return this.parameters.filter((item) => {
return item.isNodeSetting;
});
},
parametersNoneSetting(): INodeProperties[] {
return this.parameters.filter((item) => {
return !item.isNodeSetting;
});
},
parameters(): INodeProperties[] {
if (this.nodeType === null) {
return [];
}
return this.nodeType.properties;
},
outputPanelEditMode(): { enabled: boolean; value: string } {
return this.ndvStore.outputPanelEditMode;
},
isCommunityNode(): boolean {
return isCommunityPackageName(this.node.type);
},
isTriggerNode(): boolean {
return this.nodeTypesStore.isTriggerNode(this.node.type);
},
workflowOwnerName(): string {
return this.workflowsEEStore.getWorkflowOwnerName(`${this.workflowsStore.workflowId}`);
},
},
props: {
eventBus: {},
dragging: {
type: Boolean,
},
sessionId: {
type: String,
},
nodeType: {
type: Object as PropType<INodeTypeDescription>,
},
readOnly: {
type: Boolean,
default: false,
},
hasForeignCredential: {
type: Boolean,
default: false,
},
blockUI: {
type: Boolean,
default: false,
},
executable: {
type: Boolean,
default: true,
},
},
data() {
return {
nodeValid: true,
nodeColor: null,
openPanel: 'params',
nodeValues: {
color: '#ff0000',
alwaysOutputData: false,
executeOnce: false,
notesInFlow: false,
continueOnFail: false,
retryOnFail: false,
maxTries: 3,
waitBetweenTries: 1000,
notes: '',
parameters: {},
} as INodeParameters,
nodeSettings: [
{
displayName: this.$locale.baseText('nodeSettings.alwaysOutputData.displayName'),
name: 'alwaysOutputData',
type: 'boolean',
default: false,
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.alwaysOutputData.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.executeOnce.displayName'),
name: 'executeOnce',
type: 'boolean',
default: false,
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.executeOnce.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.retryOnFail.displayName'),
name: 'retryOnFail',
type: 'boolean',
default: false,
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.retryOnFail.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.maxTries.displayName'),
name: 'maxTries',
type: 'number',
typeOptions: {
minValue: 2,
maxValue: 5,
},
default: 3,
displayOptions: {
show: {
retryOnFail: [true],
},
},
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.maxTries.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.waitBetweenTries.displayName'),
name: 'waitBetweenTries',
type: 'number',
typeOptions: {
minValue: 0,
maxValue: 5000,
},
default: 1000,
displayOptions: {
show: {
retryOnFail: [true],
},
},
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.waitBetweenTries.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.continueOnFail.displayName'),
name: 'continueOnFail',
type: 'boolean',
default: false,
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.continueOnFail.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.notes.displayName'),
name: 'notes',
type: 'string',
typeOptions: {
rows: 5,
},
default: '',
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.notes.description'),
},
{
displayName: this.$locale.baseText('nodeSettings.notesInFlow.displayName'),
name: 'notesInFlow',
type: 'boolean',
default: false,
noDataExpression: true,
description: this.$locale.baseText('nodeSettings.notesInFlow.description'),
},
] as INodeProperties[],
COMMUNITY_NODES_INSTALLATION_DOCS_URL,
CUSTOM_NODES_DOCS_URL,
MAIN_NODE_PANEL_WIDTH,
hiddenIssuesInputs: [] as string[],
};
},
watch: {
node(newNode, oldNode) {
this.setNodeValues();
},
isCurlImportModalOpen(newValue, oldValue) {
if (newValue === false) {
let parameters = this.uiStore.getHttpNodeParameters || '';
if (!parameters) return;
try {
parameters = JSON.parse(parameters) as {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[key: string]: any;
};
//@ts-ignore
this.valueChanged({
node: this.node.name,
name: 'parameters',
value: parameters,
});
this.uiStore.setHttpNodeParameters({ name: IMPORT_CURL_MODAL_KEY, parameters: '' });
} catch (_) {}
}
},
},
methods: {
populateHiddenIssuesSet() {
if (!this.node || !this.workflowsStore.isNodePristine(this.node.name)) return;
this.hiddenIssuesInputs.push('credentials');
this.parametersNoneSetting.forEach((parameter) => {
this.hiddenIssuesInputs.push(parameter.name);
});
this.workflowsStore.setNodePristine(this.node.name, false);
},
onParameterBlur(parameterName: string) {
this.hiddenIssuesInputs = this.hiddenIssuesInputs.filter((name) => name !== parameterName);
},
onWorkflowActivate() {
this.hiddenIssuesInputs = [];
this.$emit('activate');
},
onNodeExecute() {
this.hiddenIssuesInputs = [];
this.$emit('execute');
},
setValue(name: string, value: NodeParameterValue) {
const nameParts = name.split('.');
let lastNamePart: string | undefined = nameParts.pop();
let isArray = false;
if (lastNamePart !== undefined && lastNamePart.includes('[')) {
// It includes an index so we have to extract it
const lastNameParts = lastNamePart.match(/(.*)\[(\d+)\]$/);
if (lastNameParts) {
nameParts.push(lastNameParts[1]);
lastNamePart = lastNameParts[2];
isArray = true;
}
}
// Set the value via Vue.set that everything updates correctly in the UI
if (nameParts.length === 0) {
// Data is on top level
if (value === null) {
// Property should be deleted
// @ts-ignore
Vue.delete(this.nodeValues, lastNamePart);
} else {
// Value should be set
// @ts-ignore
Vue.set(this.nodeValues, lastNamePart, value);
}
} else {
// Data is on lower level
if (value === null) {
// Property should be deleted
// @ts-ignore
let tempValue = get(this.nodeValues, nameParts.join('.')) as
| INodeParameters
| INodeParameters[];
Vue.delete(tempValue as object, lastNamePart as string);
if (isArray === true && (tempValue as INodeParameters[]).length === 0) {
// If a value from an array got delete and no values are left
// delete also the parent
lastNamePart = nameParts.pop();
tempValue = get(this.nodeValues, nameParts.join('.')) as INodeParameters;
Vue.delete(tempValue as object, lastNamePart as string);
}
} else {
// Value should be set
if (typeof value === 'object') {
// @ts-ignore
Vue.set(get(this.nodeValues, nameParts.join('.')), lastNamePart, deepCopy(value));
} else {
// @ts-ignore
Vue.set(get(this.nodeValues, nameParts.join('.')), lastNamePart, value);
}
}
}
},
credentialSelected(updateInformation: INodeUpdatePropertiesInformation) {
// Update the values on the node
this.workflowsStore.updateNodeProperties(updateInformation);
const node = this.workflowsStore.getNodeByName(updateInformation.name);
if (node) {
// Update the issues
this.updateNodeCredentialIssues(node);
}
this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
},
nameChanged(name: string) {
if (this.node) {
this.historyStore.pushCommandToUndo(new RenameNodeCommand(this.node.name, name, this));
}
// @ts-ignore
this.valueChanged({
value: name,
name: 'name',
});
},
valueChanged(parameterData: IUpdateInformation) {
let newValue: NodeParameterValue;
if (parameterData.hasOwnProperty('value')) {
// New value is given
newValue = parameterData.value as string | number;
} else {
// Get new value from nodeData where it is set already
newValue = get(this.nodeValues, parameterData.name) as NodeParameterValue;
}
// Save the node name before we commit the change because
// we need the old name to rename the node properly
const nodeNameBefore = parameterData.node || this.node.name;
const node = this.workflowsStore.getNodeByName(nodeNameBefore);
if (node === null) {
return;
}
if (parameterData.name === 'name') {
// Name of node changed so we have to set also the new node name as active
// Update happens in NodeView so emit event
const sendData = {
value: newValue,
oldValue: nodeNameBefore,
name: parameterData.name,
};
this.$emit('valueChanged', sendData);
} else if (parameterData.name === 'parameters') {
const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
if (!nodeType) {
return;
}
// Get only the parameters which are different to the defaults
let nodeParameters = NodeHelpers.getNodeParameters(
nodeType.properties,
node.parameters,
false,
false,
node,
);
const oldNodeParameters = Object.assign({}, nodeParameters);
// Copy the data because it is the data of vuex so make sure that
// we do not edit it directly
nodeParameters = deepCopy(nodeParameters);
for (const parameterName of Object.keys(parameterData.value)) {
//@ts-ignore
newValue = parameterData.value[parameterName];
// Remove the 'parameters.' from the beginning to just have the
// actual parameter name
const parameterPath = parameterName.split('.').slice(1).join('.');
// Check if the path is supposed to change an array and if so get
// the needed data like path and index
const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
// Apply the new value
//@ts-ignore
if (parameterData[parameterName] === undefined && parameterPathArray !== null) {
// Delete array item
const path = parameterPathArray[1];
const index = parameterPathArray[2];
const data = get(nodeParameters, path);
if (Array.isArray(data)) {
data.splice(parseInt(index, 10), 1);
Vue.set(nodeParameters as object, path, data);
}
} else {
if (newValue === undefined) {
unset(nodeParameters as object, parameterPath);
} else {
set(nodeParameters as object, parameterPath, newValue);
}
}
this.$externalHooks().run('nodeSettings.valueChanged', {
parameterPath,
newValue,
parameters: this.parameters,
oldNodeParameters,
});
}
// Get the parameters with the now new defaults according to the
// from the user actually defined parameters
nodeParameters = NodeHelpers.getNodeParameters(
nodeType.properties,
nodeParameters as INodeParameters,
true,
false,
node,
);
for (const key of Object.keys(nodeParameters as object)) {
if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
this.setValue(`parameters.${key}`, nodeParameters[key] as string);
}
}
if (nodeParameters) {
const updateInformation: IUpdateInformation = {
name: node.name,
value: nodeParameters,
};
this.workflowsStore.setNodeParameters(updateInformation);
this.updateNodeParameterIssues(node, nodeType);
this.updateNodeCredentialIssues(node);
}
} else if (parameterData.name.startsWith('parameters.')) {
// A node parameter changed
const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
if (!nodeType) {
return;
}
// Get only the parameters which are different to the defaults
let nodeParameters = NodeHelpers.getNodeParameters(
nodeType.properties,
node.parameters,
false,
false,
node,
);
const oldNodeParameters = Object.assign({}, nodeParameters);
// Copy the data because it is the data of vuex so make sure that
// we do not edit it directly
nodeParameters = deepCopy(nodeParameters);
// Remove the 'parameters.' from the beginning to just have the
// actual parameter name
const parameterPath = parameterData.name.split('.').slice(1).join('.');
// Check if the path is supposed to change an array and if so get
// the needed data like path and index
const parameterPathArray = parameterPath.match(/(.*)\[(\d+)\]$/);
// Apply the new value
if (parameterData.value === undefined && parameterPathArray !== null) {
// Delete array item
const path = parameterPathArray[1];
const index = parameterPathArray[2];
const data = get(nodeParameters, path);
if (Array.isArray(data)) {
data.splice(parseInt(index, 10), 1);
Vue.set(nodeParameters as object, path, data);
}
} else {
if (newValue === undefined) {
unset(nodeParameters as object, parameterPath);
} else {
set(nodeParameters as object, parameterPath, newValue);
}
}
// Get the parameters with the now new defaults according to the
// from the user actually defined parameters
nodeParameters = NodeHelpers.getNodeParameters(
nodeType.properties,
nodeParameters as INodeParameters,
true,
false,
node,
);
for (const key of Object.keys(nodeParameters as object)) {
if (nodeParameters && nodeParameters[key] !== null && nodeParameters[key] !== undefined) {
this.setValue(`parameters.${key}`, nodeParameters[key] as string);
}
}
// Update the data in vuex
const updateInformation: IUpdateInformation = {
name: node.name,
value: nodeParameters,
};
this.workflowsStore.setNodeParameters(updateInformation);
this.$externalHooks().run('nodeSettings.valueChanged', {
parameterPath,
newValue,
parameters: this.parameters,
oldNodeParameters,
});
this.updateNodeParameterIssues(node, nodeType);
this.updateNodeCredentialIssues(node);
} else {
// A property on the node itself changed
// Update data in settings
Vue.set(this.nodeValues, parameterData.name, newValue);
// Update data in vuex
const updateInformation = {
name: node.name,
key: parameterData.name,
value: newValue,
};
this.workflowsStore.setNodeValue(updateInformation);
}
},
/**
* Sets the values of the active node in the internal settings variables
*/
setNodeValues() {
if (!this.node) {
// No node selected
return;
}
if (this.nodeType !== null) {
this.nodeValid = true;
const foundNodeSettings = [];
if (this.node.color) {
foundNodeSettings.push('color');
Vue.set(this.nodeValues, 'color', this.node.color);
}
if (this.node.notes) {
foundNodeSettings.push('notes');
Vue.set(this.nodeValues, 'notes', this.node.notes);
}
if (this.node.alwaysOutputData) {
foundNodeSettings.push('alwaysOutputData');
Vue.set(this.nodeValues, 'alwaysOutputData', this.node.alwaysOutputData);
}
if (this.node.executeOnce) {
foundNodeSettings.push('executeOnce');
Vue.set(this.nodeValues, 'executeOnce', this.node.executeOnce);
}
if (this.node.continueOnFail) {
foundNodeSettings.push('continueOnFail');
Vue.set(this.nodeValues, 'continueOnFail', this.node.continueOnFail);
}
if (this.node.notesInFlow) {
foundNodeSettings.push('notesInFlow');
Vue.set(this.nodeValues, 'notesInFlow', this.node.notesInFlow);
}
if (this.node.retryOnFail) {
foundNodeSettings.push('retryOnFail');
Vue.set(this.nodeValues, 'retryOnFail', this.node.retryOnFail);
}
if (this.node.maxTries) {
foundNodeSettings.push('maxTries');
Vue.set(this.nodeValues, 'maxTries', this.node.maxTries);
}
if (this.node.waitBetweenTries) {
foundNodeSettings.push('waitBetweenTries');
Vue.set(this.nodeValues, 'waitBetweenTries', this.node.waitBetweenTries);
}
// Set default node settings
for (const nodeSetting of this.nodeSettings) {
if (!foundNodeSettings.includes(nodeSetting.name)) {
// Set default value
Vue.set(this.nodeValues, nodeSetting.name, nodeSetting.default);
}
}
Vue.set(this.nodeValues, 'parameters', deepCopy(this.node.parameters));
} else {
this.nodeValid = false;
}
},
onMissingNodeTextClick(event: MouseEvent) {
if ((event.target as Element).localName === 'a') {
this.$telemetry.track('user clicked cnr browse button', {
source: 'cnr missing node modal',
});
}
},
onMissingNodeLearnMoreLinkClick() {
this.$telemetry.track('user clicked cnr docs link', {
source: 'missing node modal source',
package_name: this.node.type.split('.')[0],
node_type: this.node.type,
});
},
onStopExecution() {
this.$emit('stopExecution');
},
},
mounted() {
this.populateHiddenIssuesSet();
this.setNodeValues();
if (this.eventBus) {
(this.eventBus as Vue).$on('openSettings', () => {
this.openPanel = 'settings';
});
}
this.updateNodeParameterIssues(this.node as INodeUi, this.nodeType);
},
});
</script>
<style lang="scss" module>
.header {
background-color: var(--color-background-base);
}
.warningIcon {
color: var(--color-text-lighter);
font-size: var(--font-size-2xl);
}
.descriptionContainer {
display: flex;
flex-direction: column;
}
</style>
<style lang="scss">
.node-settings {
overflow: hidden;
background-color: var(--color-background-xlight);
height: 100%;
width: 100%;
.no-parameters {
margin-top: var(--spacing-xs);
}
.header-side-menu {
padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-s);
font-size: var(--font-size-l);
display: flex;
.node-name {
padding-top: var(--spacing-5xs);
flex-grow: 1;
}
}
.node-is-not-valid {
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);
}
.node-parameters-wrapper {
height: 100%;
overflow-y: auto;
padding: 0 20px 200px 20px;
}
&.dragging {
border-color: var(--color-primary);
box-shadow: 0px 6px 16px rgba(255, 74, 51, 0.15);
}
}
.parameter-content {
font-size: 0.9em;
margin-right: -15px;
margin-left: -15px;
input {
width: calc(100% - 35px);
padding: 5px;
}
select {
width: calc(100% - 20px);
padding: 5px;
}
&:before {
display: table;
content: ' ';
position: relative;
box-sizing: border-box;
clear: both;
}
}
.parameter-wrapper {
padding: 0 1em;
}
.color-reset-button-wrapper {
position: relative;
}
.color-reset-button {
position: absolute;
right: 7px;
top: -25px;
}
.parameter-value {
input.expression {
border-style: dashed;
border-color: #ff9600;
display: inline-block;
position: relative;
width: 100%;
box-sizing: border-box;
background-color: #793300;
}
}
</style>