fix(editor): Type errors in VariablesView.vue (no-changelog) (#9558)

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ComponentPublicInstance, PropType } from 'vue';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
-import type { EnvironmentVariable, Rule, RuleGroup } from '@/Interface';
+import type { Rule, RuleGroup } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
 import { useClipboard } from '@/composables/useClipboard';
@@ -9,6 +9,7 @@ import { EnterpriseEditionFeature } from '@/constants';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { getVariablesPermissions } from '@/permissions';
+import type { IResource } from './layouts/ResourcesListLayout.vue';
 
 const i18n = useI18n();
 const clipboard = useClipboard();
@@ -20,7 +21,7 @@ const emit = defineEmits(['save', 'cancel', 'edit', 'delete']);
 
 const props = defineProps({
 	data: {
-		type: Object as PropType<EnvironmentVariable>,
+		type: Object as PropType<IResource>,
 		default: () => ({}),
 	},
 	editing: {
@@ -30,20 +31,20 @@ const props = defineProps({
 });
 
 const permissions = computed(() => getVariablesPermissions(usersStore.currentUser));
-const modelValue = ref<EnvironmentVariable>({ ...props.data });
+const modelValue = ref<IResource>({ ...props.data });
 
 const formValidationStatus = ref<Record<string, boolean>>({
 	key: false,
 	value: false,
 });
 const formValid = computed(() => {
-	return formValidationStatus.value.key && formValidationStatus.value.value;
+	return formValidationStatus.value.name && formValidationStatus.value.value;
 });
 
 const keyInputRef = ref<ComponentPublicInstance & { inputRef?: HTMLElement }>();
 const valueInputRef = ref<HTMLElement>();
 
-const usage = ref(`$vars.${props.data.key}`);
+const usage = ref(`$vars.${props.data.name}`);
 
 const isFeatureEnabled = computed(() =>
 	settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),
@@ -77,17 +78,17 @@ const valueValidationRules: Array<Rule | RuleGroup> = [
 ];
 
 watch(
-	() => modelValue.value.key,
+	() => modelValue.value.name,
 	async () => {
 		await nextTick();
-		if (formValidationStatus.value.key) {
+		if (formValidationStatus.value.name) {
 			updateUsageSyntax();
 		}
 	},
 );
 
 function updateUsageSyntax() {
-	usage.value = `$vars.${modelValue.value.key || props.data.key}`;
+	usage.value = `$vars.${modelValue.value.name || props.data.name}`;
 }
 
 async function onCancel() {
@@ -111,8 +112,8 @@ async function onDelete() {
 	emit('delete', modelValue.value);
 }
 
-function onValidate(key: string, value: boolean) {
-	formValidationStatus.value[key] = value;
+function onValidate(name: string, value: boolean) {
+	formValidationStatus.value[name] = value;
 }
 
 function onUsageClick() {
@@ -132,19 +133,19 @@ function focusFirstInput() {
 	<tr :class="$style.variablesRow" data-test-id="variables-row">
 		<td class="variables-key-column">
 			<div>
-				<span v-if="!editing">{{ data.key }}</span>
+				<span v-if="!editing">{{ data.name }}</span>
 				<n8n-form-input
 					v-else
 					ref="keyInputRef"
-					v-model="modelValue.key"
+					v-model="modelValue.name"
 					label
-					name="key"
+					name="name"
 					data-test-id="variable-row-key-input"
 					:placeholder="i18n.baseText('variables.editing.key.placeholder')"
 					required
 					validate-on-blur
 					:validation-rules="keyValidationRules"
-					@validate="(value: boolean) => onValidate('key', value)"
+					@validate="(value: boolean) => onValidate('name', value)"
 				/>
 			</div>
 		</td>
@@ -168,7 +169,7 @@ function focusFirstInput() {
 		<td class="variables-usage-column">
 			<div>
 				<n8n-tooltip placement="top">
-					<span v-if="modelValue.key && usage" :class="$style.usageSyntax" @click="onUsageClick">{{
+					<span v-if="modelValue.name && usage" :class="$style.usageSyntax" @click="onUsageClick">{{
 						usage
 					}}</span>
 					<template #content>

packages/editor-ui/src/components/__tests__/VariablesRow.spec.ts

@@ -1,5 +1,4 @@
 import VariablesRow from '../VariablesRow.vue';
-import type { EnvironmentVariable } from '@/Interface';
 import { fireEvent } from '@testing-library/vue';
 import { setupServer } from '@/__tests__/server';
 import { afterAll, beforeAll } from 'vitest';
@@ -42,9 +41,9 @@ describe('VariablesRow', () => {
 		server.shutdown();
 	});
 
-	const environmentVariable: EnvironmentVariable = {
-		id: 1,
-		key: 'key',
+	const environmentVariable = {
+		id: '1',
+		name: 'key',
 		value: 'value',
 	};
 
@@ -83,7 +82,7 @@ describe('VariablesRow', () => {
 
 		expect(wrapper.getByTestId('variable-row-key-input')).toBeVisible();
 		expect(wrapper.getByTestId('variable-row-key-input').querySelector('input')).toHaveValue(
-			environmentVariable.key,
+			environmentVariable.name,
 		);
 		expect(wrapper.getByTestId('variable-row-value-input')).toBeVisible();
 		expect(wrapper.getByTestId('variable-row-value-input').querySelector('input')).toHaveValue(

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -163,8 +163,9 @@ import type { BaseTextKey } from '@/plugins/i18n';
 export interface IResource {
 	id: string;
 	name: string;
-	updatedAt: string;
-	createdAt: string;
+	value: string;
+	updatedAt?: string;
+	createdAt?: string;
 	homeProject?: ProjectSharingData;
 }