Commands glow up

[JamesNK]

Description

This PR:

• Renames commands column to actions
• Adds logs and view details to actions menu
• Removes logs and view details columns
• Adds icons to commands
• Adds highlighted commands

Addresses #295

Demo:

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
    • Link to aspire-docs issue:
  • No

Microsoft Reviewers: Open in CodeFlow

[leslierichardson95]

These changes look great! Suggestion: can we consider changing the tooltip text from just "stop" or "play" to "stop resource" and "play resource" just for some added clarity?

[JamesNK]

These changes look great! Suggestion: can we consider changing the tooltip text from just "stop" or "play" to "stop resource" and "play resource" just for some added clarity?

The buttons here are examples. I'll keep this mind for when they're added in the future.

[timheuer]

we're elevating stop/start as the PRIMARY action here, hiding others behind a ... -- are these truly the primary actions we think folks want on a resource? Details has been my primary (viewing config values) with logs being second. Yes because the others aren't there yet, but feels like stop/start/restart aren't going to be primary actions. Reserve the default space for primary and/or have fallaway logic (show more and responsively hide based on priorirty) /cc @leslierichardson95

[DamianEdwards]

Details has been my primary (viewing config values) with logs being second. Yes because the others aren't there yet, but feels like stop/start/restart aren't going to be primary actions.

Personally I'd like to see Stop/Start and Details (aka info) be the primary actions, but given the new UX it seems we could easily fit all three in icon form (Stop/Start, Details, Logs).

[JamesNK]

"View details" doesn't need to be primary. 8.2 introduces clicking the row to show/hide details. That was introduced in 8.2. The main reason that "View details" still exists is for accessibility.

There may be UI space when viewing the resource page on a high-res display, but keep in mind that this column will be displayed in mobile view, and we don't want the ... button to be hidden.

e.g.

Promoting and demoting buttons isn't difficult. I want to stick with the current setup, and we can change based on feedback.

[leslierichardson95]

we're elevating stop/start as the PRIMARY action here, hiding others behind a ... -- are these truly the primary actions we think folks want on a resource? Details has been my primary (viewing config values) with logs being second. Yes because the others aren't there yet, but feels like stop/start/restart aren't going to be primary actions. Reserve the default space for primary and/or have fallaway logic (show more and responsively hide based on priorirty) /cc @leslierichardson95

That's a good point. For now, it might make more sense to stay consistent with the ACA stop/start resource experience where those actions take less priority over logs / details and are part of the "...".

[2 minutes later update]: I didn't see James make a response post before I could comment 😅. I think having the click row to view details is a nice addition and I also don't have an issue with sticking to the new change, but let's watch for feedback in case we encounter discoverability issues on the user's end.

[drewnoakes]

Main question here is around the use of SVG in the protocol. See comments below. I'm facing the same issue in extensibility, for top-level navigation items provided by extensions.

Also, we now use the terms "command" and "actions" interchangeably. Can we consolidate? Command is already used in the .proto, so is hard to change (I think). I like "actions" for column header. Having two terms for the same thing is confusing though.

[davidfowl]

I agree I don’t like usage of svg in the protocol. While more flexible it feels really bad coupling to the html that way. Can we do what we do for status icons or maybe a little more closed down and allowing names from an icon set

[JamesNK]

I can make it a name from the FluentUI icons, but if someone wants a custom icon, e.g. an Azure product icon, then they're stuck.

[davidfowl]

That’s ok for now

[JamesNK]

Also, we now use the terms "command" and "actions" interchangeably. Can we consolidate? Command is already used in the .proto, so is hard to change (I think). I like "actions" for column header. Having two terms for the same thing is confusing though.

It's too late to change the proto. But I don't think it will be confusing. Here is how I think of it:

• Grids have action menus. Right now, it is just the resources page, but I think we'll have an actions column on structured logs and traces eventually.
• The resources action menu also contains actions to execute resource commands.

IMO having a different name to disambiguate them is good even.

[JamesNK]

All feedback applied.

[JamesNK]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).