Mark start node for translation

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

@@ -8,7 +8,6 @@ import {
   WorkflowDispatchContext,
   WorkflowStateContext,
 } from '../../contexts/Workflow';
-import { constants as wfConstants } from './WorkflowUtils';
 import WorkflowActionTooltip from './WorkflowActionTooltip';
 import WorkflowActionTooltipItem from './WorkflowActionTooltipItem';
 
@@ -16,8 +15,25 @@ const StartG = styled.g`
   pointer-events: ${props => (props.ignorePointerEvents ? 'none' : 'auto')};
 `;
 
+const StartForeignObject = styled.foreignObject`
+  overflow: visible;
+`;
+
+const StartDiv = styled.div`
+  background-color: #0279bc;
+  color: white;
+  width: max-content;
+  min-width: 80px;
+  height: 40px;
+  border-radius: 0.35em;
+  text-align: center;
+  line-height: 40px;
+  padding: 0px 10px;
+`;
+
 function WorkflowStartNode({ i18n, onUpdateHelpText, showActionTooltip }) {
   const ref = useRef(null);
+  const startNodeRef = useRef(null);
   const [hovering, setHovering] = useState(false);
   const dispatch = useContext(WorkflowDispatchContext);
   const { addingLink, nodePositions } = useContext(WorkflowStateContext);
@@ -36,18 +52,14 @@ function WorkflowStartNode({ i18n, onUpdateHelpText, showActionTooltip }) {
       ref={ref}
       transform={`translate(${nodePositions[1].x},0)`}
     >
-      <rect
+      <StartForeignObject
-        fill="#0279BC"
+        height="1"
-        height={wfConstants.rootH}
+        width="1"
-        rx="2"
-        ry="2"
-        width={wfConstants.rootW}
         y="10"
-      />
+        style={{ overflow: 'visible' }}
-      {/* TODO: We need to be able to handle translated text here */}
+      >
-      <text x="13" y="30" dy=".35em" fill="white">
+        <StartDiv ref={startNodeRef}>{i18n._(t`START`)}</StartDiv>
-        START
+      </StartForeignObject>
-      </text>
       {showActionTooltip && hovering && (
         <WorkflowActionTooltip
           actions={[
@@ -65,8 +77,8 @@ function WorkflowStartNode({ i18n, onUpdateHelpText, showActionTooltip }) {
               <PlusIcon />
             </WorkflowActionTooltipItem>,
           ]}
-          pointX={wfConstants.rootW}
+          pointX={startNodeRef.current.offsetWidth}
-          pointY={wfConstants.rootH / 2 + 10}
+          pointY={startNodeRef.current.offsetHeight / 2 + 10}
         />
       )}
     </StartG>

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

@@ -250,7 +250,7 @@ function VisualizerGraph({ i18n, readOnly }) {
         </defs>
         <rect
           height="100%"
-          id="workflow-backround"
+          id="workflow-background"
           opacity="0"
           width="100%"
           {...(addingLink && {
@@ -267,12 +267,6 @@ function VisualizerGraph({ i18n, readOnly }) {
         />
         <g id="workflow-g" ref={gRef}>
           {nodePositions && [
-            <WorkflowStartNode
-              key="start"
-              showActionTooltip={!readOnly}
-              onUpdateHelpText={setHelpText}
-              readOnly={readOnly}
-            />,
             links.map(link => {
               if (
                 nodePositions[link.source.id] &&
@@ -307,6 +301,12 @@ function VisualizerGraph({ i18n, readOnly }) {
               }
               return null;
             }),
+            <WorkflowStartNode
+              key="start"
+              showActionTooltip={!readOnly}
+              onUpdateHelpText={setHelpText}
+              readOnly={readOnly}
+            />,
           ]}
           {addingLink && (
             <PotentialLink

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

@@ -94,7 +94,8 @@ function VisualizerLink({
         ];
 
   const handleLinkMouseEnter = () => {
-    ref.current.parentNode.appendChild(ref.current);
+    const startNode = document.getElementById('node-1');
+    ref.current.parentNode.insertBefore(ref.current, startNode);
     setHovering(true);
   };