From cf6b6d831ff0d3723851db3421a20d8fb478f113 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Mon, 14 Jun 2021 11:08:26 -0400
Subject: [PATCH] adds visualizer button to output toolbar

---
 .../WorkflowOutput/WorkflowOutputToolbar.jsx  | 26 ++++++++++++++++---
 .../WorkflowOutputToolbar.test.jsx            | 10 +++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
index bcfe7fcc6c..be396a6eb5 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
@@ -1,9 +1,14 @@
 import React, { useContext } from 'react';
-
+import { useHistory } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import { shape } from 'prop-types';
 import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
-import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
+
+import {
+  CompassIcon,
+  WrenchIcon,
+  ProjectDiagramIcon,
+} from '@patternfly/react-icons';
 import styled from 'styled-components';
 import StatusIcon from '../../../components/StatusIcon';
 import {
@@ -58,11 +63,15 @@ const StatusIconWithMargin = styled(StatusIcon)`
 
 function WorkflowOutputToolbar({ job }) {
   const dispatch = useContext(WorkflowDispatchContext);
-
+  const history = useHistory();
   const { nodes, showLegend, showTools } = useContext(WorkflowStateContext);
 
   const totalNodes = nodes.reduce((n, node) => n + !node.isDeleted, 0) - 1;
-
+  const navToWorkflow = () => {
+    history.push(
+      `/templates/workflow_job_template/${job.unified_job_template}/visualizer`
+    );
+  };
   return (
     <Toolbar id="workflow-output-toolbar">
       <ToolbarJob>
@@ -70,6 +79,15 @@ function WorkflowOutputToolbar({ job }) {
         <b>{job.name}</b>
       </ToolbarJob>
       <ToolbarActions>
+        <ActionButton
+          ouiaId="edit-workflow"
+          aria-label={t`Edit workflow`}
+          id="edit-workflow"
+          variant="plain"
+          onClick={navToWorkflow}
+        >
+          <ProjectDiagramIcon />
+        </ActionButton>
         <div>{t`Total Nodes`}</div>
         <Badge isRead>{totalNodes}</Badge>
         <Tooltip content={t`Toggle Legend`} position="bottom">
diff --git a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx
index 6fbe4ff9eb..b597c35f0d 100644
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.test.jsx
@@ -18,6 +18,9 @@ const workflowContext = {
   showTools: false,
 };
 
+function shouldFind(element) {
+  expect(wrapper.find(element)).toHaveLength(1);
+}
 describe('WorkflowOutputToolbar', () => {
   beforeAll(() => {
     const nodes = [
@@ -45,6 +48,13 @@ describe('WorkflowOutputToolbar', () => {
     wrapper.unmount();
   });
 
+  test('should render correct toolbar item', () => {
+    shouldFind(`Button[ouiaId="edit-workflow"]`);
+    shouldFind('Button#workflow-output-toggle-legend');
+    shouldFind('Badge');
+    shouldFind('Button#workflow-output-toggle-tools');
+  });
+
   test('Shows correct number of nodes', () => {
     // The start node (id=1) and deleted nodes (isDeleted=true) should be ignored
     expect(wrapper.find('Badge').text()).toBe('1');