fixes tests

awx/ui_next/src/screens/Dashboard/shared/LineChart.js

@@ -33,16 +33,13 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
     const width = getWidth();
 
     function transition(path) {
-      path
+      path.transition().duration(1000).attrTween('stroke-dasharray', tweenDash);
-        .transition()
-        .duration(1000)
-        .attrTween('stroke-dasharray', tweenDash);
     }
 
     function tweenDash(...params) {
       const l = params[2][params[1]].getTotalLength();
       const i = d3.interpolateString(`0,${l}`, `${l},${l}`);
-      return val => i(val);
+      return (val) => i(val);
     }
 
     const x = d3.scaleTime().rangeRound([0, width]);
@@ -83,7 +80,7 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
       const b_max = Math.max(b.RAN > b.FAIL ? b.RAN : b.FAIL);
       return a_max > b_max ? a_max : b_max;
     }, 0);
-    x.domain(d3.extent(formattedData, d => d.DATE));
+    x.domain(d3.extent(formattedData, (d) => d.DATE));
     y.domain([
       0,
       largestY > 4 ? largestY + Math.max(largestY / 10, 1) : 5,
@@ -92,15 +89,15 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
     const successLine = d3
       .line()
       .curve(d3.curveMonotoneX)
-      .x(d => x(d.DATE))
+      .x((d) => x(d.DATE))
-      .y(d => y(d.RAN));
+      .y((d) => y(d.RAN));
 
     const failLine = d3
       .line()
-      .defined(d => typeof d.FAIL === 'number')
+      .defined((d) => typeof d.FAIL === 'number')
       .curve(d3.curveMonotoneX)
-      .x(d => x(d.DATE))
+      .x((d) => x(d.DATE))
-      .y(d => y(d.FAIL));
+      .y((d) => y(d.FAIL));
     // Add the Y Axis
     svg
       .append('g')
@@ -135,11 +132,11 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
     const maxTicks = Math.round(
       formattedData.length / (formattedData.length / 2)
     );
-    ticks = formattedData.map(d => d.DATE);
+    ticks = formattedData.map((d) => d.DATE);
     if (formattedData.length === 31) {
       ticks = formattedData
         .map((d, i) => (i % maxTicks === 0 ? d.DATE : undefined))
-        .filter(item => item);
+        .filter((item) => item);
     }
 
     svg.select('.domain').attr('stroke', '#d7d7d7');
@@ -218,9 +215,9 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
         .attr('r', 3)
         .style('stroke', () => colors(1))
         .style('fill', () => colors(1))
-        .attr('cx', d => x(d.DATE))
+        .attr('cx', (d) => x(d.DATE))
-        .attr('cy', d => y(d.RAN))
+        .attr('cy', (d) => y(d.RAN))
-        .attr('id', d => `success-dot-${dateFormat(d.DATE)}`)
+        .attr('id', (d) => `success-dot-${dateFormat(d.DATE)}`)
         .on('mouseover', (event, d) => handleMouseOver(event, d))
         .on('mousemove', handleMouseMove)
         .on('mouseout', handleMouseOut);
@@ -248,9 +245,9 @@ function LineChart({ id, data, height, pageContext, jobStatus }) {
         .attr('r', 3)
         .style('stroke', () => colors(0))
         .style('fill', () => colors(0))
-        .attr('cx', d => x(d.DATE))
+        .attr('cx', (d) => x(d.DATE))
-        .attr('cy', d => y(d.FAIL))
+        .attr('cy', (d) => y(d.FAIL))
-        .attr('id', d => `fail-dot-${dateFormat(d.DATE)}`)
+        .attr('id', (d) => `fail-dot-${dateFormat(d.DATE)}`)
         .on('mouseover', handleMouseOver)
         .on('mousemove', handleMouseMove)
         .on('mouseout', handleMouseOut);
@@ -282,11 +279,11 @@ LineChart.propTypes = {
   height: number.isRequired,
 };
 
-const withPageContext = Component =>
+const withPageContext = (Component) =>
   function contextComponent(props) {
     return (
       <PageContextConsumer>
-        {pageContext => <Component {...props} pageContext={pageContext} />}
+        {(pageContext) => <Component {...props} pageContext={pageContext} />}
       </PageContextConsumer>
     );
   };

awx/ui_next/src/screens/Job/JobOutput/HostEventModal.js

@@ -17,7 +17,7 @@ const HostNameDetailValue = styled.div`
   grid-template-columns: auto auto;
 `;
 
-const processEventStatus = event => {
+const processEventStatus = (event) => {
   let status = null;
   if (event.event === 'runner_on_unreachable') {
     status = 'unreachable';
@@ -43,7 +43,7 @@ const processEventStatus = event => {
   return status;
 };
 
-const processCodeEditorValue = value => {
+const processCodeEditorValue = (value) => {
   let codeEditorValue;
   if (value === undefined) {
     codeEditorValue = false;
@@ -57,7 +57,7 @@ const processCodeEditorValue = value => {
   return codeEditorValue;
 };
 
-const processStdOutValue = hostEvent => {
+const processStdOutValue = (hostEvent) => {
   const taskAction = hostEvent?.event_data?.taskAction;
   const res = hostEvent?.event_data?.res;
 

awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputGraph.js

@@ -24,12 +24,11 @@ function WorkflowOutputGraph() {
   const svgRef = useRef(null);
   const gRef = useRef(null);
 
-  const { links, nodePositions, nodes, showLegend, showTools } = useContext(
+  const { links, nodePositions, nodes, showLegend, showTools } =
-    WorkflowStateContext
+    useContext(WorkflowStateContext);
-  );
 
   // This is the zoom function called by using the mousewheel/click and drag
-  const zoom = event => {
+  const zoom = (event) => {
     const translation = [event.transform.x, event.transform.y];
     d3.select(gRef.current).attr(
       'transform',
@@ -38,7 +37,7 @@ function WorkflowOutputGraph() {
     setZoomPercentage(event.transform.k * 100);
   };
 
-  const handlePan = direction => {
+  const handlePan = (direction) => {
     const transform = d3.zoomTransform(d3.select(svgRef.current).node());
     let { x: xPos, y: yPos } = transform;
     const { k: currentScale } = transform;
@@ -75,7 +74,7 @@ function WorkflowOutputGraph() {
     setZoomPercentage(100);
   };
 
-  const handleZoomChange = newScale => {
+  const handleZoomChange = (newScale) => {
     const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
     const currentScaleAndOffset = d3.zoomTransform(
       d3.select(svgRef.current).node()
@@ -100,10 +99,7 @@ function WorkflowOutputGraph() {
       .node()
       .getBoundingClientRect();
 
-    const gBBoxDimensions = d3
+    const gBBoxDimensions = d3.select(gRef.current).node().getBBox();
-      .select(gRef.current)
-      .node()
-      .getBBox();
 
     const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
     const [scaleToFit, yTranslate] = getScaleAndOffsetToFit(
@@ -119,10 +115,7 @@ function WorkflowOutputGraph() {
     setZoomPercentage(scaleToFit * 100);
   };
 
-  const zoomRef = d3
+  const zoomRef = d3.zoom().scaleExtent([0.1, 2]).on('zoom', zoom);
-    .zoom()
-    .scaleExtent([0.1, 2])
-    .on('zoom', zoom);
 
   // Initialize the zoom
   useEffect(() => {
@@ -154,7 +147,7 @@ function WorkflowOutputGraph() {
         <g id="workflow-g" ref={gRef}>
           {nodePositions && [
             <WorkflowStartNode key="start" showActionTooltip={false} />,
-            links.map(link => (
+            links.map((link) => (
               <WorkflowOutputLink
                 key={`link-${link.source.id}-${link.target.id}`}
                 link={link}
@@ -162,7 +155,7 @@ function WorkflowOutputGraph() {
                 mouseLeave={() => setLinkHelp(null)}
               />
             )),
-            nodes.map(node => {
+            nodes.map((node) => {
               if (node.id > 1) {
                 return (
                   <WorkflowOutputNode

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

@@ -50,7 +50,7 @@ function VisualizerGraph({ readOnly }) {
   } = useContext(WorkflowStateContext);
   const dispatch = useContext(WorkflowDispatchContext);
 
-  const drawPotentialLinkToNode = node => {
+  const drawPotentialLinkToNode = (node) => {
     if (node.id !== addLinkSourceNode.id) {
       const sourceNodeX = nodePositions[addLinkSourceNode.id].x;
       const sourceNodeY =
@@ -71,7 +71,7 @@ function VisualizerGraph({ readOnly }) {
     dispatch({ type: 'CANCEL_LINK' });
   };
 
-  const drawPotentialLinkToCursor = e => {
+  const drawPotentialLinkToCursor = (e) => {
     const currentTransform = d3.zoomTransform(d3.select(gRef.current).node());
     const rect = e.target.getBoundingClientRect();
     const mouseX = e.clientX - rect.left;
@@ -84,15 +84,16 @@ function VisualizerGraph({ readOnly }) {
     d3.select('#workflow-potentialLink')
       .attr(
         'points',
-        `${startX},${startY} ${mouseX / currentTransform.k -
+        `${startX},${startY} ${
-          currentTransform.x / currentTransform.k},${mouseY /
+          mouseX / currentTransform.k - currentTransform.x / currentTransform.k
-          currentTransform.k -
+        },${
-          currentTransform.y / currentTransform.k}`
+          mouseY / currentTransform.k - currentTransform.y / currentTransform.k
+        }`
       )
       .raise();
   };
   // This is the zoom function called by using the mousewheel/click and drag
-  const zoom = event => {
+  const zoom = (event) => {
     const translation = [event.transform.x, event.transform.y];
     d3.select(gRef.current).attr(
       'transform',
@@ -101,7 +102,7 @@ function VisualizerGraph({ readOnly }) {
     setZoomPercentage(event.transform.k * 100);
   };
 
-  const handlePan = direction => {
+  const handlePan = (direction) => {
     const transform = d3.zoomTransform(d3.select(svgRef.current).node());
     let { x: xPos, y: yPos } = transform;
     const { k: currentScale } = transform;
@@ -138,7 +139,7 @@ function VisualizerGraph({ readOnly }) {
     setZoomPercentage(100);
   };
 
-  const handleZoomChange = newScale => {
+  const handleZoomChange = (newScale) => {
     const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
     const currentScaleAndOffset = d3.zoomTransform(
       d3.select(svgRef.current).node()
@@ -163,10 +164,7 @@ function VisualizerGraph({ readOnly }) {
       .node()
       .getBoundingClientRect();
 
-    const gBBoxDimensions = d3
+    const gBBoxDimensions = d3.select(gRef.current).node().getBBox();
-      .select(gRef.current)
-      .node()
-      .getBBox();
 
     const svgBoundingClientRect = svgRef.current.getBoundingClientRect();
     const [scaleToFit, yTranslate] = getScaleAndOffsetToFit(
@@ -182,10 +180,7 @@ function VisualizerGraph({ readOnly }) {
     setZoomPercentage(scaleToFit * 100);
   };
 
-  const zoomRef = d3
+  const zoomRef = d3.zoom().scaleExtent([0.1, 2]).on('zoom', zoom);
-    .zoom()
-    .scaleExtent([0.1, 2])
-    .on('zoom', zoom);
 
   // Initialize the zoom
   useEffect(() => {
@@ -231,7 +226,7 @@ function VisualizerGraph({ readOnly }) {
           opacity="0"
           width="100%"
           {...(addingLink && {
-            onMouseMove: e => drawPotentialLinkToCursor(e),
+            onMouseMove: (e) => drawPotentialLinkToCursor(e),
             onMouseOver: () =>
               setHelpText(
                 t`Click an available node to create a new link.  Click outside the graph to cancel.`
@@ -242,7 +237,7 @@ function VisualizerGraph({ readOnly }) {
         />
         <g id="workflow-g" ref={gRef}>
           {nodePositions && [
-            links.map(link => {
+            links.map((link) => {
               if (
                 nodePositions[link.source.id] &&
                 nodePositions[link.target.id]
@@ -252,22 +247,22 @@ function VisualizerGraph({ readOnly }) {
                     key={`link-${link.source.id}-${link.target.id}`}
                     link={link}
                     readOnly={readOnly}
-                    updateLinkHelp={newLinkHelp => setLinkHelp(newLinkHelp)}
+                    updateLinkHelp={(newLinkHelp) => setLinkHelp(newLinkHelp)}
-                    updateHelpText={newHelpText => setHelpText(newHelpText)}
+                    updateHelpText={(newHelpText) => setHelpText(newHelpText)}
                   />
                 );
               }
               return null;
             }),
-            nodes.map(node => {
+            nodes.map((node) => {
               if (node.id > 1 && nodePositions[node.id] && !node.isDeleted) {
                 return (
                   <VisualizerNode
                     key={`node-${node.id}`}
                     node={node}
                     readOnly={readOnly}
-                    updateHelpText={newHelpText => setHelpText(newHelpText)}
+                    updateHelpText={(newHelpText) => setHelpText(newHelpText)}
-                    updateNodeHelp={newNodeHelp => setNodeHelp(newNodeHelp)}
+                    updateNodeHelp={(newNodeHelp) => setNodeHelp(newNodeHelp)}
                     {...(addingLink && {
                       onMouseOver: () => drawPotentialLinkToNode(node),
                     })}

awx/ui_next/src/setupTests.js

@@ -12,7 +12,7 @@ jest.setTimeout(120000);
 require('@nteract/mockument');
 
 // eslint-disable-next-line import/prefer-default-export
-export const asyncFlush = () => new Promise(resolve => setImmediate(resolve));
+export const asyncFlush = () => new Promise((resolve) => setImmediate(resolve));
 
 let hasConsoleError = false;
 let hasConsoleWarn = false;
@@ -38,7 +38,7 @@ global.console = {
   },
 };
 
-const logNetworkRequestError = url => {
+const logNetworkRequestError = (url) => {
   networkRequestUrl = url || true;
   return {
     status: 200,