Autocomplete Dropdown in Generate

[matt-dahlgren]

Proposed Changes

Added a dropdown functionality for the courses input field in js/components/generate/GenerateForm.js

Now students can search for courses in the drop down and select as many as they would like. Having this select feature means that students can no longer enter a course that does not exist as they will be choosing from a list of supported classes!

Tests in js/components/generate/__tests__/generate.test.js have been changed to better align with the new features, most notably that text that is not within the /courses fetch() call.
...

This photo shows that if a student types an incorrect class and press generate it will be like no classes have been submitted.

The next photos show that selected courses are highlighted in the autocomplete dropdown, but are also show underneath the dropdown so that users do not need to scroll and type to find out what they have already selected.

When a course is selected again in the dropdown it will remove itself from the list of selected courses

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)	x
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)	x
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)	x
📦 Dependency update (change that updates a dependency)	x
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

• I have performed a self-review of my changes.
  • Check that all changed files included in this pull request are intentional changes.
  • Check that all changes are relevant to the purpose of this pull request, as described above.
• I have added tests for my changes, if applicable.
  • This is required for all bug fixes and new features.
• [] I have updated the project documentation, if applicable.
  • This is required for new features.
• If this is my first contribution, I have added myself to the list of contributors.
• I have updated the project Changelog (this is required for all changes).

After opening your pull request:

• I have verified that the CircleCI checks have passed.
• I have requested a review from a project maintainer.

Questions and Comments

(Include any questions or comments you have regarding your changes.)

[coveralls]

Pull Request Test Coverage Report for Build 8f62c015-97d1-4d5a-a5c6-790ccfb04ae4

Details

• 18 of 18 (100.0%) changed or added relevant lines in 2 files are covered.
• 84 unchanged lines in 1 file lost coverage.
• Overall coverage decreased (-2.4%) to 54.631%

---

Files with Coverage Reduction	New Missed Lines	%
js/components/generate/GenerateForm.js	84	31.17%

Totals
Change from base Build d813aad2-5dc6-41f0-b30e-752b12be6928:	-2.4%
Covered Lines:	2181
Relevant Lines:	3928

---

💛 - Coveralls

[david-yz-liu]

@matt-dahlgren nice work! I just left a few minor comments

[david-yz-liu]

It's not necessary to have these braces, just call onSelectedChange(trunc)

[david-yz-liu]

This should be specified in the CSS (you can add a class name to this component)

[david-yz-liu]

Move this style into the CSS as well

[david-yz-liu]

@matt-dahlgren nice work!