Add close button to workflow tools/key

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

@@ -2,18 +2,25 @@ import React from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import styled from 'styled-components';
-import { ExclamationTriangleIcon, PauseIcon } from '@patternfly/react-icons';
+import { func } from 'prop-types';
+import {
+  ExclamationTriangleIcon,
+  PauseIcon,
+  TimesIcon,
+} from '@patternfly/react-icons';
 
 const Wrapper = styled.div`
   background-color: white;
   border: 1px solid #c7c7c7;
   margin-left: 20px;
   min-width: 100px;
+  position: relative;
 `;
 
 const Header = styled.div`
   border-bottom: 1px solid #c7c7c7;
   padding: 10px;
+  position: relative;
 `;
 
 const Key = styled.ul`
@@ -63,11 +70,19 @@ const AlwaysLink = styled(Link)`
   background-color: #337ab7;
 `;
 
-function WorkflowKey({ i18n }) {
+const Close = styled(TimesIcon)`
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 15px;
+`;
+
+function WorkflowKey({ i18n, onClose }) {
   return (
     <Wrapper>
       <Header>
         <b>{i18n._(t`Key`)}</b>
+        <Close onClick={onClose} />
       </Header>
       <Key>
         <li>
@@ -113,4 +128,8 @@ function WorkflowKey({ i18n }) {
   );
 }
 
+WorkflowKey.propTypes = {
+  onClose: func.isRequired,
+};
+
 export default withI18n()(WorkflowKey);

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

@@ -4,7 +4,7 @@ import WorkflowKey from './WorkflowKey';
 
 describe('WorkflowKey', () => {
   test('renders the expected content', () => {
-    const wrapper = mountWithContexts(<WorkflowKey />);
+    const wrapper = mountWithContexts(<WorkflowKey onClose={() => {}} />);
     expect(wrapper).toHaveLength(1);
   });
 });

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

@@ -13,12 +13,14 @@ import {
   HomeIcon,
   MinusIcon,
   PlusIcon,
+  TimesIcon,
 } from '@patternfly/react-icons';
 
 const Wrapper = styled.div`
   background-color: white;
   border: 1px solid #c7c7c7;
   height: 135px;
+  position: relative;
 `;
 
 const Header = styled.div`
@@ -42,8 +44,16 @@ const Tools = styled.div`
   padding: 20px;
 `;
 
