MDL-59368 groups: Add an explicit cancel button

Autocomplete already uses Escape keyboard handler - so we can't use it to cancel an edit-inplace thing.
Make an obvious cancel button instead.

group/classes/output/user_groups_editable.php

@@ -159,6 +159,6 @@ class user_groups_editable extends \core\output\inplace_editable {
 
         $course = get_course($courseid);
         $user = core_user::get_user($userid);
-        return new self($course, $context, $user, $coursegroups, $groupids);
+        return new self($course, $context, $user, $coursegroups, array_values($groupids));
     }
 }

lib/amd/src/inplace_editable.js

@@ -209,7 +209,8 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
                     .attr('for', inputelement.attr('id')),
                 options = args.options,
                 attributes = args.attributes,
-                saveelement = $('<a href="#"></a>');
+                saveelement = $('<a href="#"></a>'),
+                cancelelement = $('<a href="#"></a>');
 
             for (i in options) {
                 inputelement
@@ -228,11 +229,19 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
                 saveelement.append(html); 
                 return;
             }).fail(notification.exception);
+
+            str.get_string('cancel', 'core').then(function(s) {
+                return templates.renderPix('e/cancel', 'core', s);
+            }).then(function(html) {
+                cancelelement.append(html); 
+                return;
+            }).fail(notification.exception);
             
             el.html('')
                 .append(lbl)
                 .append(inputelement)
-                .append(saveelement);
+                .append(saveelement)
+                .append(cancelelement);
 
             inputelement.focus();
             inputelement.select();
@@ -254,6 +263,11 @@ define(['jquery', 'core/ajax', 'core/templates', 'core/notification', 'core/str'
                 var val = JSON.stringify(inputelement.val());
                 turnEditingOff(el);
                 updateValue(el, val);
+                e.preventDefault();
+            });
+            cancelelement.on('click', function(e) {
+                turnEditingOff(el);
+                e.preventDefault();
             });
         };
 

lib/classes/output/icon_system_fontawesome.php

@@ -84,6 +84,7 @@ class icon_system_fontawesome extends icon_system_font {
             'core:e/backward' => 'fa-undo',
             'core:e/bold' => 'fa-bold',
             'core:e/bullet_list' => 'fa-list-ul',
+            'core:e/cancel' => 'fa-times',
             'core:e/cell_props' => 'fa-info',
             'core:e/cite' => 'fa-quote-right',
             'core:e/cleanup_messy_code' => 'fa-eraser',

pix/e/cancel.svg

@@ -0,0 +1,3 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="-0.4 -0.3 12 12" preserveAspectRatio="xMinYMid meet" overflow="visible"><path d="M7.8 5.6L11 2.4c.4-.4.4-1 0-1.4l-.7-.7c-.4-.4-1-.4-1.4 0L5.6 3.5 2.4.3C2-.1 1.4-.1 1 .3L.3 1c-.4.4-.4 1 0 1.4l3.2 3.2L.3 8.9c-.4.4-.4 1 0 1.4l.7.7c.4.4 1 .4 1.4 0l3.2-3.2L8.9 11c.4.4 1 .4 1.4 0l.7-.7c.4-.4.4-1 0-1.4L7.8 5.6z" fill="#999"/></svg>