frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve feedback in import dialog to show conflicted nodes

Browse Source 
Fixes #4549
This commit is contained in:
Nick O'Leary 2024-01-29 17:48:01 +00:00
parent 9bd7131914
commit 4268a04a04
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
3 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -303,7 +303,8 @@
"missingType": "Input not a valid flow - item __index__ missing 'type' property"
},
"conflictNotification1": "Some of the nodes you are importing already exist in your workspace.",
"conflictNotification2": "Select which nodes to import and whether to replace the existing nodes, or to import a copy of them."
"conflictNotification2": "Select which nodes to import and whether to replace the existing nodes, or to import a copy of them.",
"alreadyExists": "This node already exists"
},
"copyMessagePath": "Path copied",
"copyMessageValue": "Value copied",

23
packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js vendored
View File

@ -819,7 +819,7 @@ RED.clipboard = (function() {
flow.forEach(function(node) {
if (node.type === "tab") {
flows[node.id] = {
element: getFlowLabel(node,false),
element: getFlowLabel(node),
deferBuild: type !== "flow",
expanded: type === "flow",
children: []
@ -1170,9 +1170,9 @@ RED.clipboard = (function() {
function getNodeElement(n, isConflicted, isSelected, parent) {
var element;
if (n.type === "tab") {
element = getFlowLabel(n, isSelected);
element = getFlowLabel(n, isConflicted);
} else {
element = getNodeLabel(n, isConflicted, isSelected);
element = getNodeLabel(n, isConflicted, isSelected, parent);
}
var controls = $('<div>',{class:"red-ui-clipboard-dialog-import-conflicts-controls"}).appendTo(element);
controls.on("click", function(evt) { evt.stopPropagation(); });
@ -1222,14 +1222,14 @@ RED.clipboard = (function() {
}
}
function getFlowLabel(n) {
function getFlowLabel(n, isConflicted) {
n = JSON.parse(JSON.stringify(n));
n._def = RED.nodes.getType(n.type) || {};
if (n._def) {
n._ = n._def._;
}
var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow"});
var div = $('<div>',{class:"red-ui-info-outline-item red-ui-info-outline-item-flow red-ui-node-list-item"});
var contentDiv = $('<div>',{class:"red-ui-search-result-description red-ui-info-outline-item-label"}).appendTo(div);
var label = (typeof n === "string")? n : n.label;
var newlineIndex = label.indexOf("\\n");
@ -1237,11 +1237,17 @@ RED.clipboard = (function() {
label = label.substring(0,newlineIndex)+"...";
}
contentDiv.text(label);
if (!!isConflicted) {
const conflictIcon = $('<span style="padding: 0 10px;"><i class="fa fa-exclamation-circle"></span>').appendTo(div)
RED.popover.tooltip(conflictIcon, RED._('clipboard.import.alreadyExists'))
}
// A conflicted flow should not be imported by default.
return div;
}
function getNodeLabel(n, isConflicted) {
function getNodeLabel(n, isConflicted, isSelected, parent) {
n = JSON.parse(JSON.stringify(n));
n._def = RED.nodes.getType(n.type) || {};
if (n._def) {
@ -1249,6 +1255,11 @@ RED.clipboard = (function() {
}
var div = $('<div>',{class:"red-ui-node-list-item"});
RED.utils.createNodeIcon(n,true).appendTo(div);
if (!parent && !!isConflicted) {
const conflictIcon = $('<span style="padding: 0 10px;"><i class="fa fa-exclamation-circle"></span>').appendTo(div)
RED.popover.tooltip(conflictIcon, RED._('clipboard.import.alreadyExists'))
}
return div;
}

20
packages/node_modules/@node-red/editor-client/src/sass/library.scss vendored
View File

@ -194,10 +194,6 @@
}
}
.red-ui-clipboard-dialog-import-conflicts-controls {
position: absolute;
top:0;
bottom: 0;
right: 0px;
text-align: center;
color: var(--red-ui-form-text-color);
.form-row & label {
@ -218,9 +214,21 @@
margin: 0;
}
}
#red-ui-clipboard-dialog-import-conflicts-list .disabled .red-ui-info-outline-item {
opacity: 0.4;
#red-ui-clipboard-dialog-import-conflicts-list .disabled {
.red-ui-info-outline-item,
.red-ui-node-list-item {
opacity: 0.4;
}
}
#red-ui-clipboard-dialog-import-conflicts-list .red-ui-node-list-item {
display: flex;
align-items: center;
& > :first-child {
flex-grow: 1
}
}
.form-row label.red-ui-clipboard-dialog-import-conflicts-gutter {
box-sizing: border-box;
width: 22px;