Merge pull request galaxyproject#16040 from ElectronicBlueberry/histo…

…ry-selector

New history selector with quick actions

client/docs/composables.md

@@ -16,7 +16,7 @@ Example: accessing the current user from the store
 
 ```vue
 <script setup>
-import { useCurrentUser } from "composables/user";
+import { useCurrentUser } from "@/composables/user";
 
 const { currentUser } = useCurrentUser();
 </script>
@@ -30,7 +30,7 @@ Composables are not limited to the composition api. This is the same example fro
 
 ```vue
 <script>
-import { useCurrentUser } from "composables/user";
+import { useCurrentUser } from "@/composables/user";
 
 export default {
     setup() {
@@ -75,7 +75,7 @@ const store = new Vuex.Store({
 The second option is to mock the composable:
 
 ```js
-import { useCurrentUser } from "composables/user";
+import { useCurrentUser } from "@/composables/user";
 
 jest.mock("composables/user");
 useCurrentUser.mockReturnValue({
@@ -87,13 +87,13 @@ While simpler in this example, you may need to manually mock more return values
 
 ## Using Composables for more than Stores
 
-Composables can be of great use to extract any reactive code from your components. For an example of this, take a look at [useFilterObjectArray](https://github.com/galaxyproject/galaxy/blob/dev/client/src/composables/utils/filter.js).
+Composables can be of great use to extract any reactive code from your components. For an example of this, take a look at [useFilterObjectArray](https://github.com/galaxyproject/galaxy/blob/dev/client/src/composables/filter/filter.ts).
 
 Usage:
 
 ```vue
 <script setup>
-import { useFilterObjectArray } from "composables/utils/filter";
+import { useFilterObjectArray } from "@/composables/filter/filter";
 
 const filteredArray = useFilterObjectArray(someReactiveArray, searchValue, ["name", "description"]);
 </script>

client/src/components/AvailableDatatypes/AvailableDatatypes.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useDetailedDatatypes, type DetailedDatatypes } from "@/composables/datatypes";
-import { useFilterObjectArray } from "@/composables/utils/filter";
+import { useFilterObjectArray } from "@/composables/filter";
 import DelayedInput from "@/components/Common/DelayedInput.vue";
 
 const filter = ref("");

client/src/components/History/CurrentHistory/HistoryNavigation.test.js

@@ -6,6 +6,8 @@ import HistoryNavigation from "./HistoryNavigation";
 
 const localVue = getLocalVue();
 
+jest.mock("@/composables/filter");
+
 // all options
 const expectedOptions = [
     "Show Histories Side-by-Side",

client/src/components/History/CurrentHistory/HistoryNavigation.vue

@@ -138,6 +138,7 @@
             id="selector-history-modal"
             :histories="histories"
             :current-history-id="history.id"
+            :additional-options="['center', 'multi']"
             @selectHistory="$emit('setCurrentHistory', $event)" />
 
         <CopyModal id="copy-current-history-modal" :history="history" />

client/src/components/History/Modals/SelectorModal.test.js

@@ -4,6 +4,9 @@ import flushPromises from "flush-promises";
 import SelectorModal from "./SelectorModal";
 import { getLocalVue } from "tests/jest/helpers";
 import { useHistoryStore } from "stores/historyStore";
+import { BListGroupItem } from "bootstrap-vue";
+
+jest.mock("@/composables/filter");
 
 const localVue = getLocalVue();
 
@@ -58,9 +61,14 @@ describe("History SelectorModal.vue", () => {
     it("paginates the histories", async () => {
         await mountWith(PROPS_WITH_10_HISTORIES);
 
-        const displayedRows = wrapper.findAll("tbody > tr").wrappers;
+        const displayedRows = wrapper.findAllComponents(BListGroupItem).wrappers;
         expect(displayedRows.length).toBe(3);
-        expect(wrapper.vm.histories.length).toBe(10);
+
+        // filter out all page buttons. e.g [1] [2] [3] etc...
+        const pages = wrapper
+            .findAll(".pagination > .page-item")
+            .wrappers.filter((item) => item.text().match(/[0-9]+/));
+        expect(pages.length).toBe(4);
     });
 
     it("emits selectHistory with the correct history ID when a row is clicked", async () => {
@@ -90,9 +98,10 @@ describe("History SelectorModal.vue", () => {
             const targetRow2 = wrapper.find(`[data-pk="${targetHistoryId2}"]`);
             await targetRow2.trigger("click");
 
-            expect(wrapper.vm.selectedHistories.length).toBe(2);
+            const selectedHistories = wrapper.findAll(".list-group-item.active").wrappers;
+            expect(selectedHistories.length).toBe(2);
 
-            const button = wrapper.find(".btn-primary");
+            const button = wrapper.find("footer > .btn-primary");
 
             await button.trigger("click");