NEW: Task runner better UI

[mfendeksilverstripe]

Task runner better UI

Simple UI changes which improve usability of the task runner. Lightweight CSS (no build chain or JS required).

Problem

• it takes time to find the dev task you want to run especially if you don't know the exact task name
• links which execute dev tasks are tiny, mis-click error can happen
• current UI is cluttered with too many dev tasks and the space is used inefficiently
• rendering component of the task runner is messy (combines backend and frontend logic)
• overriding frontend display requires subclassing

Current UI

Solution

• move the task groups into separate tabs so the screen is less cluttered
• visually separate the dev tasks
• visually separate the action buttons and make them much more visible
• split the rendering into backend (populate data) and a template (render), this allows the template to be overridden without subclassing

Proposed UI

Related issues

#302

Dependencies

silverstripe/silverstripe-framework#9540

[michalkleiner]

Very nice touch! Often these sparingly used areas of the CMS/admin interface don't get any updates/tweaks, so this is refreshing to see.

I'd suggest looking at it at the framework level though, if possible, where it lives without the queued jobs additions (run now/enqueue). Here it can subsequently alter the actions.

[mfendeksilverstripe]

Will have a look at the core task runner. Thanks for feedback @michalkleiner

[mfendeksilverstripe]

@michalkleiner Moved some of the code to the framework, please review.

[sachajudd]

Review comments for framework can be found here but also apply to this PR: silverstripe/silverstripe-framework#9540 (review)

[mfendeksilverstripe]

@sachajudd Pushed up new changes based on UI feedback, please review. This is how the UI looks like now:

Large screen

Small screen

[sachajudd]

See comments on silverstripe/silverstripe-framework#9540 (comment) which apply to this PR 🙂

[mfendeksilverstripe]

New changes:

• border hover colour fixed
• more space for bottom border

[mfendeksilverstripe]

New changes:

• updates labels in other tabs.

This is now ready for a review.

[sachajudd]

Approved from a UX perspective 🙂

[Cheddam]

Hey Mojmir! This PR, along with the core one, is a great step forward for the dev/tasks UI. I've suggested some fairly minor modifications.

I'm also pondering whether it'd be sensible to reduce the code duplication between the base TaskRunner and this one by splitting some of the functionality out into separate methods / config? For example, the stylesheets could be stored in configuration, and the logic for handling them could be split into a method on the base TaskRunner class. This might be overkill, but it might also serve to reduce the amount of double-handling required in future updates to this UI (for example, I'm keen to introduce proper categorisation of tasks later on, along with a search field.)

Let me know what you think.

[mfendeksilverstripe]

@Cheddam Pushed up changes as requested, please review.

[Cheddam]

Excellent work, thanks for your contribution!

[Cheddam]

Actually, one last minor tweak is required 😅

Since we standardised the way the CSS is included in the framework PR, this PR now needs to bump the minimum framework requirement to ^4.7 (the next minor release). I'll tweak this now.

[Cheddam]

Okay, I've also rebased onto the 4 branch since this is a new feature, and fixed up Travis config. Once the tests go green we're good to merge 👍