fix(editor): Show error state correctly in options parameter with remote options (#9836)

This commit is contained in:
Elias Meire
2024-06-26 12:35:55 +02:00
committed by GitHub
parent 803895360c
commit 5bc58efde9
4 changed files with 51 additions and 3 deletions

View File

@@ -1,5 +1,9 @@
<template>
<div class="fixed-collection-parameter" @keydown.stop>
<div
class="fixed-collection-parameter"
:data-test-id="`fixed-collection-${parameter.name}`"
@keydown.stop
>
<div v-if="getProperties.length === 0" class="no-items-exist">
<n8n-text size="small">{{
$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
@@ -98,6 +102,7 @@
v-if="parameter.options && parameter.options.length === 1"
type="tertiary"
block
data-test-id="fixed-collection-add"
:label="getPlaceholderText"
@click="optionSelected(parameter.options[0].name)"
/>

View File

@@ -504,7 +504,12 @@ import TextEdit from '@/components/TextEdit.vue';
import { hasExpressionMapping, isValueExpression } from '@/utils/nodeTypesUtils';
import { isResourceLocatorValue } from '@/utils/typeGuards';
import { CUSTOM_API_CALL_KEY, HTML_NODE_TYPE, NODES_USING_CODE_NODE_EDITOR } from '@/constants';
import {
CORE_NODES_CATEGORY,
CUSTOM_API_CALL_KEY,
HTML_NODE_TYPE,
NODES_USING_CODE_NODE_EDITOR,
} from '@/constants';
import { useDebounce } from '@/composables/useDebounce';
import { useExternalHooks } from '@/composables/useExternalHooks';
@@ -632,6 +637,15 @@ const dateTimePickerOptions = ref({
const isFocused = ref(false);
const displayValue = computed<string | number | boolean | null>(() => {
if (remoteParameterOptionsLoadingIssues.value) {
if (!nodeType.value || nodeType.value?.codex?.categories?.includes(CORE_NODES_CATEGORY)) {
return i18n.baseText('parameterInput.loadOptionsError');
}
return i18n.baseText('parameterInput.loadOptionsErrorService', {
interpolate: { service: nodeType.value.displayName },
});
}
if (remoteParameterOptionsLoading.value) {
// If it is loading options from server display
// to user that the data is loading. If not it would
@@ -731,6 +745,9 @@ const dependentParametersValues = computed<string | null>(() => {
});
const node = computed(() => ndvStore.activeNode ?? undefined);
const nodeType = computed(
() => node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
);
const displayTitle = computed<string>(() => {
const interpolation = { interpolate: { shortPath: shortPath.value } };
@@ -1381,6 +1398,10 @@ watch(
},
);
watch(remoteParameterOptionsLoading, () => {
tempValue.value = displayValue.value as string;
});
onUpdated(async () => {
await nextTick();