Move tenant buttons into dropdown menu

[hishamco]

Address a part of #12006

DropDown.Menu.mp4

[hishamco]

Seems there's some changes need to be done in the functional tests

[Skrypt]

You will need to add a click trigger on the dropdown menu before the click on the setup button.

[hishamco]

I might look to this test later, but again we need a way to make these tests pass or fail for both OS. What I'm see there's some inconsistency it passes in Windows and fails in Linux

[Skrypt]

The functional tests are not executed under Windows that's why.

[ns8482e]

aria-labelledby Ref doesn’t have any text

[hishamco]

I didn't understand

[ns8482e]

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby

Here it refers to button but button doesn’t have accessible text

[jtkech]

Not sure it's a good thing, as it is the buttons are not only action buttons but also states info, so we can see clearly the tenant states and what we can do.

[hishamco]

The states are clearly shown as a badge. The current UI change:

• Makes a lot of room in each row
• Makes the UI clean & clear
• The actions should react based on some state
• No more colored buttons which are sometime confuses

FYI such menu actions already shown in GitHub & AzureDevOps for better UX. May be the issue we are looking from developer point of you ;)

[Skrypt]

Ok, we need to make sure we are consistent here. While I don't dislike entirely the UI change; here we need to take into consideration that the Content Items list uses an "Action" button for these. This is why I recommended using the same UI concept.
I'm sure DevOps uses also single item buttons in some places.

[hishamco]

[ns8482e]

Personally I don’t like devops UI, I like GitHub’s UI better

[hishamco]

It quite similar except the action button uses dropdown menu similar to what we have in filters

[Skrypt]

The inline action buttons are simply icons here on Github.

[MikeAlhayek]

@hishamco thanks for putting together this PR. Can you please fix the conflict?

I personally do not like hiding all the buttons for all actions. Very common functions like "Edit" should be visible all the time. I don't want to have to make 2 click to perform a common functions. The idea here is improve the UI not complicating it like devops :). I am also not a big fan of DevOps UI as @ns8482e mentioned.

I think in this UI, we should show "Edit" and "View" buttons, then move the "Reload", "Enable", "Disable", "Features", and "Remove" button should be in the "Actions" button.

[hishamco]

@hishamco thanks for putting together this PR. Can you please fix the conflict?

Sure

personally do not like hiding all the buttons for all actions. Very common functions like "Edit" should be visible all the time

May be but the issue is everyone of us has it's own common functionality ;)

[hishamco]

Let me check this with a UI expert and see what I can come up with

[github-actions]

This pull request has merge conflicts. Please resolve those before requesting a review.

[Piedone]

Putting the buttons under a nondescript three-dot menu is a hard no from me.

[MikeAlhayek]

... is a hard no for me to. I am okay with "Actions" drop down button if that is an option

[hishamco]

Putting the buttons under a nondescript three-dot menu is a hard no from me.

It's much better for UI clarity

[Piedone]

How does hiding buttons clarify intent?

[hishamco]

From UI/UX perspective when there are many buttons like what we have, it would be nice to introduce an action menu instead

[Piedone]

This is how the current UI looks like if all the possible buttons are displayed, in a common full HD resolution:

Ultimately, design is subjective until we do large sample size research for this with focus groups (which would probably be excessive for this) but this doesn't seem to be too many buttons for me. Nor there is any lack of screen real estate that we'd use better. Same if you have 10 tenants on a page.

Did you encounter somebody complaining about this UI?

[hishamco]

Did you encounter somebody complaining about this UI?

While I saw many web framework applications, & CMSs I never see something like this :) Also the coloring is another story lol

[Piedone]

Do you want to bring this up at the meeting or something so we can get a closure? Here we have 2-3 against votes, and other remarks that necessitate changes even if the basic direction is agreed on.

[hishamco]

Probably yes, also I might demo the Culture Picker in localization part #13354

[MikeAlhayek]

@hishamco @Piedone I think we should have 3 buttons are as we do in contents module. The buttons should be View, Edit and Actions (drop down menu). But I do not like the ... button.

This way we can simplify all the buttons we have today and keep them consistent with other pages.

[Piedone]

I'm OK with that.

[hishamco]

But I do not like the ... button

Sure everyone will like and dislike some of the UI, but I was using things from UI/UX perspective

[github-actions]

It seems that this pull request didn't really move for quite a while. Is this something you'd like to revisit any time soon or should we close? Please comment if you'd like to pick it up and remove the "stale" label.

[hishamco]

I will close this while there's not much interest in UI improvements, so I will move this to Orchard Core Contrib (OCC), while I'm already some improvements to the admin UI