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>
This commit is contained in:
Val
GitHub
@@ -20,6 +20,7 @@ import { NativeDoc } from 'n8n-workflow/src/Extensions/Extensions';
|
||||
import { isFunctionOption } from './typeGuards';
|
||||
import { luxonInstanceDocs } from './nativesAutocompleteDocs/luxon.instance.docs';
|
||||
import { luxonStaticDocs } from './nativesAutocompleteDocs/luxon.static.docs';
|
||||
import { useEnvironmentsStore } from '@/stores';
|
||||
|
||||
/**
|
||||
* Resolution-based completions offered according to datatype.
|
||||
@@ -31,7 +32,8 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
|
||||
|
||||
if (word.from === word.to && !context.explicit) return null;
|
||||
|
||||
const [base, tail] = splitBaseTail(word.text);
|
||||
// eslint-disable-next-line prefer-const
|
||||
let [base, tail] = splitBaseTail(word.text);
|
||||
|
||||
let options: Completion[] = [];
|
||||
|
||||
@@ -39,6 +41,8 @@ export function datatypeCompletions(context: CompletionContext): CompletionResul
|
||||
options = luxonStaticOptions().map(stripExcessParens(context));
|
||||
} else if (base === 'Object') {
|
||||
options = objectGlobalOptions().map(stripExcessParens(context));
|
||||
} else if (base === '$vars') {
|
||||
options = variablesOptions();
|
||||
} else {
|
||||
let resolved: Resolved;
|
||||
|
||||
@@ -331,6 +335,22 @@ function ensureKeyCanBeResolved(obj: IDataObject, key: string) {
|
||||
}
|
||||
}
|
||||
|
||||
export const variablesOptions = () => {
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
const variables = environmentsStore.variables;
|
||||
|
||||
return variables.map((variable) =>
|
||||
createCompletionOption('Object', variable.key, 'keyword', {
|
||||
doc: {
|
||||
name: variable.key,
|
||||
returnType: 'string',
|
||||
description: i18n.baseText('codeNodeEditor.completer.$vars.varName'),
|
||||
docURL: 'https://docs.n8n.io/environments/variables/',
|
||||
},
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Methods and fields defined on a Luxon `DateTime` class instance.
|
||||
*/
|
||||
|
||||
@@ -7,10 +7,10 @@ import VueAgile from 'vue-agile';
|
||||
import 'regenerator-runtime/runtime';
|
||||
|
||||
import ElementUI from 'element-ui';
|
||||
import { Loading, MessageBox, Message, Notification } from 'element-ui';
|
||||
import { Loading, MessageBox, Notification } from 'element-ui';
|
||||
import { designSystemComponents } from 'n8n-design-system';
|
||||
import { ElMessageBoxOptions } from 'element-ui/types/message-box';
|
||||
import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
|
||||
import { useMessage } from '@/composables/useMessage';
|
||||
|
||||
Vue.use(Fragment.Plugin);
|
||||
Vue.use(VueAgile);
|
||||
@@ -25,62 +25,11 @@ Vue.use(Loading.directive);
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
|
||||
Vue.prototype.$alert = async (
|
||||
message: string,
|
||||
configOrTitle: string | ElMessageBoxOptions | undefined,
|
||||
config: ElMessageBoxOptions | undefined,
|
||||
) => {
|
||||
let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
|
||||
temp = {
|
||||
...temp,
|
||||
cancelButtonClass: 'btn--cancel',
|
||||
confirmButtonClass: 'btn--confirm',
|
||||
};
|
||||
const messageService = useMessage();
|
||||
|
||||
if (typeof configOrTitle === 'string') {
|
||||
return await MessageBox.alert(message, configOrTitle, temp);
|
||||
}
|
||||
return await MessageBox.alert(message, temp);
|
||||
};
|
||||
|
||||
Vue.prototype.$confirm = async (
|
||||
message: string,
|
||||
configOrTitle: string | ElMessageBoxOptions | undefined,
|
||||
config: ElMessageBoxOptions | undefined,
|
||||
) => {
|
||||
let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
|
||||
temp = {
|
||||
...temp,
|
||||
cancelButtonClass: 'btn--cancel',
|
||||
confirmButtonClass: 'btn--confirm',
|
||||
distinguishCancelAndClose: true,
|
||||
showClose: config.showClose || false,
|
||||
closeOnClickModal: false,
|
||||
};
|
||||
|
||||
if (typeof configOrTitle === 'string') {
|
||||
return await MessageBox.confirm(message, configOrTitle, temp);
|
||||
}
|
||||
return await MessageBox.confirm(message, temp);
|
||||
};
|
||||
|
||||
Vue.prototype.$prompt = async (
|
||||
message: string,
|
||||
configOrTitle: string | ElMessageBoxOptions | undefined,
|
||||
config: ElMessageBoxOptions | undefined,
|
||||
) => {
|
||||
let temp = config || (typeof configOrTitle === 'object' ? configOrTitle : {});
|
||||
temp = {
|
||||
...temp,
|
||||
cancelButtonClass: 'btn--cancel',
|
||||
confirmButtonClass: 'btn--confirm',
|
||||
};
|
||||
|
||||
if (typeof configOrTitle === 'string') {
|
||||
return await MessageBox.prompt(message, configOrTitle, temp);
|
||||
}
|
||||
return await MessageBox.prompt(message, temp);
|
||||
};
|
||||
Vue.prototype.$alert = messageService.alert;
|
||||
Vue.prototype.$confirm = messageService.confirm;
|
||||
Vue.prototype.$prompt = messageService.prompt;
|
||||
Vue.prototype.$message = messageService.message;
|
||||
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
|
||||
@@ -341,6 +341,7 @@ export class I18nClass {
|
||||
$min: this.baseText('codeNodeEditor.completer.$min'),
|
||||
$runIndex: this.baseText('codeNodeEditor.completer.$runIndex'),
|
||||
$today: this.baseText('codeNodeEditor.completer.$today'),
|
||||
$vars: this.baseText('codeNodeEditor.completer.$vars'),
|
||||
$workflow: this.baseText('codeNodeEditor.completer.$workflow'),
|
||||
};
|
||||
|
||||
|
||||
@@ -142,6 +142,8 @@
|
||||
"codeNodeEditor.completer.$prevNode.runIndex": "The run of the node providing input data to the current one",
|
||||
"codeNodeEditor.completer.$runIndex": "The index of the current run of this node",
|
||||
"codeNodeEditor.completer.$today": "A timestamp representing the current day (at midnight, as a Luxon object)",
|
||||
"codeNodeEditor.completer.$vars": "The variables defined in your instance",
|
||||
"codeNodeEditor.completer.$vars.varName": "Variable set on this n8n instance. All variables evaluate to strings.",
|
||||
"codeNodeEditor.completer.$workflow": "Information about the workflow",
|
||||
"codeNodeEditor.completer.$workflow.active": "Whether the workflow is active or not (boolean)",
|
||||
"codeNodeEditor.completer.$workflow.id": "The ID of the workflow",
|
||||
@@ -595,6 +597,7 @@
|
||||
"mainSidebar.confirmMessage.workflowDelete.headline": "Delete Workflow?",
|
||||
"mainSidebar.confirmMessage.workflowDelete.message": "Are you sure that you want to delete '{workflowName}'?",
|
||||
"mainSidebar.credentials": "Credentials",
|
||||
"mainSidebar.variables": "Variables",
|
||||
"mainSidebar.help": "Help",
|
||||
"mainSidebar.helpMenuItems.course": "Course",
|
||||
"mainSidebar.helpMenuItems.documentation": "Documentation",
|
||||
@@ -1601,6 +1604,39 @@
|
||||
"importParameter.showError.invalidProtocol1.title": "Use the {node} node",
|
||||
"importParameter.showError.invalidProtocol2.title": "Invalid Protocol",
|
||||
"importParameter.showError.invalidProtocol.message": "The HTTP node doesn’t support {protocol} requests",
|
||||
"variables.heading": "Variables",
|
||||
"variables.add": "Add Variable",
|
||||
"variables.add.unavailable": "Upgrade plan to keep using variables",
|
||||
"variables.add.onlyOwnerCanCreate": "Only owner can create variables",
|
||||
"variables.empty.heading": "{name}, let's set up a variable",
|
||||
"variables.empty.heading.userNotSetup": "Set up a variable",
|
||||
"variables.empty.description": "Variables can be used to store data that can be referenced easily across multiple workflows.",
|
||||
"variables.empty.button": "Add first variable",
|
||||
"variables.noResults": "No variables found",
|
||||
"variables.sort.nameAsc": "Sort by name (A-Z)",
|
||||
"variables.sort.nameDesc": "Sort by name (Z-A)",
|
||||
"variables.table.key": "Key",
|
||||
"variables.table.value": "Value",
|
||||
"variables.table.usage": "Usage Syntax",
|
||||
"variables.editing.key.placeholder": "Enter a name",
|
||||
"variables.editing.value.placeholder": "Enter a value",
|
||||
"variables.editing.key.error.startsWithLetter": "This field may only start with a letter",
|
||||
"variables.editing.key.error.jsonKey": "This field may contain only letters, numbers, and underscores",
|
||||
"variables.row.button.save": "Save",
|
||||
"variables.row.button.cancel": "Cancel",
|
||||
"variables.row.button.edit": "Edit",
|
||||
"variables.row.button.edit.onlyOwnerCanSave": "Only owner can edit variables",
|
||||
"variables.row.button.delete": "Delete",
|
||||
"variables.row.button.delete.onlyOwnerCanDelete": "Only owner can delete variables",
|
||||
"variables.row.usage.copiedToClipboard": "Copied to clipboard",
|
||||
"variables.row.usage.copyToClipboard": "Copy to clipboard",
|
||||
"variables.search.placeholder": "Search variables...",
|
||||
"variables.errors.save": "Error while saving variable",
|
||||
"variables.errors.delete": "Error while deleting variable",
|
||||
"variables.modals.deleteConfirm.title": "Delete variable",
|
||||
"variables.modals.deleteConfirm.message": "Are you sure you want to delete the variable \"{name}\"? This cannot be undone.",
|
||||
"variables.modals.deleteConfirm.confirmButton": "Delete",
|
||||
"variables.modals.deleteConfirm.cancelButton": "Cancel",
|
||||
"contextual.credentials.sharing.unavailable.title": "Upgrade to collaborate",
|
||||
"contextual.credentials.sharing.unavailable.title.cloud": "Upgrade to collaborate",
|
||||
"contextual.credentials.sharing.unavailable.title.desktop": "Upgrade to n8n Cloud to collaborate",
|
||||
@@ -1625,6 +1661,14 @@
|
||||
"contextual.workflows.sharing.unavailable.button.cloud": "Upgrade now",
|
||||
"contextual.workflows.sharing.unavailable.button.desktop": "View plans",
|
||||
|
||||
"contextual.variables.unavailable.title": "Available on Enterprise plan",
|
||||
"contextual.variables.unavailable.title.cloud": "Available on Power plan",
|
||||
"contextual.variables.unavailable.title.desktop": "Upgrade to n8n Cloud to collaborate",
|
||||
"contextual.variables.unavailable.description": "Variables can be used to store and access data across workflows. Reference them in n8n using the prefix <code>$vars</code> (e.g. <code>$vars.myVariable</code>). Variables are immutable and cannot be modified within your workflows.<br/><a href=\"https://docs.n8n.io/environments/variables/\" target=\"_blank\">Learn more in the docs.</a>",
|
||||
"contextual.variables.unavailable.button": "View plans",
|
||||
"contextual.variables.unavailable.button.cloud": "Upgrade now",
|
||||
"contextual.variables.unavailable.button.desktop": "View plans",
|
||||
|
||||
"contextual.users.settings.unavailable.title": "Upgrade to add users",
|
||||
"contextual.users.settings.unavailable.title.cloud": "Upgrade to add users",
|
||||
"contextual.users.settings.unavailable.title.desktop": "Upgrade to add users",
|
||||
|
||||
13
packages/editor-ui/src/plugins/icons/custom.ts
Normal file
13
packages/editor-ui/src/plugins/icons/custom.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import type { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
|
||||
|
||||
export const faVariable: IconDefinition = {
|
||||
prefix: 'fas' as IconPrefix,
|
||||
iconName: 'variable' as IconName,
|
||||
icon: [
|
||||
52,
|
||||
52,
|
||||
[],
|
||||
'e001',
|
||||
'M42.6,17.8c2.4,0,7.2-2,7.2-8.4c0-6.4-4.6-6.8-6.1-6.8c-2.8,0-5.6,2-8.1,6.3c-2.5,4.4-5.3,9.1-5.3,9.1 l-0.1,0c-0.6-3.1-1.1-5.6-1.3-6.7c-0.5-2.7-3.6-8.4-9.9-8.4c-6.4,0-12.2,3.7-12.2,3.7l0,0C5.8,7.3,5.1,8.5,5.1,9.9 c0,2.1,1.7,3.9,3.9,3.9c0.6,0,1.2-0.2,1.7-0.4l0,0c0,0,4.8-2.7,5.9,0c0.3,0.8,0.6,1.7,0.9,2.7c1.2,4.2,2.4,9.1,3.3,13.5l-4.2,6 c0,0-4.7-1.7-7.1-1.7s-7.2,2-7.2,8.4s4.6,6.8,6.1,6.8c2.8,0,5.6-2,8.1-6.3c2.5-4.4,5.3-9.1,5.3-9.1c0.8,4,1.5,7.1,1.9,8.5 c1.6,4.5,5.3,7.2,10.1,7.2c0,0,5,0,10.9-3.3c1.4-0.6,2.4-2,2.4-3.6c0-2.1-1.7-3.9-3.9-3.9c-0.6,0-1.2,0.2-1.7,0.4l0,0 c0,0-4.2,2.4-5.6,0.5c-1-2-1.9-4.6-2.6-7.8c-0.6-2.8-1.3-6.2-2-9.5l4.3-6.2C35.5,16.1,40.2,17.8,42.6,17.8z',
|
||||
],
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
||||
import {
|
||||
faAngleDoubleLeft,
|
||||
faAngleDown,
|
||||
@@ -128,12 +129,12 @@ import {
|
||||
faStickyNote as faSolidStickyNote,
|
||||
faUserLock,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
import { faVariable } from './custom';
|
||||
import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function addIcon(icon: any) {
|
||||
library.add(icon as IconDefinition);
|
||||
function addIcon(icon: IconDefinition) {
|
||||
library.add(icon);
|
||||
}
|
||||
|
||||
addIcon(faAngleDoubleLeft);
|
||||
@@ -239,7 +240,7 @@ addIcon(faSignOutAlt);
|
||||
addIcon(faSlidersH);
|
||||
addIcon(faSpinner);
|
||||
addIcon(faSolidStickyNote);
|
||||
addIcon(faStickyNote);
|
||||
addIcon(faStickyNote as IconDefinition);
|
||||
addIcon(faStop);
|
||||
addIcon(faSun);
|
||||
addIcon(faSync);
|
||||
@@ -259,6 +260,7 @@ addIcon(faUser);
|
||||
addIcon(faUserCircle);
|
||||
addIcon(faUserFriends);
|
||||
addIcon(faUsers);
|
||||
addIcon(faVariable);
|
||||
addIcon(faVideo);
|
||||
addIcon(faTree);
|
||||
addIcon(faUserLock);
|
||||
Reference in New Issue
Block a user