From 8523b56707ea2a0d4bf937dd4c9d9a65762f7af2 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 2 Aug 2018 12:28:02 -0400
Subject: [PATCH 1/2] Adds id's to all form groups and new forms

---
 .../applications/add-edit-applications.view.html   | 14 +++++++-------
 .../credentials/add-credentials.controller.js      |  2 ++
 .../credentials/add-edit-credentials.view.html     | 12 ++++++------
 .../client/lib/components/input/group.directive.js |  7 +++++--
 awx/ui/client/src/shared/form-generator.js         |  2 +-
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/awx/ui/client/features/applications/add-edit-applications.view.html b/awx/ui/client/features/applications/add-edit-applications.view.html
index 873f75ded0..8593e537dc 100644
--- a/awx/ui/client/features/applications/add-edit-applications.view.html
+++ b/awx/ui/client/features/applications/add-edit-applications.view.html
@@ -8,14 +8,14 @@
     </at-tab-group>
 
     <at-panel-body ng-if="!$state.current.name.includes('users')">
-        <at-form state="vm.form" autocomplete="off">
-            <at-input-text col="4" tab="1" state="vm.form.name"></at-input-text>
-            <at-input-text col="4" tab="2" state="vm.form.description"></at-input-text>
-            <at-input-lookup col="4" tab="3" state="vm.form.organization"></at-input-lookup>
+        <at-form state="vm.form" autocomplete="off" id="application_form">
+            <at-input-text col="4" tab="1" state="vm.form.name" id="application_name_group"></at-input-text>
+            <at-input-text col="4" tab="2" state="vm.form.description" id="application_description_group"></at-input-text>
+            <at-input-lookup col="4" tab="3" state="vm.form.organization" id="application_organization_group"></at-input-lookup>
             <at-divider></at-divider>
-            <at-input-select col="4" tab="4" state="vm.form.authorization_grant_type"></at-input-select>
-            <at-input-text col="4" tab="5" state="vm.form.redirect_uris"></at-input-text>
-            <at-input-select col="4" tab="6" state="vm.form.client_type"></at-input-select>
+            <at-input-select col="4" tab="4" state="vm.form.authorization_grant_type" id="application_authorization_grant_type_group"></at-input-select>
+            <at-input-text col="4" tab="5" state="vm.form.redirect_uris" id="application_redirect_uris_group"></at-input-text>
+            <at-input-select col="4" tab="6" state="vm.form.client_type" id="application_client_type_group"></at-input-select>
 
             <at-action-group col="12" pos="right">
                 <at-form-action type="cancel" to="applications"></at-form-action>
diff --git a/awx/ui/client/features/credentials/add-credentials.controller.js b/awx/ui/client/features/credentials/add-credentials.controller.js
index 6f99792a89..27b3eaee4a 100644
--- a/awx/ui/client/features/credentials/add-credentials.controller.js
+++ b/awx/ui/client/features/credentials/add-credentials.controller.js
@@ -16,6 +16,8 @@ function AddCredentialsController (models, $state, $scope, strings, componentsSt
         omit: ['user', 'team', 'inputs']
     });
 
+    vm.form._formName = 'credential';
+
     vm.form.disabled = !credential.isCreatable();
 
     vm.form.organization._resource = 'organization';
diff --git a/awx/ui/client/features/credentials/add-edit-credentials.view.html b/awx/ui/client/features/credentials/add-edit-credentials.view.html
index 43e56259aa..dcc9d47e8b 100644
--- a/awx/ui/client/features/credentials/add-edit-credentials.view.html
+++ b/awx/ui/client/features/credentials/add-edit-credentials.view.html
@@ -9,16 +9,16 @@
     </at-tab-group>
 
     <at-panel-body>
