Feature: Workspace breadcrumbs

[madsrasmussen]

Important

Merges together with PR: umbraco/Umbraco-CMS#15746

This PR introduces a breadcrumb for workspaces opened from a menu item/tree item.

The general concept is that a workspace doesn't know anything about its structure and where the data precisely lives in a menu. It is only the menu that knows the structure. The menu provides a new MenuStructureWorkspaceContext that collects all information about the structure of the current workspace. It can be a relatively simple structure (collections) or more complex (trees). The menu structure context is provided as part of the workspace context and therefore available for anyone that needs this information. We use the information ourselves to set up the breadcrumbs.

The PR implements two types of menu structures/breadcrumbs, one for variant items and one for items with a name.

The breadcrumb will show the path to the currently opened entity and observe the name. That means that the current item in the breadcrumb will update when the name changes.

The variant breadcrumb shows the name matching the active variant in the workspace. If a variant doesn't have a name, it will fall back to the default application language (like a document tree item).

The breadcrumbs are currently implemented for:

• Documents
• Media
• Data Types
• Document Types
• Media Types
• Languages
• Templates
• Partial Views
• Stylesheets
• Scripts

Example of breadcrumb in Data Types:

Known issues:

• We need to implement a breadcrumb for user and member workspaces. They will work differently than the implemented ones because they don't have a menu but a section view.
  *uui-breadcrumb-item should display text instead of a link if a href attribute is not added. I have added a task for this.
• Relation Type workspace complains about the breadcrumb. This workspace will be updated later to not have a tree, so I have left it for now.

Caution

Breaking Changes:

• The UmbTreeRepository interface requires an implementation of a requestTreeItemAncestors method.
• The UmbTreeDataSource interface requires an implementation of a getAncestorsOf method.

[leekelleher]

Tested out (with the corresponding backend API branch), overall it's working as expected.

A few of things I picked up on...

1. Tiny cosmetic issue, the breadcrumb looks like it needs more padding-left.
2. In Languages, the breadcrumb doesn't display the current language name, (for reference, I'm using Kenn's test database).
3. When an entity is inside a folder, (e.g. DocumentType, DataType), the breadcrumb item for the folder has the href set as #. Which when clicked will reload the browser on the root /# (then shows the Content/Welcome dashboard).

I can see in the UUI Library where the # is set. I'm unsure what we'd need to do to workaround this yet.
https://github.com/umbraco/Umbraco.UI/blob/v1.7.1/packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts#L26

Apart from that, it's working well, great work.

[leekelleher]

Re-tested, all working as expected! Super Tak! 🎉

[enkelmedia]

Just adding a little question here as it seems that this might be something that is related to this issue: #1011

Maybe we can make sure that the underlying infrastructure can facilitate for both?

[madsrasmussen]

Hi @enkelmedia

Thanks for mentioning the related issue 👍

• The active tree item feature is implemented and merged. The active state is based on the URL, so the active state is disconnected from the structure functionality. You will experience now that a tree item can be "highlighted" when you start unfolding tree items.

• "Unfolding" the tree will be a new tree feature that we need to implement in the tree element. It should somehow be possible to tell a tree to open at a specific path. When that is in place we can then use this structure functionality to open the tree at the correct position for a specific workspace. I hope that makes sense

[enkelmedia]

Thanks for the clarification @madsrasmussen! 🚀