[breity]

Changes

Converts the step select dropdown to a menu with collapsible lessons:

• Each lesson includes a progress spinner indicating percent completed with tooltip showing ratio of steps completed.
• Expanding a lesson shows all the steps within. Each step includes a checkmark if the step has been completed.
• Selecting a step navigates to that step.
• Lessons and steps also show lock icons if they are not visitable.
• Total unit progress is shown at the top of the menu.

Also includes some UI style changes:

• Node icons no longer include a colored wrapper container, but just consist of the icon in its assigned color.
• Increases border-radius for some UI elements (buttons, cards, dialog containers, etc.).
• Changes button text to normal case from uppercase.

Test

• Make sure step select operates properly as before and that you can navigate to different steps using the menu.
• Ensure that any changes in state (unlock steps/lesson, step completed, lesson completion %, steps added via branch selection) are reflected in the step select menu.
• Ensure there aren't any visual or layout glitches for node icons across the VLE and other apps (grading, authoring).

[qltysh]

Coverage Impact

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

Modified Files with Diff Coverage (4)

Rating	File	% Diff	Uncovered Line #s
	...t/themeComponents/nodeStatusIcon/node-status-icon.component.ts	100.0%
	...authoringTool/teacher-node-icon/teacher-node-icon.component.ts	0.0%	19
	...emes/default/themeComponents/stepTools/step-tools.component.ts	100.0%
	...es/default/themeComponents/stepSelect/step-select.component.ts	90.2%	48-50, 53-54
	Total	89.7%

🤖 Increase coverage with AI coding...

In the `add-progress-to-step-select` branch, add test coverage for this new code:

- `src/assets/wise5/authoringTool/teacher-node-icon/teacher-node-icon.component.ts` -- Line 19
- `src/assets/wise5/themes/default/themeComponents/stepSelect/step-select.component.ts` -- Lines 48-50 and 53-54

🚦 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.

[hirokiterashima]

Great UI improvement! A few comments while reviewing, see below.

1. When the dropdown is not shown, should the checkmark be right-aligned to be consistent?

2. Remove isGroup in node-icon.component.ts now that we don't use it in the template?

3. See minor inline comments.

[hirokiterashima]

Remove typo?

Suggested change

	class="s{{ sizeClass }} {{ customClass }}"
	class="{{ sizeClass }} {{ customClass }}"

[hirokiterashima]

Remove unused imports. Also remove NodeStatusService spies from this file because StepToolsComponent no longer uses the service.

Suggested change

	import { NodeService } from '../../../../services/nodeService';
	import { NodeStatusService } from '../../../../services/nodeStatusService';

[hirokiterashima]

Looks good 👍

Can you also remove these before merge?

• in step-tools.component.spec.ts
  • NoopAnimationsModule (and import)
  • nodeStatus1
  • nodeStatus2
• in step-select.component.spec.ts
  • NoopAnimationsModule (and import)