ATLAS-2692: updated UI to render deleted relationships differently from active ones

dashboardv2/public/css/scss/common.scss

@@ -34,6 +34,12 @@
         &.btn[data-id="addTag"] {
             display: none;
         }
+        &.btn[data-id="addTerm"] {
+            display: none;
+        }
+        &.btn[data-id="editButton"] {
+            display: none;
+        }
         &.editbutton[data-id="editButton"] {
             display: none !important;
         }

dashboardv2/public/css/scss/relationship.scss

@@ -30,7 +30,7 @@
         box-shadow: 4px 13px 14px -12px;
         background: #e7e7e7;
         transform: scaleX(0);
-        width: 200px;
+        width: 240px;
         transition: transform 0.3s ease-in;
         &.open {
             transform: scaleX(1);
@@ -55,12 +55,22 @@
             overflow: auto;
             list-style-type: decimal;
             list-style-position: outside;
-            padding-left: 30px;
+            padding-left: 15px;
         }
         ul>li {
             word-wrap: break-word;
             margin-bottom: 5px;
             text-align: left;
+
+            &.deleted-relation {
+                a {
+                    color: #BB5838 !important;
+                }
+                .deleteBtn {
+                    padding: 2px 8px !important;
+                    margin: 5px 5px !important;
+                }
+            }
         }
     }
 }
\ No newline at end of file

dashboardv2/public/js/views/graph/RelationshipLayoutView.js

@@ -118,7 +118,9 @@ define(['require',
                 this.$("[data-id='typeName']").text(typeName);
                 var getElement = function(options) {
                     var name = options.entityName ? options.entityName : Utils.getName(options, "displayText");
-                    return "<li><a href=#!/detailPage/" + options.guid + "?tabActive=relationship>" + _.escape(name) + " (" + options.typeName + ")</a></li>";
+                    return "<li class=" + (Enums.entityStateReadOnly[options.relationshipStatus] ? "deleted-relation" : '') + "><a href=#!/detailPage/" + options.guid + "?tabActive=relationship>" + _.escape(name) + " (" + options.typeName + ")</a>" +
+                        '<button type="button" title="Deleted" class="btn btn-sm deleteBtn deletedTableBtn ' + (Enums.entityStateReadOnly[options.relationshipStatus] ? "" : 'hide') + '"><i class="fa fa-trash"></i></button>' +
+                        "</li>";
                 }
                 if (_.isArray(data)) {
                     if (data.length > 1) {
@@ -304,6 +306,20 @@ define(['require',
                         });
                     }
                 })
+
+                function isSingleRelationDeleted(data) {
+                    var d = $.extend(true, {}, data);
+                    if (!_.isArray(d.value)) {
+                        d.value = [d.value];
+                    }
+                    if (d && _.isArray(d.value)) {
+                        if (d.value.length == 1 && Enums.entityStateReadOnly[_.first(d.value).relationshipStatus]) {
+                            return true;
+                        } else {
+                            return false;
+                        }
+                    }
+                }
                 circleContainer.append("circle")
                     .attr("cx", 0)
                     .attr("cy", 0)
@@ -314,6 +330,8 @@ define(['require',
                     .attr("fill", function(d) {
                         if (d && d.value && d.value.guid == that.guid) {
                             return activeEntityColor;
+                        } else if (isSingleRelationDeleted(d)) {
+                            return "#BB5838";
                         } else {
                             return "#e0e0e0";
                         }
@@ -343,6 +361,8 @@ define(['require',
                     .attr("fill", function(d) {
                         if (d && d.value && d.value.guid == that.guid) {
                             return "#fff";
+                        } else if (isSingleRelationDeleted(d)) {
+                            return "#fff";
                         } else {
                             return "#000";
                         }