diff --git a/client/src/components/RuleBuilder/SaveRules.vue b/client/src/components/RuleBuilder/SaveRules.vue
new file mode 100644
index 00000000000..feec0989f6d
--- /dev/null
+++ b/client/src/components/RuleBuilder/SaveRules.vue
@@ -0,0 +1,54 @@
+<script>
+import { getGalaxyInstance } from "app";
+export default {
+    data: function () {
+        return {
+            savedRules: [],
+        };
+    },
+    created() {
+        let counter = 0;
+        if (this.user == null) {
+            return;
+        } else {
+            for (let i = 0; i < localStorage.length; i++) {
+                if (localStorage.key(i).startsWith(this.prefix + this.user)) {
+                    var savedSession = localStorage.getItem(localStorage.key(i));
+                    if (savedSession) {
+                        var key = localStorage.key(i);
+                        this.savedRules.push({
+                            dateTime: key.substring(this.prefix.length + this.user.length),
+                            rule: savedSession,
+                        });
+                    }
+                    counter++;
+                    if (counter == 10) {
+                        break;
+                    }
+                }
+            }
+        }
+    },
+    props: {
+        prefix: {
+            type: String,
+            default: "galaxy_rules_",
+        },
+        user: {
+            type: String,
+            default: getGalaxyInstance() ? getGalaxyInstance().user.id : "",
+        },
+    },
+    methods: {
+        saveSession(jsonRulesString) {
+            var dateTimeString = new Date().toISOString();
+            var key = this.prefix + this.user + dateTimeString;
+            localStorage.setItem(key, jsonRulesString);
+            this.savedRules.push({
+                dateTime: dateTimeString,
+                rule: jsonRulesString,
+            });
+        },
+    },
+};
+</script>
diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.test.js b/client/src/components/RuleBuilder/SavedRulesSelector.test.js
index 6093cce9d74..483398804de 100644
--- a/client/src/components/RuleBuilder/SavedRulesSelector.test.js
+++ b/client/src/components/RuleBuilder/SavedRulesSelector.test.js
@@ -12,6 +12,7 @@ describe("SavedRulesSelector", () => {
             propsData: {
                 // Add a unique prefix for this test run so the test is not affected by local storage values
                 prefix: "test_prefix_" + new Date().toISOString() + "_",
+                savedRules: [],
             },
             attachTo: getNewAttachNode(),
         });
@@ -19,8 +20,6 @@ describe("SavedRulesSelector", () => {
     });
 
     afterEach(async () => {
-        wrapper.savedRules = [];
-
         await Vue.nextTick();
     });
 
@@ -30,7 +29,6 @@ describe("SavedRulesSelector", () => {
     });
 
     it("should emit a click event when a session is clicked", async () => {
-        wrapper.setProps({ user: "test_user" });
         const testRules = {
             rules: [
                 {
@@ -47,8 +45,10 @@ describe("SavedRulesSelector", () => {
                 },
             ],
         };
-
-        wrapper.vm.saveSession(testRules);
+        wrapper.setProps({
+            user: "test_user",
+            savedRules: [testRules],
+        });
         await Vue.nextTick();
         const sessions = wrapper.findAll("div.dropdown-menu > a.saved-rule-item");
         expect(sessions.length > 0).toBeTruthy();
diff --git a/client/src/components/RuleBuilder/SavedRulesSelector.vue b/client/src/components/RuleBuilder/SavedRulesSelector.vue
index ab0f20c1fb3..1c052c93548 100644
--- a/client/src/components/RuleBuilder/SavedRulesSelector.vue
+++ b/client/src/components/RuleBuilder/SavedRulesSelector.vue
@@ -25,47 +25,18 @@ import Vue from "vue";
 import _l from "utils/localization";
 import BootstrapVue from "bootstrap-vue";
 import moment from "moment";
-import { getGalaxyInstance } from "app";
 
 Vue.use(BootstrapVue);
 export default {
     data: function () {
         return {
             savedRulesMenu: _l("Recently used rules"),
-            savedRules: [],
         };
     },
-    created() {
-        let counter = 0;
-        if (this.user == null) {
-            return;
-        } else {
-            for (let i = 0; i < localStorage.length; i++) {
-                if (localStorage.key(i).startsWith(this.prefix + this.user)) {
-                    var savedSession = localStorage.getItem(localStorage.key(i));
-                    if (savedSession) {
-                        var key = localStorage.key(i);
-                        this.savedRules.push({
-                            dateTime: key.substring(this.prefix.length + this.user.length),
-                            rule: savedSession,
-                        });
-                    }
-                    counter++;
-                    if (counter == 10) {
-                        break;
-                    }
-                }
-            }
-        }
-    },
     props: {
-        prefix: {
-            type: String,
-            default: "galaxy_rules_",
-        },
-        user: {
-            type: String,
-            default: getGalaxyInstance() ? getGalaxyInstance().user.id : "",
+        savedRules: {
+            type: Array,
+            required: true,
         },
     },
     computed: {
@@ -77,15 +48,6 @@ export default {
         formatDate(dateTime) {
             return moment.utc(dateTime).from(moment().utc());
         },
-        saveSession(jsonRulesString) {
-            var dateTimeString = new Date().toISOString();
-            var key = this.prefix + this.user + dateTimeString;
-            localStorage.setItem(key, jsonRulesString);
-            this.savedRules.push({
-                dateTime: dateTimeString,
-                rule: jsonRulesString,
-            });
-        },
     },
 };
 </script>
diff --git a/client/src/components/RuleCollectionBuilder.vue b/client/src/components/RuleCollectionBuilder.vue
index 65128443031..409e5bfa3dc 100644
--- a/client/src/components/RuleCollectionBuilder.vue
+++ b/client/src/components/RuleCollectionBuilder.vue
@@ -347,7 +347,11 @@
                                     :title="titleViewSource"
                                     @click="viewSource"
                                 ></span>
-                                <saved-rules-selector ref="savedRulesSelector" @update-rules="restoreRules" />
+                                <saved-rules-selector
+                                    ref="savedRulesSelector"
+                                    @update-rules="restoreRules"
+                                    :savedRules="this.savedRules"
+                                />
                             </span>
                             <div v-if="jaggedData" class="rule-warning">
                                 Rows contain differing numbers of columns, there was likely a problem parsing your data.
@@ -608,6 +612,7 @@ import RuleModalMiddle from "components/RuleBuilder/RuleModalMiddle";
 import RuleModalFooter from "components/RuleBuilder/RuleModalFooter";
 import StateDiv from "components/RuleBuilder/StateDiv";
 import SavedRulesSelector from "components/RuleBuilder/SavedRulesSelector";
+import SaveRules from "components/RuleBuilder/SaveRules";
 
 Vue.use(BootstrapVue);
 
@@ -1071,6 +1076,7 @@ export default {
             return this.hotData.colHeadersPerRule;
         },
     },
+    mixins: [SaveRules],
     methods: {
         restoreRules(event) {
             const json = JSON.parse(event);
@@ -1275,7 +1281,7 @@ export default {
                 this.state = "error";
                 return;
             }
-            this.$refs.savedRulesSelector.saveSession(JSON.stringify(asJson));
+            this.saveSession(JSON.stringify(asJson));
             this.state = "wait";
             const name = this.collectionName;
             const collectionType = this.collectionType;