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>

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -1,10 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, useCssModule } from 'vue';
-import {
-	DatatableColumn,
-	DatatableRow,
-	DatatableRowDataType,
-} from '@/components/N8nDatatable/mixins';
+import { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
 import { getValueByPath } from '../../utils';
 import { useI18n } from '../../composables';
 import N8nSelect from '../N8nSelect';
@@ -18,6 +14,7 @@ export default defineComponent({
 		N8nOption,
 		N8nPagination,
 	},
+	emits: ['update:currentPage', 'update:rowsPerPage'],
 	props: {
 		columns: {
 			type: Array as PropType<DatatableColumn[]>,
@@ -27,25 +24,31 @@ export default defineComponent({
 			type: Array as PropType<DatatableRow[]>,
 			required: true,
 		},
+		currentPage: {
+			type: Number,
+			default: 1,
+		},
 		pagination: {
 			type: Boolean,
 			default: true,
 		},
 		rowsPerPage: {
-			type: Number,
+			type: [Number, String] as PropType<number | '*'>,
 			default: 10,
 		},
 	},
-	setup(props) {
+	setup(props, { emit }) {
 		const { t } = useI18n();
 		const rowsPerPageOptions = ref([10, 25, 50, 100]);
 
 		const style = useCssModule();
-		const currentPage = ref(1);
-		const currentRowsPerPage = ref(props.rowsPerPage);
 
 		const totalPages = computed(() => {
-			return Math.ceil(props.rows.length / currentRowsPerPage.value);
+			if (props.rowsPerPage === '*') {
+				return 1;
+			}
+
+			return Math.ceil(props.rows.length / props.rowsPerPage);
 		});
 
 		const totalRows = computed(() => {
@@ -53,8 +56,12 @@ export default defineComponent({
 		});
 
 		const visibleRows = computed(() => {
-			const start = (currentPage.value - 1) * currentRowsPerPage.value;
-			const end = start + currentRowsPerPage.value;
+			if (props.rowsPerPage === '*') {
+				return props.rows;
+			}
+
+			const start = (props.currentPage - 1) * props.rowsPerPage;
+			const end = start + props.rowsPerPage;
 
 			return props.rows.slice(start, end);
 		});
@@ -65,18 +72,17 @@ export default defineComponent({
 				[style.datatableWrapper]: true,
 			};
 		});
-		function getTrClass() {
-			return {
-				[style.datatableRow]: true,
-			};
+
+		function onUpdateCurrentPage(value: number) {
+			emit('update:currentPage', value);
 		}
 
-		function onRowsPerPageChange(value: number) {
-			currentRowsPerPage.value = value;
+		function onRowsPerPageChange(value: number | '*') {
+			emit('update:rowsPerPage', value);
 
-			const maxPage = Math.ceil(totalRows.value / currentRowsPerPage.value);
-			if (maxPage < currentPage.value) {
-				currentPage.value = maxPage;
+			const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
+			if (maxPage < props.currentPage) {
+				onUpdateCurrentPage(maxPage);
 			}
 		}
 
@@ -84,17 +90,22 @@ export default defineComponent({
 			return getValueByPath<DatatableRowDataType>(row, column.path);
 		}
 
+		function getThStyle(column: DatatableColumn) {
+			return {
+				...(column.width ? { width: column.width } : {}),
+			};
+		}
+
 		return {
 			t,
 			classes,
-			currentPage,
 			totalPages,
 			totalRows,
 			visibleRows,
-			currentRowsPerPage,
 			rowsPerPageOptions,
 			getTdValue,
-			getTrClass,
+			getThStyle,
+			onUpdateCurrentPage,
 			onRowsPerPageChange,
 		};
 	},
@@ -106,18 +117,27 @@ export default defineComponent({
 		<table :class="$style.datatable">
 			<thead :class="$style.datatableHeader">
 				<tr>
-					<th v-for="column in columns" :key="column.id">
+					<th
+						v-for="column in columns"
+						:key="column.id"
+						:class="column.classes"
+						:style="getThStyle(column)"
+					>
 						{{ column.label }}
 					</th>
 				</tr>
 			</thead>
 			<tbody>
-				<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass()">
-					<td v-for="column in columns" :key="column.id">
-						<component v-if="column.render" :is="column.render" :row="row" :column="column" />
-						<span v-else>{{ getTdValue(row, column) }}</span>
-					</td>
-				</tr>
+				<template v-for="row in visibleRows">
+					<slot name="row" :columns="columns" :row="row" :getTdValue="getTdValue">
+						<tr :key="row.id">
+							<td v-for="column in columns" :key="column.id" :class="column.classes">
+								<component v-if="column.render" :is="column.render" :row="row" :column="column" />
+								<span v-else>{{ getTdValue(row, column) }}</span>
+							</td>
+						</tr>
+					</slot>
+				</template>
 			</tbody>
 		</table>
 
@@ -125,23 +145,29 @@ export default defineComponent({
 			<n8n-pagination
 				v-if="totalPages > 1"
 				background
-				:current-page.sync="currentPage"
 				:pager-count="5"
-				:page-size="currentRowsPerPage"
+				:page-size="rowsPerPage"
 				layout="prev, pager, next"
 				:total="totalRows"
+				:currentPage="currentPage"
+				@update:currentPage="onUpdateCurrentPage"
 			/>
 
 			<div :class="$style.pageSizeSelector">
 				<n8n-select
 					size="mini"
-					:value="currentRowsPerPage"
+					:value="rowsPerPage"
 					@input="onRowsPerPageChange"
 					popper-append-to-body
 				>
 					<template #prepend>{{ t('datatable.pageSize') }}</template>
-					<n8n-option v-for="size in rowsPerPageOptions" :key="size" :label="size" :value="size" />
-					<n8n-option :label="`All`" :value="totalRows"> </n8n-option>
+					<n8n-option
+						v-for="size in rowsPerPageOptions"
+						:key="size"
+						:label="`${size}`"
+						:value="size"
+					/>
+					<n8n-option :label="`All`" value="*"> </n8n-option>
 				</n8n-select>
 			</div>
 		</div>
@@ -156,6 +182,24 @@ export default defineComponent({
 
 .datatable {
 	width: 100%;
+
+	tbody {
+		tr {
+			td {
+				vertical-align: top;
+				color: var(--color-text-base);
+				padding: var(--spacing-s) var(--spacing-2xs);
+			}
+
+			&:nth-of-type(even) {
+				background: var(--color-background-xlight);
+			}
+
+			&:nth-of-type(odd) {
+				background: var(--color-background-light);
+			}
+		}
+	}
 }
 
 .datatableHeader {
@@ -167,28 +211,13 @@ export default defineComponent({
 	}
 }
 
-.datatableRow {
-	td {
-		color: var(--color-text-base);
-		padding: var(--spacing-s) var(--spacing-2xs);
-	}
-
-	&:nth-of-type(even) {
-		background: var(--color-background-xlight);
-	}
-
-	&:nth-of-type(odd) {
-		background: var(--color-background-light);
-	}
-}
-
 .pagination {
 	width: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	bottom: 0;
-	overflow: auto;
+	overflow: visible;
 	margin-top: var(--spacing-s);
 }
 

packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts

@@ -6,18 +6,58 @@ const stubs = ['n8n-select', 'n8n-option', 'n8n-button', 'n8n-pagination'];
 
 describe('components', () => {
 	describe('N8nDatatable', () => {
+		const rowsPerPage = 10;
+
 		it('should render correctly', () => {
 			const wrapper = render(N8nDatatable, {
 				propsData: {
 					columns,
 					rows,
+					rowsPerPage,
 				},
 				stubs,
 			});
 
-			expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(10);
 			expect(wrapper.container.querySelectorAll('thead tr').length).toEqual(1);
+			expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(rowsPerPage);
+			expect(wrapper.container.querySelectorAll('tbody tr td').length).toEqual(
+				columns.length * rowsPerPage,
+			);
 			expect(wrapper.html()).toMatchSnapshot();
 		});
+
+		it('should add column classes', () => {
+			const wrapper = render(N8nDatatable, {
+				propsData: {
+					columns: columns.map((column) => ({ ...column, classes: ['example'] })),
+					rows,
+					rowsPerPage,
+				},
+				stubs,
+			});
+
+			expect(wrapper.container.querySelectorAll('.example').length).toEqual(
+				columns.length * (rowsPerPage + 1),
+			);
+		});
+
+		it('should render row slot', () => {
+			const wrapper = render(N8nDatatable, {
+				propsData: {
+					columns,
+					rows,
+					rowsPerPage,
+				},
+				stubs,
+				scopedSlots: {
+					row: '<main><td v-for="column in props.columns" :key="column.id">Row slot</td></main>', // Wrapper is necessary for looping
+				},
+			});
+
+			expect(wrapper.container.querySelectorAll('tbody td').length).toEqual(
+				columns.length * rowsPerPage,
+			);
+			expect(wrapper.container.querySelector('tbody td')?.textContent).toEqual('Row slot');
+		});
 	});
 });

packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap

@@ -12,70 +12,70 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
       </tr>
     </thead>
     <tbody>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>1</span></td>
         <td><span>Richard Hendricks</span></td>
         <td><span>29</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 1</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>2</span></td>
         <td><span>Bertram Gilfoyle</span></td>
         <td><span>44</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 2</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>3</span></td>
         <td><span>Dinesh Chugtai</span></td>
         <td><span>31</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 3</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>4</span></td>
         <td><span>Jared Dunn </span></td>
         <td><span>38</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 4</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>5</span></td>
         <td><span>Richard Hendricks</span></td>
         <td><span>29</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 5</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>6</span></td>
         <td><span>Bertram Gilfoyle</span></td>
         <td><span>44</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 6</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>7</span></td>
         <td><span>Dinesh Chugtai</span></td>
         <td><span>31</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 7</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>8</span></td>
         <td><span>Jared Dunn </span></td>
         <td><span>38</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 8</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>9</span></td>
         <td><span>Richard Hendricks</span></td>
         <td><span>29</span></td>
         <td><button aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
             <!----><span>Button 9</span></button></td>
       </tr>
-      <tr class=\\"datatableRow\\">
+      <tr>
         <td><span>10</span></td>
         <td><span>Bertram Gilfoyle</span></td>
         <td><span>44</span></td>
@@ -92,7 +92,7 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
         <n8n-option-stub value=\\"25\\" label=\\"25\\"></n8n-option-stub>
         <n8n-option-stub value=\\"50\\" label=\\"50\\"></n8n-option-stub>
         <n8n-option-stub value=\\"100\\" label=\\"100\\"></n8n-option-stub>
-        <n8n-option-stub value=\\"15\\" label=\\"All\\"></n8n-option-stub>
+        <n8n-option-stub value=\\"*\\" label=\\"All\\"></n8n-option-stub>
       </n8n-select-stub>
     </div>
   </div>

packages/design-system/src/components/N8nDatatable/__tests__/data.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, PropType } from 'vue';
-import { DatatableRow } from '../mixins';
+import { DatatableRow } from '../../../types';
 import N8nButton from '../../N8nButton';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -212,7 +212,15 @@ function onEnter(event: Event) {
 const validationError = computed<string | null>(() => {
 	const error = getInputValidationError();
 
-	return error ? t(error.messageKey, error.options) : null;
+	if (error) {
+		if (error.messageKey) {
+			return t(error.messageKey, error.options);
+		} else {
+			return error.message;
+		}
+	}
+
+	return null;
 });
 
 const hasDefaultSlot = computed(() => !!slots.default);

packages/design-system/src/components/N8nFormInput/validators.ts

@@ -93,6 +93,19 @@ export const containsUpperCaseValidator: IValidator<{ minimum: number }> = {
 	},
 };
 
+export const matchRegex: IValidator<{ regex: RegExp; message: string }> = {
+	validate: (value: Validatable, config: { regex: RegExp; message: string }) => {
+		if (!config.regex.test(`${value as string}`)) {
+			return {
+				message: config.message,
+				options: config,
+			};
+		}
+
+		return false;
+	},
+};
+
 export const defaultPasswordRules: RuleGroup = {
 	rules: [
 		{
@@ -117,6 +130,7 @@ export const VALIDATORS = {
 	VALID_EMAIL: emailValidator,
 	CONTAINS_UPPERCASE: containsUpperCaseValidator,
 	DEFAULT_PASSWORD_RULES: defaultPasswordRules,
+	MATCH_REGEX: matchRegex,
 };
 
 export const getValidationError = <T extends Validatable, C>(

packages/design-system/src/components/N8nPagination/Pagination.vue

@@ -1,22 +1,20 @@
 <script lang="ts">
+import { DefineComponent, defineComponent } from 'vue';
 import { Pagination as ElPagination } from 'element-ui';
 
-export default {
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
-	props: (ElPagination as any).props,
+export default defineComponent({
+	props: (ElPagination as unknown as DefineComponent).props,
 	components: {
 		ElPagination,
 	},
-};
+});
 </script>
 
 <template>
-	<div>
-		<el-pagination
-			background
-			layout="prev, pager, next"
-			v-bind="[$props, $attrs]"
-			v-on="$listeners"
-		/>
-	</div>
+	<el-pagination
+		background
+		layout="prev, pager, next"
+		v-bind="[$props, $attrs]"
+		v-on="$listeners"
+	/>
 </template>

packages/design-system/src/plugins/n8nComponents.ts

@@ -10,8 +10,10 @@ import N8nButton from '../components/N8nButton';
 import { N8nElButton } from '../components/N8nButton/overrides';
 import N8nCallout from '../components/N8nCallout';
 import N8nCard from '../components/N8nCard';
+import N8nDatatable from '../components/N8nDatatable';
 import N8nFormBox from '../components/N8nFormBox';
 import N8nFormInputs from '../components/N8nFormInputs';
+import N8nFormInput from '../components/N8nFormInput';
 import N8nHeading from '../components/N8nHeading';
 import N8nIcon from '../components/N8nIcon';
 import N8nIconButton from '../components/N8nIconButton';
@@ -61,8 +63,10 @@ const n8nComponentsPlugin: PluginObject<{}> = {
 		app.component('el-button', N8nElButton);
 		app.component('n8n-callout', N8nCallout);
 		app.component('n8n-card', N8nCard);
+		app.component('n8n-datatable', N8nDatatable);
 		app.component('n8n-form-box', N8nFormBox);
 		app.component('n8n-form-inputs', N8nFormInputs);
+		app.component('n8n-form-input', N8nFormInput);
 		app.component('n8n-icon', N8nIcon);
 		app.component('n8n-icon-button', N8nIconButton);
 		app.component('n8n-info-tip', N8nInfoTip);

packages/design-system/src/types/datatable.ts

@@ -12,5 +12,7 @@ export interface DatatableColumn {
 	id: string | number;
 	path: string;
 	label: string;
-	render: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
+	classes?: string[];
+	width?: string;
+	render?: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
 }

packages/design-system/src/types/form.ts

@@ -11,7 +11,7 @@ export type IValidator<T = unknown> = {
 	validate: (
 		value: Validatable,
 		config: T,
-	) => false | { messageKey: string; options?: unknown } | null;
+	) => false | { messageKey: string; message?: string; options?: unknown } | null;
 };
 
 export type FormState = {

packages/design-system/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './button';
+export * from './datatable';
 export * from './form';
 export * from './menu';
 export * from './router';