From fd1a5c21eb7babc0f81b136691afda46fa87c450 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Wed, 8 Apr 2020 17:39:48 -0400
Subject: [PATCH 01/10] refactored components of Rule Collection into separate
 vue files

---
 .../components/RuleBuilder/ColumnSelector.vue | 134 +++++++
 .../RuleBuilder/IdentifierDisplay.vue         |  50 +++
 .../RuleBuilder/RegularExpressionInput.vue    |  32 ++
 .../components/RuleBuilder/RuleComponent.vue  |  46 +++
 .../components/RuleBuilder/RuleDisplay.vue    |  51 +++
 .../RuleBuilder/RuleTargetComponent.vue       |  25 ++
 .../components/RuleCollectionBuilder.vue      | 329 +-----------------
 7 files changed, 346 insertions(+), 321 deletions(-)
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue

diff --git a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
new file mode 100644
index 00000000000..764ab9690bb
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
@@ -0,0 +1,134 @@
+<template>
+    <div class="rule-column-selector" v-if="!multiple || !ordered">
+        <label class="d-flex justify-content-end align-items-center">
+            <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
+            <div class="mr-1" v-b-tooltip.hover :title="title"><select2 :value="target" @input="handleInput" :multiple="multiple">
+                <option v-for="(col, index) in colHeaders" :value="index">{{ col }}</option>
+            </select2></div>
+            <slot></slot>
+        </label>
+    </div>
+    <div class="rule-column-selector" v-else>
+        <span>{{ label }}</span>
+        <slot></slot>
+        <ol>
+            <li v-for="(targetEl, index) in target"
+                v-bind:index="index"
+                v-bind:key="targetEl"
+                class="rule-column-selector-target">
+                {{ colHeaders[targetEl] }}
+                <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
+                <span class="fa fa-arrow-up rule-column-selector-up" v-if="index !== 0" @click="moveUp(index)"></span>
+                <span class="fa fa-arrow-down rule-column-selector-down" v-if="index < target.length - 1" @click="moveUp(index + 1)"></span>
+            </li>
+            <li v-if="this.target.length < this.colHeaders.length">
+                <span class="rule-column-selector-target-add" v-if="!orderedEdit">
+                    <i @click="$emit('update:orderedEdit', true)">... {{ l("Assign Another Column") }}</i>
+                </span>
+                <span class="rule-column-selector-target-select" v-else>
+                    <select2 @input="handleAdd" placeholder="Select a column">
+                        <option /><!-- empty option selection for placeholder -->
+                        <option v-for="(col, index) in remainingHeaders" :value="index">{{ col }}</option>
+                    </select2>
+                </span>
+            </li>
+        </ol>
+    </div>
+</template>
+
+<script>
+import _l from "utils/localization";
+import Select2 from "components/Select2";
+export default {
+    components: {
+        Select2,
+    },
+    data: function () {
+        return {
+            l: _l,
+        };
+    },
+    props: {
+        target: {
+            required: true,
+        },
+        label: {
+            required: false,
+            type: String,
+            default: _l("From Column"),
+        },
+        help: {
+            required: false,
+        },
+        colHeaders: {
+            type: Array,
+            required: true,
+        },
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        ordered: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        valueAsList: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+        orderedEdit: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    computed: {
+        remainingHeaders() {
+            const colHeaders = this.colHeaders;
+            if (!this.multiple) {
+                return colHeaders;
+            }
+            const remaining = {};
+            for (const key in colHeaders) {
+                if (this.target.indexOf(parseInt(key)) === -1) {
+                    remaining[key] = colHeaders[key];
+                }
+            }
+            return remaining;
+        },
+        title() {
+            return _l("Select a column");
+        },
+    },
+    methods: {
+        handleInput(value) {
+            if (this.multiple) {
+                // https://stackoverflow.com/questions/262427/why-does-parseint-yield-nan-with-arraymap
+                const val = value.map((idx) => parseInt(idx));
+                this.$emit("update:target", val);
+            } else {
+                let val = parseInt(value);
+                if (this.valueAsList) {
+                    val = [val];
+                }
+                this.$emit("update:target", val);
+            }
+        },
+        handleAdd(value) {
+            this.target.push(parseInt(value));
+            this.$emit("update:orderedEdit", false);
+        },
+        handleRemove(index) {
+            this.target.splice(index, 1);
+        },
+        moveUp(value) {
+            const swapVal = this.target[value - 1];
+            Vue.set(this.target, value - 1, this.target[value]);
+            Vue.set(this.target, value, swapVal);
+        },
+    }
+}
+</script> 
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
new file mode 100644
index 00000000000..fd5659c73be
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
@@ -0,0 +1,50 @@
+<template>
+    <li class="rule">
+        <span v-b-tooltip.hover :title="help">Set {{ columnsLabel }} as {{ typeDisplay }}</span>
+        <span v-b-tooltip.hover :title="titleEdit" class="fa fa-edit" @click="edit"></span>
+        <span v-b-tooltip.hover :title="titleRemove" class="fa fa-times" @click="remove"></span>
+    </li>
+</template>
+
+<script>
+export default{
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        columns: {
+            required: true,
+        },
+        colHeaders: {
+            type: Array,
+            required: true,
+        },
+    },
+    methods: {
+        remove() {
+            this.$emit("remove");
+        },
+        edit() {
+            this.$emit("edit");
+        },
+    },
+    computed: {
+        typeDisplay() {
+            return MAPPING_TARGETS[this.type].label;
+        },
+        help() {
+            return MAPPING_TARGETS[this.type].help || "";
+        },
+        titleEdit() {
+            return _l("Edit column definition");
+        },
+        titleRemove() {
+            return _l("Remove this column definition");
+        },
+        columnsLabel() {
+            return RuleDefs.columnDisplay(this.columns, this.colHeaders);
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
new file mode 100644
index 00000000000..9437edae40c
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <label for="regular_expression" v-b-tooltip.hover :title="title">{{ label }}</label>
+        <span v-b-popover.html="popoverContent" :title="popoverTitle" class="fa fa-question"></span>
+        <input v-b-tooltip.hover.left :title="title" name="regular_expression" class="rule-regular-expression" type="text" :value="target" @input="$emit('update:target', $event.target.value)" />
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        target: {
+            required: true,
+        },
+    },
+    computed: {
+        label() {
+            return _l("Regular Expression");
+        },
+        title() {
+            return _l("Enter a regular expression.");
+        },
+        popoverTitle() {
+            return _l("Regular Expressions");
+        },
+        popoverContent() {
+            return _l(
+                `Regular expressions are patterns used to match character combinations in strings. This input accepts Python-style regular expressions, find more information about these in <a href="https://pythonforbiologists.com/regular-expressions/">this Python for Biologists tutorial</a>.`
+            );
+        }
+}
+</script> 
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
new file mode 100644
index 00000000000..826c0fda1c0
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
@@ -0,0 +1,46 @@
+<template>
+    <div v-if="ruleType == displayRuleType" class="rule-editor" :class="typeToClass">
+        <slot></slot>
+        <div class="buttons rule-edit-buttons d-flex justify-content-end">
+           <button type="button" class="btn rule-editor-cancel mr-1" @click="cancel">{{ cancelLabel }}</button>
+           <button type="button" class="btn btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data: function () {
+        return {
+            applyLabel: _l("Apply"),
+            cancelLabel: _l("Cancel"),
+        };
+    },
+    props: {
+        ruleType: {
+            type: String,
+            required: true,
+        },
+        displayRuleType: {
+            required: true,
+        },
+        builder: {
+            required: true,
+        },
+    },
+    methods: {
+        cancel() {
+            this.builder.displayRuleType = null;
+        },
+        okay() {
+            this.builder.handleRuleSave(this.ruleType);
+            this.cancel();
+        },
+    },
+    computed: {
+        typeToClass() {
+            return "rule-edit-" + this.ruleType.replace(/_/g, "-");
+        },
+    },
+}
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
new file mode 100644
index 00000000000..c51377581f8
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
@@ -0,0 +1,51 @@
+
+<template>
+    <li class="rule">
+        <span class="rule-display">
+            <span class="mr-1">{{ title }}</span>
+            <span v-b-tooltip.hover :title="editTitle" class="fa fa-edit mr-1" @click="edit"></span>
+            <span v-b-tooltip.hover :title="removeTitle" class="fa fa-times map" @click="remove"></span>
+        </span>
+        <span class="rule-warning" v-if="rule.warn">
+            {{ rule.warn }}
+        </span>
+        <span class="rule-error" v-if="rule.error">
+            <span class="alert-message">{{ rule.error }}</span>
+        </span>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        rule: {
+            required: true,
+            type: Object,
+        },
+        colHeaders: {
+            type: Array,
+            required: true,
+        },
+    },
+    computed: {
+        title() {
+            const ruleType = this.rule.type;
+            return RULES[ruleType].display(this.rule, this.colHeaders);
+        },
+        editTitle() {
+            return _l("Edit this rule.");
+        },
+        removeTitle() {
+            return _l("Remove this rule.");
+        },
+    },
+    methods: {
+        edit() {
+            this.$emit("edit");
+        },
+        remove() {
+            this.$emit("remove");
+        },
+    }
+}
+</script>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
new file mode 100644
index 00000000000..ec3e7dd890d
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -0,0 +1,25 @@
+<template>
+    template: `<a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{title}}</a>`,
+</template>
+
+<script>
+export default {
+    props: {
+        ruleType: {
+            type: String,
+            required: true,
+        },
+        builder: {
+            required: true,
+        },
+    },
+    computed: {
+        linkClassName() {
+            return "rule-link-" + this.ruleType.replace(/_/g, "-");
+        },
+        title() {
+            return RULES[this.ruleType].title;
+        },
+    },
+}
+</script>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleCollectionBuilder.vue b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
index d4d99436d37..60e5ed92e53 100644
--- a/client/galaxy/scripts/components/RuleCollectionBuilder.vue
+++ b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
@@ -576,332 +576,19 @@ import RuleDefs from "mvc/rules/rule-definitions";
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import Select2 from "components/Select2";
+import ColumnSelector from "components/RuleBuilder/ColumnSelector";
+import RegularExpressionInput from "components/RuleBuilder/RegularExpressionInput";
+import RuleDisplay from "components/RuleBuilder/RuleDisplay";
+import IdentifierDisplay from "components/RuleBuilder/IdentifierDisplay";
+import RuleTargetComponent from "components/RuleBuilder/RuleTargetComponent";
+import RuleComponent from "components/RuleBuilder/RuleComponent";
+
 
 Vue.use(BootstrapVue);
 
 const RULES = RuleDefs.RULES;
 const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
