Add models and select component

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

@@ -0,0 +1,26 @@
+function AddCredentialsController (credentialType) {
+    let vm = this || {};
+
+    vm.name = {
+        label: 'Name',
+        required: true
+    };
+
+    vm.description = {
+        label: 'Description'
+    };
+
+    vm.kind = {
+        label: 'Type',
+        required: true,
+        text: 'kind',
+        value: 'id',
+        data: credentialType.categorizeByKind()
+    };
+}
+
+AddCredentialsController.$inject = [
+    'credentialType'
+];
+
+export default AddCredentialsController;

awx/ui/client/src/credentials/add-credentials.view.html

@@ -0,0 +1,26 @@
+<at-panel>
+    <at-panel-heading>
+        Create Credentials
+    </at-panel-heading>
+
+    <at-panel-body>
+        <at-tab-navigation>
+            <at-tab>Details</at-tab>
+            <at-tab>Permissions</at-tab>
+        </at-tab-navigation>
+
+        <div class="row">
+            <div class="col-sm-4">
+                <at-input-text config="vm.name"></at-input-text>
+            </div>
+
+            <div class="col-sm-4">
+                <at-input-text config="vm.description"></at-input-text>
+            </div>
+
+            <div class="col-sm-4">
+                <at-input-select config="vm.kind"></at-input-select>
+            </div>
+        </div>
+    </at-panel-body>
+</at-panel>

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

@@ -1,8 +1,9 @@
 import CredentialList from './credentials.list.js';
 import ListController from './list/credentials-list.controller';
+import AddController from './add-credentials.controller.js';
 import { N_ } from '../i18n';
 
-function routes ($stateExtenderProvider) {
+function config ($stateExtenderProvider) {
     let stateExtender = $stateExtenderProvider.$get();
 
     stateExtender.addState({
@@ -46,10 +47,15 @@ function routes ($stateExtenderProvider) {
         },
         views: {
             'add@credentials': {
-                templateProvider: function() {
-                    return '<span>test-add</span>';
-                }
+                templateUrl: '/static/views/credentials/add-credentials.view.html',
+                controller: AddController,
+                controllerAs: 'vm'
             }
+        },
+        resolve: {
+            credentialType: ['CredentialType', CredentialType => {
+                return CredentialType.get().then(() => CredentialType);
+            }]
         }
     });
 
@@ -69,12 +75,13 @@ function routes ($stateExtenderProvider) {
     });
 }
 
-routes.$inject = [
+config.$inject = [
   '$stateExtenderProvider'
 ];
 
 angular
     .module('at.feature.credentials', [])
-    .config(routes)
+    .config(config)
     .factory('CredentialList', CredentialList)
-    .controller('ListController', ListController);
+    .controller('ListController', ListController)
+    .controller('AddController', AddController);