Use stimulus controller for sidebar treeviews.

assets/controllers/elements/sidebar_tree_controller.js

@@ -0,0 +1,63 @@
+import {Controller} from "@hotwired/stimulus";
+import {default as TreeController} from "./tree_controller";
+
+import "patternfly-bootstrap-treeview/src/css/bootstrap-treeview.css"
+import "patternfly-bootstrap-treeview";
+
+export default class extends TreeController {
+    static targets = [ "tree", 'sourceText' ];
+
+    _storage_key;
+
+    connect() {
+        const default_mode = this.element.dataset.defaultMode;
+
+        this._storage_key = 'tree_' + this.element.id;
+
+        //Check if we have a saved mode
+        const stored_mode = localStorage.getItem(this._storage_key);
+
+        //Use stored mode if possible, otherwise use default
+        if(stored_mode) {
+            try {
+                this.setMode(stored_mode);
+            } catch (e) {
+                console.error(e);
+                //If an error happenes, use the default mode
+                this.setMode(default_mode);
+            }
+        } else {
+            this.setMode(default_mode);
+        }
+    }
+
+    setMode(mode) {
+        //Find the button for this mode
+        const modeButton = this.element.querySelector(`[data-mode="${mode}"]`);
+        if(!modeButton) {
+            throw new Error(`Could not find button for mode ${mode}`);
+        }
+
+        //Get the url and text from the button
+        const url = modeButton.dataset.url;
+        const text = modeButton.dataset.text;
+
+        this.sourceTextTarget.innerText = text;
+
+        this.setURL(url);
+    }
+
+    changeDataSource(event)
+    {
+        const mode = event.params.mode ?? event.target.dataset.mode;
+        const url = event.params.url ?? event.target.dataset.url;
+        const text = event.params.text ?? event.target.dataset.text;
+
+        this.sourceTextTarget.innerText = text;
+
+        this.setURL(url);
+
+        //Save the mode in local storage
+        localStorage.setItem(this._storage_key, mode);
+    }
+}

assets/controllers/elements/tree_controller.js

@@ -6,6 +6,9 @@ import "patternfly-bootstrap-treeview";
 export default class extends Controller {
     static targets = [ "tree" ];
 
+    _url = null;
+    _data = null;
+
     connect() {
         const treeElement = this.treeTarget;
         if (!treeElement) {
@@ -13,9 +16,30 @@ export default class extends Controller {
             return;
         }
 
-        //Fetch data and initialize tree
-        this._getData().then(this._fillTree.bind(this));
+        this._url = this.element.dataset.treeUrl;
+        this._data = this.element.dataset.treeData;
 
+        this.reinitTree();
+    }
+
+    reinitTree()
+    {
+        //Fetch data and initialize tree
+        this._getData()
+            .then(this._fillTree.bind(this))
+            .catch((err) => {
+                console.error("Could not load the tree data: " + err);
+            });
+    }
+
+    setData(data) {
+        this._data = data;
+        this.reinitTree();
+    }
+
+    setURL(url) {
+        this._url = url;
+        this.reinitTree();
     }
 
     _fillTree(data) {
@@ -65,7 +89,7 @@ export default class extends Controller {
     }
 
     searchInput(event) {
-        const data = event.data;
+        const data = event.target.value;
         //Do nothing if no data was passed
 
         const tree = this.treeTarget;
@@ -73,10 +97,19 @@ export default class extends Controller {
         $(tree).treeview('search', [data]);
     }
 
+
     _getData() {
         //Use lambda function to preserve this context
         return new Promise((myResolve, myReject) => {
-            return myResolve(this.element.dataset.treeData);
+            //If a url is defined, fetch the data from the url
+            if (this._url) {
+                return fetch(this._url)
+                    .then((response) => myResolve(response.json()))
+                    .catch((err) => myReject(err));
+            }
+
+            //Otherwise load the data provided via the data attribute
+            return myResolve(this._data);
         });
     }
 }