Merge pull request #11054 from jmchilton/history_export_ui

Revise user experience for history import and export.

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,33 @@
+import { shallowMount } from "@vue/test-utils";
+import Index from "./Index.vue";
+import { getLocalVue } from "jest/helpers";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
+
+const TEST_PLUGINS_URL = "/api/remote_files/plugins";
+
+const localVue = getLocalVue();
+
+describe("Index.vue", () => {
+    let axiosMock;
+
+    beforeEach(() => {
+        axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(TEST_PLUGINS_URL).reply(200, [{ id: "foo", writable: false }]);
+    });
+
+    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();
+    });
+
+    afterEach(() => {
+        axiosMock.restore();
+    });
+});

client/src/components/HistoryExport/Index.vue

@@ -0,0 +1,67 @@
+<template>
+    <span>
+        <h2>Export history archive</h2>
+        <span v-if="initializing">
+            <loading-span message="Loading server configuration." />
+        </span>
+        <span v-else-if="hasWritableFileSources">
+            <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>
+        <span v-else>
+            <ToLink :history-id="historyId" />
+        </span>
+    </span>
+</template>
+
+<script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+import ToLink from "./ToLink.vue";
+import ToRemoteFile from "./ToRemoteFile.vue";
+import { Services } from "components/FilesDialog/services";
+import LoadingSpan from "components/LoadingSpan";
+
+Vue.use(BootstrapVue);
+
+export default {
+    components: {
+        LoadingSpan,
+        ToLink,
+        ToRemoteFile,
+    },
+    props: {
+        historyId: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            initializing: true,
+            hasWritableFileSources: false,
+        };
+    },
+    async mounted() {
+        await this.initialize();
+    },
+    methods: {
+        async initialize() {
+            const fileSources = await new Services().getFileSources();
+            this.hasWritableFileSources = fileSources.some((fs) => fs.writable);
+            console.log(fileSources);
+            this.initializing = false;
+        },
+    },
+};
+</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();
+    });
+});