Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content Search Modal: Filters [FC-0040] #918

Merged
merged 50 commits into from
Apr 11, 2024

Conversation

bradenmacdonald
Copy link
Contributor

@bradenmacdonald bradenmacdonald commented Mar 24, 2024

Description

Implementation of openedx/modular-learning#201 .

Video of this feature:

Studio.Search.Demo.mov

Goal was to implement the top half of this:

Screenshot 2024-03-23 at 5 14 36 PM

Note that some things

Other information

Goal: Redwood

TODO

  • Fix: "Type" button should always show the first filter option selected
  • Fix: "Type" button dropdown changes order when you check a type that has the same number of results as another type.
  • Remove time from the <Stats/>, localize it
  • Implement "Load more" link for tags?
  • Add a couple more tests, fix the failing tests (from the paragon upgrade maybe?)

TODO in a follow-up PR:

  • Implement search box for tags filter, allow multi-select (prob. following this example)
  • Format the results list better
  • Add empty states for the results panel

Private ref: FAL-3696

@bradenmacdonald bradenmacdonald requested a review from a team as a code owner March 24, 2024 00:15
@openedx-webhooks openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Mar 24, 2024
@openedx-webhooks
Copy link

openedx-webhooks commented Mar 24, 2024

Thanks for the pull request, @bradenmacdonald! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

  • supporting documentation
  • Open edX discussion forum threads
  • timeline information ("this must be merged by XX date", and why that is)
  • partner information ("this is a course on edx.org")
  • any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

@bradenmacdonald bradenmacdonald marked this pull request as draft March 24, 2024 00:15
@bradenmacdonald bradenmacdonald changed the title Content Search Modal: Filters [WIP] [FC-0040] Content Search Modal: Filters [FC-0040] Apr 3, 2024
@bradenmacdonald bradenmacdonald marked this pull request as ready for review April 3, 2024 19:02
Copy link

codecov bot commented Apr 3, 2024

Codecov Report

Attention: Patch coverage is 94.21488% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 91.96%. Comparing base (99a144a) to head (30689b6).
Report is 7 commits behind head on master.

❗ Current head 30689b6 differs from pull request most recent head 650b733. Consider uploading reports for the commit 650b733 to get more accurate results

Files Patch % Lines
src/search-modal/FilterByTags.jsx 92.00% 2 Missing ⚠️
src/header/Header.jsx 83.33% 1 Missing ⚠️
src/search-modal/BlockTypeLabel.jsx 80.00% 1 Missing ⚠️
src/search-modal/EmptyStates.jsx 88.88% 1 Missing ⚠️
src/search-modal/FilterByBlockType.jsx 93.75% 1 Missing ⚠️
src/search-modal/SearchKeywordsField.jsx 80.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master     #918      +/-   ##
==========================================
- Coverage   92.00%   91.96%   -0.05%     
==========================================
  Files         612      586      -26     
  Lines       10746    10351     -395     
  Branches     2305     2263      -42     
==========================================
- Hits         9887     9519     -368     
+ Misses        830      805      -25     
+ Partials       29       27       -2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

@rpenido rpenido left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @bradenmacdonald! I quickly looked at the code and commented about small things missed from the other PR.

Tomorrow, I'll test it and do a proper review.

const studioBaseUrl = getConfig().STUDIO_BASE_URL;
const meiliSearchEnabled = [true, 'true'].includes(getConfig().MEILISEARCH_ENABLED);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Liked it!

src/header/messages.js Outdated Show resolved Hide resolved
src/hooks.js Outdated Show resolved Hide resolved
src/search-modal/SearchUI.jsx Outdated Show resolved Hide resolved
src/search-modal/SearchResult.jsx Outdated Show resolved Hide resolved
Copy link
Contributor

@rpenido rpenido left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM @bradenmacdonald! 👍

  • I tested this running using my tutor stack
  • I read through the code
  • I checked for accessibility issues
    • There is a minor problem here. You can't leave the CheckboxSet if you navigate using tabs. The problem is probably in the Paragon component.
  • Includes documentation

src/search-modal/SearchModal.test.jsx Outdated Show resolved Hide resolved
src/search-modal/SearchUI.test.jsx Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
@bradenmacdonald
Copy link
Contributor Author

Thanks @rpenido! I'll look into the a11y issue you found:

There is a minor problem here. You can't leave the CheckboxSet if you navigate using tabs. The problem is probably in the Paragon component.

@xitij2000
Copy link
Contributor

@bradenmacdonald Could you rebase this? I'll review it tomorrow.

@bradenmacdonald
Copy link
Contributor Author

@xitij2000 Done. Thanks!

@bradenmacdonald
Copy link
Contributor Author

Test failure is some temporary issue with codecov; should go away later.

Copy link
Contributor

@xitij2000 xitij2000 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have much feedback for this. It looks good to merge as-is.

@bradenmacdonald
Copy link
Contributor Author

Discussion of the failing codecov check: https://openedx.slack.com/archives/C04BM6YC7A6/p1712684355941999?thread_ts=1711620349.847079&cid=C04BM6YC7A6

Seems like we just have to wait as it's a GitHub-wide rate limiting problem.

@bradenmacdonald
Copy link
Contributor Author

@xitij2000 I got a green build. Could you please "Squash and Merge"? :)

@xitij2000 xitij2000 merged commit fc3e38f into openedx:master Apr 11, 2024
4 checks passed
@openedx-webhooks
Copy link

@bradenmacdonald 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

@bradenmacdonald bradenmacdonald deleted the braden/filter-ui branch April 11, 2024 20:27
@bradenmacdonald
Copy link
Contributor Author

There is a minor problem here. You can't leave the CheckboxSet if you navigate using tabs. The problem is probably in the Paragon component.

@rpenido Just following up on this: I think that's expected behavior. When the menu is open, the tab only moves among the items in the menu. To leave the menu, you press ESC and then you can TAB through the rest of the controls in the modal.

xitij2000 pushed a commit that referenced this pull request Apr 24, 2024
As of #918 , the content search only allows filtering the results by one tag at a time, which is a limitation of Instantsearch.

So with this change, usage of Instantsearch + instant-meilisearch has been replaced with direct usage of Meilisearch. Not only does this simplify the code and make our MFE bundle size smaller, but it allows us much more control over how the tags filtering works, so that we can implement searching by multiple tags.

Trying to modify Instantsearch to do that was too difficult, given the complexity of its codebase.

Related ticket: openedx/modular-learning#201
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
open-source-contribution PR author is not from Axim or 2U
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

4 participants