From 73d21a01cbef3294de2f92ec40f9e90434973d9d Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 26 Aug 2020 17:03:48 -0400
Subject: [PATCH] Adds visualizer button to workflow template rows on templates
 list

---
 .../TemplateList/TemplateListItem.jsx         | 21 +++++++++++++---
 .../TemplateList/TemplateListItem.test.jsx    | 25 +++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
index eb0be40346..10a34bedc7 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
@@ -15,6 +15,7 @@ import { withI18n } from '@lingui/react';
 import {
   ExclamationTriangleIcon,
   PencilAltIcon,
+  ProjectDiagramIcon,
   RocketIcon,
 } from '@patternfly/react-icons';
 import styled from 'styled-components';
@@ -32,7 +33,7 @@ const DataListAction = styled(_DataListAction)`
   align-items: center;
   display: grid;
   grid-gap: 16px;
-  grid-template-columns: repeat(3, 40px);
+  grid-template-columns: repeat(4, 40px);
 `;
 
 function TemplateListItem({
@@ -104,6 +105,20 @@ function TemplateListItem({
           ]}
         />
         <DataListAction aria-label="actions" aria-labelledby={labelId}>
+          {template.type === 'workflow_job_template' && (
+            <Tooltip content={i18n._(t`Visualizer`)} position="top">
+              <Button
+                isDisabled={isDisabled}
+                aria-label={i18n._(t`Visualizer`)}
+                css="grid-column: 1"
+                variant="plain"
+                component={Link}
+                to={`/templates/workflow_job_template/${template.id}/visualizer`}
+              >
+                <ProjectDiagramIcon />
+              </Button>
+            </Tooltip>
+          )}
           {template.summary_fields.user_capabilities.start && (
             <Tooltip content={i18n._(t`Launch Template`)} position="top">
               <LaunchButton resource={template}>
@@ -111,7 +126,7 @@ function TemplateListItem({
                   <Button
                     isDisabled={isDisabled}
                     aria-label={i18n._(t`Launch template`)}
-                    css="grid-column: 1"
+                    css="grid-column: 2"
                     variant="plain"
                     onClick={handleLaunch}
                   >
@@ -126,7 +141,7 @@ function TemplateListItem({
               <Button
                 isDisabled={isDisabled}
                 aria-label={i18n._(t`Edit Template`)}
-                css="grid-column: 2"
+                css="grid-column: 3"
                 variant="plain"
                 component={Link}
                 to={`/templates/${template.type}/${template.id}/edit`}
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
index 674e8fa824..3c02c82672 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
@@ -239,4 +239,29 @@ describe('<TemplateListItem />', () => {
     );
     expect(wrapper.find('CopyButton').length).toBe(0);
   });
+
+  test('should render visualizer button for workflow', async () => {
+    const wrapper = mountWithContexts(
+      <TemplateListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/1/details"
+        template={{
+          ...mockJobTemplateData,
+          type: 'workflow_job_template',
+        }}
+      />
+    );
+    expect(wrapper.find('ProjectDiagramIcon').length).toBe(1);
+  });
+
+  test('should not render visualizer button for job template', async () => {
+    const wrapper = mountWithContexts(
+      <TemplateListItem
+        isSelected={false}
+        detailUrl="/templates/job_template/1/details"
+        template={mockJobTemplateData}
+      />
+    );
+    expect(wrapper.find('ProjectDiagramIcon').length).toBe(0);
+  });
 });