-
-const ColumnSelector = {
-    template: `
-        <div class="rule-column-selector" v-if="!multiple || !ordered">
-            <label class="d-flex justify-content-end align-items-center">
-                <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
-                <div class="mr-1" v-b-tooltip.hover :title="title"><select2 :value="target" @input="handleInput" :multiple="multiple">
-                    <option v-for="(col, index) in colHeaders" :value="index">{{ col }}</option>
-                </select2></div>
-                <slot></slot>
-            </label>
-        </div>
-        <div class="rule-column-selector" v-else>
-            <span>{{ label }}</span>
-            <slot></slot>
-            <ol>
-                <li v-for="(targetEl, index) in target"
-                    v-bind:index="index"
-                    v-bind:key="targetEl"
-                    class="rule-column-selector-target">
-                    {{ colHeaders[targetEl] }}
-                    <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
-                    <span class="fa fa-arrow-up rule-column-selector-up" v-if="index !== 0" @click="moveUp(index)"></span>
-                    <span class="fa fa-arrow-down rule-column-selector-down" v-if="index < target.length - 1" @click="moveUp(index + 1)"></span>
-                </li>
-                <li v-if="this.target.length < this.colHeaders.length">
-                    <span class="rule-column-selector-target-add" v-if="!orderedEdit">
-                        <i @click="$emit('update:orderedEdit', true)">... {{ l("Assign Another Column") }}</i>
-                    </span>
-                    <span class="rule-column-selector-target-select" v-else>
-                        <select2 @input="handleAdd" placeholder="Select a column">
-                            <option /><!-- empty option selection for placeholder -->
-                            <option v-for="(col, index) in remainingHeaders" :value="index">{{ col }}</option>
-                        </select2>
-                    </span>
-                </li>
-            </ol>
-        </div>
-    `,
-    data: function () {
-        return {
-            l: _l,
-        };
-    },
-    props: {
-        target: {
-            required: true,
-        },
-        label: {
-            required: false,
-            type: String,
-            default: _l("From Column"),
-        },
-        help: {
-            required: false,
-        },
-        colHeaders: {
-            type: Array,
-            required: true,
-        },
-        multiple: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        ordered: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        valueAsList: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-        orderedEdit: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-    },
-    computed: {
-        remainingHeaders() {
-            const colHeaders = this.colHeaders;
-            if (!this.multiple) {
-                return colHeaders;
-            }
-            const remaining = {};
-            for (const key in colHeaders) {
-                if (this.target.indexOf(parseInt(key)) === -1) {
-                    remaining[key] = colHeaders[key];
-                }
-            }
-            return remaining;
-        },
-        title() {
-            return _l("Select a column");
-        },
-    },
-    methods: {
-        handleInput(value) {
-            if (this.multiple) {
-                // https://stackoverflow.com/questions/262427/why-does-parseint-yield-nan-with-arraymap
-                const val = value.map((idx) => parseInt(idx));
-                this.$emit("update:target", val);
-            } else {
-                let val = parseInt(value);
-                if (this.valueAsList) {
-                    val = [val];
-                }
-                this.$emit("update:target", val);
-            }
-        },
-        handleAdd(value) {
-            this.target.push(parseInt(value));
-            this.$emit("update:orderedEdit", false);
-        },
-        handleRemove(index) {
-            this.target.splice(index, 1);
-        },
-        moveUp(value) {
-            const swapVal = this.target[value - 1];
-            Vue.set(this.target, value - 1, this.target[value]);
-            Vue.set(this.target, value, swapVal);
-        },
-    },
-    components: {
-        Select2,
-    },
-};
-
-const RegularExpressionInput = {
-    template: `
-        <div>
-            <label for="regular_expression" v-b-tooltip.hover :title="title">{{ label }}</label>
-            <span v-b-popover.html="popoverContent" :title="popoverTitle" class="fa fa-question"></span>
-            <input v-b-tooltip.hover.left :title="title" name="regular_expression" class="rule-regular-expression" type="text" :value="target" @input="$emit('update:target', $event.target.value)" />
-        </div>
-    `,
-    props: {
-        target: {
-            required: true,
-        },
-    },
-    computed: {
-        label() {
-            return _l("Regular Expression");
-        },
-        title() {
-            return _l("Enter a regular expression.");
-        },
-        popoverTitle() {
-            return _l("Regular Expressions");
-        },
-        popoverContent() {
-            return _l(
-                `Regular expressions are patterns used to match character combinations in strings. This input accepts Python-style regular expressions, find more information about these in <a href="https://pythonforbiologists.com/regular-expressions/">this Python for Biologists tutorial</a>.`
-            );
-        },
-    },
-};
-
-const RuleDisplay = {
-    template: `
-        <li class="rule">
-            <span class="rule-display">
-                <span class="mr-1">{{ title }}</span>
-                <span v-b-tooltip.hover :title="editTitle" class="fa fa-edit mr-1" @click="edit"></span>
-                <span v-b-tooltip.hover :title="removeTitle" class="fa fa-times map" @click="remove"></span>
-            </span>
-            <span class="rule-warning" v-if="rule.warn">
-                {{ rule.warn }}
-            </span>
-            <span class="rule-error" v-if="rule.error">
-                <span class="alert-message">{{ rule.error }}</span>
-            </span>
-        </li>
-    `,
-    props: {
-        rule: {
-            required: true,
-            type: Object,
-        },
-        colHeaders: {
-            type: Array,
-            required: true,
-        },
-    },
-    computed: {
-        title() {
-            const ruleType = this.rule.type;
-            return RULES[ruleType].display(this.rule, this.colHeaders);
-        },
-        editTitle() {
-            return _l("Edit this rule.");
-        },
-        removeTitle() {
-            return _l("Remove this rule.");
-        },
-    },
-    methods: {
-        edit() {
-            this.$emit("edit");
-        },
-        remove() {
-            this.$emit("remove");
-        },
-    },
-};
-
-const IdentifierDisplay = {
-    template: `
-      <li class="rule">
-        <span v-b-tooltip.hover :title="help">Set {{ columnsLabel }} as {{ typeDisplay }}</span>
-        <span v-b-tooltip.hover :title="titleEdit" class="fa fa-edit" @click="edit"></span>
-        <span v-b-tooltip.hover :title="titleRemove" class="fa fa-times" @click="remove"></span>
-      </li>
-    `,
-    props: {
-        type: {
-            type: String,
-            required: true,
-        },
-        columns: {
-            required: true,
-        },
-        colHeaders: {
-            type: Array,
-            required: true,
-        },
-    },
-    methods: {
-        remove() {
-            this.$emit("remove");
-        },
-        edit() {
-            this.$emit("edit");
-        },
-    },
-    computed: {
-        typeDisplay() {
-            return MAPPING_TARGETS[this.type].label;
-        },
-        help() {
-            return MAPPING_TARGETS[this.type].help || "";
-        },
-        titleEdit() {
-            return _l("Edit column definition");
-        },
-        titleRemove() {
-            return _l("Remove this column definition");
-        },
-        columnsLabel() {
-            return RuleDefs.columnDisplay(this.columns, this.colHeaders);
-        },
-    },
-};
-
-const RuleTargetComponent = {
-    template: `<a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{title}}</a>`,
-    props: {
-        ruleType: {
-            type: String,
-            required: true,
-        },
-        builder: {
-            required: true,
-        },
-    },
-    computed: {
-        linkClassName() {
-            return "rule-link-" + this.ruleType.replace(/_/g, "-");
-        },
-        title() {
-            return RULES[this.ruleType].title;
-        },
-    },
-};
-
-const RuleComponent = {
-    template: `
-    <div v-if="ruleType == displayRuleType" class="rule-editor" :class="typeToClass">
-        <slot></slot>
-        <div class="buttons rule-edit-buttons d-flex justify-content-end">
-           <button type="button" class="btn rule-editor-cancel mr-1" @click="cancel">{{ cancelLabel }}</button>
-           <button type="button" class="btn btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
-        </div>
-    </div>`,
-    data: function () {
-        return {
-            applyLabel: _l("Apply"),
-            cancelLabel: _l("Cancel"),
-        };
-    },
-    props: {
-        ruleType: {
-            type: String,
-            required: true,
-        },
-        displayRuleType: {
-            required: true,
-        },
-        builder: {
-            required: true,
-        },
-    },
-    methods: {
-        cancel() {
-            this.builder.displayRuleType = null;
-        },
-        okay() {
-            this.builder.handleRuleSave(this.ruleType);
-            this.cancel();
-        },
-    },
-    computed: {
-        typeToClass() {
-            return "rule-edit-" + this.ruleType.replace(/_/g, "-");
-        },
-    },
-};
+     
 
 const StateDiv = {
     template: `

From 379ceee29ca9bdbea6fcaf220044185667ba20c7 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Wed, 8 Apr 2020 18:11:55 -0400
Subject: [PATCH 02/10] fixing a typo

---
 .../scripts/components/RuleBuilder/RuleTargetComponent.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
index ec3e7dd890d..d7358ce8a51 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    template: `<a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{title}}</a>`,
+    <a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{title}}</a>
 </template>
 
 <script>

From 86266dfccab6f30ea8ed71ee8520cbf8ab43329c Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Thu, 9 Apr 2020 10:23:43 -0400
Subject: [PATCH 03/10] refactored additional classes

---
 .../RuleBuilder/RuleModalFooter.vue           | 10 ++++++
 .../RuleBuilder/RuleModalHeader.vue           |  3 ++
 .../RuleBuilder/RuleModalMiddle.vue           |  3 ++
 .../components/RuleBuilder/StateDiv.vue       |  5 +++
 .../components/RuleCollectionBuilder.vue      | 32 +++----------------
 5 files changed, 25 insertions(+), 28 deletions(-)
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
 create mode 100644 client/galaxy/scripts/components/RuleBuilder/StateDiv.vue

diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
new file mode 100644
index 00000000000..6cbf2db28c4
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="rule-footer footer flex-row no-flex">
+        <slot name="inputs"></slot>
+        <div class="actions clear vertically-spaced">
+            <div class="main-options float-right">
+                <slot></slot>
+            </div>
+        </div>
+    </div>`,
+</template>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
new file mode 100644
index 00000000000..ccd1c57734f
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="header flex-row no-flex"><slot></slot></div>
+</template>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
new file mode 100644
index 00000000000..745fa17ceff
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="middle flex-row flex-row-container"><slot></slot></div>
+</template>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue b/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
new file mode 100644
index 00000000000..c7cc9eb1292
--- /dev/null
+++ b/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
@@ -0,0 +1,5 @@
+<template>
+    <div class="rule-collection-creator collection-creator flex-row-container">
+        <slot></slot>
+    </div>
+</template>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleCollectionBuilder.vue b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
index 60e5ed92e53..5f4098da3e6 100644
--- a/client/galaxy/scripts/components/RuleCollectionBuilder.vue
+++ b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
@@ -582,40 +582,16 @@ import RuleDisplay from "components/RuleBuilder/RuleDisplay";
 import IdentifierDisplay from "components/RuleBuilder/IdentifierDisplay";
 import RuleTargetComponent from "components/RuleBuilder/RuleTargetComponent";
 import RuleComponent from "components/RuleBuilder/RuleComponent";
