style(Authoring Tool): Use tabs to organize activity advanced authoring

[hirokiterashima]

The advanced activity authoring popup was a mess, with everything appearing on one page. This PR brings organization to the page using tabs. The default tabs are "general", "visibility", "connections", "tags", "rubric", and "JSON". Open Response has an additional "AI" tab.

Notes

Please style as you see fit. But don't worry about the styling of the contents inside the tabs for this PR. We can do that in a future task.

Changes

• Use tabs to organize activity advanced authoring for all activities
• Fix Summary authoring. This wasn't working at all.

Test

• Above works as described.
• Changes in the advanced activity authoring are saved as expected.

[qltysh]

Coverage Impact

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

Modified Files with Diff Coverage (33)

Rating	File	% Diff	Uncovered Line #s
	...l/edit-component-advanced/edit-component-advanced.component.ts	100.0%
	...nts/graph/edit-graph-advanced/edit-graph-advanced.component.ts	100.0%
	src/assets/wise5/components/discussion/discussionService.ts	100.0%
	...ded/edit-embedded-advanced/edit-embedded-advanced.component.ts	100.0%
	...scillator-advanced/edit-audio-oscillator-advanced.component.ts	100.0%
	...bility-constraint-icon/visibility-constraint-icon.component.ts	72.7%	16-20
	...-tool/edit-component-rubric/edit-component-rubric.component.ts	100.0%
	...ple-choice-advanced/edit-multiple-choice-advanced.component.ts	100.0%
	...it-concept-map-advanced/edit-concept-map-advanced.component.ts	100.0%
	...onents/html/edit-html-advanced/edit-html-advanced.component.ts	100.0%
	...n/edit-animation-advanced/edit-animation-advanced.component.ts	100.0%
	...nts/match/edit-match-advanced/edit-match-advanced.component.ts	100.0%
	src/assets/wise5/components/openResponse/openResponseService.ts	100.0%
	...g-guidance-advanced/edit-dialog-guidance-advanced.component.ts	100.0%
	...onents/draw/edit-draw-advanced/edit-draw-advanced.component.ts	100.0%
	...nt-advanced-button/edit-component-advanced-button.component.ts	0.0%	23
	...ring-tool/edit-component-json/edit-component-json.component.ts	0.0%	43-44
	...nts/label/edit-label-advanced/edit-label-advanced.component.ts	100.0%
	...edit-discussion-advanced/edit-discussion-advanced.component.ts	100.0%
	...it-outside-url-advanced/edit-outside-url-advanced.component.ts	100.0%
	...l/edit-advanced-component/edit-advanced-component.component.ts	53.3%	32-33, 41-42, 49-51
	.../authoringTool/node/node-authoring/node-authoring.component.ts	100.0%
	...it-component-advanced/edit-component-advanced-shared.module.ts	100.0%
	...em-prompt/edit-component-summarizer-system-prompt.component.ts	100.0%
	...omponents/summary/summary-student/summary-student.component.ts	100.0%
	...open-response-ai-summary/open-response-ai-summary.component.ts	75.0%	26
	...nts/table/edit-table-advanced/edit-table-advanced.component.ts	100.0%
	...-show-my-work-advanced/edit-show-my-work-advanced.component.ts	100.0%
	...ves/teacher-summary-display/ai-summary/ai-summary.component.ts	100.0%
	...mmary/edit-summary-advanced/edit-summary-advanced.component.ts	100.0%
	...splay/discussion-ai-summary/discussion-ai-summary.component.ts	33.3%	29-32
	...group-work-advanced/edit-show-group-work-advanced.component.ts	100.0%
	...anced-component/edit-peer-chat-advanced-component.component.ts	100.0%
	Total	84.0%

🤖 Increase coverage with AI coding...

In the `organize-activity-advanced-authoring-using-tabs` branch, add test coverage for this new code:

- `src/app/authoring-tool/edit-advanced-component/edit-advanced-component.component.ts` -- Lines 32-33, 41-42, and 49-51
- `src/app/authoring-tool/edit-component-json/edit-component-json.component.ts` -- Line 43-44
- `src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.ts` -- Line 23
- `src/assets/wise5/authoringTool/components/visibility-constraint-icon/visibility-constraint-icon.component.ts` -- Line 16-20
- `src/assets/wise5/directives/teacher-summary-display/discussion-ai-summary/discussion-ai-summary.component.ts` -- Line 29-32
- `src/assets/wise5/directives/teacher-summary-display/open-response-ai-summary/open-response-ai-summary.component.ts` -- Line 26

🚦 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 updated some styles and made the tab header sticky so that the tabs are visible when scrolling long setting content.

One suggestion: I think we should move the AI tab further up in the order for activity types that have it. AI should probably at least come before the Rubric and Tags tabs, as those are used rather infrequently. Once we make the AI settings more intuitive, we might even want to put AI before the Visibility and Connections tabs. What do you think?

[hirokiterashima]

Good suggestion. I made the change. Moving the AI tab up more in the future makes sense too.

Right now, we have code that assumes that the visibility tab is the second tab in the dialog, for purpose of opening the tab when the author clicks on the visibility status icon on the component. We should remember this when we order the tabs around in the future, because we'll need to refactor the code then to make sure this functionality still works.

[hirokiterashima]

🎉 This PR is included in version 5.225.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