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

Improve feedback in import dialog to show conflicted nodes

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

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

packages/node_modules/@node-red/editor-client/locales/fr/editor.json

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

packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js

@@ -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;
     }
 

packages/node_modules/@node-red/editor-client/src/sass/library.scss

@@ -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;