Merge pull request #4550 from node-red/4549-improve-import-confict-dialog

Improve feedback in import dialog to show conflicted nodes
pull/4558/head
Nick O'Leary 2024-02-06 16:36:15 +00:00 committed by GitHub
commit bb0b547d5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 14 deletions

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",

View File

@ -298,7 +298,8 @@
"missingType": "L'entrée n'est pas un flux valide - l'élément '__index__' n'a pas de propriété 'type'"
},
"conflictNotification1": "Certains des noeuds que vous avez importés existent déjà dans votre espace de travail.",
"conflictNotification2": "Sélectionnez les noeuds à importer et choisissez s'il faut remplacer les noeuds existants ou en importer une copie."
"conflictNotification2": "Sélectionnez les noeuds à importer et choisissez s'il faut remplacer les noeuds existants ou en importer une copie.",
"alreadyExists": "Ce noeud existe déjà"
},
"copyMessagePath": "Chemin copié",
"copyMessageValue": "Valeur copiée",

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: []
@ -1169,9 +1169,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(); });
@ -1221,14 +1221,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");
@ -1236,11 +1236,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) {
@ -1248,6 +1254,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;
}

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 {
#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;