open and close workflow visualizer from list

awx/ui/client/features/templates/templates.strings.js

@@ -12,6 +12,7 @@ function TemplatesStrings (BaseString) {
         PANEL_TITLE: t.s('TEMPLATES'),
         ADD_DD_JT_LABEL: t.s('Job Template'),
         ADD_DD_WF_LABEL: t.s('Workflow Template'),
+        OPEN_WORKFLOW_VISUALIZER: t.s('Click here to open the workflow visualizer'),
         ROW_ITEM_LABEL_ACTIVITY: t.s('Activity'),
         ROW_ITEM_LABEL_INVENTORY: t.s('Inventory'),
         ROW_ITEM_LABEL_PROJECT: t.s('Project'),

awx/ui/client/features/templates/templatesList.controller.js

@@ -101,6 +101,14 @@ function ListTemplatesController(
 
     vm.isPortalMode = $state.includes('portalMode');
 
+    vm.openWorkflowVisualizer = template => {
+        const name = 'templates.editWorkflowJobTemplate.workflowMaker';
+        const params = { workflow_job_template_id: template.id };
+        const options = { reload: false };
+
+        $state.go(name, params, options);
+    };
+
     vm.deleteTemplate = template => {
         if (!template) {
             Alert(strings.get('error.DELETE'), strings.get('alert.MISSING_PARAMETER'));

awx/ui/client/features/templates/templatesList.view.html

@@ -93,6 +93,11 @@
                     ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.copy"
                     tooltip="{{:: vm.strings.get('listActions.COPY', vm.getType(template)) }}">
                 </at-row-action>
+                <at-row-action icon="fa-sitemap" ng-click="vm.openWorkflowVisualizer(template)"
+                    ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.edit"
+                    ng-if="template.type === 'workflow_job_template'"
+                    tooltip="{{:: vm.strings.get('list.OPEN_WORKFLOW_VISUALIZER') }}">
+                </at-row-action>
                 <at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)"
                     ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.delete"
                     tooltip="{{:: vm.strings.get('listActions.DELETE', vm.getType(template)) }}">

awx/ui/client/src/templates/workflows.form.js

@@ -237,14 +237,6 @@ export default ['NotificationsList', 'i18n', function(NotificationsList, i18n) {
                     class: 'Form-primaryButton',
                     awToolTip: '{{surveyTooltip}}',
                     dataPlacement: 'top'
-                },
-                workflow_visualizer: {
-                    ngClick: 'openWorkflowMaker()',
-                    ngShow: '$state.is(\'templates.addWorkflowJobTemplate\') || $state.is(\'templates.editWorkflowJobTemplate\') || $state.is(\'templates.editWorkflowJobTemplate.workflowMaker\')',
-                    awToolTip: '{{workflowVisualizerTooltip}}',
-                    dataPlacement: 'top',
-                    label: i18n._('Workflow Visualizer'),
-                    class: 'Form-primaryButton'
                 }
             }
         };

awx/ui/client/src/templates/workflows/edit-workflow/workflow-edit.controller.js

@@ -60,10 +60,6 @@ export default [
             $scope.inventory_name = Inventory.name;
         }
 
-        $scope.openWorkflowMaker = function() {
-            $state.go('.workflowMaker');
-        };
-
         $scope.formSave = function () {
             let fld, data = {};
             $scope.invalid_survey = false;
@@ -266,7 +262,6 @@ export default [
             opts: opts
         });
 
-        $scope.workflowVisualizerTooltip = i18n._("Click here to open the workflow visualizer.");
         $scope.surveyTooltip = i18n._('Surveys allow users to be prompted at job launch with a series of questions related to the job. This allows for variables to be defined that affect the playbook run at time of launch.');
 
         $scope.workflow_job_template_obj = workflowJobTemplateData;

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.controller.js

@@ -6,10 +6,10 @@
 
 export default ['$scope', 'WorkflowService', 'TemplatesService',
     'ProcessErrors', 'CreateSelect2', '$q', 'JobTemplateModel', 'WorkflowJobTemplateModel',
-    'Empty', 'PromptService', 'Rest', 'TemplatesStrings', '$timeout',
+    'Empty', 'PromptService', 'Rest', 'TemplatesStrings', '$timeout', '$state',
     function ($scope, WorkflowService, TemplatesService,
         ProcessErrors, CreateSelect2, $q, JobTemplate, WorkflowJobTemplate,
-        Empty, PromptService, Rest, TemplatesStrings, $timeout) {
+        Empty, PromptService, Rest, TemplatesStrings, $timeout, $state) {
 
         let promptWatcher, surveyQuestionWatcher, credentialsWatcher;
 
@@ -360,6 +360,7 @@ export default ['$scope', 'WorkflowService', 'TemplatesService',
             // Revert the data to the master which was created when the dialog was opened
             $scope.treeData.data = angular.copy($scope.treeDataMaster);
             $scope.closeDialog();
+            $state.transitionTo('templates');
         };
 
         $scope.saveWorkflowMaker = function () {
@@ -409,6 +410,7 @@ export default ['$scope', 'WorkflowService', 'TemplatesService',
                             return $q.all(associatePromises.concat(credentialPromises))
                                 .then(function () {
                                     $scope.closeDialog();
+                                    $state.transitionTo('templates');
                                 });
                         }).catch(({
                             data,
@@ -432,6 +434,7 @@ export default ['$scope', 'WorkflowService', 'TemplatesService',
                 $q.all(deletePromises)
                     .then(function () {
                         $scope.closeDialog();
+                        $state.transitionTo('templates');
                     });
             }
         };