Merge pull request #94 from gconsidine/ui/fix/credentials-lookup

Ui/fix/credentials lookup

awx/ui/client/features/credentials/_index.less

@@ -1,3 +1,3 @@
 .at-CredentialsPermissions {
-    margin-top: 20px;
+    margin-top: 50px;
 }

awx/ui/client/features/credentials/add-credentials.controller.js

@@ -19,6 +19,8 @@ function AddCredentialsController (models, $state, strings) {
         omit: ['user', 'team', 'inputs']
     });
 
+    vm.form.disabled = !credential.isCreatable();
+
     vm.form.organization._resource = 'organization';
     vm.form.organization._route = 'credentials.add.organization';
     vm.form.organization._model = organization;
@@ -31,9 +33,9 @@ function AddCredentialsController (models, $state, strings) {
 
     vm.form.inputs = {
         _get: id => {
-            let type = credentialType.getById(id);
+            credentialType.mergeInputProperties();
 
-            return credentialType.mergeInputProperties(type);
+            return credentialType.get('inputs.fields');
         },
         _source: vm.form.credential_type,
         _reference: 'vm.form.inputs',

awx/ui/client/features/credentials/edit-credentials.controller.js

@@ -5,7 +5,6 @@ function EditCredentialsController (models, $state, $scope, strings) {
     let credential = models.credential;
     let credentialType = models.credentialType;
     let organization = models.organization;
-    let selectedCredentialType = models.selectedCredentialType;
 
     vm.mode = 'edit';
     vm.strings = strings;
@@ -36,10 +35,12 @@ function EditCredentialsController (models, $state, $scope, strings) {
     // Only exists for permissions compatibility
     $scope.credential_obj = credential.get();
 
-    vm.form = credential.createFormSchema('put', {
+    vm.form = credential.createFormSchema({
         omit: ['user', 'team', 'inputs']
     });
 
+    vm.form.disabled = !credential.isEditable();
+
     vm.form.organization._resource = 'organization';
     vm.form.organization._model = organization;
     vm.form.organization._route = 'credentials.edit.organization';
@@ -50,30 +51,34 @@ function EditCredentialsController (models, $state, $scope, strings) {
     vm.form.credential_type._resource = 'credential_type';
     vm.form.credential_type._model = credentialType;
     vm.form.credential_type._route = 'credentials.edit.credentialType';
-    vm.form.credential_type._value = selectedCredentialType.get('id');
-    vm.form.credential_type._displayValue = selectedCredentialType.get('name');
+    vm.form.credential_type._value = credentialType.get('id');
+    vm.form.credential_type._displayValue = credentialType.get('name');
     vm.form.credential_type._placeholder = strings.get('inputs.CREDENTIAL_TYPE_PLACEHOLDER');
  
     vm.form.inputs = {
         _get (id) {
-            let type = credentialType.getById(id);
-            let inputs = credentialType.mergeInputProperties(type);
+            credentialType.mergeInputProperties();
             
-            if (type.id === credential.get('credential_type')) {
-                inputs = credential.assignInputGroupValues(inputs);
+            if (credentialType.get('id') === credential.get('credential_type')) {
+                return credential.assignInputGroupValues(credentialType.get('inputs.fields'));
             }
 
-            return inputs;
+            return credentialType.get('inputs.fields');
         },
         _source: vm.form.credential_type,
         _reference: 'vm.form.inputs',
         _key: 'inputs'
     };
 
+    /**
+     * If a credential's `credential_type` is changed while editing, the inputs associated with 
+     * the old type need to be cleared before saving the inputs associated with the new type. 
+     * Otherwise inputs are merged together making the request invalid.
+     */
     vm.form.save = data => {
         data.user = me.getSelf().id;
-        credential.clearTypeInputs();
-                
+        credential.unset('inputs');
+
         return credential.request('put', data);
     };
 

awx/ui/client/features/credentials/index.js

@@ -5,16 +5,15 @@ import CredentialsStrings from './credentials.strings'
 
 function CredentialsResolve ($q, $stateParams, Me, Credential, CredentialType, Organization) {
     let id = $stateParams.credential_id;
-    let models;
 
     let promises = {
-        me: new Me('get'),
-        credentialType: new CredentialType('get'),
-        organization: new Organization('get')
+        me: new Me('get')
     };
 
     if (!id) {
         promises.credential = new Credential('options');
+        promises.credentialType =  new CredentialType();
+        promises.organization =  new Organization();
 
         return $q.all(promises)
     }
@@ -22,16 +21,22 @@ function CredentialsResolve ($q, $stateParams, Me, Credential, CredentialType, O
     promises.credential = new Credential(['get', 'options'], [id, id]);
 
     return $q.all(promises)
-        .then(_models_ => {
-            models = _models_;
-            let credentialTypeId = models.credential.get('credential_type');
+        .then(models => {
+            let typeId = models.credential.get('credential_type');
+            let orgId = models.credential.get('organization');
 
-            return models.credentialType.graft(credentialTypeId);
-        })
-        .then(selectedCredentialType => {
-            models.selectedCredentialType = selectedCredentialType;
+            let dependents = {
+                credentialType: new CredentialType('get', typeId),
+                organization: new Organization('get', orgId)
+            };
 
-            return models;
+            return $q.all(dependents)
+                .then(related => {
+                    models.credentialType = related.credentialType;
+                    models.organization = related.organization;
+
+                    return models;
+                });
         });
 }
 

awx/ui/client/lib/components/form/action.partial.html

@@ -1,5 +1,5 @@
 <button class="btn at-Button{{ fill }}--{{ color }}"
-        ng-disabled="form.disabled || (type === 'save' && !form.isValid)"
+        ng-disabled="type !== 'cancel' && (form.disabled || (type === 'save' && !form.isValid))"
         ng-click="action()">
     {{::text}}
 </button>

awx/ui/client/lib/components/form/form.directive.js

@@ -27,6 +27,8 @@ function AtFormController (eventService, strings) {
         form = _form_;
         modal = scope[scope.ns].modal;
 
+        vm.state.disabled = scope.state.disabled;
+
         vm.setListeners();
     };
 

awx/ui/client/lib/components/input/base.controller.js

@@ -67,16 +67,22 @@ function BaseInputController (strings) {
             };
         };
 
-        vm.check = () => {
-            let result = vm.validate();
-
-            if (scope.state._touched || !scope.state._required) {
-                scope.state._rejected = !result.isValid;
-                scope.state._isValid = result.isValid;
-                scope.state._message = result.message;
-
-                form.check();
+        vm.updateValidationState = result => {
+            if (!scope.state._touched && scope.state._required) {
+                return;
             }
+
+            scope.state._rejected = !result.isValid;
+            scope.state._isValid = result.isValid;
+            scope.state._message = result.message;
+
+            form.check();
+        };
+
+        vm.check = result => {
+            result = result || vm.validate();
+
+            vm.updateValidationState(result);
         };
 
         vm.toggleRevertReplace = () => {

awx/ui/client/lib/components/input/lookup.directive.js

@@ -1,3 +1,6 @@
+const DEFAULT_DEBOUNCE = 250;
+const DEFAULT_KEY = 'name';
+
 function atInputLookupLink (scope, element, attrs, controllers) {
     let formController = controllers[0];
     let inputController = controllers[1];
@@ -9,28 +12,40 @@ function atInputLookupLink (scope, element, attrs, controllers) {
     inputController.init(scope, element, formController);
 }
 
-function AtInputLookupController (baseInputController, $state, $stateParams) {
+function AtInputLookupController (baseInputController, $q, $state, $stateParams) {
     let vm = this || {};
 
     let scope;
+    let model;
+    let search;
 
     vm.init = (_scope_, element, form) => {
         baseInputController.call(vm, 'input', _scope_, element, form);
 
         scope = _scope_;
+        model = scope.state._model;
+        scope.state._debounce = scope.state._debounce || DEFAULT_DEBOUNCE;
+        search = scope.state._search || {
+            key: DEFAULT_KEY,
+            config: {
+                unique: true
+            }
+        };
 
         scope.$watch(scope.state._resource, vm.watchResource);
-        scope.state._validate = vm.checkOnInput;
 
         vm.check();
     };
 
     vm.watchResource = () => {
+        if (!scope[scope.state._resource]) {
+            return;
+        }
+
         if (scope[scope.state._resource] !== scope.state._value) {
-            scope.state._value = scope[scope.state._resource];
             scope.state._displayValue = scope[`${scope.state._resource}_name`];
 
-            vm.check();
+            vm.search();
         }
     };
 
@@ -49,32 +64,58 @@ function AtInputLookupController (baseInputController, $state, $stateParams) {
         scope[scope.state._resource] = undefined;
     };
 
-    vm.checkOnInput = () => {
-        if (!scope.state._touched) {
-            return { isValid: true };
+    vm.searchAfterDebounce = () => {
+        vm.isDebouncing = true;
+
+        vm.debounce = window.setTimeout(() => {
+            vm.isDebouncing = false;
+            vm.search();
+        }, scope.state._debounce);
+    };
+
+    vm.resetDebounce = () => {
+        clearTimeout(vm.debounce);
+        vm.searchAfterDebounce(); 
+    };
+
+    vm.search = () => {
+        scope.state._touched = true;
+
+        if (scope.state._displayValue === '' && !scope.state._required) {
+            return vm.check({ isValid: true });
         }
 
-        let result = scope.state._model.match('get', 'name', scope.state._displayValue);
+        return model.search({ [search.key]: scope.state._displayValue }, search.config)
+            .then(found => {
+                if (!found) {
+                    return vm.reset();
+                }
 
-        if (result) {
-            scope[scope.state._resource] = result.id;
-            scope.state._value = result.id;
-            scope.state._displayValue = result.name;
+                scope[scope.state._resource] = model.get('id');
+                scope.state._value = model.get('id');
+                scope.state._displayValue = model.get('name');
+            })
+            .catch(() => vm.reset())
+            .finally(() => {
+                let isValid = scope.state._value !== undefined;
+                let message = isValid ? '' : vm.strings.get('lookup.NOT_FOUND');
 
-            return { isValid: true };
+                vm.check({ isValid, message });
+            });
+    };
+
+    vm.searchOnInput = () => {
+        if (vm.isDebouncing) {
+            return vm.resetDebounce();
         }
 
-        vm.reset();
-
-        return {
-            isValid: false,
-            message: vm.strings.get('lookup.NOT_FOUND')
-        };
+        vm.searchAfterDebounce();
     };
 }
 
 AtInputLookupController.$inject = [
     'BaseInputController',
+    '$q',
     '$state',
     '$stateParams'
 ];

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

@@ -16,7 +16,7 @@
                ng-model="state._displayValue"
                ng-attr-tabindex="{{ tab || undefined }}"
                ng-attr-placeholder="{{::state._placeholder || undefined }}"
-               ng-change="vm.check()"
+               ng-change="vm.searchOnInput()"
                ng-disabled="state._disabled || form.disabled" />
         </div>
 

awx/ui/client/lib/models/Base.js

@@ -11,16 +11,54 @@ function request (method, resource) {
     return this.http[method](resource);
 }
 
-function httpGet (resource) {
-    this.method = this.method || 'GET';
-
+/**
+ * Intended to be useful in searching and filtering results using params
+ * supported by the API.
+ *
+ * @param {object} params - An object of keys and values to to format and
+ * to the URL as a query string. Refer to the API documentation for the 
+ * resource in use for specifics.
+ * @param {object} config - Configuration specific to the UI to accommodate
+ * common use cases.
+ *
+ * @returns {Promise} - $http
+ * @yields {(Boolean|object)}
+ */
+function search (params, config) {
     let req = {
-        method: this.method,
+        method: 'GET',
+        url: this.path,
+        params
+    };
+
+    return $http(req)
+        .then(({ data }) => {
+            if (!data.count) {
+                return false;
+            }
+
+            if (config.unique) {
+                if (data.count !== 1) {
+                    return false;
+                }
+
+                this.model.GET = data.results[0];
+            } else {
+                this.model.GET = data;
+            }
+
+            return true;
+        });
+}
+
+function httpGet (resource) {
+    let req = {
+        method: 'GET',
         url: this.path
     };
 
     if (typeof resource === 'object') {
-        this.model[this.method] = resource;
+        this.model.GET = resource;
 
         return $q.resolve();
     } else if (resource) {
@@ -43,9 +81,9 @@ function httpPost (data) {
     };
 
     return $http(req).then(res => {
-      this.model.GET = res.data;
+        this.model.GET = res.data;
 
-      return res;
+        return res;
     });
 }
 
@@ -87,7 +125,56 @@ function get (keys) {
     return this.find('get', keys);
 }
 
+function unset (method, keys) {
+    if (!keys) {
+        keys = method;
+        method = 'GET';
+    }
+    
+    method = method.toUpperCase();
+    keys = keys.split('.');
+
+    if (!keys.length) {
+        delete this.model[method];
+    } else if (keys.length === 1) {
+        delete this.model[method][keys[0]];
+    } else {
+        let property = keys.splice(-1);
+        keys = keys.join('.');
+
+        let model = this.find(method, keys)
+        delete model[property];
+    }
+}
+
+function set (method, keys, value) {
+    if (!value) {
+        value = keys;
+        keys = method;
+        method = 'GET';
+    }
+    
+    keys = keys.split('.');
+
+    if (keys.length === 1) {
+        model[keys[0]] = value;
+    } else {
+        let property = keys.splice(-1);
+        keys = keys.join('.');
+
+        let model = this.find(method, keys)
+
+        model[property] = value;
+    }
+}
+
 function match (method, key, value) {
+    if(!value) {
+        value = key;
+        key = method;
+        method = 'GET';
+    }
+
     let model = this.model[method.toUpperCase()];
 
     if (!model) {
@@ -143,32 +230,104 @@ function find (method, keys) {
     return value;
 }
 
+function has (method, keys) {
+    if (!keys) {
+        keys = method;
+        method = 'GET';
+    }
+
+    method = method.toUpperCase();
+
+    let value;
+    switch (method) {
+        case 'OPTIONS':
+            value = this.options(keys);
+            break;
+        default:
+            value = this.get(keys);
+    }
+
+    return value !== undefined && value !== null;
+}
+
 function normalizePath (resource) {
     let version = '/api/v2/';
     
     return `${version}${resource}/`;
 }
 
-function getById (id) {
+function isEditable () {
+    let canEdit = this.get('summary_fields.user_capabilities.edit');
+
+    if (canEdit) {
+        return true;
+    }
+
+    if (this.has('options', 'actions.PUT')) {
+        return true;
+    }
+
+    return false;
+
+}
+
+function isCreatable () {
+    if (this.has('options', 'actions.POST')) {
+        return true;
+    }
+
+    return false;
+}
+
+function graft (id) {
     let item = this.get('results').filter(result => result.id === id);
 
-    return item ? item[0] : undefined;
+    item = item ? item[0] : undefined;
+
+    if (!item) {
+        return undefined;
+    }
+
+    return new this.Constructor('get', item, true);
+}
+
+function create (method, resource, graft) {
+    if (!method) {
+        return this;
+    }
+
+    this.promise = this.request(method, resource);
+
+    if (graft) {
+        return this;
+    }
+
+    return this.promise
+        .then(() => this);
 }
 
 function BaseModel (path) {
-    this.model = {};
-    this.get = get;
-    this.options = options;
+    this.create = create;
     this.find = find;
+    this.get = get;
+    this.graft = graft;
+    this.has = has;
+    this.isEditable = isEditable;
+    this.isCreatable = isCreatable;
     this.match = match;
+    this.model = {};
     this.normalizePath = normalizePath;
-    this.getById = getById;
+    this.options = options;
     this.request = request;
+    this.search = search;
+    this.set = set;
+    this.unset = unset;
+
     this.http = {
         get: httpGet.bind(this),
         options: httpOptions.bind(this),
         post: httpPost.bind(this),
-        put: httpPut.bind(this)
+        put: httpPut.bind(this),
     };
 
     this.path = this.normalizePath(path);

awx/ui/client/lib/models/Credential.js

@@ -3,18 +3,21 @@ const ENCRYPTED_VALUE = '$encrypted$';
 let BaseModel;
 
 function createFormSchema (method, config) {
+    if (!config) {
+        config = method;
+        method = 'GET';
+    }
+
     let schema = Object.assign({}, this.options(`actions.${method.toUpperCase()}`));
 
     if (config && config.omit) {
-        config.omit.forEach(key => {
-            delete schema[key];
-        });
+        config.omit.forEach(key => delete schema[key]);
     }
 
     for (let key in schema) {
         schema[key].id = key;
 
-        if (method === 'put') {
+        if (this.has(key)) {
             schema[key]._value = this.get(key);
         }
     }
@@ -33,19 +36,14 @@ function assignInputGroupValues (inputs) {
     });
 }
 
-function clearTypeInputs () {
-    delete this.model.GET.inputs;
-}
-
-function CredentialModel (method, resource) {
+function CredentialModel (method, resource, graft) {
     BaseModel.call(this, 'credentials');
 
+    this.Constructor = CredentialModel;
     this.createFormSchema = createFormSchema.bind(this);
     this.assignInputGroupValues = assignInputGroupValues.bind(this);
-    this.clearTypeInputs = clearTypeInputs.bind(this);
 
-    return this.request(method, resource)
-        .then(() => this);
+    return this.create(method, resource, graft);
 }
 
 function CredentialModelLoader (_BaseModel_ ) {

awx/ui/client/lib/models/CredentialType.js

@@ -14,33 +14,26 @@ function categorizeByKind () {
     }));
 }
 
-function mergeInputProperties (type) {
-    return type.inputs.fields.map(field => {
-        if (!type.inputs.required || type.inputs.required.indexOf(field.id) === -1) {
-            field.required = false;
-        } else {
-            field.required = true;
-        }
+function mergeInputProperties () {
+    let required = this.get('inputs.required');
 
-        return field;
+    return this.get('inputs.fields').map((field, i) => {
+        if (!required || required.indexOf(field.id) === -1) {
+            this.set(`inputs.fields[${i}].required`, false);
+        } else {
+            this.set(`inputs.fields[${i}].required`, true);
+        }
     });
 }
 
-function graft (id) {
-    let data = this.getById(id);
-
-    return new CredentialTypeModel('get', data);
-}
-
-function CredentialTypeModel (method, id) {
+function CredentialTypeModel (method, resource, graft) {
     BaseModel.call(this, 'credential_types');
 
+    this.Constructor = CredentialTypeModel;
     this.categorizeByKind = categorizeByKind.bind(this);
     this.mergeInputProperties = mergeInputProperties.bind(this);
-    this.graft = graft.bind(this);
 
-    return this.request(method, id)
-        .then(() => this);
+    return this.create(method, resource, graft);
 }
 
 function CredentialTypeModelLoader (_BaseModel_) {

awx/ui/client/lib/models/Me.js

@@ -4,13 +4,13 @@ function getSelf () {
     return this.get('results[0]');
 }
 
-function MeModel (method) {
+function MeModel (method, resource, graft) {
     BaseModel.call(this, 'me');
 
+    this.Constructor = MeModel;
     this.getSelf = getSelf.bind(this);
 
-    return this.request(method)
-        .then(() => this);
+    return this.create(method, resource, graft);
 }
 
 function MeModelLoader (_BaseModel_) {

awx/ui/client/lib/models/Organization.js

@@ -1,10 +1,11 @@
 let BaseModel;
 
-function OrganizationModel (method) {
+function OrganizationModel (method, resource, graft) {
     BaseModel.call(this, 'organizations');
 
-    return this.request(method)
-        .then(() => this);
+    this.Constructor = OrganizationModel;
+
+    return this.create(method, resource, graft);
 }
 
 function OrganizationModelLoader (_BaseModel_) {

awx/ui/client/src/credentials/list/credentials-list.controller.js

@@ -46,7 +46,7 @@ export default ['$scope', 'Rest', 'CredentialList', 'Prompt', 'ProcessErrors', '
             }
 
             $scope[list.name].forEach(credential => {
-                credential.kind = credentialType.getById(credential.credential_type).name;
+                credential.kind = credentialType.match('id', credential.credential_type).name;
             });
         }