From b5b619d4915f9044cc33477d38e68ac721cddd5b Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Mon, 19 Jun 2017 11:42:11 -0400
Subject: [PATCH] select2ify credential type in add cred modals

---
 .../src/job-submission/job-submission.block.less     |  5 +++++
 .../src/job-submission/job-submission.directive.js   | 10 ++++++++--
 .../src/job-submission/job-submission.partial.html   |  2 +-
 .../multi-credential-modal.directive.js              | 10 ++++++++--
 .../multi-credential-modal.partial.html              |  3 ++-
 .../multi-credential/multi-credential.block.less     | 12 ++++++++++++
 6 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/awx/ui/client/src/job-submission/job-submission.block.less b/awx/ui/client/src/job-submission/job-submission.block.less
index 5ff3a4b9a4..2af138796e 100644
--- a/awx/ui/client/src/job-submission/job-submission.block.less
+++ b/awx/ui/client/src/job-submission/job-submission.block.less
@@ -201,6 +201,7 @@
 .JobSubmission-credentialSubSection {
     display: flex;
     justify-content: flex-end;
+    align-items: center;
     margin-bottom: 15px;
 }
 .JobSubmission-selectedItemLabel, .JobSubmission-label {
@@ -251,3 +252,7 @@
 .JobSubmission-previewTagContainer {
     display: flex;
 }
+
+.JobSubmission-credentialSubSection .select2 {
+    width: 50% !important;
+}
diff --git a/awx/ui/client/src/job-submission/job-submission.directive.js b/awx/ui/client/src/job-submission/job-submission.directive.js
index 88a8cfe42f..20ea2fd793 100644
--- a/awx/ui/client/src/job-submission/job-submission.directive.js
+++ b/awx/ui/client/src/job-submission/job-submission.directive.js
@@ -6,8 +6,8 @@
 
 import jobSubmissionController from './job-submission.controller';
 
-export default [ 'templateUrl', 'CreateDialog', 'Wait', 'CreateSelect2', 'ParseTypeChange', 'GetSurveyQuestions',
-    function(templateUrl, CreateDialog, Wait, CreateSelect2, ParseTypeChange, GetSurveyQuestions) {
+export default [ 'templateUrl', 'CreateDialog', 'Wait', 'CreateSelect2', 'ParseTypeChange', 'GetSurveyQuestions', 'i18n',
+    function(templateUrl, CreateDialog, Wait, CreateSelect2, ParseTypeChange, GetSurveyQuestions, i18n) {
     return {
         scope: {
             submitJobId: '=',
@@ -55,6 +55,12 @@ export default [ 'templateUrl', 'CreateDialog', 'Wait', 'CreateSelect2', 'ParseT
                         multiple: false
                     });
 
+                    CreateSelect2({
+                        element: `#job-launch-credential-kind-select`,
+                        multiple: false,
+                        placeholder: i18n._('Select a credential')
+                    });
+
                     if(scope.step === 'otherprompts' && scope.ask_variables_on_launch) {
                         ParseTypeChange({
                             scope: scope,
diff --git a/awx/ui/client/src/job-submission/job-submission.partial.html b/awx/ui/client/src/job-submission/job-submission.partial.html
index 879abbee2e..7932ab1ee9 100644
--- a/awx/ui/client/src/job-submission/job-submission.partial.html
+++ b/awx/ui/client/src/job-submission/job-submission.partial.html
@@ -82,7 +82,7 @@
                     </div>
                     <div class="JobSubmission-credentialSubSection" ng-show="ask_credential_on_launch">
                         <span class="JobSubmission-label" translate>CREDENTIAL TYPE:</span>
-                        <select ng-model="credentialKind">
+                        <select id="job-launch-credential-kind-select" ng-model="credentialKind">
                             <option ng-repeat="option in credentialTypeOptions" value="{{option.value}}">{{option.name}}</option>
                         </select>
                     </div>
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js
index d2c5510ee8..8cc48a3237 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.directive.js
@@ -1,5 +1,5 @@
-export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile',
-    function(templateUrl, Rest, GetBasePath, GenerateList, $compile) {
+export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile', 'CreateSelect2', 'i18n',
+    function(templateUrl, Rest, GetBasePath, GenerateList, $compile, CreateSelect2, i18n) {
     return {
         restrict: 'E',
         scope: {
@@ -17,6 +17,12 @@ export default ['templateUrl', 'Rest', 'GetBasePath', 'generateList', '$compile'
                 $(element).remove();
             });
 
+            CreateSelect2({
+                element: `#multi-credential-kind-select`,
+                multiple: false,
+                placeholder: i18n._('Select a credential')
+            });
+
             scope.showModal = function() {
                 $('#multi-credential-modal').modal('show');
             };
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
index 72069cff6d..3aada2ef59 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
@@ -50,7 +50,8 @@
                     </div>
                 </div>
                 <div class="MultiCredential-credentialSubSection">
-                    <select ng-model="credentialKind">
+                    <span class="MultiCredential-selectLabel" translate>CREDENTIAL TYPE:</span>
+                    <select id="multi-credential-kind-select" ng-model="credentialKind">
                         <option ng-repeat="option in credentialTypeOptions"
                             value="{{option.value}}">{{option.name}}</option>
                     </select>
diff --git a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
index 599aacea8d..0255a1f5b7 100644
--- a/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
+++ b/awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
@@ -108,5 +108,17 @@
 .MultiCredential-credentialSubSection {
     display: flex;
     justify-content: flex-end;
+    align-items: center;
     margin-bottom: 15px;
 }
+
+.MultiCredential-credentialSubSection .select2 {
+    width: 50% !important;
+}
+
+.MultiCredential-selectLabel {
+    color: @default-interface-txt;
+    margin-right: 10px;
+    line-height: 24px;
+    text-transform: uppercase;
+}