Merge pull request #15149 from ElectronicBlueberry/history-import-notice

Warning when importing published history by URL

client/src/components/HistoryImport.test.js

@@ -1,5 +1,5 @@
-import { shallowMount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
+import { mount } from "@vue/test-utils";
+import { getLocalVue, wait } from "tests/jest/helpers";
 import HistoryImport from "./HistoryImport.vue";
 import MockAdapter from "axios-mock-adapter";
 import axios from "axios";
@@ -21,7 +21,7 @@ describe("HistoryImport.vue", () => {
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
         axiosMock.onGet(TEST_PLUGINS_URL).reply(200, [{ id: "foo", writable: false }]);
-        wrapper = shallowMount(HistoryImport, {
+        wrapper = mount(HistoryImport, {
             propsData: {},
             localVue,
         });
@@ -76,6 +76,23 @@ describe("HistoryImport.vue", () => {
         expect(wrapper.vm.complete).toBeTruthy();
     });
 
+    it("warns about shared history imports", async () => {
+        const input = wrapper.find("input[type=url]");
+        await input.setValue("https://usegalaxy.org/u/some_user/h/exported_history");
+
+        await wait(210);
+
+        const alert = wrapper.find(".alert");
+        expect(alert.classes()).toContain("alert-warning");
+        expect(alert.text()).toContain(
+            "It looks like you are trying to import a published history from another galaxy instance"
+        );
+
+        // Link to the GTN
+        const link = alert.find("a");
+        expect(link.text()).toContain("GTN");
+    });
+
     afterEach(() => {
         axiosMock.restore();
     });

client/src/components/HistoryImport.vue

@@ -1,8 +1,7 @@
 <template>
-    <b-card body-class="history-import-component" aria-labelledby="history-import-heading">
-        <template slot="header">
-            <h1 id="history-import-heading" class="mb-0 h-sm">Import a history from an archive</h1>
-        </template>
+    <div class="history-import-component" aria-labelledby="history-import-heading">
+        <h1 id="history-import-heading" class="h-lg">Import a history from an archive</h1>
+
         <b-alert v-if="errorMessage" variant="danger" dismissible show @dismissed="errorMessage = null">
             {{ errorMessage }}
             <JobError
@@ -11,6 +10,7 @@
                 header="History import job ended in error"
                 :job="jobError" />
         </b-alert>
+
         <div v-if="initializing">
             <loading-span message="Loading server configuration." />
         </div>
@@ -45,23 +45,35 @@
                         </b-form-radio>
                     </b-form-radio-group>
                 </b-form-group>
-                <b-form-group v-if="importType == 'externalUrl'" label="Archived History URL">
+
+                <b-form-group v-if="importType === 'externalUrl'" label="Archived History URL">
+                    <b-alert v-if="showImportUrlWarning" variant="warning" show>
+                        It looks like you are trying to import a published history from another galaxy instance. You can
+                        only import histories via an archive URL.
+                        <ExternalLink
+                            href="https://training.galaxyproject.org/training-material/faqs/galaxy/histories_transfer_entire_histories_from_one_galaxy_server_to_another.html">
+                            Read more on the GTN
+                        </ExternalLink>
+                    </b-alert>
+
                     <b-form-input v-model="sourceURL" type="url" />
                 </b-form-group>
-                <b-form-group v-if="importType == 'upload'" label="Archived History File">
+                <b-form-group v-else-if="importType === 'upload'" label="Archived History File">
                     <b-form-file v-model="sourceFile" />
                 </b-form-group>
-                <b-form-group v-show="importType == 'remoteFilesUri'" label="Remote File">
+                <b-form-group v-show="importType === 'remoteFilesUri'" label="Remote File">
                     <!-- using v-show so we can have a persistent ref and launch dialog on select -->
                     <files-input ref="filesInput" v-model="sourceRemoteFilesUri" />
                 </b-form-group>
-                <b-button class="import-button" variant="primary" type="submit" :disabled="!importReady"
-                    >Import history</b-button
-                >
+
+                <b-button class="import-button" variant="primary" type="submit" :disabled="!importReady">
+                    Import history
+                </b-button>
             </b-form>
         </div>
-    </b-card>
+    </div>
 </template>
+
 <script>
 import { getAppRoot } from "onload/loadConfig";
 import axios from "axios";
@@ -76,6 +88,9 @@ import { errorMessageAsString } from "utils/simple-error";
 import LoadingSpan from "components/LoadingSpan";
 import JobError from "components/JobInformation/JobError";
 import { Services } from "components/FilesDialog/services";
+import { ref, watch } from "vue";
+import { refDebounced } from "@vueuse/core";
+import ExternalLink from "./ExternalLink";
 
 library.add(faFolderOpen);
 library.add(faUpload);
@@ -83,13 +98,32 @@ library.add(faExternalLinkAlt);
 Vue.use(BootstrapVue);
 
 export default {
-    components: { FilesInput, FontAwesomeIcon, JobError, LoadingSpan },
+    components: { FilesInput, FontAwesomeIcon, JobError, LoadingSpan, ExternalLink },
+    setup() {
+        const sourceURL = ref("");
+        const debouncedURL = refDebounced(sourceURL, 200);
+        const mayBeHistoryUrlRegEx = /\/u(ser)?\/.+\/h(istory)?\/.+/;
+
+        const showImportUrlWarning = ref(false);
+
+        watch(
+            () => debouncedURL.value,
+            (val) => {
+                const url = val ?? "";
+                showImportUrlWarning.value = Boolean(url.match(mayBeHistoryUrlRegEx));
+            }
+        );
+
+        return {
+            sourceURL,
+            showImportUrlWarning,
+        };
+    },
     data() {
         return {
             initializing: true,
             importType: "externalUrl",
             sourceFile: null,
-            sourceURL: null,
             sourceRemoteFilesUri: null,
             errorMessage: null,
             waitingOnJob: false,

client/tests/jest/helpers.js

@@ -146,7 +146,13 @@ export const showAll = (vm) => {
 
 // waits n milliseconds and then promise resolves
 // usage: await wait(500);
-export const wait = (n) => timer(n).pipe(take(1)).toPromise();
+export const wait = (n) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, n);
+    });
+};
 
 // Gets a localVue with custom directives
 export function getLocalVue(instrumentLocalization = false) {