From d234b288128b9745a480ff5e2a47940a42c3c590 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 21:53:23 +0300
Subject: [PATCH 01/17] Remove legacy parameter matching condition from form
 elements

---
 client/src/components/Form/FormElement.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 7a5841e7338b..208664bdb616 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -18,7 +18,6 @@ import FormHidden from "./Elements/FormHidden.vue";
 import FormInput from "./Elements/FormInput.vue";
 import FormNumber from "./Elements/FormNumber.vue";
 import FormOptionalText from "./Elements/FormOptionalText.vue";
-import FormParameter from "./Elements/FormParameter.vue";
 import FormRulesEdit from "./Elements/FormRulesEdit.vue";
 import FormSelection from "./Elements/FormSelection.vue";
 import FormTags from "./Elements/FormTags.vue";
@@ -300,13 +299,6 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
             <FormDirectory v-else-if="props.type === 'directory_uri'" v-model="currentValue" />
             <FormUpload v-else-if="props.type === 'upload'" v-model="currentValue" />
             <FormRulesEdit v-else-if="props.type == 'rules'" v-model="currentValue" :target="attrs.target" />
-            <FormParameter
-                v-else-if="['data_dialog', 'ftpfile', 'library_data'].includes(props.type)"
-                :id="props.id"
-                v-model="currentValue"
-                :data-label="props.title"
-                :type="props.type"
-                :attributes="attrs" />
             <FormTags
                 v-else-if="props.type === 'tags'"
                 v-model="currentValue"

From c8c1f51f8132db1e44a4d7c39005f0501b00d8a1 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:11:44 +0300
Subject: [PATCH 02/17] Remove legacy parameters factory

---
 .../components/Form/Elements/parameters.js    | 52 -------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/parameters.js

diff --git a/client/src/components/Form/Elements/parameters.js b/client/src/components/Form/Elements/parameters.js
deleted file mode 100644
index 01729e887c0a..000000000000
--- a/client/src/components/Form/Elements/parameters.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
-    This class creates input elements. New input parameter types should be added to the types dictionary.
-*/
-import Backbone from "backbone";
-import SelectFtp from "mvc/ui/ui-select-ftp";
-import SelectLibrary from "mvc/ui/ui-select-library";
-
-// create form view
-export default Backbone.View.extend({
-    /** Available parameter types */
-    types: {
-        library_data: "_fieldLibrary",
-        ftpfile: "_fieldFtp",
-    },
-
-    remove: function () {
-        this.field.remove();
-        Backbone.View.prototype.remove.call(this);
-    },
-
-    /** Returns an input field for a given field type */
-    create: function (input_def) {
-        var fieldClass = this.types[input_def.type];
-        this.field = typeof this[fieldClass] === "function" ? this[fieldClass].call(this, input_def) : null;
-        if (input_def.value === undefined) {
-            input_def.value = null;
-        }
-        this.field.value(input_def.value);
-        this.setElement(input_def.el || "<div/>");
-        this.$el.append(this.field.$el);
-    },
-
-    /** Library dataset field */
-    _fieldLibrary: function (input_def) {
-        return new SelectLibrary.View({
-            id: input_def.id,
-            optional: input_def.optional,
-            multiple: input_def.multiple,
-            onchange: input_def.onchange,
-        });
-    },
-
-    /** FTP file field */
-    _fieldFtp: function (input_def) {
-        return new SelectFtp.View({
-            id: input_def.id,
-            optional: input_def.optional,
-            multiple: input_def.multiple,
-            onchange: input_def.onchange,
-        });
-    },
-});

From bf18eb096ad406fc57c18ec01d25cf7ae4adf336 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:12:50 +0300
Subject: [PATCH 03/17] Remove legacy ftpfile and library_data wrappers

---
 client/src/mvc/ui/ui-list.js           | 148 -------------------------
 client/src/mvc/ui/ui-select-ftp.js     |  52 ---------
 client/src/mvc/ui/ui-select-library.js | 126 ---------------------
 3 files changed, 326 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-list.js
 delete mode 100644 client/src/mvc/ui/ui-select-ftp.js
 delete mode 100644 client/src/mvc/ui/ui-select-library.js

diff --git a/client/src/mvc/ui/ui-list.js b/client/src/mvc/ui/ui-list.js
deleted file mode 100644
index e3a84db86775..000000000000
--- a/client/src/mvc/ui/ui-list.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import Backbone from "backbone";
-import $ from "jquery";
-import Ui from "mvc/ui/ui-misc";
-import Utils from "utils/utils";
-
-var View = Backbone.View.extend({
-    initialize: function (options) {
-        this.options = options;
-        this.name = options.name || "element";
-        this.multiple = options.multiple || false;
-
-        // create message handler
-        this.message = new Ui.Message({ cls: "col mb-0" });
-
-        // create selections area
-        this.selections = $("<div/>");
-
-        // create select field containing the options which can be inserted into the list
-        this.select = new Ui.Select.View({ optional: options.optional });
-
-        // create insert new list element button
-        this.$button = $(`<button class="fa fa-sign-in"/>`);
-        this.$button.on("click", () => {
-            this.add({
-                id: this.select.value(),
-                name: this.select.text(),
-            });
-        });
-
-        // build main element
-        this.setElement(this._template(options));
-        this.$(".ui-list-message").append(this.message.$el);
-        this.$(".ui-list-selections").append(this.selections);
-        this.$(".ui-list-button").append(this.$button);
-        this.$(".ui-list-select").append(this.select.$el);
-    },
-
-    /** Return/Set currently selected list elements */
-    value: function (val) {
-        // set new value
-        if (val !== undefined) {
-            this.selections.empty();
-            if (Array.isArray(val)) {
-                for (var i in val) {
-                    var v = val[i];
-                    var v_id = null;
-                    var v_name = null;
-                    if ($.type(v) != "string") {
-                        v_id = v.id;
-                        v_name = v.name;
-                    } else {
-                        v_id = v_name = v;
-                    }
-                    if (v_id != null) {
-                        this.add({
-                            id: v_id,
-                            name: v_name,
-                        });
-                    }
-                }
-            }
-            this._refresh();
-        }
-        // get current value
-        var lst = [];
-        this.$(".ui-list-id").each(function () {
-            lst.push({
-                id: $(this).prop("id"),
-                name: $(this).find(".ui-list-name").html(),
-            });
-        });
-        if (lst.length == 0) {
-            return null;
-        }
-        return lst;
-    },
-
-    /** Add row */
-    add: function (options) {
-        var self = this;
-        if (this.$(`[id="${options.id}"]`).length === 0) {
-            if (!Utils.isEmpty(options.id)) {
-                var $el = $(
-                    this._templateRow({
-                        id: options.id,
-                        name: options.name,
-                    })
-                );
-                $el.find("button").on("click", () => {
-                    $el.remove();
-                    self._refresh();
-                });
-                this.selections.append($el);
-                this._refresh();
-            } else {
-                this.message.update({
-                    message: `Please select a valid ${this.name}.`,
-                    status: "danger",
-                });
-            }
-        } else {
-            this.message.update({
-                message: `This ${this.name} is already in the list.`,
-            });
-        }
-    },
-
-    /** Update available options */
-    update: function (input_def) {
-        this.select.update(input_def);
-    },
-
-    /** Refresh view */
-    _refresh: function () {
-        if (this.$(".ui-list-id").length > 0) {
-            !this.multiple && this.$button.attr("disabled", true);
-        } else {
-            this.$button.attr("disabled", false);
-        }
-        this.options.onchange && this.options.onchange();
-    },
-
-    /** Main Template */
-    _template: function (options) {
-        return `<div class="ui-list container">
-                    <div class="row">
-                        <div class="col-1 pl-0 mb-2">
-                            <div class="ui-list-button"/>
-                        </div>
-                        <div class="ui-list-select col pr-0"/>
-                    </div>
-                    <div class="ui-list-message mt-2 row"/>
-                    <div class="ui-list-selections mt-2"/>
-                </div>`;
-    },
-
-    /** Row Template */
-    _templateRow: function (options) {
-        return `<div id="${options.id}" class="ui-list-id row mt-2">
-                    <button class="ui-list-delete fa fa-trash mr-3"/>
-                    <div class="ui-list-name">${options.name}</span>
-                </div>`;
-    },
-});
-
-export default {
-    View: View,
-};
diff --git a/client/src/mvc/ui/ui-select-ftp.js b/client/src/mvc/ui/ui-select-ftp.js
deleted file mode 100644
index 961e13571e57..000000000000
--- a/client/src/mvc/ui/ui-select-ftp.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import Backbone from "backbone";
-import List from "mvc/ui/ui-list";
-import { getAppRoot } from "onload/loadConfig";
-import Utils from "utils/utils";
-
-/**
- * FTP file selector
- */
-var View = Backbone.View.extend({
-    // initialize
-    initialize: function (options) {
-        // link this
-        var self = this;
-
-        // create ui-list view to keep track of selected ftp files
-        this.ftpfile_list = new List.View({
-            name: "file",
-            optional: options.optional,
-            multiple: options.multiple,
-            onchange: function () {
-                options.onchange && options.onchange(self.value());
-            },
-        });
-
-        // create elements
-        this.setElement(this.ftpfile_list.$el);
-
-        // initial fetch of ftps
-        Utils.get({
-            url: `${getAppRoot()}api/remote_files`,
-            success: function (response) {
-                var data = [];
-                for (var i in response) {
-                    data.push({
-                        value: response[i]["path"],
-                        label: response[i]["path"],
-                    });
-                }
-                self.ftpfile_list.update(data);
-            },
-        });
-    },
-
-    /** Return/Set currently selected ftp datasets */
-    value: function (val) {
-        return this.ftpfile_list.value(val);
-    },
-});
-
-export default {
-    View: View,
-};
diff --git a/client/src/mvc/ui/ui-select-library.js b/client/src/mvc/ui/ui-select-library.js
deleted file mode 100644
index dff89d336255..000000000000
--- a/client/src/mvc/ui/ui-select-library.js
+++ /dev/null
@@ -1,126 +0,0 @@
-// dependencies
-import Backbone from "backbone";
-import List from "mvc/ui/ui-list";
-import Ui from "mvc/ui/ui-misc";
-import { getAppRoot } from "onload/loadConfig";
-
-// collection of libraries
-var Libraries = Backbone.Collection.extend({
-    url: `${getAppRoot()}api/libraries?deleted=false`,
-});
-
-// collection of dataset
-var LibraryDatasets = Backbone.Collection.extend({
-    initialize: function () {
-        var self = this;
-        this.config = new Backbone.Model({ library_id: null });
-        this.config.on("change", () => {
-            self.fetch({ reset: true });
-        });
-    },
-    url: function () {
-        return `${getAppRoot()}api/libraries/${this.config.get("library_id")}/contents`;
-    },
-});
-
-// hda/hdca content selector ui element
-var View = Backbone.View.extend({
-    // initialize
-    initialize: function (options) {
-        // link this
-        var self = this;
-
-        // collections
-        this.libraries = new Libraries();
-        this.datasets = new LibraryDatasets();
-
-        // link app and options
-        this.options = options;
-
-        // select field for the library
-        // TODO: Remove this once the library API supports searching for library datasets
-        this.library_select = new Ui.Select.View({
-            onchange: function (value) {
-                self.datasets.config.set("library_id", value);
-            },
-        });
-
-        // create ui-list view to keep track of selected data libraries
-        this.dataset_list = new List.View({
-            name: "dataset",
-            optional: options.optional,
-            multiple: options.multiple,
-            onchange: function () {
-                self.trigger("change");
-            },
-        });
-
-        // add reset handler for fetched libraries
-        this.libraries.on("reset", () => {
-            var data = [];
-            self.libraries.each((model) => {
-                data.push({
-                    value: model.id,
-                    label: model.get("name"),
-                });
-            });
-            self.library_select.update({ data: data });
-        });
-
-        // add reset handler for fetched library datasets
-        this.datasets.on("reset", () => {
-            var data = [];
-            var library_current = self.library_select.text();
-            if (library_current !== null) {
-                self.datasets.each((model) => {
-                    if (model.get("type") === "file") {
-                        data.push({
-                            value: model.id,
-                            label: model.get("name"),
-                        });
-                    }
-                });
-            }
-            self.dataset_list.update({ data: data });
-        });
-
-        // add change event. fires on trigger
-        this.on("change", () => {
-            if (options.onchange) {
-                options.onchange(self.value());
-            }
-        });
-
-        // create elements
-        this.setElement(this._template());
-        this.$(".library-select").append(this.library_select.$el);
-        this.$el.append(this.dataset_list.$el);
-
-        // initial fetch of libraries
-        this.libraries.fetch({
-            reset: true,
-            success: function () {
-                self.library_select.trigger("change");
-                if (self.options.value !== undefined) {
-                    self.value(self.options.value);
-                }
-            },
-        });
-    },
-
-    /** Return/Set currently selected library datasets */
-    value: function (val) {
-        return this.dataset_list.value(val);
-    },
-
-    /** Template */
-    _template: function () {
-        return `<div class="ui-select-library">
-                    <div class="library-select mb-2"/>
-                </div>`;
-    },
-});
-
-export default {
-    View: View,
-};

