"Add site" Stepper: Introduce click handler to allow clicks on the previous step that is already complete #1891
Conversation
| className={ cx( | ||
| `text-sm`, | ||
| isCurrent ? 'text-gray-900 font-medium' : 'text-gray-500' | ||
| `text-sm font-medium`, |
There was a problem hiding this comment.
I am curios to hear what you think about this change.
Before (you can see slight shift / movement in labels):
Screen.Capture.on.2025-10-15.at.17-17-26.mov
After (there's no shift in the labels; instead the unselected label has thinner font size):
Screen.Capture.on.2025-10-15.at.17-16-26.mp4
📊 Performance Test ResultsComparing a4bb4c0 vs trunk site-editor
site-startup
Results are median values from multiple test runs. Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change |
bcotrim
left a comment
bcotrim
left a comment
There was a problem hiding this comment.
LGTM 👍
Added some suggestions, but feel free to merge as is.
| { steps.map( ( step, index ) => { | ||
| const isCurrent = step.status === 'current'; | ||
| const isCompleted = step.status === 'completed'; | ||
| const isClickable = isCompleted && step.path; |
There was a problem hiding this comment.
I would also move this logic to the useStepper hook.
There was a problem hiding this comment.
Thanks for the suggestions, Bernardo. I agree, it make sense to move these. I have moved the click handler as well: ad724a7.
gcsecsey
left a comment
gcsecsey
left a comment
There was a problem hiding this comment.
The changes LGTM and work well. I can navigate back using the labels, and the file selection in earlier step is also preserved. 👍
|
Thank you for your reviews, Bernardo and Gergely! |
Related issues
Proposed Changes
handleStepClickto handle clicks on the previous step that is already completeScreen.Capture.on.2025-10-15.at.17-24-50.mp4
Testing Instructions
npm install && npm start.Add sitebutton in the app sidebar and try to navigate through the steps ofStart from BlueprintandImport from backupflows.Continuebutton, it should be possible to get back to the first step by clicking the step label (not just theBackbutton).Import from backupflow and navigating back to the step where the import file is selected, it should be remembered.Pre-merge Checklist