[TASK] Improve UI of „Upgrade Wizard“ 94/58294/5
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sun, 16 Sep 2018 15:54:20 +0000 (17:54 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Wed, 19 Sep 2018 13:06:35 +0000 (15:06 +0200)
Loading the list of available upgrade wizards may take some time. To give
a hint what is currently done, the progress bar now shows a text that
describes the currently processed step. On initial load, the progress
bar of the "done" wizards is rendered as well.

When a upgrade wizard is about to get executed, the viewport scrolls to
the correct position now to attract attention.

Resolves: #86278
Releases: master
Change-Id: Ie9c7d4cdf7e125374f8560fca559e7821b204110
Reviewed-on: https://review.typo3.org/58294
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/install/Classes/Service/UpgradeWizardsService.php
typo3/sysext/install/Resources/Private/Templates/Upgrade/UpgradeWizards.html
typo3/sysext/install/Resources/Public/JavaScript/Modules/ProgressBar.js
typo3/sysext/install/Resources/Public/JavaScript/Modules/UpgradeWizards.js

index c46a1f8..f788a9b 100644 (file)
@@ -329,23 +329,21 @@ class UpgradeWizardsService
         } elseif ($updateObject instanceof UpgradeWizardInterface && $updateObject instanceof ConfirmableInterface) {
             $wizardHtml = '
             <div class="panel panel-danger">
-                <div class="panel-heading">' .
-                          htmlspecialchars($updateObject->getConfirmation()->getTitle()) .
-                          '</div>
+                <div class="panel-heading">
+                ' . htmlspecialchars($updateObject->getConfirmation()->getTitle()) . '
+                </div>
                 <div class="panel-body">
-                    ' .
-                          nl2br(htmlspecialchars($updateObject->getConfirmation()->getMessage())) .
-                          '
-                    <div class="btn-group clearfix" data-toggle="buttons">
+                    <p>' . nl2br(htmlspecialchars($updateObject->getConfirmation()->getMessage())) . '</p>
+                    <div class="btn-group" data-toggle="buttons">
                         <label class="btn btn-default active">
                             <input type="radio" name="install[values][' .
-                          htmlspecialchars($updateObject->getIdentifier()) .
-                          '][install]" value="0" checked="checked" /> no
+                htmlspecialchars($updateObject->getIdentifier()) .
+                '][install]" value="0" checked="checked" /> No, skip wizard
                         </label>
                         <label class="btn btn-default">
                             <input type="radio" name="install[values][' .
-                          htmlspecialchars($updateObject->getIdentifier()) .
-                          '][install]" value="1" /> yes
+                htmlspecialchars($updateObject->getIdentifier()) .
+                '][install]" value="1" /> Yes, execute wizard
                         </label>
                     </div>
                 </div>
index 3dca2ba..c3ad6d9 100644 (file)
@@ -1,7 +1,7 @@
 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
 
 <p>
-       If you upgrade your TYPO3 installation from one major version to another (e.g. 6.2 to 7 LTS),
+       If you upgrade your TYPO3 installation from one major version to another (e.g. 8 LTS to 9 LTS),
        then the Upgrade Wizards guide you through the necessary steps to upgrade your database
        records or explicitly install extensions that ship with the latest TYPO3 version.
 </p>
        </div>
 
        <div class="t3js-upgradeWizards-list-template">
+               <h4>Upgrade status</h4>
+               <p>Progress of upgrade wizards:</p>
                <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
-                               aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
-                               style="width: {wizardsPercentageDone}%;">
-                               <span>100%</span>
+                               aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
+                               style="width: 0%;">
+                               <span>0%</span>
                        </div>
                </div>
                <div class="t3js-upgradeWizards-list-rows"></div>
 
 <hr>
 
-<h4>Upgrade status</h4>
-<p>Progress of upgrade wizards:</p>
-<div class="upgradeWizards-wizards-output t3js-upgradeWizards-wizards-output"></div>
+<div class="t3js-upgrade-status-section">
+       <div class="upgradeWizards-wizards-output t3js-upgradeWizards-wizards-output"></div>
 
-<hr>
+       <hr>
 
-<h4>Wizards marked as done</h4>
-<p>
-       Some wizards fully automatically check whether they should be executed, while others just
-       set a flag in the system registry if they have been executed once. This "I have been executed"
-       flag can be reset by selecting specific wizards from the list below, so the according wizards
-       show up as possible upgrade wizards again.
-</p>
-<div
-       class="t3js-module-content"
-       data-upgrade-wizards-mark-undone-token="{upgradeWizardsMarkUndoneToken}"
-       data-upgrade-wizards-input-token="{upgradeWizardsInputToken}"
-       data-upgrade-wizards-execute-token="{upgradeWizardsExecuteToken}"
->
-       <div class="t3js-upgradeWizards-done-output"></div>
+       <h4>Wizards marked as done</h4>
+       <p>
+               Some wizards fully automatically check whether they should be executed, while others just
+               set a flag in the system registry if they have been executed once. This "I have been executed"
+               flag can be reset by selecting specific wizards from the list below, so the according wizards
+               show up as possible upgrade wizards again.
+       </p>
+       <div
+               class="t3js-module-content"
+               data-upgrade-wizards-mark-undone-token="{upgradeWizardsMarkUndoneToken}"
+               data-upgrade-wizards-input-token="{upgradeWizardsInputToken}"
+               data-upgrade-wizards-execute-token="{upgradeWizardsExecuteToken}"
+       >
+               <div class="t3js-upgradeWizards-done-output"></div>
+       </div>
 </div>
 
 </html>
index 8b4f4e2..568e621 100644 (file)
@@ -21,7 +21,7 @@ define(['jquery', 'TYPO3/CMS/Install/Severity'], function($, Severity) {
    * @type {{template: (*)}}
    */
   var ProgressBar = {
-    template: $('<div class="progress"><div class="t3js-progressbar progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only"></span></div></div>')
+    template: $('<div class="progress"><div class="t3js-progressbar progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span></span></div></div>')
   };
 
   /**
@@ -39,7 +39,7 @@ define(['jquery', 'TYPO3/CMS/Install/Severity'], function($, Severity) {
       progressBar.attr('aria-valuenow', progresss);
     }
     if (title) {
-      progressBar.find('.sr-only').text(title);
+      progressBar.find('span').text(title);
     }
     return progressBar;
   };
index 632f70a..5793add 100644 (file)
@@ -23,7 +23,7 @@ define([
     'TYPO3/CMS/Install/Severity',
     'TYPO3/CMS/Backend/Notification'
   ],
-  function($, Router, FlashMessage, ProgressBar, InfoBox, Severity, Notification) {
+  function ($, Router, FlashMessage, ProgressBar, InfoBox, Severity, Notification) {
     'use strict';
 
     return {
@@ -52,51 +52,51 @@ define([
       selectorWizardsInputHtml: '.t3js-upgradeWizards-input-html',
       selectorWizardsInputPerform: '.t3js-upgradeWizards-input-perform',
 
-      loadingMessage: ProgressBar.render(Severity.loading, 'Loading...', ''),
-
-      initialize: function(currentModal) {
+      initialize: function (currentModal) {
         var self = this;
         this.currentModal = currentModal;
 
-        self.getData();
-        self.doneUpgrades();
+        this.getData().done(function() {
+          self.doneUpgrades();
+        });
 
         // Mark a done wizard undone
-        currentModal.on('click', this.selectorWizardsDoneRowMarkUndone, function(e) {
-          var identifier = $(e.target).data('identifier');
-          self.markUndone(identifier);
+        currentModal.on('click', this.selectorWizardsDoneRowMarkUndone, function (e) {
+          self.markUndone(e.target.dataset.identifier);
         });
 
         // Execute "fix default mysql connection db charset" blocking wizard
-        currentModal.on('click', this.selectorWizardsBlockingCharsetFix, function(e) {
+        currentModal.on('click', this.selectorWizardsBlockingCharsetFix, function (e) {
           self.blockingUpgradesDatabaseCharsetFix();
         });
 
         // Execute "add required fields + tables" blocking wizard
-        currentModal.on('click', this.selectorWizardsBlockingAddsExecute, function(e) {
+        currentModal.on('click', this.selectorWizardsBlockingAddsExecute, function (e) {
           self.blockingUpgradesDatabaseAddsExecute();
         });
 
         // Get user input of a single upgrade wizard
-        currentModal.on('click', this.selectorWizardsListRowExecute, function(e) {
-          var identifier = $(e.target).data('identifier');
-          self.wizardInput(identifier);
+        currentModal.on('click', this.selectorWizardsListRowExecute, function (e) {
+          self.wizardInput(e.target.dataset.identifier, e.target.dataset.title);
         });
 
         // Execute one upgrade wizard
-        currentModal.on('click', this.selectorWizardsInputPerform, function(e) {
-          var identifier = $(e.target).data('identifier');
-          self.wizardExecute(identifier);
+        currentModal.on('click', this.selectorWizardsInputPerform, function (e) {
+          self.wizardExecute(e.target.dataset.identifier, e.target.dataset.title);
         });
       },
 
-      getData: function() {
+      renderProgressBar: function (title) {
+        return ProgressBar.render(Severity.loading, title, '')
+      },
+
+      getData: function () {
         var self = this;
-        var modalContent = this.currentModal.find(self.selectorModalBody);
-        $.ajax({
+        var modalContent = this.currentModal.find(this.selectorModalBody);
+        return $.ajax({
           url: Router.getUrl('upgradeWizardsGetData'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             if (data.success === true) {
               modalContent.empty().append(data.html);
               self.silentUpgrades();
@@ -104,26 +104,25 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      silentUpgrades: function() {
+      silentUpgrades: function () {
         var self = this;
-        var $outputContainer = self.currentModal.find(self.selectorOutputWizardsContainer);
-        $outputContainer.empty().html(self.loadingMessage);
+        var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
+        $outputContainer.empty().html(this.renderProgressBar('Executing some silent upgrades...'));
         $.ajax({
           url: Router.getUrl('upgradeWizardsSilentUpgrades'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             if (data.success === true && Array.isArray(data.status)) {
               if (data.status.length > 0) {
-                data.status.forEach((function(element) {
+                data.status.forEach((function (element) {
                   var message = InfoBox.render(element.severity, element.title, element.message);
                   $outputContainer.append(message);
-                  // Notification.success(element.message);
                 }));
               }
               self.blockingUpgradesDatabaseCharsetTest();
@@ -131,21 +130,21 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      blockingUpgradesDatabaseCharsetTest: function() {
+      blockingUpgradesDatabaseCharsetTest: function () {
         var self = this;
-        var modalContent = this.currentModal.find(self.selectorModalBody);
+        var modalContent = this.currentModal.find(this.selectorModalBody);
         var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
-        $outputContainer.append().html(self.loadingMessage);
+        $outputContainer.empty().html(this.renderProgressBar('Checking database charset...'));
         $.ajax({
           url: Router.getUrl('upgradeWizardsBlockingDatabaseCharsetTest'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             self.removeLoadingMessage($outputContainer);
             if (data.success === true) {
               if (data.needsUpdate === true) {
@@ -155,24 +154,24 @@ define([
               }
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      blockingUpgradesDatabaseCharsetFix: function() {
+      blockingUpgradesDatabaseCharsetFix: function () {
         var self = this;
         var $outputContainer = $(this.selectorOutputWizardsContainer);
-        $outputContainer.append().html(self.loadingMessage);
+        $outputContainer.empty().html(this.renderProgressBar('Setting database charset to UTF-8...'));
         $.ajax({
           url: Router.getUrl('upgradeWizardsBlockingDatabaseCharsetFix'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             self.removeLoadingMessage($outputContainer);
             if (data.success === true) {
               if (Array.isArray(data.status) && data.status.length > 0) {
-                data.status.forEach(function(element) {
+                data.status.forEach(function (element) {
                   var message = InfoBox.render(element.severity, element.title, element.message);
                   $outputContainer.append(message);
                 });
@@ -183,37 +182,37 @@ define([
               $outputContainer.append(message);
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      blockingUpgradesDatabaseAdds: function() {
+      blockingUpgradesDatabaseAdds: function () {
         var self = this;
-        var modalContent = this.currentModal.find(self.selectorModalBody);
+        var modalContent = this.currentModal.find(this.selectorModalBody);
         var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
-        $outputContainer.append().html(self.loadingMessage);
+        $outputContainer.empty().html(this.renderProgressBar('Check for missing mandatory database tables and fields...'));
         $.ajax({
           url: Router.getUrl('upgradeWizardsBlockingDatabaseAdds'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             self.removeLoadingMessage($outputContainer);
             if (data.success === true) {
               if (data.needsUpdate === true) {
                 var adds = modalContent.find(self.selectorWizardsBlockingAddsTemplate).clone();
                 if (typeof(data.adds.tables) === 'object') {
-                  data.adds.tables.forEach(function(element) {
+                  data.adds.tables.forEach(function (element) {
                     adds.find(self.selectorWizardsBlockingAddsRows).append('Table: ' + element.table + '<br>');
                   });
                 }
                 if (typeof(data.adds.columns) === 'object') {
-                  data.adds.columns.forEach(function(element) {
+                  data.adds.columns.forEach(function (element) {
                     adds.find(self.selectorWizardsBlockingAddsRows).append('Table: ' + element.table + ', Field: ' + element.field + '<br>');
                   });
                 }
                 if (typeof(data.adds.indexes) === 'object') {
-                  data.adds.indexes.forEach(function(element) {
+                  data.adds.indexes.forEach(function (element) {
                     adds.find(self.selectorWizardsBlockingAddsRows).append('Table: ' + element.table + ', Index: ' + element.index + '<br>');
                   });
                 }
@@ -225,24 +224,24 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      blockingUpgradesDatabaseAddsExecute: function() {
+      blockingUpgradesDatabaseAddsExecute: function () {
         var self = this;
         var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
-        $outputContainer.empty().html(self.loadingMessage);
+        $outputContainer.empty().html(this.renderProgressBar('Adding database tables and fields...'));
         $.ajax({
           url: Router.getUrl('upgradeWizardsBlockingDatabaseExecute'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             self.removeLoadingMessage($outputContainer);
             if (data.success === true) {
               if (Array.isArray(data.status) && data.status.length > 0) {
-                data.status.forEach(function(element) {
+                data.status.forEach(function (element) {
                   var message = InfoBox.render(element.severity, element.title, element.message);
                   $outputContainer.append(message);
                 });
@@ -254,22 +253,22 @@ define([
               $outputContainer.append(message);
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      wizardsList: function() {
+      wizardsList: function () {
         var self = this;
-        var modalContent = this.currentModal.find(self.selectorModalBody);
-        var $outputContainer = self.currentModal.find(self.selectorOutputWizardsContainer);
-        $outputContainer.append(self.loadingMessage);
+        var modalContent = this.currentModal.find(this.selectorModalBody);
+        var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
+        $outputContainer.append(this.renderProgressBar('Loading upgrade wizards...'));
 
         $.ajax({
           url: Router.getUrl('upgradeWizardsList'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             self.removeLoadingMessage($outputContainer);
             var list = modalContent.find(self.selectorWizardsListTemplate).clone();
             list.removeClass('t3js-upgradeWizards-list-template');
@@ -278,28 +277,30 @@ define([
               var numberOfWizards = 0;
               if (Array.isArray(data.wizards) && data.wizards.length > 0) {
                 numberOfWizards = data.wizards.length;
-                data.wizards.forEach(function(element) {
+                data.wizards.forEach(function (element) {
                   if (element.shouldRenderWizard === true) {
                     var aRow = modalContent.find(self.selectorWizardsListRowTemplate).clone();
                     numberOfWizardsTodo = numberOfWizardsTodo + 1;
                     aRow.removeClass('t3js-upgradeWizards-list-row-template');
                     aRow.find(self.selectorWizardsListRowTitle).empty().text(element.title);
                     aRow.find(self.selectorWizardsListRowExplanation).empty().text(element.explanation);
-                    aRow.find(self.selectorWizardsListRowExecute).attr('data-identifier', element.identifier);
+                    aRow.find(self.selectorWizardsListRowExecute).attr('data-identifier', element.identifier).attr('data-title', element.title);
                     list.find(self.selectorWizardsListRows).append(aRow);
                   }
                 });
                 list.find(self.selectorWizardsListRows + ' hr:last').remove();
               }
               var percent = 100;
+              var $progressBar = list.find('.progress-bar');
               if (numberOfWizardsTodo > 0) {
-                percent = ((numberOfWizards - numberOfWizardsTodo) / data.wizards.length) * 100;
+                percent = Math.round((numberOfWizards - numberOfWizardsTodo) / data.wizards.length * 100);
               } else {
-                list.find('.progress-bar')
+                $progressBar
                   .removeClass('progress-bar-info')
                   .addClass('progress-bar-success');
               }
-              list.find('.progress-bar')
+              $progressBar
+                .removeClass('progress-bar-striped')
                 .css('width', percent + '%')
                 .attr('aria-valuenow', percent)
                 .find('span')
@@ -310,18 +311,23 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      wizardInput: function(identifier) {
+      wizardInput: function (identifier, title) {
         var self = this;
-        var executeToken = self.currentModal.find(this.selectorModuleContent).data('upgrade-wizards-input-token');
-        var modalContent = this.currentModal.find(self.selectorModalBody);
-        var $outputContainer = self.currentModal.find(self.selectorOutputWizardsContainer);
-        $outputContainer.empty().html(this.loadingMessage);
+        var executeToken = this.currentModal.find(this.selectorModuleContent).data('upgrade-wizards-input-token');
+        var modalContent = this.currentModal.find(this.selectorModalBody);
+        var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
+        $outputContainer.empty().html(this.renderProgressBar('Loading "' + title + '"...'));
+
+        modalContent.animate({
+          scrollTop: modalContent.scrollTop() - Math.abs(modalContent.find('.t3js-upgrade-status-section').position().top)
+        }, 250);
+
         $.ajax({
           url: Router.getUrl(),
           method: 'POST',
@@ -333,13 +339,13 @@ define([
             }
           },
           cache: false,
-          success: function(data) {
-            modalContent.find(self.selectorOutputWizardsContainer).empty();
+          success: function (data) {
+            $outputContainer.empty();
             var input = modalContent.find(self.selectorWizardsInputTemplate).clone();
             input.removeClass('t3js-upgradeWizards-input');
             if (data.success === true) {
               if (Array.isArray(data.status)) {
-                data.status.forEach(function(element) {
+                data.status.forEach(function (element) {
                   var message = FlashMessage.render(element.severity, element.title, element.message);
                   $outputContainer.append(message);
                 });
@@ -352,38 +358,38 @@ define([
             }
             modalContent.find(self.selectorOutputWizardsContainer).append(input);
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      wizardExecute: function(identifier) {
+      wizardExecute: function (identifier, title) {
         var self = this;
-        var executeToken = self.currentModal.find(self.selectorModuleContent).data('upgrade-wizards-execute-token');
-        var modalContent = this.currentModal.find(self.selectorModalBody);
+        var executeToken = this.currentModal.find(this.selectorModuleContent).data('upgrade-wizards-execute-token');
+        var modalContent = this.currentModal.find(this.selectorModalBody);
         var postData = {
           'install[action]': 'upgradeWizardsExecute',
           'install[token]': executeToken,
           'install[identifier]': identifier
         };
-        $(self.currentModal.find(this.selectorOutputWizardsContainer + ' form').serializeArray()).each(function() {
+        $(this.currentModal.find(this.selectorOutputWizardsContainer + ' form').serializeArray()).each(function () {
           postData[this.name] = this.value;
         });
         var $outputContainer = this.currentModal.find(this.selectorOutputWizardsContainer);
         // modalContent.find(self.selectorOutputWizardsContainer).empty();
-        $outputContainer.empty().html(this.loadingMessage);
-        self.currentModal.find(self.selectorWizardsDoneRowMarkUndone).prop("disabled", true);
+        $outputContainer.empty().html(this.renderProgressBar('Executing "' + title + '"...'));
+        this.currentModal.find(self.selectorWizardsDoneRowMarkUndone).prop("disabled", true);
         $.ajax({
           method: 'POST',
           data: postData,
           url: Router.getUrl(),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             $outputContainer.empty();
             if (data.success === true) {
               if (Array.isArray(data.status)) {
-                data.status.forEach(function(element) {
+                data.status.forEach(function (element) {
                   var message = InfoBox.render(element.severity, element.title, element.message);
                   $outputContainer.append(message);
                 });
@@ -395,26 +401,26 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      doneUpgrades: function() {
+      doneUpgrades: function () {
         var self = this;
-        var modalContent = this.currentModal.find(self.selectorModalBody);
-        var $outputContainer = self.currentModal.find(self.selectorOutputDoneContainer);
-        $outputContainer.empty().html(self.loadingMessage);
+        var modalContent = this.currentModal.find(this.selectorModalBody);
+        var $outputContainer = modalContent.find(this.selectorOutputDoneContainer);
+        $outputContainer.empty().html(this.renderProgressBar('Loading executed upgrade wizards...'));
 
         $.ajax({
           url: Router.getUrl('upgradeWizardsDoneUpgrades'),
           cache: false,
-          success: function(data) {
+          success: function (data) {
             self.removeLoadingMessage($outputContainer);
             if (data.success === true) {
               if (Array.isArray(data.status) && data.status.length > 0) {
-                data.status.forEach(function(element) {
+                data.status.forEach(function (element) {
                   var message = InfoBox.render(element.severity, element.title, element.message);
                   $outputContainer.append(message);
                 });
@@ -423,7 +429,7 @@ define([
               var hasBodyContent = false;
               var $wizardsDoneContainer = body.find(self.selectorWizardsDoneRows);
               if (Array.isArray(data.wizardsDone) && data.wizardsDone.length > 0) {
-                data.wizardsDone.forEach(function(element) {
+                data.wizardsDone.forEach(function (element) {
                   hasBodyContent = true;
                   var aRow = modalContent.find(self.selectorWizardsDoneRowTemplate).clone();
                   aRow.find(self.selectorWizardsDoneRowMarkUndone).attr('data-identifier', element.identifier);
@@ -432,7 +438,7 @@ define([
                 });
               }
               if (Array.isArray(data.rowUpdatersDone) && data.rowUpdatersDone.length > 0) {
-                data.rowUpdatersDone.forEach(function(element) {
+                data.rowUpdatersDone.forEach(function (element) {
                   hasBodyContent = true;
                   var aRow = modalContent.find(self.selectorWizardsDoneRowTemplate).clone();
                   aRow.find(self.selectorWizardsDoneRowMarkUndone).attr('data-identifier', element.identifier);
@@ -448,18 +454,18 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      markUndone: function(identifier) {
+      markUndone: function (identifier) {
         var self = this;
-        var executeToken = self.currentModal.find(self.selectorModuleContent).data('upgrade-wizards-mark-undone-token');
-        var modalContent = this.currentModal.find(self.selectorModalBody);
+        var executeToken = this.currentModal.find(this.selectorModuleContent).data('upgrade-wizards-mark-undone-token');
+        var modalContent = this.currentModal.find(this.selectorModalBody);
         var $outputContainer = this.currentModal.find(this.selectorOutputDoneContainer);
-        $outputContainer.empty().html(this.loadingMessage);
+        $outputContainer.empty().html(this.renderProgressBar('Marking upgrade wizard as undone...'));
         $.ajax({
           url: Router.getUrl(),
           method: 'POST',
@@ -471,11 +477,11 @@ define([
             }
           },
           cache: false,
-          success: function(data) {
+          success: function (data) {
             $outputContainer.empty();
             modalContent.find(self.selectorOutputDoneContainer).empty();
             if (data.success === true && Array.isArray(data.status)) {
-              data.status.forEach(function(element) {
+              data.status.forEach(function (element) {
                 Notification.success(element.message);
                 self.doneUpgrades();
                 self.blockingUpgradesDatabaseCharsetTest();
@@ -484,13 +490,13 @@ define([
               Notification.error('Something went wrong');
             }
           },
-          error: function(xhr) {
+          error: function (xhr) {
             Router.handleAjaxError(xhr);
           }
         });
       },
 
-      removeLoadingMessage: function($container) {
+      removeLoadingMessage: function ($container) {
         $container.find('.alert-loading').remove();
       }
     };