Popups in Dashboard seem to be broken

[ishubham21]

The popups in the Dashboard looks like they are not able to retrieve content from the locales.ini file.

One thing to note here is that I was able to fix it via refreshing it 3-4 times but it again broke while I refreshed it for the 5th time.

Steps to reproduce -

1. Log in to the Dashboard of Sugarizer Server.
2. Clear all cache and site data, make sure that you've emptied the localStorage so that popovers can be loaded.
3. Log in once again.
4. Head on Statistics View and try refreshing 3-4 times while the popup is open.

I'd love to work on this but I wanted to make sure if that everyone is getting this problem.

[llaske]

Yes you're right, it sometimes happen. I guess it's related to page loading. You're welcome to propose a fix.

[ishubham21]

Yes you're right, it sometimes happen. I guess it's related to page loading. You're welcome to propose a fix.

I tried hunting for the problem but wanted to ask where I can find the function definition of the function .addStep(). After searching it for a while, it seems to be present in bootstrap-tour.js but that is currently minified. Can you please guide me with this? I want to understand the execution of tour.addStep() in dashboard/public/js/tutorial.js file from where the templates are getting loaded.

[llaske]

Yes, it comes from the Bootstrap Tour library here. It comes from the file here. I suggest you to work on a local Sugarizer server instance to be able to debug the issue on a non minified version.

[mohantechnology]

If no one is working on this issue , then i would like to work on this issue

[mohantechnology]

To reproduce the issue clear local storage , disable cache and slow down the network speed and reload the page

https://user-images.githubusercontent.com/71864565/159143777-28b14242-9f80-4c93-b857-8fe354959054.mp4

another way to reproduce , disable cache and slow down the network speed and click on the help button before page completely loads

https://user-images.githubusercontent.com/71864565/159144083-f4048864-ff70-48a9-bae8-06117914a3c9.mov

[mohantechnology]

As what i understand from the code ,

for translating the language the flow is

• first load and display default Locale data
• emit event 'localized'
• when 'localized' event happens load and display Locale data for user selected language

To load and display data, 'loadLocale' function is called for both the time . 'loadLocale' function mainly do the following things

• set gReadyState="interactive"
• clear previous stored data
• load language L10nData
• emit 'localized'
• set gReadyState="completed"

from above points we see that for translating language , the value of 'gReadyState' changes from "interactive" to "completed" twice . first one for while loading default language and second one for loading user selected language

for starting tutorial following code is used

 document.webL10n.ready(function() {
    var refreshIntervalId = setInterval(function() {
        if (document.webL10n.getReadyState() == "complete") {
            clearInterval(refreshIntervalId);
            tutorial.init();
            tour.start(true);
            launched = true;
        }
    }, 100);

In code we see that it waits for 'gReadyState' to become "complete" then it initialiize and start the tutorial

Start tutorial function start the tutorial when the 'gReadyState' values becomes "completed" for the first time . and therefore the tour look like this

[mohantechnology]

we see here that the value of button is {{ TutoPrev }} because for translating second time with user selected language , the 'loadLocale' clear previous data and due to use of global variable the stored value inside that variable is cleared and 'document.webL10n.get("TutoPrev")' return {{ TutoPrev }} showing a warning that the value not availabe in global variable . if we uncomment the 'clear' function then the output will be like this

In picture we see tutorial is in english and the background is in hindi . Tutorial is in english because it use value which is stored after first time the value of gReadyState becomes completed

[mohantechnology]

To fix this issue i have only called 'loadLocale' function once with the user selected language .

Please take a look here #312

[mohantechnology]

to fix the issue i have also made some changes "dashboard\public\js\l10n.js", as it is a library and changing it may cause some other problems . so i have made another pull request without changing "dashboard\public\js\l10n.js" file . so that the chances of issue to occur is less