Merge pull request #13968 from hujambo-dunia/tours-vueified

Restore Tour List View as Vue Component [PR for issue #13796]

client/src/components/Tour/Tour.test.js

@@ -0,0 +1,30 @@
+import { shallowMount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import TourList from "./TourList.vue";
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import flushPromises from "flush-promises";
+
+const localVue = getLocalVue();
+const TEST_TOUR_URI = "/api/tours";
+
+jest.mock("app");
+
+describe("Tour", () => {
+    let axiosMock;
+    let wrapper;
+
+    beforeEach(async () => {
+        axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(TEST_TOUR_URI).reply(200, [{ id: "foo", writable: false }]);
+        wrapper = shallowMount(TourList, {
+            propsData: {},
+            localVue,
+        });
+        await flushPromises();
+    });
+
+    it("test tours", async () => {
+        expect(wrapper.find("#tourList").exists()).toBeTruthy();
+    });
+});

client/src/components/Tour/TourList.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="ui-thumbnails">
+        <h2>Galaxy Tours</h2>
+        <p>
+            This page presents a list of interactive tours available on this Galaxy server. Select any tour to get
+            started (and remember, you can click 'End Tour' at any time).
+        </p>
+        <h4>Tours</h4>
+        <div v-if="error" class="alert alert-danger">{{ error }}</div>
+        <div v-else>
+            <DelayedInput class="mb-3" :query="search" :placeholder="searchTours" :delay="0" @change="onSearch" />
+            <div v-for="tour in tours" :key="tour.id">
+                <ul v-if="match(tour)" id="tourList" class="list-group">
+                    <li class="list-group-item">
+                        <a :href="`${root}tours/${tour.id}`"> {{ tour.name || tour.id }} </a>&nbsp;&minus;&nbsp;
+                        {{ tour.description }}
+                        <span
+                            v-for="(tag, index) in tour.tags"
+                            :key="index"
+                            class="badge badge-primary text-capitalize">
+                            {{ tag }}
+                        </span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import _l from "utils/localization";
+import { getAppRoot } from "onload/loadConfig";
+import { urlData } from "utils/url";
+import DelayedInput from "components/Common/DelayedInput";
+
+export default {
+    components: {
+        DelayedInput,
+    },
+    data() {
+        return {
+            tours: [],
+            search: "",
+            error: null,
+            searchTours: _l("search tours"),
+        };
+    },
+    created() {
+        this.root = getAppRoot();
+        urlData({ url: `api/tours` })
+            .then((response) => {
+                this.tours = response;
+            })
+            .catch((error) => {
+                this.error = error;
+            });
+    },
+    methods: {
+        onSearch(newValue) {
+            this.search = newValue;
+        },
+        match(tour) {
+            const query = this.search.toLowerCase();
+            return (
+                !query ||
+                (tour.id && tour.id.toLowerCase().includes(query)) ||
+                (tour.name && tour.name.toLowerCase().includes(query)) ||
+                (tour.description && tour.description.toLowerCase().includes(query)) ||
+                (tour.tags && tour.tags.join().toLowerCase().includes(query))
+            );
+        },
+    },
+};
+</script>

client/src/entry/analysis/AnalysisRouter.js

@@ -23,6 +23,7 @@ import DatasetList from "components/Dataset/DatasetList";
 import { getUserPreferencesModel } from "components/User/UserPreferencesModel";
 import CustomBuilds from "components/User/CustomBuilds";
 import { runTour } from "components/Tour/runTour";
+import TourList from "components/Tour/TourList";
 import GridView from "mvc/grid/grid-view";
 import GridShared from "mvc/grid/grid-shared";
 import JobDetails from "components/JobInformation/JobDetails";
@@ -67,6 +68,7 @@ export const getAnalysisRouter = (Galaxy) => {
             "(/)login/confirm": "show_new_user_confirmation",
             "(/)tools/view": "show_tools_view",
             "(/)tools/json": "show_tools_json",
+            "(/)tours": "show_tours_list",
             "(/)tours(/)(:tour_id)": "show_tours",
             "(/)user(/)": "show_user",
             "(/)user(/)cloud_auth": "show_cloud_auth",
@@ -146,9 +148,12 @@ export const getAnalysisRouter = (Galaxy) => {
 
         show_tours: function (tour_id) {
             this.home();
-            if (tour_id) {
-                runTour(tour_id);
-            }
+            runTour(tour_id);
+        },
+
+        show_tours_list: function () {
+            this.home();
+            this._display_vue_helper(TourList);
         },
 
         show_new_user_confirmation: function () {

client/src/layout/menu.js

@@ -200,6 +200,11 @@ export function fetchMenu(options = {}) {
                 url: options.citation_url,
                 target: "_blank",
             },
+            {
+                title: _l("Interactive Tours"),
+                url: "tours",
+                target: "__use_router__",
+            },
             {
                 title: _l("Introduction to Galaxy"),
                 url: "welcome/new",