style(Component Selection): Group by function

[hirokiterashima]

Notes

• Please style as you see fit!
• There is a lot of code overlap in the two places where we show this component groupings, but I also saw that they had some differences in styles, so I didn't extract a new component. Feel free to extract to a new component if you can and reduce duplication.

Changes

• In AddYourOwnNode (creating a new blank step) and ChooseNewComponent (adding a component to an existing step) views, organize the components in groups based on function, as seen in the screenshot above.

Test

• Test the two views and make sure they work as before
  • AddYourOwnNode (creating a new blank step)
  • ChooseNewComponent (adding a component to an existing step)
• The component select dropdown in the component info dialog works as before. Code that this feature uses was slightly updated in this PR.

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

Modified Files with Diff Coverage (7)

Rating	File	% Diff	Uncovered Line #s
	src/assets/wise5/components/dialogGuidance/DialogGuidanceInfo.ts	100.0%
	src/assets/wise5/components/html/HtmlInfo.ts	100.0%
	src/assets/wise5/components/summary/SummaryInfo.ts	100.0%
	src/assets/wise5/components/showMyWork/ShowMyWorkInfo.ts	100.0%
	src/assets/wise5/services/componentTypeService.ts	12.5%	16-65
	src/assets/wise5/components/match/MatchInfo.ts	100.0%
	src/assets/wise5/components/embedded/EmbeddedInfo.ts	100.0%
	Total	50.0%

🤖 Increase coverage with AI coding...

In the `organize-component-selection-screen` branch, add test coverage for this new code:

- `src/assets/wise5/services/componentTypeService.ts` -- Line 16-65

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.