feat(editor): Implement folder navigation in workflows list (#13370)

packages/editor-ui/src/views/VariablesView.vue

@@ -17,6 +17,7 @@ import VariablesUsageBadge from '@/components/VariablesUsageBadge.vue';
 import ResourcesListLayout, {
 	type Resource,
 	type BaseFilters,
+	type VariableResource,
 } from '@/components/layouts/ResourcesListLayout.vue';
 
 import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
@@ -85,7 +86,18 @@ const addEmptyVariableForm = () => {
 	telemetry.track('User clicked add variable button');
 };
 
-const variables = computed(() => [...variableForms.value.values(), ...environmentsStore.variables]);
+const variables = computed<VariableResource[]>(() =>
+	[...variableForms.value.values(), ...environmentsStore.variables].map(
+		(variable) =>
+			({
+				resourceType: 'variable',
+				id: variable.id,
+				name: variable.key,
+				key: variable.key,
+				value: variable.value,
+			}) as VariableResource,
+	),
+);
 
 const canCreateVariables = computed(() => isFeatureEnabled.value && permissions.value.create);
 
@@ -118,11 +130,18 @@ const columns = computed(() => {
 
 const handleSubmit = async (variable: EnvironmentVariable) => {
 	try {
-		const { id, ...rest } = variable;
+		const { id } = variable;
 		if (id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
-			await environmentsStore.createVariable(rest);
+			await environmentsStore.createVariable({
+				value: variable.value,
+				key: variable.key,
+			});
 		} else {
-			await environmentsStore.updateVariable(variable);
+			await environmentsStore.updateVariable({
+				id: variable.id,
+				value: variable.value,
+				key: variable.key,
+			});
 		}
 		removeEditableVariable(id);
 	} catch (error) {
@@ -147,7 +166,11 @@ const handleDeleteVariable = async (variable: EnvironmentVariable) => {
 			return;
 		}
 
-		await environmentsStore.deleteVariable(variable);
+		await environmentsStore.deleteVariable({
+			id: variable.id,
+			value: variable.value,
+			key: variable.key,
+		});
 		removeEditableVariable(variable.id);
 	} catch (error) {
 		showError(error, i18n.baseText('variables.errors.delete'));