feat(daffio,design): highlight active tree item in sidebar

[griest024]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/graycoreio/daffodil/blob/develop/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Fixes: #2854

Does this PR introduce a breaking change?

[ ] Yes
[ ] No

Other information

The way the options must be set is unfortunate. There is no way to set the options from the DaffTreeItemDirective because of angular/angular#50700 (comment)

[xelaint]

So the tree technically doesn't handle the "active" state unless ROUTER_LINK_ACTIVE_CONFIG is set in the implementation?

Is there a different way to do this?

[griest024]

So the tree technically doesn't handle the "active" state unless ROUTER_LINK_ACTIVE_CONFIG is set in the implementation?

Is there a different way to do this?

no it does but the "overview" link will be active when a child guide is selected so you'll see 2 active items at once

[xelaint]

Also, getting this error in console in design-land:

template.html:1 ERROR Error: NG0311: Directive _RouterLinkActive does not have an input with a public name of daffTreeItem.
    at validateMappings (

[griest024]

Also, getting this error in console in design-land:

template.html:1 ERROR Error: NG0311: Directive _RouterLinkActive does not have an input with a public name of daffTreeItem.
    at validateMappings (

I cannot repro that

[xelaint]

So the tree technically doesn't handle the "active" state unless ROUTER_LINK_ACTIVE_CONFIG is set in the implementation?
Is there a different way to do this?

no it does but the "overview" link will be active when a child guide is selected so you'll see 2 active items at once

Why are the links below overview treated as child guides of overview? Shouldn't they be sibling to overview?

[griest024]

@xelaint I'll use cart as an example. the cart driver guide is at /docs/packages/cart/drivers. the cart "overview" guide has the link /docs/packages/cart. The angular router considers /docs/packages/cart/drivers to be a "child" of /docs/packages/cart and therefore considers /docs/packages/cart to be active on the route /docs/packages/cart/drivers unless exact: true is set.

[damienwebdev]

lgtm

[xelaint]

I'd expect a parent tree item to be open if there is an active/selected tree item within it. Should this be done in this PR or create a separate issue for it?

[griest024]

I'd expect a parent tree item to be open if there is an active/selected tree item within it. Should this be done in this PR or create a separate issue for it?

separate PR