Disable ability to Create/Add child epics on Hierarchy widget when max depth has been reached
Summary
Epics can contain multiple nested child epics, up to a total of 7 levels deep as per https://docs.gitlab.com/ee/user/group/epics/manage_epics.html#multi-level-child-epics, and the same limit is enforced by Work Items API for Hierarchy Widget too, however, frontend still allows user to access Add/Create actions for epics under hierarchy widget but trying to use it fails silently since the mutation itself fails.
We need to disable this UI when we find that the current epic is already at the 7th level of depth and instead show a tooltip on UI as You are at the maximum nested level allowed for epics.
| Current UI |
|---|
 |
Getting Depth Information
Work Item page uses work_items/components/work_item_ancestors/work_item_ancestors.vue to render ancestors breadcrumb after fetching the information about complete ancestry via work_items/graphql/work_item_ancestors.query.graphql.
Let's use https://gitlab.com/groups/gitlab-org/plan-stage/-/work_items/226 as an example here, where the Epic is sitting at a certain depth and shows the following breadcrumb view;
In the screenshot above, the epic is at 6th level of depth, so we can create only 1 more child epic past this level before hitting the limit. The query response in this case is as follows;
Notice that the array has 5 items present, these are in the same order as the hierarchy i.e. first element being root epic and the last element being the parent of the current epic, so we can use this information to determine the current depth and disable UI accordingly.
Also, the depth limit is defined in the backend, so rather than hard-coding the limit value on frontend, we should probably inject that info from the backend (via HAML) so that it remains dynamic in case we want to increase the limit in future.