Vueify Rules Edit

client/package.json

@@ -29,7 +29,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.9",
-    "@handsontable/vue": "^2.0.0-beta1",
+    "@handsontable/vue": "^2.0.0",
     "@hirez_io/observer-spy": "^2.1.2",
     "@johmun/vue-tags-input": "^2.1.0",
     "@popperjs/core": "^2.11.5",
@@ -54,7 +54,7 @@
     "file-saver": "^2.0.5",
     "flush-promises": "^1.0.2",
     "glob": "^7.2.0",
-    "handsontable": "^2.0.0",
+    "handsontable": "^4.0.0",
     "hsluv": "^0.1.0",
     "imask": "^6.4.0",
     "jquery": "2",

client/src/components/Form/Elements/FormRulesEdit.vue

@@ -0,0 +1,96 @@
+<script setup>
+import RuleCollectionBuilder from "components/RuleCollectionBuilder";
+import RulesDisplay from "components/RulesDisplay/RulesDisplay";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, computed } from "vue";
+import { getAppRoot } from "onload/loadConfig";
+import axios from "axios";
+
+const props = defineProps({
+    value: {
+        type: Object,
+    },
+    target: {
+        type: Object,
+        default: null,
+    },
+});
+
+const modal = ref(null);
+const elements = ref(null);
+
+const initialRules = {
+    rules: [],
+    mapping: [],
+};
+
+const displayRules = computed(() => props.value ?? initialRules);
+
+async function onEdit() {
+    if (props.target) {
+        const url = `${getAppRoot()}api/dataset_collections/${props.target.id}?instance_type=history`;
+
+        try {
+            const response = await axios.get(url);
+            elements.value = response.data;
+            modal.value.show();
+        } catch (e) {
+            console.error(e);
+            console.log("problem fetching collection");
+        }
+    } else {
+        modal.value.show();
+    }
+}
+
+const emit = defineEmits(["input"]);
+
+function onSaveRules(rules) {
+    modal.value.hide();
+    emit("input", rules);
+}
+
+function onCancel() {
+    modal.value.hide();
+}
+</script>
+
+<script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faEdit } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faEdit);
+</script>
+
+<template>
+    <div class="form-rules-edit">
+        <RulesDisplay :input-rules="displayRules" />
+        <b-button title="Edit Rules" @click="onEdit">
+            <FontAwesomeIcon icon="fa-edit" />
+            <span>Edit</span>
+        </b-button>
+
+        <b-modal ref="modal" modal-class="ui-form-rules-edit-modal" hide-footer>
+            <template v-slot:modal-title>
+                <h2 class="mb-0">Build Rules for Applying to Existing Collection</h2>
+            </template>
+            <RuleCollectionBuilder
+                elements-type="collection_contents"
+                import-type="collections"
+                :initial-elements="elements"
+                :initial-rules="props.value"
+                :save-rules-fn="onSaveRules"
+                :oncancel="onCancel"
+                :oncreate="() => {}" />
+        </b-modal>
+    </div>
+</template>
+
+<style lang="scss">
+.ui-form-rules-edit-modal {
+    .modal-dialog {
+        width: 100%;
+        max-width: 85%;
+    }
+}
+</style>

client/src/components/Form/Elements/parameters.js

@@ -8,7 +8,6 @@ import Ui from "mvc/ui/ui-misc";
 import SelectContent from "mvc/ui/ui-select-content";
 import SelectLibrary from "mvc/ui/ui-select-library";
 import SelectFtp from "mvc/ui/ui-select-ftp";
-import RulesEdit from "mvc/ui/ui-rules-edit";
 import DataPicker from "mvc/ui/ui-data-picker";
 
 // create form view
@@ -197,14 +196,6 @@ export default Backbone.View.extend({
         });
     },
 
