SAK-49755 Fix Persistent Tutorial Display Issue: Ensure Tutorial Only…

… Appears for the first time user

help/help-component/src/bundle/TutorialMessages.properties

@@ -89,15 +89,7 @@ introToSakai_helpIconResponsive.body={0} provides help information about each fe
 The Help button <span class="no-wrap">( <i class="bi bi-question-circle" style="font-weight: bold; font-size: 18px;"></i> )</span> is context-sensitive and provides information specific the tool you are currently viewing.
 
 # Account Menu Panel (Desktop View Only)
-introToSakai_accountTool.title=Account Menu
-introToSakai_accountTool.body=The Account Menu contains quick links to personal tasks, such as managing your account, quick view of calendar, tasks, grades, toggling Dark Theme, and logging out of {0}.<br/><br/>\
+introToSakai_pTutorialLocation.title=Account Menu
+introToSakai_pTutorialLocation.body=The Account Menu contains quick links to personal tasks, such as managing your account, quick view of calendar, tasks, grades, toggling Dark Theme, and logging out of {0}.<br/><br/>\
 That's it! If you'd like to review this tutorial, you can restart it by choosing it from the Account Menu.
 
-
-# Return to Tutorial panel
-introToSakai_pTutorialLocation.title=Tutorial
-introToSakai_pTutorialLocation.body=You&#39;ve completed the tutorial! Congratulations on becoming familiar with {0}.\
-<br/><br/>\
-Remember, you can always restart this tutorial by choosing it from the Account Menu.\
-<br/><br/>\
-With <span class="no-wrap"><i class="bi bi-heart-fill"></i> love</span> from Sakai, your trusted companion on your learning journey!

help/help-component/src/tutorial/Tutorial.config

@@ -133,25 +133,17 @@ introToSakai_helpIcon.fadeout=
 # Help Icon panel (Responsive View Only)
 introToSakai_helpIconResponsive.selection=.responsive-help-icon:visible
 introToSakai_helpIconResponsive.previousUrl=/direct/tutorial/introToSakai_helpIcon.json
-introToSakai_helpIconResponsive.nextUrl=/direct/tutorial/introToSakai_accountTool.json
+introToSakai_helpIconResponsive.nextUrl=/direct/tutorial/introToSakai_pTutorialLocation.json
 introToSakai_helpIconResponsive.dialog=
 introToSakai_helpIconResponsive.positionTooltip=bottomRight
 introToSakai_helpIconResponsive.positionTarget=topMiddle
 introToSakai_helpIconResponsive.fadeout=
 
-# Account Tool panel
-introToSakai_accountTool.selection=.sakai-accountProfileImage
-introToSakai_accountTool.previousUrl=/direct/tutorial/introToSakai_helpIconResponsive.json
-introToSakai_accountTool.nextUrl=/direct/tutorial/introToSakai_pTutorialLocation.json
-introToSakai_accountTool.dialog=
-introToSakai_accountTool.positionTooltip=topRight
-introToSakai_accountTool.positionTarget=bottomMiddle
-introToSakai_accountTool.fadeout=
-
-# Return to Tutorial panel
-introToSakai_pTutorialLocation.selection=
-introToSakai_pTutorialLocation.previousUrl=/direct/tutorial/introToSakai_accountTool.json
+# Return to Tutorial panel/Account Menu
+introToSakai_pTutorialLocation.selection=.sak-sysInd-account
+introToSakai_pTutorialLocation.previousUrl=/direct/tutorial/introToSakai_helpIconResponsive.json
 introToSakai_pTutorialLocation.nextUrl=
-introToSakai_pTutorialLocation.dialog=true
-introToSakai_pTutorialLocation.positionTarget=
+introToSakai_pTutorialLocation.dialog=
+introToSakai_pTutorialLocation.positionTooltip=topRight
+introToSakai_pTutorialLocation.positionTarget=bottomMiddle
 introToSakai_pTutorialLocation.fadeout=

library/src/webapp/js/jquery/qtip/tutorial.js

