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 (9)

Rating	File	% Diff	Uncovered Line #s
	...mponent/choose-new-component/choose-new-component.component.ts	100.0%
	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%
	...ng-tool/component-type-group/component-type-group.component.ts	88.9%	14
	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	68.0%

🤖 Increase coverage with AI coding...

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

- `src/app/authoring-tool/component-type-group/component-type-group.component.ts` -- Line 14
- `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.

[breity]

Looks good. 👍

I extracted the component type groups to its own component and updated styles and layout.

[hirokiterashima]

New changes look great. 👍 Thanks!