From 27bb1017c44594ba20366cd127e53d2e2adb3103 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:13:51 +0300
Subject: [PATCH 04/17] Remove vue interface to backbone parameter factory

---
 .../Form/Elements/FormParameter.vue           | 63 -------------------
 1 file changed, 63 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormParameter.vue

diff --git a/client/src/components/Form/Elements/FormParameter.vue b/client/src/components/Form/Elements/FormParameter.vue
deleted file mode 100644
index 151e47347651..000000000000
--- a/client/src/components/Form/Elements/FormParameter.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-    <div ref="parameter" />
-</template>
-<script>
-import ParameterFactory from "./parameters";
-
-export default {
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        type: {
-            type: String,
-            required: true,
-        },
-        value: {
-            default: null,
-        },
-        attributes: {
-            type: Object,
-            required: true,
-        },
-    },
-    watch: {
-        value() {
-            if (this.parameter && this.parameter.field) {
-                const currentValue = this.parameter.field.value();
-                if (JSON.stringify(this.value) !== JSON.stringify(currentValue)) {
-                    this.parameter.field.value(this.value);
-                }
-            }
-        },
-        attributes() {
-            if (this.parameter && this.parameter.field && this.parameter.field.update) {
-                this.parameter.field.update(this.attributes);
-                this.$emit("input", this.parameter.field.value());
-            }
-        },
-    },
-    mounted() {
-        this.$nextTick(() => {
-            this.parameter = new ParameterFactory();
-            this.parameter.create({
-                ...this.attributes,
-                id: this.id,
-                type: this.type,
-                value: this.value,
-                el: this.$refs["parameter"],
-                onchange: () => {
-                    if (this.parameter && this.parameter.field) {
-                        this.$emit("input", this.parameter.field.value());
-                    }
-                },
-            });
-            this.$emit("input", this.parameter.field.value());
-        });
-    },
-    beforeDestroy() {
-        this.parameter.remove();
-    },
-};
-</script>

From f4afed60cc285109c1b64ec9c86c67de9861ce69 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:17:22 +0300
Subject: [PATCH 05/17] Remove legacy select default wrapper

---
 client/src/mvc/ui/ui-misc.js           |   3 -
 client/src/mvc/ui/ui-select-default.js | 421 -------------------------
 2 files changed, 424 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-select-default.js

diff --git a/client/src/mvc/ui/ui-misc.js b/client/src/mvc/ui/ui-misc.js
index 64da9a93ceca..acd100aaa4e0 100644
--- a/client/src/mvc/ui/ui-misc.js
+++ b/client/src/mvc/ui/ui-misc.js
@@ -6,7 +6,6 @@ import $ from "jquery";
 import Buttons from "mvc/ui/ui-buttons";
 import Modal from "mvc/ui/ui-modal";
 import Options from "mvc/ui/ui-options";
-import Select from "mvc/ui/ui-select-default";
 import _ from "underscore";
 
 /** Displays messages used e.g. in the tool form */
@@ -135,7 +134,6 @@ export const ButtonLink = Buttons.ButtonLink;
 export const Checkbox = Options.Checkbox;
 export const RadioButton = Options.RadioButton;
 export const Radio = Options.Radio;