+const Close = styled(TimesIcon)`
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 15px;
+`;
+
 function WorkflowTools({
   i18n,
+  onClose,
   onFitGraph,
   onPan,
   onPanToMiddle,
@@ -70,6 +80,7 @@ function WorkflowTools({
     <Wrapper>
       <Header>
         <b>{i18n._(t`Tools`)}</b>
+        <Close onClick={onClose} />
       </Header>
       <Tools>
         <Tooltip
@@ -123,6 +134,7 @@ function WorkflowTools({
 }
 
 WorkflowTools.propTypes = {
+  onClose: func.isRequired,
   onFitGraph: func.isRequired,
   onPan: func.isRequired,
   onPanToMiddle: func.isRequired,

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

@@ -6,6 +6,7 @@ describe('WorkflowTools', () => {
   test('renders the expected content', () => {
     const wrapper = mountWithContexts(
       <WorkflowTools
+        onClose={() => {}}
         onFitGraph={() => {}}
         onPan={() => {}}
         onPanToMiddle={() => {}}
@@ -15,12 +16,14 @@ describe('WorkflowTools', () => {
     );
     expect(wrapper).toHaveLength(1);
   });
-  test('clicking zoom buttons passes callback correctly updated scale', () => {
+  test('clicking zoom/pan buttons passes callback correct values', () => {
+    const pan = jest.fn();
     const zoomChange = jest.fn();
     const wrapper = mountWithContexts(
       <WorkflowTools
+        onClose={() => {}}
         onFitGraph={() => {}}
-        onPan={() => {}}
+        onPan={pan}
         onPanToMiddle={() => {}}
         onZoomChange={zoomChange}
         zoomPercentage={95.7}
@@ -30,18 +33,6 @@ describe('WorkflowTools', () => {
     expect(zoomChange).toHaveBeenCalledWith(1.1);
     wrapper.find('MinusIcon').simulate('click');
     expect(zoomChange).toHaveBeenCalledWith(0.8);
-  });
-  test('clicking pan buttons passes callback correct string direction', () => {
-    const pan = jest.fn();
-    const wrapper = mountWithContexts(
-      <WorkflowTools
-        onFitGraph={() => {}}
-        onPan={pan}
-        onPanToMiddle={() => {}}
-        onZoomChange={() => {}}
-        zoomPercentage={100}
-      />
-    );
     wrapper.find('CaretLeftIcon').simulate('click');
     expect(pan).toHaveBeenCalledWith('left');
     wrapper.find('CaretUpIcon').simulate('click');

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

@@ -211,6 +211,8 @@ function WorkflowOutput({ job, i18n }) {
             links={graphLinks}
             nodePositions={nodePositions}
             nodes={graphNodes}
+            onUpdateShowKey={setShowKey}
+            onUpdateShowTools={setShowTools}
             showKey={showKey}
             showTools={showTools}
           />

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

@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
-import { arrayOf, bool, shape } from 'prop-types';
+import { arrayOf, bool, shape, func } from 'prop-types';
 import { calcZoomAndFit, getZoomTranslate } from '@util/workflow';
 import {
   WorkflowOutputLink,
@@ -18,6 +18,8 @@ function WorkflowOutputGraph({
   links,
   nodePositions,
   nodes,
+  onUpdateShowKey,
+  onUpdateShowTools,
   showKey,
   showTools,
 }) {
@@ -180,6 +182,7 @@ function WorkflowOutputGraph({
       <div css="position: absolute; top: 75px;right: 20px;display: flex;">
         {showTools && (
           <WorkflowTools
+            onClose={() => onUpdateShowTools(false)}
             onFitGraph={handleFitGraph}
             onPan={handlePan}
             onPanToMiddle={handlePanToMiddle}
@@ -187,7 +190,7 @@ function WorkflowOutputGraph({
             zoomPercentage={zoomPercentage}
           />
         )}
-        {showKey && <WorkflowKey />}
+        {showKey && <WorkflowKey onClose={() => onUpdateShowKey(false)} />}
       </div>
     </Fragment>
   );
@@ -197,6 +200,8 @@ WorkflowOutputGraph.propTypes = {
   links: arrayOf(shape()).isRequired,
   nodePositions: shape().isRequired,
   nodes: arrayOf(shape()).isRequired,
+  onUpdateShowKey: func.isRequired,
+  onUpdateShowTools: func.isRequired,
   showKey: bool.isRequired,
   showTools: bool.isRequired,
 };

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

@@ -825,6 +825,8 @@ function Visualizer({ history, template, i18n }) {
             onEditNodeClick={startEditNode}
             onLinkEditClick={setLinkToEdit}
             onStartAddLinkClick={selectSourceNodeForLinking}
+            onUpdateShowKey={setShowKey}
+            onUpdateShowTools={setShowTools}
             onViewNodeClick={setNodeToView}
             readOnly={!template.summary_fields.user_capabilities.edit}
             showKey={showKey}

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

@@ -47,6 +47,8 @@ function VisualizerGraph({
   onEditNodeClick,
   onLinkEditClick,
   onStartAddLinkClick,
+  onUpdateShowKey,
+  onUpdateShowTools,
   onViewNodeClick,
   readOnly,
   showKey,
@@ -329,6 +331,7 @@ function VisualizerGraph({
       <div css="position: absolute; top: 75px;right: 20px;display: flex;">
         {showTools && (
           <WorkflowTools
+            onClose={() => onUpdateShowTools(false)}
             onFitGraph={handleFitGraph}
             onPan={handlePan}
             onPanToMiddle={handlePanToMiddle}
@@ -336,7 +339,7 @@ function VisualizerGraph({
             zoomPercentage={zoomPercentage}
           />
         )}
-        {showKey && <WorkflowKey />}
+        {showKey && <WorkflowKey onClose={() => onUpdateShowKey(false)} />}
       </div>
     </>
   );
@@ -356,6 +359,8 @@ VisualizerGraph.propTypes = {
   onEditNodeClick: func.isRequired,
   onLinkEditClick: func.isRequired,
   onStartAddLinkClick: func.isRequired,
+  onUpdateShowKey: func.isRequired,
+  onUpdateShowTools: func.isRequired,
   onViewNodeClick: func.isRequired,
   readOnly: bool.isRequired,
   showKey: bool.isRequired,