-    _fieldRulesEdit: function (input_def) {
-        return new RulesEdit.View({
-            id: input_def.id,
-            onchange: input_def.onchange,
-            target: input_def.target,
-        });
-    },
-
     /** Upload file field */
     _fieldUpload: function (input_def) {
         return new Ui.Upload({

client/src/components/Form/FormElement.vue

@@ -7,6 +7,7 @@ import FormSelection from "./Elements/FormSelection";
 import FormColor from "./Elements/FormColor";
 import FormDirectory from "./Elements/FormDirectory";
 import FormNumber from "./Elements/FormNumber";
+import FormRulesEdit from "./Elements/FormRulesEdit";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, computed, useAttrs } from "vue";
 
@@ -270,6 +271,7 @@ library.add(faExclamation, faTimes, faArrowsAltH, faCaretSquareDown, faCaretSqua
                 :multiple="attrs.multiple" />
             <FormColor v-else-if="props.type === 'color'" :id="props.id" v-model="currentValue" />
             <FormDirectory v-else-if="props.type === 'directory_uri'" v-model="currentValue" />
+            <FormRulesEdit v-else-if="type == 'rules'" v-model="currentValue" :target="attrs.target" />
             <FormParameter
                 v-else-if="backbonejs"
                 :id="props.id"

client/tests/jest/jest.config.js

@@ -82,14 +82,15 @@ module.exports = {
     // An array of file extensions your modules use
     moduleFileExtensions: ["js", "json", "vue", "yml", "txt", "ts"],
 
-    modulePaths: ["<rootDir>/src/", "<rootDir>/tests/","<rootDir>/node_modules/", "./"],
+    modulePaths: ["<rootDir>/src/", "<rootDir>/tests/", "<rootDir>/node_modules/", "./"],
 
     // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
     // Some of these should turn into true mocks, instead of this module name mapping hack.
     moduleNameMapper: {
         "\\.(css|scss)$": "<rootDir>/tests/jest/__mocks__/style.js",
         "^@fontsource/.*": "<rootDir>/tests/jest/__mocks__/font.js",
         "^config$": "<rootDir>/tests/jest/__mocks__/config.js",
+        "handsontable": "node_modules/handsontable/dist/handsontable.js",
         "utils/localization$": "<rootDir>/tests/jest/__mocks__/localization.js",
         "viz/trackster$": "<rootDir>/tests/jest/__mocks__/trackster.js",
         "rxjs/internal/scheduler/AsyncScheduler":

client/yarn.lock

@@ -1405,7 +1405,7 @@
   resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.9.tgz#7df35818135be54fd87568f16ec7b998a3d0cce8"
   integrity sha512-tUmO92PFHbLOplitjHNBVGMJm6S57vp16tBXJVPKSI/6CfjrgLycqKxEpC6f7qsOqUdoXs5nIv4HLUfrOMHzuw==
 
-"@handsontable/vue@^2.0.0-beta1":
+"@handsontable/vue@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@handsontable/vue/-/vue-2.0.0.tgz#28ae7d247a89738088abc32584562925dde18db0"
   integrity sha512-QVqJywrQWwJzoDCXibZkXrg+T91hNCTCN9qznmum4FSewL0MUtaHotv7Zc/D4scvEwpwWnKx5vpw4CY14V4OYw==
@@ -3067,6 +3067,11 @@ big.js@^5.2.2:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
+bignumber.js@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-8.1.1.tgz#4b072ae5aea9c20f6730e4e5d529df1271c4d885"
+  integrity sha512-QD46ppGintwPGuL1KqmwhR0O+N2cZUg8JG/VzwI2e28sM9TqHjQB10lI4QAaMHVbLzwVLLAwEglpKPViWX+5NQ==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -5523,13 +5528,13 @@ handle-thing@^2.0.0:
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
   integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
-handsontable@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/handsontable/-/handsontable-2.0.0.tgz#b22fbd61d3193eb63b9c798e73843f55856ef022"
-  integrity sha512-o8yCOgyV0LkBrEyMrGtfex4UDJ+Pw3+Eeoxk9rRg2LmlziJsgwGlz5e4W1YP3/Ew7bPW/iyGlL4q1bp+6pcD/g==
+handsontable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/handsontable/-/handsontable-4.0.0.tgz#1a9591a3f6c2fe13564955d945ea91d20b6c4cf1"
+  integrity sha512-+i9jkz5D3+Da7bIL4+YjF4hnY/nWjR8ZfcCo9BHuHaYY/ri2CYH75OobVxpMyPTspQlXjyQoWE6v0qhHuesoUw==
   dependencies:
     moment "2.20.1"
-    numbro "1.11.0"
+    numbro "^2.0.6"
     pikaday "1.5.1"
 
 has-bigints@^1.0.1, has-bigints@^1.0.2:
@@ -7742,10 +7747,12 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
-[email protected]:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/numbro/-/numbro-1.11.0.tgz#39aa17b358b4682aec8ca0d5755f35c5d9ce8f9e"
-  integrity sha512-HLgprbMBJf/h3zQ91KpvjzTWyxd9pS2xOFoEBTdkUusBi9eSqYq+RlhFn8i+WSHy/ghGRtbN5brnABOR21z4kA==
+numbro@^2.0.6:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/numbro/-/numbro-2.3.6.tgz#4bd622ebe59ccbc49dad365c5b9eed200781fa21"
+  integrity sha512-pxpoTT3hVxQGaOA2RTzXR/muonQNd1K1HPJbWo7QOmxPwiPmoFCFfsG9XXgW3uqjyzezJ0P9IvCPDXUtJexjwg==
+  dependencies:
+    bignumber.js "^8.1.1"
 
 nwsapi@^2.2.2:
   version "2.2.2"

lib/galaxy/selenium/navigates_galaxy.py

@@ -1393,7 +1393,7 @@ def tool_parameter_div(self, expanded_parameter_id):
 
     def tool_parameter_edit_rules(self):
         rules_div_element = self.tool_parameter_div("rules")
-        edit_button_element = rules_div_element.find_element(By.CSS_SELECTOR, "i.fa-edit")
+        edit_button_element = rules_div_element.find_element(By.CSS_SELECTOR, ".form-rules-edit button")
         edit_button_element.click()
 
     def tool_set_value(self, expanded_parameter_id, value, expected_type=None):