mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-09 22:24:05 -08:00
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
parent
1555387ece
commit
1bb987140a
|
|
@ -34,6 +34,7 @@ import {
|
|||
SharedWorkflowRepository,
|
||||
TagRepository,
|
||||
UserRepository,
|
||||
VariablesRepository,
|
||||
WebhookRepository,
|
||||
WorkflowRepository,
|
||||
WorkflowStatisticsRepository,
|
||||
|
|
@ -178,6 +179,7 @@ export async function init(
|
|||
collections.SharedWorkflow = Container.get(SharedWorkflowRepository);
|
||||
collections.Tag = Container.get(TagRepository);
|
||||
collections.User = Container.get(UserRepository);
|
||||
collections.Variables = Container.get(VariablesRepository);
|
||||
collections.Webhook = Container.get(WebhookRepository);
|
||||
collections.Workflow = Container.get(WorkflowRepository);
|
||||
collections.WorkflowStatistics = Container.get(WorkflowStatisticsRepository);
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ import type {
|
|||
SharedWorkflowRepository,
|
||||
TagRepository,
|
||||
UserRepository,
|
||||
VariablesRepository,
|
||||
WebhookRepository,
|
||||
WorkflowRepository,
|
||||
WorkflowStatisticsRepository,
|
||||
|
|
@ -99,6 +100,7 @@ export interface IDatabaseCollections {
|
|||
SharedWorkflow: SharedWorkflowRepository;
|
||||
Tag: TagRepository;
|
||||
User: UserRepository;
|
||||
Variables: VariablesRepository;
|
||||
Webhook: WebhookRepository;
|
||||
Workflow: WorkflowRepository;
|
||||
WorkflowStatistics: WorkflowStatisticsRepository;
|
||||
|
|
@ -458,6 +460,7 @@ export interface IInternalHooksClass {
|
|||
}): Promise<void>;
|
||||
onApiKeyCreated(apiKeyDeletedData: { user: User; public_api: boolean }): Promise<void>;
|
||||
onApiKeyDeleted(apiKeyDeletedData: { user: User; public_api: boolean }): Promise<void>;
|
||||
onVariableCreated(createData: { variable_type: string }): Promise<void>;
|
||||
}
|
||||
|
||||
export interface IVersionNotificationSettings {
|
||||
|
|
@ -538,11 +541,15 @@ export interface IN8nUISettings {
|
|||
saml: boolean;
|
||||
logStreaming: boolean;
|
||||
advancedExecutionFilters: boolean;
|
||||
variables: boolean;
|
||||
};
|
||||
hideUsagePage: boolean;
|
||||
license: {
|
||||
environment: 'production' | 'staging';
|
||||
};
|
||||
variables: {
|
||||
limit: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface IPersonalizationSurveyAnswers {
|
||||
|
|
|
|||
|
|
@ -981,4 +981,8 @@ export class InternalHooks implements IInternalHooksClass {
|
|||
async onAuditGeneratedViaCli() {
|
||||
return this.telemetry.track('Instance generated security audit via CLI command');
|
||||
}
|
||||
|
||||
async onVariableCreated(createData: { variable_type: string }): Promise<void> {
|
||||
return this.telemetry.track('User created variable', createData);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@ import type { ILogger } from 'n8n-workflow';
|
|||
import { getLogger } from './Logger';
|
||||
import config from '@/config';
|
||||
import * as Db from '@/Db';
|
||||
import { LICENSE_FEATURES, N8N_VERSION, SETTINGS_LICENSE_CERT_KEY } from './constants';
|
||||
import {
|
||||
LICENSE_FEATURES,
|
||||
LICENSE_QUOTAS,
|
||||
N8N_VERSION,
|
||||
SETTINGS_LICENSE_CERT_KEY,
|
||||
} from './constants';
|
||||
import { Service } from 'typedi';
|
||||
|
||||
async function loadCertStr(): Promise<TLicenseBlock> {
|
||||
|
|
@ -119,6 +124,10 @@ export class License {
|
|||
return this.isFeatureEnabled(LICENSE_FEATURES.ADVANCED_EXECUTION_FILTERS);
|
||||
}
|
||||
|
||||
isVariablesEnabled() {
|
||||
return this.isFeatureEnabled(LICENSE_FEATURES.VARIABLES);
|
||||
}
|
||||
|
||||
getCurrentEntitlements() {
|
||||
return this.manager?.getCurrentEntitlements() ?? [];
|
||||
}
|
||||
|
|
@ -162,7 +171,11 @@ export class License {
|
|||
|
||||
// Helper functions for computed data
|
||||
getTriggerLimit(): number {
|
||||
return (this.getFeatureValue('quota:activeWorkflows') ?? -1) as number;
|
||||
return (this.getFeatureValue(LICENSE_QUOTAS.TRIGGER_LIMIT) ?? -1) as number;
|
||||
}
|
||||
|
||||
getVariablesLimit(): number {
|
||||
return (this.getFeatureValue(LICENSE_QUOTAS.VARIABLES_LIMIT) ?? -1) as number;
|
||||
}
|
||||
|
||||
getPlanName(): string {
|
||||
|
|
|
|||
|
|
@ -156,7 +156,9 @@ import {
|
|||
import { getSamlLoginLabel, isSamlLoginEnabled, isSamlLicensed } from './sso/saml/samlHelpers';
|
||||
import { SamlController } from './sso/saml/routes/saml.controller.ee';
|
||||
import { SamlService } from './sso/saml/saml.service.ee';
|
||||
import { variablesController } from './environments/variables.controller';
|
||||
import { LdapManager } from './Ldap/LdapManager.ee';
|
||||
import { getVariablesLimit, isVariablesEnabled } from '@/environments/enviromentHelpers';
|
||||
import { getCurrentAuthenticationMethod } from './sso/ssoHelpers';
|
||||
|
||||
const exec = promisify(callbackExec);
|
||||
|
|
@ -317,11 +319,15 @@ class Server extends AbstractServer {
|
|||
saml: false,
|
||||
logStreaming: false,
|
||||
advancedExecutionFilters: false,
|
||||
variables: false,
|
||||
},
|
||||
hideUsagePage: config.getEnv('hideUsagePage'),
|
||||
license: {
|
||||
environment: config.getEnv('license.tenantId') === 1 ? 'production' : 'staging',
|
||||
},
|
||||
variables: {
|
||||
limit: 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -347,6 +353,7 @@ class Server extends AbstractServer {
|
|||
ldap: isLdapEnabled(),
|
||||
saml: isSamlLicensed(),
|
||||
advancedExecutionFilters: isAdvancedExecutionFiltersEnabled(),
|
||||
variables: isVariablesEnabled(),
|
||||
});
|
||||
|
||||
if (isLdapEnabled()) {
|
||||
|
|
@ -363,6 +370,10 @@ class Server extends AbstractServer {
|
|||
});
|
||||
}
|
||||
|
||||
if (isVariablesEnabled()) {
|
||||
this.frontendSettings.variables.limit = getVariablesLimit();
|
||||
}
|
||||
|
||||
if (config.get('nodes.packagesMissing').length > 0) {
|
||||
this.frontendSettings.missingPackages = true;
|
||||
}
|
||||
|
|
@ -540,6 +551,13 @@ class Server extends AbstractServer {
|
|||
}
|
||||
|
||||
// ----------------------------------------
|
||||
// Variables
|
||||
// ----------------------------------------
|
||||
|
||||
this.app.use(`/${this.restEndpoint}/variables`, variablesController);
|
||||
|
||||
// ----------------------------------------
|
||||
|
||||
// Returns parameter values which normally get loaded from an external API or
|
||||
// get generated dynamically
|
||||
this.app.get(
|
||||
|
|
|
|||
|
|
@ -1164,7 +1164,10 @@ export async function getBase(
|
|||
const webhookWaitingBaseUrl = urlBaseWebhook + config.getEnv('endpoints.webhookWaiting');
|
||||
const webhookTestBaseUrl = urlBaseWebhook + config.getEnv('endpoints.webhookTest');
|
||||
|
||||
const encryptionKey = await UserSettings.getEncryptionKey();
|
||||
const [encryptionKey, variables] = await Promise.all([
|
||||
UserSettings.getEncryptionKey(),
|
||||
WorkflowHelpers.getVariables(),
|
||||
]);
|
||||
|
||||
return {
|
||||
credentialsHelper: new CredentialsHelper(encryptionKey),
|
||||
|
|
@ -1179,6 +1182,7 @@ export async function getBase(
|
|||
executionTimeoutTimestamp,
|
||||
userId,
|
||||
setExecutionStatus,
|
||||
variables,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -562,3 +562,12 @@ export function validateWorkflowCredentialUsage(
|
|||
|
||||
return newWorkflowVersion;
|
||||
}
|
||||
|
||||
export async function getVariables(): Promise<IDataObject> {
|
||||
return Object.freeze(
|
||||
(await Db.collections.Variables.find()).reduce((prev, curr) => {
|
||||
prev[curr.key] = curr.value;
|
||||
return prev;
|
||||
}, {} as IDataObject),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,6 +74,12 @@ export enum LICENSE_FEATURES {
|
|||
SAML = 'feat:saml',
|
||||
LOG_STREAMING = 'feat:logStreaming',
|
||||
ADVANCED_EXECUTION_FILTERS = 'feat:advancedExecutionFilters',
|
||||
VARIABLES = 'feat:variables',
|
||||
}
|
||||
|
||||
export enum LICENSE_QUOTAS {
|
||||
TRIGGER_LIMIT = 'quota:activeWorkflows',
|
||||
VARIABLES_LIMIT = 'quota:maxVariables',
|
||||
}
|
||||
|
||||
export const CREDENTIAL_BLANKING_VALUE = '__n8n_BLANK_VALUE_e5362baf-c777-4d57-a609-6eaf1f9e87f6';
|
||||
|
|
|
|||
16
packages/cli/src/databases/entities/Variables.ts
Normal file
16
packages/cli/src/databases/entities/Variables.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
|
||||
|
||||
@Entity()
|
||||
export class Variables {
|
||||
@PrimaryGeneratedColumn()
|
||||
id: number;
|
||||
|
||||
@Column('text')
|
||||
key: string;
|
||||
|
||||
@Column('text', { default: 'string' })
|
||||
type: string;
|
||||
|
||||
@Column('text')
|
||||
value: string;
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@ import { SharedCredentials } from './SharedCredentials';
|
|||
import { SharedWorkflow } from './SharedWorkflow';
|
||||
import { TagEntity } from './TagEntity';
|
||||
import { User } from './User';
|
||||
import { Variables } from './Variables';
|
||||
import { WebhookEntity } from './WebhookEntity';
|
||||
import { WorkflowEntity } from './WorkflowEntity';
|
||||
import { WorkflowTagMapping } from './WorkflowTagMapping';
|
||||
|
|
@ -32,6 +33,7 @@ export const entities = {
|
|||
SharedWorkflow,
|
||||
TagEntity,
|
||||
User,
|
||||
Variables,
|
||||
WebhookEntity,
|
||||
WorkflowEntity,
|
||||
WorkflowTagMapping,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import { MigrationInterface, QueryRunner } from 'typeorm';
|
||||
import { logMigrationEnd, logMigrationStart, getTablePrefix } from '@db/utils/migrationHelpers';
|
||||
import config from '@/config';
|
||||
|
||||
export class CreateVariables1677501636753 implements MigrationInterface {
|
||||
name = 'CreateVariables1677501636753';
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
logMigrationStart(this.name);
|
||||
const tablePrefix = getTablePrefix();
|
||||
|
||||
await queryRunner.query(`
|
||||
CREATE TABLE ${tablePrefix}variables (
|
||||
id int(11) auto_increment NOT NULL PRIMARY KEY,
|
||||
\`key\` VARCHAR(50) NOT NULL,
|
||||
\`type\` VARCHAR(50) DEFAULT 'string' NOT NULL,
|
||||
value VARCHAR(255) NULL,
|
||||
UNIQUE (\`key\`)
|
||||
)
|
||||
ENGINE=InnoDB;
|
||||
`);
|
||||
|
||||
logMigrationEnd(this.name);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
logMigrationStart(this.name);
|
||||
const tablePrefix = getTablePrefix();
|
||||
|
||||
await queryRunner.query(`DROP TABLE ${tablePrefix}variables;`);
|
||||
|
||||
logMigrationEnd(this.name);
|
||||
}
|
||||
}
|
||||
|
|
@ -35,6 +35,7 @@ import { AddStatusToExecutions1674138566000 } from './1674138566000-AddStatusToE
|
|||
import { MigrateExecutionStatus1676996103000 } from './1676996103000-MigrateExecutionStatus';
|
||||
import { UpdateRunningExecutionStatus1677236788851 } from './1677236788851-UpdateRunningExecutionStatus';
|
||||
import { CreateExecutionMetadataTable1679416281779 } from './1679416281779-CreateExecutionMetadataTable';
|
||||
import { CreateVariables1677501636753 } from './1677501636753-CreateVariables';
|
||||
|
||||
export const mysqlMigrations = [
|
||||
InitialMigration1588157391238,
|
||||
|
|
@ -74,4 +75,5 @@ export const mysqlMigrations = [
|
|||
MigrateExecutionStatus1676996103000,
|
||||
UpdateRunningExecutionStatus1677236788851,
|
||||
CreateExecutionMetadataTable1679416281779,
|
||||
CreateVariables1677501636753,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import { MigrationInterface, QueryRunner } from 'typeorm';
|
||||
import { logMigrationEnd, logMigrationStart, getTablePrefix } from '@db/utils/migrationHelpers';
|
||||
import config from '@/config';
|
||||
|
||||
export class CreateVariables1677501636754 implements MigrationInterface {
|
||||
name = 'CreateVariables1677501636754';
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
logMigrationStart(this.name);
|
||||
const tablePrefix = getTablePrefix();
|
||||
|
||||
await queryRunner.query(`
|
||||
CREATE TABLE public.variables (
|
||||
id serial4 NOT NULL PRIMARY KEY,
|
||||
"key" varchar(50) NOT NULL,
|
||||
"type" varchar(50) NOT NULL DEFAULT 'string',
|
||||
value varchar(255) NULL,
|
||||
UNIQUE ("key")
|
||||
);
|
||||
`);
|
||||
|
||||
logMigrationEnd(this.name);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
logMigrationStart(this.name);
|
||||
const tablePrefix = getTablePrefix();
|
||||
|
||||
await queryRunner.query(`DROP TABLE ${tablePrefix}variables;`);
|
||||
|
||||
logMigrationEnd(this.name);
|
||||
}
|
||||
}
|
||||
|
|
@ -33,6 +33,7 @@ import { AddStatusToExecutions1674138566000 } from './1674138566000-AddStatusToE
|
|||
import { MigrateExecutionStatus1676996103000 } from './1676996103000-MigrateExecutionStatus';
|
||||
import { UpdateRunningExecutionStatus1677236854063 } from './1677236854063-UpdateRunningExecutionStatus';
|
||||
import { CreateExecutionMetadataTable1679416281778 } from './1679416281778-CreateExecutionMetadataTable';
|
||||
import { CreateVariables1677501636754 } from './1677501636754-CreateVariables';
|
||||
|
||||
export const postgresMigrations = [
|
||||
InitialMigration1587669153312,
|
||||
|
|
@ -70,4 +71,5 @@ export const postgresMigrations = [
|
|||
MigrateExecutionStatus1676996103000,
|
||||
UpdateRunningExecutionStatus1677236854063,
|
||||
CreateExecutionMetadataTable1679416281778,
|
||||
CreateVariables1677501636754,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import { MigrationInterface, QueryRunner } from 'typeorm';
|
||||
import { logMigrationEnd, logMigrationStart, getTablePrefix } from '@db/utils/migrationHelpers';
|
||||
import config from '@/config';
|
||||
|
||||
export class CreateVariables1677501636752 implements MigrationInterface {
|
||||
name = 'CreateVariables1677501636752';
|
||||
public async up(queryRunner: QueryRunner): Promise<void> {
|
||||
logMigrationStart(this.name);
|
||||
const tablePrefix = getTablePrefix();
|
||||
|
||||
await queryRunner.query(`
|
||||
CREATE TABLE ${tablePrefix}variables (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL,
|
||||
"key" TEXT NOT NULL,
|
||||
"type" TEXT NOT NULL DEFAULT ('string'),
|
||||
value TEXT,
|
||||
UNIQUE("key")
|
||||
);
|
||||
`);
|
||||
|
||||
logMigrationEnd(this.name);
|
||||
}
|
||||
|
||||
public async down(queryRunner: QueryRunner): Promise<void> {
|
||||
logMigrationStart(this.name);
|
||||
const tablePrefix = getTablePrefix();
|
||||
|
||||
await queryRunner.query(`DROP TABLE ${tablePrefix}variables;`);
|
||||
|
||||
logMigrationEnd(this.name);
|
||||
}
|
||||
}
|
||||
|
|
@ -32,6 +32,7 @@ import { AddStatusToExecutions1674138566000 } from './1674138566000-AddStatusToE
|
|||
import { MigrateExecutionStatus1676996103000 } from './1676996103000-MigrateExecutionStatus';
|
||||
import { UpdateRunningExecutionStatus1677237073720 } from './1677237073720-UpdateRunningExecutionStatus';
|
||||
import { CreateExecutionMetadataTable1679416281777 } from './1679416281777-CreateExecutionMetadataTable';
|
||||
import { CreateVariables1677501636752 } from './1677501636752-CreateVariables';
|
||||
|
||||
const sqliteMigrations = [
|
||||
InitialMigration1588102412422,
|
||||
|
|
@ -67,6 +68,7 @@ const sqliteMigrations = [
|
|||
AddStatusToExecutions1674138566000,
|
||||
MigrateExecutionStatus1676996103000,
|
||||
UpdateRunningExecutionStatus1677237073720,
|
||||
CreateVariables1677501636752,
|
||||
CreateExecutionMetadataTable1679416281777,
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export { SharedCredentialsRepository } from './sharedCredentials.repository';
|
|||
export { SharedWorkflowRepository } from './sharedWorkflow.repository';
|
||||
export { TagRepository } from './tag.repository';
|
||||
export { UserRepository } from './user.repository';
|
||||
export { VariablesRepository } from './variables.repository';
|
||||
export { WebhookRepository } from './webhook.repository';
|
||||
export { WorkflowRepository } from './workflow.repository';
|
||||
export { WorkflowStatisticsRepository } from './workflowStatistics.repository';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { Service } from 'typedi';
|
||||
import { DataSource, Repository } from 'typeorm';
|
||||
import { Variables } from '../entities/Variables';
|
||||
|
||||
@Service()
|
||||
export class VariablesRepository extends Repository<Variables> {
|
||||
constructor(dataSource: DataSource) {
|
||||
super(Variables, dataSource.manager);
|
||||
}
|
||||
}
|
||||
26
packages/cli/src/environments/enviromentHelpers.ts
Normal file
26
packages/cli/src/environments/enviromentHelpers.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { License } from '@/License';
|
||||
import Container from 'typedi';
|
||||
|
||||
export function isVariablesEnabled(): boolean {
|
||||
const license = Container.get(License);
|
||||
return license.isVariablesEnabled();
|
||||
}
|
||||
|
||||
export function canCreateNewVariable(variableCount: number): boolean {
|
||||
if (!isVariablesEnabled()) {
|
||||
return false;
|
||||
}
|
||||
const license = Container.get(License);
|
||||
// This defaults to -1 which is what we want if we've enabled
|
||||
// variables via the config
|
||||
const limit = license.getVariablesLimit();
|
||||
if (limit === -1) {
|
||||
return true;
|
||||
}
|
||||
return limit > variableCount;
|
||||
}
|
||||
|
||||
export function getVariablesLimit(): number {
|
||||
const license = Container.get(License);
|
||||
return license.getVariablesLimit();
|
||||
}
|
||||
79
packages/cli/src/environments/variables.controller.ee.ts
Normal file
79
packages/cli/src/environments/variables.controller.ee.ts
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import express from 'express';
|
||||
import { LoggerProxy } from 'n8n-workflow';
|
||||
|
||||
import * as ResponseHelper from '@/ResponseHelper';
|
||||
import type { VariablesRequest } from '@/requests';
|
||||
import {
|
||||
VariablesLicenseError,
|
||||
EEVariablesService,
|
||||
VariablesValidationError,
|
||||
} from './variables.service.ee';
|
||||
import { isVariablesEnabled } from './enviromentHelpers';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
export const EEVariablesController = express.Router();
|
||||
|
||||
/**
|
||||
* Initialize Logger if needed
|
||||
*/
|
||||
EEVariablesController.use((req, res, next) => {
|
||||
if (!isVariablesEnabled()) {
|
||||
next('router');
|
||||
return;
|
||||
}
|
||||
|
||||
next();
|
||||
});
|
||||
|
||||
EEVariablesController.post(
|
||||
'/',
|
||||
ResponseHelper.send(async (req: VariablesRequest.Create) => {
|
||||
if (req.user.globalRole.name !== 'owner') {
|
||||
LoggerProxy.info('Attempt to update a variable blocked due to lack of permissions', {
|
||||
userId: req.user.id,
|
||||
});
|
||||
throw new ResponseHelper.AuthError('Unauthorized');
|
||||
}
|
||||
const variable = req.body;
|
||||
delete variable.id;
|
||||
try {
|
||||
return await EEVariablesService.create(variable);
|
||||
} catch (error) {
|
||||
if (error instanceof VariablesLicenseError) {
|
||||
throw new ResponseHelper.BadRequestError(error.message);
|
||||
} else if (error instanceof VariablesValidationError) {
|
||||
throw new ResponseHelper.BadRequestError(error.message);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
EEVariablesController.patch(
|
||||
'/:id(\\d+)',
|
||||
ResponseHelper.send(async (req: VariablesRequest.Update) => {
|
||||
const id = parseInt(req.params.id);
|
||||
if (isNaN(id)) {
|
||||
throw new ResponseHelper.BadRequestError('Invalid variable id ' + req.params.id);
|
||||
}
|
||||
if (req.user.globalRole.name !== 'owner') {
|
||||
LoggerProxy.info('Attempt to update a variable blocked due to lack of permissions', {
|
||||
id,
|
||||
userId: req.user.id,
|
||||
});
|
||||
throw new ResponseHelper.AuthError('Unauthorized');
|
||||
}
|
||||
const variable = req.body;
|
||||
delete variable.id;
|
||||
try {
|
||||
return await EEVariablesService.update(id, variable);
|
||||
} catch (error) {
|
||||
if (error instanceof VariablesLicenseError) {
|
||||
throw new ResponseHelper.BadRequestError(error.message);
|
||||
} else if (error instanceof VariablesValidationError) {
|
||||
throw new ResponseHelper.BadRequestError(error.message);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}),
|
||||
);
|
||||
82
packages/cli/src/environments/variables.controller.ts
Normal file
82
packages/cli/src/environments/variables.controller.ts
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import express from 'express';
|
||||
import { LoggerProxy } from 'n8n-workflow';
|
||||
|
||||
import { getLogger } from '@/Logger';
|
||||
import * as ResponseHelper from '@/ResponseHelper';
|
||||
import type { VariablesRequest } from '@/requests';
|
||||
import { VariablesService } from './variables.service';
|
||||
import { EEVariablesController } from './variables.controller.ee';
|
||||
|
||||
export const variablesController = express.Router();
|
||||
|
||||
variablesController.use('/', EEVariablesController);
|
||||
|
||||
/**
|
||||
* Initialize Logger if needed
|
||||
*/
|
||||
variablesController.use((req, res, next) => {
|
||||
try {
|
||||
LoggerProxy.getInstance();
|
||||
} catch (error) {
|
||||
LoggerProxy.init(getLogger());
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
variablesController.use(EEVariablesController);
|
||||
|
||||
variablesController.get(
|
||||
'/',
|
||||
ResponseHelper.send(async () => {
|
||||
return VariablesService.getAll();
|
||||
}),
|
||||
);
|
||||
|
||||
variablesController.post(
|
||||
'/',
|
||||
ResponseHelper.send(async () => {
|
||||
throw new ResponseHelper.BadRequestError('No variables license found');
|
||||
}),
|
||||
);
|
||||
|
||||
variablesController.get(
|
||||
'/:id(\\d+)',
|
||||
ResponseHelper.send(async (req: VariablesRequest.Get) => {
|
||||
const id = parseInt(req.params.id);
|
||||
if (isNaN(id)) {
|
||||
throw new ResponseHelper.BadRequestError('Invalid variable id ' + req.params.id);
|
||||
}
|
||||
const variable = await VariablesService.get(id);
|
||||
if (variable === null) {
|
||||
throw new ResponseHelper.NotFoundError(`Variable with id ${req.params.id} not found`);
|
||||
}
|
||||
return variable;
|
||||
}),
|
||||
);
|
||||
|
||||
variablesController.patch(
|
||||
'/:id(\\d+)',
|
||||
ResponseHelper.send(async () => {
|
||||
throw new ResponseHelper.BadRequestError('No variables license found');
|
||||
}),
|
||||
);
|
||||
|
||||
variablesController.delete(
|
||||
'/:id(\\d+)',
|
||||
ResponseHelper.send(async (req: VariablesRequest.Delete) => {
|
||||
const id = parseInt(req.params.id);
|
||||
if (isNaN(id)) {
|
||||
throw new ResponseHelper.BadRequestError('Invalid variable id ' + req.params.id);
|
||||
}
|
||||
if (req.user.globalRole.name !== 'owner') {
|
||||
LoggerProxy.info('Attempt to delete a variable blocked due to lack of permissions', {
|
||||
id,
|
||||
userId: req.user.id,
|
||||
});
|
||||
throw new ResponseHelper.AuthError('Unauthorized');
|
||||
}
|
||||
await VariablesService.delete(id);
|
||||
|
||||
return true;
|
||||
}),
|
||||
);
|
||||
45
packages/cli/src/environments/variables.service.ee.ts
Normal file
45
packages/cli/src/environments/variables.service.ee.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
import type { Variables } from '@/databases/entities/Variables';
|
||||
import { collections } from '@/Db';
|
||||
import { InternalHooks } from '@/InternalHooks';
|
||||
import Container from 'typedi';
|
||||
import { canCreateNewVariable } from './enviromentHelpers';
|
||||
import { VariablesService } from './variables.service';
|
||||
|
||||
export class VariablesLicenseError extends Error {}
|
||||
export class VariablesValidationError extends Error {}
|
||||
|
||||
export class EEVariablesService extends VariablesService {
|
||||
static async getCount(): Promise<number> {
|
||||
return collections.Variables.count();
|
||||
}
|
||||
|
||||
static validateVariable(variable: Omit<Variables, 'id'>): void {
|
||||
if (variable.key.length > 50) {
|
||||
throw new VariablesValidationError('key cannot be longer than 50 characters');
|
||||
}
|
||||
if (variable.key.replace(/[A-Za-z0-9_]/g, '').length !== 0) {
|
||||
throw new VariablesValidationError('key can only contain characters A-Za-z0-9_');
|
||||
}
|
||||
if (variable.value.length > 255) {
|
||||
throw new VariablesValidationError('value cannot be longer than 255 characters');
|
||||
}
|
||||
}
|
||||
|
||||
static async create(variable: Omit<Variables, 'id'>): Promise<Variables> {
|
||||
if (!canCreateNewVariable(await this.getCount())) {
|
||||
throw new VariablesLicenseError('Variables limit reached');
|
||||
}
|
||||
this.validateVariable(variable);
|
||||
|
||||
void Container.get(InternalHooks).onVariableCreated({ variable_type: variable.type });
|
||||
return collections.Variables.save(variable);
|
||||
}
|
||||
|
||||
static async update(id: number, variable: Omit<Variables, 'id'>): Promise<Variables> {
|
||||
this.validateVariable(variable);
|
||||
|
||||
await collections.Variables.update(id, variable);
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
return (await this.get(id))!;
|
||||
}
|
||||
}
|
||||
20
packages/cli/src/environments/variables.service.ts
Normal file
20
packages/cli/src/environments/variables.service.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { Variables } from '@/databases/entities/Variables';
|
||||
import { collections } from '@/Db';
|
||||
|
||||
export class VariablesService {
|
||||
static async getAll(): Promise<Variables[]> {
|
||||
return collections.Variables.find();
|
||||
}
|
||||
|
||||
static async getCount(): Promise<number> {
|
||||
return collections.Variables.count();
|
||||
}
|
||||
|
||||
static async get(id: number): Promise<Variables | null> {
|
||||
return collections.Variables.findOne({ where: { id } });
|
||||
}
|
||||
|
||||
static async delete(id: number): Promise<void> {
|
||||
await collections.Variables.delete(id);
|
||||
}
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@ import type { PublicUser, IExecutionDeleteFilter, IWorkflowDb } from '@/Interfac
|
|||
import type { Role } from '@db/entities/Role';
|
||||
import type { User } from '@db/entities/User';
|
||||
import type { UserManagementMailer } from '@/UserManagement/email';
|
||||
import type { Variables } from '@db/entities/Variables';
|
||||
|
||||
export class UserUpdatePayload implements Pick<User, 'email' | 'firstName' | 'lastName'> {
|
||||
@IsEmail()
|
||||
|
|
@ -386,3 +387,17 @@ export type BinaryDataRequest = AuthenticatedRequest<
|
|||
mimeType?: string;
|
||||
}
|
||||
>;
|
||||
|
||||
// ----------------------------------
|
||||
// /variables
|
||||
// ----------------------------------
|
||||
//
|
||||
export declare namespace VariablesRequest {
|
||||
type CreateUpdatePayload = Omit<Variables, 'id'> & { id?: unknown };
|
||||
|
||||
type GetAll = AuthenticatedRequest;
|
||||
type Get = AuthenticatedRequest<{ id: string }, {}, {}, {}>;
|
||||
type Create = AuthenticatedRequest<{}, {}, CreateUpdatePayload, {}>;
|
||||
type Update = AuthenticatedRequest<{ id: string }, {}, CreateUpdatePayload, {}>;
|
||||
type Delete = Get;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -489,6 +489,33 @@ export async function getWorkflowSharing(workflow: WorkflowEntity) {
|
|||
});
|
||||
}
|
||||
|
||||
// ----------------------------------
|
||||
// variables
|
||||
// ----------------------------------
|
||||
|
||||
export async function createVariable(key: string, value: string) {
|
||||
return Db.collections.Variables.save({
|
||||
key,
|
||||
value,
|
||||
});
|
||||
}
|
||||
|
||||
export async function getVariableByKey(key: string) {
|
||||
return Db.collections.Variables.findOne({
|
||||
where: {
|
||||
key,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export async function getVariableById(id: number) {
|
||||
return Db.collections.Variables.findOne({
|
||||
where: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------
|
||||
// connection options
|
||||
// ----------------------------------
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ type EndpointGroup =
|
|||
| 'ldap'
|
||||
| 'saml'
|
||||
| 'eventBus'
|
||||
| 'license';
|
||||
| 'license'
|
||||
| 'variables';
|
||||
|
||||
export type CredentialPayload = {
|
||||
name: string;
|
||||
|
|
|
|||
|
|
@ -73,6 +73,7 @@ import { v4 as uuid } from 'uuid';
|
|||
import { InternalHooks } from '@/InternalHooks';
|
||||
import { LoadNodesAndCredentials } from '@/LoadNodesAndCredentials';
|
||||
import { PostHogClient } from '@/posthog';
|
||||
import { variablesController } from '@/environments/variables.controller';
|
||||
import { LdapManager } from '@/Ldap/LdapManager.ee';
|
||||
import { handleLdapInit } from '@/Ldap/helpers';
|
||||
import { Push } from '@/push';
|
||||
|
|
@ -151,6 +152,7 @@ export async function initTestServer({
|
|||
credentials: { controller: credentialsController, path: 'credentials' },
|
||||
workflows: { controller: workflowsController, path: 'workflows' },
|
||||
license: { controller: licenseController, path: 'license' },
|
||||
variables: { controller: variablesController, path: 'variables' },
|
||||
};
|
||||
|
||||
if (enablePublicAPI) {
|
||||
|
|
@ -268,7 +270,7 @@ const classifyEndpointGroups = (endpointGroups: EndpointGroup[]) => {
|
|||
const routerEndpoints: EndpointGroup[] = [];
|
||||
const functionEndpoints: EndpointGroup[] = [];
|
||||
|
||||
const ROUTER_GROUP = ['credentials', 'workflows', 'publicApi', 'license'];
|
||||
const ROUTER_GROUP = ['credentials', 'workflows', 'publicApi', 'license', 'variables'];
|
||||
|
||||
endpointGroups.forEach((group) =>
|
||||
(ROUTER_GROUP.includes(group) ? routerEndpoints : functionEndpoints).push(group),
|
||||
|
|
|
|||
379
packages/cli/test/integration/variables.test.ts
Normal file
379
packages/cli/test/integration/variables.test.ts
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
import type { Application } from 'express';
|
||||
|
||||
import type { User } from '@/databases/entities/User';
|
||||
import * as testDb from './shared/testDb';
|
||||
import * as utils from './shared/utils';
|
||||
|
||||
import type { AuthAgent } from './shared/types';
|
||||
import type { ClassLike, MockedClass } from 'jest-mock';
|
||||
import { License } from '@/License';
|
||||
|
||||
// mock that credentialsSharing is not enabled
|
||||
let app: Application;
|
||||
let ownerUser: User;
|
||||
let memberUser: User;
|
||||
let authAgent: AuthAgent;
|
||||
let variablesSpy: jest.SpyInstance<boolean>;
|
||||
let licenseLike = {
|
||||
isVariablesEnabled: jest.fn().mockReturnValue(true),
|
||||
getVariablesLimit: jest.fn().mockReturnValue(-1),
|
||||
};
|
||||
|
||||
beforeAll(async () => {
|
||||
app = await utils.initTestServer({ endpointGroups: ['variables'] });
|
||||
|
||||
utils.initConfigFile();
|
||||
utils.mockInstance(License, licenseLike);
|
||||
|
||||
ownerUser = await testDb.createOwner();
|
||||
memberUser = await testDb.createUser();
|
||||
|
||||
authAgent = utils.createAuthAgent(app);
|
||||
});
|
||||
|
||||
beforeEach(async () => {
|
||||
await testDb.truncate(['Variables']);
|
||||
licenseLike.isVariablesEnabled.mockReturnValue(true);
|
||||
licenseLike.getVariablesLimit.mockReturnValue(-1);
|
||||
});
|
||||
|
||||
afterAll(async () => {
|
||||
await testDb.terminate();
|
||||
});
|
||||
|
||||
// ----------------------------------------
|
||||
// GET /variables - fetch all variables
|
||||
// ----------------------------------------
|
||||
|
||||
test('GET /variables should return all variables for an owner', async () => {
|
||||
await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable('test2', 'value2'),
|
||||
]);
|
||||
|
||||
const response = await authAgent(ownerUser).get('/variables');
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.body.data.length).toBe(2);
|
||||
});
|
||||
|
||||
test('GET /variables should return all variables for a member', async () => {
|
||||
await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable('test2', 'value2'),
|
||||
]);
|
||||
|
||||
const response = await authAgent(memberUser).get('/variables');
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.body.data.length).toBe(2);
|
||||
});
|
||||
|
||||
// ----------------------------------------
|
||||
// GET /variables/:id - get a single variable
|
||||
// ----------------------------------------
|
||||
|
||||
test('GET /variables/:id should return a single variable for an owner', async () => {
|
||||
const [var1, var2] = await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable('test2', 'value2'),
|
||||
]);
|
||||
|
||||
const response1 = await authAgent(ownerUser).get(`/variables/${var1.id}`);
|
||||
expect(response1.statusCode).toBe(200);
|
||||
expect(response1.body.data.key).toBe('test1');
|
||||
|
||||
const response2 = await authAgent(ownerUser).get(`/variables/${var2.id}`);
|
||||
expect(response2.statusCode).toBe(200);
|
||||
expect(response2.body.data.key).toBe('test2');
|
||||
});
|
||||
|
||||
test('GET /variables/:id should return a single variable for a member', async () => {
|
||||
const [var1, var2] = await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable('test2', 'value2'),
|
||||
]);
|
||||
|
||||
const response1 = await authAgent(memberUser).get(`/variables/${var1.id}`);
|
||||
expect(response1.statusCode).toBe(200);
|
||||
expect(response1.body.data.key).toBe('test1');
|
||||
|
||||
const response2 = await authAgent(memberUser).get(`/variables/${var2.id}`);
|
||||
expect(response2.statusCode).toBe(200);
|
||||
expect(response2.body.data.key).toBe('test2');
|
||||
});
|
||||
|
||||
// ----------------------------------------
|
||||
// POST /variables - create a new variable
|
||||
// ----------------------------------------
|
||||
|
||||
test('POST /variables should create a new credential and return it for an owner', async () => {
|
||||
const toCreate = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.body.data.key).toBe(toCreate.key);
|
||||
expect(response.body.data.value).toBe(toCreate.value);
|
||||
|
||||
const [byId, byKey] = await Promise.all([
|
||||
testDb.getVariableById(response.body.data.id),
|
||||
testDb.getVariableByKey(toCreate.key),
|
||||
]);
|
||||
|
||||
expect(byId).not.toBeNull();
|
||||
expect(byId!.key).toBe(toCreate.key);
|
||||
expect(byId!.value).toBe(toCreate.value);
|
||||
|
||||
expect(byKey).not.toBeNull();
|
||||
expect(byKey!.id).toBe(response.body.data.id);
|
||||
expect(byKey!.value).toBe(toCreate.value);
|
||||
});
|
||||
|
||||
test('POST /variables should not create a new credential and return it for a member', async () => {
|
||||
const toCreate = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const response = await authAgent(memberUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(401);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
|
||||
const byKey = await testDb.getVariableByKey(toCreate.key);
|
||||
expect(byKey).toBeNull();
|
||||
});
|
||||
|
||||
test("POST /variables should not create a new credential and return it if the instance doesn't have a license", async () => {
|
||||
licenseLike.isVariablesEnabled.mockReturnValue(false);
|
||||
const toCreate = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(400);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
|
||||
const byKey = await testDb.getVariableByKey(toCreate.key);
|
||||
expect(byKey).toBeNull();
|
||||
});
|
||||
|
||||
test('POST /variables should fail to create a new credential and if one with the same key exists', async () => {
|
||||
const toCreate = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
await testDb.createVariable(toCreate.key, toCreate.value);
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(500);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
});
|
||||
|
||||
test('POST /variables should not fail if variable limit not reached', async () => {
|
||||
licenseLike.getVariablesLimit.mockReturnValue(5);
|
||||
let i = 1;
|
||||
let toCreate = {
|
||||
key: `create${i}`,
|
||||
value: `createvalue${i}`,
|
||||
};
|
||||
while (i < 3) {
|
||||
await testDb.createVariable(toCreate.key, toCreate.value);
|
||||
i++;
|
||||
toCreate = {
|
||||
key: `create${i}`,
|
||||
value: `createvalue${i}`,
|
||||
};
|
||||
}
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.body.data?.key).toBe(toCreate.key);
|
||||
expect(response.body.data?.value).toBe(toCreate.value);
|
||||
});
|
||||
|
||||
test('POST /variables should fail if variable limit reached', async () => {
|
||||
licenseLike.getVariablesLimit.mockReturnValue(5);
|
||||
let i = 1;
|
||||
let toCreate = {
|
||||
key: `create${i}`,
|
||||
value: `createvalue${i}`,
|
||||
};
|
||||
while (i < 6) {
|
||||
await testDb.createVariable(toCreate.key, toCreate.value);
|
||||
i++;
|
||||
toCreate = {
|
||||
key: `create${i}`,
|
||||
value: `createvalue${i}`,
|
||||
};
|
||||
}
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(400);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
});
|
||||
|
||||
test('POST /variables should fail if key too long', async () => {
|
||||
const toCreate = {
|
||||
// 51 'a's
|
||||
key: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
|
||||
value: 'value',
|
||||
};
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(400);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
});
|
||||
|
||||
test('POST /variables should fail if value too long', async () => {
|
||||
const toCreate = {
|
||||
key: 'key',
|
||||
// 256 'a's
|
||||
value:
|
||||
'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
|
||||
};
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(400);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
});
|
||||
|
||||
test("POST /variables should fail if key contain's prohibited characters", async () => {
|
||||
const toCreate = {
|
||||
// 51 'a's
|
||||
key: 'te$t',
|
||||
value: 'value',
|
||||
};
|
||||
const response = await authAgent(ownerUser).post('/variables').send(toCreate);
|
||||
expect(response.statusCode).toBe(400);
|
||||
expect(response.body.data?.key).not.toBe(toCreate.key);
|
||||
expect(response.body.data?.value).not.toBe(toCreate.value);
|
||||
});
|
||||
|
||||
// ----------------------------------------
|
||||
// PATCH /variables/:id - change a variable
|
||||
// ----------------------------------------
|
||||
|
||||
test('PATCH /variables/:id should modify existing credential if use is an owner', async () => {
|
||||
const variable = await testDb.createVariable('test1', 'value1');
|
||||
const toModify = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const response = await authAgent(ownerUser).patch(`/variables/${variable.id}`).send(toModify);
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.body.data.key).toBe(toModify.key);
|
||||
expect(response.body.data.value).toBe(toModify.value);
|
||||
|
||||
const [byId, byKey] = await Promise.all([
|
||||
testDb.getVariableById(response.body.data.id),
|
||||
testDb.getVariableByKey(toModify.key),
|
||||
]);
|
||||
|
||||
expect(byId).not.toBeNull();
|
||||
expect(byId!.key).toBe(toModify.key);
|
||||
expect(byId!.value).toBe(toModify.value);
|
||||
|
||||
expect(byKey).not.toBeNull();
|
||||
expect(byKey!.id).toBe(response.body.data.id);
|
||||
expect(byKey!.value).toBe(toModify.value);
|
||||
});
|
||||
|
||||
test('PATCH /variables/:id should modify existing credential if use is an owner', async () => {
|
||||
const variable = await testDb.createVariable('test1', 'value1');
|
||||
const toModify = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const response = await authAgent(ownerUser).patch(`/variables/${variable.id}`).send(toModify);
|
||||
expect(response.statusCode).toBe(200);
|
||||
expect(response.body.data.key).toBe(toModify.key);
|
||||
expect(response.body.data.value).toBe(toModify.value);
|
||||
|
||||
const [byId, byKey] = await Promise.all([
|
||||
testDb.getVariableById(response.body.data.id),
|
||||
testDb.getVariableByKey(toModify.key),
|
||||
]);
|
||||
|
||||
expect(byId).not.toBeNull();
|
||||
expect(byId!.key).toBe(toModify.key);
|
||||
expect(byId!.value).toBe(toModify.value);
|
||||
|
||||
expect(byKey).not.toBeNull();
|
||||
expect(byKey!.id).toBe(response.body.data.id);
|
||||
expect(byKey!.value).toBe(toModify.value);
|
||||
});
|
||||
|
||||
test('PATCH /variables/:id should not modify existing credential if use is a member', async () => {
|
||||
const variable = await testDb.createVariable('test1', 'value1');
|
||||
const toModify = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const response = await authAgent(memberUser).patch(`/variables/${variable.id}`).send(toModify);
|
||||
expect(response.statusCode).toBe(401);
|
||||
expect(response.body.data?.key).not.toBe(toModify.key);
|
||||
expect(response.body.data?.value).not.toBe(toModify.value);
|
||||
|
||||
const byId = await testDb.getVariableById(variable.id);
|
||||
expect(byId).not.toBeNull();
|
||||
expect(byId!.key).not.toBe(toModify.key);
|
||||
expect(byId!.value).not.toBe(toModify.value);
|
||||
});
|
||||
|
||||
test('PATCH /variables/:id should not modify existing credential if one with the same key exists', async () => {
|
||||
const toModify = {
|
||||
key: 'create1',
|
||||
value: 'createvalue1',
|
||||
};
|
||||
const [var1, var2] = await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable(toModify.key, toModify.value),
|
||||
]);
|
||||
const response = await authAgent(ownerUser).patch(`/variables/${var1.id}`).send(toModify);
|
||||
expect(response.statusCode).toBe(500);
|
||||
expect(response.body.data?.key).not.toBe(toModify.key);
|
||||
expect(response.body.data?.value).not.toBe(toModify.value);
|
||||
|
||||
const byId = await testDb.getVariableById(var1.id);
|
||||
expect(byId).not.toBeNull();
|
||||
expect(byId!.key).toBe(var1.key);
|
||||
expect(byId!.value).toBe(var1.value);
|
||||
});
|
||||
|
||||
// ----------------------------------------
|
||||
// DELETE /variables/:id - change a variable
|
||||
// ----------------------------------------
|
||||
|
||||
test('DELETE /variables/:id should delete a single credential for an owner', async () => {
|
||||
const [var1, var2, var3] = await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable('test2', 'value2'),
|
||||
testDb.createVariable('test3', 'value3'),
|
||||
]);
|
||||
|
||||
const delResponse = await authAgent(ownerUser).delete(`/variables/${var1.id}`);
|
||||
expect(delResponse.statusCode).toBe(200);
|
||||
|
||||
const byId = await testDb.getVariableById(var1.id);
|
||||
expect(byId).toBeNull();
|
||||
|
||||
const getResponse = await authAgent(ownerUser).get('/variables');
|
||||
expect(getResponse.body.data.length).toBe(2);
|
||||
});
|
||||
|
||||
test('DELETE /variables/:id should not delete a single credential for a member', async () => {
|
||||
const [var1, var2, var3] = await Promise.all([
|
||||
testDb.createVariable('test1', 'value1'),
|
||||
testDb.createVariable('test2', 'value2'),
|
||||
testDb.createVariable('test3', 'value3'),
|
||||
]);
|
||||
|
||||
const delResponse = await authAgent(memberUser).delete(`/variables/${var1.id}`);
|
||||
expect(delResponse.statusCode).toBe(401);
|
||||
|
||||
const byId = await testDb.getVariableById(var1.id);
|
||||
expect(byId).not.toBeNull();
|
||||
|
||||
const getResponse = await authAgent(memberUser).get('/variables');
|
||||
expect(getResponse.body.data.length).toBe(3);
|
||||
});
|
||||
|
|
@ -121,6 +121,9 @@ jest.mock('@/Db', () => {
|
|||
clear: jest.fn(),
|
||||
delete: jest.fn(),
|
||||
},
|
||||
Variables: {
|
||||
find: jest.fn(() => []),
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1686,6 +1686,7 @@ export function getAdditionalKeys(
|
|||
}
|
||||
: undefined,
|
||||
},
|
||||
$vars: additionalData.variables,
|
||||
|
||||
// deprecated
|
||||
$executionId: executionId,
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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,19 +182,11 @@ export default defineComponent({
|
|||
|
||||
.datatable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.datatableHeader {
|
||||
background: var(--color-background-base);
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: var(--spacing-s) var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.datatableRow {
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
vertical-align: top;
|
||||
color: var(--color-text-base);
|
||||
padding: var(--spacing-s) var(--spacing-2xs);
|
||||
}
|
||||
|
|
@ -181,6 +199,17 @@ export default defineComponent({
|
|||
background: var(--color-background-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datatableHeader {
|
||||
background: var(--color-background-base);
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: var(--spacing-s) var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
|
|
@ -188,7 +217,7 @@ export default defineComponent({
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
overflow: visible;
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>(
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export * from './button';
|
||||
export * from './datatable';
|
||||
export * from './form';
|
||||
export * from './menu';
|
||||
export * from './router';
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
"canvas-confetti": "^1.6.0",
|
||||
"codemirror-lang-html-n8n": "^1.0.0",
|
||||
"codemirror-lang-n8n-expression": "^0.2.0",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"dateformat": "^3.0.3",
|
||||
"esprima-next": "5.8.4",
|
||||
"fast-json-stable-stringify": "^2.1.0",
|
||||
|
|
|
|||
|
|
@ -1470,6 +1470,16 @@ export type NodeAuthenticationOption = {
|
|||
displayOptions?: IDisplayOptions;
|
||||
};
|
||||
|
||||
export interface EnvironmentVariable {
|
||||
id: number;
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface TemporaryEnvironmentVariable extends Omit<EnvironmentVariable, 'id'> {
|
||||
id: string;
|
||||
}
|
||||
|
||||
export type ExecutionFilterMetadata = {
|
||||
key: string;
|
||||
value: string;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import { Server } from 'miragejs';
|
||||
import { routesForUsers } from './user';
|
||||
import { routesForCredentials } from './credential';
|
||||
import { Server } from 'miragejs';
|
||||
import { routesForCredentialTypes } from '@/__tests__/server/endpoints/credentialType';
|
||||
import { routesForCredentialTypes } from './credentialType';
|
||||
import { routesForVariables } from './variable';
|
||||
import { routesForSettings } from './settings';
|
||||
|
||||
const endpoints: Array<(server: Server) => void> = [
|
||||
routesForCredentials,
|
||||
routesForCredentialTypes,
|
||||
routesForUsers,
|
||||
routesForVariables,
|
||||
routesForSettings,
|
||||
];
|
||||
|
||||
export { endpoints };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
import { Response, Server } from 'miragejs';
|
||||
import { AppSchema } from '../types';
|
||||
import { IN8nUISettings, ISettingsState } from '@/Interface';
|
||||
|
||||
const defaultSettings: IN8nUISettings = {
|
||||
allowedModules: {},
|
||||
communityNodesEnabled: false,
|
||||
defaultLocale: '',
|
||||
endpointWebhook: '',
|
||||
endpointWebhookTest: '',
|
||||
enterprise: {
|
||||
variables: true,
|
||||
},
|
||||
executionMode: '',
|
||||
executionTimeout: 0,
|
||||
hideUsagePage: false,
|
||||
hiringBannerEnabled: false,
|
||||
instanceId: '',
|
||||
isNpmAvailable: false,
|
||||
license: { environment: 'development' },
|
||||
logLevel: 'info',
|
||||
maxExecutionTimeout: 0,
|
||||
oauthCallbackUrls: { oauth1: '', oauth2: '' },
|
||||
onboardingCallPromptEnabled: false,
|
||||
personalizationSurveyEnabled: false,
|
||||
posthog: {
|
||||
apiHost: '',
|
||||
apiKey: '',
|
||||
autocapture: false,
|
||||
debug: false,
|
||||
disableSessionRecording: false,
|
||||
enabled: false,
|
||||
},
|
||||
publicApi: { enabled: false, latestVersion: 0, path: '', swaggerUi: { enabled: false } },
|
||||
pushBackend: 'websocket',
|
||||
saveDataErrorExecution: '',
|
||||
saveDataSuccessExecution: '',
|
||||
saveManualExecutions: false,
|
||||
sso: {
|
||||
ldap: { loginEnabled: false, loginLabel: '' },
|
||||
saml: { loginEnabled: false, loginLabel: '' },
|
||||
},
|
||||
telemetry: {
|
||||
enabled: false,
|
||||
},
|
||||
templates: { enabled: false, host: '' },
|
||||
timezone: '',
|
||||
urlBaseEditor: '',
|
||||
urlBaseWebhook: '',
|
||||
userManagement: {
|
||||
enabled: true,
|
||||
showSetupOnFirstLoad: true,
|
||||
smtpSetup: true,
|
||||
},
|
||||
versionCli: '',
|
||||
versionNotifications: {
|
||||
enabled: true,
|
||||
endpoint: '',
|
||||
infoUrl: '',
|
||||
},
|
||||
workflowCallerPolicyDefaultOption: 'any',
|
||||
workflowTagsDisabled: false,
|
||||
};
|
||||
|
||||
export function routesForSettings(server: Server) {
|
||||
server.get('/rest/settings', (schema: AppSchema) => {
|
||||
return new Response(
|
||||
200,
|
||||
{},
|
||||
{
|
||||
data: defaultSettings,
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -7,4 +7,12 @@ export function routesForUsers(server: Server) {
|
|||
|
||||
return new Response(200, {}, { data });
|
||||
});
|
||||
|
||||
server.get('/rest/login', (schema: AppSchema) => {
|
||||
const model = schema.findBy('user', {
|
||||
isDefaultUser: true,
|
||||
});
|
||||
|
||||
return new Response(200, {}, { data: model?.attrs });
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
import { Request, Response, Server } from 'miragejs';
|
||||
import { AppSchema } from '../types';
|
||||
import { jsonParse } from 'n8n-workflow';
|
||||
import { EnvironmentVariable } from '@/Interface';
|
||||
|
||||
export function routesForVariables(server: Server) {
|
||||
server.get('/rest/variables', (schema: AppSchema) => {
|
||||
const { models: data } = schema.all('variable');
|
||||
|
||||
return new Response(200, {}, { data });
|
||||
});
|
||||
|
||||
server.post('/rest/variables', (schema: AppSchema, request: Request) => {
|
||||
const data = schema.create('variable', jsonParse(request.requestBody));
|
||||
|
||||
return new Response(200, {}, { data });
|
||||
});
|
||||
|
||||
server.patch('/rest/variables/:id', (schema: AppSchema, request: Request) => {
|
||||
const data: EnvironmentVariable = jsonParse(request.requestBody);
|
||||
const id = request.params.id;
|
||||
|
||||
const model = schema.find('variable', id);
|
||||
if (model) {
|
||||
model.update(data);
|
||||
}
|
||||
|
||||
return new Response(200, {}, { data: model?.attrs });
|
||||
});
|
||||
|
||||
server.delete('/rest/variables/:id', (schema: AppSchema, request: Request) => {
|
||||
const id = request.params.id;
|
||||
|
||||
const model = schema.find('variable', id);
|
||||
if (model) {
|
||||
model.destroy();
|
||||
}
|
||||
|
||||
return new Response(200, {}, {});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
import { userFactory } from './user';
|
||||
import { credentialFactory } from './credential';
|
||||
import { credentialTypeFactory } from './credentialType';
|
||||
import { variableFactory } from './variable';
|
||||
|
||||
export * from './user';
|
||||
export * from './credential';
|
||||
export * from './credentialType';
|
||||
export * from './variable';
|
||||
|
||||
export const factories = {
|
||||
credential: credentialFactory,
|
||||
credentialType: credentialTypeFactory,
|
||||
user: userFactory,
|
||||
variable: variableFactory,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { Factory } from 'miragejs';
|
||||
import { faker } from '@faker-js/faker';
|
||||
import type { EnvironmentVariable } from '@/Interface';
|
||||
|
||||
export const variableFactory = Factory.extend<EnvironmentVariable>({
|
||||
id(i: number) {
|
||||
return i;
|
||||
},
|
||||
key() {
|
||||
return `${faker.lorem.word()}`.toUpperCase();
|
||||
},
|
||||
value() {
|
||||
return faker.internet.password(10);
|
||||
},
|
||||
});
|
||||
|
|
@ -10,6 +10,8 @@ export function setupServer() {
|
|||
seeds(server) {
|
||||
server.createList('credentialType', 8);
|
||||
server.create('user', {
|
||||
firstName: 'Nathan',
|
||||
lastName: 'Doe',
|
||||
isDefaultUser: true,
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
import { UserModel } from './user';
|
||||
import { CredentialModel } from './credential';
|
||||
import { CredentialTypeModel } from './credentialType';
|
||||
import { VariableModel } from './variable';
|
||||
|
||||
export const models = {
|
||||
credential: CredentialModel,
|
||||
credentialType: CredentialTypeModel,
|
||||
user: UserModel,
|
||||
variable: VariableModel,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import { EnvironmentVariable } from '@/Interface';
|
||||
import { Model } from 'miragejs';
|
||||
import type { ModelDefinition } from 'miragejs/-types';
|
||||
|
||||
export const VariableModel: ModelDefinition<EnvironmentVariable> = Model.extend({});
|
||||
40
packages/editor-ui/src/api/environments.ee.ts
Normal file
40
packages/editor-ui/src/api/environments.ee.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { EnvironmentVariable, IRestApiContext } from '@/Interface';
|
||||
import { makeRestApiRequest } from '@/utils';
|
||||
import { IDataObject } from 'n8n-workflow';
|
||||
|
||||
export async function getVariables(context: IRestApiContext): Promise<EnvironmentVariable[]> {
|
||||
return await makeRestApiRequest(context, 'GET', '/variables');
|
||||
}
|
||||
|
||||
export async function getVariable(
|
||||
context: IRestApiContext,
|
||||
{ id }: { id: EnvironmentVariable['id'] },
|
||||
): Promise<EnvironmentVariable> {
|
||||
return await makeRestApiRequest(context, 'GET', `/variables/${id}`);
|
||||
}
|
||||
|
||||
export async function createVariable(
|
||||
context: IRestApiContext,
|
||||
data: Omit<EnvironmentVariable, 'id'>,
|
||||
) {
|
||||
return await makeRestApiRequest(context, 'POST', '/variables', data as unknown as IDataObject);
|
||||
}
|
||||
|
||||
export async function updateVariable(
|
||||
context: IRestApiContext,
|
||||
{ id, ...data }: EnvironmentVariable,
|
||||
) {
|
||||
return await makeRestApiRequest(
|
||||
context,
|
||||
'PATCH',
|
||||
`/variables/${id}`,
|
||||
data as unknown as IDataObject,
|
||||
);
|
||||
}
|
||||
|
||||
export async function deleteVariable(
|
||||
context: IRestApiContext,
|
||||
{ id }: { id: EnvironmentVariable['id'] },
|
||||
) {
|
||||
return await makeRestApiRequest(context, 'DELETE', `/variables/${id}`);
|
||||
}
|
||||
|
|
@ -135,6 +135,7 @@ export default mixins(genericHelpers, workflowHelpers).extend({
|
|||
'$mode',
|
||||
'$parameter',
|
||||
'$resumeWebhookUrl',
|
||||
'$vars',
|
||||
'$workflow',
|
||||
'$now',
|
||||
'$today',
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import { luxonCompletions } from './completions/luxon.completions';
|
|||
import { itemIndexCompletions } from './completions/itemIndex.completions';
|
||||
import { itemFieldCompletions } from './completions/itemField.completions';
|
||||
import { jsonFieldCompletions } from './completions/jsonField.completions';
|
||||
import { variablesCompletions } from './completions/variables.completions';
|
||||
|
||||
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
|
||||
import type { Extension } from '@codemirror/state';
|
||||
|
|
@ -24,6 +25,7 @@ export const completerExtension = mixins(
|
|||
requireCompletions,
|
||||
executionCompletions,
|
||||
workflowCompletions,
|
||||
variablesCompletions,
|
||||
prevNodeCompletions,
|
||||
luxonCompletions,
|
||||
itemIndexCompletions,
|
||||
|
|
@ -49,6 +51,7 @@ export const completerExtension = mixins(
|
|||
this.nodeSelectorCompletions,
|
||||
this.prevNodeCompletions,
|
||||
this.workflowCompletions,
|
||||
this.variablesCompletions,
|
||||
this.executionCompletions,
|
||||
|
||||
// luxon
|
||||
|
|
@ -167,6 +170,7 @@ export const completerExtension = mixins(
|
|||
// core
|
||||
|
||||
if (value === '$execution') return this.executionCompletions(context, variable);
|
||||
if (value === '$vars') return this.variablesCompletions(context, variable);
|
||||
if (value === '$workflow') return this.workflowCompletions(context, variable);
|
||||
if (value === '$prevNode') return this.prevNodeCompletions(context, variable);
|
||||
|
||||
|
|
|
|||
|
|
@ -67,6 +67,10 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
|
|||
label: '$workflow',
|
||||
info: this.$locale.baseText('codeNodeEditor.completer.$workflow'),
|
||||
},
|
||||
{
|
||||
label: '$vars',
|
||||
info: this.$locale.baseText('codeNodeEditor.completer.$vars'),
|
||||
},
|
||||
{
|
||||
label: '$now',
|
||||
info: this.$locale.baseText('codeNodeEditor.completer.$now'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
import Vue from 'vue';
|
||||
import { addVarType } from '../utils';
|
||||
import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
|
||||
import type { CodeNodeEditorMixin } from '../types';
|
||||
import { useEnvironmentsStore } from '@/stores';
|
||||
|
||||
const escape = (str: string) => str.replace('$', '\\$');
|
||||
|
||||
export const variablesCompletions = (Vue as CodeNodeEditorMixin).extend({
|
||||
methods: {
|
||||
/**
|
||||
* Complete `$workflow.` to `.id .name .active`.
|
||||
*/
|
||||
variablesCompletions(context: CompletionContext, matcher = '$vars'): CompletionResult | null {
|
||||
const pattern = new RegExp(`${escape(matcher)}\..*`);
|
||||
|
||||
const preCursor = context.matchBefore(pattern);
|
||||
|
||||
if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
|
||||
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
const options: Completion[] = environmentsStore.variables.map((variable) => ({
|
||||
label: `${matcher}.${variable.key}`,
|
||||
info: variable.value,
|
||||
}));
|
||||
|
||||
return {
|
||||
from: preCursor.from,
|
||||
options: options.map(addVarType),
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -226,6 +226,14 @@ export default mixins(
|
|||
position: 'top',
|
||||
activateOnRouteNames: [VIEWS.CREDENTIALS],
|
||||
},
|
||||
{
|
||||
id: 'variables',
|
||||
icon: 'variable',
|
||||
label: this.$locale.baseText('mainSidebar.variables'),
|
||||
customIconSize: 'medium',
|
||||
position: 'top',
|
||||
activateOnRouteNames: [VIEWS.VARIABLES],
|
||||
},
|
||||
{
|
||||
id: 'executions',
|
||||
icon: 'tasks',
|
||||
|
|
@ -374,6 +382,12 @@ export default mixins(
|
|||
}
|
||||
break;
|
||||
}
|
||||
case 'variables': {
|
||||
if (this.$router.currentRoute.name !== VIEWS.VARIABLES) {
|
||||
this.goToRoute({ name: VIEWS.VARIABLES });
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'executions': {
|
||||
if (this.$router.currentRoute.name !== VIEWS.EXECUTIONS) {
|
||||
this.goToRoute({ name: VIEWS.EXECUTIONS });
|
||||
|
|
|
|||
272
packages/editor-ui/src/components/VariablesRow.vue
Normal file
272
packages/editor-ui/src/components/VariablesRow.vue
Normal file
|
|
@ -0,0 +1,272 @@
|
|||
<script lang="ts" setup>
|
||||
import { ComponentPublicInstance, computed, nextTick, onMounted, PropType, ref, watch } from 'vue';
|
||||
import { EnvironmentVariable, IValidator, Rule, RuleGroup, Validatable } from '@/Interface';
|
||||
import { useI18n, useToast, useCopyToClipboard } from '@/composables';
|
||||
import { EnterpriseEditionFeature } from '@/constants';
|
||||
import { useSettingsStore, useUsersStore } from '@/stores';
|
||||
import { getVariablesPermissions } from '@/permissions';
|
||||
|
||||
const i18n = useI18n();
|
||||
const copyToClipboard = useCopyToClipboard();
|
||||
const { showMessage } = useToast();
|
||||
const settingsStore = useSettingsStore();
|
||||
const usersStore = useUsersStore();
|
||||
|
||||
const emit = defineEmits(['save', 'cancel', 'edit', 'delete']);
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<EnvironmentVariable>,
|
||||
default: () => ({}),
|
||||
},
|
||||
editing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const permissions = getVariablesPermissions(usersStore.currentUser);
|
||||
const modelValue = ref<EnvironmentVariable>({ ...props.data });
|
||||
|
||||
const formValidationStatus = ref<Record<string, boolean>>({
|
||||
key: false,
|
||||
value: false,
|
||||
});
|
||||
const formValid = computed(() => {
|
||||
return formValidationStatus.value.key && formValidationStatus.value.value;
|
||||
});
|
||||
|
||||
const keyInputRef = ref<ComponentPublicInstance & { inputRef?: HTMLElement }>();
|
||||
const valueInputRef = ref<HTMLElement>();
|
||||
|
||||
const usage = ref(`$vars.${props.data.key}`);
|
||||
|
||||
const isFeatureEnabled = computed(() =>
|
||||
settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),
|
||||
);
|
||||
|
||||
const showActions = computed(
|
||||
() => isFeatureEnabled.value && (permissions.edit || permissions.delete),
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
focusFirstInput();
|
||||
});
|
||||
|
||||
const keyValidationRules: Array<Rule | RuleGroup> = [
|
||||
{ name: 'REQUIRED' },
|
||||
{ name: 'MAX_LENGTH', config: { maximum: 50 } },
|
||||
{
|
||||
name: 'MATCH_REGEX',
|
||||
config: {
|
||||
regex: /^[a-zA-Z]/,
|
||||
message: i18n.baseText('variables.editing.key.error.startsWithLetter'),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MATCH_REGEX',
|
||||
config: {
|
||||
regex: /^[a-zA-Z][a-zA-Z0-9_]*$/,
|
||||
message: i18n.baseText('variables.editing.key.error.jsonKey'),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const valueValidationRules: Array<Rule | RuleGroup> = [
|
||||
{ name: 'MAX_LENGTH', config: { maximum: 220 } },
|
||||
];
|
||||
|
||||
watch(
|
||||
() => modelValue.value.key,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
if (formValidationStatus.value.key) {
|
||||
updateUsageSyntax();
|
||||
}
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
function updateUsageSyntax() {
|
||||
usage.value = `$vars.${modelValue.value.key || props.data.key}`;
|
||||
}
|
||||
|
||||
async function onCancel() {
|
||||
modelValue.value = { ...props.data };
|
||||
emit('cancel', modelValue.value);
|
||||
}
|
||||
|
||||
async function onSave() {
|
||||
emit('save', modelValue.value);
|
||||
}
|
||||
|
||||
async function onEdit() {
|
||||
emit('edit', modelValue.value);
|
||||
|
||||
await nextTick();
|
||||
|
||||
focusFirstInput();
|
||||
}
|
||||
|
||||
async function onDelete() {
|
||||
emit('delete', modelValue.value);
|
||||
}
|
||||
|
||||
function onValidate(key: string, value: boolean) {
|
||||
formValidationStatus.value[key] = value;
|
||||
}
|
||||
|
||||
function onUsageClick() {
|
||||
copyToClipboard(usage.value);
|
||||
showMessage({
|
||||
title: i18n.baseText('variables.row.usage.copiedToClipboard'),
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
|
||||
function focusFirstInput() {
|
||||
keyInputRef.value?.inputRef?.focus?.();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr :class="$style.variablesRow">
|
||||
<td class="variables-key-column">
|
||||
<div>
|
||||
<span v-if="!editing">{{ data.key }}</span>
|
||||
<n8n-form-input
|
||||
v-else
|
||||
label
|
||||
name="key"
|
||||
data-test-id="variable-row-key-input"
|
||||
:placeholder="i18n.baseText('variables.editing.key.placeholder')"
|
||||
required
|
||||
validateOnBlur
|
||||
:validationRules="keyValidationRules"
|
||||
v-model="modelValue.key"
|
||||
ref="keyInputRef"
|
||||
@validate="(value) => onValidate('key', value)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="variables-value-column">
|
||||
<div>
|
||||
<span v-if="!editing">{{ data.value }}</span>
|
||||
<n8n-form-input
|
||||
v-else
|
||||
label
|
||||
name="value"
|
||||
data-test-id="variable-row-value-input"
|
||||
:placeholder="i18n.baseText('variables.editing.value.placeholder')"
|
||||
validateOnBlur
|
||||
:validationRules="valueValidationRules"
|
||||
v-model="modelValue.value"
|
||||
ref="valueInputRef"
|
||||
@validate="(value) => onValidate('value', value)"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td class="variables-usage-column">
|
||||
<div>
|
||||
<n8n-tooltip placement="top">
|
||||
<span v-if="modelValue.key && usage" :class="$style.usageSyntax" @click="onUsageClick">{{
|
||||
usage
|
||||
}}</span>
|
||||
<template #content>
|
||||
{{ i18n.baseText('variables.row.usage.copyToClipboard') }}
|
||||
</template>
|
||||
</n8n-tooltip>
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="isFeatureEnabled">
|
||||
<div v-if="editing" :class="$style.buttons">
|
||||
<n8n-button
|
||||
data-test-id="variable-row-cancel-button"
|
||||
type="tertiary"
|
||||
class="mr-xs"
|
||||
@click="onCancel"
|
||||
>
|
||||
{{ i18n.baseText('variables.row.button.cancel') }}
|
||||
</n8n-button>
|
||||
<n8n-button
|
||||
data-test-id="variable-row-save-button"
|
||||
:disabled="!formValid"
|
||||
type="primary"
|
||||
@click="onSave"
|
||||
>
|
||||
{{ i18n.baseText('variables.row.button.save') }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
<div v-else :class="[$style.buttons, $style.hoverButtons]">
|
||||
<n8n-tooltip :disabled="permissions.edit" placement="top">
|
||||
<div>
|
||||
<n8n-button
|
||||
data-test-id="variable-row-edit-button"
|
||||
type="tertiary"
|
||||
class="mr-xs"
|
||||
:disabled="!permissions.edit"
|
||||
@click="onEdit"
|
||||
>
|
||||
{{ i18n.baseText('variables.row.button.edit') }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
<template #content>
|
||||
{{ i18n.baseText('variables.row.button.edit.onlyOwnerCanSave') }}
|
||||
</template>
|
||||
</n8n-tooltip>
|
||||
<n8n-tooltip :disabled="permissions.delete" placement="top">
|
||||
<div>
|
||||
<n8n-button
|
||||
data-test-id="variable-row-delete-button"
|
||||
type="tertiary"
|
||||
:disabled="!permissions.delete"
|
||||
@click="onDelete"
|
||||
>
|
||||
{{ i18n.baseText('variables.row.button.delete') }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
<template #content>
|
||||
{{ i18n.baseText('variables.row.button.delete.onlyOwnerCanDelete') }}
|
||||
</template>
|
||||
</n8n-tooltip>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.variablesRow {
|
||||
&:hover {
|
||||
.hoverButtons {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.hoverButtons {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.usageSyntax {
|
||||
cursor: pointer;
|
||||
background: var(--color-success-tint-2);
|
||||
color: var(--color-success);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: var(--font-size-s);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`VariablesRow > should render correctly 1`] = `
|
||||
"<tr class=\\"variablesRow\\">
|
||||
<td class=\\"variables-key-column\\">
|
||||
<div><span>key</span></div>
|
||||
</td>
|
||||
<td class=\\"variables-value-column\\">
|
||||
<div><span>value</span></div>
|
||||
</td>
|
||||
<td class=\\"variables-usage-column\\">
|
||||
<div>
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"usageSyntax\\">$vars.key</span></n8n-tooltip-stub>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class=\\"buttons hoverButtons\\">
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\">
|
||||
<div><button disabled=\\"disabled\\" aria-disabled=\\"true\\" aria-live=\\"polite\\" class=\\"mr-xs button button tertiary medium disabled\\" data-test-id=\\"variable-row-edit-button\\">
|
||||
<!----><span> Edit </span></button></div>
|
||||
</n8n-tooltip-stub>
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\">
|
||||
<div><button disabled=\\"disabled\\" aria-disabled=\\"true\\" aria-live=\\"polite\\" class=\\"button button tertiary medium disabled\\" data-test-id=\\"variable-row-delete-button\\">
|
||||
<!----><span> Delete </span></button></div>
|
||||
</n8n-tooltip-stub>
|
||||
</div>
|
||||
</td>
|
||||
</tr>"
|
||||
`;
|
||||
|
||||
exports[`VariablesRow > should show key and value inputs in edit mode 1`] = `
|
||||
"<tr class=\\"variablesRow\\">
|
||||
<td class=\\"variables-key-column\\">
|
||||
<div>
|
||||
<div class=\\"container\\" data-test-id=\\"variable-row-key-input\\">
|
||||
<!---->
|
||||
<div class=\\"\\">
|
||||
<div class=\\"el-input el-input--large n8n-input\\">
|
||||
<!----><input type=\\"text\\" autocomplete=\\"off\\" name=\\"key\\" placeholder=\\"Enter a name\\" class=\\"el-input__inner\\">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class=\\"variables-value-column\\">
|
||||
<div>
|
||||
<div class=\\"container\\" data-test-id=\\"variable-row-value-input\\">
|
||||
<!---->
|
||||
<div class=\\"\\">
|
||||
<div class=\\"el-input el-input--large n8n-input\\">
|
||||
<!----><input type=\\"text\\" autocomplete=\\"off\\" name=\\"value\\" placeholder=\\"Enter a value\\" class=\\"el-input__inner\\">
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class=\\"variables-usage-column\\">
|
||||
<div>
|
||||
<n8n-tooltip-stub justifybuttons=\\"flex-end\\" buttons=\\"\\" placement=\\"top\\"><span class=\\"usageSyntax\\">$vars.key</span></n8n-tooltip-stub>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class=\\"buttons\\"><button aria-live=\\"polite\\" class=\\"mr-xs button button tertiary medium\\" data-test-id=\\"variable-row-cancel-button\\">
|
||||
<!----><span> Cancel </span></button><button aria-live=\\"polite\\" class=\\"button button primary medium\\" data-test-id=\\"variable-row-save-button\\">
|
||||
<!----><span> Save </span></button></div>
|
||||
</td>
|
||||
</tr>"
|
||||
`;
|
||||
|
|
@ -1,5 +1,18 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
overflow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="$style.wrapper">
|
||||
<div :class="{ [$style.wrapper]: true, [$style.overflow]: overflow }">
|
||||
<div :class="$style.list">
|
||||
<div v-if="$slots.header" :class="$style.header">
|
||||
<slot name="header" />
|
||||
|
|
@ -18,6 +31,14 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.overflow {
|
||||
.list {
|
||||
.body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -8,14 +8,17 @@
|
|||
</div>
|
||||
|
||||
<div class="mt-xs mb-l">
|
||||
<slot name="add-button">
|
||||
<n8n-button
|
||||
size="large"
|
||||
block
|
||||
:disabled="disabled"
|
||||
@click="$emit('click:add', $event)"
|
||||
data-test-id="resources-list-add"
|
||||
>
|
||||
{{ $locale.baseText(`${resourceKey}.add`) }}
|
||||
</n8n-button>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
|
||||
|
|
@ -55,7 +58,7 @@
|
|||
/>
|
||||
</slot>
|
||||
</div>
|
||||
<page-view-layout-list v-else>
|
||||
<page-view-layout-list :overflow="type !== 'list'" v-else>
|
||||
<template #header>
|
||||
<div class="mb-xs">
|
||||
<div :class="$style['filters-row']">
|
||||
|
|
@ -75,23 +78,14 @@
|
|||
<div :class="$style['sort-and-filter']">
|
||||
<n8n-select v-model="sortBy" size="medium" data-test-id="resources-list-sort">
|
||||
<n8n-option
|
||||
value="lastUpdated"
|
||||
:label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"
|
||||
/>
|
||||
<n8n-option
|
||||
value="lastCreated"
|
||||
:label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"
|
||||
/>
|
||||
<n8n-option
|
||||
value="nameAsc"
|
||||
:label="$locale.baseText(`${resourceKey}.sort.nameAsc`)"
|
||||
/>
|
||||
<n8n-option
|
||||
value="nameDesc"
|
||||
:label="$locale.baseText(`${resourceKey}.sort.nameDesc`)"
|
||||
v-for="sortOption in sortOptions"
|
||||
:key="sortOption"
|
||||
:value="sortOption"
|
||||
:label="$locale.baseText(`${resourceKey}.sort.${sortOption}`)"
|
||||
/>
|
||||
</n8n-select>
|
||||
<resource-filters-dropdown
|
||||
v-if="showFiltersDropdown"
|
||||
:keys="filterKeys"
|
||||
:reset="resetFilters"
|
||||
:value="filters"
|
||||
|
|
@ -121,18 +115,41 @@
|
|||
<div class="pb-xs" />
|
||||
</template>
|
||||
|
||||
<n8n-recycle-scroller
|
||||
<slot name="preamble" />
|
||||
|
||||
<div
|
||||
v-if="filteredAndSortedSubviewResources.length > 0"
|
||||
:class="$style.listWrapper"
|
||||
ref="listWrapperRef"
|
||||
>
|
||||
<n8n-recycle-scroller
|
||||
v-if="type === 'list'"
|
||||
data-test-id="resources-list"
|
||||
:class="[$style.list, 'list-style-none']"
|
||||
:items="filteredAndSortedSubviewResources"
|
||||
:item-size="itemSize"
|
||||
:item-size="typeProps.itemSize"
|
||||
item-key="id"
|
||||
>
|
||||
<template #default="{ item, updateItemSize }">
|
||||
<slot :data="item" :updateItemSize="updateItemSize" />
|
||||
</template>
|
||||
</n8n-recycle-scroller>
|
||||
<n8n-datatable
|
||||
v-if="typeProps.columns"
|
||||
data-test-id="resources-table"
|
||||
:class="$style.datatable"
|
||||
:columns="typeProps.columns"
|
||||
:rows="filteredAndSortedSubviewResources"
|
||||
:currentPage="currentPage"
|
||||
:rowsPerPage="rowsPerPage"
|
||||
@update:currentPage="setCurrentPage"
|
||||
@update:rowsPerPage="setRowsPerPage"
|
||||
>
|
||||
<template #row="{ columns, row }">
|
||||
<slot :data="row" :columns="columns" />
|
||||
</template>
|
||||
</n8n-datatable>
|
||||
</div>
|
||||
|
||||
<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
|
||||
{{ $locale.baseText(`${resourceKey}.noResults`) }}
|
||||
|
|
@ -156,6 +173,8 @@
|
|||
</span>
|
||||
</template>
|
||||
</n8n-text>
|
||||
|
||||
<slot name="postamble" />
|
||||
</page-view-layout-list>
|
||||
</template>
|
||||
</page-view-layout>
|
||||
|
|
@ -177,6 +196,7 @@ import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.
|
|||
import { mapStores } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { useUsersStore } from '@/stores/users';
|
||||
import { DatatableColumn } from 'n8n-design-system';
|
||||
|
||||
export interface IResource {
|
||||
id: string;
|
||||
|
|
@ -213,13 +233,17 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
type: String,
|
||||
default: '' as IResourceKeyType,
|
||||
},
|
||||
displayName: {
|
||||
type: Function as PropType<(resource: IResource) => string>,
|
||||
default: (resource: IResource) => resource.name,
|
||||
},
|
||||
resources: {
|
||||
type: Array,
|
||||
default: (): IResource[] => [],
|
||||
},
|
||||
itemSize: {
|
||||
type: Number,
|
||||
default: 80,
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialize: {
|
||||
type: Function as PropType<() => Promise<void>>,
|
||||
|
|
@ -240,13 +264,37 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showFiltersDropdown: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
sortFns: {
|
||||
type: Object as PropType<Record<string, (a: IResource, b: IResource) => number>>,
|
||||
default: (): Record<string, (a: IResource, b: IResource) => number> => ({}),
|
||||
},
|
||||
sortOptions: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => ['lastUpdated', 'lastCreated', 'nameAsc', 'nameDesc'],
|
||||
},
|
||||
type: {
|
||||
type: String as PropType<'datatable' | 'list'>,
|
||||
default: 'list',
|
||||
},
|
||||
typeProps: {
|
||||
type: Object as PropType<{ itemSize: number } | { columns: DatatableColumn[] }>,
|
||||
default: () => ({
|
||||
itemSize: 0,
|
||||
}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isOwnerSubview: false,
|
||||
sortBy: 'lastUpdated',
|
||||
sortBy: this.sortOptions[0],
|
||||
hasFilters: false,
|
||||
currentPage: 1,
|
||||
rowsPerPage: 10 as number | '*',
|
||||
resettingFilters: false,
|
||||
EnterpriseEditionFeature,
|
||||
};
|
||||
|
|
@ -292,7 +340,7 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
if (this.filters.search) {
|
||||
const searchString = this.filters.search.toLowerCase();
|
||||
|
||||
matches = matches && resource.name.toLowerCase().includes(searchString);
|
||||
matches = matches && this.displayName(resource).toLowerCase().includes(searchString);
|
||||
}
|
||||
|
||||
if (this.additionalFiltersHandler) {
|
||||
|
|
@ -305,15 +353,23 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
return filtered.sort((a, b) => {
|
||||
switch (this.sortBy) {
|
||||
case 'lastUpdated':
|
||||
return new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
|
||||
return this.sortFns['lastUpdated']
|
||||
? this.sortFns['lastUpdated'](a, b)
|
||||
: new Date(b.updatedAt).valueOf() - new Date(a.updatedAt).valueOf();
|
||||
case 'lastCreated':
|
||||
return new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
|
||||
return this.sortFns['lastCreated']
|
||||
? this.sortFns['lastCreated'](a, b)
|
||||
: new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf();
|
||||
case 'nameAsc':
|
||||
return a.name.trim().localeCompare(b.name.trim());
|
||||
return this.sortFns['nameAsc']
|
||||
? this.sortFns['nameAsc'](a, b)
|
||||
: this.displayName(a).trim().localeCompare(this.displayName(b).trim());
|
||||
case 'nameDesc':
|
||||
return b.name.localeCompare(a.name);
|
||||
return this.sortFns['nameDesc']
|
||||
? this.sortFns['nameDesc'](a, b)
|
||||
: this.displayName(b).trim().localeCompare(this.displayName(a).trim());
|
||||
default:
|
||||
return 0;
|
||||
return this.sortFns[this.sortBy] ? this.sortFns[this.sortBy](a, b) : 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -333,6 +389,12 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
this.loading = false;
|
||||
this.$nextTick(this.focusSearchInput);
|
||||
},
|
||||
setCurrentPage(page: number) {
|
||||
this.currentPage = page;
|
||||
},
|
||||
setRowsPerPage(rowsPerPage: number | '*') {
|
||||
this.rowsPerPage = rowsPerPage;
|
||||
},
|
||||
resetFilters() {
|
||||
Object.keys(this.filters).forEach((key) => {
|
||||
this.filters[key] = Array.isArray(this.filters[key]) ? [] : '';
|
||||
|
|
@ -418,7 +480,8 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
'filters.search'() {
|
||||
this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true }, 'search');
|
||||
},
|
||||
sortBy() {
|
||||
sortBy(newValue) {
|
||||
this.$emit('sort', newValue);
|
||||
this.sendSortingTelemetry();
|
||||
},
|
||||
},
|
||||
|
|
@ -446,6 +509,10 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
//flex-direction: column;
|
||||
}
|
||||
|
||||
.listWrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sort-and-filter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -460,4 +527,8 @@ export default mixins(showMessage, debounceHelper).extend({
|
|||
.card-loading {
|
||||
height: 69px;
|
||||
}
|
||||
|
||||
.datatable {
|
||||
padding-bottom: var(--spacing-s);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
8
packages/editor-ui/src/composables/index.ts
Normal file
8
packages/editor-ui/src/composables/index.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export * from './useCopyToClipboard';
|
||||
export * from './useExternalHooks';
|
||||
export * from './useGlobalLinkActions';
|
||||
export * from './useI18n';
|
||||
export * from './useMessage';
|
||||
export * from './useTelemetry';
|
||||
export * from './useToast';
|
||||
export * from './useUpgradeLink';
|
||||
5
packages/editor-ui/src/composables/useCopyToClipboard.ts
Normal file
5
packages/editor-ui/src/composables/useCopyToClipboard.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import copyToClipboard from 'copy-to-clipboard';
|
||||
|
||||
export function useCopyToClipboard(): (text: string) => void {
|
||||
return copyToClipboard;
|
||||
}
|
||||
12
packages/editor-ui/src/composables/useExternalHooks.ts
Normal file
12
packages/editor-ui/src/composables/useExternalHooks.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { IExternalHooks } from '@/Interface';
|
||||
import { IDataObject } from 'n8n-workflow';
|
||||
import { useWebhooksStore } from '@/stores';
|
||||
import { runExternalHook } from '@/mixins/externalHooks';
|
||||
|
||||
export function useExternalHooks(): IExternalHooks {
|
||||
return {
|
||||
async run(eventName: string, metadata?: IDataObject): Promise<void> {
|
||||
return await runExternalHook.call(this, eventName, useWebhooksStore(), metadata);
|
||||
},
|
||||
};
|
||||
}
|
||||
5
packages/editor-ui/src/composables/useI18n.ts
Normal file
5
packages/editor-ui/src/composables/useI18n.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { i18n } from '@/plugins/i18n';
|
||||
|
||||
export function useI18n() {
|
||||
return i18n;
|
||||
}
|
||||
65
packages/editor-ui/src/composables/useMessage.ts
Normal file
65
packages/editor-ui/src/composables/useMessage.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import type { ElMessageBoxOptions } from 'element-ui/types/message-box';
|
||||
import { Message, MessageBox } from 'element-ui';
|
||||
|
||||
export function useMessage() {
|
||||
async function alert(
|
||||
message: string,
|
||||
configOrTitle: string | ElMessageBoxOptions | undefined,
|
||||
config: ElMessageBoxOptions | undefined,
|
||||
) {
|
||||
const resolvedConfig = {
|
||||
...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
|
||||
cancelButtonClass: 'btn--cancel',
|
||||
confirmButtonClass: 'btn--confirm',
|
||||
};
|
||||
|
||||
if (typeof configOrTitle === 'string') {
|
||||
return await MessageBox.alert(message, configOrTitle, resolvedConfig);
|
||||
}
|
||||
return await MessageBox.alert(message, resolvedConfig);
|
||||
}
|
||||
|
||||
async function confirm(
|
||||
message: string,
|
||||
configOrTitle: string | ElMessageBoxOptions | undefined,
|
||||
config: ElMessageBoxOptions | undefined,
|
||||
) {
|
||||
const resolvedConfig = {
|
||||
...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
|
||||
cancelButtonClass: 'btn--cancel',
|
||||
confirmButtonClass: 'btn--confirm',
|
||||
distinguishCancelAndClose: true,
|
||||
showClose: config?.showClose || false,
|
||||
closeOnClickModal: false,
|
||||
};
|
||||
|
||||
if (typeof configOrTitle === 'string') {
|
||||
return await MessageBox.confirm(message, configOrTitle, resolvedConfig);
|
||||
}
|
||||
return await MessageBox.confirm(message, resolvedConfig);
|
||||
}
|
||||
|
||||
async function prompt(
|
||||
message: string,
|
||||
configOrTitle: string | ElMessageBoxOptions | undefined,
|
||||
config: ElMessageBoxOptions | undefined,
|
||||
) {
|
||||
const resolvedConfig = {
|
||||
...(config || (typeof configOrTitle === 'object' ? configOrTitle : {})),
|
||||
cancelButtonClass: 'btn--cancel',
|
||||
confirmButtonClass: 'btn--confirm',
|
||||
};
|
||||
|
||||
if (typeof configOrTitle === 'string') {
|
||||
return await MessageBox.prompt(message, configOrTitle, resolvedConfig);
|
||||
}
|
||||
return await MessageBox.prompt(message, resolvedConfig);
|
||||
}
|
||||
|
||||
return {
|
||||
alert,
|
||||
confirm,
|
||||
prompt,
|
||||
message: Message,
|
||||
};
|
||||
}
|
||||
5
packages/editor-ui/src/composables/useTelemetry.ts
Normal file
5
packages/editor-ui/src/composables/useTelemetry.ts
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import { Telemetry, telemetry } from '@/plugins/telemetry';
|
||||
|
||||
export function useTelemetry(): Telemetry {
|
||||
return telemetry;
|
||||
}
|
||||
142
packages/editor-ui/src/composables/useToast.ts
Normal file
142
packages/editor-ui/src/composables/useToast.ts
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
import { Notification } from 'element-ui';
|
||||
import type { ElNotificationComponent, ElNotificationOptions } from 'element-ui/types/notification';
|
||||
import type { MessageType } from 'element-ui/types/message';
|
||||
import { sanitizeHtml } from '@/utils';
|
||||
import { useTelemetry } from '@/composables/useTelemetry';
|
||||
import { useWorkflowsStore } from '@/stores';
|
||||
import { useI18n } from './useI18n';
|
||||
import { useExternalHooks } from './useExternalHooks';
|
||||
|
||||
const messageDefaults: Partial<Omit<ElNotificationOptions, 'message'>> = {
|
||||
dangerouslyUseHTMLString: true,
|
||||
position: 'bottom-right',
|
||||
};
|
||||
|
||||
const stickyNotificationQueue: ElNotificationComponent[] = [];
|
||||
|
||||
export function useToast() {
|
||||
const telemetry = useTelemetry();
|
||||
const workflowsStore = useWorkflowsStore();
|
||||
const externalHooks = useExternalHooks();
|
||||
const i18n = useI18n();
|
||||
|
||||
function showMessage(
|
||||
messageData: Omit<ElNotificationOptions, 'message'> & { message?: string },
|
||||
track = true,
|
||||
) {
|
||||
messageData = { ...messageDefaults, ...messageData };
|
||||
messageData.message = messageData.message
|
||||
? sanitizeHtml(messageData.message)
|
||||
: messageData.message;
|
||||
|
||||
const notification = Notification(messageData as ElNotificationOptions);
|
||||
|
||||
if (messageData.duration === 0) {
|
||||
stickyNotificationQueue.push(notification);
|
||||
}
|
||||
|
||||
if (messageData.type === 'error' && track) {
|
||||
telemetry.track('Instance FE emitted error', {
|
||||
error_title: messageData.title,
|
||||
error_message: messageData.message,
|
||||
workflow_id: workflowsStore.workflowId,
|
||||
});
|
||||
}
|
||||
|
||||
return notification;
|
||||
}
|
||||
|
||||
function showToast(config: {
|
||||
title: string;
|
||||
message: string;
|
||||
onClick?: () => void;
|
||||
onClose?: () => void;
|
||||
duration?: number;
|
||||
customClass?: string;
|
||||
closeOnClick?: boolean;
|
||||
type?: MessageType;
|
||||
}) {
|
||||
// eslint-disable-next-line prefer-const
|
||||
let notification: ElNotificationComponent;
|
||||
if (config.closeOnClick) {
|
||||
const cb = config.onClick;
|
||||
config.onClick = () => {
|
||||
if (notification) {
|
||||
notification.close();
|
||||
}
|
||||
|
||||
if (cb) {
|
||||
cb();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
notification = showMessage({
|
||||
title: config.title,
|
||||
message: config.message,
|
||||
onClick: config.onClick,
|
||||
onClose: config.onClose,
|
||||
duration: config.duration,
|
||||
customClass: config.customClass,
|
||||
type: config.type,
|
||||
});
|
||||
|
||||
return notification;
|
||||
}
|
||||
|
||||
function collapsableDetails({ description, node }: Error) {
|
||||
if (!description) return '';
|
||||
|
||||
const errorDescription =
|
||||
description.length > 500 ? `${description.slice(0, 500)}...` : description;
|
||||
|
||||
return `
|
||||
<br>
|
||||
<br>
|
||||
<details>
|
||||
<summary
|
||||
style="color: #ff6d5a; font-weight: bold; cursor: pointer;"
|
||||
>
|
||||
${i18n.baseText('showMessage.showDetails')}
|
||||
</summary>
|
||||
<p>${node.name}: ${errorDescription}</p>
|
||||
</details>
|
||||
`;
|
||||
}
|
||||
|
||||
function showError(e: Error | unknown, title: string, message?: string) {
|
||||
const error = e as Error;
|
||||
const messageLine = message ? `${message}<br/>` : '';
|
||||
showMessage(
|
||||
{
|
||||
title,
|
||||
message: `
|
||||
${messageLine}
|
||||
<i>${error.message}</i>
|
||||
${collapsableDetails(error)}`,
|
||||
type: 'error',
|
||||
duration: 0,
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
externalHooks.run('showMessage.showError', {
|
||||
title,
|
||||
message,
|
||||
errorMessage: error.message,
|
||||
});
|
||||
|
||||
telemetry.track('Instance FE emitted error', {
|
||||
error_title: title,
|
||||
error_description: message,
|
||||
error_message: error.message,
|
||||
workflow_id: workflowsStore.workflowId,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
showMessage,
|
||||
showToast,
|
||||
showError,
|
||||
};
|
||||
}
|
||||
25
packages/editor-ui/src/composables/useUpgradeLink.ts
Normal file
25
packages/editor-ui/src/composables/useUpgradeLink.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { BaseTextKey } from '@/plugins/i18n';
|
||||
import { useUIStore, useUsageStore } from '@/stores';
|
||||
import { useI18n } from '@/composables';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export function useUpgradeLink(queryParams = { default: '', desktop: '' }) {
|
||||
const uiStore = useUIStore();
|
||||
const usageStore = useUsageStore();
|
||||
const i18n = useI18n();
|
||||
|
||||
const upgradeLinkUrl = computed(() => {
|
||||
const linkUrlTranslationKey = uiStore.contextBasedTranslationKeys.upgradeLinkUrl as BaseTextKey;
|
||||
let url = i18n.baseText(linkUrlTranslationKey);
|
||||
|
||||
if (linkUrlTranslationKey.endsWith('.upgradeLinkUrl')) {
|
||||
url = `${usageStore.viewPlansUrl}${queryParams.default}`;
|
||||
} else if (linkUrlTranslationKey.endsWith('.desktop')) {
|
||||
url = `${url}${queryParams.desktop}`;
|
||||
}
|
||||
|
||||
return url;
|
||||
});
|
||||
|
||||
return { upgradeLinkUrl };
|
||||
}
|
||||
|
|
@ -371,6 +371,7 @@ export enum VIEWS {
|
|||
TEMPLATE = 'TemplatesWorkflowView',
|
||||
TEMPLATES = 'TemplatesSearchView',
|
||||
CREDENTIALS = 'CredentialsView',
|
||||
VARIABLES = 'VariablesView',
|
||||
NEW_WORKFLOW = 'NodeViewNew',
|
||||
WORKFLOW = 'NodeViewExisting',
|
||||
DEMO = 'WorkflowDemo',
|
||||
|
|
@ -434,6 +435,7 @@ export const MAPPING_PARAMS = [
|
|||
'$resumeWebhookUrl',
|
||||
'$runIndex',
|
||||
'$today',
|
||||
'$vars',
|
||||
'$workflow',
|
||||
];
|
||||
|
||||
|
|
@ -457,6 +459,7 @@ export enum EnterpriseEditionFeature {
|
|||
Sharing = 'sharing',
|
||||
Ldap = 'ldap',
|
||||
LogStreaming = 'logStreaming',
|
||||
Variables = 'variables',
|
||||
Saml = 'saml',
|
||||
}
|
||||
export const MAIN_NODE_PANEL_WIDTH = 360;
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ import { useWorkflowsEEStore } from '@/stores/workflows.ee';
|
|||
import { useUsersStore } from '@/stores/users';
|
||||
import { getWorkflowPermissions, IPermissions } from '@/permissions';
|
||||
import { ICredentialsResponse } from '@/Interface';
|
||||
import { useEnvironmentsStore } from '@/stores';
|
||||
|
||||
let cachedWorkflowKey: string | null = '';
|
||||
let cachedWorkflow: Workflow | null = null;
|
||||
|
|
@ -150,6 +151,7 @@ export function resolveParameter(
|
|||
mode: 'test',
|
||||
resumeUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
|
||||
},
|
||||
$vars: useEnvironmentsStore().variablesAsObject,
|
||||
|
||||
// deprecated
|
||||
$executionId: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,13 @@
|
|||
* @usage getCredentialPermissions(user, credential).isOwner;
|
||||
*/
|
||||
|
||||
import { IUser, ICredentialsResponse, IRootState, IWorkflowDb } from '@/Interface';
|
||||
import {
|
||||
IUser,
|
||||
ICredentialsResponse,
|
||||
IRootState,
|
||||
IWorkflowDb,
|
||||
EnvironmentVariable,
|
||||
} from '@/Interface';
|
||||
import { EnterpriseEditionFeature, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
|
||||
import { useSettingsStore } from './stores/settings';
|
||||
|
||||
|
|
@ -130,3 +136,23 @@ export const getWorkflowPermissions = (user: IUser | null, workflow: IWorkflowDb
|
|||
|
||||
return parsePermissionsTable(user, table);
|
||||
};
|
||||
|
||||
export const getVariablesPermissions = (user: IUser | null) => {
|
||||
const table: IPermissionsTable = [
|
||||
{
|
||||
name: 'create',
|
||||
test: [UserRole.InstanceOwner],
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
test: [UserRole.InstanceOwner],
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
test: [UserRole.InstanceOwner],
|
||||
},
|
||||
{ name: 'use', test: () => true },
|
||||
];
|
||||
|
||||
return parsePermissionsTable(user, table);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -28,6 +28,7 @@ import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
|
|||
import CredentialsView from '@/views/CredentialsView.vue';
|
||||
import ExecutionsView from '@/views/ExecutionsView.vue';
|
||||
import WorkflowsView from '@/views/WorkflowsView.vue';
|
||||
import VariablesView from '@/views/VariablesView.vue';
|
||||
import { IPermissions } from './Interface';
|
||||
import { LOGIN_STATUS, ROLE } from '@/utils';
|
||||
import { RouteConfigSingleView } from 'vue-router/types/router';
|
||||
|
|
@ -178,6 +179,21 @@ export const routes = [
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/variables',
|
||||
name: VIEWS.VARIABLES,
|
||||
components: {
|
||||
default: VariablesView,
|
||||
sidebar: MainSidebar,
|
||||
},
|
||||
meta: {
|
||||
permissions: {
|
||||
allow: {
|
||||
loginStatus: [LOGIN_STATUS.LoggedIn],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/executions',
|
||||
name: VIEWS.EXECUTIONS,
|
||||
|
|
|
|||
99
packages/editor-ui/src/stores/__tests__/environments.spec.ts
Normal file
99
packages/editor-ui/src/stores/__tests__/environments.spec.ts
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { afterAll, beforeAll } from 'vitest';
|
||||
import { setActivePinia, createPinia } from 'pinia';
|
||||
import { setupServer } from '@/__tests__/server';
|
||||
import { useEnvironmentsStore } from '@/stores/environments.ee';
|
||||
import { EnvironmentVariable } from '@/Interface';
|
||||
|
||||
describe('store', () => {
|
||||
let server: ReturnType<typeof setupServer>;
|
||||
const seedRecordsCount = 3;
|
||||
|
||||
beforeAll(() => {
|
||||
server = setupServer();
|
||||
server.createList('variable', seedRecordsCount);
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia());
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
server.shutdown();
|
||||
});
|
||||
|
||||
describe('variables', () => {
|
||||
describe('fetchAllVariables()', () => {
|
||||
it('should fetch all credentials', async () => {
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
await environmentsStore.fetchAllVariables();
|
||||
|
||||
expect(environmentsStore.variables).toHaveLength(seedRecordsCount);
|
||||
});
|
||||
});
|
||||
|
||||
describe('createVariable()', () => {
|
||||
it('should store a new variable', async () => {
|
||||
const variable: Omit<EnvironmentVariable, 'id'> = {
|
||||
key: 'ENV_VAR',
|
||||
value: 'SECRET',
|
||||
};
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
|
||||
await environmentsStore.fetchAllVariables();
|
||||
const recordsCount = environmentsStore.variables.length;
|
||||
|
||||
expect(environmentsStore.variables).toHaveLength(recordsCount);
|
||||
|
||||
await environmentsStore.createVariable(variable);
|
||||
|
||||
expect(environmentsStore.variables).toHaveLength(recordsCount + 1);
|
||||
expect(environmentsStore.variables[0]).toMatchObject(variable);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateVariable()', () => {
|
||||
it('should update an existing variable', async () => {
|
||||
const updateValue: Partial<EnvironmentVariable> = {
|
||||
key: 'ENV_VAR',
|
||||
value: 'SECRET',
|
||||
};
|
||||
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
await environmentsStore.fetchAllVariables();
|
||||
|
||||
await environmentsStore.updateVariable({
|
||||
...environmentsStore.variables[0],
|
||||
...updateValue,
|
||||
});
|
||||
|
||||
expect(environmentsStore.variables[0]).toMatchObject(updateValue);
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteVariable()', () => {
|
||||
it('should delete an existing variable', async () => {
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
await environmentsStore.fetchAllVariables();
|
||||
const recordsCount = environmentsStore.variables.length;
|
||||
|
||||
await environmentsStore.deleteVariable(environmentsStore.variables[0]);
|
||||
|
||||
expect(environmentsStore.variables).toHaveLength(recordsCount - 1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('variablesAsObject', () => {
|
||||
it('should return variables as a key-value object', async () => {
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
await environmentsStore.fetchAllVariables();
|
||||
|
||||
expect(environmentsStore.variablesAsObject).toEqual(
|
||||
environmentsStore.variables.reduce<Record<string, string>>((acc, variable) => {
|
||||
acc[variable.key] = variable.value;
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
65
packages/editor-ui/src/stores/environments.ee.ts
Normal file
65
packages/editor-ui/src/stores/environments.ee.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { computed, ref } from 'vue';
|
||||
import { EnvironmentVariable } from '@/Interface';
|
||||
import * as environmentsApi from '@/api/environments.ee';
|
||||
import { useRootStore } from '@/stores/n8nRootStore';
|
||||
import { createVariable } from '@/api/environments.ee';
|
||||
|
||||
export const useEnvironmentsStore = defineStore('environments', () => {
|
||||
const rootStore = useRootStore();
|
||||
|
||||
const variables = ref<EnvironmentVariable[]>([]);
|
||||
|
||||
async function fetchAllVariables() {
|
||||
const data = await environmentsApi.getVariables(rootStore.getRestApiContext);
|
||||
|
||||
variables.value = data;
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async function createVariable(variable: Omit<EnvironmentVariable, 'id'>) {
|
||||
const data = await environmentsApi.createVariable(rootStore.getRestApiContext, variable);
|
||||
|
||||
variables.value.unshift(data);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async function updateVariable(variable: EnvironmentVariable) {
|
||||
const data = await environmentsApi.updateVariable(rootStore.getRestApiContext, variable);
|
||||
|
||||
variables.value = variables.value.map((v) => (v.id === data.id ? data : v));
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async function deleteVariable(variable: EnvironmentVariable) {
|
||||
const data = await environmentsApi.deleteVariable(rootStore.getRestApiContext, {
|
||||
id: variable.id,
|
||||
});
|
||||
|
||||
variables.value = variables.value.filter((v) => v.id !== variable.id);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const variablesAsObject = computed(() =>
|
||||
variables.value.reduce<Record<string, string | boolean | number>>((acc, variable) => {
|
||||
acc[variable.key] = variable.value;
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
|
||||
return {
|
||||
variables,
|
||||
variablesAsObject,
|
||||
fetchAllVariables,
|
||||
createVariable,
|
||||
updateVariable,
|
||||
deleteVariable,
|
||||
};
|
||||
});
|
||||
|
||||
export default useEnvironmentsStore;
|
||||
23
packages/editor-ui/src/stores/index.ts
Normal file
23
packages/editor-ui/src/stores/index.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
export * from './canvas';
|
||||
export * from './communityNodes';
|
||||
export * from './credentials';
|
||||
export * from './environments.ee';
|
||||
export * from './history';
|
||||
export * from './logStreamingStore';
|
||||
export * from './n8nRootStore';
|
||||
export * from './ndv';
|
||||
export * from './nodeCreator';
|
||||
export * from './nodeTypes';
|
||||
export * from './posthog';
|
||||
export * from './segment';
|
||||
export * from './settings';
|
||||
export * from './tags';
|
||||
export * from './telemetry';
|
||||
export * from './templates';
|
||||
export * from './ui';
|
||||
export * from './usage';
|
||||
export * from './users';
|
||||
export * from './versions';
|
||||
export * from './webhooks';
|
||||
export * from './workflows.ee';
|
||||
export * from './workflows';
|
||||
|
|
@ -215,6 +215,14 @@ export const useUIStore = defineStore(STORES.UI, {
|
|||
},
|
||||
},
|
||||
},
|
||||
variables: {
|
||||
unavailable: {
|
||||
title: `contextual.variables.unavailable.title${contextKey}`,
|
||||
description: 'contextual.variables.unavailable.description',
|
||||
action: `contextual.variables.unavailable.action${contextKey}`,
|
||||
button: `contextual.variables.unavailable.button${contextKey}`,
|
||||
},
|
||||
},
|
||||
users: {
|
||||
settings: {
|
||||
unavailable: {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,12 @@
|
|||
.cm-tooltip-autocomplete {
|
||||
background-color: var(--color-background-xlight) !important;
|
||||
|
||||
.cm-tooltip {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
li .cm-completionLabel {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:initialize="initialize"
|
||||
:filters="filters"
|
||||
:additional-filters-handler="onFilter"
|
||||
:item-size="77"
|
||||
:type-props="{ itemSize: 77 }"
|
||||
@click:add="addCredential"
|
||||
@update:filters="filters = $event"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ import {
|
|||
TelemetryHelpers,
|
||||
Workflow,
|
||||
} from 'n8n-workflow';
|
||||
import {
|
||||
import type {
|
||||
ICredentialsResponse,
|
||||
IExecutionResponse,
|
||||
IWorkflowDb,
|
||||
|
|
@ -277,7 +277,8 @@ import { useCredentialsStore } from '@/stores/credentials';
|
|||
import { useTagsStore } from '@/stores/tags';
|
||||
import { useNodeCreatorStore } from '@/stores/nodeCreator';
|
||||
import { useCanvasStore } from '@/stores/canvas';
|
||||
import useWorkflowsEEStore from '@/stores/workflows.ee';
|
||||
import { useWorkflowsEEStore } from '@/stores/workflows.ee';
|
||||
import { useEnvironmentsStore } from '@/stores';
|
||||
import * as NodeViewUtils from '@/utils/nodeViewUtils';
|
||||
import { getAccountAge, getConnectionInfo, getNodeViewTab } from '@/utils';
|
||||
import { useHistoryStore } from '@/stores/history';
|
||||
|
|
@ -470,6 +471,7 @@ export default mixins(
|
|||
useWorkflowsStore,
|
||||
useUsersStore,
|
||||
useNodeCreatorStore,
|
||||
useEnvironmentsStore,
|
||||
useWorkflowsEEStore,
|
||||
useHistoryStore,
|
||||
),
|
||||
|
|
@ -3627,6 +3629,9 @@ export default mixins(
|
|||
async loadCredentials(): Promise<void> {
|
||||
await this.credentialsStore.fetchAllCredentials();
|
||||
},
|
||||
async loadVariables(): Promise<void> {
|
||||
await this.environmentsStore.fetchAllVariables();
|
||||
},
|
||||
async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
|
||||
const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
|
||||
|
||||
|
|
@ -3882,6 +3887,7 @@ export default mixins(
|
|||
this.loadCredentials(),
|
||||
this.loadCredentialTypes(),
|
||||
];
|
||||
this.loadVariables();
|
||||
|
||||
if (this.nodeTypesStore.allNodeTypes.length === 0) {
|
||||
loadPromises.push(this.loadNodeTypes());
|
||||
|
|
|
|||
338
packages/editor-ui/src/views/VariablesView.vue
Normal file
338
packages/editor-ui/src/views/VariablesView.vue
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useEnvironmentsStore, useUIStore, useSettingsStore, useUsersStore } from '@/stores';
|
||||
import { useI18n, useTelemetry, useToast, useUpgradeLink, useMessage } from '@/composables';
|
||||
|
||||
import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
|
||||
import VariablesRow from '@/components/VariablesRow.vue';
|
||||
|
||||
import { EnterpriseEditionFeature } from '@/constants';
|
||||
import { DatatableColumn, EnvironmentVariable, TemporaryEnvironmentVariable } from '@/Interface';
|
||||
import { uid } from 'n8n-design-system/utils';
|
||||
import { getVariablesPermissions } from '@/permissions';
|
||||
|
||||
const settingsStore = useSettingsStore();
|
||||
const environmentsStore = useEnvironmentsStore();
|
||||
const usersStore = useUsersStore();
|
||||
const uiStore = useUIStore();
|
||||
const telemetry = useTelemetry();
|
||||
const i18n = useI18n();
|
||||
const message = useMessage();
|
||||
|
||||
const layoutRef = ref<InstanceType<typeof ResourcesListLayout> | null>(null);
|
||||
|
||||
const { showError } = useToast();
|
||||
|
||||
const TEMPORARY_VARIABLE_UID_BASE = '@tmpvar';
|
||||
|
||||
const allVariables = ref<Array<EnvironmentVariable | TemporaryEnvironmentVariable>>([]);
|
||||
const editMode = ref<Record<string, boolean>>({});
|
||||
|
||||
const permissions = getVariablesPermissions(usersStore.currentUser);
|
||||
|
||||
const isFeatureEnabled = computed(() =>
|
||||
settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Variables),
|
||||
);
|
||||
const canCreateVariables = computed(() => isFeatureEnabled.value && permissions.create);
|
||||
|
||||
const datatableColumns = computed<DatatableColumn[]>(() => [
|
||||
{
|
||||
id: 0,
|
||||
path: 'name',
|
||||
label: i18n.baseText('variables.table.key'),
|
||||
classes: ['variables-key-column'],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
path: 'value',
|
||||
label: i18n.baseText('variables.table.value'),
|
||||
classes: ['variables-value-column'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
path: 'usage',
|
||||
label: i18n.baseText('variables.table.usage'),
|
||||
classes: ['variables-usage-column'],
|
||||
},
|
||||
...(isFeatureEnabled.value
|
||||
? [
|
||||
{
|
||||
id: 3,
|
||||
path: 'actions',
|
||||
label: '',
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]);
|
||||
|
||||
const contextBasedTranslationKeys = computed(() => uiStore.contextBasedTranslationKeys);
|
||||
const { upgradeLinkUrl } = useUpgradeLink({
|
||||
default: '&source=variables',
|
||||
desktop: '&utm_campaign=upgrade-variables',
|
||||
});
|
||||
|
||||
const newlyAddedVariableIds = ref<number[]>([]);
|
||||
|
||||
const nameSortFn = (a: EnvironmentVariable, b: EnvironmentVariable, direction: 'asc' | 'desc') => {
|
||||
if (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
|
||||
return -1;
|
||||
} else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
|
||||
return 1;
|
||||
} else if (
|
||||
newlyAddedVariableIds.value.includes(a.id) &&
|
||||
newlyAddedVariableIds.value.includes(b.id)
|
||||
) {
|
||||
return newlyAddedVariableIds.value.indexOf(a.id) - newlyAddedVariableIds.value.indexOf(b.id);
|
||||
} else if (newlyAddedVariableIds.value.includes(a.id)) {
|
||||
return -1;
|
||||
} else if (newlyAddedVariableIds.value.includes(b.id)) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return direction === 'asc'
|
||||
? displayName(a).trim().localeCompare(displayName(b).trim())
|
||||
: displayName(b).trim().localeCompare(displayName(a).trim());
|
||||
};
|
||||
const sortFns = {
|
||||
nameAsc: (a: EnvironmentVariable, b: EnvironmentVariable) => {
|
||||
return nameSortFn(a, b, 'asc');
|
||||
},
|
||||
nameDesc: (a: EnvironmentVariable, b: EnvironmentVariable) => {
|
||||
return nameSortFn(a, b, 'desc');
|
||||
},
|
||||
};
|
||||
|
||||
function resetNewVariablesList() {
|
||||
newlyAddedVariableIds.value = [];
|
||||
}
|
||||
|
||||
async function initialize() {
|
||||
await environmentsStore.fetchAllVariables();
|
||||
|
||||
allVariables.value = [...environmentsStore.variables];
|
||||
}
|
||||
|
||||
function addTemporaryVariable() {
|
||||
const temporaryVariable: TemporaryEnvironmentVariable = {
|
||||
id: uid(TEMPORARY_VARIABLE_UID_BASE),
|
||||
key: '',
|
||||
value: '',
|
||||
};
|
||||
|
||||
if (layoutRef.value) {
|
||||
// Reset scroll position
|
||||
if (layoutRef.value.$refs.listWrapperRef) {
|
||||
layoutRef.value.$refs.listWrapperRef.scrollTop = 0;
|
||||
}
|
||||
|
||||
// Reset pagination
|
||||
if (layoutRef.value.currentPage !== 1) {
|
||||
layoutRef.value.setCurrentPage(1);
|
||||
}
|
||||
}
|
||||
|
||||
allVariables.value.unshift(temporaryVariable);
|
||||
editMode.value[temporaryVariable.id] = true;
|
||||
|
||||
telemetry.track('User clicked add variable button');
|
||||
}
|
||||
|
||||
async function saveVariable(data: EnvironmentVariable | TemporaryEnvironmentVariable) {
|
||||
let updatedVariable: EnvironmentVariable;
|
||||
|
||||
try {
|
||||
if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
|
||||
const { id, ...rest } = data;
|
||||
updatedVariable = await environmentsStore.createVariable(rest);
|
||||
allVariables.value.unshift(updatedVariable);
|
||||
allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
|
||||
newlyAddedVariableIds.value.unshift(updatedVariable.id);
|
||||
} else {
|
||||
updatedVariable = await environmentsStore.updateVariable(data as EnvironmentVariable);
|
||||
allVariables.value = allVariables.value.map((variable) =>
|
||||
variable.id === data.id ? updatedVariable : variable,
|
||||
);
|
||||
toggleEditing(updatedVariable);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(error, i18n.baseText('variables.errors.save'));
|
||||
}
|
||||
}
|
||||
|
||||
function toggleEditing(data: EnvironmentVariable) {
|
||||
editMode.value = {
|
||||
...editMode.value,
|
||||
[data.id]: !editMode.value[data.id],
|
||||
};
|
||||
}
|
||||
|
||||
function cancelEditing(data: EnvironmentVariable | TemporaryEnvironmentVariable) {
|
||||
if (typeof data.id === 'string' && data.id.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
|
||||
allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
|
||||
} else {
|
||||
toggleEditing(data as EnvironmentVariable);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteVariable(data: EnvironmentVariable) {
|
||||
try {
|
||||
await message.confirm(
|
||||
i18n.baseText('variables.modals.deleteConfirm.message', { interpolate: { name: data.key } }),
|
||||
i18n.baseText('variables.modals.deleteConfirm.title'),
|
||||
{
|
||||
confirmButtonText: i18n.baseText('variables.modals.deleteConfirm.confirmButton'),
|
||||
cancelButtonText: i18n.baseText('variables.modals.deleteConfirm.cancelButton'),
|
||||
},
|
||||
);
|
||||
} catch (e) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await environmentsStore.deleteVariable(data);
|
||||
allVariables.value = allVariables.value.filter((variable) => variable.id !== data.id);
|
||||
} catch (error) {
|
||||
showError(error, i18n.baseText('variables.errors.delete'));
|
||||
}
|
||||
}
|
||||
|
||||
function goToUpgrade() {
|
||||
window.open(upgradeLinkUrl.value, '_blank');
|
||||
}
|
||||
|
||||
function displayName(resource: EnvironmentVariable) {
|
||||
return resource.key;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ResourcesListLayout
|
||||
ref="layoutRef"
|
||||
resource-key="variables"
|
||||
:disabled="!isFeatureEnabled"
|
||||
:resources="allVariables"
|
||||
:initialize="initialize"
|
||||
:shareable="false"
|
||||
:displayName="displayName"
|
||||
:sortFns="sortFns"
|
||||
:sortOptions="['nameAsc', 'nameDesc']"
|
||||
:showFiltersDropdown="false"
|
||||
type="datatable"
|
||||
:type-props="{ columns: datatableColumns }"
|
||||
@sort="resetNewVariablesList"
|
||||
@click:add="addTemporaryVariable"
|
||||
>
|
||||
<template #add-button>
|
||||
<n8n-tooltip placement="top" :disabled="canCreateVariables">
|
||||
<div>
|
||||
<n8n-button
|
||||
size="large"
|
||||
block
|
||||
:disabled="!canCreateVariables"
|
||||
@click="addTemporaryVariable"
|
||||
data-test-id="resources-list-add"
|
||||
>
|
||||
{{ $locale.baseText(`variables.add`) }}
|
||||
</n8n-button>
|
||||
</div>
|
||||
<template #content>
|
||||
<span v-if="!isFeatureEnabled">{{ i18n.baseText('variables.add.unavailable') }}</span>
|
||||
<span v-else>{{ i18n.baseText('variables.add.onlyOwnerCanCreate') }}</span>
|
||||
</template>
|
||||
</n8n-tooltip>
|
||||
</template>
|
||||
<template v-if="!isFeatureEnabled" #preamble>
|
||||
<n8n-action-box
|
||||
class="mb-m"
|
||||
data-test-id="unavailable-resources-list"
|
||||
emoji="👋"
|
||||
:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
|
||||
:description="
|
||||
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
|
||||
"
|
||||
:buttonText="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
|
||||
buttonType="secondary"
|
||||
@click="goToUpgrade"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="!isFeatureEnabled" #empty>
|
||||
<n8n-action-box
|
||||
data-test-id="empty-resources-list"
|
||||
emoji="👋"
|
||||
:heading="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.title)"
|
||||
:description="
|
||||
$locale.baseText(contextBasedTranslationKeys.variables.unavailable.description)
|
||||
"
|
||||
:buttonText="$locale.baseText(contextBasedTranslationKeys.variables.unavailable.button)"
|
||||
buttonType="secondary"
|
||||
@click="goToUpgrade"
|
||||
/>
|
||||
</template>
|
||||
<template #default="{ data }">
|
||||
<VariablesRow
|
||||
:key="data.id"
|
||||
:editing="editMode[data.id]"
|
||||
:data="data"
|
||||
@save="saveVariable"
|
||||
@edit="toggleEditing"
|
||||
@cancel="cancelEditing"
|
||||
@delete="deleteVariable"
|
||||
/>
|
||||
</template>
|
||||
</ResourcesListLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.type-input {
|
||||
--max-width: 265px;
|
||||
}
|
||||
|
||||
.sidebarContainer ul {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'n8n-design-system/css/common/var.scss';
|
||||
|
||||
:deep(.datatable) {
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
width: 25%;
|
||||
|
||||
@media screen and (max-width: var.$md) {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
&.variables-value-column,
|
||||
&.variables-key-column,
|
||||
&.variables-usage-column {
|
||||
> div {
|
||||
width: 100%;
|
||||
|
||||
> span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.variables-usage-column {
|
||||
@media screen and (max-width: var.$md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
packages/editor-ui/src/views/__tests__/VariablesView.spec.ts
Normal file
49
packages/editor-ui/src/views/__tests__/VariablesView.spec.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { afterAll, beforeAll } from 'vitest';
|
||||
import { setActivePinia, createPinia } from 'pinia';
|
||||
import { setupServer } from '@/__tests__/server';
|
||||
import { render } from '@testing-library/vue';
|
||||
import VariablesView from '@/views/VariablesView.vue';
|
||||
import { useSettingsStore, useUsersStore } from '@/stores';
|
||||
|
||||
describe('store', () => {
|
||||
let server: ReturnType<typeof setupServer>;
|
||||
|
||||
beforeAll(() => {
|
||||
server = setupServer();
|
||||
});
|
||||
|
||||
beforeEach(async () => {
|
||||
setActivePinia(createPinia());
|
||||
|
||||
await useSettingsStore().getSettings();
|
||||
await useUsersStore().fetchUsers();
|
||||
await useUsersStore().loginWithCookie();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
server.shutdown();
|
||||
});
|
||||
|
||||
it('should render loading state', () => {
|
||||
const wrapper = render(VariablesView);
|
||||
|
||||
expect(wrapper.container.querySelectorAll('.n8n-loading')).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should render empty state', async () => {
|
||||
const wrapper = render(VariablesView);
|
||||
|
||||
await wrapper.findByTestId('empty-resources-list');
|
||||
expect(wrapper.getByTestId('empty-resources-list')).toBeVisible();
|
||||
});
|
||||
|
||||
it('should render variable entries', async () => {
|
||||
server.createList('variable', 3);
|
||||
|
||||
const wrapper = render(VariablesView);
|
||||
|
||||
await wrapper.findByTestId('resources-table');
|
||||
expect(wrapper.getByTestId('resources-table')).toBeVisible();
|
||||
expect(wrapper.container.querySelectorAll('tr')).toHaveLength(4);
|
||||
});
|
||||
});
|
||||
|
|
@ -133,6 +133,7 @@ export function WorkflowExecuteAdditionalData(
|
|||
webhookWaitingBaseUrl: 'webhook-waiting',
|
||||
webhookTestBaseUrl: 'webhook-test',
|
||||
userId: '123',
|
||||
variables: {},
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1693,6 +1693,7 @@ export interface IWorkflowExecuteAdditionalData {
|
|||
currentNodeParameters?: INodeParameters;
|
||||
executionTimeoutTimestamp?: number;
|
||||
userId: string;
|
||||
variables: IDataObject;
|
||||
}
|
||||
|
||||
export type WorkflowExecuteMode =
|
||||
|
|
|
|||
|
|
@ -880,6 +880,9 @@ importers:
|
|||
codemirror-lang-n8n-expression:
|
||||
specifier: ^0.2.0
|
||||
version: 0.2.0(@codemirror/state@6.1.4)(@codemirror/view@6.5.1)(@lezer/common@1.0.1)
|
||||
copy-to-clipboard:
|
||||
specifier: ^3.3.3
|
||||
version: 3.3.3
|
||||
dateformat:
|
||||
specifier: ^3.0.3
|
||||
version: 3.0.3
|
||||
|
|
@ -9831,6 +9834,12 @@ packages:
|
|||
is-plain-object: 5.0.0
|
||||
dev: true
|
||||
|
||||
/copy-to-clipboard@3.3.3:
|
||||
resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
|
||||
dependencies:
|
||||
toggle-selection: 1.0.6
|
||||
dev: false
|
||||
|
||||
/copy-to@2.0.1:
|
||||
resolution: {integrity: sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==}
|
||||
dev: false
|
||||
|
|
@ -20304,6 +20313,10 @@ packages:
|
|||
through2: 2.0.5
|
||||
dev: true
|
||||
|
||||
/toggle-selection@1.0.6:
|
||||
resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
|
||||
dev: false
|
||||
|
||||
/toidentifier@1.0.1:
|
||||
resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
|
||||
engines: {node: '>=0.6'}
|
||||
|
|
|
|||
Loading…
Reference in a new issue