Merge pull request #96 from marshmalien/ux/fix/templates

[UX] Template and Workflow Editor

awx/ui/client/legacy-styles/forms.less

@@ -73,9 +73,7 @@
     margin-left: 10px;
     text-transform: uppercase;
     font-weight: 100;
-    //position: absolute;
     margin-top: 2.25px;
-    height: 16px;
 }
 
 .Form-exitHolder {
@@ -525,6 +523,11 @@ input[type='radio']:checked:before {
 
 .Form-mixedInputGroup {
     width: 100%;
+
+    .Form-lookupButton {
+        border-right:1px solid @field-border;
+
+    }
 }
 
 .FormToggle {}

awx/ui/client/legacy-styles/lists.less

@@ -463,14 +463,33 @@ table, tbody {
     justify-content: flex-end;
     font-size: 0.8em;
     cursor: pointer;
+
+    .popover-content {
+        dl {
+            display: flex;
+            margin: 0;
+        }
+        dt, dd {
+            flex: 1 1 50%;
+            font-weight: inherit;
+            margin: 0;
+        }
+    }
 }
 
-.List-infoCell a {
+.List-infoCell--badge {
-    color: @default-icon;
+    height: 15px;
-}
-
-.List-infoCell a:hover, .List-infoCell a:focus {
     color: @default-interface-txt;
+    background-color: @default-list-header-bg;
+    border-radius: 5px;
+    font-size: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: 10px;
+    text-transform: uppercase;
+    font-weight: 100;
+    margin-top: 2.25px;
+    outline: none;
 }
 
 .List-actionsInner {

awx/ui/client/src/partials/job-template-details.html

@@ -1,3 +1,3 @@
 <div class="List-infoCell">
-    <a aw-pop-over="<div>INVENTORY: {{(job_template.summary_fields.inventory.name | sanitize) || 'NONE SELECTED'}}</div><div>PROJECT: {{job_template.summary_fields.project.name | sanitize}}</div><div>PLAYBOOK: {{job_template.playbook| sanitize}}</div><div>CREDENTIAL: {{(job_template.summary_fields.credential.name | sanitize) || 'NONE SELECTED'}}</div>" data-popover-title="{{job_template.name| sanitize}}">INFO</a>
+    <span class="List-infoCell--badge" aw-pop-over="<dl><dt>{{ 'INVENTORY' | translate }}</dt><dd>{{(job_template.summary_fields.inventory.name | sanitize) || ('NONE SELECTED' | translate)}}</dd></dl><dl><dt>{{ 'PROJECT' | translate }}</dt><dd>{{job_template.summary_fields.project.name | sanitize}}</dd></dl><dl><dt>{{ 'PLAYBOOK' | translate }}</dt><dd>{{job_template.playbook| sanitize}}</dd></dl><dl><dt>{{ 'CREDENTIAL' | translate }}</dt> <dd>{{(job_template.summary_fields.credential.name | sanitize) || ('NONE SELECTED' | translate)}}</dd></dl>" data-popover-title="{{job_template.name| sanitize}}" translate>INFO</span>
 </div>

awx/ui/client/src/templates/job_templates/job-template.form.js

@@ -127,7 +127,7 @@ function(NotificationsList, CompletedJobsList, i18n) {
                     includePlaybookNotFoundError: true
                 },
                 credential: {
-                    label: i18n._('Credentials'),
+                    label: i18n._('Credential'),
                     type: 'custom',
                     control: `
                         <multi-credential
@@ -249,6 +249,17 @@ function(NotificationsList, CompletedJobsList, i18n) {
                     },
                     ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
                 },
+                labels: {
+                    label: i18n._('Labels'),
+                    type: 'select',
+                    ngOptions: 'label.label for label in labelOptions track by label.value',
+                    multiSelect: true,
+                    dataTitle: i18n._('Labels'),
+                    dataPlacement: 'right',
+                    awPopOver: "<p>" + i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.") + "</p>",
+                    dataContainer: 'body',
+                    ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
+                },
                 diff_mode: {
                     label: i18n._('Show Changes'),
                     type: 'toggleSwitch',
@@ -265,6 +276,7 @@ function(NotificationsList, CompletedJobsList, i18n) {
                 checkbox_group: {
                     label: i18n._('Options'),
                     type: 'checkbox_group',
+                    class: 'Form-formGroup--fullWidth',
                     fields: [{
                         name: 'become_enabled',
                         label: i18n._('Enable Privilege Escalation'),
@@ -344,18 +356,6 @@ function(NotificationsList, CompletedJobsList, i18n) {
                         alwaysShowAsterisk: true
                     }
                 },
-                labels: {
-                    label: i18n._('Labels'),
-                    type: 'select',
-                    class: 'Form-formGroup--fullWidth',
-                    ngOptions: 'label.label for label in labelOptions track by label.value',
-                    multiSelect: true,
-                    dataTitle: i18n._('Labels'),
-                    dataPlacement: 'right',
-                    awPopOver: "<p>" + i18n._("Optional labels that describe this job template, such as 'dev' or 'test'. Labels can be used to group and filter job templates and completed jobs.") + "</p>",
-                    dataContainer: 'body',
-                    ngDisabled: '!(job_template_obj.summary_fields.user_capabilities.edit || canAddJobTemplate)'
-                },
                 variables: {
                     label: i18n._('Extra Variables'),
                     type: 'textarea',
@@ -397,9 +397,6 @@ function(NotificationsList, CompletedJobsList, i18n) {
             },
 
             related: {
-                "completed_jobs": {
-                    include: "CompletedJobsList"
-                },
                 permissions: {
                     name: 'permissions',
                     awToolTip: i18n._('Please save before assigning permissions.'),
@@ -448,6 +445,9 @@ function(NotificationsList, CompletedJobsList, i18n) {
                 },
                 "notifications": {
                     include: "NotificationsList"
+                },
+                "completed_jobs": {
+                    include: "CompletedJobsList"
                 }
             },
 

awx/ui/client/src/templates/main.js

@@ -667,6 +667,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplates.
                                     nosort: true
                                 };
                                 list.maxVisiblePages = 5;
+                                list.searchBarFullWidth = true;
 
                                 return list;
                             }
@@ -688,6 +689,7 @@ angular.module('templates', [surveyMaker.name, templatesList.name, jobTemplates.
                             (InventorySourcesList) => {
                                 let list = _.cloneDeep(InventorySourcesList);
                                 list.maxVisiblePages = 5;
+                                list.searchBarFullWidth = true;
 
                                 return list;
                             }

awx/ui/client/src/templates/templates.list.js

@@ -64,7 +64,7 @@ export default ['i18n', function(i18n) {
                         ngShow: 'canAddJobTemplate'
                     },
                     {
-                        optionContent: i18n._('Workflow Job Template'),
+                        optionContent: i18n._('Workflow Template'),
                         optionSref: 'templates.addWorkflowJobTemplate',
                         ngShow: 'canAddWorkflowJobTemplate'
                     }

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.block.less

@@ -1,6 +1,11 @@
 .WorkflowMaker-dialog {
     padding: 0px;
     margin-bottom: 20px;
+    position: fixed;
+    top: 0 !important;
+    bottom: 0;
+    width: 100vw !important;
+    overflow: scroll;
 
     .ui-dialog-buttonpane, .ui-dialog-titlebar {
         display:none;

awx/ui/client/src/templates/workflows/workflow-maker/workflow-maker.partial.html

@@ -21,7 +21,7 @@
     </div>
     <div class="WorkflowMaker-header">
         <div class="WorkflowMaker-title">
-            <div class="WorkflowMaker-titleText">EDIT WORKFLOW</div>
+            <div class="WorkflowMaker-titleText">{{ workflowJobTemplateObj.name }}</div>
         </div>
         <div class="WorkflowMaker-exitHolder">
             <button class="WorkflowMaker-exit" ng-click="closeWorkflowMaker()">