-        <at-form state="vm.form" autocomplete="off">
-            <at-input-text col="4" tab="1" state="vm.form.name"></at-input-text>
-            <at-input-text col="4" tab="2" state="vm.form.description"></at-input-text>
-            <at-input-lookup col="4" tab="3" state="vm.form.organization"></at-input-lookup>
+        <at-form state="vm.form" autocomplete="off" id="credential_form">
+            <at-input-text col="4" tab="1" state="vm.form.name" id="credential_name_group"></at-input-text>
+            <at-input-text col="4" tab="2" state="vm.form.description" id="credential_description_group"></at-input-text>
+            <at-input-lookup col="4" tab="3" state="vm.form.organization" id="credential_organization_group"></at-input-lookup>
 
             <at-divider></at-divider>
 
-            <at-input-lookup col="4" tab="5" state="vm.form.credential_type"></at-input-lookup>
+            <at-input-lookup col="4" tab="5" state="vm.form.credential_type" id="credential_credential_type_group"></at-input-lookup>
 
-            <at-input-group col="4" tab="6" state="vm.form.inputs">
+            <at-input-group col="4" tab="6" state="vm.form.inputs" form-id="credential">
                 {{:: vm.strings.get('inputs.GROUP_TITLE') }}
             </at-input-group>
 
diff --git a/awx/ui/client/lib/components/input/group.directive.js b/awx/ui/client/lib/components/input/group.directive.js
index 7e6f1f2426..e6c92d7a33 100644
--- a/awx/ui/client/lib/components/input/group.directive.js
+++ b/awx/ui/client/lib/components/input/group.directive.js
@@ -16,6 +16,7 @@ function AtInputGroupController ($scope, $compile) {
     let state;
     let source;
     let element;
+    let formId;
 
     vm.init = (_scope_, _form_, _element_) => {
         form = _form_;
@@ -23,6 +24,7 @@ function AtInputGroupController ($scope, $compile) {
         element = _element_;
         state = scope.state || {};
         source = state._source;
+        formId = scope.formId;
 
         $scope.$watch('state._source._value', vm.update);
     };
@@ -145,7 +147,7 @@ function AtInputGroupController ($scope, $compile) {
         const tabindex = Number(scope.tab) + index;
         const col = input._expand ? 12 : scope.col;
         const component = angular.element(`<${input._component} col="${col}" tab="${tabindex}"
-                state="${state._reference}._group[${index}]">
+                state="${state._reference}._group[${index}]" id="${formId}_${input.id}_group">
             </${input._component}>`);
 
         $compile(component)(scope.$parent);
@@ -183,7 +185,8 @@ function atInputGroup () {
         scope: {
             state: '=',
             col: '@',
-            tab: '@'
+            tab: '@',
+            formId: '@'
         }
     };
 }
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index 734aafee4e..b18e9a5397 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -740,7 +740,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                     if((field.excludeMode === undefined || field.excludeMode !== options.mode) && field.type !== 'alertblock' && field.type !== 'workflow-chart') {
 
-                    html += "<div class='form-group Form-formGroup ";
+                    html += `<div id='${form.name}_${fld}_group' class='form-group Form-formGroup `;
                     html += (field.disabled) ? `Form-formGroup--disabled ` : ``;
                     html += (field.type === "checkbox") ? "Form-formGroup--checkbox" : "";
                     html += (field['class']) ? (field['class']) : "";

From bc49c879b47f650b87dff88e97e0e8f450f34b81 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Thu, 2 Aug 2018 12:48:32 -0400
Subject: [PATCH 2/2] Fix linting error

---
 awx/ui/client/lib/components/input/group.directive.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/awx/ui/client/lib/components/input/group.directive.js b/awx/ui/client/lib/components/input/group.directive.js
index e6c92d7a33..3820d4ab8b 100644
--- a/awx/ui/client/lib/components/input/group.directive.js
+++ b/awx/ui/client/lib/components/input/group.directive.js
@@ -24,7 +24,7 @@ function AtInputGroupController ($scope, $compile) {
         element = _element_;
         state = scope.state || {};
         source = state._source;
-        formId = scope.formId;
+        ({ formId } = scope);
 
         $scope.$watch('state._source._value', vm.update);
     };