Make child resources visible by default, add expand/collapse all children toggle, move resources filters to menu

[adamint]

Description

We agreed to make child resources visible by default (ie, catalogdb)

Along with making this change, the toggle state for each child resource is persisted after navigating away from the page. It's separate from other page state, so does not appear in the page URL. See the video for an example of this.

I also moved the filter button to a "settings" menu very similar to the one we have in console logs

and added a collapse/expand all children button

Moving the "add filter" button into a menu does add an extra click compared to before (see a screenshot of the before UI below), but this UI is actually aligned with the rest of the dashboard pages, which only display combo boxes in the toolbar and put everything else in a menu or dialog.

Fixes #7258

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No
• Does the change require an update in our Aspire docs?
  • Yes
    • Is this introducing a breaking change?
      • Yes
        • Link to aspire-docs issue (please use this breaking-change template):
      • No
        • Link to aspire-docs issue (please use this doc-idea template):
  • No

[adamint]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[davidfowl]

failing tests

[adamint]

failing tests

Test failures are unrelated to the changes

[adamint]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[JamesNK]

UI feedback:

I think these should be two seperate buttons: the existing filter button is unchanged, and add a seperate cog button to its right for expand/collapse. This keeps the resources page consistent with the other pages that show a grid of data (structured logs, traces) and have a filter button. Even though there will just be one option in the cog menu, continue to have expand/collapse there for consistency with console logs page. The UI on these pages is going to keep evolving as we add new features - so things will keep moving around - but I think this is the right approach for now.

Is hide/show the right terminology here? It's more expand/collapse. For example, Windows explorer talks about expanding folders. Instead of the eye icons, try out AddSquareMultiple and SubtractSquareMultiple or ArrowExpandAll and ArrowCollapseAll. Have the text be "Expand child resources" and "Collapse child resources". Also, the button should only be visible if the there are child resources. If there aren't any then we might as well hide it.

[adamint]

I think these should be two seperate buttons: the existing filter button is unchanged, and add a seperate cog button to its right for expand/collapse. This keeps the resources page consistent with the other pages that show a grid of data (structured logs, traces) and have a filter button. Even though there will just be one option in the cog menu, continue to have expand/collapse there for consistency with console logs page. The UI on these pages is going to keep evolving as we add new features - so things will keep moving around - but I think this is the right approach for now.

Sure, that sounds good with me. Here's a screenshot of both buttons now:

Is hide/show the right terminology here? It's more expand/collapse. For example, Windows explorer talks about expanding folders. Instead of the eye icons, try out AddSquareMultiple and SubtractSquareMultiple or ArrowExpandAll and ArrowCollapseAll. Have the text be "Expand child resources" and "Collapse child resources". Also, the button should only be visible if the there are child resources. If there aren't any then we might as well hide it.

Yeah, good point. I changed to expand/collapse and hid the button in those cases.

[JamesNK]

I'll pull the branch and try this out tomorrow.

[JamesNK]

I made some changes:

• Made the persisted data just a list and specific to collapsed names. Makes sense since this is updated by itself (e.g. expanding and collapsing resources)
• Persisted data is to session storage. Could change to browser storage in the future, but resource names change with each launch, so it doesn't work.
• Collapse all only adds resource names that are parents
• Removed _initialCollapsedResourceNames. Didn't seem nessessary
• Undid changes to menu button. Didn't seem nessessary

Please test and double check I haven't broken anything.