Make "Install system updates" link into a button

[izmeez]

Description of the need

This is a followup to #7130 that fixes the missing link for admins who are not user 1. Now, you can see the link on the "Available updates" report at admin/reports/updates. There is a button for "Check Manually" and a link for "Install system updates". The link does not perform well responsively breaking across lines on narrow widths.

Proposed solution

The "Install system updates" link would look better as a button and it will not break across lines at narrow widths.

Currently link has no class attributes so it is just a matter of adding button button-secondary classes.

Maybe there are other UX implications? PR to follow for discussion.

[indigoxela]

Not sure if the UX this would introduce is ideal. The suggestion is to make the link, which only leads to admin/config/system/updates - the overview table for review - look exactly like the button that immediately fires the batch operation to check for updates.

So, one fires an action, the other leads to a normal page. I belief, they shouldn't look the same.

[olafgrabienski]

The link does not perform well responsively breaking across lines on narrow widths.

If this is the actual problem, making the link into a button is a possible approach, but it should also be possible to have a better responsive behavior with a link.

[yorkshire-pudding]

I will re-link - https://www.digitala11y.com/links-vs-buttons-a-perennial-problem/ but also quote it:

Usability experts offer the following explanation in this regard:

• Use buttons when the user- action causes a change in either back-end or the front-end of the website. For example, submitting a form, opening a pop-up or a modal or a panel on the same page.
• Use links when the user-action doesn’t affect the website at all. In this, the users are just readers or spectators of the site. For example, to navigate to the next page or an external source after viewing the content of the page.

If the problem is wrapping on mobile then that can be easily solved with a bit of CSS:

.update a {
    white-space: nowrap;
}

OR

.update a {
    display: inline-block;
}

That's with the current setup, but you could add a more explicit class (e.g. system-updates-page) to the actual link.

[izmeez]

Yes, there are 2 concerns wrapped in this issue:

1. Prevent the link from breaking across lines.
2. Change appearance of "Install system updates" link to a button.

The comments so far appear to support fixing 1 and do not support 2.

As to how best to fix 1 options have been provided to either add some css or add a new class.

I wonder if there may be other places in Backdrop where a link is used as part of the admin navigation and runs the risk of breaking across lines? This begs the question of finding a class name that is more general that could be applied to this link and any others.

[yorkshire-pudding]

As to how best to fix 1 options have been provided to either add some css or add a new class.

One of the CSS options IS needed. Adding a very specific class is an option, that in my opinion would make it clearer and avoid any inadvertent styling of another element with the same class.