feat(editor): Show multiple nodes in input pane schema view (#9816)

packages/editor-ui/src/components/RunDataSearch.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted, type StyleValue } from 'vue';
+import { computed, ref, onMounted, onUnmounted, type StyleValue, watch } from 'vue';
 import { useI18n } from '@/composables/useI18n';
-import type { NodePanelType } from '@/Interface';
+import type { IRunDataDisplayMode, NodePanelType } from '@/Interface';
+import { useDebounce } from '@/composables/useDebounce';
 
 type Props = {
 	modelValue: string;
 	paneType?: NodePanelType;
+	displayMode?: IRunDataDisplayMode;
 	isAreaActive?: boolean;
 };
 
-const COLLAPSED_WIDTH = '34px';
-const OPEN_WIDTH = '200px';
+const COLLAPSED_WIDTH = '30px';
+const OPEN_WIDTH = '204px';
 const OPEN_MIN_WIDTH = '120px';
 
 const emit = defineEmits<{
@@ -20,18 +22,27 @@ const emit = defineEmits<{
 
 const props = withDefaults(defineProps<Props>(), {
 	paneType: 'output',
+	displayMode: 'schema',
 	isAreaActive: false,
 });
 
 const locale = useI18n();
+const { debounce } = useDebounce();
 
 const inputRef = ref<HTMLInputElement | null>(null);
+const search = ref(props.modelValue ?? '');
 const opened = ref(false);
-const placeholder = computed(() =>
-	props.paneType === 'input'
-		? locale.baseText('ndv.search.placeholder.input')
-		: locale.baseText('ndv.search.placeholder.output'),
-);
+const placeholder = computed(() => {
+	if (props.paneType === 'output') {
+		return locale.baseText('ndv.search.placeholder.output');
+	}
+
+	if (props.displayMode === 'schema') {
+		return locale.baseText('ndv.search.placeholder.input.schema');
+	}
+
+	return locale.baseText('ndv.search.placeholder.input');
+});
 
 const style = computed<StyleValue>(() =>
 	opened.value ? { maxWidth: OPEN_WIDTH, minWidth: OPEN_MIN_WIDTH } : { maxWidth: COLLAPSED_WIDTH },
@@ -50,25 +61,42 @@ const documentKeyHandler = (event: KeyboardEvent) => {
 	}
 };
 
+const debouncedEmitUpdate = debounce(async (value: string) => emit('update:modelValue', value), {
+	debounceTime: 300,
+	trailing: true,
+});
+
 const onSearchUpdate = (value: string) => {
-	emit('update:modelValue', value);
+	search.value = value;
+	void debouncedEmitUpdate(value);
 };
+
 const onFocus = () => {
 	opened.value = true;
 	inputRef.value?.select();
 	emit('focus');
 };
+
 const onBlur = () => {
 	if (!props.modelValue) {
 		opened.value = false;
 	}
 };
+
 onMounted(() => {
 	document.addEventListener('keyup', documentKeyHandler);
 });
+
 onUnmounted(() => {
 	document.removeEventListener('keyup', documentKeyHandler);
 });
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		search.value = value;
+	},
+);
 </script>
 
 <template>
@@ -80,7 +108,7 @@ onUnmounted(() => {
 			[$style.ioSearchOpened]: opened,
 		}"
 		:style="style"
-		:model-value="modelValue"
+		:model-value="search"
 		:placeholder="placeholder"
 		size="small"
 		@update:model-value="onSearchUpdate"
@@ -104,8 +132,17 @@ onUnmounted(() => {
 		cursor: pointer;
 	}
 
+	:global(.el-input__prefix) {
+		left: 8px;
+	}
+
+	&:global(.el-input--prefix .el-input__inner) {
+		padding-left: 30px;
+	}
+
 	input {
 		border: 0;
+		opacity: 0;
 		background: transparent;
 		cursor: pointer;
 	}
@@ -115,10 +152,12 @@ onUnmounted(() => {
 	.ioSearchIcon {
 		cursor: default;
 	}
+
 	input {
 		border: var(--input-border-color, var(--border-color-base))
 			var(--input-border-style, var(--border-style-base)) var(--border-width-base);
 		background: var(--input-background-color, var(--color-foreground-xlight));
+		opacity: 1;
 		cursor: text;
 	}
 }