feat : add studio tour for first time user

[aialok]

Description

• This PR will introduce a tour for first-time users.
• There are a total of ten steps explaining each component of the studio.

Related issue(s)

• Closes #284

Here's is snapshot :

Screencast from 2024-06-27 22-55-36.webm

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: c1f37c77975a4c93c02837f744109cdc016a4f4d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify[bot]]

✅ Deploy Preview for asyncapi-studio-design-system ready!

Name	Link
🔨 Latest commit	c1f37c77975a4c93c02837f744109cdc016a4f4d
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/66ef0f89a4da0c000867b7bd
😎 Deploy Preview	https://deploy-preview-1120--asyncapi-studio-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for studio-next ready!

Name	Link
🔨 Latest commit	c1f37c77975a4c93c02837f744109cdc016a4f4d
🔍 Latest deploy log	https://app.netlify.com/sites/studio-next/deploys/66ef0f89bf45bc00083d3b18
😎 Deploy Preview	https://deploy-preview-1120--studio-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for modest-rosalind-098b67 ready!

Name	Link
🔨 Latest commit	c1f37c77975a4c93c02837f744109cdc016a4f4d
🔍 Latest deploy log	https://app.netlify.com/sites/modest-rosalind-098b67/deploys/66ef0f8978ae0f0008947b31
😎 Deploy Preview	https://deploy-preview-1120--modest-rosalind-098b67.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[aialok]

This PR is ready to review. Thank you : )

[Shurtu-gal]

Is it just me or nobody is able to see the tour?

[aialok]

Hey @Shurtu-gal !!

It is working fine for me : https://deploy-preview-1120--modest-rosalind-098b67.netlify.app/

changes are done in : app/studio

https://github.com/asyncapi/studio/pull/1120#issuecomment-2195310477

you can run the tour again :

[Shurtu-gal]

@aialok the changes need to be done in studio-next as well I suppose. @Amzani when are we planning to merge these two?

Also is there any scope of showing interaction to user during the tour.

[aeworxet]

@asyncapi/bounty_team

[Shurtu-gal]

Updates:

I have told @aialok to do a comparison b/w various option such as react-joyride and create an ADR so that we can make an informed decision. The only problem with the current implementation is the lack of interactivity (controlled elements).

[aialok]

@Mayaleeeee Please review the design of the popover. @Shurtu-gal This is ready for review.

Thank you : )

[Shurtu-gal]

Great work @aialok 🚀. Just need a design approval, meanwhile this can be put on slack as well, for suggestions from everyone, can cc @studio there as well.

[aialok]

Done with all the requested changes. Thank you @Amzani : )

[aialok]

Thank you @KhudaDad414 , done with requested changes : )

[KhudaDad414]

@aialok the branch has some conflicts.

[aialok]

@aialok the branch has some conflicts.

Oops. It pnpm-lock file conflict it is lil hard to resolve but lemme fix it : )

[aialok]

Thank you @KhudaDad414 I have resolved the conflict : )

[Shurtu-gal]

@Amzani I suppose the sonarcloud check for duplication was disabled?

[Shurtu-gal]

/ptal

[asyncapi-bot]

@magicmatatjahu Please take a look at this PR. Thanks! :wave:

[aialok]

Can we merge this PR? or is there anything else need to be done? Thank you : )

[Amzani]

Some tests are still failing

[aialok]

Some tests are still failing

Fixing it. It is simple eslint error : )

[aialok]

@Amzani Fixed the lint error. Hopefully test will pass now : )

[aeworxet]

@aialok Please also pay attention to the sonarcloud analysis.

[aialok]

@aialok Please also pay attention to the sonarcloud analysis.

Basically we have same code in two monorepo one in studio and studio-next.

[aeworxet]

FYI

Duplication reported by SonarCloud are two mostly identical files:

./apps/studio/src/helpers/driver.ts
./apps/studio-next/src/helpers/driver.ts

Maintainers, should they both be present in one PR or should there be two PRs, separate for studio and studio-next, to keep SonarCloud happy?

[asyncapi-bot]

Hello, @aeworxet! 👋🏼

    I'm 🧞🧞🧞 Genie 🧞🧞🧞 from the magic lamp. Looks like somebody needs a hand!

    At the moment the following comments are supported in pull requests:

    - `/please-take-a-look` or `/ptal` - This comment will add a comment to the PR asking for attention from the reviewrs who have not reviewed the PR yet.
    - `/ready-to-merge` or `/rtm` - This comment will trigger automerge of PR in case all required checks are green, approvals in place and do-not-merge label is not added
    - `/do-not-merge` or `/dnm` - This comment will block automerging even if all conditions are met and ready-to-merge label is added
    - `/autoupdate` or `/au` - This comment will add `autoupdate` label to the PR and keeps your PR up-to-date to the target branch's future changes. Unless there is a merge conflict or it is a draft PR. (Currently only works for upstream branches.)
    - `/update` or `/u` - This comment will update the PR with the latest changes from the target branch. Unless there is a merge conflict or it is a draft PR. NOTE: this only updates the PR once, so if you need to update again, you need to call the command again.

[aialok]

FYI

Duplication reported by SonarCloud are two mostly identical files:

./apps/studio/src/helpers/driver.ts
./apps/studio-next/src/helpers/driver.ts

Maintainers, should they both be present in one PR or should there be two PRs, separate for studio and studio-next, to keep SonarCloud happy?

https://github.com/asyncapi/studio/pull/1120#issuecomment-2198520537

[asyncapi-bot]

Hello, @aialok! 👋🏼

    I'm 🧞🧞🧞 Genie 🧞🧞🧞 from the magic lamp. Looks like somebody needs a hand!

    At the moment the following comments are supported in pull requests:

    - `/please-take-a-look` or `/ptal` - This comment will add a comment to the PR asking for attention from the reviewrs who have not reviewed the PR yet.
    - `/ready-to-merge` or `/rtm` - This comment will trigger automerge of PR in case all required checks are green, approvals in place and do-not-merge label is not added
    - `/do-not-merge` or `/dnm` - This comment will block automerging even if all conditions are met and ready-to-merge label is added
    - `/autoupdate` or `/au` - This comment will add `autoupdate` label to the PR and keeps your PR up-to-date to the target branch's future changes. Unless there is a merge conflict or it is a draft PR. (Currently only works for upstream branches.)
    - `/update` or `/u` - This comment will update the PR with the latest changes from the target branch. Unless there is a merge conflict or it is a draft PR. NOTE: this only updates the PR once, so if you need to update again, you need to call the command again.