enhance(apps/frontend-manage): add back button to activity creation wizards #4253
Conversation
sjschlapbach
commented
Sep 8, 2024
•
sjschlapbach
commented
Current Aviator status
This PR was merged manually (without Aviator). Merging manually can negatively impact the performance of the queue. Consider using Aviator next time.
See the real-time status of this PR on the
Aviator webapp.
Use the Aviator Chrome Extension
to see the status of your PR within GitHub.
|
WalkthroughWalkthroughThe changes across multiple components in the application introduce a new prop, Changes
Possibly related PRs
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range, codebase verification and nitpick comments (4)
apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizDescriptionStep.tsx (1)
15-15: Incomplete integration ofonPrevStepprop inPracticeQuizWizard.tsx.The
onPrevStepprop is not being passed to thePracticeQuizDescriptionStepcomponent inPracticeQuizWizard.tsx. Ensure that this prop is included in all instances wherePracticeQuizDescriptionStepis used to maintain consistency and functionality.
- File:
apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizWizard.tsxAnalysis chain
Proper integration of
onPrevStepprop.The
onPrevStepprop is correctly integrated into thePracticeQuizDescriptionStepfunction. It is both received as a parameter and passed down to theDescriptionStepcomponent. Ensure that all related components that usePracticeQuizDescriptionStepare updated to handle this new prop if necessary.Also applies to: 35-35
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify if all related components handle the new `onPrevStep` prop correctly. # Test: Search for the usage of `PracticeQuizDescriptionStep` to ensure it's updated everywhere. rg --type tsx -A 5 $'PracticeQuizDescriptionStep'Length of output: 76
Script:
#!/bin/bash # Description: Retry searching for the usage of `PracticeQuizDescriptionStep` without specifying the file type. # Test: Search for the usage of `PracticeQuizDescriptionStep` to ensure it's updated everywhere. rg -A 5 'PracticeQuizDescriptionStep'Length of output: 3825
apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningDescriptionStep.tsx (1)
15-15: EnsureonPrevStepis passed toMicroLearningDescriptionStep.The
onPrevStepprop is defined and used withinMicroLearningWizard.tsx, but it is not currently passed toMicroLearningDescriptionStep. To ensure proper functionality, updateMicroLearningWizard.tsxto includeonPrevStepwhen renderingMicroLearningDescriptionStep.
- Update
MicroLearningWizard.tsxto passonPrevSteptoMicroLearningDescriptionStep.Analysis chain
Proper integration of
onPrevStepprop.The
onPrevStepprop is correctly integrated into theMicroLearningDescriptionStepfunction. It is both received as a parameter and passed down to theDescriptionStepcomponent. Ensure that all related components that useMicroLearningDescriptionStepare updated to handle this new prop if necessary.Also applies to: 35-35
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify if all related components handle the new `onPrevStep` prop correctly. # Test: Search for the usage of `MicroLearningDescriptionStep` to ensure it's updated everywhere. rg --type tsx -A 5 $'MicroLearningDescriptionStep'Length of output: 77
Script:
#!/bin/bash # Description: Find all .tsx files and search for the usage of `MicroLearningDescriptionStep` to ensure it's updated everywhere. # Find all .tsx files and search for `MicroLearningDescriptionStep` within them. fd --extension tsx --exec rg 'MicroLearningDescriptionStep' {}Length of output: 344
Script:
#!/bin/bash # Description: Search for the usage of `MicroLearningDescriptionStep` across all files to ensure it's updated everywhere. # Search for `MicroLearningDescriptionStep` across all files. rg 'MicroLearningDescriptionStep'Length of output: 847
Script:
#!/bin/bash # Description: Search for the usage of `MicroLearningDescriptionStep` within `MicroLearningWizard.tsx` to verify `onPrevStep` handling. # Search for `MicroLearningDescriptionStep` within `MicroLearningWizard.tsx`. rg 'MicroLearningDescriptionStep' apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningWizard.tsx -A 5Length of output: 683
Script:
#!/bin/bash # Description: Search for the usage of `onPrevStep` within `MicroLearningWizard.tsx` to verify its handling. # Search for `onPrevStep` within `MicroLearningWizard.tsx`. rg 'onPrevStep' apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningWizard.tsxLength of output: 392
apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizWizard.tsx (1)
332-335: Backward Navigation Implemented Correctly inPracticeQuizDescriptionStepThe implementation of
onPrevStepin thePracticeQuizDescriptionStepcorrectly handles the backward navigation by updating the form data and adjusting the active step index. The code is clear and functional.Consider destructuring
newValuesdirectly in the function parameter for improved readability:onPrevStep: ({ ...newValues }) => { setFormData((prev) => ({ ...prev, ...newValues })); setActiveStep((currentStep) => currentStep - 1); }apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityWizard.tsx (1)
348-351: Backward Navigation Implemented Correctly inGroupActivityDescriptionStepThe implementation of
onPrevStepin theGroupActivityDescriptionStepcorrectly handles the backward navigation by updating the form data and adjusting the active step index. The code is clear and functional.Consider destructuring
newValuesdirectly in the function parameter for improved readability:onPrevStep: ({ ...newValues }) => { setFormData((prev) => ({ ...prev, ...newValues })); setActiveStep((currentStep) => currentStep - 1); }
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (17)
- apps/frontend-manage/src/components/sessions/creation/DescriptionStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/StackCreationStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/WizardNavigation.tsx (3 hunks)
- apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityDescriptionStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivitySettingsStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityStackClues.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityWizard.tsx (4 hunks)
- apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizDescriptionStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizQuestionsStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizSettingsStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveSessionWizard.tsx (4 hunks)
- apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningDescriptionStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningSettingsStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningWizard.tsx (4 hunks)
- apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizDescriptionStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizSettingsStep.tsx (2 hunks)
- apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizWizard.tsx (4 hunks)
Additional comments not posted (25)
apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizDescriptionStep.tsx (1)
15-15: Proper integration ofonPrevStepprop.The
onPrevStepprop is correctly integrated into theLiveQuizDescriptionStepfunction. It is both received as a parameter and passed down to theDescriptionStepcomponent. Ensure that all related components that useLiveQuizDescriptionStepare updated to handle this new prop if necessary.Also applies to: 35-35
apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityDescriptionStep.tsx (1)
15-15: Proper integration ofonPrevStepprop.The
onPrevStepprop is correctly added to theGroupActivityDescriptionStepfunction signature and passed to theDescriptionStepchild component. Ensure that the prop is properly typed inGroupActivityWizardStepPropsto maintain type safety.Also applies to: 36-36
apps/frontend-manage/src/components/sessions/creation/WizardNavigation.tsx (1)
18-18: Correct implementation of conditional rendering for the back button.The
onPrevStepprop is correctly integrated as an optional parameter and used to conditionally render the back button. Ensure that the new button layout does not introduce any CSS issues or disrupt the existing UI.Also applies to: 37-46
apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizQuestionsStep.tsx (1)
25-25: Proper integration ofonPrevStepprop.The
onPrevStepprop is correctly added to theLiveQuizQuestionsStepfunction signature and passed to theWizardNavigationchild component. Ensure that the prop is properly typed inLiveQuizWizardStepPropsto maintain type safety.Also applies to: 82-82
apps/frontend-manage/src/components/sessions/creation/StackCreationStep.tsx (2)
37-37: Confirm integration ofonPrevStep.The
onPrevStepprop is correctly integrated into the component's props. However, consider adding a default function or using optional chaining to ensure that the component does not break ifonPrevStepis not provided.
95-95: Approve usage ofonPrevStepinWizardNavigation.The usage of
onPrevStepin theWizardNavigationcomponent is correctly implemented with an arrow function to maintain context and pass the current form values. Ensure to verify the entire flow to confirm that thevaluesare handled correctly in the parent component.apps/frontend-manage/src/components/sessions/creation/DescriptionStep.tsx (2)
67-67: Confirm integration ofonPrevStep.The
onPrevStepprop is correctly integrated into the component's props. However, consider adding a default function or using optional chaining to ensure that the component does not break ifonPrevStepis not provided.
137-137: Approve usage ofonPrevStepinWizardNavigation.The usage of
onPrevStepin theWizardNavigationcomponent is correctly implemented with an arrow function to maintain context and pass the current form values. Ensure to verify the entire flow to confirm that thevaluesare handled correctly in the parent component.apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivitySettingsStep.tsx (2)
29-29: Confirm integration ofonPrevStep.The
onPrevStepprop is correctly integrated into the component's props. However, consider adding a default function or using optional chaining to ensure that the component does not break ifonPrevStepis not provided.
137-137: Approve usage ofonPrevStepinWizardNavigation.The usage of
onPrevStepin theWizardNavigationcomponent is correctly implemented with an arrow function to maintain context and pass the current form values. Ensure to verify the entire flow to confirm that thevaluesare handled correctly in the parent component.apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityStackClues.tsx (1)
207-207: Correct usage ofonPrevStepinWizardNavigation.The
onPrevStepfunction is correctly invoked with the current form values, aligning with the PR objectives to enhance backward navigation in the wizard.apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveSessionWizard.tsx (4)
42-42: Proper addition ofonPrevStepto the interface.The addition of
onPrevStepas an optional callback in the interface is correctly implemented with a specific type, enhancing the component's functionality for backward navigation.
308-311: Correct implementation ofonPrevStepinLiveQuizDescriptionStep.The function updates the form data and correctly manages the active step index, facilitating effective backward navigation in the wizard.
330-333: Consistent implementation ofonPrevStepinLiveQuizSettingsStep.The function is correctly used to manage backward navigation by updating the form data and the active step index, maintaining consistency across the wizard steps.
351-354: Proper use ofonPrevStepinLiveQuizQuestionsStep.The function effectively manages backward navigation by updating the form data and the active step index, ensuring a consistent and smooth user experience across the wizard.
apps/frontend-manage/src/components/sessions/creation/microLearning/MicroLearningWizard.tsx (4)
41-41: Proper addition ofonPrevStepto the interface.The addition of
onPrevStepas an optional callback in the interface is correctly implemented with a specific type, enhancing the component's functionality for backward navigation.
322-325: Correct implementation ofonPrevStepinMicroLearningDescriptionStep.The function updates the form data and correctly manages the active step index, facilitating effective backward navigation in the wizard.
344-347: Consistent implementation ofonPrevStepinMicroLearningSettingsStep.The function is correctly used to manage backward navigation by updating the form data and the active step index, maintaining consistency across the wizard steps.
363-366: Proper use ofonPrevStepinStackCreationStep.The function effectively manages backward navigation by updating the form data and the active step index, ensuring a consistent and smooth user experience across the wizard.
apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizWizard.tsx (3)
42-42: Interface Change Approved: Addition ofonPrevStepThe addition of the
onPrevStepfunction to thePracticeQuizWizardStepPropsinterface is correctly implemented and aligns with the PR objectives to enhance navigation in the wizard.
354-357: Consistent Backward Navigation inPracticeQuizSettingsStepThe
onPrevStepfunction in thePracticeQuizSettingsStepis implemented consistently with other steps, correctly handling the backward navigation. This maintains a uniform user experience across the wizard.
373-376: Backward Navigation Correctly Implemented inStackCreationStepThe implementation of
onPrevStepin theStackCreationStepis consistent with other steps and correctly handles the backward navigation by updating the form data and adjusting the active step index.apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityWizard.tsx (3)
43-43: Interface Change Approved: Addition ofonPrevStepThe addition of the
onPrevStepfunction to theGroupActivityWizardStepPropsinterface is correctly implemented and aligns with the PR objectives to enhance navigation in the wizard.
370-373: Consistent Backward Navigation inGroupActivitySettingsStepThe
onPrevStepfunction in theGroupActivitySettingsStepis implemented consistently with other steps, correctly handling the backward navigation. This maintains a uniform user experience across the wizard.
389-392: Backward Navigation Correctly Implemented inGroupActivityStackCluesThe implementation of
onPrevStepin theGroupActivityStackCluesis consistent with other steps and correctly handles the backward navigation by updating the form data and adjusting the active step index.
apps/frontend-manage/src/components/sessions/creation/liveQuiz/LiveQuizSettingsStep.tsx
Show resolved
Hide resolved
...frontend-manage/src/components/sessions/creation/microLearning/MicroLearningSettingsStep.tsx
Outdated
Show resolved
Hide resolved
apps/frontend-manage/src/components/sessions/creation/practiceQuiz/PracticeQuizSettingsStep.tsx
Outdated
Show resolved
Hide resolved
apps/frontend-manage/src/components/sessions/creation/groupActivity/GroupActivityStackClues.tsx
Outdated
Show resolved
Hide resolved
|
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- cypress/cypress/e2e/F-live-quiz-workflow.cy.ts (3 hunks)
- cypress/cypress/e2e/G-microlearning-workflow.cy.ts (3 hunks)
- cypress/cypress/e2e/H-practice-quiz-workflow.cy.ts (3 hunks)
- cypress/cypress/e2e/J-bookmarking-workflow.cy.ts (2 hunks)
- cypress/cypress/e2e/K-group-activity-workflow.cy.ts (3 hunks)
Additional comments not posted (18)
cypress/cypress/e2e/J-bookmarking-workflow.cy.ts (3)
46-47: Correct implementation of navigation controls in the quiz creation workflow.The interaction with the "back session creation" button followed by the "next or submit" button correctly simulates user behavior in a multi-step form. This is a good practice for allowing users to verify or change their inputs before proceeding.
58-59: Proper handling of user navigation for course selection.The use of the "back session creation" button in this context allows users to revisit their course selection, which is crucial for ensuring the accuracy of user inputs in a multi-step process.
71-72: Effective navigation control after drag-and-drop actions.Implementing a "back session creation" button after drag-and-drop actions is a thoughtful addition, allowing users to correct any mistakes before finalizing their inputs.
cypress/cypress/e2e/K-group-activity-workflow.cy.ts (3)
34-35: Correct implementation of navigation controls in the group activity creation workflow.The interaction with the "back session creation" button followed by the "next or submit" button correctly simulates user behavior in a multi-step form. This is a good practice for allowing users to verify or change their inputs before proceeding.
43-44: Proper handling of user navigation for display name and description.The use of the "back session creation" button in this context allows users to revisit their display name and description, which is crucial for ensuring the accuracy of user inputs in a multi-step process.
67-68: Effective navigation control after setting the activity's date.Implementing a "back session creation" button after setting the activity's date is a thoughtful addition, allowing users to correct any mistakes before finalizing their inputs.
cypress/cypress/e2e/H-practice-quiz-workflow.cy.ts (4)
52-53: Correct implementation of navigation controls in the practice quiz creation workflow.The interaction with the "back session creation" button followed by the "next or submit" button correctly simulates user behavior in a multi-step form. This is a good practice for allowing users to verify or change their inputs before proceeding.
61-62: Proper handling of user navigation for display name and description.The use of the "back session creation" button in this context allows users to revisit their display name and description, which is crucial for ensuring the accuracy of user inputs in a multi-step process.
97-98: Effective navigation control after drag-and-drop actions.Implementing a "back session creation" button after drag-and-drop actions is a thoughtful addition, allowing users to correct any mistakes before finalizing their inputs.
128-129: Crucial navigation control at the final step of practice quiz creation.The placement of a "back session creation" button at the final step before publishing the quiz is essential, ensuring that all inputs are verified and correct. This is a best practice in user interface design for complex forms.
cypress/cypress/e2e/F-live-quiz-workflow.cy.ts (4)
59-60: Verify state after back navigation.The test navigates back after entering the live quiz name. It's important to verify that the state is correctly preserved after navigating back. Consider adding assertions to check the input fields or other relevant UI elements to ensure they retain the expected values.
63-64: Verify state after back navigation.The test navigates back after setting the live display name. Ensure that the state is correctly preserved by adding assertions to check the input fields or other relevant UI elements.
165-166: Verify state after back navigation.The test navigates back after configuring course settings. To ensure robust testing, add assertions to verify that all configurations (e.g., selected course, multiplier settings) are retained correctly.
239-240: Verify state after back navigation.The test navigates back after a series of interactions in the quiz creation process. It's crucial to add assertions to verify that all previous inputs and configurations are preserved correctly.
cypress/cypress/e2e/G-microlearning-workflow.cy.ts (4)
90-91: Approved: Navigation back and forth in session creation tested.The addition of back and forth navigation in the session creation step is a good practice for testing realistic user interactions.
99-100: Approved: Consistent testing of navigation controls.Repeating the navigation test at different stages of the session creation ensures thorough coverage and realistic user interaction testing.
123-124: Approved: Navigation testing extended to multiple steps.The extension of navigation control testing to multiple steps of the session creation process ensures robust user experience testing.
219-220: Approved: Comprehensive navigation testing in session creation.Testing navigation controls at this final step of session creation further ensures that the entire workflow accommodates user corrections effectively.
klicker-uzh
|
||||||||||||||||||||||||||||||||||||||||||||||
| Project |
klicker-uzh
|
| Branch Review |
wizard-back-button
|
| Run status |
|
| Run duration | 09m 16s |
| Commit |
|
| Committer | Julius Schlapbach |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
2
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
42
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/e2e/E-course-workflow.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Test course creation and editing functionalities > Test the assignment of random groups in the seeded test course |
Test Replay
Screenshots
|
|
G-microlearning-workflow.cy.ts • 1 flaky test
| Test | Artifacts | |
|---|---|---|
| Different microlearning workflows > converts a seeded past microlearning into a practice quiz |
Test Replay
Screenshots
|
|
K-group-activity-workflow.cy.ts • 1 flaky test
| Test | Artifacts | |
|---|---|---|
| Create and solve a group activity > create a group activity and edit it |
Screenshots
|
|
klicker-uzh
|
||||||||||||||||||||||||||||||||||||||||||||||
| Project |
klicker-uzh
|
| Branch Review |
v3
|
| Run status |
|
| Run duration | 09m 55s |
| Commit |
|
| Committer | Julius Schlapbach |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
|
Failures
|
2
|
|
Flaky
|
1
|
|
Pending
|
0
|
|
Skipped
|
0
|
|
Passing
|
41
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
F-live-quiz-workflow.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Different live-quiz workflows > creates a live quiz without questions and tests the feedback mechanisms and deletes the completed live session |
Test Replay
Screenshots
|
|
K-group-activity-workflow.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Create and solve a group activity > create a group activity and edit it |
Screenshots
|
|
cypress/e2e/G-microlearning-workflow.cy.ts • 1 flaky test
| Test | Artifacts | |
|---|---|---|
| Different microlearning workflows > converts a seeded past microlearning into a practice quiz |
Test Replay
Screenshots
|
|
