Change delete model page to a delete confirmation modal

[hudson-newey]

Change delete model page to a delete modal

At the moment, when deleting a project, region or site model, the client navigates to an entirely new page route to confirm. This is overkill and should instead use a modal.

Changes

• Changes project delete page to a delete modal modalMenu item
• Changes region delete page to a delete modal modalMenu item
• Changes site / region delete page to a delete modal modalMenu item
• Adds tests for all the above

Minor Changes

• Adds rounded corners to LinkMenuItem's. The rounded corners were already present on all other menu items, and applied to the LinkMenuItem icon, indicating that this was merely a "typo" / missed bootstrap class on the menu link container. (before and after examples attached below)
• links mock regions to projects in details.component.spec.ts tests
• links mock sites to region / site in details.component.spec.ts tests
• Adds the ability for modal menu items to be disabled

Moves menu item inheritance to the MenuItem interface
This interface is used by all menu items, allowing for all menu items to inherit each other now.

Historically, MenuRoute's could only be children of other MenuRoute's. This caused all the different menu items to cluster together into groups. e.g. all MenuRoute's would be clustered and sorted together. This process would then be repeated for the MenuModal's and MenuAction's.

This has now been changed so that MenuAction, MenuModal and MenuRoute's can now inherit and be children of each other (causing them to sort as a hierarchical cluster).

Minor changes / bug fixes unrelated to ticket:

• Under certain conditions on Chrome, there was a bug where a border would not show around the annotation batch uploading file input

Problems

1. I have noticed that the menu items are not all of the same casing and is inconsistent across the client. We may want to consider using the Angular TitleCasePipe to standardize menu casing
2. The tag_groups route has regressed in functionality and there is currently no way to verify that the delete modal is working on the tag_groups view. I have verified that the client has not regressed in functionality due to the changes made in this PR
3. The delete Tag endpoint is not currently functional on the server side e.g. api.staging.ecosounds.org/admin/tags/2883

Issues

Fixes: #496

Visual Changes

Delete modals

Delete project modal:

Batch upload annotations visual changes

The file input box did not have a border around it on Chrome

From

To

Final Checklist

• [x] Assign reviewers if you have permission
• [x] Assign labels if you have permission
• [x] Link issues related to PR
• [x] Ensure project linter is not producing any warnings (npm run lint)
• [ ] Ensure build is passing on all browsers (npm run test:all)
• [ ] Ensure CI build is passing
• [ ] Ensure docker container is passing (docs)

[hudson-newey]

It would be interesting to use the RouteReuseStrategy in the future, however, from what I can see the RouterOutlet attach and detach events are only useful when there is a RouteReuseStrategy in place because it triggers when a reusable route is attached / detached.

If we end up using RouteReuseStrategy in the future is should be as simple as calling the existing onRouterOutlet method from the attach and detach routerOutelet events.

[hudson-newey]

Since your last review, I have added the delete modals to several more pages. I have outlined the changes since your last review below:

Tag Groups

Added a tag group delete modal menu item. This menu item is used on the edit tag groups page.

Added a method to delete tag groups from the list page. This method allows for a singular tag-group to be deleted through a modal from the list page if the "delete" button next to a tag is clicked. Since this button is embedded into the page, this async method uses the result value of the modal to assert if the user confirmed the deletion.

Added a method to delete tag groups from the edit page. This method is called when the "Delete tag" modal menu item is clicked and confirmed.

Added tests to assert that tag groups are correctly deleted from the list page

Added tests to assert that tag groups are correctly deleted from the edit page

Singular Tags

Added tag delete method on the tag edit page. This method is called by the tag delete modal menu item.

Added tests for the tag delete methods found on the tag edit page

Added a tag deletion method to the tag list page. This method allows for a singular tag to be deleted through a modal if the "delete" button next to a tag is clicked. Since this button is embedded into the page, this async method uses the result value of the modal to assert if the user confirmed the deletion.

Added test for the tags list page. These tests assert that a singular tag can be deleted if the "delete" button next to a tag is clicked.

Added a tag delete modal menu item. This menu item is used on the tag edit page.

Account cancellation

Added a cancelAccount method to the my-profile page component. This method is called when the "Cancel my account" menu button is clicked and the delete modal is confirmed.

Added tests to assert that the cancel account method works as expected

Added a "Cancel my account" modal menu item. This menu item is shown on the my-profile page component.