In the schedule page, add a course search component, which by itself is a nested component:
a help tooltip, implemented with something similar to this.
a group with an <input type="text"/> element (hereby referred as BasicSearch.
a modal group (AdvancedSearch), implemented with something similar to this. The advanced search dialogue should have a visible trigger - i.e. a gear icon and once opened, contain the following fields:
Users will use the BasicSearch component by default, and once more complex queries are needed, can use AdvancedSearch. Both BasicSearch and AdvancedSearch will communicate with the backend by sending over a form in url-encoded format. The backend endpoints will be from #2.
If no courses are found, users will see a toast alerting them that no toast is found.
If multiple courses are found, open the advanced search dialogue and allow users to choose the courses to be added.
If there is only one course found, add the course to the course display panel #12
Note that you can write component tests using Storybook, since it will just call testing library apis underhood. I found it to be quite flaky however, but if you can make it work, I am happy with it.
Example
Provide an example or use-case of the requested feature
Summary
Describe the new feature you want to be added
Design
Specification
In the
schedulepage, add a course search component, which by itself is a nested component:<input type="text"/>element (hereby referred asBasicSearch.AdvancedSearch), implemented with something similar to this. The advanced search dialogue should have a visible trigger - i.e. a gear icon and once opened, contain the following fields:Users will use the
BasicSearchcomponent by default, and once more complex queries are needed, can useAdvancedSearch. BothBasicSearchandAdvancedSearchwill communicate with the backend by sending over a form inurl-encodedformat. The backend endpoints will be from #2.Testing
Example
Provide an example or use-case of the requested feature
For searching and adding course