From 957804e22a13b0bb910b6e1a392cf3c31c35e808 Mon Sep 17 00:00:00 2001
From: Jake McDermott <yo@jakemcdermott.me>
Date: Tue, 12 Mar 2019 20:26:42 -0400
Subject: [PATCH] enable input source linking for textarea fields

---
 .../input-source-lookup.partial.html          | 12 ++---
 .../client/lib/components/input/_index.less   | 19 ++++++++
 .../components/input/textarea.directive.js    | 13 +++++-
 .../components/input/textarea.partial.html    | 45 ++++++++++++++-----
 4 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/awx/ui/client/features/credentials/input-source-lookup.partial.html b/awx/ui/client/features/credentials/input-source-lookup.partial.html
index 844fb5887d..74de2429f2 100644
--- a/awx/ui/client/features/credentials/input-source-lookup.partial.html
+++ b/awx/ui/client/features/credentials/input-source-lookup.partial.html
@@ -18,11 +18,13 @@
             {{::vm.strings.get('inputSources.SELECTED')}}
         </div>
         <span>
-            <at-tag
-                ng-show="vm.selectedName"
-                tag="vm.selectedName"
-                icon="external"
-            />
+            <div class="at-InputTagContainer">
+                <at-tag
+                    ng-show="vm.selectedName"
+                    tag="vm.selectedName"
+                    icon="external"
+                />
+            </div>
             <div
                 class="InputSourceLookup-selectedItemText"
                 ng-show="!vm.selectedName"
diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less
index 46ffdc7151..a6182e9168 100644
--- a/awx/ui/client/lib/components/input/_index.less
+++ b/awx/ui/client/lib/components/input/_index.less
@@ -75,6 +75,12 @@
     height: @at-height-textarea;
 }
 
+.at-Input-button--long-sm {
+    .at-mixin-InputButton();
+    max-width: @at-width-input-button-md;
+    min-height: @at-height-textarea;
+}
+
 .at-Input-button--active {
     .at-mixin-ButtonColor(at-color-info, at-color-default);
 }
@@ -329,8 +335,21 @@
     }
 }
 
+.at-InputTaggedTextarea {
+    .at-mixin-FontFixedWidth();
+    min-height: @at-height-textarea;
+    padding: 6px @at-padding-input 0 @at-padding-input;
+    border-radius: @at-border-radius;
+}
+
 .at-InputTagContainer {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
 }
+
+.at-InputTagContainer .TagComponent-name {
+    align-self: auto;
+    word-break: break-all;
+    font-family: 'Open Sans', sans-serif;
+}
diff --git a/awx/ui/client/lib/components/input/textarea.directive.js b/awx/ui/client/lib/components/input/textarea.directive.js
index d5ac607c51..2456f90252 100644
--- a/awx/ui/client/lib/components/input/textarea.directive.js
+++ b/awx/ui/client/lib/components/input/textarea.directive.js
@@ -13,12 +13,21 @@ function atInputTextareaLink (scope, element, attrs, controllers) {
 
 function AtInputTextareaController (baseInputController) {
     const vm = this || {};
+    let scope;
 
-    vm.init = (scope, element, form) => {
-        baseInputController.call(vm, 'input', scope, element, form);
+    vm.init = (_scope_, element, form) => {
+        baseInputController.call(vm, 'input', _scope_, element, form);
+        scope = _scope_;
 
         vm.check();
     };
+
+    vm.onLookupClick = () => {
+        if (scope.state._onInputLookup) {
+            const { id, label, required, type } = scope.state;
+            scope.state._onInputLookup({ id, label, required, type });
+        }
+    };
 }
 
 AtInputTextareaController.$inject = ['BaseInputController'];
diff --git a/awx/ui/client/lib/components/input/textarea.partial.html b/awx/ui/client/lib/components/input/textarea.partial.html
index bc0738dc9f..4eb276f35f 100644
--- a/awx/ui/client/lib/components/input/textarea.partial.html
+++ b/awx/ui/client/lib/components/input/textarea.partial.html
@@ -1,17 +1,40 @@
 <div class="col-sm-{{::col}} at-InputContainer">
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
-
-        <textarea class="form-control at-Input at-InputTextarea"
-                  ng-model="state._value"
-                  ng-class="{ 'at-Input--rejected': state._rejected }"
-                  ng-attr-rows="{{::state._rows || 6 }}"
-                  ng-attr-maxlength="{{ state.max_length || undefined }}"
-                  ng-attr-tabindex="{{ tab || undefined }}"
-                  ng-attr-placeholder="{{::state._placeholder || undefined }}"
-                  ng-change="vm.check()"
-                  ng-disabled="state._disabled || form.disabled" /></textarea>
-
+        <div ng-class="{ 'input-group': state.tagMode }">
+          <div class="input-group-btn at-InputGroup-button input-group-prepend" ng-show="state.tagMode">
+              <button class="btn at-ButtonHollow--white at-Input-button--long-sm"
+                      ng-disabled="state._disabled || form.disabled"
+                      ng-click="vm.onLookupClick()">
+                  <i class="fa fa-search"></i>
+              </button>
+          </div>
+          <div
+            ng-show="state.asTag"
+            class="form-control at-Input at-InputTaggedTextarea"
+            ng-class="{
+              'at-Input--rejected': state._rejected,
+             }"
+            >
+              <div class="at-InputTagContainer">
+                <at-tag
+                  icon="external"
+                  tag="state._tagValue"
+                  remove-tag="state._onRemoveTag(state)"
+                />
+              </div>
+          </div>
+          <textarea class="form-control at-Input at-InputTextarea"
+                    ng-show="!state.asTag"
+                    ng-model="state._value"
+                    ng-class="{ 'at-Input--rejected': state._rejected }"
+                    ng-attr-rows="{{::state._rows || 6 }}"
+                    ng-attr-maxlength="{{ state.max_length || undefined }}"
+                    ng-attr-tabindex="{{ tab || undefined }}"
+                    ng-attr-placeholder="{{::state._placeholder || undefined }}"
+                    ng-change="vm.check()"
+                    ng-disabled="state._disabled || form.disabled" />
+      </div>
         <at-input-message></at-input-message>
     </div>
 </div>