@@ -1,66 +1,52 @@
-var sakaiTutorialSkin = 'sakaiTutorial';
-var sakaiTutorialStartUrl = "/direct/tutorial/introToSakai_p1.json";
-var sakaiTutorialLocationUrl = '/direct/tutorial/introToSakai_pTutorialLocation.json';
-var optsCache;
-var maxWidth = 500;
-var previousClicked = false;
-var dialogPosition = {
+const sakaiTutorialSkin = 'sakaiTutorial';
+const sakaiTutorialStartUrl = "/direct/tutorial/introToSakai_p1.json";
+const sakaiTutorialLocationUrl = '/direct/tutorial/introToSakai_pTutorialLocation.json';
+let optsCache;
+const maxWidth = 500;
+let previousClicked = false;
+const dialogPosition = {
     my: 'center',
     at: 'center',
     target: $(window), // Position it via the document body...
     viewport: $(window)
 };
 
-function startTutorial(opts){
-    if (!portal.loggedIn) {
-        return;
-    }
-
-    if ( inPlusPortal() ) {
-        return;
-    }
+function startTutorial(opts) {
+    if (inPlusPortal()) return;
 
-    localStorage.setItem('tutorialOpts', JSON.stringify(opts));
+    const isRedirectNeeded = opts.userInitiatedTutorial && window.location.pathname !== '/portal';
+    const isRedirectedForTutorial = sessionStorage.getItem('startTutorialAfterRedirect') === 'true';
 
-    if (window.location.pathname !== '/portal' || localStorage.getItem('tutorialStartPending') === 'true') {
-        localStorage.setItem('tutorialStartPending', 'true');
+    if (isRedirectNeeded) {
+        sessionStorage.setItem('startTutorialAfterRedirect', 'true');
         window.location.pathname = '/portal';
-    } else {
-        runTutorial(opts);
-    }
-}
-
-function runTutorial(opts) {
-    if (!portal.loggedIn) {
         return;
+    } else if (isRedirectedForTutorial) {
+        sessionStorage.removeItem('startTutorialAfterRedirect');
     }
 
-    localStorage.setItem('tutorialStartPending', 'false');
-    localStorage.setItem('tutorialRunning', 'true');
-
-    showTutorialPage(sakaiTutorialStartUrl, opts);
+    if (!isRedirectNeeded) {
+        showTutorialPage(sakaiTutorialStartUrl, opts);
+        const accountPanel = document.querySelector('#sakai-account-panel');
+        if (accountPanel?.classList.contains('show')) {
+            bootstrap.Offcanvas.getInstance(accountPanel)?.hide();
+        }
+    }
+}
 
-    var accountPanel = document.querySelector('#sakai-account-panel');
-    if (accountPanel.classList.contains('show')) {
-        var bsOffcanvas = bootstrap.Offcanvas.getInstance(accountPanel);
-        bsOffcanvas.hide();
+function checkAndStartTutorialIfRedirected() {
+    if (sessionStorage.getItem('startTutorialAfterRedirect') === 'true' && window.location.pathname === '/portal') {
+        startTutorial({});
     }
 }
 
-function endTutorial(selection){
-    localStorage.setItem('tutorialRunning', 'false');
+document.addEventListener('DOMContentLoaded', checkAndStartTutorialIfRedirected);
+
+function endTutorial(selection) {
     $(selection).qtip('destroy');
+    sessionStorage.removeItem('startTutorialAfterRedirect');
 }
 
-window.addEventListener('DOMContentLoaded', (event) => {
-    var opts = JSON.parse(localStorage.getItem('tutorialOpts') || '{}');
-
-    if (localStorage.getItem('tutorialStartPending') === 'true') {
-        runTutorial(opts);
-    } else if (localStorage.getItem('tutorialRunning') === 'true') {
-        runTutorial(opts);
-    }
-});
 
 function showTutorialPage(url, opts) {
     if(opts != null)

portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/snippets/profile-snippet.vm

@@ -29,7 +29,7 @@
         #end
 
         #if (${tabsSites.tutorial})
-          <li class="nav-item"><a id="tutorial-start-button" href="#" onclick="startTutorial({});" class="nav-link">${rloader.sit_tutorial}</a></li>
+          <li class="nav-item"><a id="tutorial-start-button" href="#" onclick="startTutorial({userInitiatedTutorial: true});" class="nav-link">${rloader.sit_tutorial}</a></li>
         #end
 
         #if (${themeSwitcher})