Added Courseware Search container popover #1212
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
schenedx
reviewed
Oct 17, 2023
aethant
reviewed
Oct 17, 2023
aethant
reviewed
Oct 17, 2023
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #1212 +/- ##
==========================================
+ Coverage 88.09% 88.18% +0.08%
==========================================
Files 268 270 +2
Lines 4537 4587 +50
Branches 1145 1151 +6
==========================================
+ Hits 3997 4045 +48
- Misses 526 528 +2
Partials 14 14
☔ View full report in Codecov by Sentry. |
rijuma
changed the title
schenedx
approved these changes
Oct 19, 2023
CefBoud
pushed a commit
to open-craft/frontend-app-learning
that referenced
this pull request
Nov 5, 2023
* feat: Added Courseware Search container popover * chore: Added unit tests for CoursewareSearch and CoursewareSearchToggle * chore: Updated unit test for CourseTabsNavigation * chore: Partial coverage on Courseware Search Hooks * chore: Finished Courseware Search Hooks unit testing * fix: Fixed an overlook that caused a conditional hook * fix: Reduced bounce timeout on scroll/resize to 100ms * chore: Updated snapshots * chore: Moved @testing-library/react-hooks dep to DEV * chore: Minor adjustments on unit tests * chore: Fixed test issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Ticket: KBK-42 🔒
We need a modal 🔒 to show the search components and the results.
Important
I've added
@testing-library/react-hooks@^8.0.1dependency. This allows testing standalone hooks rather than creating a testing component to use the hook. It makes it much cleaner to test.UI changes
instructor view
Student view
The Design is a bit peculiar, and I couldn't match the UI using Paragon's FullscreenModal, ModalLayer nor ModalDialog.
The UI has a modal-like overlay without a backdrop that anchors just over the Course Home tabs and extends to the bottom of the page.
I've managed to create some hooks to solve the UI. Maybe this can be revisited and replaced by some of Paragon's previously mentioned components in the future.
The overlay has some placeholder text to test the inner scrolling. When the modal pops up, it scrolls to the top of the page and freeze the
<body>scrolling.Notes
I've added a prop to the slice
course-home/data/slice.js. I don't see there's any unit tests on slices in the repo, maybe because they are small and simple or maybe they can be tested indirectly. I could add aslice.test.jsfor that extra prop if needed.Testing Instructions:
In order to see the search button and overlay:
Results:
You should be able to click and open the search modal when the waffle flag is enabled.