Fix some styling discrepancies between Chrome and Firefox in the workflow viz/output graphs.

Cleans up deleted job/job template use cases.  Show message indicating that the ujt associated with a node has been deleted.

awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx

@@ -1,7 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import styled from 'styled-components';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { shape } from 'prop-types';
 import { secondsToHHMMSS } from '@util/dates';
 
@@ -18,11 +19,23 @@ const GridDL = styled.dl`
   }
 `;
 
+const ResourceDeleted = styled.p`
+  margin-bottom: ${props => (props.job ? '10px' : '0px')};
+`;
+
+const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon)`
+  color: #f0ad4d;
+  height: 20px;
+  margin-right: 10px;
+  width: 20px;
+`;
+
 function WorkflowNodeHelp({ node, i18n }) {
   let nodeType;
-  if (node.unifiedJobTemplate) {
+  if (node.unifiedJobTemplate || node.job) {
-    const type =
+    const type = node.unifiedJobTemplate
-      node.unifiedJobTemplate.unified_job_type || node.unifiedJobTemplate.type;
+      ? node.unifiedJobTemplate.unified_job_type || node.unifiedJobTemplate.type
+      : node.job.type;
     switch (type) {
       case 'job_template':
       case 'job':
@@ -97,10 +110,45 @@ function WorkflowNodeHelp({ node, i18n }) {
   }
 
   return (
-    <Fragment>
+    <>
+      {!node.unifiedJobTemplate && (
+        <>
+          <ResourceDeleted job={node.job}>
+            <StyledExclamationTriangleIcon />
+            <Trans>
+              The resource associated with this node has been deleted.
+            </Trans>
+          </ResourceDeleted>
+        </>
+      )}
+      {node.job && (
+        <GridDL>
+          <dt>
+            <b>{i18n._(t`Name`)}</b>
+          </dt>
+          <dd id="workflow-node-help-name">{node.job.name}</dd>
+          <dt>
+            <b>{i18n._(t`Type`)}</b>
+          </dt>
+          <dd id="workflow-node-help-type">{nodeType}</dd>
+          <dt>
+            <b>{i18n._(t`Job Status`)}</b>
+          </dt>
+          <dd id="workflow-node-help-status">{jobStatus}</dd>
+          {node.job.elapsed && (
+            <>
+              <dt>
+                <b>{i18n._(t`Elapsed`)}</b>
+              </dt>
+              <dd id="workflow-node-help-elapsed">
+                {secondsToHHMMSS(node.job.elapsed)}
+              </dd>
+            </>
+          )}
+        </GridDL>
+      )}
+      {node.unifiedJobTemplate && !node.job && (
         <GridDL>
-        {node.unifiedJobTemplate && (
-          <Fragment>
           <dt>
             <b>{i18n._(t`Name`)}</b>
           </dt>
@@ -109,31 +157,12 @@ function WorkflowNodeHelp({ node, i18n }) {
             <b>{i18n._(t`Type`)}</b>
           </dt>
           <dd id="workflow-node-help-type">{nodeType}</dd>
-          </Fragment>
-        )}
-        {node.job && (
-          <Fragment>
-            <dt>
-              <b>{i18n._(t`Job Status`)}</b>
-            </dt>
-            <dd id="workflow-node-help-status">{jobStatus}</dd>
-            {node.job.elapsed && (
-              <Fragment>
-                <dt>
-                  <b>{i18n._(t`Elapsed`)}</b>
-                </dt>
-                <dd id="workflow-node-help-elapsed">
-                  {secondsToHHMMSS(node.job.elapsed)}
-                </dd>
-              </Fragment>
-            )}
-          </Fragment>
-        )}
         </GridDL>
+      )}
       {node.job && (
         <p css="margin-top: 10px">{i18n._(t`Click to view job details`)}</p>
       )}
-    </Fragment>
+    </>
   );
 }
 

awx/ui_next/src/components/Workflow/WorkflowNodeHelp.test.jsx

@@ -10,6 +10,7 @@ describe('WorkflowNodeHelp', () => {
   test('renders the expected content for a completed job template job', () => {
     const node = {
       job: {
+        name: 'Foo Job Template',
         elapsed: 9000,
         status: 'successful',
       },

awx/ui_next/src/components/Workflow/WorkflowNodeTypeLetter.jsx

@@ -3,13 +3,15 @@ import styled from 'styled-components';
 import { shape } from 'prop-types';
 import { PauseIcon } from '@patternfly/react-icons';
 
-const NodeTypeLetter = styled.foreignObject`
+const NodeTypeLetter = styled.div`
   background-color: #393f43;
   border-radius: 50%;
   color: white;
   font-size: 10px;
   line-height: 20px;
   text-align: center;
+  height: 20px;
+  width: 20px;
 `;
 
 const CenteredPauseIcon = styled(PauseIcon)`
@@ -19,11 +21,14 @@ const CenteredPauseIcon = styled(PauseIcon)`
 function WorkflowNodeTypeLetter({ node }) {
   let nodeTypeLetter;
   if (
-    node.unifiedJobTemplate &&
+    (node.unifiedJobTemplate &&
-    (node.unifiedJobTemplate.type || node.unifiedJobTemplate.unified_job_type)
+      (node.unifiedJobTemplate.type ||
+        node.unifiedJobTemplate.unified_job_type)) ||
+    (node.job && node.job.type)
   ) {
-    const ujtType =
+    const ujtType = node.unifiedJobTemplate
-      node.unifiedJobTemplate.type || node.unifiedJobTemplate.unified_job_type;
+      ? node.unifiedJobTemplate.type || node.unifiedJobTemplate.unified_job_type
+      : node.job.type;
     switch (ujtType) {
       case 'job_template':
       case 'job':
@@ -51,9 +56,9 @@ function WorkflowNodeTypeLetter({ node }) {
   }
 
   return (
-    <NodeTypeLetter y="50" x="-10" height="20" width="20">
+    <foreignObject y="50" x="-10" height="20" width="20">
-      {nodeTypeLetter}
+      <NodeTypeLetter>{nodeTypeLetter}</NodeTypeLetter>
-    </NodeTypeLetter>
+    </foreignObject>
   );
 }
 

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx

@@ -43,7 +43,7 @@ const Elapsed = styled.div`
   }
 `;
 
-const NodeContents = styled.foreignObject`
+const NodeContents = styled.div`
   font-size: 13px;
   padding: 0px 10px;
 `;
@@ -98,16 +98,13 @@ function WorkflowOutputNode({ history, i18n, mouseEnter, mouseLeave, node }) {
         strokeWidth="2px"
         width={wfConstants.nodeW}
       />
-      <NodeContents height="60" width="180">
+      <foreignObject height="58" width="178" x="1" y="1">
+        <NodeContents>
           {node.job ? (
             <>
               <JobTopLine>
                 <StatusIcon status={node.job.status} />
-              <p>
+                <p>{node.job.name}</p>
-                {node.unifiedJobTemplate
-                  ? node.unifiedJobTemplate.name
-                  : i18n._(t`DELETED`)}
-              </p>
               </JobTopLine>
               <Elapsed>{secondsToHHMMSS(node.job.elapsed)}</Elapsed>
             </>
@@ -119,8 +116,10 @@ function WorkflowOutputNode({ history, i18n, mouseEnter, mouseLeave, node }) {
             </NodeDefaultLabel>
           )}
         </NodeContents>
-      <circle cy="60" r="10" fill="#393F43" />
+      </foreignObject>
-      {node.unifiedJobTemplate && <WorkflowNodeTypeLetter node={node} />}
+      {(node.unifiedJobTemplate || node.job) && (
+        <WorkflowNodeTypeLetter node={node} />
+      )}
     </NodeG>
   );
 }

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.test.jsx

@@ -24,7 +24,7 @@ const nodeWithoutJT = {
   job: {
     elapsed: 7,
     id: 9000,
-    name: 'Automation JT',
+    name: 'Automation JT 2',
     status: 'successful',
     type: 'job',
   },
@@ -87,7 +87,7 @@ describe('WorkflowOutputNode', () => {
         </WorkflowStateContext.Provider>
       </svg>
     );
-    expect(wrapper.contains(<p>DELETED</p>)).toEqual(true);
+    expect(wrapper.contains(<p>Automation JT 2</p>)).toEqual(true);
     expect(wrapper.find('WorkflowOutputNode__Elapsed').text()).toBe('00:00:07');
   });
   test('node contents displayed correctly when Job deleted', () => {

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.jsx

@@ -26,7 +26,7 @@ const NodeG = styled.g`
   cursor: ${props => (props.job ? 'pointer' : 'default')};
 `;
 
-const NodeContents = styled.foreignObject`
+const NodeContents = styled.div`
   font-size: 13px;
   padding: 0px 10px;
   background-color: ${props =>
@@ -183,25 +183,28 @@ function VisualizerNode({
             ? '#007ABC'
             : '#93969A'
         }
-        strokeWidth="4px"
+        strokeWidth="2px"
         width={wfConstants.nodeW}
       />
-      <NodeContents
+      <foreignObject
-        height="60"
+        height="58"
-        isInvalidLinkTarget={node.isInvalidLinkTarget}
         {...(!addingLink && {
           onMouseEnter: () => updateNodeHelp(node),
           onMouseLeave: () => updateNodeHelp(null),
         })}
         onClick={() => handleNodeClick()}
-        width="180"
+        width="178"
+        x="1"
+        y="1"
       >
+        <NodeContents isInvalidLinkTarget={node.isInvalidLinkTarget}>
           <NodeDefaultLabel>
             {node.unifiedJobTemplate
               ? node.unifiedJobTemplate.name
               : i18n._(t`DELETED`)}
           </NodeDefaultLabel>
         </NodeContents>
+      </foreignObject>
       {node.unifiedJobTemplate && <WorkflowNodeTypeLetter node={node} />}
       {hovering && !addingLink && (
         <WorkflowActionTooltip