Add support for drag/drop to key formatted textareas

awx/ui/client/lib/components/input/_index.less

@@ -20,7 +20,7 @@
 }
 
 .at-Input-button {
-    width: @at-input-button-width;
+    min-width: @at-input-button-width;
     display: block;
     height: 100%;
 
@@ -56,7 +56,6 @@
     z-index: 3;
 }
 
-
 .at-InputGroup {
     padding: 0;
     margin: 0;

awx/ui/client/lib/components/input/select.partial.html

@@ -16,7 +16,9 @@
                     ng-attr-tabindex="{{ tab || undefined }}" 
                     ng-disabled="state._disabled || form.disabled"
                     ng-change="vm.updateDisplayModel()"
-                    ng-options="{{ state._exp }}"></select>
+                    ng-options="{{ state._exp }}">
+                <option style="display:none"></option>
+            </select>
 
             <i class="fa" ng-class="{ 'fa-chevron-down': !open, 'fa-chevron-up': open }"></i>
         </div>

awx/ui/client/lib/components/input/textarea-secret.directive.js

@@ -16,6 +16,7 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
 
     let scope;
     let textarea;
+    let container;
     let input;
 
     vm.init = (_scope_, element, form) => {
@@ -23,60 +24,63 @@ function AtInputTextareaSecretController (baseInputController, eventService) {
 
         scope = _scope_;
         textarea = element.find('textarea')[0];
+        container = element[0];
+
+        scope.pre = {};
+        scope.state._edit = true;
 
         if (scope.state.format === 'ssh_private_key') {
             scope.ssh = true;
             scope.state._hint = scope.state._hint || DEFAULT_HINT;
             input = element.find('input')[0];
             vm.setFileListeners(textarea, input);
-        } else {
+        }
+
+        if (scope.state._edit) {
+            scope.edit = true;
             scope.isShown = true;
-            scope.buttonText = 'HIDE';
+            scope.buttonText = 'REPLACE';
         }
 
         vm.check();
     };
 
     vm.setFileListeners = (textarea, input) => { 
-        textarea
-        let eventNames = [
-            'drag',
-            'dragstart',
-            'dragend',
-            'dragover',
-            'dragenter',
-            'dragleave',
-            'drop'
-        ];
-
         eventService.addListener(textarea, 'dragenter', event => {
-            console.log('enter');
-            scope.drag = true;
-        });
-
-        eventService.addListener(input, ['dragleave', 'dragover'], event => {
-            console.log('exit');
-            scope.drag = false;
-        });
-
-        eventService.addListener(input, 'drop', event => {
-            vm.readFile(event.originalEvent.dataTransfer.files);
-        });
-
-        eventService.addListener(input, eventNames, event => {
             event.stopPropagation();
+            event.preventDefault();
+            scope.$apply(() => scope.drag = true);
+        });
+
+        eventService.addListener(input, 'dragleave', event => {
+            event.stopPropagation();
+            event.preventDefault();
+            scope.$apply(() => scope.drag = false);
+        });
+
+        eventService.addListener(input, 'change', event => {
+            let reader = new FileReader();
+
+            reader.onload = () => vm.readFile(reader, event);
+            reader.readAsText(input.files[0]);
         });
     };
 
-    vm.readFile = () => {
-        console.log(file);
+    vm.readFile = (reader, event) => {
+        scope.$apply(() => {
+            scope.state._value = reader.result;
+            scope.drag = false
+        });
     };
 
     vm.toggle = () => {
         if (scope.isShown) {
-            scope.buttonText = 'SHOW';
+            scope.buttonText = 'REVERT';
+            scope.pre.value = scope.state._value;
+            scope.state._value = undefined;
         } else {
-            scope.buttonText = 'HIDE';
+            scope.state._value = scope.pre.value;
+            scope.buttonText = 'REPLACE';
         }
 
         scope.isShown = !scope.isShown;

awx/ui/client/lib/components/input/textarea-secret.partial.html

@@ -2,9 +2,10 @@
     <div class="form-group at-u-flat">
         <at-input-label></at-input-label>
 
-        <div class="input-group">
-            <span class="input-group-btn at-InputGroup-button">
-                <button class="btn at-ButtonHollow--white at-Input-button"
+        <div ng-class="{ 'input-group': edit }">
+            <span ng-if="edit" class="input-group-btn at-InputGroup-button">
+                <button ng-if="edit"
+                        class="btn at-ButtonHollow--white at-Input-button"
                         ng-disabled="state._disabled || form.disabled"
                         ng-click="vm.toggle()">
                     {{ buttonText }}