Merge pull request #1735 from aaronweeden/my-profile-tab-bug

Fix "My Profile" window loading bugs.
ubccr · Jul 5, 2023 · f40b817 · f40b817
2 parents 1e7159b + 4e72a1e
commit f40b817
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 32 deletions.
diff --git a/html/gui/css/ProfileEditor.css b/html/gui/css/ProfileEditor.css
@@ -44,6 +44,11 @@
    width: 125px !important;
 }
 
+#user_profile_most_privileged_role {
+    font-weight: bold;
+    padding-left: 3px;
+}
+
 /* ----------------------------- */
 
 .role_manager .lbl_member_status{

diff --git a/html/gui/js/profile_editor/ProfileApiToken.js b/html/gui/js/profile_editor/ProfileApiToken.js
@@ -30,6 +30,8 @@ XDMoD.ProfileApiToken = Ext.extend(Ext.form.FormPanel, {
     creationDate: '',
     expirationDate: '',
     initialParentWindowWidth: undefined,
+    hasBeenClosed: false,
+    responseArgs: null,
 
     // Methods
     initComponent: function () {
@@ -43,6 +45,19 @@ XDMoD.ProfileApiToken = Ext.extend(Ext.form.FormPanel, {
         this.getToken();
     },
 
+    handleOpenEvent: function () {
+        this.hasBeenClosed = false;
+        // If a response arrived while the window was opening, process it now.
+        if (this.responseArgs !== null) {
+            this.processHttpResponse();
+        }
+    },
+
+    handleCloseEvent: function () {
+        this.hasBeenClosed = true;
+        this.responseArgs = null;
+    },
+
     initSubComponents: function () {
         this.initPanelMsg();
         this.initBtnCopyToClipboard();
@@ -181,8 +196,22 @@ XDMoD.ProfileApiToken = Ext.extend(Ext.form.FormPanel, {
             url: '/users/current/api/token',
             method: params.method,
             callback: function (options, success, response) {
+                // If the window has already been closed, throw away the
+                // response.
+                if (self.hasBeenClosed) {
+                    return;
+                }
+                // Store the arguments needed to process the response.
+                self.responseArgs = {
+                    params: params,
+                    success: success,
+                    response: response
+                };
+                // If the window has finished opening, go ahead and process the
+                // response. Otherwise, the window will call handleOpenEvent
+                // later to process the response.
                 if (self.parentWindow.isVisible()) {
-                    self.processResponse(params, success, response);
+                    self.processHttpResponse();
                 }
             }
         });
@@ -242,7 +271,11 @@ XDMoD.ProfileApiToken = Ext.extend(Ext.form.FormPanel, {
         self.showNewToken();
     },
 
-    processResponse: function (params, success, response) {
+    processHttpResponse: function () {
+        var success = this.responseArgs.success;
+        var params = this.responseArgs.params;
+        var response = this.responseArgs.response;
+        this.responseArgs = null;
         if (success) {
             this.processSuccessfulResponse(params, response);
         } else if (params.onFailure) {

diff --git a/html/gui/js/profile_editor/ProfileEditor.js b/html/gui/js/profile_editor/ProfileEditor.js
@@ -14,7 +14,7 @@ XDMoD.ProfileEditorConstants = {
 
 XDMoD.ProfileEditor = Ext.extend(Ext.Window, {
     id: 'xdmod-profile-editor',
-    width: 375,
+    width: 400,
 
     border: false,
     frame: true,
@@ -33,8 +33,21 @@ XDMoD.ProfileEditor = Ext.extend(Ext.Window, {
     tooltip: 'Profile Editor',
 
     init: function () {
-        this.general_settings.init();
-        this.api_token.init();
+        var tabs = [this.general_settings, this.api_token];
+        this.addListener('afterrender', function () {
+            tabs.forEach(function (tab) {
+                tab.handleOpenEvent();
+            });
+        });
+        this.addListener('close', function () {
+            tabs.forEach(function (tab) {
+                tab.handleCloseEvent();
+            });
+        });
+        tabs.forEach(function (tab) {
+            tab.init();
+        });
+        this.show();
     },
 
     handleProfileClose: function () {

diff --git a/html/gui/js/profile_editor/ProfileGeneralSettings.js b/html/gui/js/profile_editor/ProfileGeneralSettings.js
@@ -6,15 +6,35 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
     resizable: false,
     title: 'General',
     cls: 'no-underline-invalid-fields-form',
+    hasBeenClosed: false,
+    responseArgs: null,
 
     // Dictates whether closing the profile editor logs out the user automatically
     perform_logout_on_close: false,
 
     init: function () {
+        var self = this;
         XDMoD.REST.connection.request({
             url: '/users/current',
             method: 'GET',
-            callback: this.cbProfile
+            callback: function (options, success, response) {
+                // If the window has already been closed, throw away the
+                // response.
+                if (self.hasBeenClosed) {
+                    return;
+                }
+                // Store the arguments needed to process the response.
+                self.responseArgs = {
+                    success: success,
+                    response: response
+                };
+                // If the window has finished opening, go ahead and process
+                // the response. Otherwise, the window will call
+                // handleOpenEvent later to process the response.
+                if (self.parentWindow.isVisible()) {
+                    self.processHttpResponse();
+                }
+            }
         });
     },
 
@@ -30,7 +50,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
         var user_profile_firstname = new Ext.form.TextField({
             name: 'first_name',
             fieldLabel: 'First Name',
-            emptyText: '1 min, ' + maxFirstNameLength + ' max',
+            emptyText: 'Loading...',
             msgTarget: 'under',
 
             allowBlank: false,
@@ -39,6 +59,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
             maxLengthText: 'Maximum length (' + maxFirstNameLength + ' characters) exceeded.',
             regex: XDMoD.regex.noReservedCharacters,
             regexText: reservedCharactersNotAllowedText,
+            disabled: true,
 
             listeners: {
                 blur: XDMoD.utils.trimOnBlur,
@@ -51,7 +72,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
         var user_profile_lastname = new Ext.form.TextField({
             name: 'last_name',
             fieldLabel: 'Last Name',
-            emptyText: '1 min, ' + maxLastNameLength + ' max',
+            emptyText: 'Loading...',
             msgTarget: 'under',
 
             allowBlank: false,
@@ -60,6 +81,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
             maxLengthText: 'Maximum length (' + maxLastNameLength + ' characters) exceeded.',
             regex: XDMoD.regex.noReservedCharacters,
             regexText: reservedCharactersNotAllowedText,
+            disabled: true,
 
             listeners: {
                 blur: XDMoD.utils.trimOnBlur,
@@ -76,7 +98,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
         var user_profile_email_addr = new Ext.form.TextField({
             name: 'email_address',
             fieldLabel: 'E-Mail Address',
-            emptyText: minEmailLength + ' min, ' + maxEmailLength + ' max',
+            emptyText: 'Loading...',
             msgTarget: 'under',
             allowBlank: false,
             blankText: fieldRequiredText,
@@ -85,6 +107,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
             maxLength: maxEmailLength,
             maxLengthText: 'Maximum length (' + maxEmailLength + ' characters) exceeded.',
             validator: XDMoD.validator.email,
+            disabled: true,
 
             listeners: {
                 blur: XDMoD.utils.trimOnBlur,
@@ -162,7 +185,12 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
 
         // ------------------------------------------------
 
-        this.cbProfile = function (options, success, response) {
+        var user_profile_most_privileged_role;
+        var btnUpdate;
+        this.processHttpResponse = function () {
+            var success = this.responseArgs.success;
+            var response = this.responseArgs.response;
+            this.responseArgs = null;
             // If success reported, attempt to extract user data.
             var data;
             var decodedSuccessResponse;
@@ -172,9 +200,23 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
             }
 
             if (decodedSuccessResponse) {
+                user_profile_firstname.emptyText = (
+                    '1 min, ' + maxFirstNameLength + ' max'
+                );
                 user_profile_firstname.setValue(data.results.first_name);
+                user_profile_firstname.setDisabled(false);
+
+                user_profile_lastname.emptyText = (
+                    '1 min, ' + maxLastNameLength + ' max'
+                );
                 user_profile_lastname.setValue(data.results.last_name);
+                user_profile_lastname.setDisabled(false);
+
+                user_profile_email_addr.emptyText = (
+                    minEmailLength + ' min, ' + maxEmailLength + ' max'
+                );
                 user_profile_email_addr.setValue(data.results.email_address);
+                user_profile_email_addr.setDisabled(false);
 
                 // ================================================
 
@@ -190,21 +232,12 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
                     }
                 }
 
-                // ================================================
-                // eslint-disable-next-line no-use-before-define
-                lblRole.on(
-                    'afterrender',
-                    function () {
-                        // eslint-disable-next-line no-undef
-                        document.getElementById('profile_editor_most_privileged_role').innerHTML = data.results.most_privileged_role;
-                    }
-                );
-
-                self.parentWindow.show();
+                user_profile_most_privileged_role.update(data.results.most_privileged_role);
+                btnUpdate.setDisabled(false);
             } else {
                 Ext.MessageBox.alert('My Profile', 'There was a problem retrieving your profile information.');
             }
-        }; // cbProfile
+        }; // processHttpResponse
 
         // ------------------------------------------------
         var optPasswordUpdate;
@@ -290,8 +323,10 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
 
         // ------------------------------------------------
 
-        var lblRole = new Ext.form.Label({
-            html: '<div style="width: 300px; font-size: 12px; padding-top: 5px">Top Role: <b style="margin-left: 45px"><span id="profile_editor_most_privileged_role"></span></b><br /></div>'
+        user_profile_most_privileged_role = new Ext.form.DisplayField({
+            fieldLabel: 'Top Role',
+            html: 'Loading...',
+            id: 'user_profile_most_privileged_role'
         });
 
         // ------------------------------------------------
@@ -315,7 +350,7 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
                 user_profile_lastname,
                 user_profile_email_addr,
 
-                lblRole
+                user_profile_most_privileged_role
                 // cmbFieldOfScience
 
             ]
@@ -412,11 +447,12 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
         // ------------------------------------------------
 
 
-        var btnUpdate = new Ext.Button({
+        btnUpdate = new Ext.Button({
 
             iconCls: 'user_profile_btn_update_icon',
             cls: 'user_profile_btn_update',
             text: 'Update',
+            disabled: true,
             handler: function () {
                 updateProfile();
             } // handler
@@ -445,6 +481,19 @@ XDMoD.ProfileGeneralSettings = Ext.extend(Ext.form.FormPanel, {
         });
 
         XDMoD.ProfileGeneralSettings.superclass.initComponent.call(this);
-    } // initComponent
+    }, // initComponent
+
+    handleOpenEvent: function () {
+        this.hasBeenClosed = false;
+        // If a response arrived while the window was opening, process it now.
+        if (this.responseArgs !== null) {
+            this.processHttpResponse();
+        }
+    },
+
+    handleCloseEvent: function () {
+        this.hasBeenClosed = true;
+        this.responseArgs = null;
+    }
 
 }); // XDMoD.ProfileGeneralSettings
diff --git a/tests/ui/test/specs/xdmod/myProfile.js b/tests/ui/test/specs/xdmod/myProfile.js
@@ -16,7 +16,8 @@ describe('My Profile Tests', function generalTests() {
                     browser.waitForAllInvisible('.ext-el-mask');
                     browser.waitForVisible(myProfile.toolbarButton, 3000);
                     browser.waitForLoadedThenClick(myProfile.toolbarButton);
-                    browser.waitForVisible(myProfile.container, 20000);
+                    browser.waitForVisible(myProfile.container, 1000);
+                    browser.waitForEnabled(selectors.general.user_information.first_name(), 3000);
                 });
 
                 describe('Check User Information', function checkUserInformation() {

diff --git a/tests/ui/test/specs/xdmod/myProfile.page.js b/tests/ui/test/specs/xdmod/myProfile.page.js
@@ -16,7 +16,7 @@ class MyProfile {
             general: {
                 user_information: {
                     top_role: function () {
-                        return self.generalUserInformation('profile_editor_most_privileged_role');
+                        return self.generalUserInformation('user_profile_most_privileged_role');
                     },
                     first_name: function () {
                         return self.generalUserInformation('first_name');
@@ -65,8 +65,8 @@ class MyProfile {
      */
     generalUserInformation(name) {
         switch (name) {
-            case 'profile_editor_most_privileged_role':
-                return `${this.userInformation}//span[@id="${name}"]`;
+            case 'user_profile_most_privileged_role':
+                return `${this.userInformation}//div[@id="${name}"]`;
             default:
                 return `${this.userInformation}//input[@name="${name}"]`;
         }

diff --git a/tests/ui/webdriverHelpers/waitForAllInvisible.js b/tests/ui/webdriverHelpers/waitForAllInvisible.js
@@ -2,7 +2,7 @@
  *  Wait for all elements that match a selector to be invisible.
  *
  *  @param {string} selector - elements to check
- *  @param {Number} [ms=9000] - Milliseconds to wait for elements to be invisible
+ *  @param {Number} [ms=18000] - Milliseconds to wait for elements to be invisible
  *
  *  @uses commands/waitForVisible
  */