Merge pull request #1280 from jakemcdermott/bug-1271

ensure correct auth and system configuration forms are loaded

awx/ui/client/src/configuration/auth-form/configuration-auth.controller.js

@@ -82,7 +82,7 @@ export default [
         };
 
         var activeForm = function() {
-            if(!$scope.$parent[formTracker.currentFormName()].$dirty) {
+            if(!_.get($scope.$parent, [formTracker.currentFormName(), '$dirty'])) {
                 authVm.activeAuthForm = getActiveAuthForm();
                 formTracker.setCurrentAuth(authVm.activeAuthForm);
                 startCodeMirrors();

awx/ui/client/src/configuration/configuration.controller.js

@@ -169,7 +169,7 @@ export default [
             setCurrentSystem: function(form) {
                 this.currentSystem = form;
                 this.setCurrent(this.currentSystem);
-            }
+            },
         };
 
         // Default to auth form and tab
@@ -275,7 +275,13 @@ export default [
             vm.activeTab = setForm;
 
             if (setForm !== 'license') {
-                formTracker.setCurrent(setForm);
+                if (setForm === 'auth') {
+                    formTracker.setCurrentAuth(formTracker.currentAuth);
+                } else if (setForm === 'system') {
+                    formTracker.setCurrentSystem(formTracker.currenSystem);
+                } else {
+                    formTracker.setCurrent(setForm);
+                }
 
                 $state.go('configuration', {
                     currentTab: setForm

awx/ui/client/src/configuration/configuration.partial.html

@@ -7,16 +7,47 @@
 <div class="tab-pane" id="configuration-panel">
     <div ng-cloak id="htmlTemplate" class="Panel">
         <div class="Form-header">
-            <div class="Form-title Form-title--uppercase" translate>CONFIGURE {{BRAND_NAME}}</div>
+            <div class="Form-title Form-title--uppercase" translate>CONFIGURE {{ BRAND_NAME }}</div>
         </div>
         <div class="row Form-tabRow">
             <div class="col-lg-12">
                 <div class="Form-tabHolder"ng-class="{'Form-tabHolder--licenseSelected': vm.activeTab === 'license'}">
-                    <div class="Form-tab" ng-click="vm.activeTabCheck('auth')" ng-class="{'is-selected': vm.activeTab === 'auth' }" translate>Authentication</div>
+                    <div id="auth_tab"
-                    <div class="Form-tab" ng-click="vm.activeTabCheck('jobs')" ng-class="{'is-selected': vm.activeTab === 'jobs' }" translate>Jobs</div>
+                         class="Form-tab"
-                    <div class="Form-tab" ng-click="vm.activeTabCheck('system')" ng-class="{'is-selected': vm.activeTab === 'system' }" translate>System</div>
+                         ng-click="vm.activeTabCheck('auth')"
-                    <div class="Form-tab" ng-click="vm.activeTabCheck('ui')" ng-class="{'is-selected': vm.activeTab === 'ui' }" translate>User Interface</div>
+                         ng-class="{'is-selected': vm.activeTab === 'auth' }"
-                    <div class="Form-tab" ng-show="vm.product === 'Tower'" ng-click="vm.activeTabCheck('license')" ng-class="{'is-selected': vm.activeTab === 'license' }" translate>License</div>
+                         translate>
+                        Authentication
+                    </div>
+                    <div id="jobs_tab"
+                         class="Form-tab"
+                         ng-click="vm.activeTabCheck('jobs')"
+                         ng-class="{'is-selected': vm.activeTab === 'jobs' }"
+                         translate>
+                        Jobs
+                    </div>
+                    <div id="system_tab"
+                         class="Form-tab"
+                         ng-click="vm.activeTabCheck('system')"
+                         ng-class="{'is-selected': vm.activeTab === 'system' }"
+                         translate>
+                        System
+                    </div>
+                    <div id="ui_tab"
+                         class="Form-tab"
+                         ng-click="vm.activeTabCheck('ui')"
+                         ng-class="{'is-selected': vm.activeTab === 'ui' }"
+                         translate>
+                        User Interface
+                    </div>
+                    <div id="license_tab"
+                         class="Form-tab"
+                         ng-show="vm.product === 'Tower'"
+                         ng-click="vm.activeTabCheck('license')"
+                         ng-class="{'is-selected': vm.activeTab === 'license' }"
+                         translate>
+                        License
+                     </div>
                 </div>
             </div>
         </div>

awx/ui/client/src/configuration/system-form/configuration-system.controller.js

@@ -47,7 +47,7 @@ export default [
         }
 
         var activeForm = function() {
-            if(!$scope.$parent[formTracker.currentFormName()].$dirty) {
+            if(!_.get($scope.$parent, [formTracker.currentFormName(), '$dirty'])) {
                 systemVm.activeSystemForm = systemVm.dropdownValue;
                 formTracker.setCurrentSystem(systemVm.activeSystemForm);
             } else {

awx/ui/test/e2e/objects/configuration.js

@@ -0,0 +1,40 @@
+import breadcrumb from './sections/breadcrumb';
+import header from './sections/header';
+import navigation from './sections/navigation';
+
+const sections = {
+    header,
+    navigation,
+    breadcrumb,
+};
+
+const commands = [{
+    load () {
+        this.api.url('data:,'); // https://github.com/nightwatchjs/nightwatch/issues/1724
+        return this.navigate();
+    },
+    selectSubcategory (name) {
+        const spinny = 'div.spinny';
+        const select = '#configure-dropdown-nav';
+        const arrow = `${select} + span span[class$="arrow"]`;
+        const option = `//li[contains(text(), "${name}")]`;
+
+        this.api.waitForElementVisible(arrow);
+        this.api.click(arrow);
+
+        this.api.useXpath();
+        this.api.waitForElementVisible(option);
+        this.api.click(option);
+        this.api.useCss();
+
+        return this;
+    },
+}];
+
+module.exports = {
+    url () {
+        return `${this.api.globals.launch_url}/#/configuration`;
+    },
+    sections,
+    commands,
+};

awx/ui/test/e2e/objects/dashboard.js

@@ -0,0 +1,24 @@
+import breadcrumb from './sections/breadcrumb';
+import header from './sections/header';
+import navigation from './sections/navigation';
+
+const sections = {
+    header,
+    navigation,
+    breadcrumb,
+};
+
+const commands = [{
+    load () {
+        this.api.url('data:,'); // https://github.com/nightwatchjs/nightwatch/issues/1724
+        return this.navigate();
+    }
+}];
+
+module.exports = {
+    url () {
+        return `${this.api.globals.launch_url}/#/home`;
+    },
+    sections,
+    commands,
+};

awx/ui/test/e2e/objects/sections/navigation.js

@@ -17,7 +17,8 @@ const navigation = {
         inventoryScripts: 'i[class$="fa-code"]',
         notifications: 'i[class$="fa-bell"]',
         managementJobs: 'i[class$="fa-wrench"]',
-        instanceGroups: 'i[class$="fa-server"]'
+        instanceGroups: 'i[class$="fa-server"]',
+        settings: 'i[class$="fa-cog"]',
     }
 };
 

awx/ui/test/e2e/tests/test-configuration-ldap-fields.js

@@ -0,0 +1,61 @@
+module.exports = {
+    'expected LDAP codemirror fields are rendered when returning from another tab': client => {
+        const authTab = '#auth_tab';
+        const authView = 'div[ui-view="auth"]';
+        const ldapForm = '#configuration_ldap_template_form';
+        const systemTab = '#system_tab';
+        const systemView = 'div[ui-view="system"]';
+
+        const { navigation } = client.page.dashboard().section;
+        const configuration = client.page.configuration();
+
+        client.login();
+        client.waitForAngular();
+
+        navigation
+            .waitForElementVisible('@settings')
+            .click('@settings');
+
+        configuration.waitForElementVisible(authView);
+
+        configuration.waitForElementVisible(systemTab);
+        configuration.click(systemTab);
+
+        configuration.waitForElementNotVisible(authView);
+        configuration.waitForElementVisible(systemView);
+
+        configuration.waitForElementVisible(authTab);
+        configuration.click(authTab);
+
+        configuration.waitForElementNotVisible(systemView);
+        configuration.waitForElementVisible(authView);
+
+        configuration.selectSubcategory('LDAP');
+        configuration.waitForElementVisible(ldapForm);
+
+        const expectedCodemirrorFields = [
+            'AUTH_LDAP_USER_SEARCH',
+            'AUTH_LDAP_GROUP_SEARCH',
+            'AUTH_LDAP_USER_ATTR_MAP',
+            'AUTH_LDAP_GROUP_TYPE_PARAMS',
+            'AUTH_LDAP_USER_FLAGS_BY_GROUP',
+            'AUTH_LDAP_ORGANIZATION_MAP',
+            'AUTH_LDAP_TEAM_MAP',
+        ];
+
+        const ldapCodeMirrors = `${ldapForm} div[class^="CodeMirror"] textarea`;
+
+        client.elements('css selector', ldapCodeMirrors, ({ value }) => {
+            client.assert.equal(value.length, expectedCodemirrorFields.length);
+        });
+
+        expectedCodemirrorFields.forEach(fieldName => {
+            const codemirror = `#cm-${fieldName}-container div[class^="CodeMirror"]`;
+
+            configuration.expect.element(codemirror).visible;
+            configuration.expect.element(codemirror).enabled;
+        });
+
+        client.end();
+    },
+};