mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Update assignment hint when user hovers table row (#8782)

Browse source
This commit is contained in:
Elias Meire 2024-03-05 12:42:06 +01:00 committed by GitHub
parent 5d5466343e
commit 8c993aa59d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 56 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
cypress/e2e/14-mapping.cy.ts
View file

@ -285,8 +285,8 @@ describe('Data mapping', () => {
ndv.actions.clearParameterInput('value');
cy.get('body').type('{esc}');
ndv.getters.parameterInput('keepOnlySet').find('input[type="checkbox"]').should('exist');
ndv.getters.parameterInput('keepOnlySet').find('input[type="text"]').should('not.exist');
ndv.getters.parameterInput('includeOtherFields').find('input[type="checkbox"]').should('exist');
ndv.getters.parameterInput('includeOtherFields').find('input[type="text"]').should('not.exist');
ndv.getters
.inputDataContainer()
.should('exist')
@ -296,9 +296,12 @@ describe('Data mapping', () => {
.realMouseMove(100, 100);
cy.wait(50);
ndv.getters.parameterInput('keepOnlySet').find('input[type="checkbox"]').should('not.exist');
ndv.getters
.parameterInput('keepOnlySet')
.parameterInput('includeOtherFields')
.find('input[type="checkbox"]')
.should('not.exist');
ndv.getters
.parameterInput('includeOtherFields')
.find('input[type="text"]')
.should('exist')
.invoke('css', 'border')

40
cypress/fixtures/Test_workflow_3.json
View file

@ -20,20 +20,21 @@
},
{
"parameters": {
"values": {
"string": [
{
"name": "other",
"value": ""
}
"assignments": {
"assignments": [
{
"id": "2b0f25a2-9483-4579-9f6d-91b7ac2fcb71",
"name": "other",
"value": "",
"type": "string"
}
]
},
"options": {}
}
},
"id": "2dfc690a-95cf-48c2-85a6-2b3bb8cd1d1d",
"name": "Set",
"type": "n8n-nodes-base.set",
"typeVersion": 1,
"typeVersion": 3.3,
"position": [
920,
300
@ -43,21 +44,22 @@
"id": "9bee04af-1bfc-4be2-a704-e975cb887ced",
"name": "Set1",
"type": "n8n-nodes-base.set",
"typeVersion": 1,
"typeVersion": 3.3,
"position": [
1120,
300
],
"parameters": {
"values": {
"string": [
{
"name": "other",
"value": ""
}
"assignments": {
"assignments": [
{
"id": "2b0f25a2-9483-4579-9f6d-91b7ac2fcb71",
"name": "other",
"value": "",
"type": "string"
}
]
},
"options": {}
}
}
}
],
@ -118,4 +120,4 @@
"instanceId": "fe45a93dd232270eb40d3ba1f7907ad3935bbd72ad5e4ee09ff61e96674f9aef"
},
"tags": []
}
}

32
packages/editor-ui/src/components/AssignmentCollection/Assignment.vue
View file

@ -10,6 +10,8 @@ import { isObject } from '@jsplumb/util';
import type { AssignmentValue, INodeProperties } from 'n8n-workflow';
import { computed, ref } from 'vue';
import TypeSelect from './TypeSelect.vue';
import { useNDVStore } from '@/stores/ndv.store';
import { useI18n } from '@/composables/useI18n';
interface Props {
path: string;
@ -29,6 +31,9 @@ const emit = defineEmits<{
(event: 'remove'): void;
}>();
const ndvStore = useNDVStore();
const i18n = useI18n();
const assignmentTypeToNodeProperty = (
type: string,
): Partial<INodeProperties> & Pick<INodeProperties, 'type'> => {
@ -52,7 +57,7 @@ const assignmentTypeToNodeProperty = (
};
const nameParameter = computed<INodeProperties>(() => ({
name: '',
name: 'name',
displayName: '',
default: '',
requiresDataPath: 'single',
@ -62,7 +67,7 @@ const nameParameter = computed<INodeProperties>(() => ({
const valueParameter = computed<INodeProperties>(() => {
return {
name: '',
name: 'value',
displayName: '',
default: '',
placeholder: 'value',
@ -77,7 +82,12 @@ const hint = computed(() => {
}
try {
const resolvedValue = resolveParameter(value) as unknown;
const resolvedValue = resolveParameter(value, {
targetItem: ndvStore.hoveringItem ?? undefined,
inputNodeName: ndvStore.ndvInputNodeName,
inputRunIndex: ndvStore.ndvInputRunIndex,
inputBranchIndex: ndvStore.ndvInputBranchIndex,
}) as unknown;
if (isObject(resolvedValue)) {
return JSON.stringify(resolvedValue);
@ -86,12 +96,20 @@ const hint = computed(() => {
return resolvedValue.toString();
}
if (resolvedValue === '') {
return i18n.baseText('parameterInput.emptyString');
}
return resolvedValue as string;
} catch (error) {
return '';
}
});
const highlightHint = computed(() =>
Boolean(hint.value && ndvStore.hoveringItem && ndvStore.isInputParentOfActiveNode),
);
const valueIsExpression = computed(() => {
const { value } = assignment.value;
@ -189,7 +207,13 @@ const onBlur = (): void => {
@update="onAssignmentValueChange"
@blur="onBlur"
/>
<ParameterInputHint :class="$style.hint" :hint="hint" single-line />
<ParameterInputHint
data-test-id="parameter-expression-preview-value"
:class="$style.hint"
:highlight="highlightHint"
:hint="hint"
single-line
/>
</div>
</template>
</InputTriple>