+import RuleModalHeader from "components/RuleBuilder/RuleModalHeader";
+import RuleModalMiddle from "components/RuleBuilder/RuleModalMiddle";
+import RuleModalFooter from "components/RuleBuilder/RuleModalFooter";
+import StateDiv from "components/RuleBuilder/StateDiv";
 
 
 Vue.use(BootstrapVue);
 
 const RULES = RuleDefs.RULES;
 const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
-     
-
-const StateDiv = {
-    template: `
-        <div class="rule-collection-creator collection-creator flex-row-container">
-            <slot></slot>
-        </div>`,
-};
-
-const RuleModalHeader = {
-    template: `<div class="header flex-row no-flex"><slot></slot></div>`,
-};
-
-const RuleModalMiddle = {
-    template: `<div class="middle flex-row flex-row-container"><slot></slot></div>`,
-};
-
-const RuleModalFooter = {
-    template: `
-        <div class="rule-footer footer flex-row no-flex">
-            <slot name="inputs"></slot>
-            <div class="actions clear vertically-spaced">
-                <div class="main-options float-right">
-                    <slot></slot>
-                </div>
-            </div>
-        </div>`,
-};
 
 export default {
     data: function () {

From 34111c5ffe1f916bf6b55f6d7bf62cb5d23491a9 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Thu, 9 Apr 2020 11:03:03 -0400
Subject: [PATCH 04/10] fixing a typo

---
 .../scripts/components/RuleBuilder/RegularExpressionInput.vue    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
index 9437edae40c..f5f453a8fd4 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
@@ -28,5 +28,6 @@ export default {
                 `Regular expressions are patterns used to match character combinations in strings. This input accepts Python-style regular expressions, find more information about these in <a href="https://pythonforbiologists.com/regular-expressions/">this Python for Biologists tutorial</a>.`
             );
         }
+    }
 }
 </script> 
