NEW: Improved task runner UI. (#9540)

Co-authored-by: Sacha Judd <sjudd@silverstripe.com>

client/styles/task-runner.css

@@ -0,0 +1,58 @@
+/* This file is manually maintained, it is not generated from SCSS sources */
+
+.task {
+  padding-top: 20px;
+}
+
+.task__panel {
+  padding: 0 15px 15px 15px;
+}
+
+@media (min-width:992px) {
+  .task__list {
+    columns: 2;
+    column-gap: 100px;
+  }
+}
+
+.task__item {
+  padding-bottom: 30px;
+}
+
+@media (min-width:992px) {
+  .task__item {
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+.task__title {
+  color: #303b4d;
+  margin: 0 0 8px;
+}
+
+.task__description {
+  color: #43536d;
+  margin-bottom: 12px;
+}
+
+.task__button {
+  border: 1px solid #ced5e1;
+  border-radius: 5px;
+  background-color: #f6f7f8;
+  color: #43536d;
+  display: inline-block;
+  margin-right: 10px;
+  padding: 6px 10px;
+  text-decoration: none;
+  transition: background-color 0.2s;
+}
+
+.task__button:last-child {
+  margin-right: 0;
+}
+
+.task__button:focus,
+.task__button:hover {
+  background-color: #ced5e1;
+}

src/Dev/TaskRunner.php

@@ -2,19 +2,26 @@
 
 namespace SilverStripe\Dev;
 
+use ReflectionClass;
 use SilverStripe\Control\Controller;
 use SilverStripe\Control\Director;
 use SilverStripe\Control\HTTPRequest;
 use SilverStripe\Core\ClassInfo;
+use SilverStripe\Core\Config\Configurable;
 use SilverStripe\Core\Convert;
 use SilverStripe\Core\Injector\Injector;
+use SilverStripe\Core\Manifest\ModuleResourceLoader;
+use SilverStripe\ORM\ArrayList;
 use SilverStripe\Security\Permission;
 use SilverStripe\Security\Security;
-use ReflectionClass;
+use SilverStripe\View\ArrayData;
+use SilverStripe\View\ViewableData;
 
 class TaskRunner extends Controller
 {
 
+    use Configurable;
+
     private static $url_handlers = [
         '' => 'index',
         '$TaskName' => 'runTask'
@@ -25,6 +32,13 @@ class TaskRunner extends Controller
         'runTask',
     ];
 
+    /**
+     * @var array
+     */
+    private static $css = [
+        'silverstripe/framework:client/styles/task-runner.css',
+    ];
+
     protected function init()
     {
         parent::init();
@@ -44,33 +58,42 @@ class TaskRunner extends Controller
 
     public function index()
     {
+        $baseUrl = Director::absoluteBaseURL();
         $tasks = $this->getTasks();
 
-        // Web mode
+        if (Director::is_cli()) {
-        if (!Director::is_cli()) {
-            $renderer = new DebugView();
-            echo $renderer->renderHeader();
-            echo $renderer->renderInfo("SilverStripe Development Tools: Tasks", Director::absoluteBaseURL());
-            $base = Director::absoluteBaseURL();
-
-            echo "<div class=\"options\">";
-            echo "<ul>";
-            foreach ($tasks as $task) {
-                echo "<li><p>";
-                echo "<a href=\"{$base}dev/tasks/" . $task['segment'] . "\">" . $task['title'] . "</a><br />";
-                echo "<span class=\"description\">" . $task['description'] . "</span>";
-                echo "</p></li>\n";
-            }
-            echo "</ul></div>";
-
-            echo $renderer->renderFooter();
             // CLI mode
-        } else {
+            $output = 'SILVERSTRIPE DEVELOPMENT TOOLS: Tasks' . PHP_EOL . '--------------------------' . PHP_EOL . PHP_EOL;
-            echo "SILVERSTRIPE DEVELOPMENT TOOLS: Tasks\n--------------------------\n\n";
+
             foreach ($tasks as $task) {
-                echo " * $task[title]: sake dev/tasks/" . $task['segment'] . "\n";
+                $output .= sprintf(' * %s: sake dev/tasks/%s%s', $task['title'], $task['segment'], PHP_EOL);
             }
+
+            return $output;
         }
+
+        $list = ArrayList::create();
+
+        foreach ($tasks as $task) {
+            $list->push(ArrayData::create([
+                'TaskLink' => $baseUrl . 'dev/tasks/' . $task['segment'],
+                'Title' => $task['title'],
+                'Description' => $task['description'],
+            ]));
+        }
+
+        $renderer = DebugView::create();
+        $header = $renderer->renderHeader();
+        $header = $this->addCssToHeader($header);
+
+        $data = [
+            'Tasks' => $list,
+            'Header' => $header,
+            'Footer' => $renderer->renderFooter(),
+            'Info' => $renderer->renderInfo('SilverStripe Development Tools: Tasks', $baseUrl),
+        ];
+
+        return ViewableData::create()->renderWith(static::class, $data);
     }
 
     /**
@@ -126,10 +149,12 @@ class TaskRunner extends Controller
             }
 
             $singleton = BuildTask::singleton($class);
+            $description = $singleton->getDescription();
+            $description = trim($description);
 
             $desc = (Director::is_cli())
-                ? Convert::html2raw($singleton->getDescription())
+                ? Convert::html2raw($description)
-                : $singleton->getDescription();
+                : $description;
 
             $availableTasks[] = [
                 'class' => $class,
@@ -157,4 +182,29 @@ class TaskRunner extends Controller
 
         return true;
     }
+
+    /**
+     * Inject task runner CSS into the heaader
+
+     * @param string $header
+     * @return string
+     */
+    protected function addCssToHeader($header)
+    {
+        $css = (array) $this->config()->get('css');
+
+        if (!$css) {
+            return $header;
+        }
+
+        foreach ($css as $include) {
+            $path = ModuleResourceLoader::singleton()->resolveURL($include);
+
+            // inject CSS into the heaader
+            $element = sprintf('<link rel="stylesheet" type="text/css" href="%s" />', $path);
+            $header = str_replace('</head>', $element . '</head>', $header);
+        }
+
+        return $header;
+    }
 }

templates/SilverStripe/Dev/TaskRunner.ss

@@ -0,0 +1,24 @@
+$Header.RAW
+$Info.RAW
+
+<div class="task">
+    <div class="task__panel">
+        <% if $Tasks.Count > 0 %>
+            <div class="task__list">
+                <% loop $Tasks %>
+                    <div class="task__item">
+                        <div>
+                            <h3 class="task__title">$Title</h3>
+                            <div class="task__description">$Description</div>
+                        </div>
+                        <div>
+                            <a href="{$TaskLink.ATT}" class="task__button">Run task</a>
+                        </div>
+                    </div>
+                <% end_loop %>
+            </div>
+        <% end_if %>
+    </div>
+</div>
+
+$Footer.RAW