backend.ai-webui icon indicating copy to clipboard operation
backend.ai-webui copied to clipboard

feat: Neo Session Launcher Tour Guide via 'antd tour'

Open ironAiken2 opened this issue 1 year ago β€’ 3 comments

This PR Resolves #2260 Issue.

Feature:

  • Provide Tour Guide for Neo Session Launcher.
  • Controls the current step as a state, resetting it to the initial step when the sectional step changes.
  • To access elements in a child component, used forwardRef. If passing multiple refs is needed, used a querySelector to directly traverse the elements.
  • The antd built-in scroll event didn't work well, so I created a function to control the scroll event.
image

Checklist: (if applicable)

  • [ ] Mention to the original issue
  • [ ] Documentation
  • [ ] Minium required manager version
  • [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
  • [ ] Minimum requirements to check during review
  • [ ] Test case(s) to demonstrate the difference of before/after

ironAiken2 avatar Apr 01 '24 05:04 ironAiken2

Coverage report for ./react

St.:grey_question:
Category Percentage Covered / Total
πŸ”΄ Statements
2.68% (-0.01% πŸ”»)
118/4396
πŸ”΄ Branches
2.89% (-0.01% πŸ”»)
87/3006
πŸ”΄ Functions
1.31% (-0.01% πŸ”»)
19/1445
πŸ”΄ Lines
2.64% (-0.01% πŸ”»)
114/4314
Show new covered files 🐣
St.:grey_question:
File Statements Branches Functions Lines
πŸ”΄
... / SessionLauncherErrorTourProps.tsx
0% 0% 0% 0%

Test suite run success

32 tests passing in 4 suites.

Report generated by πŸ§ͺjest coverage report action from e3d48daa3c5c6e847c3534e58b99801d9af69103

github-actions[bot] avatar Apr 01 '24 05:04 github-actions[bot]

It's better to show the start step in the center using target={null} https://ant.design/components/tour#tour-demo-placement

yomybaby avatar Apr 01 '24 06:04 yomybaby

Please resolve the conflicts @ironAiken2

yomybaby avatar Apr 24 '24 03:04 yomybaby

  • #2284 Graphite πŸ‘ˆ
  • main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ironAiken2 and the rest of your teammates on Graphite Graphite

ironAiken2 avatar May 13 '24 08:05 ironAiken2

Applied

There are too many steps in the tour. Let's keep only a few key steps and remove the rest. Let's split it into two tours:

  • Tour 1: In the first step, welcome to Neo Session Launcher, move to the right step, move to the bottom button.
  • Tour 2: Only display if there is a validation error in the final step.
    • If there is a validation error, guide to press the modify button to correct it.

And let's refactoring

  • use data-test-id instead of using class names or refs.
  • After remaining only 2 tours, unnecessary refs can be deleted.
  • Instead of directly accessing localStorage in settings, use useBAISettingUserState.
  • Give a more specific name to the setting, indicating that it is for determining whether the tour has been completed. For example, (has_toured_neo_session_launcher_introduction):

ironAiken2 avatar May 14 '24 05:05 ironAiken2