feat: Add variables feature (#5602)

* feat: add variables db models and migrations * feat: variables api endpoints * feat: add $variables to expressions * test: fix ActiveWorkflowRunner tests failing * test: a different fix for the tests broken by $variables * feat: variables licensing * fix: could create one extra variable than licensed for * feat: Add Variables UI page and $vars global property (#5750) * feat: add support for row slot to datatable * feat: add variables create, read, update, delete * feat: add vars autocomplete * chore: remove alert * feat: add variables autocomplete for code and expressions * feat: add tests for variable components * feat: add variables search and sort * test: update tests for variables view * chore: fix test and linting issue * refactor: review changes * feat: add variable creation telemetry * fix: Improve variables listing and disabled case, fix resource sorting (no-changelog) (#5903) * fix: Improve variables disabled experience and fix sorting * fix: update action box margin * test: update tests for variables row and datatable * fix: Add ee controller to base controller * fix: variables.ee routes not being added * feat: add variables validation * fix: fix vue-fragment bug that breaks everything * chore: Update lock * feat: Add variables input validation and permissions (no-changelog) (#5910) * feat: add input validation * feat: handle variables view for non-instance-owner users * test: update variables tests * fix: fix data-testid pattern * feat: improve overflow styles * test: fix variables row snapshot * feat: update sorting to take newly created variables into account * fix: fix list layout overflow * fix: fix adding variables on page other than 1. fix validation * feat: add docs link * fix: fix default displayName function for resource-list-layout * feat: improve vars expressions ux, cm-tooltip * test: fix datatable test * feat: add MATCH_REGEX validation rule * fix: overhaul how datatable pagination selector works * feat: update completer description * fix: conditionally update usage syntax based on key validation * test: update datatable snapshot * fix: fix variables-row button margins * fix: fix pagination overflow * test: Fix broken test * test: Update snapshot * fix: Remove duplicate declaration * feat: add custom variables icon --------- Co-authored-by: Alex Grozav <alex@grozav.com> Co-authored-by: Omar Ajoue <krynble@gmail.com>
2023-04-18 11:41:55 +01:00
parent 1555387ece
commit 1bb987140a
94 changed files with 2925 additions and 200 deletions
--- a/packages/editor-ui/src/components/tests/VariablesRow.spec.ts
+++ b/packages/editor-ui/src/components/tests/VariablesRow.spec.ts
@@ -0,0 +1,98 @@
+import VariablesRow from '../VariablesRow.vue';
+import { EnvironmentVariable } from '@/Interface';
+import { fireEvent, render } from '@testing-library/vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { setupServer } from '@/__tests__/server';
+import { afterAll, beforeAll } from 'vitest';
+import { useSettingsStore, useUsersStore } from '@/stores';
+
+describe('VariablesRow', () => {
+	let server: ReturnType<typeof setupServer>;
+
+	beforeAll(() => {
+		server = setupServer();
+	});
+
+	beforeEach(async () => {
+		setActivePinia(createPinia());
+
+		await useSettingsStore().getSettings();
+		await useUsersStore().loginWithCookie();
+	});
+
+	afterAll(() => {
+		server.shutdown();
+	});
+
+	const stubs = ['n8n-tooltip'];
+
+	const environmentVariable: EnvironmentVariable = {
+		id: 1,
+		key: 'key',
+		value: 'value',
+	};
+
+	it('should render correctly', () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+			},
+			stubs,
+		});
+
+		expect(wrapper.html()).toMatchSnapshot();
+		expect(wrapper.container.querySelectorAll('td')).toHaveLength(4);
+	});
+
+	it('should show edit and delete buttons on hover', async () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+			},
+			stubs,
+		});
+
+		await fireEvent.mouseEnter(wrapper.container);
+
+		expect(wrapper.getByTestId('variable-row-edit-button')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-delete-button')).toBeVisible();
+	});
+
+	it('should show key and value inputs in edit mode', async () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+				editing: true,
+			},
+			stubs,
+		});
+
+		await fireEvent.mouseEnter(wrapper.container);
+
+		expect(wrapper.getByTestId('variable-row-key-input')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-key-input').querySelector('input')).toHaveValue(
+			environmentVariable.key,
+		);
+		expect(wrapper.getByTestId('variable-row-value-input')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-value-input').querySelector('input')).toHaveValue(
+			environmentVariable.value,
+		);
+
+		expect(wrapper.html()).toMatchSnapshot();
+	});
+
+	it('should show cancel and save buttons in edit mode', async () => {
+		const wrapper = render(VariablesRow, {
+			props: {
+				data: environmentVariable,
+				editing: true,
+			},
+			stubs,
+		});
+
+		await fireEvent.mouseEnter(wrapper.container);
+
+		expect(wrapper.getByTestId('variable-row-cancel-button')).toBeVisible();
+		expect(wrapper.getByTestId('variable-row-save-button')).toBeVisible();
+	});
+});