\ No newline at end of file

From d0821eea321b05067549b6f1f234521728b4d149 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Thu, 9 Apr 2020 11:32:02 -0400
Subject: [PATCH 05/10] fixing another typo. This is why you shouldn't copy and
 paste

---
 .../galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue   | 2 +-
 .../scripts/components/RuleBuilder/RuleTargetComponent.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
index 6cbf2db28c4..1cf35a95eb8 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
@@ -6,5 +6,5 @@
                 <slot></slot>
             </div>
         </div>
-    </div>`,
+    </div>
 </template>
\ No newline at end of file
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
index d7358ce8a51..601d12387b0 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -20,6 +20,6 @@ export default {
         title() {
             return RULES[this.ruleType].title;
         },
-    },
+    }
 }
 </script>
\ No newline at end of file

From ae48ebe8660f38fb3ce3b18fd2eac94ebc125b32 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Mon, 13 Apr 2020 09:40:34 -0400
Subject: [PATCH 06/10] adding in imports that were causing an error

---
 .../scripts/components/RuleBuilder/IdentifierDisplay.vue       | 3 +++
 client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue   | 3 +++
 .../scripts/components/RuleBuilder/RuleTargetComponent.vue     | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
index fd5659c73be..7c821e2ae5e 100644
--- a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
@@ -7,6 +7,9 @@
 </template>
 
 <script>
+import RuleDefs from "mvc/rules/rule-definitions";
+MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
+
 export default{
     props: {
         type: {
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
index c51377581f8..f0d4501abaf 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
@@ -16,6 +16,9 @@
 </template>
 
 <script>
+import RuleDefs from "mvc/rules/rule-definitions";
+const RULES = RuleDefs.RULES;
+
 export default {
     props: {
         rule: {
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
index 601d12387b0..d81805c26e8 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -3,6 +3,9 @@
 </template>
 
 <script>
+import RuleDefs from "mvc/rules/rule-definitions";
+const RULES = RuleDefs.RULES;
+
 export default {
     props: {
         ruleType: {

From a982cf4034fa713ca0fbdfa50c711184f86c3614 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Mon, 13 Apr 2020 10:08:41 -0400
Subject: [PATCH 07/10] forgot to declare type

---
 .../galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
index 7c821e2ae5e..9f0b103dc5d 100644
--- a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
@@ -8,7 +8,7 @@
 
 <script>
 import RuleDefs from "mvc/rules/rule-definitions";
-MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
+const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
 
 export default{
     props: {

From 5e544790af2a12a3a88ac1d5caceb1478ce952a6 Mon Sep 17 00:00:00 2001
From: Assunta DeSanto <adesanto@lhup.edu>
Date: Thu, 16 Apr 2020 10:40:17 -0400
Subject: [PATCH 08/10] adding _l and Vue imports where they js_lint indicated
 errors

---
 client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue | 1 +
 .../galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue | 1 +
 .../scripts/components/RuleBuilder/RegularExpressionInput.vue   | 2 ++
 client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue  | 2 ++
 client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue    | 1 +
 .../scripts/components/RuleBuilder/RuleTargetComponent.vue      | 2 +-
 6 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
index 764ab9690bb..a23a929a639 100644
--- a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
@@ -37,6 +37,7 @@
 </template>
 
 <script>
+import Vue from "vue";
 import _l from "utils/localization";
 import Select2 from "components/Select2";
 export default {
diff --git a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
index 9f0b103dc5d..9cfb211924e 100644
--- a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import _l from "utils/localization";
 import RuleDefs from "mvc/rules/rule-definitions";
 const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
 
diff --git a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
index f5f453a8fd4..2cd375bc95d 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import _l from "utils/localization";
+
 export default {
     props: {
         target: {
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
index 826c0fda1c0..cbeacf29977 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import _l from "utils/localization";
+
 export default {
     data: function () {
         return {
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
index f0d4501abaf..d3188159d6c 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import _l from "utils/localization";
 import RuleDefs from "mvc/rules/rule-definitions";
 const RULES = RuleDefs.RULES;
 
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
index d81805c26e8..ef622ae0b28 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{title}}</a>
+    <a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{ title }}</a>
 </template>
 
 <script>

From fe23ee0affaf5ca0880a91da7578d00288aaf017 Mon Sep 17 00:00:00 2001
From: assuntad23 <assuntad@localhost.localdomain>
Date: Fri, 17 Apr 2020 09:35:50 -0400
Subject: [PATCH 09/10] fixed v-for issue on js_lint

---
 .../scripts/components/RuleBuilder/ColumnSelector.vue     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
index a23a929a639..45773eb356d 100644
--- a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
@@ -3,7 +3,7 @@
         <label class="d-flex justify-content-end align-items-center">
             <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
             <div class="mr-1" v-b-tooltip.hover :title="title"><select2 :value="target" @input="handleInput" :multiple="multiple">
-                <option v-for="(col, index) in colHeaders" :value="index">{{ col }}</option>
+                <option v-for="(col, index) in colHeaders" :value="index" :key="col">{{ col }}</option>
             </select2></div>
             <slot></slot>
         </label>
@@ -13,8 +13,8 @@
         <slot></slot>
         <ol>
             <li v-for="(targetEl, index) in target"
-                v-bind:index="index"
-                v-bind:key="targetEl"
+                :index="index"
+                :key="targetEl"
                 class="rule-column-selector-target">
                 {{ colHeaders[targetEl] }}
                 <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
@@ -28,7 +28,7 @@
                 <span class="rule-column-selector-target-select" v-else>
                     <select2 @input="handleAdd" placeholder="Select a column">
                         <option /><!-- empty option selection for placeholder -->
-                        <option v-for="(col, index) in remainingHeaders" :value="index">{{ col }}</option>
+                        <option v-for="(col, index) in remainingHeaders" :value="index" :key="col">{{ col }}</option>
                     </select2>
                 </span>
             </li>

From 3b52d61ee652ad2c37257096f4829e882f94a9b1 Mon Sep 17 00:00:00 2001
From: assuntad23 <assuntad@localhost.localdomain>
Date: Fri, 17 Apr 2020 09:50:07 -0400
Subject: [PATCH 10/10] Fixed minor formatting issues

---
 .../components/RuleBuilder/ColumnSelector.vue | 25 +++++++++++--------
 .../RuleBuilder/IdentifierDisplay.vue         |  8 +++---
 .../RuleBuilder/RegularExpressionInput.vue    | 18 +++++++++----
 .../components/RuleBuilder/RuleComponent.vue  |  6 ++---
 .../components/RuleBuilder/RuleDisplay.vue    |  7 +++---
 .../RuleBuilder/RuleModalFooter.vue           |  2 +-
 .../RuleBuilder/RuleModalHeader.vue           |  2 +-
 .../RuleBuilder/RuleModalMiddle.vue           |  2 +-
 .../RuleBuilder/RuleTargetComponent.vue       | 14 ++++++++---
 .../components/RuleBuilder/StateDiv.vue       |  2 +-
 .../components/RuleCollectionBuilder.vue      |  1 -
 11 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
index 45773eb356d..195d777edc3 100644
--- a/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/ColumnSelector.vue
@@ -2,9 +2,11 @@
     <div class="rule-column-selector" v-if="!multiple || !ordered">
         <label class="d-flex justify-content-end align-items-center">
             <span class="mr-auto" v-b-tooltip.hover :title="help">{{ label }}</span>
-            <div class="mr-1" v-b-tooltip.hover :title="title"><select2 :value="target" @input="handleInput" :multiple="multiple">
-                <option v-for="(col, index) in colHeaders" :value="index" :key="col">{{ col }}</option>
-            </select2></div>
+            <div class="mr-1" v-b-tooltip.hover :title="title">
+                <select2 :value="target" @input="handleInput" :multiple="multiple">
+                    <option v-for="(col, index) in colHeaders" :value="index" :key="col">{{ col }}</option>
+                </select2>
+            </div>
             <slot></slot>
         </label>
     </div>
@@ -12,14 +14,15 @@
         <span>{{ label }}</span>
         <slot></slot>
         <ol>
-            <li v-for="(targetEl, index) in target"
-                :index="index"
-                :key="targetEl"
-                class="rule-column-selector-target">
+            <li v-for="(targetEl, index) in target" :index="index" :key="targetEl" class="rule-column-selector-target">
                 {{ colHeaders[targetEl] }}
                 <span class="fa fa-times rule-column-selector-target-remove" @click="handleRemove(index)"></span>
                 <span class="fa fa-arrow-up rule-column-selector-up" v-if="index !== 0" @click="moveUp(index)"></span>
-                <span class="fa fa-arrow-down rule-column-selector-down" v-if="index < target.length - 1" @click="moveUp(index + 1)"></span>
+                <span
+                    class="fa fa-arrow-down rule-column-selector-down"
+                    v-if="index < target.length - 1"
+                    @click="moveUp(index + 1)"
+                ></span>
             </li>
             <li v-if="this.target.length < this.colHeaders.length">
                 <span class="rule-column-selector-target-add" v-if="!orderedEdit">
@@ -130,6 +133,6 @@ export default {
             Vue.set(this.target, value - 1, this.target[value]);
             Vue.set(this.target, value, swapVal);
         },
-    }
-}
-</script> 
\ No newline at end of file
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
index 9cfb211924e..54f1ce1ca4b 100644
--- a/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/IdentifierDisplay.vue
@@ -11,7 +11,7 @@ import _l from "utils/localization";
 import RuleDefs from "mvc/rules/rule-definitions";
 const MAPPING_TARGETS = RuleDefs.MAPPING_TARGETS;
 
-export default{
+export default {
     props: {
         type: {
             type: String,
@@ -49,6 +49,6 @@ export default{
         columnsLabel() {
             return RuleDefs.columnDisplay(this.columns, this.colHeaders);
         },
-    }
-}
-</script>
\ No newline at end of file
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
index 2cd375bc95d..36f65600040 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RegularExpressionInput.vue
@@ -2,7 +2,15 @@
     <div>
         <label for="regular_expression" v-b-tooltip.hover :title="title">{{ label }}</label>
         <span v-b-popover.html="popoverContent" :title="popoverTitle" class="fa fa-question"></span>
-        <input v-b-tooltip.hover.left :title="title" name="regular_expression" class="rule-regular-expression" type="text" :value="target" @input="$emit('update:target', $event.target.value)" />
+        <input
+            v-b-tooltip.hover.left
+            :title="title"
+            name="regular_expression"
+            class="rule-regular-expression"
+            type="text"
+            :value="target"
+            @input="$emit('update:target', $event.target.value)"
+        />
     </div>
 </template>
 
@@ -29,7 +37,7 @@ export default {
             return _l(
                 `Regular expressions are patterns used to match character combinations in strings. This input accepts Python-style regular expressions, find more information about these in <a href="https://pythonforbiologists.com/regular-expressions/">this Python for Biologists tutorial</a>.`
             );
-        }
-    }
-}
-</script> 
\ No newline at end of file
+        },
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
index cbeacf29977..474e6cbc4a4 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleComponent.vue
@@ -2,8 +2,8 @@
     <div v-if="ruleType == displayRuleType" class="rule-editor" :class="typeToClass">
         <slot></slot>
         <div class="buttons rule-edit-buttons d-flex justify-content-end">
-           <button type="button" class="btn rule-editor-cancel mr-1" @click="cancel">{{ cancelLabel }}</button>
-           <button type="button" class="btn btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
+            <button type="button" class="btn rule-editor-cancel mr-1" @click="cancel">{{ cancelLabel }}</button>
+            <button type="button" class="btn btn-primary rule-editor-ok" @click="okay">{{ applyLabel }}</button>
         </div>
     </div>
 </template>
@@ -44,5 +44,5 @@ export default {
             return "rule-edit-" + this.ruleType.replace(/_/g, "-");
         },
     },
-}
+};
 </script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
index d3188159d6c..1d52daf8011 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleDisplay.vue
@@ -1,4 +1,3 @@
-
 <template>
     <li class="rule">
         <span class="rule-display">
@@ -50,6 +49,6 @@ export default {
         remove() {
             this.$emit("remove");
         },
-    }
-}
-</script>
\ No newline at end of file
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
index 1cf35a95eb8..fc2a3bfe739 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalFooter.vue
@@ -7,4 +7,4 @@
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
index ccd1c57734f..9ea12aefa61 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalHeader.vue
@@ -1,3 +1,3 @@
 <template>
     <div class="header flex-row no-flex"><slot></slot></div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue b/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
index 745fa17ceff..35fca19d00a 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleModalMiddle.vue
@@ -1,3 +1,3 @@
 <template>
     <div class="middle flex-row flex-row-container"><slot></slot></div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
index ef622ae0b28..aeb4d07d1df 100644
--- a/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/RuleTargetComponent.vue
@@ -1,5 +1,11 @@
 <template>
-    <a class="rule-link dropdown-item" href="javascript:void(0)" :class="linkClassName" @click="builder.addNewRule(ruleType)">{{ title }}</a>
+    <a
+        class="rule-link dropdown-item"
+        href="javascript:void(0)"
+        :class="linkClassName"
+        @click="builder.addNewRule(ruleType)"
+        >{{ title }}</a
+    >
 </template>
 
 <script>
@@ -23,6 +29,6 @@ export default {
         title() {
             return RULES[this.ruleType].title;
         },
-    }
-}
-</script>
\ No newline at end of file
+    },
+};
+</script>
diff --git a/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue b/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
index c7cc9eb1292..2f06d8daf7f 100644
--- a/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
+++ b/client/galaxy/scripts/components/RuleBuilder/StateDiv.vue
@@ -2,4 +2,4 @@
     <div class="rule-collection-creator collection-creator flex-row-container">
         <slot></slot>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/client/galaxy/scripts/components/RuleCollectionBuilder.vue b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
index 5f4098da3e6..ee2162d7cb8 100644
--- a/client/galaxy/scripts/components/RuleCollectionBuilder.vue
+++ b/client/galaxy/scripts/components/RuleCollectionBuilder.vue
@@ -587,7 +587,6 @@ import RuleModalMiddle from "components/RuleBuilder/RuleModalMiddle";
 import RuleModalFooter from "components/RuleBuilder/RuleModalFooter";
 import StateDiv from "components/RuleBuilder/StateDiv";
 
-
 Vue.use(BootstrapVue);
 
 const RULES = RuleDefs.RULES;