* feat: Design system color improvements and button component redesign.
* feat: Added button focus state and unit tests.
* refactor: Aligned n8n-button usage inside of editor-ui.
* test: Updated snapshots.
* refactor: Extracted focus outline width into scss variable.
* fix: Fixed select input border-radius.
* refactor: Removed element-ui references in button.
* fix: Fixed scss variable imports.
* feat: Added color-neutral variable story.
* fix: Fixed color-secondary variable definition.
* feat: Added color-white story.
* test: Updated button snapshot.
* feat: Replaced zoom buttons with new n8n-icon-button.
* feat: Added stories for float utilities.
* chore: Updated color shades generation code for later use.
* chore: Removed color-white code.
* chore: Updated story properties for button components.
* fix: Added el-button fallback for places where el-button is not replaceable (messagebox).
* feat: Reverted to css modules. Replaced el-button with n8n-button at application level.
* test: Updated button snapshot.
* fix: Fixed element-ui locally referenced buttons (via components: {}).
* fix: Updated colors. Removed irrelevant validation. Added ElButton override component.
* test: Updated button override snapshot.
* fix: Various button adjustments and fixes.
* fix: Updated button disabled state.
* test: Updated snapshots.
* fix: Consolidated css variables changes.
* Data pinning (#3512)
* refactor: Aligned n8n-button usage inside of editor-ui.
* feat: Added edit data button on json hover.
* feat: Extracted code editor into separate form component.
* feat: Added edit data button on json hover.
* feat: Added pinData and edit mode methods.
* 🔥 Remove conflict markers
* ✏️ Update i18n keys
* ⚡ Add JSON validation
* 🗃️ Add `pinData` column to `workflow_entity`
* 📘 Tighten type
* ⚡ Make `pinData` column nullable
* ⚡ Adjust workflow endpoints for pin data
* 📘 Improve types
* ✏️ Improve wording
* Inject pindata into items flow (#3420)
* ⚡ Inject pin data - Second approach
* 🔥 Remove unneeded lint exception
* feat: Added edit data button on json hover.
* feat: Extracted code editor into separate form component.
* feat: Added edit data button on json hover.
* fix: Fixed rebase conflicts.
* ⏪ Undo button change
* 🐛 Fix runNode call
Adjust per update in bdb84130d6
* 🧪 Fix workflow tests
* 🐛 More merge conflict fixes
* feat: Added pin/unpin button and store mutations.
* feat: Size check. Various design and ux improvements.
* ⚡ Add transformer
* ⚡ Hoist pin data
* ⚡ Adjust endpoints for hoisted pin data
* 📘 Expand interface
* 🐛 Fix stray array
* 👕 Fix build
* 👕 Add lint exception
* 👕 Fix header
* 🎨 Add color secondary tints
* ✨ Create `HeaderMessage` component
* ⚡ Adjust `InfoTip` component
* ✨ Add `HeaderMessage` to `RunData`
* 🐛 Fix console error
* 👕 Fix lint
* ⚡ Consolidate `HeaderMessage` and `Callout`
* ⏪ Undo `InfoTip` changes
* 🔥 Remove duplicate icons
* ⚡ Simplify template
* 🎨 Change cursor for action text
* 👕 Fix lint
* ⚡ Add URL
* 🐛 Fix handler name
* ⚡ Use constant
* ♻️ Refactor per feedback
* fix: Various fixes after data pinning relocation.
* fix: Added store mutation for setting pinned data.
* feat: Added pinned state for workflow canvas node.
* fix: Fixed workflow saving.
* fix: Removed pinData hoisting (no longer necessary).
* feat: Added canPinData flag to hide for input pane and binary data. Fixed unpin and execute flow.
* ⚡ Fixes for canvas pin data (#3587)
* ⚡ Fixes for canvas pin data
* 📘 Rename type
* 🧪 Fix unrelated Public API test
* 🔥 Remove logging
* feat: Updated pinData mixin to no longer include extra fields.
* ⚡ Output same pindata for every run
* 🎨 Fix cropping
* 🔥 Remove unrelated logging
* feat: Moved edit button next to pin button.
* feat: Changed data to be inserted for empty state.
* chore: Changed invalid editor output translation.
* feat: Added error line reporting on JSON Validation.
* feat: Migrated pinData edit mode to store.
* chore: Merged duplicate node border color condition.
* feat: Moved pin data validation to mixin. Added check before closing ndv modal.
* fix: Changed pinned data size calculation to discard active node pin data.
* feat: Added support for rename and delete node with pin data.
* feat: Simplified editing state. Fixed edit mode in input panel after store migration.
* feat: Various data pinning improvements.
* fix: Fixed callout link underline.
* refactor: Added support for both string and objects for data size check.
* feat: Added disabled node check for input panel. Fixed monaco editor resizing.
* fix: Fixed edit mode footer size.
* ⚡ Fix pindata items per run
* 👕 Remove unneeded exception
* refactor: Added isValidPinData() helper method.
* refactor: Changed how string size in bytes in calculated.g
* refactor: Updated pinData mixin interface.
* refactor: Merged filter and reduce in pinDataSize calculation.
* fix: Changed code-editor to correct type.
* fix: Added insert test data message to trigger nodes.
* feat: Disabled data pinning for multiple output nodes.
* refactor: Updated ndv.input.disabled translation to include node name.
* refactor: Aligned n8n-button usage inside of editor-ui.
* feat: Added edit data button on json hover.
* feat: Extracted code editor into separate form component.
* feat: Added edit data button on json hover.
* feat: Added pinData and edit mode methods.
* 🔥 Remove conflict markers
* ✏️ Update i18n keys
* ⚡ Add JSON validation
* 🗃️ Add `pinData` column to `workflow_entity`
* 📘 Tighten type
* ⚡ Make `pinData` column nullable
* ⚡ Adjust workflow endpoints for pin data
* 📘 Improve types
* ✏️ Improve wording
* Inject pindata into items flow (#3420)
* ⚡ Inject pin data - Second approach
* 🔥 Remove unneeded lint exception
* feat: Added edit data button on json hover.
* feat: Extracted code editor into separate form component.
* feat: Added edit data button on json hover.
* fix: Fixed rebase conflicts.
* ⏪ Undo button change
* 🐛 Fix runNode call
Adjust per update in bdb84130d6
* 🧪 Fix workflow tests
* 🐛 More merge conflict fixes
* feat: Added pin/unpin button and store mutations.
* feat: Size check. Various design and ux improvements.
* ⚡ Add transformer
* ⚡ Hoist pin data
* ⚡ Adjust endpoints for hoisted pin data
* 📘 Expand interface
* 🐛 Fix stray array
* 👕 Fix build
* 🎨 Add color secondary tints
* ✨ Create `HeaderMessage` component
* ⚡ Adjust `InfoTip` component
* ✨ Add `HeaderMessage` to `RunData`
* 🐛 Fix console error
* 👕 Fix lint
* ⚡ Consolidate `HeaderMessage` and `Callout`
* ⏪ Undo `InfoTip` changes
* 🔥 Remove duplicate icons
* ⚡ Simplify template
* 🎨 Change cursor for action text
* 👕 Fix lint
* ⚡ Add URL
* 🐛 Fix handler name
* ⚡ Use constant
* ♻️ Refactor per feedback
* fix: Various fixes after data pinning relocation.
* fix: Added store mutation for setting pinned data.
* feat: Added pinned state for workflow canvas node.
* ⚡ Fixes for canvas pin data (#3587)
* ⚡ Fixes for canvas pin data
* 📘 Rename type
* 🧪 Fix unrelated Public API test
* 🔥 Remove logging
* feat: Updated pinData mixin to no longer include extra fields.
* fix: Removed pinData hoisting (no longer necessary).
* chore: Merged duplicate node border color condition.
* ⚡ Output same pindata for every run
* 🎨 Fix cropping
* 🐛 Fix excess closing template tag
* fix: Removed rogue template tag after merge.
* fix: Fixed code-editor resizing when moving ndv panel.
* feat: Added node duplication pin data.
* ⚡ Implement telemetry
* ♻️ Add clarifications from call
* fix: Fixed run data header height.
* feat: Removed border from pin data callout.
* feat: Added line-break before 'or insert pin data'.
* feat: Changed enterEditMode to always insert test data if there's no execution data.
* feat: Removed copy output tooltip.
* feat: Removed unpin tooltip.
* fix: Removed thumbtack icon rotation.
* fix: Removed run info from Edit Output title.
* feat: Hid edit and pin buttons when editing.
* feat: Updated monaco code-editor padding and borders.
* feat: Progress on pinData error message format
* feat: Updated copy feature to work without any selected value.
* feat: Moved save and cancel buttons. Cleared notifications on save.
* feat: Changed pin data beforeClosing confirm text.
* feat: Closing ndv when discarding or saving pindata on close.
* feat: Added split in batches node to pin data denylist.
* fix: Added missing margin-bottom to webhook node.
* feat: Moved thumbtack icon to the right, replacing the checkmark.
* fix: Hid pagination while editing.
* feat: Added pin data discovery flow.
* feat: Changed pin data discovery flow to avoid tooltip glitching.
* fix: Changed copy selection to copy all input data.
* feat: Updated pin data validation error message for unexpected single quotes.
* fix: Replaced :manual='true' prop with manual shorthand.
* fix: Removed unused variable.
* chore: Renamed translation key to node.discovery.pinData.
* refactor: Extracted isPinDataNodeType to pinData mixin.
* fix: Updated watch condition to improve performance.
* refactor: Renamed some pin data variables and methods as per review.
* fix: Added partial translation for JSON.parse pin data error messages.
* chore: Temporarily disabled failing unit test.
* 🧪 Fix data pinning workflow retrieval test
* 🔥 Remove unused imports
* 🔥 Remove leftover line
* ⚡ Skip pindata node issues on BE
* ⚡ Skip pindata node issues on FE
* ⚡ Hide `RunInfo` for pindata node
* ⚡ Hide purple banner in edit output mode
* feat: Updated data pinning discoverability flow.
* fix: Fixed paginated data pinning.
* fix: Disabled pin data in read only mode.
* 🐛 Fix runtime error with non-array
* fix: Loading pin data when opening execution.
* ⚡ Adjust stale data warning for pinned data
* ⚡ Skip auth in endpoint
* ⚡ Mark start node for pinned trigger
* ✏️ Comment on passthrough
* 🔥 Remove comment
* Final pindata metrics changes (#3673)
* 🐛 Fix `pinData` tracked as `0`
* ⚡ Add `is_pinned` to `nodesGraph`
* 📘 Extend `IWorkflowBase`
* ⚡ Handle `pinData` being `undefined`
* ⚡ Add `data_pinning_tooltip_presented`
* ♻️ Refactor to remove circular dependency
* fix: Added pin data handling when importing workflow. (#3698)
* 🔥 Remove helper from WorkflowExecute
* ⚡ Add logic for single pinned trigger
* 👕 Remove lint exception
* fix: Added pin data handling in importWorkflowExact.
* N8N-4077 data pinning discoverability part 2 (#3701)
* fix: Fixed pin data discovery tooltip position when moving canvas.
* feat: Updated data pinning discovery tooltip copy.
* Fix data pinning build (#3702)
* ⚡ Disable edit button for disabled node
* ⚡ Ensure disabled pinned nodes are passthrough
* 🐛 Fix JSON key unfurling in edit mode
* ⚡ Improve implementation
* 🐛 Fix console error
* fix: Fixed copying pinned output data. (#3715)
* Fix pinning for webhook responding with output from last node (#3719)
* fix: Fixed entering edit mode after refresh.
* fix: Fixed type error during build.
* fix: RunData import formatting.
* chore: Updated pin data types.
* fix: Added missing type to stringSizeInBytes.
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
* fix: Showing pin data without executing the node only in output pane.
* fix: Updated no data message when previous node not executed.
* feat: Added expression input and evaluation for pin data nodes without execution.
* chore: Fixed linting issues and removed remnant console.log().
* chore: Undone package-lock changes.
* fix: Removed pin data store changes.
* fix: Created a new object using vuex runExecutionData.
* fix: Fixed bug appearing when adding a new node after executing.
* fix: Fix editor-ui build
* feat: Added green node connectors when having pin data output.
* chore: Fixed linting errors.
* fix: Added pin data eventBus unsubscribe.
* fix: Added pin data color check after adding a connection.
* 🎨 Add pindata styles
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
221 lines
6.5 KiB
TypeScript
221 lines
6.5 KiB
TypeScript
/* eslint-disable import/no-cycle */
|
|
import {
|
|
IConnection,
|
|
INode,
|
|
INodeNameIndex,
|
|
INodesGraph,
|
|
INodeGraphItem,
|
|
INodesGraphResult,
|
|
IWorkflowBase,
|
|
INodeTypes,
|
|
} from '.';
|
|
import { INodeType } from './Interfaces';
|
|
|
|
const STICKY_NODE_TYPE = 'n8n-nodes-base.stickyNote';
|
|
|
|
export function getNodeTypeForName(workflow: IWorkflowBase, nodeName: string): INode | undefined {
|
|
return workflow.nodes.find((node) => node.name === nodeName);
|
|
}
|
|
|
|
export function isNumber(value: unknown): value is number {
|
|
return typeof value === 'number';
|
|
}
|
|
|
|
function getStickyDimensions(note: INode, stickyType: INodeType | undefined) {
|
|
const heightProperty = stickyType?.description.properties.find(
|
|
(property) => property.name === 'height',
|
|
);
|
|
const widthProperty = stickyType?.description.properties.find(
|
|
(property) => property.name === 'width',
|
|
);
|
|
|
|
const defaultHeight =
|
|
heightProperty && isNumber(heightProperty?.default) ? heightProperty.default : 0;
|
|
const defaultWidth =
|
|
widthProperty && isNumber(widthProperty?.default) ? widthProperty.default : 0;
|
|
|
|
const height: number = isNumber(note.parameters.height) ? note.parameters.height : defaultHeight;
|
|
const width: number = isNumber(note.parameters.width) ? note.parameters.width : defaultWidth;
|
|
|
|
return {
|
|
height,
|
|
width,
|
|
};
|
|
}
|
|
|
|
type XYPosition = [number, number];
|
|
|
|
function areOverlapping(
|
|
topLeft: XYPosition,
|
|
bottomRight: XYPosition,
|
|
targetPos: XYPosition,
|
|
): boolean {
|
|
return (
|
|
targetPos[0] > topLeft[0] &&
|
|
targetPos[1] > topLeft[1] &&
|
|
targetPos[0] < bottomRight[0] &&
|
|
targetPos[1] < bottomRight[1]
|
|
);
|
|
}
|
|
|
|
const URL_PARTS_REGEX = /(?<protocolPlusDomain>.*?\..*?)(?<pathname>\/.*)/;
|
|
|
|
export function getDomainBase(raw: string, urlParts = URL_PARTS_REGEX): string {
|
|
try {
|
|
const url = new URL(raw);
|
|
|
|
return [url.protocol, url.hostname].join('//');
|
|
} catch (_) {
|
|
const match = urlParts.exec(raw);
|
|
|
|
if (!match?.groups?.protocolPlusDomain) return '';
|
|
|
|
return match.groups.protocolPlusDomain;
|
|
}
|
|
}
|
|
|
|
function isSensitive(segment: string) {
|
|
if (/^v\d+$/.test(segment)) return false;
|
|
|
|
return /%40/.test(segment) || /\d/.test(segment) || /^[0-9A-F]{8}/i.test(segment);
|
|
}
|
|
|
|
export const ANONYMIZATION_CHARACTER = '*';
|
|
|
|
function sanitizeRoute(raw: string, check = isSensitive, char = ANONYMIZATION_CHARACTER) {
|
|
return raw
|
|
.split('/')
|
|
.map((segment) => (check(segment) ? char.repeat(segment.length) : segment))
|
|
.join('/');
|
|
}
|
|
|
|
/**
|
|
* Return pathname plus query string from URL, anonymizing IDs in route and query params.
|
|
*/
|
|
export function getDomainPath(raw: string, urlParts = URL_PARTS_REGEX): string {
|
|
try {
|
|
const url = new URL(raw);
|
|
|
|
if (!url.hostname) throw new Error('Malformed URL');
|
|
|
|
return sanitizeRoute(url.pathname);
|
|
} catch (_) {
|
|
const match = urlParts.exec(raw);
|
|
|
|
if (!match?.groups?.pathname) return '';
|
|
|
|
// discard query string
|
|
const route = match.groups.pathname.split('?').shift() as string;
|
|
|
|
return sanitizeRoute(route);
|
|
}
|
|
}
|
|
|
|
export function generateNodesGraph(
|
|
workflow: IWorkflowBase,
|
|
nodeTypes: INodeTypes,
|
|
): INodesGraphResult {
|
|
const nodesGraph: INodesGraph = {
|
|
node_types: [],
|
|
node_connections: [],
|
|
nodes: {},
|
|
notes: {},
|
|
is_pinned: Object.keys(workflow.pinData ?? {}).length > 0,
|
|
};
|
|
const nodeNameAndIndex: INodeNameIndex = {};
|
|
const webhookNodeNames: string[] = [];
|
|
|
|
try {
|
|
const notes = workflow.nodes.filter((node) => node.type === STICKY_NODE_TYPE);
|
|
const otherNodes = workflow.nodes.filter((node) => node.type !== STICKY_NODE_TYPE);
|
|
|
|
notes.forEach((stickyNote: INode, index: number) => {
|
|
const stickyType = nodeTypes.getByNameAndVersion(STICKY_NODE_TYPE, stickyNote.typeVersion);
|
|
const { height, width } = getStickyDimensions(stickyNote, stickyType);
|
|
|
|
const topLeft = stickyNote.position;
|
|
const bottomRight: [number, number] = [topLeft[0] + width, topLeft[1] + height];
|
|
const overlapping = Boolean(
|
|
otherNodes.find((node) => areOverlapping(topLeft, bottomRight, node.position)),
|
|
);
|
|
nodesGraph.notes[index] = {
|
|
overlapping,
|
|
position: topLeft,
|
|
height,
|
|
width,
|
|
};
|
|
});
|
|
|
|
otherNodes.forEach((node: INode, index: number) => {
|
|
nodesGraph.node_types.push(node.type);
|
|
const nodeItem: INodeGraphItem = {
|
|
type: node.type,
|
|
position: node.position,
|
|
};
|
|
|
|
if (node.type === 'n8n-nodes-base.httpRequest' && node.typeVersion === 1) {
|
|
try {
|
|
nodeItem.domain = new URL(node.parameters.url as string).hostname;
|
|
} catch (_) {
|
|
nodeItem.domain = getDomainBase(node.parameters.url as string);
|
|
}
|
|
} else if (node.type === 'n8n-nodes-base.httpRequest' && node.typeVersion === 2) {
|
|
const { authentication } = node.parameters as { authentication: string };
|
|
|
|
nodeItem.credential_type = {
|
|
none: 'none',
|
|
genericCredentialType: node.parameters.genericAuthType as string,
|
|
existingCredentialType: node.parameters.nodeCredentialType as string,
|
|
}[authentication];
|
|
|
|
nodeItem.credential_set = node.credentials
|
|
? Object.keys(node.credentials).length > 0
|
|
: false;
|
|
|
|
const { url } = node.parameters as { url: string };
|
|
|
|
nodeItem.domain_base = getDomainBase(url);
|
|
nodeItem.domain_path = getDomainPath(url);
|
|
nodeItem.method = node.parameters.requestMethod as string;
|
|
} else if (node.type === 'n8n-nodes-base.webhook') {
|
|
webhookNodeNames.push(node.name);
|
|
} else {
|
|
const nodeType = nodeTypes.getByNameAndVersion(node.type);
|
|
|
|
nodeType?.description.properties.forEach((property) => {
|
|
if (
|
|
property.name === 'operation' ||
|
|
property.name === 'resource' ||
|
|
property.name === 'mode'
|
|
) {
|
|
nodeItem[property.name] = property.default ? property.default.toString() : undefined;
|
|
}
|
|
});
|
|
|
|
nodeItem.operation = node.parameters.operation?.toString() ?? nodeItem.operation;
|
|
nodeItem.resource = node.parameters.resource?.toString() ?? nodeItem.resource;
|
|
nodeItem.mode = node.parameters.mode?.toString() ?? nodeItem.mode;
|
|
}
|
|
nodesGraph.nodes[`${index}`] = nodeItem;
|
|
nodeNameAndIndex[node.name] = index.toString();
|
|
});
|
|
|
|
const getGraphConnectionItem = (startNode: string, connectionItem: IConnection) => {
|
|
return { start: nodeNameAndIndex[startNode], end: nodeNameAndIndex[connectionItem.node] };
|
|
};
|
|
|
|
Object.keys(workflow.connections).forEach((nodeName) => {
|
|
const connections = workflow.connections[nodeName];
|
|
connections.main.forEach((element) => {
|
|
element.forEach((element2) => {
|
|
nodesGraph.node_connections.push(getGraphConnectionItem(nodeName, element2));
|
|
});
|
|
});
|
|
});
|
|
} catch (_) {
|
|
return { nodeGraph: nodesGraph, nameIndices: nodeNameAndIndex, webhookNodeNames };
|
|
}
|
|
|
|
return { nodeGraph: nodesGraph, nameIndices: nodeNameAndIndex, webhookNodeNames };
|
|
}
|