refactor(Project Authoring): Extract copy node location selection feature to component

[hirokiterashima]

Notes

• Please style and clean code/template as you see fit

Changes

• Extract copy node location selection feature from ProjectAuthoringComponent to ChooseCopyNodeLocationComponent
• Refactor code
  • Create abstract parent component ChooseNodeLocationComponent that is extended by ChooseCopyNodeLocationComponent and ChooseMoveNodeLocationComponent
  • Create components (e.g. InsertNode[After/Inside]ButtonComponents,...) to be used in multiple templates
• Clean up related code
  • Remove copy/move node handling from ProjectAuthoringComponent (code&template)

Test

• Copy node works as before:
  • one step at a time
  • multiple steps at a time
  • to active and inactive sections
• Move node works as before:
  • one node at a time
  • multiple nodes at a time
  • steps
  • groups
  • to/from active and inactive sections
• Other existing features in project authoring work as before

Closes #1396

[geoffreykwan]

Looks good.

I found a bug but it also occurs on production. Copy a step from inactive steps and put into inactive activity will fail and throw an error. This happens on production too so we could fix it in another issue.

I think having separate html template files for these files would be more consistent, cleaner and more organized. Inline templates do not have syntax highlighting which makes it harder to read. If you search for something in a template and only include *.html files in your search, you won't get results from inline templates. Separate html files would also follow the model-view-controller pattern better and have better separation of concerns.

• insert-node-after-button.component.ts
• insert-node-inside-button.component.ts
• node-icon-and-title.component.ts
• node-with-move-after-button.component.ts

[breity]

Looks good. Made a few minor style updates.

I was also wondering about the decision to put the template in the component definition rather than separate html files for some components. Is it because the templates are small and have no css? Should we discuss conventions for this?

[hirokiterashima]

Thanks for the styling changes.

Yes, let's discuss conventions for inline template.

Angular's style guide suggests putting template and styles into a separate file if it's more than 3 lines:
https://angular.io/guide/styleguide#extract-templates-and-styles-to-their-own-files

Large, inline templates and styles obscure the component's purpose and implementation, reducing readability and maintainability.

Even though these components were more than 3 lines (some due to line-wrapping), I put the templates directly in the components because the component classes were simple classes (only included inputs and outputs), templates were simple, and I didn't think they obscured the purpose and implementation of the classes. It's also nice to see the template and code together (no need to open two editors). Anyway, let's discuss.

[hirokiterashima]

🎉 This PR is included in version 5.108.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