From 2506db88f2a430e539ae4e0fd7a25181b3a5f522 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 2 Dec 2019 14:21:58 -0500
Subject: [PATCH] Ellipsis workflow node names that are too long to fit on the
 node

---
 .../WorkflowJobTemplateVisualizer/Graph.jsx   | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Graph.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Graph.jsx
index 85b2b50559..dea14d0041 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Graph.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Graph.jsx
@@ -10,7 +10,7 @@ import WorkflowHelpDetails from './WorkflowHelpDetails';
 const SVG = styled.svg`
   display: flex;
   height: 100%;
-  background-color: #F6F6F6;
+  background-color: #f6f6f6;
 
   .WorkflowChart-tooltip {
     padding-left: 5px;
@@ -36,34 +36,36 @@ const SVG = styled.svg`
   }
 
   .WorkflowChart-action--add:hover {
-    background-color: #58B957;
+    background-color: #58b957;
   }
 
-  .WorkflowChart-action--edit:hover,.WorkflowChart-action--link:hover,.WorkflowChart-action--details:hover {
-    background-color: #0279BC;
+  .WorkflowChart-action--edit:hover,
+  .WorkflowChart-action--link:hover,
+  .WorkflowChart-action--details:hover {
+    background-color: #0279bc;
   }
 
   .WorkflowChart-action--delete:hover {
-    background-color: #D9534F;
+    background-color: #d9534f;
   }
 
   .WorkflowChart-tooltipArrows {
-    width 10px;
+    width: 10px;
   }
 
   .WorkflowChart-tooltipArrows--outer {
-    position:absolute;
+    position: absolute;
     top: calc(50% - 10px);
     width: 0;
     height: 0;
-    border-right: 10px solid #C4C4C4;
+    border-right: 10px solid #c4c4c4;
     border-top: 10px solid transparent;
     border-bottom: 10px solid transparent;
     margin: auto;
   }
 
   .WorkflowChart-tooltipArrows--inner {
-    position:absolute;
+    position: absolute;
     top: calc(50% - 10px);
     left: 6px;
     width: 0;
@@ -76,7 +78,7 @@ const SVG = styled.svg`
 
   .WorkflowChart-tooltipActions {
     background-color: white;
-    border: 1px solid #C4C4C4;
+    border: 1px solid #c4c4c4;
     border-radius: 2px;
     padding: 5px;
   }
@@ -84,6 +86,18 @@ const SVG = styled.svg`
   .WorkflowChart-tooltipContents {
     display: flex;
   }
+
+  .WorkflowChart-nameText {
+    font-size: 13px;
+    padding: 0px 10px;
+    text-align: center;
+    p {
+      margin-top: 20px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
 `;
 
 function Graph({ links, nodes, readOnly, i18n }) {
@@ -487,20 +501,17 @@ function Graph({ links, nodes, readOnly, i18n }) {
           });
 
         nodeRef
-          .append('text')
-          .attr('x', () => {
-            return nodeW / 2;
-          })
-          .attr('y', () => {
-            return nodeH / 2;
-          })
-          .attr('dy', '.35em')
-          .attr('text-anchor', 'middle')
-          .attr('class', 'WorkflowChart-defaultText WorkflowChart-nameText')
-          .text(d =>
-            d.unifiedJobTemplate && d.unifiedJobTemplate.name
-              ? d.unifiedJobTemplate.name
-              : 'NO NAME'
+          .append('foreignObject')
+          .attr('width', nodeW)
+          .attr('height', nodeH)
+          .attr('class', 'WorkflowChart-nameText')
+          .html(
+            d =>
+              `<p>${
+                d.unifiedJobTemplate
+                  ? d.unifiedJobTemplate.name
+                  : i18n._(t`DELETED`)
+              }</p>`
           );
 
         nodeRef