Improve user experience with roles tree

Author: fredden

app/code/Magento/User/view/adminhtml/web/js/roles-tree.js

@@ -9,10 +9,12 @@
 define([
     'jquery',
     'jquery/ui',
-    'jquery/jstree/jquery.jstree'
+    'jquery/jstree/jquery.jstree',
+    'mage/translate',
 ], function ($) {
     'use strict';
 
+    // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
     $.widget('mage.rolesTree', {
         options: {
             treeInitData: {},
@@ -26,9 +28,7 @@ define([
             this.element.jstree({
                 plugins: ['checkbox'],
                 checkbox: {
-                    // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
                     three_state: false,
-                    // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
                     visible: this.options.checkboxVisible,
                     cascade: 'undetermined'
                 },
@@ -40,13 +40,64 @@ define([
                 }
             });
             this._bind();
+            this._createButtons();
+        },
+
+        _createButtons: function () {
+            const $tree = $.jstree.reference(this.element);
+
+            const collapseAllButton = document.createElement('button');
+            collapseAllButton.innerText = $.mage.__('Collapse all');
+            collapseAllButton.addEventListener('click', function () {
+                $tree.close_all();
+            });
+
+            const expandAllButton = document.createElement('button');
+            expandAllButton.innerText = $.mage.__('Expand all');
+            expandAllButton.addEventListener('click', function () {
+                $tree.open_all();
+            });
+
+            const expandUsedButton = document.createElement('button');
+            expandUsedButton.innerText = $.mage.__('Expand selected');
+            expandUsedButton.addEventListener('click', function () {
+                const hasOpened = [];
+                $tree.get_checked(true).forEach(function (node) {
+                    $tree.open_node(node);
+                    hasOpened.push(node.id);
+                    for (let i = 0; i < node.parents.length - 1; i++) {
+                        const id = node.parents[i];
+                        if (!hasOpened.includes(id)) {
+                            $tree.open_node($tree.get_node(id));
+                            hasOpened.push(id);
+                        }
+                    }
+                });
+            });
+
+            this.buttons = [
+                collapseAllButton,
+                expandAllButton,
+                expandUsedButton,
+            ];
+
+            const parent = this.element[0];
+            const ul = this.element.find('ul')[0];
+            this.buttons.forEach(function (button) {
+                button.type = 'button';
+                parent.insertBefore(button, ul);
+            });
         },
 
         /**
          * @private
          */
         _destroy: function () {
             this.element.jstree('destroy');
+
+            this.buttons.forEach(function (element) {
+                element.parentNode.removeChild(element);
+            });
         },
 
         /**
@@ -64,7 +115,6 @@ define([
          * @private
          */
         _selectChildNodes: function (event, selected) {
-            // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
             selected.instance.open_node(selected.node);
             selected.node.children.each(function (id) {
                 var selector = '[id="' + id + '"]';
@@ -73,7 +123,6 @@ define([
                     selected.instance.get_node($(selector), false)
                 );
             });
-            // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
         },
 
         /**