Changed color of continue button of welcome modal to grey, added composable useTour and added TooltipTour component

[shruti862]

Summary

This PR lays the groundwork for the onboarding TooltipTour experience for new users.
Specifically:

• Changed the color of "Continue" button in the Welcome Modal to match the design spec (grey background).

• Added a new useTour composable to manage the state of onboarding tooltip tours across the application.
  1. It exposes reactive steps and a tourActive flag.
  2. Provides helper methods:
  --> registerStep({ key, content, stepIndex }) — for dynamically registering tooltip steps from various components.
  --> startTour() — to activate and sort the steps before starting.
  --> endTour() — to cleanly terminate the tour.

• Created a reusable TooltipTour Vue component which uses Tippy.js to render tooltip elements relative to DOM targets.
  Tooltips include:
  --> Continue and Back buttons for navigation across steps
  --> Close (“X”) button to end the tour which resets state (tourActive = false)
  -->The tooltip content is dynamically injected using a TooltipContent Vue component instance.

Attaching screenshot & screencast for the work done so far:

Screencast.from.02-07-25.10.47.57.PM.IST.webm

References

Related issue: #13521

Design spec for onboarding tooltips : link

Reviewer guidance

Initial Testing: "On My Own" (super admin) device setup screen.

• When a new Kolibri user sets up their account using the “On My Own workflow”, they see the Welcome Modal appear on the Library page after setup completes.
• When the user clicks the continue button, the first popup that they see for the “onboarding tour” is the Library tab of the navigation menu.

[LianaHarris360]

The TooltipTour looks great and is very responsive! One thing that is important to do is to continuously pull from the develop branch so that you have the latest changes and there won’t be any merge conflicts when you open a PR.

[marcellamaki]

Hi @shruti862 - nice work on this! It's very close to being ready to go. I know Liana is going to do a bit of rereview, but I have two blocking comments regarding dependencies - I think the package.json, package-lock.json and yarn-lock.json changes are not actually needed for this PR and perhaps are some artifacts of your linting or local setup. In that case, we won't want to include them in the files that we merge.

I did do some manual testing, and I know Liana has as well, and overall the interactions are looking good :) We will also ask our QA team to do some review, but I think we are getting close to being ready to merge.

[LianaHarris360]

Like Marcella mentioned, this is close to being ready to go. Our goal is to get this PR in a mergeable state, so you can also remove the [DO NOT MERGE] section from the PR title. I've added a few more notes below.

[shruti862]

Like Marcella mentioned, this is close to being ready to go. Our goal is to get this PR in a mergeable state, so you can also remove the [DO NOT MERGE] section from the PR title. I've added a few more notes below.

Done :)

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.1a0.dev0_git.178.g8b415467.pex
Windows Installer (EXE)	kolibri-0.18.1a0.dev0+git.178.g8b415467-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.1a0.dev0+git.178.g8b415467-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.1a0.dev0+git.178.g8b415467.dmg
Android Package (APK)	kolibri-0.18.1a0.dev0+git.178.g8b415467-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.1a0.dev0+git.178.g8b415467.zip
TAR file	kolibri-0.18.1a0.dev0+git.178.g8b415467.tar.gz
WHL file	kolibri-0.18.1a0.dev0+git.178.g8b415467-py2.py3-none-any.whl

[LianaHarris360]

There's a few linting errors due to some items that need to be tweaked and cleaned up :)

[LianaHarris360]

@radinamatic @pcenov Tagging QA to check for regressions. This PR introduces the onboarding tooltip tour for users setting up Kolibri with an “On My Own” super admin account, this is the only type of account that should see the onboarding tour. Full accessibility will be addressed in the next PR, we mainly need to ensure there are no regressions on the Library page, especially for first-time users who did not use the “On My Own” device setup.

• After completing the "On My Own" device setup, the user is taken to the Library page and they see the welcome modal appear with the text “The first thing you should do is add learning resources to your library”.
• After clicking the continue button to close the modal, the onboarding tour begins. It contains 4 steps total and allows the user to press the CONTINUE, BACK, or X (close) button. The keyboard navigation and focus trapping will be implemented later.

The requested changes have been addressed

[radinamatic]

Tested the DEB asset in Firefox and Chrome on Ubuntu, no regressions observed on Library page. Looking forward to testing the keyboard navigation and other accessibility features of these onboarding messages 👍🏽

Not sure how these tooltips relate to , for example, accessibility of the modals, but a part from working on the keyboard navigation, we should also think about the what would be announced by the screen-reader (couldn't see anything in the Figma). One thing that comes to mind that could serve as a title for the tooltip, is the step order: (Page title) - Onboarding - step N of M or similar.

[LianaHarris360]

Thank you for bringing that up, making sure the tooltip content is screen reader compatible is one of the next priorities. I think a non-visible title indicating the page and the onboarding step would be a good addition!

[LianaHarris360]

QA has confirmed there are no regressions and the previous comments have been resolved, this is good to merge!