-export { Select };
 
 export default {
     Button: Buttons.Button,
@@ -149,5 +147,4 @@ export default {
     RadioButton: Options.RadioButton,
     Checkbox: Options.Checkbox,
     Radio: Options.Radio,
-    Select: Select,
 };
diff --git a/client/src/mvc/ui/ui-select-default.js b/client/src/mvc/ui/ui-select-default.js
deleted file mode 100644
index ca72b3dfc95c..000000000000
--- a/client/src/mvc/ui/ui-select-default.js
+++ /dev/null
@@ -1,421 +0,0 @@
-/**
- *  This class creates/wraps a default html select field as backbone class.
- */
-import Backbone from "backbone";
-import $ from "jquery";
-import Buttons from "mvc/ui/ui-buttons";
-import _ from "underscore";
-import { keyedColorScheme } from "utils/color";
-import Utils from "utils/utils";
-
-var View = Backbone.View.extend({
-    initialize: function (options) {
-        this.data = [];
-        this.data2 = [];
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                id: Utils.uid(),
-                cls: "ui-select",
-                error_text: "No options available",
-                empty_text: "Nothing selected",
-                visible: true,
-                wait: false,
-                multiple: false,
-                searchable: true,
-                optional: false,
-                disabled: false,
-                readonly: false,
-                onchange: function () {},
-                value: null,
-                individual: false,
-                pagesize: 20,
-            }).set(options);
-        this.on("change", () => {
-            if (this.model.get("onchange")) {
-                this.model.get("onchange")(this.value());
-            }
-        });
-        this.listenTo(this.model, "change:data", this._changeData, this);
-        this.listenTo(this.model, "change:disabled", this._changeDisabled, this);
-        this.listenTo(this.model, "change:wait", this._changeWait, this);
-        this.listenTo(this.model, "change:visible", this._changeVisible, this);
-        this.listenTo(this.model, "change:value", this._changeValue, this);
-        this.listenTo(this.model, "change:multiple change:searchable change:cls change:id", this.render, this);
-        this.render();
-    },
-
-    remove: function () {
-        this.$select.select2("destroy");
-        Backbone.View.prototype.remove.call(this);
-    },
-
-    render: function () {
-        if (this.model.get("searchable")) {
-            this._renderSearchable();
-        } else {
-            this._renderClassic();
-        }
-        this.$el.addClass(this.model.get("cls")).attr("id", this.model.get("id"));
-        this.$select
-            .empty()
-            .addClass("select")
-            .attr("id", `${this.model.get("id")}_select`)
-            .prop("multiple", this.model.get("multiple"))
-            .on("change", () => {
-                this.value(this._getValue());
-                this.trigger("change");
-            });
-        this._changeData();
-        this._changeWait();
-        this._changeVisible();
-        this._changeDisabled();
-    },
-
-    /** Renders the classic selection field */
-    _renderClassic: function () {
-        this.$el
-            .addClass(this.model.get("multiple") ? "ui-select-multiple" : "ui-select")
-            .append((this.$select = $("<select/>")))
-            .append((this.$dropdown = $("<div/>")))
-            .append((this.$resize = $("<div/>").append((this.$resize_icon = $("<i/>")))));
-        if (this.model.get("multiple")) {
-            this.$dropdown.hide();
-            this.$resize_icon.addClass("fa fa-angle-double-right fa-rotate-45").show();
-            this.$resize
-                .removeClass()
-                .addClass("icon-resize")
-                .show()
-                .off("mousedown")
-                .on("mousedown", (event) => {
-                    var currentY = event.pageY;
-                    var currentHeight = this.$select.height();
-                    this.minHeight = this.minHeight || currentHeight;
-                    $("#dd-helper")
-                        .show()
-                        .on("mousemove", (event) => {
-                            this.$select.height(Math.max(currentHeight + (event.pageY - currentY), this.minHeight));
-                        })
-                        .on("mouseup mouseleave", () => {
-                            $("#dd-helper").hide().off();
-                        });
-                });
-        } else {
-            this.$dropdown.show();
-            this.$resize.hide();
-            this.$resize_icon.hide();
-        }
-    },
-
-    /** Renders the default select2 field */
-    _renderSearchable: function () {
-        this.$el.append((this.$select = $("<div/>"))).append((this.$dropdown = $("<div/>")));
-        this.$dropdown.hide();
-        if (!this.model.get("multiple")) {
-            this.$dropdown.show().on("click", () => {
-                if (this.$select.select2) {
-                    this.$select.select2("open");
-                }
-            });
-        }
-        this.all_button = null;
-        if (this.model.get("multiple") && !this.model.get("individual") && !this.model.get("readonly")) {
-            this.all_button = new Buttons.ButtonCheck({
-                onclick: () => {
-                    var new_value = [];
-                    if (this.all_button.value() !== 0) {
-                        _.each(this.model.get("data"), (option) => {
-                            new_value.push(option.value);
-                        });
-                    }
-                    this.value(new_value);
-                    this.trigger("change");
-                },
-            });
-            this.$el.prepend(this.all_button.$el);
-        }
-    },
-
-    /** Matches a search term with a given text */
-    _match: function (term, text) {
-        return !term || term === "" || String(text).toUpperCase().indexOf(term.toUpperCase()) >= 0;
-    },
-
-    /** Updates the selection options */
-    _changeData: function () {
-        this.data = [];
-        if (!this.model.get("multiple") && this.model.get("optional")) {
-            this.data.push({
-                value: "__null__",
-                label: this.model.get("empty_text"),
-            });
-        }
-        _.each(this.model.get("data"), (option) => {
-            this.data.push(option);
-        });
-        if (this.length() === 0) {
-            this.data.push({
-                value: "__null__",
-                label: this.model.get("error_text"),
-            });
-        }
-        if (this.model.get("searchable")) {
-            this.data2 = [];
-            this.data2index = {};
-            _.each(this.data, (option, index) => {
-                const d = {
-                    order: index,
-                    id: option.value,
-                    text: option.label,
-                    tags: option.tags,
-                };
-                this.data2.push(d);
-                this.data2index[d.id] = d;
-            });
-            if (this.$select.data("select2")) {
-                this.$select.select2("destroy");
-            }
-            this.matched_tags = {};
-            this.$select.select2({
-                data: this.data2,
-                closeOnSelect: !this.model.get("multiple"),
-                multiple: this.model.get("multiple"),
-                query: (q) => {
-                    this.matched_tags = {};
-                    var pagesize = this.model.get("pagesize");
-                    var results = _.filter(this.data2, (e) => {
-                        var found = false;
-                        _.each(e.tags, (tag) => {
-                            if (this._match(q.term, tag)) {
-                                found = this.matched_tags[tag] = true;
-                            }
-                        });
-                        return found || this._match(q.term, e.text);
-                    });
-                    q.callback({
-                        results: results.slice((q.page - 1) * pagesize, q.page * pagesize),
-                        more: results.length >= q.page * pagesize,
-                    });
-                },
-                formatResult: (result) => {
-                    let extraTagWarning = "";
-                    const filteredTags = _.filter(result.tags, (t) =>
-                        Object.prototype.hasOwnProperty.call(this.matched_tags, t)
-                    );
-                    if (filteredTags.length > 5) {
-                        extraTagWarning = `&nbsp;<div class="label label-warning">${
-                            filteredTags.length - 5
-                        } more tags</div>`;
-                    }
-                    return `
-                    ${_.escape(result.text)}
-                    <div>
-                        ${filteredTags.slice(0, 5).reduce((memo, tag) => {
-                            const tagColors = keyedColorScheme(tag);
-                            const isNametag = tag.indexOf("name:") === 0;
-                            const tagDisplayText = isNametag ? `#${tag.slice(5)}` : tag;
-                            const styleBlock = isNametag
-                                ? `style="background-color: ${tagColors.primary}; color: black; border: 1px solid ${tagColors.darker}"`
-                                : "";
-                            return `${memo}&nbsp;<div ${styleBlock} class="badge badge-primary badge-tags">${_.escape(
-                                tagDisplayText
-                            )}</div>`;
-                        }, "")}
-                        ${extraTagWarning}
-                   </div>`;
-                },
-            });
-            this.$(".select2-container .select2-search input").off("blur");
-        } else {
-            this.$select.find("option").remove();
-            _.each(this.data, (option) => {
-                this.$select.append($("<option/>").attr("value", option.value).html(_.escape(option.label)));
-            });
-        }
-        this.model.set("disabled", this.model.get("readonly") || this.length() === 0);
-        this._changeValue();
-    },
-
-    /** Handles field enabling/disabling, usually used when no options are available */
-    _changeDisabled: function () {
-        if (this.model.get("searchable")) {
-            this.$select.select2(this.model.get("disabled") ? "disable" : "enable");
-        } else {
-            this.$select.prop("disabled", this.model.get("disabled"));
-        }
-    },
-
-    /** Searchable fields may display a spinner e.g. while waiting for a server response */
-    _changeWait: function () {
-        this.$dropdown
-            .removeClass()
-            .addClass("icon-dropdown fa")
-            .addClass(this.model.get("wait") ? "fa-spinner fa-spin" : "fa-caret-down");
-    },
-
-    /** Handles field visibility */
-    _changeVisible: function () {
-        this.$el[this.model.get("visible") ? "show" : "hide"]();
-        this.$select[this.model.get("visible") ? "show" : "hide"]();
-    },
-
-    /** Synchronizes the model value with the actually selected field value */
-    _changeValue: function () {
-        this._setValue(this.model.get("value"));
-        if (this.model.get("multiple")) {
-            if (this.all_button) {
-                var value = this._getValue();
-                this.all_button.value(Array.isArray(value) ? value.length : 0, this.length());
-            }
-        } else if (this._getValue() === null && !this.model.get("optional")) {
-            this._setValue(this.first());
-        }
-    },
-
-    /** Return/Set current selection */
-    value: function (new_value) {
-        if (new_value !== undefined) {
-            this.model.set("value", new_value);
-        }
-        return this._getValue();
-    },
-
-    /** Return the first select option */
-    first: function () {
-        return this.data.length > 0 ? this.data[0].value : null;
-    },
-
-    /** Check if a value is an existing option */
-    exists: function (value) {
-        return _.findWhere(this.data, { value: value });
-    },
-
-    /** Return the label/text of the current selection */
-    text: function () {
-        var v = this._getValue();
-        var d = this.exists(Array.isArray(v) ? v[0] : v);
-        return d ? d.label : "";
-    },
-
-    /** Show the select field */
-    show: function () {
-        this.model.set("visible", true);
-    },
-
-    /** Hide the select field */
-    hide: function () {
-        this.model.set("visible", false);
-    },
-
-    /** Show a spinner indicating that the select options are currently loaded */
-    wait: function () {
-        this.model.set("wait", true);
-    },
-
-    /** Hide spinner indicating that the request has been completed */
-    unwait: function () {
-        this.model.set("wait", false);
-    },
-
-    /** Returns true if the field is disabled */
-    disabled: function () {
-        return this.model.get("disabled");
-    },
-
-    /** Enable the select field */
-    enable: function () {
-        this.model.set("disabled", false);
-    },
-
-    /** Disable the select field */
-    disable: function () {
-        this.model.set("disabled", true);
-    },
-
-    /** Update all available options at once */
-    add: function (options, sorter) {
-        _.each(this.model.get("data"), (v) => {
-            if (v.keep && !_.findWhere(options, { value: v.value })) {
-                options.push(v);
-            }
-        });
-        if (sorter && options) {
-            options.sort(sorter);
-        }
-        this.model.set("data", options);
-    },
-
-    /** Update available options */
-    update: function (input_def) {
-        this.model.set("data", input_def.data);
-    },
-
-    /** Set the custom onchange callback function */
-    setOnChange: function (callback) {
-        this.model.set("onchange", callback);
-    },
-
-    /** Number of available options */
-    length: function () {
-        return Array.isArray(this.model.get("data")) ? this.model.get("data").length : 0;
-    },
-
-    /** Set value to dom */
-    _setValue: function (new_value) {
-        if (new_value === null || new_value === undefined) {
-            new_value = "__null__";
-        }
-        if (this.model.get("multiple")) {
-            new_value = Array.isArray(new_value) ? new_value : [new_value];
-        } else if (Array.isArray(new_value)) {
-            if (new_value.length > 0) {
-                new_value = new_value[0];
-            } else {
-                new_value = "__null__";
-            }
-        }
-        if (this.model.get("searchable")) {
-            if (Array.isArray(new_value)) {
-                var val = [];
-                _.each(new_value, (v) => {
-                    var d = this.data2index[v];
-                    if (d) {
-                        val.push(d);
-                    }
-                });
-                new_value = val;
-            } else {
-                new_value = this.data2index[new_value];
-            }
-            this.$select.select2("data", new_value);
-        } else {
-            this.$select.val(new_value);
-        }
-    },
-
-    /** Get value from dom */
-    _getValue: function () {
-        var val = null;
-        if (this.model.get("searchable")) {
-            var selected = this.$select.select2("data");
-            if (selected) {
-                if (Array.isArray(selected)) {
-                    val = [];
-                    selected.sort((a, b) => a.order - b.order);
-                    _.each(selected, (v) => {
-                        val.push(v.id);
-                    });
-                } else {
-                    val = selected.id;
-                }
-            }
-        } else {
-            val = this.$select.val();
-        }
-        return Utils.isEmpty(val) ? null : val;
-    },
-});
-
-export default {
-    View: View,
-};

From 8eb4368da27c8ead6fdab3d87871b30dfaf5bea8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:18:59 +0300
Subject: [PATCH 06/17] Remove unused legacy button and options wrappers

---
 client/src/mvc/ui/ui-buttons.js |  97 -----------
 client/src/mvc/ui/ui-misc.js    |  11 --
 client/src/mvc/ui/ui-options.js | 297 --------------------------------
 3 files changed, 405 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-options.js

diff --git a/client/src/mvc/ui/ui-buttons.js b/client/src/mvc/ui/ui-buttons.js
index d0b778461e6a..a6ab2ce10c9b 100644
--- a/client/src/mvc/ui/ui-buttons.js
+++ b/client/src/mvc/ui/ui-buttons.js
@@ -102,101 +102,6 @@ var Button = Backbone.View.extend({
     },
 });
 
-/** This button allows the right-click/open-in-new-tab feature, its used e.g. for panel buttons. */
-var ButtonLink = Button.extend({
-    initialize: function (options) {
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                id: Utils.uid(),
-                visible: true,
-                title: "",
-                icon: "",
-                cls: "",
-            }).set(options);
-        this.setElement($("<a/>").append((this.$icon = $("<span/>"))));
-        this.listenTo(this.model, "change", this.render, this);
-        this.render();
-    },
-
-    render: function () {
-        var options = this.model.attributes;
-        this.$el
-            .removeClass()
-            .addClass(options.cls)
-            .attr({
-                id: options.id,
-                href: options.href || "javascript:void(0)",
-                title: options.title,
-                target: options.target || "_top",
-                disabled: options.disabled,
-                "data-description": options.description,
-            })
-            .css("display", options.visible ? "inline-block" : "none")
-            .tooltip({ placement: "bottom" })
-            .off("click")
-            .on("click", () => {
-                options.onclick && !options.disabled && options.onclick();
-            });
-        this.$icon.removeClass().addClass(options.icon);
-    },
-});
-
-/** The check button is used in the tool form and allows to distinguish between multiple states e.g. all, partially and nothing selected. */
-var ButtonCheck = Backbone.View.extend({
-    initialize: function (options) {
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                id: Utils.uid(),
-                title: "Select/Unselect all",
-                icons: ["fa-square-o", "fa-minus-square-o", "fa-check-square-o"],
-                value: 0,
-                visible: true,
-                onchange: function () {},
-            }).set(options);
-        this.setElement(
-            $("<div/>")
-                .addClass("mb-2")
-                .append((this.$icon = $("<span/>")))
-                .append((this.$title = $("<span/>")))
-        );
-        this.listenTo(this.model, "change", this.render, this);
-        this.render();
-    },
-
-    render: function (options) {
-        options = this.model.attributes;
-        this.$el
-            .addClass("ui-button-check")
-            .css("display", options.visible ? "inline-block" : "none")
-            .off("click")
-            .on("click", () => {
-                this.model.set("value", (this.model.get("value") === 0 && 2) || 0);
-                options.onclick && options.onclick();
-            });
-        this.$title.html(options.title);
-        this.$icon.removeClass().addClass("icon fa mr-1").addClass(options.icons[options.value]);
-    },
-
-    /* Sets a new value and/or returns the value.
-     * @param{Integer}   new_val - Set a new value 0=unchecked, 1=partial and 2=checked.
-     * OR:
-     * @param{Integer}   new_val - Number of selected options.
-     * @param{Integer}   total   - Total number of available options.
-     */
-    value: function (new_val, total) {
-        if (new_val !== undefined) {
-            if (total && new_val !== 0) {
-                new_val = (new_val !== total && 1) || 2;
-            }
-            this.model.set("value", new_val);
-            this.model.get("onchange")(this.model.get("value"));
-        }
-        return this.model.get("value");
-    },
-});
-
 /** This class creates a button with dropdown menu. */
 var ButtonMenu = Backbone.View.extend({
     $menu: null,
@@ -306,7 +211,5 @@ var ButtonMenu = Backbone.View.extend({
 
 export default {
     Button: Button,
-    ButtonLink: ButtonLink,
-    ButtonCheck: ButtonCheck,
     ButtonMenu: ButtonMenu,
 };
diff --git a/client/src/mvc/ui/ui-misc.js b/client/src/mvc/ui/ui-misc.js
index acd100aaa4e0..af8d4a236540 100644
--- a/client/src/mvc/ui/ui-misc.js
+++ b/client/src/mvc/ui/ui-misc.js
@@ -5,7 +5,6 @@ import Backbone from "backbone";
 import $ from "jquery";
 import Buttons from "mvc/ui/ui-buttons";
 import Modal from "mvc/ui/ui-modal";
-import Options from "mvc/ui/ui-options";
 import _ from "underscore";
 
 /** Displays messages used e.g. in the tool form */
@@ -128,23 +127,13 @@ export var Input = Backbone.View.extend({
  */
 
 export const Button = Buttons.Button;
-export const ButtonCheck = Buttons.ButtonCheck;
 export const ButtonMenu = Buttons.ButtonMenu;
-export const ButtonLink = Buttons.ButtonLink;
-export const Checkbox = Options.Checkbox;
-export const RadioButton = Options.RadioButton;
-export const Radio = Options.Radio;
 
 export default {
     Button: Buttons.Button,
-    ButtonCheck: Buttons.ButtonCheck,
     ButtonMenu: Buttons.ButtonMenu,
-    ButtonLink: Buttons.ButtonLink,
     Input: Input,
     Message: Message,
     UnescapedMessage: UnescapedMessage,
     Modal: Modal,
-    RadioButton: Options.RadioButton,
-    Checkbox: Options.Checkbox,
-    Radio: Options.Radio,
 };
diff --git a/client/src/mvc/ui/ui-options.js b/client/src/mvc/ui/ui-options.js
deleted file mode 100644
index c3d4bf7a97cf..000000000000
--- a/client/src/mvc/ui/ui-options.js
+++ /dev/null
@@ -1,297 +0,0 @@
-/** Base class for options based ui elements **/
-import Backbone from "backbone";
-import $ from "jquery";
-import Buttons from "mvc/ui/ui-buttons";
-import _ from "underscore";
-import Utils from "utils/utils";
-
-var Base = Backbone.View.extend({
-    initialize: function (options) {
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                visible: true,
-                cls: null,
-                data: [],
-                id: Utils.uid(),
-                error_text: "No options available.",
-                wait_text: "Please wait...",
-                multiple: false,
-                optional: false,
-                onchange: () => {},
-            }).set(options);
-        this.listenTo(this.model, "change:value", this._changeValue, this);
-        this.listenTo(this.model, "change:wait", this._changeWait, this);
-        this.listenTo(this.model, "change:data", this._changeData, this);
-        this.listenTo(this.model, "change:visible", this._changeVisible, this);
-        this.listenTo(this, "change", () => {
-            this.model.get("onchange")(this.value());
-        });
-        this.render();
-    },
-
-    render: function () {
-        var self = this;
-        this.$el
-            .empty()
-            .removeClass()
-            .addClass("ui-options")
-            .addClass(this.model.get("cls"))
-            .append((this.$message = $("<div/>").addClass("mt-2")))
-            .append((this.$menu = $("<div/>").addClass("ui-options-menu")))
-            .append((this.$options = $(this._template())));
-
-        // add select/unselect all button
-        this.all_button = null;
-        if (this.model.get("multiple")) {
-            this.all_button = new Buttons.ButtonCheck({
-                onclick: function () {
-                    self.$("input").prop("checked", self.all_button.value() !== 0);
-                    self.value(self._getValue());
-                    self.trigger("change");
-                },
-            });
-            this.$menu.append(this.all_button.$el);
-        }
-
-        // finalize dom
-        this._changeData();
-        this._changeWait();
-        this._changeVisible();
-    },
-
-    /** Update available options */
-    update: function (input_def) {
-        if (input_def.data) {
-            this.model.set("data", input_def.data);
-        }
-    },
-
-    _changeData: function () {
-        var self = this;
-        this.$options.empty();
-        if (this._templateOptions) {
-            this.$options.append(this._templateOptions(this.model.get("data")));
-        } else {
-            _.each(this.model.get("data"), (option) => {
-                self.$options.append(
-                    $(self._templateOption(option))
-                        .addClass("ui-option")
-                        .tooltip({
-                            title: option.tooltip || "",
-                            placement: "bottom",
-                        })
-                );
-            });
-        }
-        this.$("input").on("change", () => {
-            self.value(self._getValue());
-            self.trigger("change");
-        });
-        this._changeValue();
-        this._changeWait();
-    },
-
-    _changeVisible: function () {
-        this.$el[this.model.get("visible") ? "show" : "hide"]();
-    },
-
-    _changeWait: function () {
-        if (this.model.get("wait")) {
-            if (this.length() === 0) {
-                this._messageShow(this.model.get("wait_text"), "info");
-                this.$options.hide();
-                this.$menu.hide();
-            }
-        } else {
-            if (this.length() === 0) {
-                this._messageShow(this.model.get("error_text"), "danger");
-                this.$options.hide();
-                this.$menu.hide();
-            } else {
-                this.$message.hide();
-                this.$options.css("display", "inline-block");
-                this.$menu.show();
-            }
-        }
-    },
-
-    _changeValue: function () {
-        this._setValue(this.model.get("value"));
-        if (this._getValue() === null && !this.model.get("multiple") && !this.model.get("optional")) {
-            this._setValue(this.first());
-        }
-        if (this.all_button) {
-            this.all_button.value(Array.isArray(this._getValue()) ? this._getValue().length : 0, this.length());
-        }
-    },
-
-    /** Return/Set current selection */
-    value: function (new_value) {
-        if (new_value !== undefined) {
-            this.model.set("value", new_value);
-        }
-        return this._getValue();
-    },
-
-    /** Return first available option */
-    first: function () {
-        var options = this.$("input").first();
-        return options.length > 0 ? options.val() : null;
-    },
-
-    /** Show a spinner indicating that the select options are currently loaded */
-    wait: function () {
-        this.model.set("wait", true);
-    },
-
-    /** Hide spinner indicating that the request has been completed */
-    unwait: function () {
-        this.model.set("wait", false);
-    },
-
-    /** Returns the number of options */
-    length: function () {
-        return this.$(".ui-option").length;
-    },
-
-    /** Shows the options */
-    show: function () {
-        this.model.set("visible", true);
-    },
-
-    /** Hides the options */
-    hide: function () {
-        this.model.set("visible", false);
-    },
-
-    /** Set value to dom */
-    _setValue: function (new_value) {
-        var self = this;
-        if (new_value !== undefined) {
-            this.$("input").prop("checked", false);
-            if (new_value !== null) {
-                var values = Array.isArray(new_value) ? new_value : [new_value];
-                _.each(values, (v) => {
-                    self.$(`input[value="${v}"]`).first().prop("checked", true);
-                });
-            }
-        }
-    },
-
-    /** Return current selection */
-    _getValue: function () {
-        var selected = [];
-        this.$(":checked").each(function () {
-            selected.push($(this).val());
-        });
-        if (Utils.isEmpty(selected)) {
-            return null;
-        }
-        return this.model.get("multiple") ? selected : selected[0];
-    },
-
-    /** Show message instead if options */
-    _messageShow: function (text, status) {
-        this.$message.show().removeClass().addClass(`alert alert-${status}`).html(text);
-    },
-
-    /** Main template function */
-    _template: function () {
-        return $("<div/>").addClass("ui-options-list");
-    },
-});
-
-/** Iconized **/
-var BaseIcons = Base.extend({
-    _templateOption: function (pair) {
-        var id = Utils.uid();
-        return $("<div/>")
-            .addClass("ui-option")
-            .addClass(this.model.get("cls_option"))
-            .append(
-                $("<input/>").attr({
-                    id: id,
-                    type: this.model.get("type"),
-                    name: this.model.id,
-                    value: pair.value,
-                })
-            )
-            .append($("<label/>").addClass("ui-options-label").attr("for", id).html(pair.label));
-    },
-});
-
-/** Radio button field **/
-var Radio = {};
-Radio.View = BaseIcons.extend({
-    initialize: function (options) {
-        options.type = "radio";
-        BaseIcons.prototype.initialize.call(this, options);
-    },
-});
-
-/** Checkbox options field **/
-var Checkbox = {};
-Checkbox.View = BaseIcons.extend({
-    initialize: function (options) {
-        options.type = "checkbox";
-        options.multiple = true;
-        BaseIcons.prototype.initialize.call(this, options);
-    },
-});
-
-/** Radio button options field styled as classic buttons **/
-var RadioButton = {};
-RadioButton.View = Base.extend({
-    initialize: function (options) {
-        Base.prototype.initialize.call(this, options);
-    },
-
-    /** Set current value */
-    _setValue: function (new_value) {
-        if (new_value !== undefined) {
-            this.$("input").prop("checked", false);
-            this.$("label").removeClass("active");
-            this.$(`[value="${new_value}"]`).prop("checked", true).closest("label").addClass("active");
-        }
-    },
-
-    /** Template for a single option */
-    _templateOption: function (pair) {
-        var $el = $("<label/>").attr("role", "button");
-        if (pair.icon) {
-            $el.append(
-                $("<i/>")
-                    .addClass("fa")
-                    .addClass(pair.icon)
-                    .addClass(!pair.label && "no-padding")
-            );
-        }
-        $el.append(
-            $("<input/>")
-                .attr({
-                    type: "radio",
-                    name: this.model.id,
-                    value: pair.value,
-                })
-                .hide()
-        );
-        if (pair.label) {
-            $el.append(pair.label);
-        }
-        return $el;
-    },
-
-    /** Main template function */
-    _template: function () {
-        return $("<div/>").addClass("ui-radiobutton");
-    },
-});
-
-export default {
-    Base: Base,
-    BaseIcons: BaseIcons,
-    Radio: Radio,
-    RadioButton: RadioButton,
-    Checkbox: Checkbox,
-};

From c0330f6d6d99e951c64d98689bbb474ff7ff5b58 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:20:09 +0300
Subject: [PATCH 07/17] Remove legacy switch wrapper

---
 client/src/mvc/ui/ui-switch.js | 55 ----------------------------------
 1 file changed, 55 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-switch.js

diff --git a/client/src/mvc/ui/ui-switch.js b/client/src/mvc/ui/ui-switch.js
deleted file mode 100644
index c7ba3dd9ad7b..000000000000
--- a/client/src/mvc/ui/ui-switch.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import Backbone from "backbone";
-
-/** Renders a switch input element used e.g. in the tool form */
-export default Backbone.View.extend({
-    initialize: function (options) {
-        this.model =
-            (options && options.model) ||
-            new Backbone.Model({
-                disabled: false,
-                visible: true,
-                onchange: () => {},
-            }).set(options);
-        this.setElement(this._template());
-        this.$label = this.$(".label");
-        this.$input = this.$(".custom-control-input");
-        this.listenTo(this.model, "change", this.render, this);
-        this.listenTo(this, "change", () => {
-            this.model.get("onchange")(this.value());
-        });
-        this.render();
-    },
-    events: {
-        input: "_onchange",
-    },
-    value: function (new_val) {
-        new_val !== undefined && this.model.set("value", new_val);
-        return this.model.get("value");
-    },
-    render: function () {
-        if (this.model.get("value") == "true") {
-            this.$label.text("Yes");
-            this.$input.prop("checked", true);
-        } else {
-            this.$label.text("No");
-            this.$input.prop("checked", false);
-        }
-        this.model.get("disabled") ? this.$input.attr("disabled", true) : this.$input.removeAttr("disabled");
-        this.$el[this.model.get("visible") ? "show" : "hide"]();
-        return this;
-    },
-    _onchange: function () {
-        this.value(this.$input.prop("checked") ? "true" : "false");
-        this.trigger("change");
-    },
-    _template: function () {
-        const id = this.model.id;
-        return `<div class="ui-switch">
-                    <div class="custom-control" id="${id}">
-                        <input type="checkbox" class="custom-control-input" id="switch-id-${id}" />
-                        <label class="custom-control-label" for="switch-id-${id}"/>
-                    </div>
-                    <div class="label" />
-                </div>`;
-    },
-});

From 1eb71c9a04d2744849b50f68f00963ade342a98e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 22:20:57 +0300
Subject: [PATCH 08/17] Remove legacy popover wrapper

---
 client/src/mvc/ui/ui-popover.js | 55 ---------------------------------
 1 file changed, 55 deletions(-)
 delete mode 100644 client/src/mvc/ui/ui-popover.js

diff --git a/client/src/mvc/ui/ui-popover.js b/client/src/mvc/ui/ui-popover.js
deleted file mode 100644
index 88ecc8d38eac..000000000000
--- a/client/src/mvc/ui/ui-popover.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Popover wrapper
- */
-import Backbone from "backbone";
-import $ from "jquery";
-import _ from "underscore";
-import Utils from "utils/utils";
-
-export default Backbone.View.extend({
-    initialize: function (options) {
-        this.options = _.defaults(options || {}, {
-            title: null,
-            placement: "top",
-            container: "body",
-        });
-        this.uid = Utils.uid();
-        this.$target = $(this.options.container);
-    },
-
-    /**
-     * Show popover
-     */
-    show: function ($content) {
-        const btn = "<i class='popover-close fa fa-times-circle'/>";
-        $(this.$target).popover({
-            title: `${this.options.title} ${btn}`,
-            placement: this.options.placement,
-            content: $content,
-            html: true,
-            trigger: "manual",
-        });
-        if (this.options.class) {
-            $(this.$target).addClass(this.options.class);
-        }
-        $(this.$target).popover("show");
-
-        // add event to hide if click is outside of popup and not on container
-        var self = this;
-        const $popover = $(this.$target.data("bs.popover").tip);
-        $popover.find(".popover-header > i").on("click", () => this.hide());
-        $("body").on(`mousedown.${this.uid}`, (e) => {
-            if (!$($popover).is(e.target) && $($popover).has(e.target).length === 0) {
-                self.hide();
-            }
-        });
-    },
-
-    /**
-     * Hide popover
-     */
-    hide: function () {
-        $(this.$target).popover("dispose");
-        $("body").off(`mousedown.${this.uid}`);
-    },
-});

From 30ea01d564cd4cb9d57d17e65b363f70092c5ccd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 23:07:01 +0300
Subject: [PATCH 09/17] Use static keys to specify input sources in variant
 index

---
 .../Form/Elements/FormData/variants.ts        | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index 1b73712514fe..f30217b7108c 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -18,7 +18,7 @@ export const SOURCE = { DATASET: "hda", COLLECTION: "hdca", COLLECTION_ELEMENT:
 export const VARIANTS: Record<string, Array<VariantInterface>> = {
     data: [
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-file",
             tooltip: "Single dataset",
             library: true,
@@ -26,14 +26,14 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
             batch: BATCH.DISABLED,
         },
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
             batch: BATCH.LINKED,
         },
         {
-            src: "hdca",
+            src: SOURCE.COLLECTION,
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
@@ -42,14 +42,14 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     data_multiple: [
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
             batch: BATCH.DISABLED,
         },
         {
-            src: "hdca",
+            src: SOURCE.COLLECTION,
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: true,
@@ -58,7 +58,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     data_collection: [
         {
-            src: "hdca",
+            src: SOURCE.COLLECTION,
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
@@ -67,7 +67,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     workflow_data: [
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-file",
             tooltip: "Single dataset",
             multiple: false,
@@ -76,7 +76,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     workflow_data_multiple: [
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
@@ -85,7 +85,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     workflow_data_collection: [
         {
-            src: "hdca",
+            src: SOURCE.COLLECTION,
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
@@ -94,14 +94,14 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     module_data: [
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-file",
             tooltip: "Single dataset",
             multiple: false,
             batch: BATCH.DISABLED,
         },
         {
-            src: "hda",
+            src: SOURCE.DATASET,
             icon: "fa-copy",
             tooltip: "Multiple datasets",
             multiple: true,
@@ -110,14 +110,14 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
     ],
     module_data_collection: [
         {
-            src: "hdca",
+            src: SOURCE.COLLECTION,
             icon: "fa-folder",
             tooltip: "Dataset collection",
             multiple: false,
             batch: BATCH.DISABLED,
         },
         {
-            src: "hdca",
+            src: SOURCE.COLLECTION,
             icon: "fa-folder",
             tooltip: "Multiple collections",
             multiple: true,

From 9196bbd73a54d7f4a77e6d3f7aada34aa9351363 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 11 Oct 2023 23:07:35 +0300
Subject: [PATCH 10/17] Allow library entry selection for multiple datasets

---
 client/src/components/Form/Elements/FormData/variants.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Form/Elements/FormData/variants.ts b/client/src/components/Form/Elements/FormData/variants.ts
index f30217b7108c..472ad866b316 100644
--- a/client/src/components/Form/Elements/FormData/variants.ts
+++ b/client/src/components/Form/Elements/FormData/variants.ts
@@ -45,6 +45,7 @@ export const VARIANTS: Record<string, Array<VariantInterface>> = {
             src: SOURCE.DATASET,
             icon: "fa-copy",
             tooltip: "Multiple datasets",
+            library: true,
             multiple: true,
             batch: BATCH.DISABLED,
         },

From e98a0281430b9e364578783748a657f7625b05a0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 12 Oct 2023 08:49:56 +0300
Subject: [PATCH 11/17] Add FormLibraryData placeholder component

---
 client/src/components/Form/Elements/FormLibraryData.vue | 5 +++++
 client/src/components/Form/FormElement.vue              | 2 ++
 2 files changed, 7 insertions(+)
 create mode 100644 client/src/components/Form/Elements/FormLibraryData.vue

diff --git a/client/src/components/Form/Elements/FormLibraryData.vue b/client/src/components/Form/Elements/FormLibraryData.vue
new file mode 100644
index 000000000000..dfd9ce05439f
--- /dev/null
+++ b/client/src/components/Form/Elements/FormLibraryData.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="d-flex">LibraryData Input Field Placeholder</div>
+</template>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 208664bdb616..766b4fc9b682 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -16,6 +16,7 @@ import FormDirectory from "./Elements/FormDirectory.vue";
 import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
 import FormHidden from "./Elements/FormHidden.vue";
 import FormInput from "./Elements/FormInput.vue";
+import FormLibraryData from "./Elements/FormLibraryData.vue";
 import FormNumber from "./Elements/FormNumber.vue";
 import FormOptionalText from "./Elements/FormOptionalText.vue";
 import FormRulesEdit from "./Elements/FormRulesEdit.vue";
@@ -224,6 +225,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
         <div v-if="showField" class="ui-form-field" :data-label="props.title">
             <FormBoolean v-if="props.type === 'boolean'" :id="props.id" v-model="currentValue" />
             <FormHidden v-else-if="isHiddenType" :id="props.id" v-model="currentValue" :info="attrs['info']" />
+            <FormLibraryData v-else-if="props.type === 'library_data'" />
             <FormNumber
                 v-else-if="props.type === 'integer' || props.type === 'float'"
                 :id="props.id"

From 8dce5dba8dcfd1bd4a2530f3038bbffef02069b0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 12 Oct 2023 11:30:54 +0300
Subject: [PATCH 12/17] Add vue library data input element wrapper

---
 .../Form/Elements/FormLibraryData.vue         | 122 +++++++++++++++++-
 .../components/Form/Elements/FormSelect.vue   |   5 +-
 client/src/components/Form/FormElement.vue    |   7 +-
 3 files changed, 128 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormLibraryData.vue b/client/src/components/Form/Elements/FormLibraryData.vue
index dfd9ce05439f..a1a67661d0c4 100644
--- a/client/src/components/Form/Elements/FormLibraryData.vue
+++ b/client/src/components/Form/Elements/FormLibraryData.vue
@@ -1,5 +1,123 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import axios from "axios";
+import { computed, onMounted, ref, watch } from "vue";
+
+import { withPrefix } from "@/utils/redirect";
+
+import FormSelect from "./FormSelect.vue";
+
+interface OptionType {
+    id: string;
+    name: string;
+    type: string;
+}
+
+interface Props {
+    id: string;
+    multiple?: boolean;
+    optional?: boolean;
+    value?: Array<OptionType> | OptionType;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: true,
+    optional: false,
+    value: null,
+});
+
+const currentDatasetOptions = ref([]);
+const currentDataset = ref(null);
+const currentLibraryOptions = ref([]);
+const currentLibrary = ref(null);
+const errorMessage = ref("");
+
+const $emit = defineEmits(["input"]);
+
+const valueAsArray = computed(() => {
+    if (props.value) {
+        if (Array.isArray(props.value)) {
+            return props.value;
+        } else {
+            return [props.value];
+        }
+    } else {
+        return [];
+    }
+});
+
+async function getDatasetList() {
+    try {
+        const datasetUrl = `api/libraries/${currentLibrary.value}/contents`;
+        const { data } = await axios.get(withPrefix(datasetUrl));
+        currentDatasetOptions.value = data
+            .filter((x: OptionType) => x.type === "file")
+            .map((x: OptionType) => ({ label: x.name, value: { id: x.id, name: x.name } }));
+        errorMessage.value = "";
+    } catch (e) {
+        errorMessage.value = "Failed to access library contents.";
+    }
+}
+
+async function getLibraryList() {
+    try {
+        const { data } = await axios.get(withPrefix("api/libraries?deleted=false"));
+        currentLibraryOptions.value = data.map((x: OptionType) => ({ label: x.name, value: x.id }));
+        errorMessage.value = "";
+    } catch (e) {
+        errorMessage.value = "Failed to access library list.";
+    }
+}
+
+function onAdd(newDataset: OptionType) {
+    if (newDataset) {
+        if (props.multiple) {
+            const newDatasetArray = valueAsArray.value;
+            const isNewDataset = newDatasetArray.findIndex((x) => x.id === newDataset.id) === -1;
+            if (isNewDataset) {
+                newDatasetArray.push(newDataset);
+                $emit("input", newDatasetArray);
+            }
+        } else {
+            $emit("input", newDataset);
+        }
+    }
+}
+
+function onRemove(datasetId: string) {
+    const newValue = valueAsArray.value.filter((x) => x.id !== datasetId);
+    if (newValue.length > 0) {
+        $emit("input", newValue);
+    } else {
+        $emit("input", null);
+    }
+}
+
+onMounted(() => {
+    getLibraryList();
+});
+
+watch(currentLibrary, () => {
+    getDatasetList();
+});
+</script>
 
 <template>
-    <div class="d-flex">LibraryData Input Field Placeholder</div>
+    <div>
+        <BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+        <FormSelect v-model="currentLibrary" :options="currentLibraryOptions" />
+        <div class="d-flex my-2">
+            <FormSelect v-model="currentDataset" :optional="true" :options="currentDatasetOptions" />
+            <BButton v-if="currentDataset" class="ml-2" variant="link" @click="onAdd(currentDataset)"
+                ><icon icon="plus"
+            /></BButton>
+        </div>
+        <div v-for="(v, vIndex) of valueAsArray" :key="vIndex">
+            <span>
+                <BButton size="sm" variant="link" @click="onRemove(v.id)">
+                    <icon icon="trash" />
+                </BButton>
+                <span>{{ v.name }}</span>
+            </span>
+        </div>
+    </div>
 </template>
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index a1b0720c257b..bb5304c19edc 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -2,13 +2,12 @@
 import { computed, type ComputedRef, onMounted, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
-import { type DataOption } from "@/components/Form/Elements/FormData/types";
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
-type SelectValue = DataOption | string | number | null;
+type SelectValue = Record<string, unknown> | string | number | null;
 
 interface SelectOption {
     label: string;
@@ -23,7 +22,7 @@ const props = withDefaults(
         optional?: boolean;
         options: Array<SelectOption>;
         placeholder?: string;
-        value?: Array<SelectValue> | string | number;
+        value?: Array<SelectValue> | Record<string, unknown> | string | number;
     }>(),
     {
         id: `form-select-${uid()}`,
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 766b4fc9b682..93536889cd3d 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -225,7 +225,12 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
         <div v-if="showField" class="ui-form-field" :data-label="props.title">
             <FormBoolean v-if="props.type === 'boolean'" :id="props.id" v-model="currentValue" />
             <FormHidden v-else-if="isHiddenType" :id="props.id" v-model="currentValue" :info="attrs['info']" />
-            <FormLibraryData v-else-if="props.type === 'library_data'" />
+            <FormLibraryData
+                v-else-if="props.type === 'library_data'"
+                :id="props.id"
+                v-model="currentValue"
+                :multiple="attrs.multiple"
+                :optional="attrs.optional" />
             <FormNumber
                 v-else-if="props.type === 'integer' || props.type === 'float'"
                 :id="props.id"

From 56e93b42f1afeb24efd9e5cff905ee17b3c7434b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 12 Oct 2023 12:02:16 +0300
Subject: [PATCH 13/17] Add notification text if selected library is empty,
 strip initial slash from library dataset name

---
 .../Form/Elements/FormLibraryData.vue         | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormLibraryData.vue b/client/src/components/Form/Elements/FormLibraryData.vue
index a1a67661d0c4..8877451d17c7 100644
--- a/client/src/components/Form/Elements/FormLibraryData.vue
+++ b/client/src/components/Form/Elements/FormLibraryData.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
+import { BAlert, BButton } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 
 import { withPrefix } from "@/utils/redirect";
@@ -35,11 +36,7 @@ const $emit = defineEmits(["input"]);
 
 const valueAsArray = computed(() => {
     if (props.value) {
-        if (Array.isArray(props.value)) {
-            return props.value;
-        } else {
-            return [props.value];
-        }
+        return Array.isArray(props.value) ? props.value : [props.value];
     } else {
         return [];
     }
@@ -51,7 +48,7 @@ async function getDatasetList() {
         const { data } = await axios.get(withPrefix(datasetUrl));
         currentDatasetOptions.value = data
             .filter((x: OptionType) => x.type === "file")
-            .map((x: OptionType) => ({ label: x.name, value: { id: x.id, name: x.name } }));
+            .map((x: OptionType) => ({ label: stripSlash(x.name), value: { id: x.id, name: stripSlash(x.name) } }));
         errorMessage.value = "";
     } catch (e) {
         errorMessage.value = "Failed to access library contents.";
@@ -92,6 +89,10 @@ function onRemove(datasetId: string) {
     }
 }
 
+function stripSlash(name: string) {
+    return name.startsWith("/") ? name.substr(1) : name;
+}
+
 onMounted(() => {
     getLibraryList();
 });
@@ -105,12 +106,13 @@ watch(currentLibrary, () => {
     <div>
         <BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
         <FormSelect v-model="currentLibrary" :options="currentLibraryOptions" />
-        <div class="d-flex my-2">
+        <div v-if="currentDatasetOptions.length > 0" class="d-flex my-2">
             <FormSelect v-model="currentDataset" :optional="true" :options="currentDatasetOptions" />
-            <BButton v-if="currentDataset" class="ml-2" variant="link" @click="onAdd(currentDataset)"
-                ><icon icon="plus"
-            /></BButton>
+            <BButton v-if="currentDataset" class="ml-2" variant="link" @click="onAdd(currentDataset)">
+                <icon icon="plus" />
+            </BButton>
         </div>
+        <div v-else v-localize class="text-muted mb-2">The selected library does not contain any datasets.</div>
         <div v-for="(v, vIndex) of valueAsArray" :key="vIndex">
             <span>
                 <BButton size="sm" variant="link" @click="onRemove(v.id)">

From bed8a8e5bcc8675165355042efe21f54a0f79276 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 12 Oct 2023 13:52:34 +0300
Subject: [PATCH 14/17] Add library data unit test

---
 .../Form/Elements/FormLibraryData.test.js     | 47 +++++++++++++++++++
 .../Form/Elements/FormLibraryData.vue         | 15 ++++--
 2 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/Form/Elements/FormLibraryData.test.js

diff --git a/client/src/components/Form/Elements/FormLibraryData.test.js b/client/src/components/Form/Elements/FormLibraryData.test.js
new file mode 100644
index 000000000000..4905697ee446
--- /dev/null
+++ b/client/src/components/Form/Elements/FormLibraryData.test.js
@@ -0,0 +1,47 @@
+import { mount } from "@vue/test-utils";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+import flushPromises from "flush-promises";
+import { getLocalVue } from "tests/jest/helpers";
+
+import MountTarget from "./FormLibraryData.vue";
+
+const localVue = getLocalVue();
+
+function createTarget(propsData) {
+    const axiosMock = new MockAdapter(axios);
+    const libraryList = [{ id: "library_0", name: "library_name_0" }];
+    const datasetList = [
+        { id: "not_ldda", name: "not_ldda", type: "other" },
+        { id: "ldda_0", name: "ldda_0", type: "file" },
+        { id: "ldda_1", name: "ldda_1", type: "file" },
+    ];
+    axiosMock.onGet("/api/libraries?deleted=false").reply(200, libraryList);
+    axiosMock.onGet("api/libraries/library_0/contents").reply(200, datasetList);
+    return mount(MountTarget, {
+        propsData,
+        localVue,
+    });
+}
+
+describe("FormLibraryData", () => {
+    it("displays select fields", async () => {
+        const wrapper = createTarget({ id: "data_library_field" });
+        expect(wrapper.find(".alert-warning").text()).toBe("No options available.");
+        expect(wrapper.find(".text-muted").text()).toBe("The selected library does not contain any datasets.");
+        await flushPromises();
+        const options = wrapper.findAll(".multiselect__option");
+        expect(options.at(0).text()).toBe("library_name_0");
+        expect(options.at(3).text()).toBe("ldda_0");
+        expect(options.at(4).text()).toBe("ldda_1");
+        const addButton = wrapper.find("[data-description='form library add dataset']");
+        await addButton.trigger("click");
+        const newValue = wrapper.emitted().input[0][0];
+        expect(newValue).toEqual([{ id: "ldda_0", name: "ldda_0" }]);
+        await wrapper.setProps({ value: newValue });
+        const removeButton = wrapper.find("[data-description='form library remove dataset']");
+        await removeButton.trigger("click");
+        const emptyValue = wrapper.emitted().input[1][0];
+        expect(emptyValue).toBe(null);
+    });
+});
diff --git a/client/src/components/Form/Elements/FormLibraryData.vue b/client/src/components/Form/Elements/FormLibraryData.vue
index 8877451d17c7..4c8a81ffc5b2 100644
--- a/client/src/components/Form/Elements/FormLibraryData.vue
+++ b/client/src/components/Form/Elements/FormLibraryData.vue
@@ -49,6 +49,7 @@ async function getDatasetList() {
         currentDatasetOptions.value = data
             .filter((x: OptionType) => x.type === "file")
             .map((x: OptionType) => ({ label: stripSlash(x.name), value: { id: x.id, name: stripSlash(x.name) } }));
+        currentDataset.value = null;
         errorMessage.value = "";
     } catch (e) {
         errorMessage.value = "Failed to access library contents.";
@@ -107,15 +108,23 @@ watch(currentLibrary, () => {
         <BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
         <FormSelect v-model="currentLibrary" :options="currentLibraryOptions" />
         <div v-if="currentDatasetOptions.length > 0" class="d-flex my-2">
-            <FormSelect v-model="currentDataset" :optional="true" :options="currentDatasetOptions" />
-            <BButton v-if="currentDataset" class="ml-2" variant="link" @click="onAdd(currentDataset)">
+            <FormSelect v-model="currentDataset" :options="currentDatasetOptions" />
+            <BButton
+                class="ml-2"
+                data-description="form library add dataset"
+                variant="link"
+                @click="onAdd(currentDataset)">
                 <icon icon="plus" />
             </BButton>
         </div>
         <div v-else v-localize class="text-muted mb-2">The selected library does not contain any datasets.</div>
         <div v-for="(v, vIndex) of valueAsArray" :key="vIndex">
             <span>
-                <BButton size="sm" variant="link" @click="onRemove(v.id)">
+                <BButton
+                    size="sm"
+                    variant="link"
+                    data-description="form library remove dataset"
+                    @click="onRemove(v.id)">
                     <icon icon="trash" />
                 </BButton>
                 <span>{{ v.name }}</span>

From fce11c681fbeed1c68365176ece898c25b07d345 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Oct 2023 16:21:23 +0300
Subject: [PATCH 15/17] Add backward compatibility notice, direct developers to
 the regular data input instead

---
 client/src/components/Form/Elements/FormLibraryData.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/components/Form/Elements/FormLibraryData.vue b/client/src/components/Form/Elements/FormLibraryData.vue
index 4c8a81ffc5b2..925cc230e596 100644
--- a/client/src/components/Form/Elements/FormLibraryData.vue
+++ b/client/src/components/Form/Elements/FormLibraryData.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * This component is strictly for backward compatibility. Tool developers should use the regular
+ * data input field instead, which already allows the selection of library datasets and is more efficient.
+ */
 import axios from "axios";
 import { BAlert, BButton } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";

From bf02dc9948d7b9d7ee8ae468d605f38ed1bc121d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 16 Oct 2023 16:32:33 +0300
Subject: [PATCH 16/17] Drop library_data input type

---
 .../Form/Elements/FormLibraryData.test.js     |  47 ------
 .../Form/Elements/FormLibraryData.vue         | 138 ------------------
 client/src/components/Form/FormElement.vue    |   7 -
 lib/galaxy/tools/parameters/basic.py          |  92 ------------
 test/functional/tools/library_data.xml        |  19 ---
 test/functional/tools/sample_tool_conf.xml    |   1 -
 test/unit/app/tools/test_parameter_parsing.py |  10 --
 7 files changed, 314 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/FormLibraryData.test.js
 delete mode 100644 client/src/components/Form/Elements/FormLibraryData.vue
 delete mode 100644 test/functional/tools/library_data.xml

diff --git a/client/src/components/Form/Elements/FormLibraryData.test.js b/client/src/components/Form/Elements/FormLibraryData.test.js
deleted file mode 100644
index 4905697ee446..000000000000
--- a/client/src/components/Form/Elements/FormLibraryData.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { mount } from "@vue/test-utils";
-import axios from "axios";
-import MockAdapter from "axios-mock-adapter";
-import flushPromises from "flush-promises";
-import { getLocalVue } from "tests/jest/helpers";
-
-import MountTarget from "./FormLibraryData.vue";
-
-const localVue = getLocalVue();
-
-function createTarget(propsData) {
-    const axiosMock = new MockAdapter(axios);
-    const libraryList = [{ id: "library_0", name: "library_name_0" }];
-    const datasetList = [
-        { id: "not_ldda", name: "not_ldda", type: "other" },
-        { id: "ldda_0", name: "ldda_0", type: "file" },
-        { id: "ldda_1", name: "ldda_1", type: "file" },
-    ];
-    axiosMock.onGet("/api/libraries?deleted=false").reply(200, libraryList);
-    axiosMock.onGet("api/libraries/library_0/contents").reply(200, datasetList);
-    return mount(MountTarget, {
-        propsData,
-        localVue,
-    });
-}
-
-describe("FormLibraryData", () => {
-    it("displays select fields", async () => {
-        const wrapper = createTarget({ id: "data_library_field" });
-        expect(wrapper.find(".alert-warning").text()).toBe("No options available.");
-        expect(wrapper.find(".text-muted").text()).toBe("The selected library does not contain any datasets.");
-        await flushPromises();
-        const options = wrapper.findAll(".multiselect__option");
-        expect(options.at(0).text()).toBe("library_name_0");
-        expect(options.at(3).text()).toBe("ldda_0");
-        expect(options.at(4).text()).toBe("ldda_1");
-        const addButton = wrapper.find("[data-description='form library add dataset']");
-        await addButton.trigger("click");
-        const newValue = wrapper.emitted().input[0][0];
-        expect(newValue).toEqual([{ id: "ldda_0", name: "ldda_0" }]);
-        await wrapper.setProps({ value: newValue });
-        const removeButton = wrapper.find("[data-description='form library remove dataset']");
-        await removeButton.trigger("click");
-        const emptyValue = wrapper.emitted().input[1][0];
-        expect(emptyValue).toBe(null);
-    });
-});
diff --git a/client/src/components/Form/Elements/FormLibraryData.vue b/client/src/components/Form/Elements/FormLibraryData.vue
deleted file mode 100644
index 925cc230e596..000000000000
--- a/client/src/components/Form/Elements/FormLibraryData.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script setup lang="ts">
-/**
- * This component is strictly for backward compatibility. Tool developers should use the regular
- * data input field instead, which already allows the selection of library datasets and is more efficient.
- */
-import axios from "axios";
-import { BAlert, BButton } from "bootstrap-vue";
-import { computed, onMounted, ref, watch } from "vue";
-
-import { withPrefix } from "@/utils/redirect";
-
-import FormSelect from "./FormSelect.vue";
-
-interface OptionType {
-    id: string;
-    name: string;
-    type: string;
-}
-
-interface Props {
-    id: string;
-    multiple?: boolean;
-    optional?: boolean;
-    value?: Array<OptionType> | OptionType;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    multiple: true,
-    optional: false,
-    value: null,
-});
-
-const currentDatasetOptions = ref([]);
-const currentDataset = ref(null);
-const currentLibraryOptions = ref([]);
-const currentLibrary = ref(null);
-const errorMessage = ref("");
-
-const $emit = defineEmits(["input"]);
-
-const valueAsArray = computed(() => {
-    if (props.value) {
-        return Array.isArray(props.value) ? props.value : [props.value];
-    } else {
-        return [];
-    }
-});
-
-async function getDatasetList() {
-    try {
-        const datasetUrl = `api/libraries/${currentLibrary.value}/contents`;
-        const { data } = await axios.get(withPrefix(datasetUrl));
-        currentDatasetOptions.value = data
-            .filter((x: OptionType) => x.type === "file")
-            .map((x: OptionType) => ({ label: stripSlash(x.name), value: { id: x.id, name: stripSlash(x.name) } }));
-        currentDataset.value = null;
-        errorMessage.value = "";
-    } catch (e) {
-        errorMessage.value = "Failed to access library contents.";
-    }
-}
-
-async function getLibraryList() {
-    try {
-        const { data } = await axios.get(withPrefix("api/libraries?deleted=false"));
-        currentLibraryOptions.value = data.map((x: OptionType) => ({ label: x.name, value: x.id }));
-        errorMessage.value = "";
-    } catch (e) {
-        errorMessage.value = "Failed to access library list.";
-    }
-}
-
-function onAdd(newDataset: OptionType) {
-    if (newDataset) {
-        if (props.multiple) {
-            const newDatasetArray = valueAsArray.value;
-            const isNewDataset = newDatasetArray.findIndex((x) => x.id === newDataset.id) === -1;
-            if (isNewDataset) {
-                newDatasetArray.push(newDataset);
-                $emit("input", newDatasetArray);
-            }
-        } else {
-            $emit("input", newDataset);
-        }
-    }
-}
-
-function onRemove(datasetId: string) {
-    const newValue = valueAsArray.value.filter((x) => x.id !== datasetId);
-    if (newValue.length > 0) {
-        $emit("input", newValue);
-    } else {
-        $emit("input", null);
-    }
-}
-
-function stripSlash(name: string) {
-    return name.startsWith("/") ? name.substr(1) : name;
-}
-
-onMounted(() => {
-    getLibraryList();
-});
-
-watch(currentLibrary, () => {
-    getDatasetList();
-});
-</script>
-
-<template>
-    <div>
-        <BAlert v-if="!!errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-        <FormSelect v-model="currentLibrary" :options="currentLibraryOptions" />
-        <div v-if="currentDatasetOptions.length > 0" class="d-flex my-2">
-            <FormSelect v-model="currentDataset" :options="currentDatasetOptions" />
-            <BButton
-                class="ml-2"
-                data-description="form library add dataset"
-                variant="link"
-                @click="onAdd(currentDataset)">
-                <icon icon="plus" />
-            </BButton>
-        </div>
-        <div v-else v-localize class="text-muted mb-2">The selected library does not contain any datasets.</div>
-        <div v-for="(v, vIndex) of valueAsArray" :key="vIndex">
-            <span>
-                <BButton
-                    size="sm"
-                    variant="link"
-                    data-description="form library remove dataset"
-                    @click="onRemove(v.id)">
-                    <icon icon="trash" />
-                </BButton>
-                <span>{{ v.name }}</span>
-            </span>
-        </div>
-    </div>
-</template>
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 93536889cd3d..208664bdb616 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -16,7 +16,6 @@ import FormDirectory from "./Elements/FormDirectory.vue";
 import FormDrilldown from "./Elements/FormDrilldown/FormDrilldown.vue";
 import FormHidden from "./Elements/FormHidden.vue";
 import FormInput from "./Elements/FormInput.vue";
-import FormLibraryData from "./Elements/FormLibraryData.vue";
 import FormNumber from "./Elements/FormNumber.vue";
 import FormOptionalText from "./Elements/FormOptionalText.vue";
 import FormRulesEdit from "./Elements/FormRulesEdit.vue";
@@ -225,12 +224,6 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
         <div v-if="showField" class="ui-form-field" :data-label="props.title">
             <FormBoolean v-if="props.type === 'boolean'" :id="props.id" v-model="currentValue" />
             <FormHidden v-else-if="isHiddenType" :id="props.id" v-model="currentValue" :info="attrs['info']" />
-            <FormLibraryData
-                v-else-if="props.type === 'library_data'"
-                :id="props.id"
-                v-model="currentValue"
-                :multiple="attrs.multiple"
-                :optional="attrs.optional" />
             <FormNumber
                 v-else-if="props.type === 'integer' || props.type === 'float'"
                 :id="props.id"
diff --git a/lib/galaxy/tools/parameters/basic.py b/lib/galaxy/tools/parameters/basic.py
index f921770a1660..c32192032d09 100644
--- a/lib/galaxy/tools/parameters/basic.py
+++ b/lib/galaxy/tools/parameters/basic.py
@@ -2574,97 +2574,6 @@ def __init__(self, tool, elem):
         self.hidden = True
 
 
-class LibraryDatasetToolParameter(ToolParameter):
-    """
-    Parameter that lets users select a LDDA from a modal window, then use it within the wrapper.
-    """
-
-    def __init__(self, tool, input_source, context=None):
-        input_source = ensure_input_source(input_source)
-        super().__init__(tool, input_source)
-        self.multiple = input_source.get_bool("multiple", True)
-
-    def from_json(self, value, trans, other_values=None):
-        other_values = other_values or {}
-        return self.to_python(value, trans.app, other_values=other_values, validate=True)
-
-    def to_param_dict_string(self, value, other_values=None):
-        if value is None:
-            return "None"
-        elif self.multiple:
-            return [dataset.get_file_name() for dataset in value]
-        else:
-            return value[0].get_file_name()
-
-    # converts values to json representation:
-    #   { id: LibraryDatasetDatasetAssociation.id, name: LibraryDatasetDatasetAssociation.name, src: 'lda' }
-    def to_json(self, value, app, use_security):
-        if not isinstance(value, list):
-            value = [value]
-        lst: List[Dict[str, str]] = []
-        for item in value:
-            lda_id = lda_name = None
-            if isinstance(item, LibraryDatasetDatasetAssociation):
-                lda_id = app.security.encode_id(item.id) if use_security else item.id
-                lda_name = item.name
-            elif isinstance(item, dict):
-                lda_id = item.get("id")
-                lda_name = item.get("name")
-            else:
-                lst = []
-                break
-            if lda_id is not None:
-                lst.append({"id": lda_id, "name": lda_name, "src": "ldda"})
-        if len(lst) == 0:
-            return None
-        else:
-            return lst
-
-    # converts values into python representation:
-    #   LibraryDatasetDatasetAssociation
-    # valid input values (incl. arrays of mixed sets) are:
-    #   1. LibraryDatasetDatasetAssociation
-    #   2. LibraryDatasetDatasetAssociation.id
-    #   3. { id: LibraryDatasetDatasetAssociation.id, ... }
-    def to_python(self, value, app, other_values=None, validate=False):
-        other_values = other_values or {}
-        if not isinstance(value, list):
-            value = [value]
-        lst = []
-        session = app.model.context
-        for item in value:
-            if isinstance(item, LibraryDatasetDatasetAssociation):
-                lst.append(item)
-            else:
-                lda_id = None
-                if isinstance(item, dict):
-                    lda_id = item.get("id")
-                elif isinstance(item, str):
-                    lda_id = item
-                else:
-                    lst = []
-                    break
-                id = lda_id if isinstance(lda_id, int) else app.security.decode_id(lda_id)
-                lda = session.get(LibraryDatasetDatasetAssociation, id)
-                if lda is not None:
-                    lst.append(lda)
-                elif validate:
-                    raise ParameterValueError(
-                        "one of the selected library datasets is invalid or not available anymore", self.name
-                    )
-        if len(lst) == 0:
-            if not self.optional and validate:
-                raise ParameterValueError("invalid library dataset selected", self.name)
-            return None
-        else:
-            return lst
-
-    def to_dict(self, trans, other_values=None):
-        d = super().to_dict(trans)
-        d["multiple"] = self.multiple
-        return d
-
-
 class BaseJsonToolParameter(ToolParameter):
     """
     Class of parameter that tries to keep values as close to JSON as possible.
@@ -2766,7 +2675,6 @@ def to_text(self, value):
     ftpfile=FTPFileToolParameter,
     data=DataToolParameter,
     data_collection=DataCollectionToolParameter,
-    library_data=LibraryDatasetToolParameter,
     rules=RulesListToolParameter,
     directory_uri=DirectoryUriToolParameter,
     drill_down=DrillDownSelectToolParameter,
diff --git a/test/functional/tools/library_data.xml b/test/functional/tools/library_data.xml
deleted file mode 100644
index 8fd1a147f49d..000000000000
--- a/test/functional/tools/library_data.xml
+++ /dev/null
@@ -1,19 +0,0 @@
-<tool id="library_data" name="library_data" version="1.0.0">
-    <command>
-        cat $library_dataset >> $output;
-        #for $input in $library_dataset_multiple
-            cat $input >> $output_multiple;
-        #end for
-    </command>
-    <inputs>
-        <param name="library_dataset" type="library_data" multiple="false" />
-        <param name="library_dataset_multiple" type="library_data" />
-    </inputs>
-    <outputs>
-        <data name="output" format="data" />
-        <data name="output_multiple" format="data" />
-    </outputs>
-    <tests>
-        <!-- These parameters cannot be tested. -->
-    </tests>
-</tool>
diff --git a/test/functional/tools/sample_tool_conf.xml b/test/functional/tools/sample_tool_conf.xml
index 91cdde80ad78..6069630972b8 100644
--- a/test/functional/tools/sample_tool_conf.xml
+++ b/test/functional/tools/sample_tool_conf.xml
@@ -21,7 +21,6 @@
   <tool file="code_file.xml" />
   <tool file="disambiguate_cond.xml" />
   <tool file="multi_repeats.xml" />
-  <tool file="library_data.xml" />
   <tool file="remove_value.xml" />
   <tool file="bibtex.xml" />
   <tool file="multi_select.xml" />
diff --git a/test/unit/app/tools/test_parameter_parsing.py b/test/unit/app/tools/test_parameter_parsing.py
index 3f911339e360..b0b030ea9d5a 100644
--- a/test/unit/app/tools/test_parameter_parsing.py
+++ b/test/unit/app/tools/test_parameter_parsing.py
@@ -434,13 +434,3 @@ def test_tool_collection(self):
         )
         assert param.type == "data_collection"
         assert param.collection_types == ["list", "list:paired"]
-
-    def test_library(self):
-        param = self._parameter_for(
-            xml="""
-            <param name="libraryp" type="library_data">
-            </param>
-        """
-        )
-        assert param.type == "library_data"
-        assert param.name == "libraryp"

From 5b928e4d73ff88f2bbf5b5a38ce30c4a902b425c Mon Sep 17 00:00:00 2001
From: mvdbeek <m.vandenbeek@gmail.com>
Date: Tue, 17 Oct 2023 18:14:24 +0200
Subject: [PATCH 17/17] Drop library_data from schema

---
 client/src/components/Form/parameterTypes.d.ts | 1 -
 lib/galaxy/tool_util/xsd/galaxy.xsd            | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/components/Form/parameterTypes.d.ts b/client/src/components/Form/parameterTypes.d.ts
index 93f1a5406a5b..84ac11756c97 100644
--- a/client/src/components/Form/parameterTypes.d.ts
+++ b/client/src/components/Form/parameterTypes.d.ts
@@ -23,7 +23,6 @@ export type FormParameterTypes =
     | "data_collection"
     | "drill_down"
     | "group_tag"
-    | "library_data"
     | "ftpfile"
     | "upload"
     | "rules"
diff --git a/lib/galaxy/tool_util/xsd/galaxy.xsd b/lib/galaxy/tool_util/xsd/galaxy.xsd
index 6b4851a0041e..092748cfa25d 100644
--- a/lib/galaxy/tool_util/xsd/galaxy.xsd
+++ b/lib/galaxy/tool_util/xsd/galaxy.xsd
@@ -3474,7 +3474,7 @@ Describes the parameter type - each different type as different semantics and
 the tool form widget is different. Currently valid parameter types are:
 ``text``,  ``integer``,  ``float``,  ``boolean``,  ``genomebuild``,  ``select``,
 ``color``,  ``data_column``,  ``hidden``,  ``hidden_data``,  ``baseurl``,
-``file``,  ``ftpfile``,  ``data``,  ``data_collection``,  ``library_data``,
+``file``,  ``ftpfile``,  ``data``,  ``data_collection``,
 ``drill_down``. The definition of supported parameter types as defined in the
 ``parameter_types`` dictionary in
 [/lib/galaxy/tools/parameters/basic.py](https://github.com/galaxyproject/galaxy/blob/dev/lib/galaxy/tools/parameters/basic.py).
@@ -3750,7 +3750,6 @@ allow access to Python code to generate options for a select list. See
       <xs:enumeration value="color"/>
       <xs:enumeration value="boolean"/>
       <xs:enumeration value="genomebuild"/>
-      <xs:enumeration value="library_data"/>
       <xs:enumeration value="select"/>
       <xs:enumeration value="data_column"/>
       <xs:enumeration value="hidden"/>