mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
feat(editor): Migrate Design System and Editor UI to Vue 3 (#6476)
* feat: remove vue-fragment (no-changelog) * feat: partial design-system migration * feat: migrate info-accordion and info-tip components * feat: migrate several components to vue 3 * feat: migrated several components * feat: migrate several components * feat: migrate several components * feat: migrate several components * feat: re-exported all design system components * fix: fix design for popper components * fix: editor kind of working, lots of issues to fix * fix: fix several vue 3 migration issues * fix: replace @change with @update:modelValue in several places * fix: fix translation linking * fix: fix inline-edit input * fix: fix ndv and dialog design * fix: update parameter input event bindings * fix: rename deprecated lifecycle methods * fix: fix json view mapping * build: update lock file * fix(editor): revisit last conflict with master and fix issues * fix(editor): revisit last conflict with master and fix issues * fix: fix expression editor bug causing code mirror to no longer be reactive * fix: fix resource locator bug * fix: fix vue-agile integration * fix: remove global import for vue-agile * fix: replace element-plus buttons with n8n-buttons everywhere * fix(editor): Fix various element-plus styles (#6571) * fix(editor): Fix various element-plus styles Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Remove debugging code Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Address PR comments Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): Fix loading in production mode [Vue 3] (#6578) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix(editor): First round of e2e tests fixes with Vue 3 (#6579) * fix(editor): Fix broken smoke and workflow list e2e tests * ✔️ Fix failing canvas action tests. Updating some selectors used in credentials and workflow tests * feat: add vue 3 eslint rules and fix issues * fix: fix tags-dropdown * fix: fix white-space issues caused by i18n-t * fix: rename non-generic click events * fix: fix search in resources list layout * fix: fix datatable paginator * fix: fix popper select caret and dropdown size * fix: add width to action-dropdown * fix: fix workflow settings icon not being hidden * fix: refactor newly added code * fix: fix merge issue * fix: fix ndv credentials watcher * fix: fix workflow saving and grabber notch * fix: fix nodes list panel transition * fix: fix node title visibility * fix: fix data unpinning * fix: fix value access * fix: show input panel only if trigger panel enabled or not trigger node * fix: fix tags dropdown and executions status spcing * fix(editor): Prevent execution list to load back when leaving the route (#6697) fix(editor): prevent execution list to load back when leaving the route * fix: fix drawer visibility * fix: fix expression toggle padding * fix: fix expressions editor styling * chore: prepare for testing * fix: fix styling for el-button without patching * test: fix unit tests in design-system * test: fix most unit tests * fix: remove import cycle. * fix: fix personalization modal tests * fix further resource mapper test adjustments * fix: fix multiple tests and n8n-route attr duplication * fix: fix source control tets * fix: fixed remaining unit tests * fix: fix workflows and credentials e2e tests * fix: fix localizeNodeNames * fix: update ndv e2e tests * fix: fix popper left placement arrow * fix: fix 5-ndv e2e tests * fix: fix 6-code-node e2e tests * fix(editor): Drop click outside directive from NodeCreator (#6716) * fix(editor): Drop click outside directive from NodeCreator * fix(editor): make sure mouseup outside is unbound at least before the component is unmounted * fix: fix 10-settings-log-streaming e2e tests * fix: fix node redrawing * fix: fix tooltip buttons styling * fix: fix varous e2e suites * fix: fix 15-scheduler-node e2e suite * fix: fix route watcher * fix: fixed param name update and credential edit * feat: update event names * refactor: Remove deprecated `$data` (#6576) Co-authored-by: Alex Grozav <alex@grozav.com> * fix: fix 17-sharing e2e suite * fix: fix tags dropdown * fix: fix tags manager * fix(editor): move :deep selectors to a separate scoped style block * fix: fix sticky component and inline text edit * fix: update e2e tests * fix: remove button override references * fix(editor): Adjust spacing in templates for Vue 3 (#6744) * fix(editor): Adjust spacing in templates * fix: Undo unneeded change * fix: Undo unneeded change * fix(editor): Adjust NDV height for Vue 3 (#6742) fix(editor): Adjust NDV height * fix(editor): Restore collapsed sidebar items for Vue 3 (#6743) fix(editor): Restore collapsed sidebar items * fix: fix linting issues * fix: fix design-system deps * fix: post-merge fixes * fix: update tests * fix: increase timeout for executionslist tets * chore: fix linting issue * fix: fix 14-mapping e2e tests in ci * fix: re-enable tests * fix: fix workflow duplication e2e tests after tags update * fix(editor): Change component prop to be typed * fix: fix tags dropdown in duplicate wf modal * fix: fix focus behaviour in tags selector * fix: fix tag creation * fix: fix log streaming e2e race condition * fix(editor): Fix Vue 3 linting issues (#6748) * fix(editor): Fix Vue 3 linting issues Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix MainSidebar linter issues * revert pnpm lock * update pnpm lock file --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Some css fixes for vue3 branch (#6749) * ✨ Fixing filter button height * ✨ Update input modal button position * ✨ Updating tags styling * ✨ Fix event logging settings spacing * 👕 Fixing lint errors * fix: fix linting issues * Revert to `// eslint-disable-next-line @typescript-eslint/no-misused-promises` disabling of mixins init Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix css issue * fix(editor): Lint fix * fix(editor): Fix settings initialisation (#6750) Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * fix: fix initial settings loading * fix: replace realClick with click force * fix: fix randomly failing mapping e2e tests * fix(editor): Fix menu item event handling * fix: fix resource filters dropdown events (#6752) * fix: fix resource filters dropdown events * fix: remove teleported:false * fix: fix event selection event naming (#6753) * fix: removed console.log (#6754) * fix: rever await nextTick changes * fix: redo linting changes * fix(editor): Redraw node connections if adding more than one node to canvas (#6755) * fix(editor): Redraw node connections if adding more than one node to canvas Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Update position before connection two nodes * Lint fix --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Alex Grozav <alex@grozav.com> * fix(editor): Fix `ResourceMapper` unit tests (#6758) * ✔️ Fix matching columns test * ✔️ Fix multiple matching columns test * ✔️ Removing `skip` from the last test * fix: Allow pasting a big workflow (#6760) * fix: pasting a big workflow * chore: update comment * refactor: move try/catch to function * refactor: move try/catch to function * fix(editor): Fix modal layer width * fix: fix position changes * fix: undo it.only * fix: make undo/redo multiple steps more verbose * fix: Fix value survey styles (#6764) * fix: fix value survey styles * fix: lint * Revert "fix: lint" 72869c431f1448861df021be041b61c62f1e3118 * fix: lint * fix(editor): Fix collapsed sub menu * fix: Fix drawer animation (#6767) fix: drawer animation * fix(editor): Fix source control buttons (#6769) * fix(editor): Fix App loading & auth (#6768) * fix(editor): Fix App loading & auth Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Await promises Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> * Fix eslint error Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> --------- Signed-off-by: Oleg Ivaniv <me@olegivaniv.com> Co-authored-by: Csaba Tuncsik <csaba@n8n.io> Co-authored-by: OlegIvaniv <me@olegivaniv.com> Co-authored-by: Milorad FIlipović <milorad@n8n.io> Co-authored-by: Iván Ovejero <ivov.src@gmail.com> Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
This commit is contained in:
Alex Grozav
@@ -2,8 +2,12 @@
|
||||
<div @keydown.stop :class="parameterInputClasses">
|
||||
<expression-edit
|
||||
:dialogVisible="expressionEditDialogVisible"
|
||||
:value="
|
||||
isResourceLocatorParameter && typeof value !== 'string' ? (value ? value.value : '') : value
|
||||
:modelValue="
|
||||
isResourceLocatorParameter && typeof modelValue !== 'string'
|
||||
? modelValue
|
||||
? modelValue.value
|
||||
: ''
|
||||
: modelValue
|
||||
"
|
||||
:parameter="parameter"
|
||||
:path="path"
|
||||
@@ -11,14 +15,14 @@
|
||||
:isReadOnly="isReadOnly"
|
||||
:redactValues="shouldRedactValue"
|
||||
@closeDialog="closeExpressionEditDialog"
|
||||
@valueChanged="expressionUpdated"
|
||||
@update:modelValue="expressionUpdated"
|
||||
></expression-edit>
|
||||
<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
|
||||
<resource-locator
|
||||
v-if="isResourceLocatorParameter"
|
||||
ref="resourceLocator"
|
||||
:parameter="parameter"
|
||||
:value="value"
|
||||
:modelValue="modelValue"
|
||||
:dependentParametersValues="dependentParametersValues"
|
||||
:displayTitle="displayTitle"
|
||||
:expressionDisplayValue="expressionDisplayValue"
|
||||
@@ -30,7 +34,7 @@
|
||||
:node="node"
|
||||
:path="path"
|
||||
:event-bus="eventBus"
|
||||
@input="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
@modalOpenerClick="openExpressionEditorModal"
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@@ -38,12 +42,12 @@
|
||||
/>
|
||||
<ExpressionParameterInput
|
||||
v-else-if="isValueExpression || forceShowExpression"
|
||||
:value="expressionDisplayValue"
|
||||
:modelValue="expressionDisplayValue"
|
||||
:title="displayTitle"
|
||||
:isReadOnly="isReadOnly"
|
||||
:path="path"
|
||||
:class="{ 'ph-no-capture': shouldRedactValue }"
|
||||
@valueChanged="expressionUpdated"
|
||||
@update:modelValue="expressionUpdated"
|
||||
@modalOpenerClick="openExpressionEditorModal"
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@@ -57,69 +61,69 @@
|
||||
>
|
||||
<el-dialog
|
||||
v-if="codeEditDialogVisible"
|
||||
visible
|
||||
:modelValue="true"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
width="80%"
|
||||
:title="`${$locale.baseText('codeEdit.edit')} ${$locale
|
||||
:title="`${i18n.baseText('codeEdit.edit')} ${$locale
|
||||
.nodeText()
|
||||
.inputLabelDisplayName(parameter, path)}`"
|
||||
:before-close="closeCodeEditDialog"
|
||||
>
|
||||
<div class="ignore-key-press">
|
||||
<code-node-editor
|
||||
:value="value"
|
||||
:modelValue="modelValue"
|
||||
:defaultValue="parameter.default"
|
||||
:language="editorLanguage"
|
||||
:isReadOnly="isReadOnly"
|
||||
@valueChanged="expressionUpdated"
|
||||
@update:modelValue="expressionUpdated"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<text-edit
|
||||
:dialogVisible="textEditDialogVisible"
|
||||
:value="value"
|
||||
:modelValue="modelValue"
|
||||
:parameter="parameter"
|
||||
:path="path"
|
||||
:isReadOnly="isReadOnly"
|
||||
@closeDialog="closeTextEditDialog"
|
||||
@valueChanged="expressionUpdated"
|
||||
@update:modelValue="expressionUpdated"
|
||||
></text-edit>
|
||||
|
||||
<code-node-editor
|
||||
v-if="editorType === 'codeNodeEditor' && isCodeNode(node)"
|
||||
:mode="node.parameters.mode"
|
||||
:value="value"
|
||||
:modelValue="modelValue"
|
||||
:defaultValue="parameter.default"
|
||||
:language="editorLanguage"
|
||||
:isReadOnly="isReadOnly"
|
||||
:aiButtonEnabled="settingsStore.isCloudDeployment"
|
||||
@valueChanged="valueChangedDebounced"
|
||||
@update:modelValue="valueChangedDebounced"
|
||||
/>
|
||||
|
||||
<html-editor
|
||||
v-else-if="editorType === 'htmlEditor'"
|
||||
:html="value"
|
||||
:modelValue="modelValue"
|
||||
:isReadOnly="isReadOnly"
|
||||
:rows="getArgument('rows')"
|
||||
:disableExpressionColoring="!isHtmlNode(node)"
|
||||
:disableExpressionCompletions="!isHtmlNode(node)"
|
||||
@valueChanged="valueChangedDebounced"
|
||||
@update:modelValue="valueChangedDebounced"
|
||||
/>
|
||||
|
||||
<sql-editor
|
||||
v-else-if="editorType === 'sqlEditor'"
|
||||
:query="value"
|
||||
:modelValue="modelValue"
|
||||
:dialect="getArgument('sqlDialect')"
|
||||
:isReadOnly="isReadOnly"
|
||||
@valueChanged="valueChangedDebounced"
|
||||
@update:modelValue="valueChangedDebounced"
|
||||
/>
|
||||
|
||||
<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
|
||||
<code-node-editor
|
||||
v-if="!codeEditDialogVisible"
|
||||
:value="value"
|
||||
:modelValue="modelValue"
|
||||
:language="editorLanguage"
|
||||
:isReadOnly="true"
|
||||
/>
|
||||
@@ -133,10 +137,8 @@
|
||||
:size="inputSize"
|
||||
:type="getStringInputType"
|
||||
:rows="getArgument('rows')"
|
||||
:value="displayValue"
|
||||
:disabled="isReadOnly"
|
||||
@input="onTextInputChange"
|
||||
@change="valueChanged"
|
||||
@update:modelValue="valueChanged($event) && onUpdateTextInput($event)"
|
||||
@keydown.stop
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@@ -153,7 +155,7 @@
|
||||
focused: isFocused,
|
||||
invalid: !isFocused && getIssues.length > 0 && !isValueExpression,
|
||||
}"
|
||||
:title="$locale.baseText('parameterInput.openEditWindow')"
|
||||
:title="i18n.baseText('parameterInput.openEditWindow')"
|
||||
@click="displayEditDialog()"
|
||||
@focus="setFocus"
|
||||
/>
|
||||
@@ -165,11 +167,11 @@
|
||||
<el-color-picker
|
||||
size="small"
|
||||
class="color-picker"
|
||||
:value="displayValue"
|
||||
:modelValue="displayValue"
|
||||
:disabled="isReadOnly"
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@change="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
:title="displayTitle"
|
||||
:show-alpha="getArgument('showAlpha')"
|
||||
/>
|
||||
@@ -177,9 +179,8 @@
|
||||
v-model="tempValue"
|
||||
:size="inputSize"
|
||||
type="text"
|
||||
:value="tempValue"
|
||||
:disabled="isReadOnly"
|
||||
@change="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
@keydown.stop
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@@ -193,17 +194,17 @@
|
||||
ref="inputField"
|
||||
type="datetime"
|
||||
:size="inputSize"
|
||||
:value="displayValue"
|
||||
:modelValue="displayValue"
|
||||
:title="displayTitle"
|
||||
:disabled="isReadOnly"
|
||||
:placeholder="
|
||||
parameter.placeholder
|
||||
? getPlaceholder()
|
||||
: $locale.baseText('parameterInput.selectDateAndTime')
|
||||
: i18n.baseText('parameterInput.selectDateAndTime')
|
||||
"
|
||||
:picker-options="dateTimePickerOptions"
|
||||
:class="{ 'ph-no-capture': shouldRedactValue }"
|
||||
@change="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@keydown.stop
|
||||
@@ -213,15 +214,14 @@
|
||||
v-else-if="parameter.type === 'number'"
|
||||
ref="inputField"
|
||||
:size="inputSize"
|
||||
:value="displayValue"
|
||||
:modelValue="displayValue"
|
||||
:controls="false"
|
||||
:max="getArgument('maxValue')"
|
||||
:min="getArgument('minValue')"
|
||||
:precision="getArgument('numberPrecision')"
|
||||
:disabled="isReadOnly"
|
||||
:class="{ 'ph-no-capture': shouldRedactValue }"
|
||||
@change="valueChanged"
|
||||
@input="onTextInputChange"
|
||||
@update:modelValue="onUpdateTextInput"
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@keydown.stop
|
||||
@@ -240,7 +240,7 @@
|
||||
:isReadOnly="isReadOnly"
|
||||
:displayTitle="displayTitle"
|
||||
@credentialSelected="credentialSelected"
|
||||
@valueChanged="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
@setFocus="setFocus"
|
||||
@onBlur="onBlur"
|
||||
>
|
||||
@@ -254,14 +254,14 @@
|
||||
ref="inputField"
|
||||
:size="inputSize"
|
||||
filterable
|
||||
:value="displayValue"
|
||||
:modelValue="displayValue"
|
||||
:placeholder="
|
||||
parameter.placeholder ? getPlaceholder() : $locale.baseText('parameterInput.select')
|
||||
parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
|
||||
"
|
||||
:loading="remoteParameterOptionsLoading"
|
||||
:disabled="isReadOnly || remoteParameterOptionsLoading"
|
||||
:title="displayTitle"
|
||||
@change="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
@keydown.stop
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@@ -294,12 +294,12 @@
|
||||
:size="inputSize"
|
||||
filterable
|
||||
multiple
|
||||
:value="displayValue"
|
||||
:modelValue="displayValue"
|
||||
:loading="remoteParameterOptionsLoading"
|
||||
:disabled="isReadOnly || remoteParameterOptionsLoading"
|
||||
:title="displayTitle"
|
||||
:placeholder="$locale.baseText('parameterInput.select')"
|
||||
@change="valueChanged"
|
||||
:placeholder="i18n.baseText('parameterInput.select')"
|
||||
@update:modelValue="valueChanged"
|
||||
@keydown.stop
|
||||
@focus="setFocus"
|
||||
@blur="onBlur"
|
||||
@@ -325,7 +325,7 @@
|
||||
<n8n-input
|
||||
v-else-if="parameter.type === 'boolean' && droppable"
|
||||
:size="inputSize"
|
||||
:value="JSON.stringify(displayValue)"
|
||||
:modelValue="JSON.stringify(displayValue)"
|
||||
:disabled="isReadOnly"
|
||||
:title="displayTitle"
|
||||
/>
|
||||
@@ -334,9 +334,9 @@
|
||||
:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
|
||||
ref="inputField"
|
||||
active-color="#13ce66"
|
||||
:value="displayValue"
|
||||
:modelValue="displayValue"
|
||||
:disabled="isReadOnly"
|
||||
@change="valueChanged"
|
||||
@update:modelValue="valueChanged"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -391,9 +391,9 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import { useCredentialsStore } from '@/stores/credentials.store';
|
||||
import { useSettingsStore } from '@/stores/settings.store';
|
||||
import { htmlEditorEventBus } from '@/event-bus';
|
||||
import Vue from 'vue';
|
||||
import type { EventBus } from 'n8n-design-system/utils';
|
||||
import { createEventBus } from 'n8n-design-system/utils';
|
||||
import { useI18n } from '@/composables';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'parameter-input',
|
||||
@@ -419,7 +419,7 @@ export default defineComponent({
|
||||
path: {
|
||||
type: String,
|
||||
},
|
||||
value: {
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean, Array, Object] as PropType<NodeParameterValueType>,
|
||||
},
|
||||
hideLabel: {
|
||||
@@ -469,6 +469,13 @@ export default defineComponent({
|
||||
default: () => createEventBus(),
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const i18n = useI18n();
|
||||
|
||||
return {
|
||||
i18n,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
codeEditDialogVisible: false,
|
||||
@@ -523,7 +530,7 @@ export default defineComponent({
|
||||
// on which the current field depends on changes
|
||||
await this.loadRemoteParameterOptions();
|
||||
},
|
||||
value() {
|
||||
modelValue() {
|
||||
if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true) {
|
||||
// Do not set for color with alpha else wrong value gets displayed in field
|
||||
return;
|
||||
@@ -544,7 +551,9 @@ export default defineComponent({
|
||||
return '';
|
||||
}
|
||||
|
||||
const value = isResourceLocatorValue(this.value) ? this.value.value : this.value;
|
||||
const value = isResourceLocatorValue(this.modelValue)
|
||||
? this.modelValue.value
|
||||
: this.modelValue;
|
||||
if (typeof value === 'string' && value.startsWith('=')) {
|
||||
return value.slice(1);
|
||||
}
|
||||
@@ -552,7 +561,7 @@ export default defineComponent({
|
||||
return `${this.displayValue ?? ''}`;
|
||||
},
|
||||
isValueExpression(): boolean {
|
||||
return isValueExpression(this.parameter, this.value);
|
||||
return isValueExpression(this.parameter, this.modelValue);
|
||||
},
|
||||
codeAutocomplete(): string | undefined {
|
||||
return this.getArgument('codeAutocomplete') as string | undefined;
|
||||
@@ -586,17 +595,14 @@ export default defineComponent({
|
||||
const interpolation = { interpolate: { shortPath: this.shortPath } };
|
||||
|
||||
if (this.getIssues.length && this.isValueExpression) {
|
||||
return this.$locale.baseText(
|
||||
'parameterInput.parameterHasIssuesAndExpression',
|
||||
interpolation,
|
||||
);
|
||||
return this.i18n.baseText('parameterInput.parameterHasIssuesAndExpression', interpolation);
|
||||
} else if (this.getIssues.length && !this.isValueExpression) {
|
||||
return this.$locale.baseText('parameterInput.parameterHasIssues', interpolation);
|
||||
return this.i18n.baseText('parameterInput.parameterHasIssues', interpolation);
|
||||
} else if (!this.getIssues.length && this.isValueExpression) {
|
||||
return this.$locale.baseText('parameterInput.parameterHasExpression', interpolation);
|
||||
return this.i18n.baseText('parameterInput.parameterHasExpression', interpolation);
|
||||
}
|
||||
|
||||
return this.$locale.baseText('parameterInput.parameter', interpolation);
|
||||
return this.i18n.baseText('parameterInput.parameter', interpolation);
|
||||
},
|
||||
displayValue(): string | number | boolean | null {
|
||||
if (this.remoteParameterOptionsLoading === true) {
|
||||
@@ -604,27 +610,27 @@ export default defineComponent({
|
||||
// to user that the data is loading. If not it would
|
||||
// display the user the key instead of the value it
|
||||
// represents
|
||||
return this.$locale.baseText('parameterInput.loadingOptions');
|
||||
return this.i18n.baseText('parameterInput.loadingOptions');
|
||||
}
|
||||
|
||||
// if the value is marked as empty return empty string, to prevent displaying the asterisks
|
||||
if (this.value === CREDENTIAL_EMPTY_VALUE) {
|
||||
if (this.modelValue === CREDENTIAL_EMPTY_VALUE) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let returnValue;
|
||||
if (this.isValueExpression === false) {
|
||||
returnValue = this.isResourceLocatorParameter
|
||||
? isResourceLocatorValue(this.value)
|
||||
? this.value.value
|
||||
? isResourceLocatorValue(this.modelValue)
|
||||
? this.modelValue.value
|
||||
: ''
|
||||
: this.value;
|
||||
: this.modelValue;
|
||||
} else {
|
||||
returnValue = this.expressionEvaluated;
|
||||
}
|
||||
|
||||
if (this.parameter.type === 'credentialsSelect' && typeof this.value === 'string') {
|
||||
const credType = this.credentialsStore.getCredentialTypeByName(this.value);
|
||||
if (this.parameter.type === 'credentialsSelect' && typeof this.modelValue === 'string') {
|
||||
const credType = this.credentialsStore.getCredentialTypeByName(this.modelValue);
|
||||
if (credType) {
|
||||
returnValue = credType.displayName;
|
||||
}
|
||||
@@ -690,7 +696,7 @@ export default defineComponent({
|
||||
if (this.parameter.type === 'credentialsSelect' && this.displayValue === '') {
|
||||
issues.parameters = issues.parameters || {};
|
||||
|
||||
const issue = this.$locale.baseText('parameterInput.selectACredentialTypeFromTheDropdown');
|
||||
const issue = this.i18n.baseText('parameterInput.selectACredentialTypeFromTheDropdown');
|
||||
|
||||
issues.parameters[this.parameter.name] = [issue];
|
||||
} else if (
|
||||
@@ -723,7 +729,7 @@ export default defineComponent({
|
||||
issues.parameters = {};
|
||||
}
|
||||
|
||||
const issue = this.$locale.baseText('parameterInput.theValueIsNotSupported', {
|
||||
const issue = this.i18n.baseText('parameterInput.theValueIsNotSupported', {
|
||||
interpolate: { checkValue },
|
||||
});
|
||||
|
||||
@@ -859,18 +865,18 @@ export default defineComponent({
|
||||
},
|
||||
getPlaceholder(): string {
|
||||
return this.isForCredential
|
||||
? this.$locale.credText().placeholder(this.parameter)
|
||||
: this.$locale.nodeText().placeholder(this.parameter, this.path);
|
||||
? this.i18n.credText().placeholder(this.parameter)
|
||||
: this.i18n.nodeText().placeholder(this.parameter, this.path);
|
||||
},
|
||||
getOptionsOptionDisplayName(option: INodePropertyOptions): string {
|
||||
return this.isForCredential
|
||||
? this.$locale.credText().optionsOptionDisplayName(this.parameter, option)
|
||||
: this.$locale.nodeText().optionsOptionDisplayName(this.parameter, option, this.path);
|
||||
? this.i18n.credText().optionsOptionDisplayName(this.parameter, option)
|
||||
: this.i18n.nodeText().optionsOptionDisplayName(this.parameter, option, this.path);
|
||||
},
|
||||
getOptionsOptionDescription(option: INodePropertyOptions): string {
|
||||
return this.isForCredential
|
||||
? this.$locale.credText().optionsOptionDescription(this.parameter, option)
|
||||
: this.$locale.nodeText().optionsOptionDescription(this.parameter, option, this.path);
|
||||
? this.i18n.credText().optionsOptionDescription(this.parameter, option)
|
||||
: this.i18n.nodeText().optionsOptionDescription(this.parameter, option, this.path);
|
||||
},
|
||||
|
||||
async loadRemoteParameterOptions() {
|
||||
@@ -952,7 +958,7 @@ export default defineComponent({
|
||||
},
|
||||
expressionUpdated(value: string) {
|
||||
const val: NodeParameterValueType = this.isResourceLocatorParameter
|
||||
? { __rl: true, value, mode: this.value.mode }
|
||||
? { __rl: true, value, mode: this.modelValue.mode }
|
||||
: value;
|
||||
this.valueChanged(val);
|
||||
},
|
||||
@@ -969,7 +975,7 @@ export default defineComponent({
|
||||
onResourceLocatorDrop(data: string) {
|
||||
this.$emit('drop', data);
|
||||
},
|
||||
setFocus() {
|
||||
async setFocus() {
|
||||
if (['json'].includes(this.parameter.type) && this.getArgument('alwaysOpenEditWindow')) {
|
||||
this.displayEditDialog();
|
||||
return;
|
||||
@@ -985,14 +991,13 @@ export default defineComponent({
|
||||
this.nodeName = this.node.name;
|
||||
}
|
||||
|
||||
Vue.nextTick(() => {
|
||||
await this.$nextTick();
|
||||
// @ts-ignore
|
||||
if (this.$refs.inputField?.focus && this.$refs.inputField?.$el) {
|
||||
// @ts-ignore
|
||||
if (this.$refs.inputField?.focus && this.$refs.inputField?.$el) {
|
||||
// @ts-ignore
|
||||
this.$refs.inputField.focus();
|
||||
this.isFocused = true;
|
||||
}
|
||||
});
|
||||
this.$refs.inputField.focus();
|
||||
this.isFocused = true;
|
||||
}
|
||||
|
||||
this.$emit('focus');
|
||||
},
|
||||
@@ -1030,6 +1035,10 @@ export default defineComponent({
|
||||
valueChangedDebounced(value: NodeParameterValueType | {} | Date) {
|
||||
void this.callDebounced('valueChanged', { debounceTime: 100 }, value);
|
||||
},
|
||||
onUpdateTextInput(value: string) {
|
||||
this.valueChanged(value);
|
||||
this.onTextInputChange(value);
|
||||
},
|
||||
valueChanged(value: NodeParameterValueType | {} | Date) {
|
||||
if (this.parameter.name === 'nodeCredentialType') {
|
||||
this.activeCredentialType = value as string;
|
||||
@@ -1059,7 +1068,7 @@ export default defineComponent({
|
||||
value,
|
||||
};
|
||||
|
||||
this.$emit('valueChanged', parameterData);
|
||||
this.$emit('update', parameterData);
|
||||
|
||||
if (this.parameter.name === 'operation' || this.parameter.name === 'mode') {
|
||||
this.$telemetry.track('User set node operation or mode', {
|
||||
@@ -1072,30 +1081,34 @@ export default defineComponent({
|
||||
});
|
||||
}
|
||||
},
|
||||
optionSelected(command: string) {
|
||||
const prevValue = this.value;
|
||||
async optionSelected(command: string) {
|
||||
const prevValue = this.modelValue;
|
||||
|
||||
if (command === 'resetValue') {
|
||||
this.valueChanged(this.parameter.default);
|
||||
} else if (command === 'addExpression') {
|
||||
if (this.isResourceLocatorParameter) {
|
||||
if (isResourceLocatorValue(this.value)) {
|
||||
this.valueChanged({ __rl: true, value: `=${this.value.value}`, mode: this.value.mode });
|
||||
if (isResourceLocatorValue(this.modelValue)) {
|
||||
this.valueChanged({
|
||||
__rl: true,
|
||||
value: `=${this.modelValue.value}`,
|
||||
mode: this.modelValue.mode,
|
||||
});
|
||||
} else {
|
||||
this.valueChanged({ __rl: true, value: `=${this.value}`, mode: '' });
|
||||
this.valueChanged({ __rl: true, value: `=${this.modelValue}`, mode: '' });
|
||||
}
|
||||
} else if (
|
||||
this.parameter.type === 'number' &&
|
||||
(!this.value || this.value === '[Object: null]')
|
||||
(!this.modelValue || this.modelValue === '[Object: null]')
|
||||
) {
|
||||
this.valueChanged('={{ 0 }}');
|
||||
} else if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
|
||||
this.valueChanged(`={{ ${this.value} }}`);
|
||||
this.valueChanged(`={{ ${this.modelValue} }}`);
|
||||
} else {
|
||||
this.valueChanged(`=${this.value}`);
|
||||
this.valueChanged(`=${this.modelValue}`);
|
||||
}
|
||||
|
||||
this.setFocus();
|
||||
await this.setFocus();
|
||||
} else if (command === 'removeExpression') {
|
||||
let value: NodeParameterValueType = this.expressionEvaluated;
|
||||
|
||||
@@ -1111,14 +1124,14 @@ export default defineComponent({
|
||||
);
|
||||
}
|
||||
|
||||
if (this.isResourceLocatorParameter && isResourceLocatorValue(this.value)) {
|
||||
this.valueChanged({ __rl: true, value, mode: this.value.mode });
|
||||
if (this.isResourceLocatorParameter && isResourceLocatorValue(this.modelValue)) {
|
||||
this.valueChanged({ __rl: true, value, mode: this.modelValue.mode });
|
||||
} else {
|
||||
let newValue = typeof value !== 'undefined' ? value : null;
|
||||
|
||||
if (this.parameter.type === 'string') {
|
||||
// Strip the '=' from the beginning
|
||||
newValue = this.value ? this.value.toString().substring(1) : null;
|
||||
newValue = this.modelValue ? this.modelValue.toString().substring(1) : null;
|
||||
}
|
||||
|
||||
this.valueChanged(newValue);
|
||||
@@ -1147,14 +1160,13 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
},
|
||||
updated() {
|
||||
this.$nextTick(() => {
|
||||
const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
|
||||
async updated() {
|
||||
await this.$nextTick();
|
||||
const remoteParameterOptions = this.$el.querySelectorAll('.remote-parameter-option');
|
||||
|
||||
if (remoteParameterOptions.length > 0) {
|
||||
void this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
|
||||
}
|
||||
});
|
||||
if (remoteParameterOptions.length > 0) {
|
||||
void this.$externalHooks().run('parameterInput.updated', { remoteParameterOptions });
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.eventBus.on('optionSelected', this.optionSelected);
|
||||
@@ -1184,7 +1196,7 @@ export default defineComponent({
|
||||
// Make sure to load the parameter options
|
||||
// directly and whenever the credentials change
|
||||
this.$watch(
|
||||
() => this.node!.credentials,
|
||||
() => this.node?.credentials,
|
||||
() => {
|
||||
void this.loadRemoteParameterOptions();
|
||||
},
|
||||
@@ -1197,7 +1209,7 @@ export default defineComponent({
|
||||
inputFieldRef: this.$refs['inputField'],
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
this.eventBus.off('optionSelected', this.optionSelected);
|
||||
},
|
||||
});
|
||||
@@ -1224,13 +1236,13 @@ export default defineComponent({
|
||||
|
||||
.parameter-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
::v-deep .color-input {
|
||||
display: flex;
|
||||
:deep(.color-input) {
|
||||
display: flex;
|
||||
|
||||
.el-color-picker__trigger {
|
||||
border: none;
|
||||
.el-color-picker__trigger {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1307,7 +1319,7 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-opener > .el-input__suffix {
|
||||
.input-with-opener .el-input__suffix {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user