Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #11337 from ToolJet/fix/form-submit-btn-and-ast-in-be

Browse source 
form button to submit mapping issue on version creation and import ex…
This commit is contained in:
Johnson Cherian 2024-11-18 18:44:57 +05:30 committed by GitHub
commit d3b4bc8726
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 412 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/AppBuilder/_stores/ast.js
View file

@ -54,7 +54,8 @@ export function extractAndReplaceReferencesFromString(input, componentIdNameMapp
let match;
if (input.startsWith('{{{') && input.endsWith('}}}')) {
input = input.replace(/\{\{(.*)\}\}/, '{{($1)}}');
const inputContent = input.slice(3, -3);
input = `{{({${inputContent}})}}`;
const matches = findExpression(input);
for (const match of matches) {
const { fullMatch, expression, index } = match;

2
server/package.json
View file

@ -53,6 +53,8 @@
"@sentry/tracing": "6.17.6",
"@tooljet/plugins": "../plugins",
"@types/express-serve-static-core": "^4.19.5",
"acorn": "^8.13.0",
"acorn-walk": "^8.3.4",
"bcrypt": "^5.0.1",
"class-transformer": "^0.5.1",
"class-validator": "^0.14.0",

475
server/src/helpers/import_export.helpers.ts
View file

@ -1,39 +1,40 @@
import * as acorn from 'acorn';
import * as walk from 'acorn-walk';
function findExpression(input) {
const matches = [];
let startIdx = -1;
let braceCount = 0;
for (let i = 0; i < input.length; i++) {
if (input[i] === '{' && input[i + 1] === '{' && braceCount === 0) {
startIdx = i;
braceCount = 2;
i++; // Skip the second '{'
} else if (input[i] === '{' && braceCount > 0) {
braceCount++;
} else if (input[i] === '}' && braceCount > 0) {
braceCount--;
if (braceCount === 0 && startIdx !== -1) {
matches.push({
fullMatch: input.slice(startIdx, i + 1),
expression: input.slice(startIdx + 2, i - 1).trim(),
index: startIdx,
});
startIdx = -1;
}
}
}
return matches;
}
export function updateEntityReferences(node, resourceMapping: Record<string, string> = {}) {
if (typeof node === 'object') {
for (const key in node) {
let value = node[key];
if (typeof value === 'string' && value.includes('{{') && value.includes('}}')) {
const referenceExists = value;
if (referenceExists) {
const matches = value.match(/{{(.*?)}}/g);
// gett all references {{entityName}}
if (matches) {
matches.forEach((match) => {
// remove curly braces and extract the entity "component.entityName.something"
const ref = match.slice(2, -2).trim();
const entityName = ref.split('.')[1];
if (resourceMapping[entityName]) {
const newValue = value.replace(entityName, resourceMapping[entityName]);
node[key] = newValue;
value = newValue;
}
});
} else {
// kept this logic for fallback, although it should not be needed
const ref = value.replace('{{', '').replace('}}', '');
const entityName = ref.split('.')[1];
if (resourceMapping[entityName]) {
const newValue = value.replace(entityName, resourceMapping[entityName]);
node[key] = newValue;
}
}
}
node[key] = extractAndReplaceReferencesFromString(value, resourceMapping, resourceMapping)?.valueWithId;
} else if (typeof value === 'object') {
value = updateEntityReferences(value, resourceMapping);
}
@ -43,53 +44,373 @@ export function updateEntityReferences(node, resourceMapping: Record<string, str
return node;
}
function containsBracketNotation(queryString) {
const bracketNotationRegex = /\[\s*['"][^'"]+['"]\s*\]/;
return bracketNotationRegex.test(queryString);
}
export function findAllEntityReferences(node, allRefs): [] {
if (typeof node === 'object') {
for (const key in node) {
const value = node[key];
if (typeof value === 'string' && containsBracketNotation(value)) {
//skip if the value is a bracket notation
break;
}
if (typeof value === 'string' && value.includes('{{') && value.includes('}}')) {
const referenceExists = value;
if (referenceExists) {
const matches = value.match(/{{(.*?)}}/g);
if (matches) {
matches.forEach((match) => {
const ref = match.slice(2, -2).trim(); // Remove {{ and }}
const entityName = ref.split('.')[1];
if (entityName && !allRefs.includes(entityName)) {
allRefs.push(entityName);
}
});
} else {
// kept this logic for fallback, although it should not be needed
const ref = value.replace('{{', '').replace('}}', '');
const entityName = ref.split('.')[1];
allRefs.push(entityName);
}
}
} else if (typeof value === 'object') {
findAllEntityReferences(value, allRefs);
}
}
}
return allRefs;
}
export function isValidUUID(uuid) {
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
return uuidRegex.test(uuid);
}
export function extractAndReplaceReferencesFromString(input, componentIdNameMapping = {}, queryIdNameMapping = {}) {
// Quick check for relevant keywords
const regexForQuickCheck =
/\b(components|queries|globals|variables|page|parameters|secrets|constants)(?:\[\S*|\.\S*|\?\.\S*)/;
if (!regexForQuickCheck.test(input)) {
return {
allRefs: [],
valueWithId: input,
valueWithBrackets: input,
};
}
const relevantKeywords = /\b(components|queries|globals|variables|page|parameters|secrets|constants)\b/;
const expressionRegex = /{{(.*?)}}/gs;
const results = [];
let lastIndex = 0;
let replacedString = '';
let bracketNotationString = '';
// Precompile the UUID regex
const uuidRegex =
/\b(components|queries)(\??\.|\??\.?\[['"]?)([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})(['"]?\])?/g;
let match;
if (input.startsWith('{{{') && input.endsWith('}}}')) {
const inputContent = input.slice(3, -3);
input = `{{({${inputContent}})}}`;
const matches = findExpression(input);
for (const match of matches) {
const { fullMatch, expression, index } = match;
// Check if the expression contains relevant keywords
if (!relevantKeywords.test(expression)) {
replacedString += input.slice(lastIndex, index);
bracketNotationString += input.slice(lastIndex, index);
replacedString += fullMatch;
bracketNotationString += fullMatch;
lastIndex = index + fullMatch.length;
continue;
}
try {
const { processedExpression, uuidMappings } = preprocessExpression(
expression,
uuidRegex,
componentIdNameMapping,
queryIdNameMapping
);
const parsedResult = parseExpression(
processedExpression,
componentIdNameMapping,
queryIdNameMapping,
uuidMappings
);
replacedString += input.slice(lastIndex, index);
bracketNotationString += input.slice(lastIndex, index);
const replacedExpression = replaceIdsInExpression(
processedExpression,
componentIdNameMapping,
queryIdNameMapping,
false,
uuidMappings
);
const bracketNotationExpression = replaceIdsInExpression(
processedExpression,
componentIdNameMapping,
queryIdNameMapping,
true,
uuidMappings
);
replacedString += `{{${replacedExpression}}}`;
bracketNotationString += `{{${bracketNotationExpression}}}`;
results.push({
allRefs: parsedResult.references,
valueWithId: `{{${replacedExpression}}}`,
valueWithBrackets: `{{${bracketNotationExpression}}}`,
});
} catch (error) {
replacedString += fullMatch;
bracketNotationString += fullMatch;
results.push({
allRefs: [],
valueWithId: fullMatch,
valueWithBrackets: fullMatch,
});
}
lastIndex = index + fullMatch.length;
}
replacedString += input.slice(lastIndex);
bracketNotationString += input.slice(lastIndex);
// remove the parentheses that were added
return {
valueWithId: `{{${replacedString.slice(3, -3)}}}`,
valueWithBrackets: `{{${bracketNotationString.slice(3, -3)}}}`,
allRefs: results.flatMap((r) => r.allRefs),
};
}
while ((match = expressionRegex.exec(input)) !== null) {
const fullMatch = match[0];
const expression = match[1].trim();
// Check if the expression contains relevant keywords
if (!relevantKeywords.test(expression)) {
replacedString += input.slice(lastIndex, match.index);
bracketNotationString += input.slice(lastIndex, match.index);
replacedString += fullMatch;
bracketNotationString += fullMatch;
lastIndex = match.index + fullMatch.length;
continue;
}
try {
const { processedExpression, uuidMappings } = preprocessExpression(
expression,
uuidRegex,
componentIdNameMapping,
queryIdNameMapping
);
const parsedResult = parseExpression(
processedExpression,
componentIdNameMapping,
queryIdNameMapping,
uuidMappings
);
replacedString += input.slice(lastIndex, match.index);
bracketNotationString += input.slice(lastIndex, match.index);
const replacedExpression = replaceIdsInExpression(
processedExpression,
componentIdNameMapping,
queryIdNameMapping,
false,
uuidMappings
);
const bracketNotationExpression = replaceIdsInExpression(
processedExpression,
componentIdNameMapping,
queryIdNameMapping,
true,
uuidMappings
);
replacedString += `{{${replacedExpression}}}`;
bracketNotationString += `{{${bracketNotationExpression}}}`;
results.push({
allRefs: parsedResult.references,
valueWithId: `{{${replacedExpression}}}`,
valueWithBrackets: `{{${bracketNotationExpression}}}`,
});
} catch (error) {
replacedString += fullMatch;
bracketNotationString += fullMatch;
results.push({
allRefs: [],
valueWithId: fullMatch,
valueWithBrackets: fullMatch,
});
}
lastIndex = match.index + fullMatch.length;
}
replacedString += input.slice(lastIndex);
bracketNotationString += input.slice(lastIndex);
return {
allRefs: results.flatMap((r) => r.allRefs),
valueWithId: replacedString,
valueWithBrackets: bracketNotationString,
};
}
function preprocessExpression(expression, uuidRegex, componentIdNameMapping, queryIdNameMapping) {
const uuidMappings = {};
let placeholderCounter = 0;
const processedExpression = expression.replace(uuidRegex, (match, p1, p2, p3, p4) => {
const placeholder = `__UUID_PLACEHOLDER_${placeholderCounter}__`;
uuidMappings[placeholder] = (p1 === 'components' ? componentIdNameMapping[p3] : queryIdNameMapping[p3]) || p3;
placeholderCounter++;
return `${p1}${p2}${placeholder}${p4 || ''}`;
});
return { processedExpression, uuidMappings };
}
function replaceIdsInExpression(
expression,
componentIdNameMapping,
queryIdNameMapping,
useBracketNotation,
uuidMappings
) {
try {
const ast = acorn.parse(expression, { ecmaVersion: 2020 });
const replacements = [];
walk.simple(ast, {
MemberExpression(node) {
if (
node.object.type === 'Identifier' &&
(node.object.name === 'components' || node.object.name === 'queries')
) {
const isComponent = node.object.name === 'components';
const mapping = isComponent ? componentIdNameMapping : queryIdNameMapping;
if (node.property.type === 'Identifier') {
const name = node.property.name;
const nameWithOptionalCheck = node.optional
? useBracketNotation
? `${node.object.name}?.`
: `${node.object.name}?`
: `${node.object.name}`;
if (mapping[name] || name.startsWith('__UUID_PLACEHOLDER_')) {
const start = node.start;
const end = node.end;
let replacement;
if (name.startsWith('__UUID_PLACEHOLDER_')) {
const actualName = uuidMappings[name];
replacement = useBracketNotation
? `${nameWithOptionalCheck}["${actualName}"]`
: `${nameWithOptionalCheck}.${actualName}`;
} else {
replacement = useBracketNotation
? `${nameWithOptionalCheck}["${mapping[name]}"]`
: `${nameWithOptionalCheck}.${mapping[name]}`;
}
replacements.push({ start, end, replacement });
}
} else if (node.property.type === 'Literal') {
const name = node.property.value as string;
const nameWithOptionalCheck = node.optional ? `${node.object.name}?.` : `${node.object.name}`;
if (mapping[name] || name.startsWith('__UUID_PLACEHOLDER_')) {
const start = node.start;
const end = node.end;
let replacement;
if (name.startsWith('__UUID_PLACEHOLDER_')) {
const actualName = uuidMappings[name];
replacement = `${nameWithOptionalCheck}["${actualName}"]`;
} else {
replacement = `${nameWithOptionalCheck}["${mapping[name]}"]`;
}
replacements.push({ start, end, replacement });
}
}
}
},
});
if (replacements.length === 0) return expression;
replacements.sort((a, b) => b.start - a.start);
let result = expression;
for (const { start, end, replacement } of replacements) {
result = result.slice(0, start) + replacement + result.slice(end);
}
return result;
} catch (error) {
return expression;
}
}
function parseExpression(expression, componentIdNameMapping, queryIdNameMapping, uuidMappings) {
try {
const ast = acorn.parse(expression, { ecmaVersion: 2020 });
const references = [];
const validRootObjects = {
components: true,
queries: true,
variables: true,
globals: true,
page: true,
};
walk.simple(ast, {
MemberExpression: handleMemberExpression,
});
// eslint-disable-next-line no-inner-declarations
function handleMemberExpression(node) {
const reference = extractPath(node);
if (reference) references.push(reference);
}
// eslint-disable-next-line no-inner-declarations
function extractPath(node) {
const path = [];
let current = node;
let rootObject = '';
while (current) {
if (current.type === 'Identifier') {
path.unshift(current.name);
if (validRootObjects[current.name]) {
rootObject = current.name;
break;
}
} else if (current.type === 'MemberExpression' || current.type === 'OptionalMemberExpression') {
if (current.computed) {
if (
current.property.type === 'Literal' &&
(typeof current.property.value === 'string' || typeof current.property.value === 'number')
) {
path.unshift(current.property.value.toString());
} else {
break;
}
} else {
path.unshift(current.property.name);
}
} else {
break;
}
current = current.object;
}
if (
(rootObject && (rootObject === 'queries' || rootObject === 'components') && path.length >= 3) ||
((rootObject === 'variables' || rootObject === 'globals') && path.length === 2) ||
(rootObject === 'page' && path.length === 3)
) {
return createReferenceObject(rootObject, path, uuidMappings, componentIdNameMapping, queryIdNameMapping);
}
return null;
}
return { references };
} catch (error) {
console.log(error);
return { references: [] };
}
}
function createReferenceObject(entityType, path, uuidMappings, componentIdNameMapping, queryIdNameMapping) {
let entityNameOrId, entityKey;
if (entityType === 'components' || entityType === 'queries') {
entityNameOrId = path[1];
entityKey = path[2];
if (entityNameOrId.startsWith('__UUID_PLACEHOLDER_')) {
entityNameOrId = uuidMappings[entityNameOrId];
} else {
const mapping = entityType === 'components' ? componentIdNameMapping : queryIdNameMapping;
entityNameOrId = mapping[entityNameOrId] || entityNameOrId;
}
} else if (entityType === 'variables' || entityType === 'globals') {
entityKey = path[1];
} else if (entityType === 'page') {
entityNameOrId = path[1];
entityKey = path[2];
}
return { entityType, entityNameOrId, entityKey };
}

18
server/src/services/app_import_export.service.ts
View file

@ -30,7 +30,7 @@ import { Component } from 'src/entities/component.entity';
import { Layout } from 'src/entities/layout.entity';
import { EventHandler, Target } from 'src/entities/event_handler.entity';
import { v4 as uuid } from 'uuid';
import { findAllEntityReferences, isValidUUID, updateEntityReferences } from 'src/helpers/import_export.helpers';
import { updateEntityReferences } from 'src/helpers/import_export.helpers';
interface AppResourceMappings {
defaultDataSourceIdMapping: Record<string, string>;
dataQueryMapping: Record<string, string>;
@ -290,13 +290,7 @@ export class AppImportExportService {
.getMany();
const toUpdateComponents = components.filter((component) => {
const entityReferencesInComponentDefinitions = findAllEntityReferences(component, []).filter(
(entity) => entity && isValidUUID(entity)
);
if (entityReferencesInComponentDefinitions.length > 0) {
return updateEntityReferences(component, mappings);
}
return updateEntityReferences(component, mappings);
});
if (!isEmpty(toUpdateComponents)) {
@ -312,13 +306,7 @@ export class AppImportExportService {
.getMany();
const toUpdateDataQueries = dataQueries.filter((dataQuery) => {
const entityReferencesInQueryOptions = findAllEntityReferences(dataQuery, []).filter(
(entity) => entity && isValidUUID(entity)
);
if (entityReferencesInQueryOptions.length > 0) {
return updateEntityReferences(dataQuery, mappings);
}
return updateEntityReferences(dataQuery, mappings);
});
if (!isEmpty(toUpdateDataQueries)) {

24
server/src/services/apps.service.ts
View file

@ -27,7 +27,7 @@ import { Component } from 'src/entities/component.entity';
import { EventHandler, Target } from 'src/entities/event_handler.entity';
import { VersionReleaseDto } from '@dto/version-release.dto';
import { findAllEntityReferences, isValidUUID, updateEntityReferences } from 'src/helpers/import_export.helpers';
import { updateEntityReferences } from 'src/helpers/import_export.helpers';
import { isEmpty, set } from 'lodash';
import { AppBase } from 'src/entities/app_base.entity';
import { LayoutDimensionUnits } from 'src/helpers/components.helper';
@ -435,13 +435,7 @@ export class AppsService {
.getMany();
const toUpdateComponents = components.filter((component) => {
const entityReferencesInComponentDefinitions = findAllEntityReferences(component, []).filter(
(entity) => entity && isValidUUID(entity)
);
if (entityReferencesInComponentDefinitions.length > 0) {
return updateEntityReferences(component, mappings);
}
return updateEntityReferences(component, mappings);
});
if (!isEmpty(toUpdateComponents)) {
@ -457,13 +451,7 @@ export class AppsService {
.getMany();
const toUpdateDataQueries = dataQueries.filter((dataQuery) => {
const entityReferencesInQueryOptions = findAllEntityReferences(dataQuery, []).filter(
(entity) => entity && isValidUUID(entity)
);
if (entityReferencesInQueryOptions.length > 0) {
return updateEntityReferences(dataQuery, mappings);
}
return updateEntityReferences(dataQuery, mappings);
});
if (!isEmpty(toUpdateDataQueries)) {
@ -532,9 +520,9 @@ export class AppsService {
let homePageId = prevHomePagePage;
let newComponents = [];
const newComponents = [];
const newComponentLayouts = [];
let oldComponentToNewComponentMapping = {};
const oldComponentToNewComponentMapping = {};
const oldPageToNewPageMapping = {};
const isChildOfTabsOrCalendar = (component, allComponents = [], componentParentId = undefined) => {
@ -693,8 +681,6 @@ export class AppsService {
await manager.save(newComponents);
await manager.save(newComponentLayouts);
newComponents = [];
oldComponentToNewComponentMapping = {};
}
await manager.update(AppVersion, { id: appVersion.id }, { homePageId });

10
server/src/services/page.service.ts
View file

@ -11,7 +11,7 @@ import { EventsService } from './events_handler.service';
import { Component } from 'src/entities/component.entity';
import { Layout } from 'src/entities/layout.entity';
import { EventHandler } from 'src/entities/event_handler.entity';
import { findAllEntityReferences, isValidUUID, updateEntityReferences } from 'src/helpers/import_export.helpers';
import { updateEntityReferences } from 'src/helpers/import_export.helpers';
import { isEmpty } from 'class-validator';
import { PageHelperService } from '@apps/services/pages/service.helper';
import * as _ from 'lodash';
@ -243,13 +243,7 @@ export class PageService {
}
const toUpdateComponents = clonedComponents.filter((component) => {
const entityReferencesInComponentDefinitions = findAllEntityReferences(component, []).filter(
(entity) => entity && isValidUUID(entity)
);
if (entityReferencesInComponentDefinitions.length > 0) {
return updateEntityReferences(component, componentsIdMap);
}
return updateEntityReferences(component, componentsIdMap);
});
if (!isEmpty(toUpdateComponents)) {