Revise history import and export.

- Provide a lot more context on what is and has happened to users during both import and export process.
- Allow import and export to galaxy file plugins.

client/src/components/FilesDialog/FilesInput.vue

@@ -0,0 +1,54 @@
+<template>
+    <b-form-input v-model="localValue" :placeholder="placeholder" @click="selectFile"> </b-form-input>
+</template>
+
+<script>
+import { BFormInput } from "bootstrap-vue";
+import { filesDialog } from "utils/data";
+
+export default {
+    components: { BFormInput },
+    props: {
+        value: {
+            type: String,
+        },
+        mode: {
+            type: String,
+            default: "file",
+        },
+        requireWritable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            localValue: this.value,
+        };
+    },
+    computed: {
+        placeholder() {
+            return `Click to select ${this.mode}`;
+        },
+    },
+    methods: {
+        selectFile() {
+            const props = {
+                mode: this.mode,
+                requireWritable: this.requireWritable,
+            };
+            filesDialog((selected) => {
+                this.localValue = selected?.url;
+            }, props);
+        },
+    },
+    watch: {
+        localValue(newValue) {
+            this.$emit("input", newValue);
+        },
+        value(newValue) {
+            this.localValue = newValue;
+        },
+    },
+};
+</script>

client/src/components/History/HistoryDetails.vue

@@ -96,7 +96,7 @@
                     key="export-history-to-file"
                     title="Export History to File"
                     icon="fas fa-file-archive"
-                    @click="iframeRedirect('/history/export_archive?preview=True')"
+                    @click="backboneRoute(`/histories/${history.id}/export`)"
                 />
             </PriorityMenu>
 

client/src/components/HistoryExport/ExportLink.vue

@@ -0,0 +1,61 @@
+<template>
+    <span>
+        <b
+            ><a :href="link">{{ link }}</a></b
+        >
+        <font-awesome-icon
+            v-b-tooltip.hover
+            title="Copy export URL to your clipboard"
+            icon="link"
+            style="cursor: pointer;"
+            @click="copyUrl"
+        />
+        <i
+            title="Information about when the history export was generated is included in the job details. Additionally, if there are issues with export, the job details may help figure out the underlying problem or communicate issues to your Galaxy administrator."
+        >
+            (<a href="#" @click="showDetails">view job details</a>)
+        </i>
+        <b-modal v-model="details" scrollable ok-only>
+            <job-information :job_id="historyExport.job_id" :include-times="true" />
+        </b-modal>
+    </span>
+</template>
+
+<script>
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faLink } from "@fortawesome/free-solid-svg-icons";
+import { BModal } from "bootstrap-vue";
+import { copy } from "utils/clipboard";
+import JobInformation from "components/JobInformation/JobInformation.vue";
+
+library.add(faLink);
+
+export default {
+    components: { BModal, JobInformation, FontAwesomeIcon },
+    props: {
+        historyExport: {
+            type: Object,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            details: false,
+        };
+    },
+    computed: {
+        link() {
+            return this.historyExport.external_download_permanent_url;
+        },
+    },
+    methods: {
+        showDetails() {
+            this.details = true;
+        },
+        copyUrl() {
+            copy(this.latestExportUrl, "Export URL copied to your clipboard");
+        },
+    },
+};
+</script>

client/src/components/HistoryExport/Index.test.js

@@ -0,0 +1,18 @@
+import { shallowMount } from "@vue/test-utils";
+import Index from "./Index.vue";
+import { getLocalVue } from "jest/helpers";
+
+const localVue = getLocalVue();
+
+describe("Index.vue", () => {
+    it("should render tabs", () => {
+        // just make sure the component renders to catch obvious big errors
+        const wrapper = shallowMount(Index, {
+            propsData: {
+                historyId: "test_id",
+            },
+            localVue,
+        });
+        expect(wrapper.exists("b-tabs-stub")).toBeTruthy();
+    });
+});

client/src/components/HistoryExport/Index.vue

@@ -0,0 +1,39 @@
+<template>
+    <span>
+        <h2>Export history archive</h2>
+        <b-card no-body>
+            <b-tabs pills card vertical>
+                <b-tab title="to a link" active>
+                    <b-card-text>
+                        <ToLink :history-id="historyId" />
+                    </b-card-text>
+                </b-tab>
+                <b-tab title="to a remote file">
+                    <ToRemoteFile :history-id="historyId" />
+                </b-tab>
+            </b-tabs>
+        </b-card>
+    </span>
+</template>
+
+<script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+import ToLink from "./ToLink.vue";
+import ToRemoteFile from "./ToRemoteFile.vue";
+
+Vue.use(BootstrapVue);
+
+export default {
+    components: {
+        ToLink,
+        ToRemoteFile,
+    },
+    props: {
+        historyId: {
+            type: String,
+            required: true,
+        },
+    },
+};
+</script>

client/src/components/HistoryExport/ToLink.test.js

@@ -0,0 +1,64 @@
+import { shallowMount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import ToLink from "./ToLink.vue";
+import flushPromises from "flush-promises";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import { waitOnJob } from "components/JobStates/wait";
+
+const localVue = getLocalVue();
+const TEST_HISTORY_ID = "hist1235";
+const TEST_EXPORTS_URL = `/api/histories/${TEST_HISTORY_ID}/exports`;
+const TEST_JOB_ID = "test1234job";
+
+jest.mock("components/JobStates/wait");
+
+describe("ToLink.vue", () => {
+    let axiosMock;
+    let wrapper;
+
+    async function mountWithInitialExports(exports) {
+        axiosMock.onGet(TEST_EXPORTS_URL).reply(200, exports);
+        wrapper = shallowMount(ToLink, {
+            propsData: {
+                historyId: TEST_HISTORY_ID,
+            },
+            localVue,
+        });
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find("loading-span-stub").exists()).toBeTruthy();
+        await flushPromises();
+    }
+
+    beforeEach(async () => {
+        axiosMock = new MockAdapter(axios);
+    });
+
+    it("should display a link if no exports ever generated", async () => {
+        await mountWithInitialExports([]);
+        expect(wrapper.find(".export-link")).toBeTruthy();
+        expect(wrapper.find("loading-span-stub").exists()).toBeFalsy(); // loading span gone
+    });
+
+    it("should start polling if latest export is preparing", async () => {
+        let then = null;
+        waitOnJob.mockReturnValue(
+            new Promise((then_) => {
+                then = then_;
+            })
+        );
+        await mountWithInitialExports([
+            {
+                preparing: true,
+                job_id: TEST_JOB_ID,
+            },
+        ]);
+        expect(then).toBeTruthy();
+        expect(wrapper.vm.waitingOnJob).toBeTruthy();
+        expect(wrapper.find("loading-span-stub").exists()).toBeTruthy();
+    });
+
+    afterEach(() => {
+        axiosMock.restore();
+    });
+});