style(Authoring Tool): Edit activity in a dialog

[hirokiterashima]

Notes

• Please style and a11y as you see fit. Right now there seems to be some extra vertical padding in the header and the footer.
• This is part of the our effort to make the authoring tool a bit more WYSIWYG. In the future, the step editing view layout will more-closely match what the students see: blocks of component previews with the authored widths.
• In this PR, the Advanced Activity authoring is another dialog that is launched from this new dialog. We'll work on merging the Advanced Activity authoring into this new Edit Activity dialog in a future task, since it'll involve a lot of changes.

Changes

• When "Edit content" is clicked in the step editing view, it now launches a Edit Activity dialog where the author can make changes to the component content. Before, it would switch the component preview to the component editing view inline, which caused some jarring visual effects.
• Moved the Advanced Component Authoring button to the top right corner of this new Edit Activity dialog. Clicking on it will launch another dialog where they can made changes to the advanced component settings.

Test

• Things work as described above.
• The changes made in the Edit Activity dialog are saved and reflected in the component preview when the dialog is closed.

[qltysh]

Coverage Impact

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

Modified Files with Diff Coverage (2)

Rating	File	% Diff	Uncovered Line #s
	...nents/edit-component-dialog/edit-component-dialog.component.ts	83.3%	19-20
	...ise5/authoringTool/components/component-authoring.component.ts	85.7%	48
	Total	84.2%

🤖 Increase coverage with AI coding...

In the `edit-activity-in-dialog` branch, add test coverage for this new code:

- `src/assets/wise5/authoringTool/components/component-authoring.component.ts` -- Line 48
- `src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts` -- Line 19-20

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